ebike-ui/ebike-user/pages/user/views/IdentityVerification.vue

<template>
  <view class="loginbox">
    <view class="logintop flex justify-center align-center">
      <image
        :src="`${imgPath}static/userui/kncxbj.png`"
        style="width: 100px; height: 100px"
      />
    </view>
    <view class="input-fields padding">
      <!-- 输入姓名 -->
      <view class="input-item flex align-center">
        <text
          class="cuIcon-peoplefill"
          style="font-size: 20px; color: rgb(173, 173, 175); margin-right: 10px"
        ></text>
        <input v-model="name" placeholder="请输入姓名" />
      </view>
      <!-- 输入身份证号 -->
      <view class="input-item flex align-center">
        <text
          class="cuIcon-card lg text-gray"
          style="font-size: 20px; color: rgb(173, 173, 175); margin-right: 10px"
        ></text>
        <input v-model="idCard" placeholder="请输入身份证号" />
      </view>
      <!-- 登录按钮 -->
      <view class="flex flex-direction loginbotton">
        <button @click="phonelogin" class="cu-btn lg bg-green text-white">
          认证
        </button>
      </view>
    </view>
  </view>
  <zero-loading
    v-if="isloading"
    color="#c1c1c0"
    type="wobble"
    mask="true"
  ></zero-loading>
</template>

<script setup>
import { ref } from "vue";
import * as api from "@/utils/api.js";
import {
  showModelMessage,
  jkcBaseDecode,
  jkcBaseEncode,
  showMessage,
} from "@/utils/tools.js";
import config from "@/utils/config";
import { onLoad } from "@dcloudio/uni-app";

const imgPath = config.imgPath;

const isloading = ref(false);
const name = ref(""); // 用于存储姓名
const idCard = ref(""); // 用于存储身份证号
const countdown = ref(60); // 设置倒计时时间为60秒
const onLoadData = ref({});

const oUser = JSON.parse(jkcBaseDecode(uni.getStorageSync("wechat_user")));

onLoad((options) => {
  if (options["number"]) {
    onLoadData.value["number"] = options["number"];
    onLoadData.value["_tbScancodeApproach_"] = options["_tbScancodeApproach_"];
  }
});
const phonelogin = async () => {
  if (!name.value || !idCard.value) {
    showModelMessage("姓名和身份证号不能为空");
    return;
  }
  const idCardRegex =
    /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))((0[1-9])|([12][0-9])|(3[01]))\d{3}(\d|X)$/; // 身份证号正则表达式
  if (!idCardRegex.test(idCard.value)) {
    showModelMessage("请输入有效的身份证号");
    return;
  }
  // 如果验证通过，发起认证请求
  isloading.value = true;
  const { userId } = oUser;
  const params = {
    userId,
    name: name.value,
    idCard: idCard.value,
  };

  api.callOrdereApi("ebikeUser/verifyRealName", params, "post").then((res) => {
    console.log(res);
    const { message, code, data } = res;
    if (code != 200) {
      showModelMessage(message);
      return;
    } else {
      showMessage({
        title: "认证成功",
        icon: "success",
        duration: 500,
      });
    }
    isloading.value = false;
    oUser.realNameStatus = true;
    uni.setStorageSync("wechat_user", jkcBaseEncode(JSON.stringify(oUser)));
    // 假设成功认证后跳转
    setTimeout(() => {
      uni.navigateTo({
        url:
          "/pages/user/home/home?number=" +
          onLoadData.value["number"] +
          "&_tbScancodeApproach_=" +
          onLoadData.value["_tbScancodeApproach_"],
      });
    }, 500);
  });
};
</script>

<style scoped>
.loginbox {
  height: 100vh;
  background-color: #fff;
}

.logintop {
  height: 280px;
}

.input-fields {
  margin-top: 20px;
}

.input-item {
  height: 45px;
  margin-bottom: 30px;
  position: relative;
  background: rgb(246, 245, 248);
  padding: 0px 15px;
  border-radius: 20px;
}

.input-field {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.get-code-text {
  margin-left: 10px;
  color: #4caf50;
  font-size: 14px;
  width: 40%;
  cursor: pointer;
  line-height: 40px;
  text-align: right;
}

.get-code-text:disabled {
  color: #ccc;
}

.get-code-text {
  cursor: pointer;
}

.loginbotton {
  font-size: 14px;
}

.is-input-border {
  border: none;
}
</style>