@uxda/appkit 1.2.80 → 3.2.20

package/src/user/components/UserAuth.vue

@@ -0,0 +1,257 @@
+<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 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) {
+        Taro.showToast({ title: "已提交认证信息", icon: "none" });
+        // 提交认证信息，成功后返回
+        setTimeout(() => {
+          toBack();
+        }, 500);
+      } else {
+        Taro.showToast({ title: "认证失败", icon: "none" });
+      }
+    })
+    .catch((err) => {
+      Taro.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>

package/src/user/components/UserBinding.vue

@@ -14,31 +14,35 @@
     </div>
 
     <div class="user-binding-layout user-binding-inputlayout" style="flex: 1" v-if="current === 1">
-      <nut-input
-        label="手机号码"
-        v-model="authState.mobile"
-        placeholder="请输入手机号码"
-        :max-length="11"
-        readonly
-        input-align="right"
-      />
-      <nut-input
-        label="验证码"
-        v-model="authState.code"
-        placeholder="请输入验证码"
-        :max-length="6"
-        input-align="right"
-      >
-        <template #button>
-          <nut-button
-            :disabled="countdownActive"
-            class="user-binding-codebtn"
-            type="default"
-            @click="onAuthCode"
-            >{{ countdownText }}</nut-button
+      <nut-form>
+        <nut-form-item label="手机号码" label-align="left">
+          <nut-input
+            v-model="authState.mobile"
+            placeholder="请输入手机号码"
+            :max-length="11"
+            readonly
+            input-align="right"
+          />
+        </nut-form-item>
+        <nut-form-item label="验证码" label-align="left">
+          <nut-input
+            v-model="authState.code"
+            placeholder="请输入验证码"
+            :max-length="6"
+            input-align="right"
           >
-        </template>
-      </nut-input>
+            <template #right>
+              <nut-button
+                :disabled="countdownActive"
+                class="user-binding-codebtn"
+                type="default"
+                @click="onAuthCode"
+                >{{ countdownText }}</nut-button
+              >
+            </template>
+          </nut-input>
+        </nut-form-item>
+      </nut-form>
 
       <nut-button
         class="user-binding-btn"
@@ -51,30 +55,34 @@
     </div>
 
     <div class="user-binding-layout user-binding-inputlayout" style="flex: 1" v-else>
-      <nut-input
-        label="手机号码"
-        v-model="bindingState.mobile"
-        placeholder="请输入新手机号码"
-        :max-length="11"
-        input-align="right"
-      />
-      <nut-input
-        label="验证码"
-        v-model="bindingState.code"
-        placeholder="请输入验证码"
-        :max-length="6"
-        input-align="right"
-      >
-        <template #button>
-          <nut-button
-            :disabled="countdownActive1"
-            class="user-binding-codebtn"
-            type="default"
-            @click="onBindingCode"
-            >{{ countdownText1 }}</nut-button
+      <nut-form>
+        <nut-form-item label="手机号码" label-align="left">
+          <nut-input
+            v-model="bindingState.mobile"
+            placeholder="请输入新手机号码"
+            :max-length="11"
+            input-align="right"
+          />
+        </nut-form-item>
+        <nut-form-item label="验证码" label-align="left">
+          <nut-input
+            v-model="bindingState.code"
+            placeholder="请输入验证码"
+            :max-length="6"
+            input-align="right"
           >
-        </template>
-      </nut-input>
+            <template #right>
+              <nut-button
+                :disabled="countdownActive1"
+                class="user-binding-codebtn"
+                type="default"
+                @click="onBindingCode"
+                >{{ countdownText1 }}</nut-button
+              >
+            </template>
+          </nut-input>
+        </nut-form-item>
+      </nut-form>
 
       <nut-button
         class="user-binding-btn"
@@ -202,6 +210,8 @@ const emits = defineEmits(['success'])
   flex-direction: column;
   box-sizing: border-box;
   padding: 10px 12px env(safe-area-inset-bottom, 0px);
+  --nut-cell-padding: 0;
+
   &-img {
     width: 351px;
     height: 192px;
@@ -214,7 +224,26 @@ const emits = defineEmits(['success'])
     overflow: hidden;
     margin-bottom: 10px;
   }
-  &-btn {
+  &-inputlayout {
+    padding: 0 10px;
+    box-sizing: border-box;
+    .nut-input {
+      height: 40px;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      padding-left: 3px;
+      border-color: #f5f5f5;
+      .input-text {
+        width: 100%;
+      }
+    }
+  }
+  .nut-placeholder {
+    color: #cccccc;
+  }
+  .user-binding-btn {
     position: absolute;
     bottom: 50px;
     left: 25px;
@@ -224,7 +253,7 @@ const emits = defineEmits(['success'])
     height: 40px;
     line-height: 38px;
   }
-  &-codebtn {
+  .user-binding-codebtn {
     height: 30px;
     font-size: 12px;
     padding: 0;
@@ -233,7 +262,7 @@ const emits = defineEmits(['success'])
     color: var(--app-primary-color, #017fff);
     background: #f2f2f2;
   }
-  &-steps {
+  .user-binding-steps {
     margin-top: 15px;
     .nut-step-line {
       background: rgba(220, 220, 220, 1);
@@ -244,12 +273,12 @@ const emits = defineEmits(['success'])
       font-weight: bold;
       color: rgba(0, 0, 0, 0.4);
     }
-    .nut-step.nut-step-wait .nut-step-icon.is-text {
+    .nut-step.nut-step-wait .nut-step-icon {
       background: rgba(243, 243, 243, 1);
       border-color: rgba(243, 243, 243, 1);
       color: rgba(0, 0, 0, 0.4);
     }
-    .nut-step.nut-step-process .nut-step-icon.is-text {
+    .nut-step.nut-step-process .nut-step-icon {
       background: var(--app-primary-color, #017fff);
       border-color: var(--app-primary-color, #017fff);
     }
@@ -274,27 +303,5 @@ const emits = defineEmits(['success'])
       height: 22px;
     }
   }
-  &-inputlayout {
-    padding: 0 10px;
-    box-sizing: border-box;
-    .nut-input {
-      height: 40px;
-      padding: 0;
-      display: flex;
-      align-items: center;
-      font-size: 16px;
-      padding-left: 3px;
-      border-color: #f5f5f5;
-      .input-text {
-        width: 100%;
-      }
-    }
-    .nut-input-label {
-      color: #666;
-    }
-  }
-  .nut-placeholder {
-    color: #cccccc;
-  }
 }
 </style>

package/src/user/components/UserEntry.vue

@@ -1,41 +1,19 @@
 <template>
   <div class="user-entry">
     <div class="user-entry-head">
-      <img
-        class="user-entry-head-img"
-        @click="toUser"
-        mode="aspectFit"
-        v-if="avatar"
-        :src="avatar"
-        alt=""
-      />
-      <img
-        class="user-entry-head-img"
-        mode="aspectFit"
-        @click="toUser1"
-        v-else
-        src="https://cdn.ddjf.com/static/images/wx-yunservice/account-head.png"
-        alt=""
-      />
+      <img class="user-entry-head-img" @click="toUser" mode="aspectFit" v-if="avatar" :src="avatar" alt="" />
+      <img class="user-entry-head-img" mode="aspectFit" @click="toUser1" v-else
+        src="https://cdn.ddjf.com/static/images/wx-yunservice/account-head.png" alt="" />
     </div>
     <div class="user-entry-bd">
       <div v-if="!mobile" class="user-entry-bd-bigtxt" @click="toLogin">
         请登录
-        <img
-          class="user-entry-bd-bigtxt-icon"
-          mode="aspectFit"
-          src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA0MCA0MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggb3BhY2l0eT0iMC4wMSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDQwLjM1MTZINDBWMC4zNTE1NjJIMFY0MC4zNTE2WiIgZmlsbD0id2hpdGUiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNCA4LjM1MTU2TDI2IDIwLjM1MTZMMTQgMzIuMzUxNiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC4wMSIvPgo8cGF0aCBkPSJNMTQgOC4zNTE1NkwyNiAyMC4zNTE2TDE0IDMyLjM1MTYiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg=="
-          alt=""
-        />
+        <span class="user-entry-bd-arrow">></span>
       </div>
       <template v-else>
         <div @click="toUser" class="user-entry-bd-txt">
           {{ name }}
-          <img
-            style="width: 14px; height: 14px; margin-left: 2px"
-            src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTExLjA4MzUgN0wxOC4wODM1IDE0TDExLjA4MzUgMjEiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS43NSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo="
-            alt=""
-          />
+          <span class="user-entry-bd-arrow">></span>
         </div>
         <div @click="toUser" class="user-entry-bd-smalltxt">{{ encodePhone(mobile) }}</div>
       </template>
@@ -83,17 +61,19 @@ const emits = defineEmits(['jump', 'login'])
 .user-entry {
   position: absolute;
   left: 0;
-  top: 130px;
+  top: 125px;
   transform: translateY(-50%);
   display: flex;
   padding: 0 22px;
   align-items: center;
   width: 100%;
+
   &-head {
     position: relative;
     width: 62px;
     height: 62px;
     margin-right: 8px;
+
     &-img {
       width: 100%;
       height: 100%;
@@ -101,6 +81,7 @@ const emits = defineEmits(['jump', 'login'])
       border-radius: 50%;
       border: 1.5px solid #fff;
     }
+
     &-icon {
       position: absolute;
       width: 15px;
@@ -111,8 +92,10 @@ const emits = defineEmits(['jump', 'login'])
       background-size: cover;
     }
   }
+
   &-bd {
     color: #fff;
+
     &-bigtxt {
       display: flex;
       align-items: center;
@@ -120,10 +103,12 @@ const emits = defineEmits(['jump', 'login'])
       font-weight: 500;
       line-height: 28px;
       margin-left: 10px;
+
       &-icon {
         width: 20px;
       }
     }
+
     &-txt {
       font-size: 20px;
       font-weight: 500;
@@ -132,11 +117,17 @@ const emits = defineEmits(['jump', 'login'])
       display: flex;
       align-items: center;
     }
+
     &-smalltxt {
       margin-top: 0;
       font-size: 15px;
       line-height: 21px;
     }
+
+    &-arrow {
+      font-size: 12px;
+      margin-left: 8px;
+    }
   }
 }
 </style>

package/src/user/components/UserFeedback.vue

@@ -1,17 +1,8 @@
 <template>
   <div class="user-feedback" :class="{ isSuccess }">
     <div v-if="!isSuccess" class="user-feedback-wrap">
-      <div class="user-feedback-head">
-        <div class="user-feedback-head-info">1.系统使用过程中，遇到系统问题可通过此途径反馈。</div>
-        <div class="user-feedback-head-info">
-          2.尽量在出问题的页面直接点击“问题反馈”，系统将后台获取当前页面信息，以便快速定位问题页。
-        </div>
-        <div class="user-feedback-head-info">
-          3.问题描述请尽可能详细描述操作步骤，如涉及订单或客户信息，尽量附上订单编号/客户姓名等关键信息，以便快速定位问题。
-        </div>
-        <div class="user-feedback-head-info">4.问题描述支持上传图片及截图，视频不能超过50M。</div>
-      </div>
-
+      <img src="https://cdn.ddjf.com/static/images/customer-center/feedback-img.png"
+        style="width: 311px;height:149.5px;margin: 0 auto;" />
       <div class="user-feedback-tit">补充描述</div>
       <div class="user-feedback-body">
         <editor