@uxda/appkit 1.2.72 → 4.0.0

package/src/register/components/SelfRegistration.vue

@@ -1,228 +1,228 @@
-<script setup lang="ts">
-import { reactive } from 'vue'
-import OcrId from './../../components/ocr-id/index.vue'
-import { OcrResultType } from '../../components/ocr-id/types'
-import DdArea from './../../components/dd-area/index.vue'
-import DdSelector from './../../components/dd-selector/index.vue'
-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 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: OcrResultType) {
-  if (!payload) return
-  formState.name = payload.faceInfo.name
-  formState.certNo = payload.faceInfo.certNo
-}
-
-function showVerifyToast(tip: string, duration = 1500) {
-  if (!tip) return
-  Taro.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-radiogroup v-model="formState.scene" direction="horizontal">
-            <nut-radio label="person">个人使用</nut-radio>
-            <nut-radio label="company">公司使用</nut-radio>
-          </nut-radiogroup>
-        </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"/>
-          </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" @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;
-  }
-
-  .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;
-  }
-}
+<script setup lang="ts">
+import { reactive } from 'vue'
+import OcrId from './../../components/ocr-id/index.vue'
+import { OcrResultType } from '../../components/ocr-id/types'
+import DdArea from './../../components/dd-area/index.vue'
+import DdSelector from './../../components/dd-selector/index.vue'
+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 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: OcrResultType) {
+  if (!payload) return
+  formState.name = payload.faceInfo.name
+  formState.certNo = payload.faceInfo.certNo
+}
+
+function showVerifyToast(tip: string, duration = 1500) {
+  if (!tip) return
+  Taro.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-radiogroup v-model="formState.scene" direction="horizontal">
+            <nut-radio label="person">个人使用</nut-radio>
+            <nut-radio label="company">公司使用</nut-radio>
+          </nut-radiogroup>
+        </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"/>
+          </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" @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;
+  }
+
+  .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 }

package/src/shared/components/AppDrawer.vue

@@ -1,59 +1,59 @@
-<template>
-  <nut-popup
-    :pop-class="`app-drawer ${modelValue ? 'open' : ''}`"
-    position="right"
-    :visible="modelValue"
-    @update:visible="onVisibleChange">
-    <page-header
-      :title="title"
-      @close="onPageHeaderClose" />
-      <div class="drawer-body">
-        <slot></slot>
-      </div>
-  </nut-popup>
-</template>
-
-<script lang="ts" setup>
-// 右侧页面
-// 模仿页面打开
-// 假的标题栏和返回按钮
-import PageHeader from './PageHeader.vue'
-
-export interface AppDrawerProps {
-  modelValue: boolean,
-  title?: string,
-}
-
-const emit = defineEmits<{
-  (event: 'update:modelValue', value: boolean): void
-}>()
-
-const onVisibleChange = (value: boolean) => {
-  emit('update:modelValue', value)
-}
-
-defineProps<AppDrawerProps>()
-
-const onPageHeaderClose = () => {
-  emit('update:modelValue', false)
-}
-</script>
-
-<style lang="scss">
-.app-drawer {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  &.open {
-    height: 100vh;
-  }
-  .page-header {
-    flex-grow: 0;
-    background-color: #fff;
-  }
-  .drawer-body {
-    flex-grow: 1;
-    overflow: scroll;
-  }
-}
+<template>
+  <nut-popup
+    :pop-class="`app-drawer ${modelValue ? 'open' : ''}`"
+    position="right"
+    :visible="modelValue"
+    @update:visible="onVisibleChange">
+    <page-header
+      :title="title"
+      @close="onPageHeaderClose" />
+      <div class="drawer-body">
+        <slot></slot>
+      </div>
+  </nut-popup>
+</template>
+
+<script lang="ts" setup>
+// 右侧页面
+// 模仿页面打开
+// 假的标题栏和返回按钮
+import PageHeader from './PageHeader.vue'
+
+export interface AppDrawerProps {
+  modelValue: boolean,
+  title?: string,
+}
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const onVisibleChange = (value: boolean) => {
+  emit('update:modelValue', value)
+}
+
+defineProps<AppDrawerProps>()
+
+const onPageHeaderClose = () => {
+  emit('update:modelValue', false)
+}
+</script>
+
+<style lang="scss">
+.app-drawer {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  &.open {
+    height: 100vh;
+  }
+  .page-header {
+    flex-grow: 0;
+    background-color: #fff;
+  }
+  .drawer-body {
+    flex-grow: 1;
+    overflow: scroll;
+  }
+}
 </style>