@uxda/appkit 4.1.54 → 4.1.60

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/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/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

@@ -0,0 +1,216 @@
+<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>