@uxda/appkit 4.3.8 → 4.3.12

package/src/shared/components/AppVerify.vue

@@ -1,128 +1,137 @@
-<template>
-  <div class="app-verify column">
-    <h2>{{ title || '手机号验证' }}</h2>
-    <p class="caption">{{ message || '短信将发送至账号绑定手机号' }}</p>
-    <p class="number">{{ phone }}</p>
-    <ns-form v-model="formData" class="form">
-      <ns-input class="form-input" name="code" v-model="formData.code" placeholder="请输入验证码" maxlength="6"
-        variant="solid" :rules="['required', {
-          name: 'function',
-          message: '输入错误, 请重新输入',
-          method: (value: string) => value.length === 6,
-        }]">
-      </ns-input>
-      <div class="form-btn">
-        <ns-button v-if="!sent" size="xs" variant="plain" color="primary" v-track-click="'手机号验证-获取验证码'" @click="send" label="获取验证码" />
-        <div class="caption" v-if="sent">{{ countdown }}s后重新发送</div>
-      </div>
-    </ns-form>
-    <div class="row buttons">
-      <ns-button class="cancel-btn" v-track-click="'手机号验证-取消'" @click="emits('cancel')">取消</ns-button>
-      <ns-button color="primary" v-track-click="'手机号验证-确认'" @click="onOk">确认</ns-button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { NsForm, NsInput, NsButton } from '@uxda/nutshell/taro';
-import { reactive, ref } from 'vue';
-
-export interface AppVerifyProps {
-  phone: string;
-  title?: string;
-  message?: string;
-  onSend?: Function;
-}
-
-const emits = defineEmits(['complete', 'cancel']);
-
-const sent = ref(false),
-  countdown = ref(60);
-
-let formData = reactive({
-  code: '',
-});
-
-const send = () => {
-  sent.value = true;
-
-  props.onSend && props.onSend();
-
-  countdown.value = 60;
-  let timer = setInterval(() => {
-    countdown.value--;
-    if (countdown.value <= 0) {
-      clearInterval(timer);
-      sent.value = false;
-    }
-  }, 1000);
-};
-
-const onOk = () => {
-  emits('complete', { code: formData.code });
-};
-
-const props = defineProps<AppVerifyProps>();
-</script>
-
-<style lang="scss">
-.app-verify {
-  padding: 10px 30px 20px;
-
-  h2 {
-    font-size: 16px;
-    font-weight: bold;
-  }
-
-  .caption {
-    font-size: 13px !important;
-    color: #ccc;
-    line-height: 21px;
-  }
-
-  .number {
-    line-height: 21px;
-  }
-
-  .form .nut-cell-group__wrap {
-    display: flex;
-    align-items: center;
-    margin: 20px 0 !important;
-
-    .form-input {
-      height: 36px;
-      line-height: 36px;
-      border: none;
-      background: #f5f5f5;
-      border-radius: 5px;
-      flex: 1;
-      padding-left: 12px;
-    }
-
-    .form-btn {
-      margin-left: 12px;
-      width: 105px;
-    }
-  }
-
-  .buttons {
-    width: 100%;
-    justify-content: space-between;
-    margin-top: 10px;
-
-    .ns-button {
-      width: 104px;
-      border-radius: 30px;
-      --radius: 30px;
-    }
-
-    .cancel-btn {
-      border: 1px solid #969696 !important;
-    }
-  }
-
-  .nut-input {
-    background: transparent !important;
-  }
-}
-</style>
+<template>
+  <div class="app-verify column">
+    <h2>{{ title || '手机号验证' }}</h2>
+    <p class="caption">{{ message || '短信将发送至账号绑定手机号' }}</p>
+    <p class="number">{{ phone }}</p>
+    <ns-form v-model="formData" class="form">
+      <ns-input class="form-input" name="code" v-model="formData.code" placeholder="请输入验证码" maxlength="6"
+        variant="solid" :rules="['required', {
+          name: 'function',
+          message: '输入错误, 请重新输入',
+          method: (value: string) => value.length === 6,
+        }]">
+      </ns-input>
+      <div class="form-btn">
+        <ns-button v-if="!sent" size="xs" variant="plain" color="primary" v-track-click="'手机号验证-获取验证码'" @click="send" label="获取验证码" />
+        <div class="caption" v-if="sent">{{ countdown }}s后重新发送</div>
+      </div>
+    </ns-form>
+    <div class="row buttons">
+      <ns-button class="cancel-btn" v-track-click="'手机号验证-取消'" :r="20" @click="emits('cancel')">取消</ns-button>
+      <ns-button color="primary" v-track-click="'手机号验证-确认'" :r="20" @click="onOk">确认</ns-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { NsForm, NsInput, NsButton } from '@uxda/nutshell/taro';
+import { reactive, ref } from 'vue';
+
+export interface AppVerifyProps {
+  phone: string;
+  title?: string;
+  message?: string;
+  onSend?: Function;
+}
+
+const emits = defineEmits(['complete', 'cancel']);
+
+const sent = ref(false),
+  countdown = ref(60);
+
+let formData = reactive({
+  code: '',
+});
+
+const send = () => {
+  sent.value = true;
+
+  props.onSend && props.onSend();
+
+  countdown.value = 60;
+  let timer = setInterval(() => {
+    countdown.value--;
+    if (countdown.value <= 0) {
+      clearInterval(timer);
+      sent.value = false;
+    }
+  }, 1000);
+};
+
+const onOk = () => {
+  emits('complete', { code: formData.code });
+};
+
+const props = defineProps<AppVerifyProps>();
+</script>
+
+<style lang="scss">
+.app-verify {
+  padding: 10px 30px 20px;
+
+  h2 {
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  .caption {
+    font-size: 14px !important;
+    color: #666;
+    margin-bottom: 5px;
+  }
+
+  .number {
+    line-height: 21px;
+  }
+
+  .form .nut-cell-group__wrap {
+    display: flex;
+    align-items: center;
+    margin: 20px 0 !important;
+
+    .form-input {
+      height: 36px;
+      line-height: 36px;
+      border: none;
+      background: #f5f5f5;
+      border-radius: 5px;
+      flex: 1;
+      padding-left: 12px;
+      .input-text {
+        text-align: left !important;
+      }
+    }
+
+    .form-btn {
+      margin-left: 12px;
+      width: 90px;
+
+      .caption {
+        font-size: 10px !important;
+        color: #ccc;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .buttons {
+    width: 100%;
+    justify-content: space-between;
+    margin-top: 10px;
+
+    .ns-button {
+      width: 104px;
+      border-radius: 30px;
+      --radius: 30px;
+    }
+
+    .cancel-btn {
+      border: 1px solid #969696 !important;
+    }
+  }
+
+  .nut-input {
+    background: transparent !important;
+  }
+}
+</style>

package/src/shared/components/DeviceVersion.vue

@@ -1,78 +1,78 @@
-<template>
-  <DdNoticeBar v-if="showAlert" showClose :style="topStype" @close="showAlert = !showAlert"
-    text="您当前使用的微信客户端版本较低，可能不支持全部功能或体验效果可能不佳，建议至应用商店或App Store升级至最新版本。" />
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
-import DdNoticeBar from '../../components/dd-notice-bar/index.vue'
-import { useSafeArea } from '../composables'
-import Taro, { getSystemInfoSync } from '@tarojs/taro'
-import { useHttp } from '../../balance/api'
-import debounce from 'lodash-es/debounce'
-
-const props = withDefaults(
-  defineProps<{
-    versions?: string
-  }>(),
-  {
-    versions: '{}',
-  }
-)
-
-const showAlert = ref(false)
-const safeArea = useSafeArea()
-
-const topStype = computed(() => {
-  return `top: ${safeArea.nav + safeArea.status}px;`
-})
-
-const recommendVersions = ref()
-// 获取系统配置 - 小程序推荐版本
-const getPropertieByCode = debounce(async () => {
-  if (props?.versions !== '{}') {
-    recommendVersions.value = JSON.parse(props.versions)
-
-    return
-  }
-
-  if (recommendVersions.value) return
-
-  const $http = useHttp()
-  $http
-    .get('/cas/properties/getPropertie', {
-      code: 'pcRecommendVersion',
-    })
-    .then((res: any) => {
-      recommendVersions.value = JSON.parse(res.value || '{}')
-    })
-}, 100)
-
-onMounted(async () => {
-  await getPropertieByCode()
-
-  const systemInfo = getSystemInfoSync()
-  const version = systemInfo.SDKVersion
-
-  // 版本号比较函数
-  function compareVersion(v1, v2) {
-    const v1Arr = v1.split('.').map(Number)
-    const v2Arr = v2.split('.').map(Number)
-
-    for (let i = 0; i < v1Arr.length || i < v2Arr.length; i++) {
-      if ((v1Arr[i] || 0) > (v2Arr[i] || 0)) {
-        return true
-      } else if ((v1Arr[i] || 0) < (v2Arr[i] || 0)) {
-        return false
-      }
-    }
-    return false
-  }
-
-  if (!compareVersion(version, (recommendVersions.value || {}).Mini || '2.24.0')) {
-    showAlert.value = true
-  }
-})
-</script>
-
-<style lang="less"></style>
+<template>
+  <DdNoticeBar v-if="showAlert" showClose :style="topStype" @close="showAlert = !showAlert"
+    text="您当前使用的微信客户端版本较低，可能不支持全部功能或体验效果可能不佳，建议至应用商店或App Store升级至最新版本。" />
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue'
+import DdNoticeBar from '../../components/dd-notice-bar/index.vue'
+import { useSafeArea } from '../composables'
+import Taro, { getSystemInfoSync } from '@tarojs/taro'
+import { useHttp } from '../../balance/api'
+import debounce from 'lodash-es/debounce'
+
+const props = withDefaults(
+  defineProps<{
+    versions?: string
+  }>(),
+  {
+    versions: '{}',
+  }
+)
+
+const showAlert = ref(false)
+const safeArea = useSafeArea()
+
+const topStype = computed(() => {
+  return `top: ${safeArea.nav + safeArea.status}px;`
+})
+
+const recommendVersions = ref()
+// 获取系统配置 - 小程序推荐版本
+const getPropertieByCode = debounce(async () => {
+  if (props?.versions !== '{}') {
+    recommendVersions.value = JSON.parse(props.versions)
+
+    return
+  }
+
+  if (recommendVersions.value) return
+
+  const $http = useHttp()
+  $http
+    .get('/cas/properties/getPropertie', {
+      code: 'pcRecommendVersion',
+    })
+    .then((res: any) => {
+      recommendVersions.value = JSON.parse(res.value || '{}')
+    })
+}, 100)
+
+onMounted(async () => {
+  await getPropertieByCode()
+
+  const systemInfo = getSystemInfoSync()
+  const version = systemInfo.SDKVersion
+
+  // 版本号比较函数
+  function compareVersion(v1, v2) {
+    const v1Arr = v1.split('.').map(Number)
+    const v2Arr = v2.split('.').map(Number)
+
+    for (let i = 0; i < v1Arr.length || i < v2Arr.length; i++) {
+      if ((v1Arr[i] || 0) > (v2Arr[i] || 0)) {
+        return true
+      } else if ((v1Arr[i] || 0) < (v2Arr[i] || 0)) {
+        return false
+      }
+    }
+    return false
+  }
+
+  if (!compareVersion(version, (recommendVersions.value || {}).Mini || '2.24.0')) {
+    showAlert.value = true
+  }
+})
+</script>
+
+<style lang="less"></style>

package/src/shared/components/EmptyView.vue

@@ -1,34 +1,34 @@
-<template>
-  <div class="empty-view">
-    <img
-      class="empty-view-image"
-      src="https://cdn.ddjf.com/static/images/nutshell/empty-data.png" />
-    <div class="empty-view-text">暂无数据</div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-</script>
-
-<style lang="scss">
-.empty-view {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-top: 80px;
-  &-image {
-    display: block;
-    font-size: 0;
-    width: 144px;
-    height: 80px;
-    filter: grayscale(1);
-  }
-  &-text {
-    opacity: 0.4;
-    color: #353535;
-    font-size: 12px;
-    line-height: 28px;
-  }
-}
+<template>
+  <div class="empty-view">
+    <img
+      class="empty-view-image"
+      src="https://cdn.ddjf.com/static/images/nutshell/empty-data.png" />
+    <div class="empty-view-text">暂无数据</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style lang="scss">
+.empty-view {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 80px;
+  &-image {
+    display: block;
+    font-size: 0;
+    width: 144px;
+    height: 80px;
+    filter: grayscale(1);
+  }
+  &-text {
+    opacity: 0.4;
+    color: #353535;
+    font-size: 12px;
+    line-height: 28px;
+  }
+}
 </style>

package/src/shared/components/OcrBank.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="ocr-bank" :class="[disabled ? 'disabled' : '']" v-track-click="'银行卡识别-点击'" @click="!customClick ? onUpload() : null">
+    <slot name="icon">
+      <ns-icon name="https://cdn.ddjf.com/static/images/beidouxing/ocr-icon.png" />
+    </slot>
+  </div>
+
+  <nut-action-sheet v-model:visible="activeSheetVisible" :menu-items="actionSheetMenus" @choose="chooseImages"
+    cancel-txt="取消" />
+</template>
+
+<script lang="ts" setup>
+import Taro, { showToast, showLoading, hideLoading, chooseMedia, chooseMessageFile, uploadFile } from '@tarojs/taro'
+import { NsIcon, useNutshell } from '@uxda/nutshell/taro'
+import { useAppKitOptions } from '../../Appkit'
+import { ref } from 'vue';
+import { useHttp } from '../../balance/api'
+import { compressImage, getCompressQuality } from '../composables/useUpload'
+
+const appKitOptions = useAppKitOptions()
+const $http = useHttp(),
+$n = useNutshell()
+
+const emits = defineEmits(['complete'])
+
+type OcrProps = {
+  disabled?: boolean,
+  class?: string
+  uploadUrl?: string
+  customClick?: boolean
+}
+type FileType = {
+	"downloadUrl": string,
+	"fileId": string,
+	"fileName": string,
+	"fileSize": number,
+	"fileSuffix": string,
+	"fileType": string,
+	"originalUrl": string
+}
+
+const props = withDefaults(defineProps<OcrProps>(), {
+  disabled: false,
+  class: '',
+  uploadUrl: '/hkbase/file/uploadFile',
+  customClick: false
+})
+
+type BankCardType = {
+  bankCardNumber: string
+  bankCardType: string
+  bankName: string
+}
+
+async function onUploadFile(csRes: any) {
+  try {
+    let { path, size, tempFilePath } = csRes.tempFiles[0]
+    const compressImg: any = (await compressImage(path || tempFilePath, getCompressQuality(size))) || {}
+    const filePath = compressImg.tempFilePath || path
+
+    showLoading({ title: '银行卡识别中..', mask: true })
+
+    const session = appKitOptions.token()
+    const baseUrl = appKitOptions.baseUrl()
+    const upRes: any = await uploadFile({
+      url: baseUrl + props.uploadUrl,
+      filePath,
+      name: 'file',
+      formData: {
+        objectNo: `min${Date.now()}`,
+        appCode: appKitOptions.app(),
+      },
+      header: {
+        token: session || '',
+      },
+    })
+
+    const res = JSON.parse(upRes.data)
+    if (res.code === '200') {
+      await getBankCardInfo(res.result)
+    } else {
+      hideLoading()
+      showToast({
+        title: res.msg,
+        icon: 'error',
+      })
+    }
+  } catch (err) {
+    hideLoading()
+    console.log(err)
+  }
+}
+
+// 根据银行卡路径获取银行卡信息
+async function getBankCardInfo(file: string | FileType) {
+  try {
+    const res: BankCardType = await $http.get('/hkbase/common/bankCard', {
+      fileUrl: typeof file === 'string' ? file : file.originalUrl,
+    })
+    hideLoading()
+
+    if (res && !res.bankCardNumber) {
+      $n.dialog({
+        title: '识别失败',
+        message: `您上传的图片可能不够清晰或与当前功能不符，请重新上传一张清晰、完整的图片。谢谢！`,
+        okText: '我知道了',
+        cancelText: '',
+      })
+      return
+    }
+
+    emits('complete', {
+      ...res,
+      fileUrl: typeof file === 'string' ? file : file.originalUrl,
+      fileKey: typeof file === 'string' ? file : file.fileId,
+    })
+  } catch (err) {
+    hideLoading()
+  }
+}
+
+// 上传图片操作面板
+const activeSheetVisible = ref(false)
+const actionSheetMenus = [
+  {
+    name: '拍摄',
+    type: 'camera',
+  },
+  {
+    name: '从相册选择',
+    type: 'album',
+  },
+  {
+    name: '从聊天会话选择',
+    type: 'message',
+  },
+]
+if (Taro.getEnv() === 'WEB') {
+  actionSheetMenus.pop()
+}
+
+// 选择图像上传
+async function chooseImages(item: any) {
+  if (['camera', 'album'].includes(item.type)) {
+    const csRes = await chooseMedia({
+      count: 1,
+      sourceType: [item.type], // "camera" | "album"
+      maxDuration: 60, // 使用duration属性判断是图片还是视频，图片没有该属性
+    })
+
+    onUploadFile(csRes)
+  } else {
+    const csRes = await chooseMessageFile({
+      count: 1,
+      type: 'image',
+    })
+
+    onUploadFile(csRes)
+  }
+}
+
+async function onUpload() {
+  if (props.disabled) return
+
+  if (Taro.getEnv() === 'WEB') {
+    const csRes = await chooseMedia({
+      count: 1,
+      sourceType: ['album'], // "camera" | "album"
+      maxDuration: 60, // 使用duration属性判断是图片还是视频，图片没有该属性
+    })
+
+    onUploadFile(csRes)
+    return
+  }
+
+  activeSheetVisible.value = true
+}
+
+defineExpose({
+  onUpload
+})
+</script>
+
+<style lang="scss">
+.ocr-bank {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+
+  .ns-icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  &.disabled {
+    .ns-icon {
+      filter: brightness(1.5) grayscale(1);
+    }
+  }
+}
+</style>