@uxda/appkit 1.1.2 → 1.2.0

package/src/register/components/SelfRegistration.vue

@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import {reactive, ref} from 'vue'
+import OcrId from './../../components/ocr-id/index.vue'
+import {OcrResultType} from './../../components/ocr-id/index.vue'
+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"
+                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

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

package/src/register/index.ts

@@ -0,0 +1 @@
+export * from './components'

package/src/shared/composables/index.ts

@@ -1 +1,2 @@
 export * from './useSafeArea'
+export * from './useTabbar'

package/src/shared/composables/useTabbar.ts

@@ -0,0 +1,24 @@
+import { ref } from 'vue'
+
+const tab = ref<string>(''),
+changeCallback = ref<(value: string) => void>(
+  (value: string) => {
+    console.log('ORIGINAL changeCallback===', value)
+  }
+)
+
+const setTab = (value: string) => {
+  tab.value = value
+  changeCallback.value(value)
+}
+
+const onTabChange = (callback: (value: string) => void) => {
+  changeCallback.value = callback
+}
+
+export function useTabbar () {
+  return {
+    onTabChange,
+    setTab
+  }
+}

package/.vscode/components.code-snippets

@@ -1,61 +0,0 @@
-{
-  "新建组件": {
-    "prefix": ["nsc", "nutshell"],
-    "body": [
-      "import { PropType, ObjectEmitsOptions, SlotsType } from 'vue'"
-      "import { define, MakePropsType } from '../../utils'"
-      "",
-      "export const ${2}Props = {"
-      "\tlabel: {"
-      "\t\ttype: String"
-      "\t}"
-      "}"
-      ""
-      "export type ${1}Emits = {"
-      "}"
-      ""
-      "const ${2}Emits: ${1}Emits = {"
-      "}"
-      ""
-      "export type ${1}Slots = {"
-      "\tdefault: never,"
-      "}"
-      ""
-      "export type ${1}Props = MakePropsType<typeof ${2}Props, ${1}Emits>"
-      "",
-      "$BLOCK_COMMENT_START*"
-      " * ${3} 组件 <ns-${2}>"
-      " $BLOCK_COMMENT_END"
-      "export const Ns${1:$TM_FILENAME_BASE} = define({"
-      "\tname: 'Ns${1}',"
-      "\tprops: ${2}Props,"
-      "\temits: ${2}Emits,"
-      "\tsetup (props, ctx) {"
-      "\t\treturn {"
-      "\t\t}"
-      "\t}"
-      "})"
-      "// 需要增加 import 到 ./index.ts, ../components.ts"
-    ],
-    "description": "新建组件"
-  },
-
-  "新建 vendor": {
-    "prefix": ["nsv", "nutshell-vendor"],
-    "body": [
-      "import { h, SetupContext } from 'vue'",
-      "import { ${2:$TM_FILENAME_BASE} as Antdv${2} } from 'ant-design-vue'",
-      "import { ${1}Props } from '../../../../components'"
-      "",
-      "export const ${1:$TM_FILENAME_BASE} = (props: ${1}Props, ctx: SetupContext) => {",
-      "",
-      "\treturn h(Antdv${2}, {",
-      "\t\tclass: 'ns-${3}',",
-      "\t}, () => '')",
-      "}",
-      "// + import => ./index.ts, ../components.ts"
-      ""
-    ],
-    "description": "新建组件"
-  }
-}

package/.vscode/extensions.json

@@ -1,7 +0,0 @@
-{
-  "recommendations": [
-    "editorconfig.editorconfig",
-  ],
-  "unwantedRecommendations": [
-  ]
-}

package/.vscode/settings.json

@@ -1,98 +0,0 @@
-{
-  "eslint.enable": true,
-  "eslint.validate": [],
-  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
-  "files.exclude": {
-    "**/dist": true,
-    "**/nutshell.css": true,
-    "**/antdv.css": true,
-    "**/nutui.css": true,
-    "**/auto-imports.d.ts": true,
-    "**/node_modules": true,
-    "**/yarn-error.log": true,
-    "**/.eslintrc-auto-import.json": true,
-  },
-  "workbench.colorCustomizations": {
-    "[Atlantic Night]": {
-      "editor.background": "#060f3d",
-      "tab.border": "#060f3d",
-      "tab.activeBackground": "#060f3d",
-      "tab.activeBorder": "#060f3d",
-      "tab.activeBorderTop": "#060f3d",
-      "tab.inactiveBackground": "#060f3d",
-      "tab.activeModifiedBorder": "#060f3d",
-      "sideBar.background": "#060f3d",
-      "sideBar.border": "#060f3d",
-      "sideBar.foreground": "#0091ff",
-      "sideBarSectionHeader.border": "#060f3d",
-      "focusBorder": "#060f3d",
-      "sideBarSectionHeader.background": "#060f3d",
-      "activityBar.background": "#060f3d",
-      "activityBar.foreground": "#ff009d",
-      "activityBar.activeBorder": "#ff009d",
-      "activityBar.inactiveForeground": "#ff009d",
-      "scrollbarSlider.background": "#00569d66",
-      "activityBar.border": "#060f3d",
-      "activityBar.activeBackground": "#060f3d",
-      "editorGroup.border": "#060f3d",
-      "editorGroupHeader.noTabsBackground": "#060f3d",
-      "editorGroupHeader.tabsBackground": "#060f3d",
-      "editorGroupHeader.tabsBorder": "#060f3d",
-      "editorWidget.background": "#060f3d",
-      "editorHoverWidget.background": "#001163",
-      "editorHoverWidget.border": "#002aff",
-      "editorSuggestWidget.background": "#001163",
-      "editorSuggestWidget.border": "#002aff",
-      "editorSuggestWidget.focusHighlightForeground": "#00ff73",
-      "editorSuggestWidget.selectedBackground": "#ff009d",
-      "editorGutter.background": "#060f3d",
-      "editor.lineHighlightBackground": "#08165a",
-      "editor.lineHighlightBorder": "#060f3d",
-      "titleBar.activeBackground": "#060f3d",
-      "titleBar.inactiveBackground": "#060f3d",
-      "quickInput.background": "#001163",
-      "quickInputList.focusBackground": "#ff009d",
-      "quickInputTitle.background": "#ff0000",
-      "quickInput.foreground": "#00ff73",
-      "input.background": "#060f3d",
-    }
-  },
-  "editor.semanticTokenColorCustomizations": {
-    "rules": {
-      "keyword.void": {
-        "foreground": "#ffff99",
-        "fontStyle": "underline"
-      }
-    },
-      },
-  "editor.tokenColorCustomizations": {
-    "[Shades of Purple]": {
-      "comments": {
-        "foreground": "#00ffae",
-        "fontStyle": ""
-      },
-      "textMateRules": [
-        {
-          "name": "types",
-          "scope": "entity.name.type",
-          "settings": {
-            "fontStyle": "bold underline",
-          },
-        },
-        {
-          "scope": "variable.other.readwrite.ts",
-          "settings": {
-              "foreground": "#ff00c8"
-          }
-        },
-        {
-          "scope": "entity.other.attribute-name.html",
-          "settings": {
-            "fontStyle": "",
-            "foreground": "#ffbb00"
-          },
-        }
-      ]
-    }
-  }
-}