@uxda/appkit 1.2.73 → 1.2.76

package/src/components/bt-cropper/utils/calcCropper.js

@@ -0,0 +1,42 @@
+import ratio from './ratio'
+import calcRightAndBottom from './calcRightAndBottom'
+const defaultImagePosition = {
+  left: 0,
+  top: 0,
+  width: 9,
+  height: 16
+}
+const defaultTarget = {
+  width: 2,
+  height: 1
+}
+/**
+ * 计算初始的裁剪框位置
+ * @param {*} imagePosition
+ * @param {*} target
+ */
+export default function (imagePosition = defaultImagePosition, target = defaultTarget) {
+  const cropperPosition = {
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    width: 0,
+    height: 0
+  }
+  const targetRatio = ratio(target.width, target.height)
+  const imageRatio = ratio(imagePosition.width, imagePosition.height)
+  if (targetRatio > imageRatio) {
+    cropperPosition.width = imagePosition.width
+    cropperPosition.height = cropperPosition.width / targetRatio
+    cropperPosition.left = imagePosition.left
+    cropperPosition.top = (imagePosition.height - cropperPosition.height) / 2 + imagePosition.top
+  } else {
+    cropperPosition.height = imagePosition.height
+    cropperPosition.width =
+      targetRatio === 0 ? imagePosition.width : cropperPosition.height * targetRatio
+    cropperPosition.left = (imagePosition.width - cropperPosition.width) / 2 + imagePosition.left
+    cropperPosition.top = imagePosition.top
+  }
+  return calcRightAndBottom(cropperPosition)
+}

package/src/components/bt-cropper/utils/calcImagePosition.js

@@ -0,0 +1,23 @@
+import calcRightAndBottom from './calcRightAndBottom'
+const defaultPosition = {
+  left: 0,
+  top: 0,
+  width: 0,
+  height: 0
+}
+const defaultTransfrom = {
+  imgTranslateX: 0,
+  imgTranslateY: 0,
+  imgScale: 1
+}
+// 先默认变换原点在中间
+export default function (imagePosition = defaultPosition, transfrom = defaultTransfrom) {
+  const width = imagePosition.width * transfrom.imgScale
+  const height = imagePosition.height * transfrom.imgScale
+  return calcRightAndBottom({
+    left: imagePosition.left + transfrom.imgTranslateX - (width - imagePosition.width) / 2,
+    top: imagePosition.top + transfrom.imgTranslateY - (height - imagePosition.height) / 2,
+    width,
+    height
+  })
+}

package/src/components/bt-cropper/utils/calcImageSize.js

@@ -0,0 +1,37 @@
+import ratio from './ratio.js'
+export default async function (
+  imageInfo,
+  container = {
+    width: 9,
+    height: 16
+  }
+) {
+  const defaultcontainer = {
+    width: 9,
+    height: 16
+  }
+  if (!container) {
+    container = defaultcontainer
+  }
+  const containerRatio = ratio(container.width, container.height)
+  const imageRatio = ratio(imageInfo.width, imageInfo.height)
+  if (containerRatio > imageRatio) {
+    const width = container.height * imageRatio
+    const height = container.height
+    return {
+      width,
+      height,
+      left: (container.width - width) / 2,
+      top: 0
+    }
+  } else {
+    const width = container.width
+    const height = container.width / imageRatio
+    return {
+      width,
+      height,
+      left: 0,
+      top: (container.height - height) / 2
+    }
+  }
+}

package/src/components/bt-cropper/utils/calcPointDistance.js

@@ -0,0 +1,12 @@
+/**
+ * 计算两点之间距离
+ * @param {*} point1
+ * @param {*} point2
+ */
+export default function (point1 = [0, 0], point2 = [0, 0]) {
+  const X1 = point1[0],
+    X2 = point2[0],
+    Y1 = point1[1],
+    Y2 = point2[1]
+  return Math.sqrt(Math.pow(X1 - X2, 2) + Math.pow(Y1 - Y2, 2))
+}

package/src/components/bt-cropper/utils/calcRightAndBottom.js

@@ -0,0 +1,7 @@
+export default function (position) {
+  return {
+    ...position,
+    right: position.left + position.width,
+    bottom: position.top + position.height
+  }
+}

package/src/components/bt-cropper/utils/ratio.js

@@ -0,0 +1,3 @@
+export default function (width = 2, height = 1) {
+  return width / height
+}

package/src/components/bt-cropper/utils/tools.js

@@ -0,0 +1,25 @@
+export function getTouchPoints(touchs) {
+  return Array.from(touchs).map((ev) => {
+    return [ev.clientX, ev.clientY]
+  })
+}
+export function debounce(fn, wait = 200) {
+  var timer = null
+  console.log('debounce')
+  return function () {
+    if (timer !== null) {
+      clearTimeout(timer)
+    }
+    timer = setTimeout(fn, wait)
+  }
+}
+
+/**
+ * @description 睡眠
+ * @param {number} time 等待时间毫秒数
+ */
+export function sleep(time = 200) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, time)
+  })
+}

package/src/components/dd-search/index.vue

@@ -119,7 +119,7 @@ const isFoucs = ref(props.focus)
   }
   &.focus {
     .dd-search__form {
-      border-color: #017fff;
+      border-color: var(--app-primary-color, #017fff);
     }
   }
   &__placeholder {
@@ -143,7 +143,7 @@ const isFoucs = ref(props.focus)
     width: 100%;
     box-sizing: border-box;
     padding: 0 10px;
-    caret-color: #017fff;
+    caret-color: var(--app-primary-color, #017fff);
   }
   &__prefix,
   &__suffix {
@@ -155,7 +155,7 @@ const isFoucs = ref(props.focus)
     line-height: 33px;
     padding: 0 10px;
     font-size: 16px;
-    color: #017fff;
+    color: var(--app-primary-color, #017fff);
   }
   &.disabled &__suffix {
     display: none;

package/src/components/dd-skeleton/doc.md

@@ -0,0 +1,19 @@
+# ddSkeleton 骨架屏
+
+#
+## 使用
+
+``` javascript
+import ddSkeleton from '~/components/ddSkeleton/index.vue'
+```
+``` html
+<dd-skeleton @onSuccess="onSuccess" />
+```
+
+## Prop
+
+| 字段       | 说明        | 类型    | 默认值   |
+|-----------|-------------|---------|----------|
+| row       | 大骨架个数     | number  | 3    |
+| shortRow   | 短骨架的行数    | string  | 2     |
+| longRow    | 长骨架的行数    | string  | 3     |

package/src/components/dd-skeleton/index.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface PropType {
+  row?: number
+  shortRow?: string
+  longRow?: string
+}
+
+withDefaults(defineProps<PropType>(), {
+  row: 3,
+  shortRow: '2',
+  longRow: '4',
+})
+</script>
+
+<template>
+  <div class="dd-skeleton">
+    <div class="dd-skeleton__item" v-for="(item, key) in row" :key="key">
+      <nut-skeleton
+        width="40%"
+        height="15px"
+        animated
+        v-if="Number(shortRow) > 0"
+        :row="shortRow"
+      ></nut-skeleton>
+      <nut-skeleton width="100%" height="15px" title animated :row="longRow"></nut-skeleton>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.dd-skeleton {
+  &__item {
+    margin-top: 10px;
+  }
+}
+</style>

package/src/index.ts

@@ -85,4 +85,5 @@ export * from './balance'
 export * from './shared'
 export * from './register'
 export * from './notice'
+export * from './user'
 export { type AppKitOptions }

package/src/notice/components/NoticeBanner.vue

@@ -236,7 +236,7 @@ const emits = defineEmits(['detail', 'close', 'view', 'popup'])
     text-align: left;
   }
   &-btn {
-    color: #017fff;
+    color: var(--app-primary-color, #017fff);
     padding-left: 6px;
   }
 }

package/src/notice/components/NoticeList.vue

@@ -132,6 +132,8 @@ function formatMinutes(time: number) {
   const diffInMinutes = end.diff(start, 'minute')
   if (diffInMinutes < 60 && diffInMinutes > 0) {
     return `${diffInMinutes}分钟前`
+  } else if (diffInMinutes === 0) {
+    return `刚刚`
   }
 
   return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
@@ -287,7 +289,7 @@ const emits = defineEmits(['view'])
   }
   &-file {
     font-size: 10px;
-    color: #017fff;
+    color: var(--app-primary-color, #017fff);
     opacity: 0.5;
   }
   .cue-text {

package/src/notice/components/index.ts

@@ -1,6 +1,5 @@
 import NoticeBanner from './NoticeBanner.vue'
-import LoginSetting from './LoginSetting.vue'
 import NoticeEntry from './NoticeEntry.vue'
 import NoticeList from './NoticeList.vue'
 
-export { NoticeBanner, LoginSetting, NoticeEntry, NoticeList }
+export { NoticeBanner, NoticeEntry, NoticeList }

package/src/shared/components/DeviceVersion.vue

@@ -14,6 +14,7 @@ import DdNoticeBar from '../../components/dd-notice-bar/index.vue'
 import { useSafeArea } from '../composables'
 import Taro from '@tarojs/taro'
 import { useHttp } from '../../balance/api'
+import debounce from 'lodash/debounce'
 
 const showAlert = ref(false)
 const safeArea = useSafeArea()
@@ -24,7 +25,7 @@ const topStype = computed(() => {
 
 const recommendVersions = ref()
 // 获取系统配置 - 小程序推荐版本
-async function getPropertieByCode() {
+const getPropertieByCode = debounce(async () => {
   if (recommendVersions.value) return
 
   const $http = useHttp()
@@ -35,7 +36,7 @@ async function getPropertieByCode() {
     .then((res: any) => {
       recommendVersions.value = JSON.parse(res.value || '{}')
     })
-}
+}, 100)
 
 onMounted(async () => {
   await getPropertieByCode()

package/src/shared/composables/index.ts

@@ -1,2 +1,5 @@
 export * from './useSafeArea'
 export * from './useTabbar'
+export * from './useCountdown'
+export * from './useValidator'
+export * from './useEncode'

package/src/shared/composables/useCountdown.ts

@@ -0,0 +1,46 @@
+/**
+ * @description: 倒计时
+ * @param {number} time
+ * @return {*}
+ */
+import { ref, onUnmounted, computed } from 'vue'
+
+export function useCountdown() {
+  let timer: any = null
+  const countdown = ref(60)
+  const countdownActive = computed(() => countdown.value > 0 && countdown.value < 60)
+
+  const startCountdown = () => {
+    countdown.value = 60
+    timer = setInterval(() => {
+      countdown.value--
+      if (countdown.value <= 0) {
+        stopCountdown()
+      }
+    }, 1000)
+  }
+
+  const stopCountdown = () => {
+    clearInterval(timer)
+    countdown.value = 60 // 重置倒计时
+  }
+
+  onUnmounted(() => {
+    // stopCountdown() // 组件卸载时确保清除定时器
+  })
+
+  const countdownText = computed(() => {
+    if (countdown.value === 60) {
+      return '获取验证码'
+    } else {
+      return `重新发送(${countdown.value}s)`
+    }
+  })
+
+  return {
+    countdownActive,
+    countdownText,
+    startCountdown,
+    stopCountdown,
+  }
+}

package/src/shared/composables/useDragBox.ts

@@ -0,0 +1,97 @@
+/**
+ * 元素拖拽功能
+ */
+import Taro from '@tarojs/taro'
+import { reactive } from 'vue'
+
+export function useDragBox() {
+  const dragData = reactive({
+    left: 0, // 浮动按钮的左边距
+    top: 0, // 浮动按钮的上边距
+    width: 0, // 浮动按钮的宽度
+    height: 0, // 浮动按钮的高度
+    startX: 0, // 手指触摸起始点的横坐标
+    startY: 0, // 手指触摸起始点的纵坐标
+    screenWidth: 0, // 屏幕宽度
+    screenHeight: 0, // 屏幕高度
+    isDrag: false, // 是否开始拖拽
+    oldLeft: 0,
+    limitHorizontal: [0, 0], // 横向拖动限制范围
+    limitVertical: [0, 0], // 纵向拖动限制范围
+  })
+
+  // 初始化元素拖拽模型
+  function initDragData(data: any) {
+    // 获取屏幕宽度和高度
+    const res = Taro.getSystemInfoSync()
+    dragData.screenWidth = res.windowWidth
+    dragData.screenHeight = res.windowHeight
+    if (!data) data = {}
+
+    const scale = dragData.screenWidth / 375
+    dragData.width = data.width * scale || 0
+    dragData.height = data.height * scale || 0
+    dragData.left = data.left * scale || 0
+    dragData.top = data.top * scale || 0
+    dragData.oldLeft = data.left * scale || 0
+
+    if (data?.limitHorizontal?.length) {
+      dragData.limitHorizontal = data?.limitHorizontal
+    }
+    if (data?.limitVertical?.length) {
+      dragData.limitVertical = data?.limitVertical
+    }
+  }
+
+  // 触屏开始
+  function onDragStart(event: any) {
+    dragData.startX = event.touches[0].clientX
+    dragData.startY = event.touches[0].clientY
+    dragData.isDrag = true
+  }
+
+  // 触屏移动
+  function onDragMove(event: any) {
+    const moveX = event.touches[0].clientX - dragData.startX
+    const moveY = event.touches[0].clientY - dragData.startY
+
+    let left = dragData.left + moveX
+    let top = dragData.top + moveY
+
+    // 防止浮动按钮移出屏幕
+    if (left < dragData.limitHorizontal[0]) {
+      left = dragData.limitHorizontal[0]
+    } else if (left > dragData.screenWidth - dragData.width - dragData.limitHorizontal[1]) {
+      left = dragData.screenWidth - dragData.width - dragData.limitHorizontal[1]
+    }
+
+    if (top < dragData.limitVertical[0]) {
+      top = dragData.limitVertical[0]
+    } else if (top > dragData.screenHeight - dragData.height - dragData.limitVertical[1]) {
+      top = dragData.screenHeight - dragData.height - dragData.limitVertical[1]
+    }
+
+    dragData.left = left
+    dragData.top = top
+
+    dragData.startX = event.touches[0].clientX
+    dragData.startY = event.touches[0].clientY
+
+    // 阻止页面滚动
+    event.preventDefault()
+  }
+
+  // 触屏结束
+  function onDragEnd() {
+    dragData.isDrag = false
+    dragData.left = dragData.oldLeft
+  }
+
+  return {
+    dragData,
+    initDragData,
+    onDragStart,
+    onDragMove,
+    onDragEnd,
+  }
+}

package/src/shared/composables/useEncode.ts

@@ -0,0 +1,43 @@
+/**
+ * @description: 脱敏相关方法
+ */
+
+export function useEncode() {
+  // 姓名脱敏
+  function encodeName(name: string) {
+    name = name.trim()
+    if (name.length > 2) {
+      return name[0].padEnd(name.length - 1, '*') + (name[name.length - 1] || '')
+    }
+    if (name.length == 0) {
+      return ''
+    } else {
+      return name[0].padEnd(name.length, '*')
+    }
+  }
+
+  // 证件脱敏
+  function encodeCard(card: string) {
+    if (card.length === 18) {
+      return card.replace(/(\d{6})\d{8}(\d{3}.)/g, '$1********$2')
+    } else {
+      return card
+    }
+  }
+
+  // 手机脱敏
+  function encodePhone(phone: string) {
+    phone = String(phone)
+    if (phone.length === 11) {
+      return phone.replace(/(1\d{2})\d{4}(\d{4})/g, '$1****$2')
+    } else {
+      return phone
+    }
+  }
+
+  return {
+    encodeName,
+    encodeCard,
+    encodePhone,
+  }
+}

package/src/shared/composables/useValidator.ts

@@ -0,0 +1,31 @@
+/**
+ * 通用表单校验器
+ */
+import { isMobilePhone, isIdentityCard } from 'validator'
+
+export function useValidator() {
+  // 身份证号码校验
+  function certNoValidator(value: unknown) {
+    if (!value) {
+      return '请输入身份证号'
+    } else if (!isIdentityCard(value, 'zh-CN')) {
+      return '请输入正确的身份证号码'
+    }
+    return false
+  }
+
+  // 电话号码校验
+  function phoneValidator(value: unknown) {
+    if (!value) {
+      return '请输入手机号码'
+    } else if (!isMobilePhone(value, 'zh-CN')) {
+      return '请输入正确的手机号'
+    }
+    return false
+  }
+
+  return {
+    certNoValidator,
+    phoneValidator,
+  }
+}

package/src/shared/http/Http.ts

@@ -66,9 +66,10 @@ const request: HttpInstance['request'] = <T>(config: HttpRequestConfig) => {
             // 前端要求分页
             // 在 endpoints transform 之前格式化分页数据
             // 并拼装回原 raw 数据
-            const paging = (config.data as RequestData).page
-              ? (clientConfig.paging as Paging).transform(raw.data)
-              : void 0
+            const paging =
+              config.data && config.data.page
+                ? (clientConfig.paging as Paging).transform(raw.data)
+                : void 0
             resolve(
               paging
                 ? ({

package/src/user/api/endpoints.ts

@@ -0,0 +1,17 @@
+import { HttpEndpoints } from '../../shared/http'
+
+const endpointsList: HttpEndpoints = {}
+
+const endpoints = Object.fromEntries(
+  Object.entries(endpointsList).map(([name, def]) => [name, def.path])
+)
+
+const translates = Object.fromEntries(
+  Object.entries(endpointsList).map(([, def]) => [def.path, def.translate])
+)
+
+const transforms = Object.fromEntries(
+  Object.entries(endpointsList).map(([, def]) => [def.path, def.transform])
+)
+
+export { endpoints, translates, transforms }

package/src/user/api/index.ts

@@ -0,0 +1,87 @@
+import Taro from '@tarojs/taro'
+import { HttpRequestConfig, PagingData, PagingParams, ResponseRaw, createHttp } from '../../shared'
+import { translates, transforms } from './endpoints'
+import { useAppKitOptions } from '../../Appkit'
+
+/**
+ * 小程序端 Http
+ * 使用 Taro.request 实现
+ */
+const vendor = {
+  async request<T>(config: HttpRequestConfig) {
+    return new Promise<ResponseRaw<T>>((resolve, reject) => {
+      Taro.request({
+        url: config.url,
+        method: config.method,
+        header: config.headers,
+        data: config.data,
+      })
+        .then(({ data }) => {
+          resolve({
+            status: +data.code,
+            message: data.msg,
+            data: data.result as T,
+          })
+        })
+        .catch((e: any) => {
+          reject(e)
+        })
+    })
+  },
+}
+
+function useHttp() {
+  const appkitOptions = useAppKitOptions()
+  const headers: any = {
+    Token: appkitOptions.tempToken() || appkitOptions.token(),
+    Appcode: appkitOptions.app(),
+    cookie: `tid=${appkitOptions.tenant()}`,
+    gray: appkitOptions.gray ? appkitOptions.gray() : '0',
+  }
+
+  /**
+   * 传入配置获取 Http instanse
+   */
+  const $http = createHttp({
+    vendor,
+    baseUrl: appkitOptions.baseUrl(),
+    headers,
+    interceptors: [
+      (raw) => {
+        if (raw.status == 401) {
+          appkitOptions[401]()
+          return true
+        }
+        return false
+      },
+      (raw) => {
+        if (raw.status > 500 && raw.status != 51015 && raw.status != 51014) {
+          Taro.showToast({
+            title: raw.message,
+            icon: 'none',
+          })
+          return true
+        }
+        return false
+      },
+    ],
+    paging: {
+      translate: (params: PagingParams) => ({
+        pageNum: params.page,
+        pageSize: params.pageSize,
+      }),
+      transform(data: any): PagingData {
+        return {
+          totalPages: data.pages,
+        }
+      },
+    },
+    translates,
+    transforms,
+  })
+  return $http
+}
+
+export { useHttp }
+
+export * from './endpoints'

package/src/{notice → user}/components/LoginSetting.vue

@@ -92,13 +92,13 @@ const emits = defineEmits(['show'])
   top: 10px;
   bottom: 10px;
   align-items: center;
-  justify-content: center;
   width: calc(100% - 24px);
   background: #ffffff;
   border-radius: 5px;
   display: flex;
   flex-direction: column;
   &-img {
+    margin-top: 50%;
     height: 111px;
     width: 198px;
   }
@@ -107,6 +107,8 @@ const emits = defineEmits(['show'])
     color: #353535;
     opacity: 0.4;
     font-size: 12px;
+    padding: 0 30px;
+    text-align: center;
   }
 }
 </style>