uni-Identify-quality/pages/realName/realName.vue

<template>
  <view class="main">
    <view class="logo">
      <image src="@/static/image/logo2.png" mode="scaleToFill" class="img" />
    </view>
    <view class="container">
      <view class="head">
        <view style="display: flex; align-items: center">
          <view class="title">注册手机号</view>
          <!-- <view :style="{ fontSize: '18rpx' }">*实名认证失败</view> -->
          <!-- <view>*实名认证成功</view> -->
        </view>
        <view style="color: #7fa770; font-size: 24rpx; margin-left: 36rpx"
          >此实名仅用于注册该小程序</view
        >
      </view>
      <view class="radioGroup">
        <view>实名认证方式</view>
        <u-radio-group
          v-model="radiovalue"
          placement="row"
          @change="groupChange"
        >
          <u-radio label="身份证" :name="'0'"></u-radio>
          <u-radio label="护照" :name="'1'"></u-radio>
        </u-radio-group>
      </view>

      <view class="info">
        <view class="item">
          <view class="name">姓名</view>
          <u--input
            placeholder="请输入姓名"
            border="none"
            v-model="name"
            @change="changeName"
          ></u--input>
        </view>
        <view class="item">
          <view class="name">{{
            radiovalue === "0" ? "身份证号" : "护照号"
          }}</view>
          <u--input
            placeholder="请输入身份证号"
            border="none"
            v-model="num"
            @change="changeNum"
            clearable
            type="idcard"
            v-if="radiovalue === '0'"
          ></u--input>
          <u--input
            placeholder="请输入护照号"
            border="none"
            v-model="passportId"
            @change="changePassport"
            clearable
            v-else
          ></u--input>
        </view>
      </view>
      <view class="card-box" v-if="radiovalue === '0'">
        <view class="color:#626262;font-size:28rpx">身份证照片</view>
        <view
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 20rpx;
          "
        >
          <view class="card">
            <view>
              <u-upload
                :fileList="fileList"
                @afterRead="afterRead"
                @delete="deletePic"
                name="1"
                multiple
                :maxCount="1"
                :width="'270rpx'"
                :height="'158rpx'"
                previewImage
              >
                <image
                  src="@/static/image/card.png"
                  mode="scaleToFill"
                  style="width: 270rpx; height: 158rpx"
                ></image>
              </u-upload>
            </view>
            <view style="color: #4e964d; font-size: 20rpx; margin-top: 20rpx"
              >上传身份证人像面</view
            >
          </view>
          <view class="card">
            <view>
              <u-upload
                :fileList="fileList2"
                @afterRead="afterRead2"
                @delete="deletePic2"
                name="1"
                multiple
                :maxCount="1"
                :width="'270rpx'"
                :height="'158rpx'"
              >
                <image
                  src="@/static/image/card2.png"
                  mode="scaleToFill"
                  style="width: 270rpx; height: 158rpx"
                ></image>
              </u-upload>
            </view>
            <view style="color: #4e964d; font-size: 20rpx; margin-top: 20rpx"
              >上传身份证国徽面</view
            >
          </view>
        </view>
      </view>
      <view v-else class="card-box">
        <view class="color:#626262;font-size:28rpx">护照照片</view>
        <view
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 20rpx;
          "
        >
          <view class="card">
            <view>
              <u-upload
                :fileList="passport"
                @afterRead="afterReadPassport"
                @delete="deletePassport"
                name="1"
                multiple
                :maxCount="1"
                :width="'270rpx'"
                :height="'158rpx'"
                previewImage
              >
                <image
                  src="@/static/image/passport.png"
                  mode="scaleToFill"
                  style="width: 270rpx; height: 158rpx"
                ></image>
              </u-upload>
            </view>
            <view style="color: #4e964d; font-size: 20rpx; margin-top: 20rpx"
              >上传护照资料页</view
            >
          </view>
          <view class="card">
            <view>
              <u-upload
                :fileList="passport2"
                @afterRead="afterReadPassport2"
                @delete="deletePassport2"
                name="1"
                multiple
                :maxCount="1"
                :width="'270rpx'"
                :height="'158rpx'"
              >
                <image
                  src="@/static/image/passport2.png"
                  mode="scaleToFill"
                  style="width: 270rpx; height: 158rpx"
                ></image>
              </u-upload>
            </view>
            <view style="color: #4e964d; font-size: 20rpx; margin-top: 20rpx"
              >上传护照封面</view
            >
          </view>
        </view>
      </view>
      <view v-if="needPersonSecret" class="face">
        <view class="faceTitle">人脸识别</view>
        <view class="recognition" @click="camera" v-if="!video">
          <view style="color: #fff; margin-right: 10rpx">前往认证</view>
          <u-icon name="arrow-right-double" color="#fff"></u-icon>
        </view>
        <view class="recognition" @click="camera" v-else>
          <view style="color: #fff; margin-right: 10rpx">认证成功</view>
          <u-icon name="checkmark-circle" color="#fff"></u-icon>
        </view>
      </view>
      <view class="face">
        <view class="faceTitle">法大大认证</view>
        <view class="recognition" @click="fddRealName" v-if="!isFddSuccess">
          <view style="color: #fff; margin-right: 10rpx">前往认证</view>
          <u-icon name="arrow-right-double" color="#fff"></u-icon>
        </view>
        <view class="recognition" @click="fddRealName" v-else>
          <view style="color: #fff; margin-right: 10rpx">认证成功</view>
          <u-icon name="checkmark-circle" color="#fff"></u-icon>
        </view>
      </view>
      <view class="agreement">
        <u-checkbox-group
          v-model="checked"
          iconPlacement="left"
          placement="row"
          inactiveColor="#76C458"
        >
          <u-checkbox
            name="yes"
            shape="circle"
            activeColor="#76C458"
          ></u-checkbox>
          <view class="know">
            已阅读并同意
            <text @click="agreementHandle('service')"
              >《软件许可及服务协议》</text
            >
            <text @click="agreementHandle('privacy')">&《隐私保护政策》</text>
          </view>
        </u-checkbox-group>
      </view>
      <view style="width: 284rpx; margin: 20rpx auto">
        <u-button
          text="完成注册"
          shape="circle"
          @click="completeRegistration"
          color="#76C458"
        ></u-button>
      </view>
    </view>
    <!-- <u-loading-page bg-color="rgba(0, 0, 0, 0.8)" loading-text="数据正在加载中" :loading="show"></u-loading-page> -->
  </view>
</template>

<script>
import http from "@/http/api";
import { configFun } from "../../http/login";
export default {
  data() {
    return {
      needPersonSecret: false,
      name: "",
      num: "",
      passportId: "",
      checked: [],
      fileList: [],
      fileList2: [],
      passport: [],
      passport2: [],
      video: "",
      isChecked: false,
      isFddSuccess: false,
      radiovalue: "0",
    };
  },
  async onLoad(options) {
    const res = await configFun();
    if (res.code === 200) {
      this.needPersonSecret = res.data.needPersonSecret;
    }
    const data = JSON.parse(decodeURIComponent(options.data));
    this.name = data.name || "";
    this.num = data.num || "";
    this.fileList = data.fileList || [];
    this.fileList2 = data.fileList2 || [];
    this.radiovalue = data.radiovalue;
    this.passport = data.passport || [];
    this.passport2 = data.passport2 || [];
    this.passportId = data.passportId || "";
  },
  async onShow() {
    if (!uni.getStorageSync("telNum")) {
      uni.navigateTo({
        url: "/pages/login/login",
      });
    }
    this.checkFdd();
    // if (uni.getStorageSync("tempVideoPath")) {
    //   const tempVideoPath = uni.getStorageSync("tempVideoPath");
    //   this.video = await this.uploadFilePromise(tempVideoPath);
    //   uni.removeStorageSync("tempVideoPath");
    //   console.log(
    //     "this.video",
    //     this.video,
    //     uni.getStorageSync("tempVideoPath")
    //   );
    //   const data = {
    //       num: uni.getStorageSync("info").num || '',
    //       name: uni.getStorageSync("info").name || '',
    //       fileList: uni.getStorageSync("info").fileList || [],
    //       fileList2: uni.getStorageSync("info").fileList2,
    //       video: this.video
    //   }
    //   uni.setStorageSync("info", data)
    // }
  },
  watch: {
    isFddSuccess(newValue) {
      if (newValue) {
        console.log(newValue);
        this.name = uni.getStorageSync("info").name || "";
        this.num = uni.getStorageSync("info").num || "";
        this.fileList = uni.getStorageSync("info").fileList || [];
        this.fileList2 = uni.getStorageSync("info").fileList2 || [];
        this.video = uni.getStorageSync("info").video || "";
        this.radiovalue = uni.getStorageSync("info").radiovalue;
        this.passport = uni.getStorageSync("info").passport || [];
        this.passport2 = uni.getStorageSync("info").passport2 || [];
        this.passportId = uni.getStorageSync("info").passportId || "";
        uni.removeStorageSync("info");
      }
    },
  },
  methods: {
    changeName(value) {
      this.name = value;
    },
    changeNum(value) {
      this.num = value;
    },
    changePassport(value) {
      this.passportId = value;
    },
    camera() {
      uni.navigateTo({
        url: "/pages/cameraContext/cameraContext",
      });
    },
    async completeRegistration() {
      const res1 = await this.checkFdd();
      if (!res1) return this.$common.msgToast("法大大验证未通过");
      if (!this.checked.length)
        return this.$common.msgToast("请阅读并勾选协议");
      if (!this.name) return this.$common.msgToast("请输入姓名");
      if (this.radiovalue === "0") {
        if (!this.fileList.length)
          return this.$common.msgToast("请上传身份证人面像");
        if (!this.fileList2.length)
          return this.$common.msgToast("请上传身份国徽面");
        if (!this.num) return this.$common.msgToast("请输入身份证号");
      } else {
        if (!this.passport.length)
          return this.$common.msgToast("请上传护照正面");
        if (!this.passport2.length)
          return this.$common.msgToast("请上传护照背面");
        if (!this.passportId) return this.$common.msgToast("请输入护照号");
      }

      //   if (this.needPersonSecret && !this.video)
      //     return this.$common.msgToast("请上传人脸识别视频");
      const res = await this.$api.login.register({
        user: {
          telNum: uni.getStorageSync("telNum"),
          realNameIDName: this.num,
          realName: this.name,
          realIDImgA: this.fileList[0]?.url || "",
          realIDImgB: this.fileList2[0]?.url || "",
          idType: this.radiovalue,
          passport: {
            idNum: this.passportId,
            name: this.name,
            RealIDImgA: this.passport[0]?.url || "",
            RealIDImgB: this.passport2[0]?.url || "",
          },
        },
      });
      if (res.status === 0) {
        uni.switchTab({
          url: "/pages/home/index",
        });
      } else {
        this.$common.msgToast(res.msg);
      }
    },
    // 删除图片
    deletePic(event) {
      this[`fileList`].splice(event.index, 1);
    },
    deletePassport(event) {
      this[`passport`].splice(event.index, 1);
    },
    deletePassport2(event) {
      this[`passport2`].splice(event.index, 1);
    },
    // 删除图片
    deletePic2(event) {
      this[`fileList2`].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList`].length;
      lists.map((item) => {
        this[`fileList`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url, "check");
        let item = this[`fileList`][fileListLen];
        this[`fileList`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    async afterReadPassport(event) {
      let lists = [].concat(event.file);
      let fileListLen = this[`passport`].length;
      lists.map((item) => {
        this[`passport`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url, "check");
        let item = this[`passport`][fileListLen];
        this[`passport`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    async afterRead2(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList2`].length;
      lists.map((item) => {
        this[`fileList2`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList2`][fileListLen];
        this[`fileList2`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    async afterReadPassport2(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`passport2`].length;
      lists.map((item) => {
        this[`passport2`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`passport2`][fileListLen];
        this[`passport2`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url, type = null) {
      return new Promise((resolve) => {
        uni.uploadFile({
          url: http.baseUrl + "/api/wxuser/uploadpic",
          filePath: url,
          name: "file",
          success: (res) => {
            const { path } = JSON.parse(res.data).data;
            resolve(path);
            if (type === "check" && this.radiovalue === "0") {
              this.chenckId(path);
            }
          },
        });
      });
    },
    async chenckId(realIDImgA) {
      const res = await this.$api.login.chenckId({ realIDImgA });
      if (res.status === 0) {
        this.num = res.data.iDNum;
        this.name = res.data.realName;
      } else {
        this.$common.msgToast("未识别身份信息");
      }
    },
    async fddRealName() {
      if (this.radiovalue === "0") {
        if (!this.num || !this.name)
          return this.$common.msgToast("姓名和身份证号不能为空");
      } else {
        if (!this.passportId || !this.name)
          return this.$common.msgToast("姓名和护照号不能为空");
      }
      const data = {
        num: this.num,
        name: this.name,
        fileList: this.fileList,
        fileList2: this.fileList2,
        passport: this.passport,
        passport2: this.passport2,
        passportId: this.passportId,
        radiovalue: this.radiovalue,
      };
      console.log(data, "data");
      uni.setStorageSync("info", data);
      const mobile = uni.getStorageSync("telNum");
      const res = await this.$api.login.fddRealName({
        customerName: this.name,
        customerIdentNo: this.num || this.passportId,
        mobile,
        idType: this.radiovalue,
      });
      if (res.status === 0) {
        uni.setStorageSync("fddUrl", res.data?.url);
        uni.navigateTo({
          url: "/pages/realName/FDDRegister",
        });
      } else {
        this.$common.msgToast(res.msg);
      }
    },
    checkFdd() {
      return this.$api.login.checkFdd().then((res) => {
        if (res.status === 0) {
          this.isFddSuccess = res.data.isVerify;
          return res.data.isVerify;
        } else {
          this.$common.msgToast(res.msg);
        }
      });
    },
    agreementHandle(type) {
      const data = {
        num: this.num,
        name: this.name,
        fileList: this.fileList,
        fileList2: this.fileList2,
        radiovalue: this.radiovalue,
        passport: this.passport,
        passport2: this.passport2,
        passportId: this.passportId,
      };
      uni.setStorageSync("info", data);
      uni.navigateTo({
        url:
          "/pages/realName/agreement?type=" +
          type +
          "&data=" +
          encodeURIComponent(JSON.stringify(data)),
      });
    },
    groupChange(value) {
      console.log(value);
      if (value === "1") {
        this.fileList = [];
        this.fileList2 = [];
        this.name = "";
        this.num = "";
      } else {
        this.passport = [];
        this.passport2 = [];
        this.passportId = "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .u-radio {
  margin-right: 20rpx;
}
/deep/.u-checkbox__icon-wrap--circle {
  width: 30upx !important;
  height: 30upx !important;
}

/deep/ .u-checkbox-label--left {
  margin-top: 20rpx;
}

.main {
  background: url("@/static/image/login-bg.png") no-repeat;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;

  .logo {
    height: 200rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .img {
      width: 142rpx;
      height: 60rpx;
    }
  }

  .container {
    display: flex;
    flex-direction: column;
    flex: 1;
    box-sizing: border-box;
    height: calc(100vh - 200upx);
    width: 100%;
    background: #fff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    padding: 62rpx 32rpx;

    .head {
      .title {
        color: #626262;
        font-size: 40rpx;
        margin-left: 36rpx;
        font-weight: 600;
      }
    }
    .radioGroup {
      display: flex;
      gap: 40rpx;
      margin: 10rpx 0;
    }
    .info {
      margin-top: 24rpx;

      .item {
        box-sizing: border-box;
        background: #f8f8f8;
        border-radius: 20rpx;
        width: 100%;
        height: 92rpx;
        display: flex;
        align-items: center;
        padding-left: 24rpx;
        margin-bottom: 20rpx;

        .name {
          width: 200rpx;
          height: 72rpx;
          line-height: 72rpx;
          border-right: 1rpx solid #d1d1d1;
        }

        /deep/ .u-input {
          margin-left: 40rpx;
        }
      }
    }

    .card-box {
      width: 100%;
      height: 322rpx;
      background: #f8f8f8;
      padding: 32rpx 24rpx;
      box-sizing: border-box;

      .card {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
    }

    .face {
      margin-top: 20rpx;
      box-sizing: border-box;
      background: #f8f8f8;
      border-radius: 20rpx;
      width: 100%;
      height: 92rpx;
      display: flex;
      align-items: center;

      .faceTitle {
        width: 202rpx;
        height: 100%;
        padding: 26rpx 0 26rpx 24rpx;
        box-sizing: border-box;
      }

      .recognition {
        height: 92rpx;
        width: calc(100% - 202rpx);
        background: #76c458;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0 20rpx 20rpx 0;
      }
    }

    .agreement {
      font-size: 28rpx;
      margin: 46rpx auto;

      .know {
        margin-top: 20upx;
        font-size: 28upx;
        color: #a6a6a6;

        text {
          color: #76c458;
        }
      }
    }
  }
}
</style>