@uxda/appkit 4.1.62 → 4.2.0

package/src/user/components/UserAuth.vue

@@ -1,216 +1,238 @@
-<template>
-  <ns-page class="user-auth">
-    <ns-page-content>
-      <ns-card fill="#fff">
-        <ns-form ref="formRef" v-model="formData">
-          <ns-input
-            label="你的姓名"
-            name="姓名"
-            v-model="formData.姓名"
-            placeholder="请输入或拍照识别"
-            :maxlength="30"
-            :rules="['required']"
-          >
-            <template #append>
-              <ocr-icon @complete="onOcrComplete" />
-            </template>
-          </ns-input>
-          <ns-input
-            label="身份证号码"
-            name="身份证号码"
-            placeholder="请输入身份证号码"
-            :maxlength="30"
-            v-model="formData.身份证号码"
-            :rules="[
-            'required',
-            {
-              name: 'function',
-              message: '请输入正确格式的证件号码',
-              method: (value: string) => isIdentityCard(value, 'zh-CN')
-            }
-          ]"
-          />
-          <ns-input
-            label="电话号码"
-            name="电话号码"
-            placeholder="请输入电话号码"
-            :maxlength="11"
-            v-model="formData.电话号码"
-            :rules="[
-            {
-              name: 'function',
-              message: '请输入正确格式的电话号码',
-              method: (value: string) => isMobilePhone(value, 'zh-CN')
-            }
-          ]"
-          />
-        </ns-form>
-      </ns-card>
-
-      <div class="user-auth-footer">
-        <div v-if="!已认证" class="checkbox-row">
-          <ns-checkbox style="font-size: 11px" v-model="formData.同意"
-            >我已阅读并同意</ns-checkbox
-          >
-          <span @click="showAgreement" class="book">《个人信息授权协议》</span>
-        </div>
-        <ns-button
-          v-if="!已认证"
-          class="btn"
-          color="primary"
-          type="primary"
-          @click="toSubmit"
-          >立即认证</ns-button
-        >
-        <ns-button
-          v-else
-          class="btn"
-          color="primary"
-          type="primary"
-          @click="toBack"
-          >返回</ns-button
-        >
-      </div>
-    </ns-page-content>
-  </ns-page>
-</template>
-
-<script lang="ts" setup>
-import { reactive, ref } from "vue";
-import {
-  NsForm,
-  NsInput,
-  NsCard,
-  NsPage,
-  NsPageContent,
-  NsButton,
-  NsCheckbox,
-} from "@uxda/nutshell/taro";
-import { OcrIcon } from "../../shared/components";
-import Taro from "@tarojs/taro";
-import { useNutshell } from "@uxda/nutshell/taro";
-import { isIdentityCard, isMobilePhone } from "validator";
-import { useHttp } from "../api";
-
-const props = withDefaults(
-  defineProps<{
-    userId: string;
-  }>(),
-  {
-    userId: "",
-  }
-);
-
-const formRef = ref(),
-  $n = useNutshell();
-
-const formData = reactive({
-  姓名: "",
-  身份证号码: "",
-  电话号码: "",
-  同意: false,
-});
-
-const 已认证 = ref(false);
-
-const onOcrComplete = (result) => {
-  formData.姓名 = result?.faceInfo.name;
-  formData.身份证号码 = result?.faceInfo.certNo;
-};
-
-// 查看协议
-function showAgreement() {
-  emits("toAgreement");
-}
-
-// 返回
-function toBack() {
-  Taro.navigateBack();
-}
-
-// 认证
-async function toSubmit() {
-  const res = await formRef.value.validate();
-  if (!res.valid) {
-    return $n.toast(res.errors[0].message, {});
-  }
-
-  if (!formData.同意) {
-    return $n.toast("请先阅读并同意协议", {});
-  }
-  const $http = useHttp();
-
-  $http
-    .post("/cas/sysAccount/verifyId3", {
-      // appCode:
-      idCard: formData.身份证号码,
-      mobile: formData.电话号码,
-      name: formData.姓名,
-      tenantId: props.userId,
-    })
-    .then(() => {
-      Taro.showToast({ title: "已提交认证信息", icon: "none" });
-      // 提交认证信息，成功后返回
-      toBack();
-    })
-    .catch((err) => {
-      Taro.showToast({ title: err?.errMsg || "认证失败", icon: "none" });
-    });
-}
-
-const emits = defineEmits(["toAgreement"]);
-</script>
-
-<style lang="scss">
-.user-auth {
-  height: 100vh;
-
-  &-footer {
-    position: fixed;
-    z-index: 10;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    min-height: 63px;
-    background: #ffffff;
-    box-shadow: 0 -3px 11px 0 rgba(224, 224, 224, 0.5);
-    padding: 10px 12px calc(8px + var(--safe-bottom-height));
-    display: flex;
-    justify-content: space-between;
-    box-sizing: border-box;
-
-    .btn {
-      width: 100%;
-    }
-
-    .checkbox-row {
-      --nut-primary-color: #017fff;
-      position: absolute;
-      top: -36px;
-      left: 50%;
-      transform: translateX(-50%);
-      white-space: nowrap;
-      display: flex;
-      align-items: center;
-
-      .nut-checkbox__label {
-        margin-left: 2px;
-        font-size: 11px;
-      }
-
-      .nut-icon-check-normal {
-        margin-top: 0 !important;
-      }
-
-      .nut-icon-checked {
-        font-size: 11px;
-      }
-
-      .book {
-        font-size: 11px;
-        color: #007aff;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <ns-page class="user-auth">
+    <ns-page-content>
+      <ns-card fill="#fff">
+        <ns-form ref="formRef" v-model="formData">
+          <ns-input
+            label="你的姓名"
+            name="姓名"
+            v-model="formData.姓名"
+            placeholder="请输入或拍照识别"
+            :maxlength="30"
+            :rules="['required']"
+          >
+            <template #append>
+              <ocr-icon v-if="!已认证" @complete="onOcrComplete" />
+            </template>
+          </ns-input>
+          <ns-input
+            label="身份证号码"
+            name="身份证号码"
+            placeholder="请输入身份证号码"
+            :maxlength="30"
+            v-model="formData.身份证号码"
+            :rules="[
+            'required',
+            {
+              name: 'function',
+              message: '请输入正确格式的证件号码',
+              method: (value: string) => isIdentityCard(value, 'zh-CN')
+            }
+          ]"
+          />
+          <ns-input
+            label="电话号码"
+            name="电话号码"
+            placeholder="请输入电话号码"
+            :maxlength="11"
+            v-model="formData.电话号码"
+            :disabled="true"
+            :rules="[
+            {
+              name: 'function',
+              message: '请输入正确格式的电话号码',
+              method: (value: string) => isMobilePhone(value, 'zh-CN')
+            }
+          ]"
+          />
+        </ns-form>
+      </ns-card>
+
+      <div class="user-auth-footer">
+        <div v-if="!已认证" class="checkbox-row">
+          <ns-checkbox style="font-size: 11px" v-model="formData.同意"
+            >我已阅读并同意</ns-checkbox
+          >
+          <span @click="showAgreement" class="book">《个人信息授权协议》</span>
+        </div>
+        <ns-button
+          v-if="!已认证"
+          class="btn"
+          color="primary"
+          type="primary"
+          @click="toSubmit"
+          >立即认证</ns-button
+        >
+        <ns-button
+          v-else
+          class="btn"
+          color="primary"
+          type="primary"
+          @click="toBack"
+          >返回</ns-button
+        >
+      </div>
+    </ns-page-content>
+  </ns-page>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref, watch } from "vue";
+import {
+  NsForm,
+  NsInput,
+  NsCard,
+  NsPage,
+  NsPageContent,
+  NsButton,
+  NsCheckbox,
+} from "@uxda/nutshell/taro";
+import { OcrIcon } from "../../shared/components";
+import Taro from "@tarojs/taro";
+import { useNutshell } from "@uxda/nutshell/taro";
+import isMobilePhone from 'validator/es/lib/isMobilePhone'
+import isIdentityCard from 'validator/es/lib/isIdentityCard'
+import { useHttp } from "../api";
+
+const props = withDefaults(
+  defineProps<{
+    userId: string;
+    verifyResult: number;
+    mobile: string;
+  }>(),
+  {
+    verifyResult: -1,
+    userId: "",
+    mobile: "",
+  }
+);
+
+const formRef = ref(),
+  $n = useNutshell();
+
+let formData = reactive({
+  姓名: "",
+  身份证号码: "",
+  电话号码: "",
+  同意: false,
+});
+
+const 已认证 = ref(false);
+
+const onOcrComplete = (result) => {
+  formData.姓名 = result?.faceInfo.name;
+  formData.身份证号码 = result?.faceInfo.certNo;
+};
+
+// 查看协议
+function showAgreement() {
+  emits("toAgreement");
+}
+
+// 返回
+function toBack() {
+  Taro.navigateBack();
+}
+
+// 认证
+async function toSubmit() {
+  const res = await formRef.value.validate();
+  if (!res.valid) {
+    return $n.toast(res.errors[0].message, {});
+  }
+
+  if (!formData.同意) {
+    return $n.toast("请先阅读并同意协议", {});
+  }
+  const $http = useHttp();
+
+  $http
+    .post("/cas/sysAccount/verifyId3", {
+      // appCode:
+      idCard: formData.身份证号码,
+      mobile: formData.电话号码,
+      name: formData.姓名,
+      tenantId: props.userId,
+    })
+    .then(() => {
+      Taro.showToast({ title: "已提交认证信息", icon: "none" });
+      // 提交认证信息，成功后返回
+      toBack();
+    })
+    .catch((err) => {
+      Taro.showToast({ title: err?.errMsg || "认证失败", icon: "none" });
+    });
+}
+watch(
+  () => props.verifyResult,
+  () => {
+    if (props.verifyResult == 1) {
+      已认证.value = true;
+    }
+  },
+  { deep: true, immediate: true }
+);
+watch(
+  () => props.mobile,
+  () => {
+    formData.电话号码 = props.mobile;
+  },
+  { deep: true, immediate: true }
+);
+
+const emits = defineEmits(["toAgreement"]);
+</script>
+
+<style lang="scss">
+.user-auth {
+  height: 100vh;
+
+  &-footer {
+    position: fixed;
+    z-index: 10;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    min-height: 63px;
+    background: #ffffff;
+    box-shadow: 0 -3px 11px 0 rgba(224, 224, 224, 0.5);
+    padding: 10px 12px calc(8px + var(--safe-bottom-height));
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+
+    .btn {
+      width: 100%;
+    }
+
+    .checkbox-row {
+      --nut-primary-color: #017fff;
+      position: absolute;
+      top: -36px;
+      left: 50%;
+      transform: translateX(-50%);
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+
+      .nut-checkbox__label {
+        margin-left: 2px;
+        font-size: 11px;
+      }
+
+      .nut-icon-check-normal {
+        margin-top: 0 !important;
+      }
+
+      .nut-icon-checked {
+        font-size: 11px;
+      }
+
+      .book {
+        font-size: 11px;
+        color: #007aff;
+      }
+    }
+  }
+}
+</style>