@uxda/appkit 1.2.80 → 3.2.20

package/src/register/components/SelfRegistration.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
 import { reactive } from 'vue'
-import OcrId from './../../components/ocr-id/index.vue'
-import { OcrResultType } from '../../components/ocr-id/types'
+import OcrIcon from '../../shared/components/OcrIcon.vue'
 import DdArea from './../../components/dd-area/index.vue'
 import DdSelector from './../../components/dd-selector/index.vue'
-import Taro from "@tarojs/taro";
+import Taro from '@tarojs/taro'
 
-const props = withDefaults(defineProps<{
-  banner?: string
-}>(), {
-  banner: 'https://cdn.ddjf.com/static/images/wx-yunservice/ai-form-bg2.png'
-})
+const props = withDefaults(
+  defineProps<{
+    banner?: string
+  }>(),
+  {
+    banner: 'https://cdn.ddjf.com/static/images/wx-yunservice/ai-form-bg2.png',
+  }
+)
 
 const formState = reactive({
   name: '',
@@ -19,34 +21,34 @@ const formState = reactive({
   areaCode: '',
   position: '',
   companyName: '',
-  companyNo: ''
+  companyNo: '',
 })
 
 const positionOptions = [
   {
-    label: "老板",
-    value: "老板",
+    label: '老板',
+    value: '老板',
   },
   {
-    label: "业务负责人",
-    value: "业务负责人",
+    label: '业务负责人',
+    value: '业务负责人',
   },
   {
-    label: "风控负责人",
-    value: "风控负责人",
+    label: '风控负责人',
+    value: '风控负责人',
   },
   {
-    label: "其它",
-    value: "其它",
+    label: '其它',
+    value: '其它',
   },
 ]
 
 const emit = defineEmits(['submit'])
 
-function onOCRInfo(payload: OcrResultType) {
+function onOCRInfo(payload: any) {
   if (!payload) return
-  formState.name = payload.faceInfo.name
-  formState.certNo = payload.faceInfo.certNo
+  formState.name = payload?.faceInfo.name
+  formState.certNo = payload?.faceInfo.certNo
 }
 
 function showVerifyToast(tip: string, duration = 1500) {
@@ -59,42 +61,42 @@ function showVerifyToast(tip: string, duration = 1500) {
 }
 
 async function submit() {
-  if (!formState.name){
+  if (!formState.name) {
     showVerifyToast('请输入你的姓名')
     return
   }
   const params = {
     useCase: formState.scene,
-    customerName: formState.name
+    customerName: formState.name,
   }
   if (formState.scene === 'person') {
-    if (!formState.certNo){
+    if (!formState.certNo) {
       showVerifyToast('请输入身份证号码')
       return
     }
-    if (formState.certNo.length != 18){
+    if (formState.certNo.length != 18) {
       showVerifyToast('请输入正确的身份证号码')
       return
     }
     params['idCardNo'] = formState.certNo
   } else {
-    if (!formState.position){
+    if (!formState.position) {
       showVerifyToast('请选择你的职位')
       return
     }
-    if (!formState.companyName){
+    if (!formState.companyName) {
       showVerifyToast('请输入公司名称')
       return
     }
-    if (!formState.companyNo){
+    if (!formState.companyNo) {
       showVerifyToast('请输入社会统一信用代码')
       return
     }
-    if (formState.companyNo.length != 18){
+    if (formState.companyNo.length != 18) {
       showVerifyToast('请输入正确的社会统一信用代码')
       return
     }
-    if (!formState.areaCode){
+    if (!formState.areaCode) {
       showVerifyToast('请选择所在地区')
       return
     }
@@ -111,41 +113,43 @@ async function submit() {
 <template>
   <div class="self-registration">
     <div class="self-registration-body">
-      <img :src="banner" class="self-registration-banner" alt=""/>
+      <img :src="banner" class="self-registration-banner" alt="" />
       <nut-form>
         <nut-form-item label="使用场景" required body-align="right">
-          <nut-radiogroup v-model="formState.scene" direction="horizontal">
+          <nut-radio-group v-model="formState.scene" direction="horizontal">
             <nut-radio label="person">个人使用</nut-radio>
             <nut-radio label="company">公司使用</nut-radio>
-          </nut-radiogroup>
+          </nut-radio-group>
         </nut-form-item>
         <nut-form-item label="你的姓名" required>
           <div class="self-registration__input">
-            <input v-model="formState.name" class="nut-input-text" placeholder="请输入或拍照识别" type="text" :maxlength="20"/>
-            <OcrId @ocr="onOCRInfo" style="margin-left: 5px"/>
+            <input v-model="formState.name" class="nut-input-text" placeholder="请输入或拍照识别" type="text" :maxlength="20" />
+            <OcrIcon @complete="onOCRInfo">
+              <template #icon>
+                <img style="width: 20px; height: 20px; margin-left: 5px;"
+                  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgZmlsbD0ibm9uZSI+PHBhdGggb3BhY2l0eT0iLjAxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQwIDB2NDBIMFYwaDQweiIgZmlsbD0iI0M0QzRDNCIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzMuMDQ0IDE3LjM2M2MuOTYgMCAxLjczOS0uNzkgMS43MzktMS43NjYgMC0uOTc1LS43NzktMS43NjYtMS43NC0xLjc2Ni0uOTYgMC0xLjczOC43OS0xLjczOCAxLjc2NnMuNzc4IDEuNzY2IDEuNzM5IDEuNzY2eiIgZmlsbD0iIzRCQ0I5MyIvPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAzMS44MTJWMTQuNzg4YzAtMi4yNTggMi4wNDktNC4wOTcgNC41NjQtNC4wOTdoMy44NDRsMS4xMzYtMy42NThDOS44ODggNS45MTMgMTEuMjM3IDUgMTIuNTQ4IDVIMjcuNDVjMS4zOSAwIDIuNjguODc2IDMuMDEgMi4wNDRsMS4xMzMgMy42NDdoMy44NDRjMi41MTUgMCA0LjU2NCAxLjgzOSA0LjU2NCA0LjA5N3YxLjczOWMwIC41MDMtLjQ1NC45MS0xLjAxNC45MXMtMS4wMTQtLjQwNy0xLjAxNC0uOTF2LTEuNzRjMC0xLjI1My0xLjEzOS0yLjI3NS0yLjUzNi0yLjI3NWgtMy44NDRjLS45MDcgMC0xLjcxMS0uNTQ5LTEuOTU1LTEuMzMybC0xLjEzNi0zLjY2YS4zNDIuMzQyIDAgMCAwLS4wMDctLjAyNWMtLjExLS4zOTYtLjYzOS0uNjc0LTEuMDQ1LS42NzRoLTE0LjljLS4zOTkgMC0uOTUuMzY2LTEuMDUzLjY5OWwtMS4xMzYgMy42NmMtLjI0Ny43ODYtMS4wNDUgMS4zMy0xLjk1NSAxLjMzMkg0LjU2NGMtMS4zOTcgMC0yLjUzNiAxLjAyMi0yLjUzNiAyLjI3NnYxNy4wMjRjMCAxLjI1NCAxLjEzOSAyLjI3NiAyLjUzNiAyLjI3NmgzMC44N2MxLjM5NyAwIDIuNTM1LTEuMDIyIDIuNTM1LTIuMjc2VjIxLjU5NmMwLS41MDMuNDU0LS45MSAxLjAxNC0uOTFzMS4wMTUuNDA3IDEuMDE1LjkxVjMxLjgxYy0uMDAzIDIuMjYtMi4wNSA0LjEtNC41NjcgNC4xSDQuNTY0QzIuMDQ5IDM1LjkxIDAgMzQuMDcgMCAzMS44MTF6IiBmaWxsPSIjNEJDQjkzIi8+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMi4xNzQgMjEuNzc4YzAtNC44NyAzLjcwNS04LjgzIDguMjYtOC44MyA0LjU1NiAwIDguMjYyIDMuOTYgOC4yNjIgOC44M3MtMy43MDYgOC44MzItOC4yNjEgOC44MzJjLTQuNTU2IDAtOC4yNjEtMy45NjItOC4yNjEtOC44MzJ6bTEuNzc5LjEzYzAgMy43OTYgMi45MDcgNi44ODMgNi40ODIgNi44ODMgMy41NzQgMCA2LjQ4MS0zLjA4NyA2LjQ4MS02Ljg4M3MtMi45MDctNi44ODMtNi40ODItNi44ODNjLTMuNTc0IDAtNi40ODEgMy4wODctNi40ODEgNi44ODN6IiBmaWxsPSIjNEJDQjkzIi8+PC9zdmc+" />
+              </template>
+            </OcrIcon>
           </div>
         </nut-form-item>
 
         <nut-form-item v-if="formState.scene === 'person'" label="身份证号码" required>
-          <input v-model="formState.certNo" class="nut-input-text" placeholder="请输入" type="text" :maxlength="18"/>
+          <input v-model="formState.certNo" class="nut-input-text" placeholder="请输入" type="text" :maxlength="18" />
         </nut-form-item>
 
         <template v-else>
           <nut-form-item label="你的职位" required>
-            <DdSelector v-model:value="formState.position" :options="positionOptions"/>
+            <DdSelector v-model:value="formState.position" :options="positionOptions" />
           </nut-form-item>
           <nut-form-item label="公司名称" required>
             <input v-model="formState.companyName" class="nut-input-text" placeholder="请输入" type="text"
-                   :maxlength="50"/>
+              :maxlength="50" />
           </nut-form-item>
           <nut-form-item label="社会统一信用代码" required>
-            <input v-model="formState.companyNo" class="nut-input-text" placeholder="请输入" type="text" :maxlength="18"/>
+            <input v-model="formState.companyNo" class="nut-input-text" placeholder="请输入" type="text" :maxlength="18" />
           </nut-form-item>
           <nut-form-item label="所在地区" required>
-            <DdArea
-                v-model:value="formState.areaCode"
-                type="city"
-                placeholder="请选择"/>
+            <DdArea v-model:value="formState.areaCode" type="city" placeholder="请选择" />
           </nut-form-item>
         </template>
       </nut-form>
@@ -197,6 +201,7 @@ async function submit() {
 
   .nut-input-text {
     text-align: right !important;
+    flex: 1;
   }
 
   .nut-form-item__label.required::before {
@@ -204,7 +209,7 @@ async function submit() {
   }
 
   .nut-form-item__label.required::after {
-    content: "*";
+    content: '*';
     color: #fa2c19;
     margin-right: 4px;
   }
@@ -225,4 +230,4 @@ async function submit() {
     font-size: 16px;
   }
 }
-</style>
+</style>

package/src/shared/components/AppVerify.vue

@@ -0,0 +1,128 @@
+<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" @click="send" label="获取验证码" />
+        <div class="caption" v-if="sent">{{ countdown }}s后重新发送</div>
+      </div>
+    </ns-form>
+    <div class="row buttons">
+      <ns-button class="cancel-btn" @click="emits('cancel')">取消</ns-button>
+      <ns-button color="primary" @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>

package/src/shared/components/DeviceVersion.vue

@@ -14,7 +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'
+import debounce from 'lodash-es/debounce'
 
 const showAlert = ref(false)
 const safeArea = useSafeArea()

package/src/shared/components/OcrBusinessLicense.vue

@@ -0,0 +1,130 @@
+<template>
+  <div :class="['ocr-business-license', disabled ? 'disabled' : '']" class="ocr-icon" @click="onIconClick">
+    <ns-icon name="https://cdn.ddjf.com/static/images/beidouxing/ocr-icon.png" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Taro from '@tarojs/taro';
+import { NsIcon } from '@uxda/nutshell/taro';
+import { useAppKitOptions } from '../../Appkit';
+
+const appKitOptions = useAppKitOptions();
+
+const emits = defineEmits(['complete']);
+
+type OcrBusinessLicenseProps = {
+  disabled: boolean;
+};
+
+const props = defineProps<OcrBusinessLicenseProps>();
+
+export type OcrResult = {
+  companyName: string;
+  idCardNo: string;
+  legalPersonName: string;
+};
+
+async function taroImgCompress(src: string, quality = 80) {
+  return new Promise((resolve, reject) => {
+    Taro.compressImage({
+      src: src,
+      quality: quality,
+      success: (res) => {
+        resolve(res);
+      },
+      fail: (res) => {
+        reject(res);
+      },
+    });
+  });
+}
+
+function getCompressQuality(size: number) {
+  let quality = 100;
+  const curSize = size / (1024 * 1024);
+  if (curSize > 6) {
+    quality = quality - ((curSize - 6) / curSize) * 100;
+  }
+  return quality;
+}
+
+function allTrim(str: string) {
+  return str.replace(/\s+/g, '');
+}
+
+async function onIconClick() {
+  if (props.disabled) {
+    return;
+  }
+  console.log('===onIconClick');
+  let result: OcrResult | null = null;
+  try {
+    const csRes = await Taro.chooseImage({
+      count: 1,
+    });
+    let { path, size } = csRes.tempFiles[0];
+    const compressImg: any =
+      (await taroImgCompress(path, getCompressQuality(size))) || {};
+    const filePath = compressImg.tempFilePath || path;
+    Taro.showLoading({ title: '营业执照识别中..' });
+    const session = appKitOptions.token();
+    const baseUrl = appKitOptions.baseUrl();
+    const upRes: any = await Taro.uploadFile({
+      url: baseUrl + '/promoact/common/parseBusinessLicense',
+      filePath,
+      name: 'file',
+      formData: {
+        objectNo: `min${Date.now()}`,
+      },
+      header: {
+        token: session || '',
+      },
+    });
+    Taro.hideLoading();
+    const res = JSON.parse(upRes.data);
+    if (res.code === '200') {
+      const faceInfo = res.result || {};
+      result = {
+        companyName: allTrim(faceInfo.companyName || ''),
+        idCardNo: allTrim(faceInfo.idCardNo || ''),
+        legalPersonName: allTrim(faceInfo.legalPersonName || ''),
+        fileId: faceInfo.fileId,
+        originalUrl: faceInfo.originalUrl,
+        downloadUrl: faceInfo.downloadUrl,
+      };
+      console.log('===识别', result);
+      if (!result.companyName && !result.idCardNo) {
+        Taro.showToast({ title: '识别失败，请重试', icon: 'none' });
+      }
+    } else {
+      Taro.showToast({
+        title: res.msg,
+        icon: 'error',
+      });
+    }
+  } catch (err) {
+    Taro.hideLoading();
+    console.log(err);
+  }
+  emits('complete', result);
+}
+</script>
+
+<style lang="scss">
+.ocr-business-license {
+  width: 24px;
+  height: 24px;
+
+  .ns-icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  &.disabled {
+    .ns-icon {
+      filter: brightness(1.5) grayscale(1);
+    }
+  }
+}
+</style>

package/src/shared/components/OcrIcon.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="ocr-icon" :class="[disabled ? 'disabled' : '']" @click="onPhotograph">
+    <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 from '@tarojs/taro'
+import { NsIcon } from '@uxda/nutshell/taro'
+import { useAppKitOptions } from '../../Appkit'
+import { ref } from 'vue';
+
+const appKitOptions = useAppKitOptions()
+
+const emits = defineEmits(['complete'])
+
+type OcrIconProps = {
+  disabled?: boolean,
+  side?: 'face' | 'back',
+  class?: string
+}
+
+const props = withDefaults(defineProps<OcrIconProps>(), {
+  disabled: false,
+  side: 'face',
+  class: ''
+})
+
+type OcrResultType = {
+  faceInfo: {
+    name: string
+    certNo: string
+    address: string
+  }
+  backInfo: {
+    startDate: string
+    endDate: string
+  }
+  fileUploadVO: {
+    fileKey: string
+    fileUrl: string
+    objectNo: string
+    thumbnailUrl?: string
+  }
+}
+
+async function taroImgCompress(src: string, quality = 80) {
+  return new Promise((resolve, reject) => {
+    Taro.compressImage({
+      src: src,
+      quality: quality,
+      success: (res) => {
+        resolve(res)
+      },
+      fail: (res) => {
+        reject(res)
+      },
+    })
+  })
+}
+
+function getCompressQuality(size: number) {
+  let quality = 100
+  const curSize = size / (1024 * 1024)
+  if (curSize > 6) {
+    quality = quality - ((curSize - 6) / curSize) * 100
+  }
+  return quality
+}
+
+function allTrim(str: string) {
+  return str.replace(/\s+/g, '')
+}
+
+async function onUploadFile(csRes: any) {
+  let result: OcrResultType | null = null
+  try {
+    let { path, size, tempFilePath } = csRes.tempFiles[0]
+    const compressImg: any = (await taroImgCompress(path || tempFilePath, getCompressQuality(size))) || {}
+    const filePath = compressImg.tempFilePath || path
+    Taro.showLoading({ title: '身份证识别中..' })
+
+    const session = appKitOptions.token()
+    const baseUrl = appKitOptions.baseUrl()
+    const upRes: any = await Taro.uploadFile({
+      url: baseUrl + '/hkapprove/ocr/idcard',
+      filePath,
+      name: 'file',
+      formData: {
+        objectNo: `min${Date.now()}`,
+        side: props.side,
+      },
+      header: {
+        token: session || '',
+      },
+    })
+    Taro.hideLoading()
+
+    const res = JSON.parse(upRes.data)
+    if (res.code === '200') {
+      const faceInfo = res.result.faceInfo || {}
+      const backInfo = res.result.backInfo || {}
+      result = {
+        faceInfo: {
+          name: allTrim(faceInfo.name || ''),
+          certNo: allTrim(faceInfo.num || ''),
+          address: allTrim(faceInfo.address || ''),
+        },
+        backInfo: {
+          startDate: backInfo?.startDate || '',
+          endDate: backInfo?.endDate || ''
+        },
+        fileUploadVO: res.result.fileUploadVO || {},
+      }
+      console.log('===识别', result)
+      if (props.side === 'face' && !result.faceInfo.name && !result.faceInfo.certNo) {
+        Taro.showToast({ title: '识别失败，请重试', icon: 'none' })
+      }
+      if (props.side === 'back' && !result.backInfo?.startDate && !result.backInfo?.endDate) {
+        Taro.showToast({ title: '识别失败，请重试', icon: 'none' })
+      }
+    } else {
+      Taro.showToast({
+        title: res.msg,
+        icon: 'error',
+      })
+    }
+  } catch (err) {
+    Taro.hideLoading()
+    console.log(err)
+  }
+  emits('complete', result)
+}
+
+
+// 上传图片操作面板
+const activeSheetVisible = ref(false)
+const actionSheetMenus = [
+  {
+    name: '拍摄',
+    type: 'camera',
+  },
+  {
+    name: '从相册选择',
+    type: 'album',
+  },
+  {
+    name: '从聊天会话选择',
+    type: 'message',
+  },
+]
+// 选择图像上传
+async function chooseImages(item: any) {
+  if (['camera', 'album'].includes(item.type)) {
+    const csRes = await Taro.chooseMedia({
+      count: 1,
+      sourceType: [item.type], // "camera" | "album"
+      maxDuration: 60, // 使用duration属性判断是图片还是视频，图片没有该属性
+    })
+
+    onUploadFile(csRes)
+  } else {
+    const csRes = await Taro.chooseMessageFile({
+      count: 1,
+      type: 'image',
+    })
+
+    onUploadFile(csRes)
+  }
+}
+
+function onPhotograph() {
+  if (props.disabled) return
+
+  activeSheetVisible.value = true
+}
+</script>
+
+<style lang="scss">
+.ocr-icon {
+  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>