@uxda/appkit 4.2.82 → 4.2.84

package/src/user/components/UserAuth.vue

@@ -1,220 +1,220 @@
-<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" :disabled="已认证"
-            :rules="['required']">
-            <template #append>
-              <ocr-icon v-if="!已认证" @complete="onOcrComplete" />
-            </template>
-          </ns-input>
-          <ns-input label="身份证号码" name="身份证号码" placeholder="请输入身份证号码" :maxlength="30" v-model="formData.身份证号码"
-            :disabled="已认证" :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="#163391" type="primary" @click="toSubmit">立即认证</ns-button>
-        <ns-button v-else class="btn" color="#163391" 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, { showToast } 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.身份证号码.toUpperCase(),
-      mobile: formData.电话号码,
-      name: formData.姓名,
-      // tenantId: props.userId,
-    })
-    .then((res: any) => {
-      if (res?.status) {
-        showToast({ title: "已提交认证信息", icon: "none" });
-        // 提交认证信息，成功后返回
-        setTimeout(() => {
-          toBack();
-        }, 500);
-      } else {
-        showToast({ title: "认证失败", icon: "none" });
-      }
-    })
-    .catch((err) => {
-      showToast({ title: err?.errMsg || "认证失败", icon: "none" });
-    });
-}
-watch(
-  () => props.verifyResult,
-  () => {
-    if (String(props.verifyResult) == "1") {
-      已认证.value = true;
-      const $http = useHttp();
-
-      $http.get(`/cas/sysAccount/userVerifyIdLast`).then((res: any) => {
-        if (res) {
-          formData.身份证号码 = res?.idCard;
-          formData.姓名 = res?.name;
-          formData.电话号码 = res.mobile;
-        }
-      });
-    }
-  },
-  { deep: true, immediate: true }
-);
-watch(
-  () => props.mobile,
-  () => {
-    if (String(props?.verifyResult) != "1") {
-      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>
+<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" :disabled="已认证"
+            :rules="['required']">
+            <template #append>
+              <ocr-icon v-if="!已认证" @complete="onOcrComplete" />
+            </template>
+          </ns-input>
+          <ns-input label="身份证号码" name="身份证号码" placeholder="请输入身份证号码" :maxlength="30" v-model="formData.身份证号码"
+            :disabled="已认证" :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="#163391" type="primary" @click="toSubmit">立即认证</ns-button>
+        <ns-button v-else class="btn" color="#163391" 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, { showToast } 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.身份证号码.toUpperCase(),
+      mobile: formData.电话号码,
+      name: formData.姓名,
+      // tenantId: props.userId,
+    })
+    .then((res: any) => {
+      if (res?.status) {
+        showToast({ title: "已提交认证信息", icon: "none" });
+        // 提交认证信息，成功后返回
+        setTimeout(() => {
+          toBack();
+        }, 500);
+      } else {
+        showToast({ title: "认证失败", icon: "none" });
+      }
+    })
+    .catch((err) => {
+      showToast({ title: err?.errMsg || "认证失败", icon: "none" });
+    });
+}
+watch(
+  () => props.verifyResult,
+  () => {
+    if (String(props.verifyResult) == "1") {
+      已认证.value = true;
+      const $http = useHttp();
+
+      $http.get(`/cas/sysAccount/userVerifyIdLast`).then((res: any) => {
+        if (res) {
+          formData.身份证号码 = res?.idCard;
+          formData.姓名 = res?.name;
+          formData.电话号码 = res.mobile;
+        }
+      });
+    }
+  },
+  { deep: true, immediate: true }
+);
+watch(
+  () => props.mobile,
+  () => {
+    if (String(props?.verifyResult) != "1") {
+      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>