@uxda/appkit 4.3.6 → 4.3.8

package/src/register/components/SelfRegistration.vue

@@ -1,233 +1,233 @@
-<script setup lang="ts">
-import { reactive } from 'vue'
-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, { showToast } from '@tarojs/taro'
-
-const props = withDefaults(
-  defineProps<{
-    banner?: string
-  }>(),
-  {
-    banner: 'https://cdn.ddjf.com/static/images/wx-yunservice/ai-form-bg2.png',
-  }
-)
-
-const formState = reactive({
-  name: '',
-  certNo: '',
-  scene: 'person',
-  areaCode: '',
-  position: '',
-  companyName: '',
-  companyNo: '',
-})
-
-const positionOptions = [
-  {
-    label: '老板',
-    value: '老板',
-  },
-  {
-    label: '业务负责人',
-    value: '业务负责人',
-  },
-  {
-    label: '风控负责人',
-    value: '风控负责人',
-  },
-  {
-    label: '其它',
-    value: '其它',
-  },
-]
-
-const emit = defineEmits(['submit'])
-
-function onOCRInfo(payload: any) {
-  if (!payload) return
-  formState.name = payload?.faceInfo.name
-  formState.certNo = payload?.faceInfo.certNo
-}
-
-function showVerifyToast(tip: string, duration = 1500) {
-  if (!tip) return
-  showToast({
-    title: tip,
-    icon: 'none',
-    duration,
-  })
-}
-
-async function submit() {
-  if (!formState.name) {
-    showVerifyToast('请输入你的姓名')
-    return
-  }
-  const params = {
-    useCase: formState.scene,
-    customerName: formState.name,
-  }
-  if (formState.scene === 'person') {
-    if (!formState.certNo) {
-      showVerifyToast('请输入身份证号码')
-      return
-    }
-    if (formState.certNo.length != 18) {
-      showVerifyToast('请输入正确的身份证号码')
-      return
-    }
-    params['idCardNo'] = formState.certNo
-  } else {
-    if (!formState.position) {
-      showVerifyToast('请选择你的职位')
-      return
-    }
-    if (!formState.companyName) {
-      showVerifyToast('请输入公司名称')
-      return
-    }
-    if (!formState.companyNo) {
-      showVerifyToast('请输入社会统一信用代码')
-      return
-    }
-    if (formState.companyNo.length != 18) {
-      showVerifyToast('请输入正确的社会统一信用代码')
-      return
-    }
-    if (!formState.areaCode) {
-      showVerifyToast('请选择所在地区')
-      return
-    }
-    params['customerPosition'] = formState.position
-    params['companyName'] = formState.companyName
-    params['idCardNo'] = formState.companyNo
-    params['customerArea'] = formState.areaCode
-  }
-  console.log(formState)
-  emit('submit', params)
-}
-</script>
-
-<template>
-  <div class="self-registration">
-    <div class="self-registration-body">
-      <img :src="banner" class="self-registration-banner" alt="" />
-      <nut-form>
-        <nut-form-item label="使用场景" required body-align="right">
-          <nut-radio-group v-model="formState.scene" direction="horizontal">
-            <nut-radio label="person">个人使用</nut-radio>
-            <nut-radio label="company">公司使用</nut-radio>
-          </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" />
-            <OcrIcon :has-upload-vo="false" @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" />
-        </nut-form-item>
-
-        <template v-else>
-          <nut-form-item label="你的职位" required>
-            <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" />
-          </nut-form-item>
-          <nut-form-item label="社会统一信用代码" required>
-            <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="请选择" />
-          </nut-form-item>
-        </template>
-      </nut-form>
-    </div>
-    <div class="self-registration-bottom">
-      <nut-button block type="primary" class="experience-button" v-track-click @click="submit">立即体验</nut-button>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-.self-registration {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-
-  &-body {
-    flex: 1;
-    padding: 12px;
-    overflow: auto;
-  }
-
-  &-banner {
-    width: 100%;
-    height: 170px;
-  }
-
-  .nut-cell-group__warp {
-    border-radius: 5px;
-    margin: 12px 0 0;
-  }
-
-  &__input {
-    display: flex;
-    align-items: center;
-  }
-
-  &-bottom {
-    background-color: white;
-    padding-bottom: var(--safe-bottom-height);
-  }
-
-  .experience-button {
-    margin: 7.5px 12px;
-    border-radius: 5px;
-    width: calc(100% - 24px);
-  }
-
-  .nut-input-text {
-    text-align: right !important;
-    flex: 1;
-  }
-
-  .nut-form-item__label.required::before {
-    display: none;
-  }
-
-  .nut-form-item__label.required::after {
-    content: '*';
-    color: #fa2c19;
-    margin-right: 4px;
-  }
-
-  .nut-form-item__label {
-    width: unset;
-  }
-
-  .input-placeholder {
-    color: #cccccc;
-  }
-
-  .nut-radio__icon {
-    font-size: 16px;
-  }
-
-  .nut-radio__icon--unchecked {
-    font-size: 16px;
-  }
-}
-</style>
+<script setup lang="ts">
+import { reactive } from 'vue'
+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, { showToast } from '@tarojs/taro'
+
+const props = withDefaults(
+  defineProps<{
+    banner?: string
+  }>(),
+  {
+    banner: 'https://cdn.ddjf.com/static/images/wx-yunservice/ai-form-bg2.png',
+  }
+)
+
+const formState = reactive({
+  name: '',
+  certNo: '',
+  scene: 'person',
+  areaCode: '',
+  position: '',
+  companyName: '',
+  companyNo: '',
+})
+
+const positionOptions = [
+  {
+    label: '老板',
+    value: '老板',
+  },
+  {
+    label: '业务负责人',
+    value: '业务负责人',
+  },
+  {
+    label: '风控负责人',
+    value: '风控负责人',
+  },
+  {
+    label: '其它',
+    value: '其它',
+  },
+]
+
+const emit = defineEmits(['submit'])
+
+function onOCRInfo(payload: any) {
+  if (!payload) return
+  formState.name = payload?.faceInfo.name
+  formState.certNo = payload?.faceInfo.certNo
+}
+
+function showVerifyToast(tip: string, duration = 1500) {
+  if (!tip) return
+  showToast({
+    title: tip,
+    icon: 'none',
+    duration,
+  })
+}
+
+async function submit() {
+  if (!formState.name) {
+    showVerifyToast('请输入你的姓名')
+    return
+  }
+  const params = {
+    useCase: formState.scene,
+    customerName: formState.name,
+  }
+  if (formState.scene === 'person') {
+    if (!formState.certNo) {
+      showVerifyToast('请输入身份证号码')
+      return
+    }
+    if (formState.certNo.length != 18) {
+      showVerifyToast('请输入正确的身份证号码')
+      return
+    }
+    params['idCardNo'] = formState.certNo
+  } else {
+    if (!formState.position) {
+      showVerifyToast('请选择你的职位')
+      return
+    }
+    if (!formState.companyName) {
+      showVerifyToast('请输入公司名称')
+      return
+    }
+    if (!formState.companyNo) {
+      showVerifyToast('请输入社会统一信用代码')
+      return
+    }
+    if (formState.companyNo.length != 18) {
+      showVerifyToast('请输入正确的社会统一信用代码')
+      return
+    }
+    if (!formState.areaCode) {
+      showVerifyToast('请选择所在地区')
+      return
+    }
+    params['customerPosition'] = formState.position
+    params['companyName'] = formState.companyName
+    params['idCardNo'] = formState.companyNo
+    params['customerArea'] = formState.areaCode
+  }
+  console.log(formState)
+  emit('submit', params)
+}
+</script>
+
+<template>
+  <div class="self-registration">
+    <div class="self-registration-body">
+      <img :src="banner" class="self-registration-banner" alt="" />
+      <nut-form>
+        <nut-form-item label="使用场景" required body-align="right">
+          <nut-radio-group v-model="formState.scene" direction="horizontal">
+            <nut-radio label="person">个人使用</nut-radio>
+            <nut-radio label="company">公司使用</nut-radio>
+          </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" />
+            <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" />
+        </nut-form-item>
+
+        <template v-else>
+          <nut-form-item label="你的职位" required>
+            <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" />
+          </nut-form-item>
+          <nut-form-item label="社会统一信用代码" required>
+            <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="请选择" />
+          </nut-form-item>
+        </template>
+      </nut-form>
+    </div>
+    <div class="self-registration-bottom">
+      <nut-button block type="primary" class="experience-button" v-track-click @click="submit">立即体验</nut-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.self-registration {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &-body {
+    flex: 1;
+    padding: 12px;
+    overflow: auto;
+  }
+
+  &-banner {
+    width: 100%;
+    height: 170px;
+  }
+
+  .nut-cell-group__warp {
+    border-radius: 5px;
+    margin: 12px 0 0;
+  }
+
+  &__input {
+    display: flex;
+    align-items: center;
+  }
+
+  &-bottom {
+    background-color: white;
+    padding-bottom: var(--safe-bottom-height);
+  }
+
+  .experience-button {
+    margin: 7.5px 12px;
+    border-radius: 5px;
+    width: calc(100% - 24px);
+  }
+
+  .nut-input-text {
+    text-align: right !important;
+    flex: 1;
+  }
+
+  .nut-form-item__label.required::before {
+    display: none;
+  }
+
+  .nut-form-item__label.required::after {
+    content: '*';
+    color: #fa2c19;
+    margin-right: 4px;
+  }
+
+  .nut-form-item__label {
+    width: unset;
+  }
+
+  .input-placeholder {
+    color: #cccccc;
+  }
+
+  .nut-radio__icon {
+    font-size: 16px;
+  }
+
+  .nut-radio__icon--unchecked {
+    font-size: 16px;
+  }
+}
+</style>

package/src/register/components/index.ts

@@ -1,3 +1,3 @@
-import SelfRegistration from './SelfRegistration.vue'
-
+import SelfRegistration from './SelfRegistration.vue'
+
 export { SelfRegistration }