@uxda/appkit 4.3.8 → 4.3.11

package/src/user/components/LoginSetting.vue

@@ -1,114 +1,114 @@
-<template>
-  <div class="login-setting" :style="style" v-if="show && showLoginRule">
-    <img
-      class="login-setting-img"
-      src="https://cdn.ddjf.com/static/images/nutshell/empty-permission.png"
-    />
-    <div class="login-setting-text">
-      {{ loginRuleTip }}
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref, onMounted } from 'vue'
-import { useHttp } from '../api'
-import { useAppKitOptions } from '../../Appkit'
-import { useSafeArea } from '../../shared/composables'
-import { useDidShow } from '@tarojs/taro'
-import debounce from 'lodash-es/debounce'
-
-const props = withDefaults(
-  defineProps<{
-    app: string
-    withTabbar?: boolean
-    withNavbar?: boolean
-    show?: boolean
-  }>(),
-  {
-    app: '',
-    withTabbar: false,
-    withNavbar: false,
-    show: true,
-  }
-)
-
-const safeArea = useSafeArea()
-const showLoginRule = ref<boolean>(false)
-const loginRuleTip = ref('')
-
-const style = computed(() => {
-  let str = ''
-  if (props.withTabbar) {
-    str += `bottom: ${safeArea.menuRect.bottom + 5}px;`
-  }
-  if (props.withNavbar) {
-    str += `top: ${safeArea.nav + safeArea.status + 5}px;`
-  }
-  return str
-})
-
-onMounted(() => {
-  checkLoginTimeRule()
-})
-useDidShow(() => {
-  checkLoginTimeRule()
-})
-
-// 检验登录时间
-const checkLoginTimeRule = debounce(() => {
-  const appkitOptions = useAppKitOptions()
-
-  const $http = useHttp()
-  $http
-    .post('/cas/sysUser/checkLoginTimeRule', {
-      appCode: props.app || appkitOptions.app(),
-      tenantId: appkitOptions.tenant(),
-      device: 'mini',
-    })
-    .then((result: any) => {
-      if (result === true) {
-        showLoginRule.value = false
-        loginRuleTip.value = ''
-        emits('show', loginRuleTip.value)
-        return
-      } else if (result.status) {
-        showLoginRule.value = true
-        loginRuleTip.value = result.message
-        emits('show', loginRuleTip.value)
-      }
-    })
-}, 100)
-
-// 父组件事件
-const emits = defineEmits(['show'])
-</script>
-
-<style lang="scss">
-.login-setting {
-  position: fixed;
-  z-index: 4;
-  left: 12px;
-  top: 10px;
-  bottom: 10px;
-  align-items: center;
-  width: calc(100% - 24px);
-  background: #ffffff;
-  border-radius: 5px;
-  display: flex;
-  flex-direction: column;
-  &-img {
-    margin-top: 50%;
-    height: 111px;
-    width: 198px;
-  }
-  &-text {
-    margin-top: 10px;
-    color: #353535;
-    opacity: 0.4;
-    font-size: 12px;
-    padding: 0 30px;
-    text-align: center;
-  }
-}
-</style>
+<template>
+  <div class="login-setting" :style="style" v-if="show && showLoginRule">
+    <img
+      class="login-setting-img"
+      src="https://cdn.ddjf.com/static/images/nutshell/empty-permission.png"
+    />
+    <div class="login-setting-text">
+      {{ loginRuleTip }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, onMounted } from 'vue'
+import { useHttp } from '../api'
+import { useAppKitOptions } from '../../Appkit'
+import { useSafeArea } from '../../shared/composables'
+import { useDidShow } from '@tarojs/taro'
+import debounce from 'lodash-es/debounce'
+
+const props = withDefaults(
+  defineProps<{
+    app: string
+    withTabbar?: boolean
+    withNavbar?: boolean
+    show?: boolean
+  }>(),
+  {
+    app: '',
+    withTabbar: false,
+    withNavbar: false,
+    show: true,
+  }
+)
+
+const safeArea = useSafeArea()
+const showLoginRule = ref<boolean>(false)
+const loginRuleTip = ref('')
+
+const style = computed(() => {
+  let str = ''
+  if (props.withTabbar) {
+    str += `bottom: ${safeArea.menuRect.bottom + 5}px;`
+  }
+  if (props.withNavbar) {
+    str += `top: ${safeArea.nav + safeArea.status + 5}px;`
+  }
+  return str
+})
+
+onMounted(() => {
+  checkLoginTimeRule()
+})
+useDidShow(() => {
+  checkLoginTimeRule()
+})
+
+// 检验登录时间
+const checkLoginTimeRule = debounce(() => {
+  const appkitOptions = useAppKitOptions()
+
+  const $http = useHttp()
+  $http
+    .post('/cas/sysUser/checkLoginTimeRule', {
+      appCode: props.app || appkitOptions.app(),
+      tenantId: appkitOptions.tenant(),
+      device: 'mini',
+    })
+    .then((result: any) => {
+      if (result === true) {
+        showLoginRule.value = false
+        loginRuleTip.value = ''
+        emits('show', loginRuleTip.value)
+        return
+      } else if (result.status) {
+        showLoginRule.value = true
+        loginRuleTip.value = result.message
+        emits('show', loginRuleTip.value)
+      }
+    })
+}, 100)
+
+// 父组件事件
+const emits = defineEmits(['show'])
+</script>
+
+<style lang="scss">
+.login-setting {
+  position: fixed;
+  z-index: 4;
+  left: 12px;
+  top: 10px;
+  bottom: 10px;
+  align-items: center;
+  width: calc(100% - 24px);
+  background: #ffffff;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  &-img {
+    margin-top: 50%;
+    height: 111px;
+    width: 198px;
+  }
+  &-text {
+    margin-top: 10px;
+    color: #353535;
+    opacity: 0.4;
+    font-size: 12px;
+    padding: 0 30px;
+    text-align: center;
+  }
+}
+</style>

package/src/user/components/UserAuth.vue

@@ -1,218 +1,218 @@
-<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 v-track-click="'用户认证-个人信息授权协议'" @click="showAgreement" class="book">《个人信息授权协议》</span>
-        </div>
-        <ns-button v-if="!已认证" class="btn" v-track-click="'用户认证-立即认证'" color="#163391" type="primary" @click="toSubmit">立即认证</ns-button>
-        <ns-button v-else class="btn" v-track-click="'用户认证-返回'" 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;
-      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 v-track-click="'用户认证-个人信息授权协议'" @click="showAgreement" class="book">《个人信息授权协议》</span>
+        </div>
+        <ns-button v-if="!已认证" class="btn" v-track-click="'用户认证-立即认证'" color="#163391" type="primary" @click="toSubmit">立即认证</ns-button>
+        <ns-button v-else class="btn" v-track-click="'用户认证-返回'" 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;
+      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>