jiliangxiaochengxu/pages/personRegistered/index.vue

<!-- @format -->

<template>
  <view class="app-container">
    <view class="setps">
      <u-steps :current="current">
        <u-steps-item title="第一步"> </u-steps-item>
        <u-steps-item title="第二步"></u-steps-item>
        <u-steps-item title="注册完成"></u-steps-item>
      </u-steps>
    </view>
    <view class="component">
      <component
        :formdData.sync="formdData"
        v-if="componentsKey[current] == 'uploadLicense'"
        :is="'uploadLicense'"
      ></component>
      <component
        :formdData.sync="formdData"
        :authorizerRef.sync="authorizerRef"
        v-if="componentsKey[current] == 'authorizer'"
        :is="'authorizer'"
      ></component>
      <component
        :formdData.sync="formdData"
        v-if="componentsKey[current] == 'recognition'"
        :is="'recognition'"
      >
      </component>
    </view>
    <view class="btn">
      <u-button
        class="custom-style"
        @click="handlePre"
        :plain="true"
        shape="circle"
        type="primary"
        >{{ current == 0 ? "退出注册" : "上一步" }}</u-button
      >
      <u-button
        class="custom-style"
        @click="handleNext"
        shape="circle"
        type="primary"
        >{{
          formdData.isPass && current == 2 ? "完成注册" : "下一步"
        }}</u-button
      >
    </view>
    <view style="height: 100rpx"></view>
  </view>
</template>

<script>
import { idcardOCR } from "@/api/companiesRegistered";
import { submitMiUser } from "@/api/personRegistered";
import uploadLicense from "@/components/personRegistered/uploadLicense";
import authorizer from "@/components/personRegistered/authorizer";
import recognition from "@/components/personRegistered/recognition";
export default {
  components: {
    uploadLicense,
    authorizer,
    recognition,
  },
  data() {
    return {
      authorizerRef: null,
      formdData: {
        cardFrontImg: null, //身份证正面
        cardBackImg: null, //身份证背面
        isPass: false, //是否通过
        personCardOrcResult: {
          name: "", //用户名
          idNum: "", //身份证号
          phone: "", //联系人手机号
          pwd: "", //单位联系电话
          pwdReset: "",
        }, //申请人信息
        recognition: {},
      },
      componentsKey: {
        0: "uploadLicense",
        1: "authorizer",
        2: "recognition",
      },
      current: 0,
    };
  },
  created() {
    // this.handlefinish();
  },
  methods: {
    //ocr识别
    async handleOcr() {
      if (!(this.formdData.cardBackImg && this.formdData.cardFrontImg)) {
        uni.showToast({
          title: "请先上传身份证正反面照片",
          //将值设置为 success 或者直接不用写icon这个参数
          icon: "none",
          //显示持续时间为 2秒
          duration: 2000,
        });
        return;
      }

      uni.showLoading({
        title: "智能识别中...",
      });
      try {
        let {
          data: { idcardDownOcrResult, idcardUpOcrResult },
        } = await idcardOCR([
          this.formdData.cardBackImg,
          this.formdData.cardFrontImg,
        ]);
        this.formdData.personCardOrcResult.name = idcardUpOcrResult.name;
        this.formdData.personCardOrcResult.idNum = idcardUpOcrResult.idNum;
        this.current++;

        setTimeout(() => {
          uni.hideLoading();
        }, 2000);
      } catch (error) {
        uni.showLoading({
          title: "识别错误",
        });
        setTimeout(() => {
          uni.hideLoading();
        }, 2000);
      } finally {
      }
    },
    //个人信息校验
    handlePerson() {
      this.authorizerRef.validate().then((res) => {
        this.current++;
      });
    },
    //下一步
    handleNext() {
      if (this.componentsKey[this.current] == "uploadLicense") {
        this.handleOcr();
      } else if (this.componentsKey[this.current] == "authorizer") {
        this.handlePerson();
      } else if (this.componentsKey[this.current] == "recognition") {
        if (this.formdData.isPass) {
          this.handlefinish();
        }
      }
    },
    //完成注册
    async handlefinish() {
      try {
        uni.showLoading({
          title: "提交中...",
        });

        await submitMiUser({
          idCardUp: this.formdData.cardFrontImg,
          idCardDown: this.formdData.cardBackImg,
          idCard: this.formdData.personCardOrcResult.idNum,
          name: this.formdData.personCardOrcResult.name,
          pwd: this.formdData.personCardOrcResult.pwd,
          phone: this.formdData.personCardOrcResult.phone,
        });
        uni.showToast({
          title: "提交成功",
          //显示持续时间为 2秒
          duration: 2000,
        });
        setTimeout(() => {
          uni.navigateTo({
            url: `/pages/personRegistered/bindCompanies?name=${this.formdData.personCardOrcResult.name}&idNum=${this.formdData.personCardOrcResult.idNum}&password=${this.formdData.personCardOrcResult.pwd}`,
            success: (res) => {},
            fail: () => {},
            complete: () => {},
          });
        }, 2000);
      } catch (error) {
      } finally {
        uni.hideLoading();
      }
    },
    //上一步
    handlePre() {
      if (this.current == 0) {
        uni.navigateBack({
          delta: 1,
        });
        return;
      }
      this.current--;
    },
  },
};
</script>

<style>
.component {
  width: 95%;
  margin: 40rpx auto;
}

::v-deep .u-button {
  width: 280rpx !important;
  height: 70rpx !important;
  font-size: 30rpx !important;
}

.btn {
  z-index: 99;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 20rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.app-container {
  height: 100vh;
  background: rgb(248, 249, 250);
}

.setps {
  width: 95%;
  margin: 10rpx auto;
  background: #fff;
  padding: 20rpx;
  border-radius: 6px;
}
</style>