@uxda/appkit 1.0.0

package/src/balance/components/BalanceReminder.vue

@@ -0,0 +1,82 @@
+<template>
+  <nut-popup
+    pop-class="balance-reminder-popup"
+    round
+    teleport="#app"
+    :visible="modelValue"
+    :close-on-click-overlay="false">
+    <div class="balance-reminder">
+      <div class="body">
+        <h2>操作失败</h2>
+        <p>您的账户余额可能不足，请充值后再进行查询</p>
+      </div>
+      <div class="footer">
+        <div class="col">
+          <nut-button
+            class="cancel-button"
+            @click="emit('update:modelValue', false)"
+            shape="square" block>取消</nut-button>
+        </div>
+        <div class="col">
+          <nut-button 
+            shape="square" block
+            class="recharge-button"
+            @click="emit('recharge')">去充值</nut-button>
+        </div>
+      </div>
+    </div>
+  </nut-popup>
+</template>
+
+<script setup lang="ts">
+interface BalanceReminderProps {
+  modelValue: boolean
+}
+
+const emit = defineEmits(['recharge', 'update:modelValue'])
+
+withDefaults(
+  defineProps<BalanceReminderProps>(), {
+    modelValue: () => false
+  }
+)
+</script>
+
+<style lang="scss">
+.balance-reminder-popup {
+  width: 80%;
+}
+.balance-reminder {
+  h2 {
+    font-size: 18px;
+    font-weight: bold;
+  }
+  .body {
+    height: 120px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2em;
+    font-size: 12px;
+    text-align: center;
+  }
+  .footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: stretch;
+    align-items: center;
+    .col {
+      flex-grow: 1;
+      padding: 6px;
+    }
+    .nut-button {
+      border: 0;
+    }
+    .recharge-button {
+      color: #060;
+    }
+  }
+}
+</style>

package/src/balance/components/ConsumptionFilter.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="consumption-filter">
+    <div class="consumption-filter-title">选择筛选项</div>
+    <div class="consumption-filter-content">
+      <template v-for="(item, index) in filterSections" :key="index">
+        <div class="title">{{ item.title }}</div>
+        <div class="info">
+          <div
+            v-for="(it, i) in item.data"
+            @click="() => onFilterSectionClick(index, it)"
+            :class="getItemClass(index, it)"
+            class="info-item"
+            :key="i">
+            {{ it }}
+          </div>
+        </div>
+      </template>
+    </div>
+    <div class="consumption-filter-btn spa-between">
+      <div class="btn" @click="reset">重置</div>
+      <div class="btn confirm" @click="onOkClick">确定</div>
+    </div>
+    <div class="consumption-filter-bottom"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue'
+import {
+  type ConsumptionDirection, 
+  type ConsumptionPosition, 
+  type ConsumptionType,
+  consumptionDirections,
+  consumptionPositions,
+  consumptionTypes
+} from '../types'
+
+type ConsumptionFilterModelValue = [
+    ConsumptionPosition | '全部',
+    ConsumptionDirection | '全部',
+    ConsumptionType | '全部',
+  ]
+type MixteValues =
+    ConsumptionPosition |
+    ConsumptionDirection |
+    ConsumptionType | '全部'
+
+interface ConsumptionFilterProps {
+  modelValue: ConsumptionFilterModelValue
+}
+
+const props = withDefaults(
+  defineProps<ConsumptionFilterProps>(), {
+    modelValue: () => ['全部', '全部', '全部']
+  }
+)
+const emit = defineEmits(['complete'])
+
+const result = reactive<ConsumptionFilterModelValue>(props.modelValue)
+
+const filterSections = [
+  {
+    title: '类型',
+    data: consumptionPositions,
+  },
+  {
+    title: '收入/支出',
+    data: consumptionDirections,
+  },
+  {
+    title: '明细类型',
+    data: consumptionTypes,
+  }
+]
+
+const getItemClass = (index: number, value) => result[index] === value ? ['current'] : ['']
+
+const onFilterSectionClick = (index: number, value: MixteValues) => {
+  result[index] = value
+}
+
+const reset = () => {
+}
+
+const onOkClick = () => {
+  emit('complete', result)
+}
+
+
+</script>
+<style lang="scss">
+.consumption-filter {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  &-title {
+    height: 44px;
+    line-height: 44px;
+    font-size: 17px;
+    color: #353535;
+    background: #f5f5f5;
+    text-align: center;
+  }
+  &-content {
+    flex: 1;
+    margin: 15px;
+    overflow-y: scroll;
+    color: #353535;
+    font-size: 13px;
+    .title {
+      opacity: 0.6;
+      line-height: 18px;
+    }
+    .info {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-gap: 10px;
+      margin: 10px 0;
+      &-item {
+        height: 30px;
+        line-height: 30px;
+        border: 1px solid #ccc;
+        border-radius: 6px;
+        text-align: center;
+      }
+      .current {
+        border: 1px solid;
+        border-image-source: linear-gradient(
+          180deg,
+          rgba(239, 208, 130, 0.8) 0%,
+          rgba(255, 185, 120, 0.8) 100%
+        );
+        background: linear-gradient(
+            180deg,
+            rgba(239, 208, 130, 0.8) 0%,
+            rgba(255, 185, 120, 0.8) 100%
+          ),
+          linear-gradient(180deg, #fff7e3 0%, #fefde6 100%);
+      }
+    }
+  }
+  &-btn {
+    margin: 0 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .btn {
+      flex: 1;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border: 1px solid #ccc;
+      box-sizing: border-box;
+      color: #666;
+      font-size: 16px;
+      border-radius: 6px;
+    }
+    .confirm {
+      margin-left: 11px;
+      color: #000;
+      border: none;
+      background: linear-gradient(
+        90deg,
+        #ffebc1 0%,
+        #ffd7a7 52.29%,
+        #ffb875 100%
+      );
+    }
+  }
+  &-bottom {
+    height: 32px;
+    background: #fff;
+  }
+}
+</style>

package/src/balance/components/ConsumptionRules.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="consumption-rules">
+    <div class="title">规则说明</div>
+    <div class="desc">
+      <div class="desc-title">【云豆】</div>
+      <div>
+        1、云豆系大道云平台为用户提供的数字化商品，用于大道云平台上的产品权益抵扣使用。
+      </div>
+      <div>
+        人民币与云豆的兑换比例：1人民币=10云豆。云豆购买成功过后不可转让或者逆向兑换。
+      </div>
+      <div>
+        2、云豆的使用范围：云豆可用于抵扣AI审批单笔权益、电子签约单笔权益、蜂鸟周转系统单笔权益等，具体抵扣标准详细见各产品页面。
+      </div>
+      <div class="desc-title">【小云豆】</div>
+      <div>
+        1、小云豆系大道云平台单方面为用户赠送的数字化商品，用于大道云平台上的指定产品权益抵扣使用。小云豆仅用于指定的产品权益抵扣使用。小云豆与云豆之间不能相互转换，也无法逆向兑换成人民币。
+      </div>
+      <div>
+        2、小云豆的使用范围：小云豆可用于抵扣AI审批单笔权益、电子签约单笔权益、蜂鸟周转系统单笔权益等，具体抵扣标准详细见各产品页面。
+      </div>
+    </div>
+    <div class="know" @click="emit('complete')">我知道了</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+const emit = defineEmits(['complete'])
+
+</script>
+<style lang="scss">
+.consumption-rules {
+  .title {
+    line-height: 16px;
+    font-weight: 500;
+    color: #1a1a1a;
+    font-size: 16px;
+    text-align: center;
+    width: 100%;
+  }
+  .desc {
+    flex: 1;
+    font-size: 14px;
+    line-height: 21px;
+    color: #666;
+    overflow-y: scroll;
+    margin: 10px 0;
+    &-title {
+      font-weight: 600;
+    }
+  }
+  .know {
+    background: linear-gradient(
+      90deg,
+      #ffebc1 0%,
+      #ffd7a7 52.29%,
+      #ffb875 100%
+    );
+    height: 30px;
+    line-height: 30px;
+    font-size: 14px;
+    color: #353535;
+    border-radius: 15px;
+    width: 130px;
+    margin: 0 auto;
+    text-align: center;
+  }
+}
+</style>

package/src/balance/components/DateFilter.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="consumption-date-filter">
+    <div class="date-filter-header">日期选择</div>
+    <div class="content">
+      <div class="title">自定义</div>
+      <div class="time">
+        <div
+          class="item"
+          :class="focused === 'from' ? 'current' : ''"
+          @click="switchDateInput('from')">
+          {{ formatDate(result.from) }}
+        </div>
+        <div class="line">-</div>
+        <div
+          class="item"
+          :class="focused === 'to' ? 'current' : ''"
+          @click="switchDateInput('to')">
+          {{ formatDate(result.to) }}
+        </div>
+      </div>
+    </div>
+    <div class="buttons spa-between">
+      <div class="btn" @click="resetTime">重置</div>
+      <div class="btn confirm" @click="onOkClick">确定</div>
+    </div>
+    <div class="bottom"></div>
+  </div>
+  <nut-datepicker
+    v-model="focusedDate"
+    v-model:visible="datePickerOpen"
+    :min-date="minDate"
+    :max-date="maxDate"
+    :is-show-chinese="false"
+    :three-dimensional="false"
+    @confirm="onDatePickerComplete"></nut-datepicker>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+
+type DateFilterProps = {
+  from: string,
+  to: string,
+}
+
+const props = defineProps<DateFilterProps>()
+
+const emit = defineEmits(['complete'])
+const result = reactive<DateFilterProps>({...props})
+
+/**
+ * 目前激活的日期输入框
+ */
+const focused = ref<string>('from')
+const focusedDate = ref<any>(props.from)
+
+const minDate = ref<any>()
+const maxDate = ref<Date>(new Date())
+const datePickerOpen = ref<boolean>(false)
+
+function resetTime() {
+  result.from = props.from
+  result.from = props.to
+}
+
+function onOkClick() {
+  emit('complete', result)
+}
+
+function formatDate (date: string) {
+  const [year, month, day] = date.split('-')
+  return year + '年' + month + '月' + day + '日'
+}
+
+function onDatePickerComplete ({ selectedValue, selectedOptions }) {
+  console.log('onDatePickerComfirm_______________________', selectedValue, selectedOptions)
+  let time = selectedOptions.map((val: any) => val.text).join('-')
+  if (focused.value === 'from') {
+    // 如果选择的时间比结束时间大，结束时间改为开始时间
+    result.from = new Date(time) > new Date(result.to)
+      ? result.to
+      : time
+  } else {
+    result.to = time
+  }
+}
+
+/**
+ * 切换时间逻辑：初始化时有时间，默认聚焦开始时间
+ * 当选择开始时间大于结束时间，结束时间改为开始时间
+ * 时间选择器都要小于当前时间，结束时间的时间选择器要以开始时间为最小值，
+ */
+ function switchDateInput (shift: string) {
+  // 要设置一下结束时间的起始值 开始时间往前倒5年
+  if (shift === 'from') {
+    let time = result.from
+      .split('-')
+      .map(Number)
+    minDate.value = new Date(time[0] - 5, 1, 1)
+  } else {
+    let time = result.from
+      .split('-')
+      .map(Number)
+    minDate.value = new Date(time[0], time[1] - 1, time[2])
+  }
+  focusedDate.value = new Date(result[shift])
+  focused.value = shift
+  datePickerOpen.value = true
+}
+</script>
+<style lang="scss">
+.consumption-date-filter {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  .date-filter-header {
+    text-align: center;
+    height: 44px;
+    line-height: 44px;
+    color: #353535;
+    font-size: 17px;
+    background-color: #f5f5f5;
+  }
+  .content {
+    flex: 1;
+    margin: 15px;
+    overflow-y: scroll;
+    color: #353535;
+    font-size: 13px;
+    .title {
+      opacity: 0.6;
+      line-height: 18px;
+    }
+    .info {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-gap: 10px;
+      margin: 10px 0;
+      .item {
+        height: 30px;
+        line-height: 30px;
+        border: 1px solid #ccc;
+        border-radius: 6px;
+        text-align: center;
+      }
+      .current {
+        border: 1px solid;
+        border-image-source: linear-gradient(
+          180deg,
+          rgba(239, 208, 130, 0.8) 0%,
+          rgba(255, 185, 120, 0.8) 100%
+        );
+        background: linear-gradient(
+            180deg,
+            rgba(239, 208, 130, 0.8) 0%,
+            rgba(255, 185, 120, 0.8) 100%
+          ),
+          linear-gradient(180deg, #fff7e3 0%, #fefde6 100%);
+      }
+    }
+  }
+  .buttons {
+    margin: 0 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .btn {
+      flex: 1;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border: 1px solid #ccc;
+      box-sizing: border-box;
+      color: #666;
+      font-size: 16px;
+      border-radius: 6px;
+    }
+    .confirm {
+      margin-left: 11px;
+      color: #000;
+      border: none;
+      background: linear-gradient(
+        90deg,
+        #ffebc1 0%,
+        #ffd7a7 52.29%,
+        #ffb875 100%
+      );
+    }
+  }
+  .time {
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    margin: 10px 0 30px 0;
+    .line {
+      margin: 0 8px;
+    }
+    .item {
+      height: 30px;
+      line-height: 30px;
+      padding: 0 15px;
+      font-size: 13px;
+      color: #353535;
+      border: 1px solid transparent;
+      box-sizing: border-box;
+      background: rgba(#f5f5f5, 0.8);
+      border-radius: 6px;
+    }
+    .current {
+      border: 1px solid #353535;
+    }
+  }
+  .bottom {
+    height: 32px;
+    background: #fff;
+  }
+}
+</style>

package/src/balance/components/index.ts

@@ -0,0 +1,9 @@
+import BalanceCard from './BalanceCard.vue'
+import AccountView from './AccountView.vue'
+import BalanceReminder from './BalanceReminder.vue'
+
+export {
+  BalanceCard,
+  AccountView,
+  BalanceReminder,
+}

package/src/balance/index.ts

@@ -0,0 +1 @@
+export * from './components'

package/src/balance/types.ts

@@ -0,0 +1,92 @@
+
+export const consumptionTypes = [
+  '全部',
+  '充值',
+  '缴费',
+  '返额',
+  '增加',
+  '扣减',
+  '消耗',
+  '退回'
+] as const
+
+export type ConsumptionType = typeof consumptionTypes[number]
+
+export const consumptionPositions = [
+  '全部',
+  '云豆',
+  '小云豆',
+] as const
+
+export type ConsumptionPosition = typeof consumptionPositions[number]
+
+export const consumptionDirections = [
+  '全部',
+  '收入',
+  '支出',
+] as const
+
+export type ConsumptionDirection = typeof consumptionDirections[number]
+
+/**
+ * 账户流水
+ */
+export type Consumption = {
+  /**
+   * 数量
+   */
+  amount: number
+  /**
+   * 交易名称
+   */
+  title: string
+  /**
+   * 交易说明
+   */
+  description: string
+  /**
+   * 交易时间
+   **/
+  time: number,
+  /**
+   * 交易类型类型
+   */
+  type: ConsumptionType,
+  /**
+   * 账户类型
+   */
+  position: ConsumptionPosition
+  /**
+   * 收入/支出
+   */
+  direction: ConsumptionDirection
+}
+
+/**
+ * 账户流水筛选项
+ */
+export type ConsumptionFiltering = Pick<Consumption, 'type' | 'position' | 'direction'> & {
+  dateFrom: string,
+  dateTo: string
+}
+
+export type ConsumptionGroup = {
+  date: string,
+  consumptions: Consumption[]
+}
+
+export type ConsumptionGroups = {
+  list: ConsumptionGroup[]
+  from: string,
+  to: string,
+}
+
+export type Privilege = {
+  title: string,
+  amount: number
+}
+
+export type Balance = {
+  total: number,
+  privileges: Privilege[]
+}

package/src/global.ts

@@ -0,0 +1,7 @@
+const globalData: any = {
+
+}
+
+export {
+  globalData
+}

package/src/index.ts

@@ -0,0 +1,51 @@
+import { App } from 'vue'
+import { components as paymentComponents } from './payment/components'
+import {
+  Grid,
+  GridItem,
+  Button,
+  Checkbox,
+  Popup,
+  OverLay,
+  Icon,
+  DatePicker,
+} from '@nutui/nutui-taro'
+import { type AppKitOptions, useAppKitOptions } from './Appkit'
+
+const nutComponents = [
+  Grid,
+  GridItem,
+  Button,
+  Checkbox,
+  Popup,
+  OverLay,
+  Icon,
+  DatePicker,
+]
+
+const appComponents = {
+  ...paymentComponents
+}
+
+const AppKit = {
+  install (app: App, options: AppKitOptions) {
+    const appKitOptions = useAppKitOptions()
+    appKitOptions.token = options.token
+    appKitOptions.baseUrl = options.baseUrl
+    nutComponents.forEach(component => {
+      app.use(component)
+    })
+    Object.entries(appComponents).forEach(([name, component]) => {
+      app.component(name, component)
+    })
+  }
+}
+
+export default AppKit
+
+export * from './payment'
+export * from './balance'
+export * from './shared'
+export {
+  type AppKitOptions
+}

package/src/main.scss

@@ -0,0 +1 @@
+@import url(./styles/vars.scss);