@uxda/appkit 4.0.12 → 4.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxda/appkit",
-  "version": "4.0.12",
+  "version": "4.0.14",
   "description": "小程序应用开发包",
   "main": "dist/index.js",
   "module": "dist/index.ts",

package/src/balance/components/DateFilter.vue

@@ -22,18 +22,18 @@
       <div class="btn confirm" @click="onOkClick">确定</div>
     </div>
     <div class="bottom"></div>
+    <nut-popup v-model:visible="datePickerOpen" position="bottom">
+      <nut-date-picker
+        v-model="focusedDate"
+        :min-date="minDate"
+        :max-date="maxDate"
+        :is-show-chinese="false"
+        :three-dimensional="false"
+        @cancel="datePickerOpen = false"
+        @confirm="onDatePickerComplete"
+      ></nut-date-picker>
+    </nut-popup>
   </div>
-  <nut-popup v-model:visible="datePickerOpen" position="bottom">
-    <nut-date-picker
-      v-model="focusedDate"
-      :min-date="minDate"
-      :max-date="maxDate"
-      :is-show-chinese="false"
-      :three-dimensional="false"
-      @cancel="datePickerOpen = false"
-      @confirm="onDatePickerComplete"
-    ></nut-date-picker>
-  </nut-popup>
 </template>
 
 <script lang="ts" setup>
@@ -126,6 +126,7 @@ function switchDateInput(shift: string) {
   display: flex;
   flex-direction: column;
   width: 100%;
+  position: relative;
   .date-filter-header {
     text-align: center;
     height: 44px;

package/src/balance/components/DateRange.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="date-range" @click="openDateFilter" v-show="filtering.to">
+  <div class="date-range" @click="openDateRangePicker">
     <div class="text number">{{ dateRangeDisplay }}</div>
     <img
       style="margin-top: -2px"
@@ -10,31 +10,47 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive } from 'vue'
+import { computed, PropType, reactive } from 'vue'
 import { useNutshell } from '@uxda/nutshell/taro'
 import DateFilter from './DateFilter.vue'
 import dayjs from 'dayjs'
 
 const $n = useNutshell()
 
-const filtering = reactive({
-  from: dayjs().add(-3, 'M').format('YYYY-MM-DD'),
-  to: dayjs().format('YYYY-MM-DD'),
+export type DateRangeModel = {
+  from: string,
+  to: string
+}
+
+const model = defineModel({
+  type: Object as PropType<DateRangeModel>,
+  required: false,
+  default: {
+    from: dayjs().add(-1, 'M').format('YYYY-MM-DD'),
+    to: dayjs().format('YYYY-MM-DD')
+  }
 })
 
-const openDateFilter = () => {
+const openDateRangePicker = () => {
   $n.sheet({
     component: DateFilter,
     props: {
-      from: '2024-08-01',
-      to: '2024-08-31',
+      from: model.value.from,
+      to: model.value.to,
+    },
+    onComplete (result: any) {
+      console.log('===openDateFilter complete', result)
+      model.value = {
+        from: result.from,
+        to: result.to
+      }
     }
   })
 }
 
 const dateRangeDisplay = computed(() => {
-  let startTime = (filtering.from || '').replace(/-/g, '.').substring(2)
-  let endTime = (filtering.to || '').replace(/-/g, '.').substring(2)
+  let startTime = (model.value.from || '').replace(/-/g, '.').substring(2)
+  let endTime = (model.value.to || '').replace(/-/g, '.').substring(2)
   return startTime + ' - ' + endTime
 })
 

package/src/balance/components/ListFilter.vue

@@ -9,16 +9,40 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive } from 'vue'
+import { computed, PropType, reactive } from 'vue'
 import { useNutshell } from '@uxda/nutshell/taro'
 import ListFilterPicker from './ListFilterPicker.vue'
 
 const $n = useNutshell()
 
+export type ListFilterValue = {
+    type: string,
+  }
+
+const model = defineModel({
+  type: Object as PropType<ListFilterValue>,
+  default: {
+    type: ''
+  },
+  required: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: ListFilterValue): void,
+  (e: 'change'): void,
+}>()
+
 const openPicker = () => {
   $n.sheet({
     component: ListFilterPicker,
-
+    props: {
+      modelValue: model,
+      onComplete: (result) => {
+        emit('update:modelValue', {
+          type: result[0]
+        })
+      }
+    }
   })
 }
 </script>

package/src/balance/components/ListFilterPicker.vue

@@ -1,19 +1,19 @@
 <template>
-  <div class="consumption-filter">
-    <div class="consumption-filter-title">
+  <div class="list-filter-picker">
+    <div class="list-filter-picker-title">
       <h3>选择筛选项</h3>
     </div>
     <div class="consumption-filter-content">
       <template v-for="(item, index) in filterSections" :key="index">
-        <div class="title">{{ item.title }}</div>
+        <div class="title">{{ item.label }}</div>
         <div class="info">
           <div
             v-for="(it, i) in item.data"
-            @click="() => onFilterSectionClick(index, it.code)"
-            :class="getItemClass(index, it.code)"
+            @click="() => onFilterSectionClick(item.name, it.value)"
+            :class="getItemClass(item.name, it.value)"
             class="info-item"
             :key="i">
-            {{ typeof it === 'string' ? it : it.name }}
+            {{ typeof it === 'string' ? it : it.label }}
           </div>
         </div>
       </template>
@@ -33,21 +33,22 @@ import { UniData, UniDataItem } from '@uxda/nutshell/taro'
 
 const $http = useHttp()
 
-interface ConsumptionFilterProps {
-  modelValue: ConsumptionFilterModelValue
+type ListFilterPickerModel = Record<string, string[]>
+
+interface ListFilterPickerProps {
+  modelValue: ListFilterPickerModel
 }
 
-const props = withDefaults(
-  defineProps<ConsumptionFilterProps>(), {
-    modelValue: () => ['全部', '全部', '全部', '']
-  }
-)
+const props =
+  defineProps<ListFilterPickerProps>()
+
 const emit = defineEmits(['complete'])
 
-const result = reactive<ConsumptionFilterModelValue>(props.modelValue)
+const result = ref<ListFilterPickerModel>(props.modelValue)
 
 type FilterSecion = {
-  title: string,
+  label: string,
+  name: string,
   data: UniDataItem[]
 }
 
@@ -56,54 +57,45 @@ type FilterSecion = {
  */
 const filterSections = ref<FilterSecion[]>([
   {
-    title: '类型',
-    data: consumptionPositions.map(s => ({code: s, name: s})),
-  },
-  {
-    title: '收入/支出',
-    data: consumptionDirections.map(s => ({code: s, name: s})),
-  },
-  {
-    title: '明细类型',
-    data: consumptionTypes.map(s => ({code: s, name: s})),
+    label: '明细类型',
+    name: 'type',
+    data: [
+      {
+        label: '全部',
+        value: ''
+      },
+      {
+        label: '提现',
+        value: 'withdrawal'
+      },
+      {
+        label: '收益',
+        value: 'income'
+      },
+      {
+        label: '兑换',
+        value: 'exchange'
+      }
+    ]
   },
-  {
-    title: '权益类目',
-    data: []
-  }
 ])
 
-const getItemClass = (index: number, value) => result[index] === value ? ['current'] : ['']
+const getItemClass = (name: string, value: string) => result.value[name]?.includes(value) ? ['current'] : ['']
 
-const onFilterSectionClick = (index: number, value: MixteValues) => {
-  result[index] = value
+const onFilterSectionClick = (index: string, value: string) => {
+  result.value[index] = [value]
 }
 
 const reset = () => {
-  result[0] = '全部'
-  result[1] = '全部'
-  result[2] = '全部'
-  result[3] = ''
+  result.value = {}
 }
 
-const 请求权益类目 = () => {
-  $http.get<权益类目[]>(endpoints.获取权益类目).then(data => {
-    filterSections.value[3].data = [
-      { code: '', name: '全部' },
-      ...data
-    ]
-  })
-}
-
-请求权益类目()
-
 const onOkClick = () => {
   emit('complete', result)
 }
 </script>
 <style lang="scss">
-.consumption-filter {
-  height: 100%;
+.list-filter-picker {
   display: flex;
   flex-direction: column;
   width: 100%;

package/src/shared/components/AppVerify.vue

@@ -4,20 +4,33 @@
     <p class="caption">{{ message || '短信将发送至账号绑定手机号' }}</p>
     <p class="number">{{ phone }}</p>
     <ns-form v-model="formData">
-      <ns-input name="code" placeholder="请输入验证码" variant="solid" :rules="['required', {
+      <ns-input
+        name="code"
+        v-model="formData.code"
+        placeholder="请输入验证码"
+        variant="solid"
+        :rules="['required', {
         name: 'function',
         message: '输入错误, 请重新输入',
-        method: (value: string) => value.length === 4,
-      }]">
+        method: (value: string) => value.length === 6,
+      }]"
+      >
         <template #append>
-          <ns-button v-if="!sent" size="xs" variant="plain" color="primary" @click="send" label="获取验证码" />
+          <ns-button
+            v-if="!sent"
+            size="xs"
+            variant="plain"
+            color="primary"
+            @click="send"
+            label="获取验证码"
+          />
           <div class="caption" v-if="sent">{{ countdown }} 秒收重新发送</div>
         </template>
       </ns-input>
     </ns-form>
     <div class="row buttons">
-      <ns-button round>取消</ns-button>
-      <ns-button round gradient="#FFEBC1,#FFD7A7,#FFB875/90">确认</ns-button>
+      <ns-button round @click="emits('cancel')">取消</ns-button>
+      <ns-button round gradient="#FFEBC1,#FFD7A7,#FFB875/90" @click="onOk">确认</ns-button>
     </div>
   </div>
 </template>
@@ -27,27 +40,29 @@ import { NsForm, NsInput, NsButton } from '@uxda/nutshell/taro'
 import { reactive, ref } from 'vue'
 
 export interface AppVerifyProps {
-  phone: string,
-  title?: string,
-  message?: string,
+  phone: string
+  title?: string
+  message?: string
+  onSend?: Function
 }
 
-const emit = defineEmits<{
-  (event: 'update:modelValue', value: boolean): void
-}>()
+const emits = defineEmits(['complete', 'cancel'])
 
 const sent = ref(false),
   countdown = ref(60)
 
 let formData = reactive({
-  code: ''
+  code: '',
 })
 
 const send = () => {
   sent.value = true
+
+  props.onSend && props.onSend()
+
   countdown.value = 60
   let timer = setInterval(() => {
-    countdown.value --
+    countdown.value--
     if (countdown.value <= 0) {
       clearInterval(timer)
       sent.value = false
@@ -55,12 +70,11 @@ const send = () => {
   }, 1000)
 }
 
-const onVisibleChange = (value: boolean) => {
-  emit('update:modelValue', value)
+const onOk = () => {
+  emits('complete', { code: formData.code })
 }
 
-defineProps<AppVerifyProps>()
-
+const props = defineProps<AppVerifyProps>()
 </script>
 
 <style lang="scss">
@@ -81,4 +95,4 @@ defineProps<AppVerifyProps>()
     }
   }
 }
-</style>
+</style>

package/src/shared/composables/index.ts

@@ -4,3 +4,4 @@ export * from './useCountdown'
 export * from './useValidator'
 export * from './useEncode'
 export * from './useUpload'
+export * from './useCrypto'

package/src/shared/composables/useCrypto.ts

@@ -0,0 +1,76 @@
+// 解析脱敏姓名、手机号码等
+
+export type CryptoConfig = {
+  maskField: string,
+  secretField: string,
+}
+
+export const defaultCryptoConfig: CryptoConfig = {
+  maskField: 'mask',
+  secretField: 'secretKey'
+}
+
+export type DecodeResult<T extends string> = {
+  [key in T | `${T}Secret`]: string
+}
+
+export type DefaultDecodeResult = DecodeResult<'masked'>
+
+export type DecodeFunction = (encoded: string, key: string) => DecodeResult<`${key}`>
+
+/**
+ * 解析以及解密脱敏数据
+ * @param config 
+ * @returns 
+ */
+export function useCrypto (config?: CryptoConfig) {
+
+  const conf = config || defaultCryptoConfig
+
+  const parse: DecodeFunction = (data: string, key?: string) => {
+    let k = key || 'masked'
+    let result: Record<string, any> = {}
+    try {
+      result = JSON.parse(data)
+      result = {
+        [k]: result.mask,
+        // 字段后加$表示用于解密的 secret
+        [`${k}$`]: result.secretKey
+      }
+    } catch (e) {}
+    return result
+  }
+
+  /**
+   * 批量解析数组内的数据
+   * @param list 
+   * @param field 
+   * @returns 
+   */
+  const resolve = (list: any[], field?: string | string[]) => {
+    const [first] = list,
+      f = field
+        ? Array.isArray(field) ? field : [field]
+        // 自动探测需要解密的字段
+        // '{"secretKey":"","mask":""}' 形式
+        : Object.entries(first)
+            .filter(([_, v]) => /^\{.*\}$/.test(v as string))
+            .map(([k]) => k)
+    return list
+      .map(item => {
+          let result = { ...item }
+          f.forEach(r => {
+            result = {
+              ...result,
+              ...parse(item[r], r)
+            }
+          })
+          return result
+      })
+  }
+
+  return {
+    parse,
+    resolve,
+  }
+}

package/src/user/components/UserEntry.vue

@@ -21,21 +21,12 @@
     <div class="user-entry-bd">
       <div v-if="!mobile" class="user-entry-bd-bigtxt" @click="toLogin">
         请登录
-        <img
-          class="user-entry-bd-bigtxt-icon"
-          mode="aspectFit"
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA0MCA0MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4wMSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDQwLjM1MTZINDBWMC4zNTE1NjJIMFY0MC4zNTE2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNCA4LjM1MTU2TDI2IDIwLjM1MTZMMTQgMzIuMzUxNiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC4wMSIvPgo8cGF0aCBkPSJNMTQgOC4zNTE1NkwyNiAyMC4zNTE2TDE0IDMyLjM1MTYiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg=="
-          alt=""
-        />
+        <span class="user-entry-bd-arrow">></span>
       </div>
       <template v-else>
         <div @click="toUser" class="user-entry-bd-txt">
           {{ name }}
-          <img
-            style="width: 14px; height: 14px; margin-left: 2px"
-            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjA4MzUgN0wxOC4wODM1IDE0TDExLjA4MzUgMjEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo="
-            alt=""
-          />
+          <span class="user-entry-bd-arrow">></span>
         </div>
         <div @click="toUser" class="user-entry-bd-smalltxt">{{ encodePhone(mobile) }}</div>
       </template>
@@ -137,6 +128,10 @@ const emits = defineEmits(['jump', 'login'])
       font-size: 15px;
       line-height: 21px;
     }
+    &-arrow {
+      font-size: 12px;
+      margin-left: 8px;
+    }
   }
 }
 </style>