jiliangxiaochengxu/pages/companiesRegistered/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-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"
        :companiesInformationRef.sync="companiesInformationRef"
        v-if="componentsKey[current] == 'companiesInformation'"
        :is="'companiesInformation'"
      ></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 == 3 ? "完成注册" : "下一步"
        }}</u-button
      >
    </view>
    <view style="height: 100rpx"></view>
  </view>
</template>

<script>
import {
  businessLicenseIdentification,
  submitMiMechanism,
} from "@/api/companiesRegistered";
import uploadLicense from "@/components/companiesRegistered/uploadLicense";
import companiesInformation from "@/components/companiesRegistered/companiesInformation";
import authorizer from "@/components/companiesRegistered/authorizer";
import recognition from "@/components/companiesRegistered/recognition";

export default {
  components: {
    uploadLicense,
    companiesInformation,
    recognition,
    authorizer,
  },
  onLoad(options) {
    this.formdData.type = options.type;
  },
  data() {
    return {
      companiesInformationRef: null,
      authorizerRef: null,
      formdData: {
        type: null, //类别
        isPass: false, //是否通过
        //企业营业照
        imageUrl: null,
        //营业识别数据
        companiesOrcResult: {
          region: "", //单位区域
          location: "", //地理位置
          postalAddress: "", //详细地址
          type: "",
          regNum: "",
          name: "",
          address: "",
          person: "",
        }, //企业信息
        personCardOrcResult: {
          name: "", //用户名
          idNum: "", //身份证号
          userMobile: "", //联系人手机号
          landline: "", //单位联系电话
          cardFrontImg: null, //身份证正面
          cardBackImg: null, //身份证背面
        }, //申请人信息
        recognition: {},
      },
      componentsKey: {
        0: "uploadLicense",
        1: "companiesInformation",
        2: "authorizer",
        3: "recognition",
      },
      current: 0,
    };
  },
  computed: {
    isNextDisbaled() {
      if (
        this.formdData.personCardOrcResult.name &&
        this.formdData.companiesOrcResult.person
      ) {
        return (
          this.formdData.personCardOrcResult.name !==
          this.formdData.companiesOrcResult.person
        );
      } else {
        return false;
      }
    },
  },
  methods: {
    //确认个人信息
    handlePerson() {
      if (
        this.formdData.personCardOrcResult.name !==
        this.formdData.companiesOrcResult.person
      ) {
        uni.showToast({
          title: "识别结果不符，请到电脑端申请注册",
          //将值设置为 success 或者直接不用写icon这个参数
          icon: "none",
          //显示持续时间为 2秒
          duration: 2000,
        });
        return;
      }

      this.authorizerRef.validate().then((res) => {
        this.current++;
      });
    },
    //ocr识别
    async handleOcr() {
      if (!this.formdData.imageUrl) {
        uni.showToast({
          title: "请先上传营业执照",
          //将值设置为 success 或者直接不用写icon这个参数
          icon: "none",
          //显示持续时间为 2秒
          duration: 2000,
        });
        return;
      }
      uni.showLoading({
        title: "智能识别中...",
      });
      try {
        let {
          data: { orcResult },
        } = await businessLicenseIdentification({
          filePath: this.formdData.imageUrl,
        });

        Object.keys(orcResult).forEach((key) => {
          this.formdData.companiesOrcResult[key] = orcResult[key];
        });

        setTimeout(() => {
          uni.hideLoading();
          this.current++;
        }, 2000);
      } catch (error) {
        uni.showLoading({
          title: "识别错误",
        });
      } finally {
        setTimeout(() => {
          uni.hideLoading();
        }, 2000);
      }
    },
    //确认企业信息
    handleConrim() {
      this.companiesInformationRef.validate().then((res) => {
        this.current++;
      });
      // if (
      //   !this.formdData.companiesOrcResult.region ||
      //   !this.formdData.companiesOrcResult.location
      // ) {
      //   uni.showToast({
      //     title: "位置区域不能为空",
      //     //将值设置为 success 或者直接不用写icon这个参数
      //     icon: "none",
      //     //显示持续时间为 2秒
      //     duration: 2000,
      //   });
      // } else {
      //   this.current++;
      // }
    },
    //完成注册
    async handlefinish() {
      uni.showLoading({
        title: "提交中....",
      });
      try {
        const paramsParse = {
          name: this.formdData.companiesOrcResult.name,
          type: this.formdData.companiesOrcResult.type,
          code: this.formdData.companiesOrcResult.regNum,
          loginName: this.formdData.companiesOrcResult.regNum,
          region: this.formdData.companiesOrcResult.region,
          residence: this.formdData.companiesOrcResult.address,
          userName: this.formdData.companiesOrcResult.person,
          location: this.formdData.companiesOrcResult.location,
          postalAddress: this.formdData.companiesOrcResult.postalAddress,
          cardUp: this.formdData.personCardOrcResult.cardFrontImg,
          cardDown: this.formdData.personCardOrcResult.cardBackImg,
          principalCard: this.formdData.personCardOrcResult.idNum,
          principal: this.formdData.personCardOrcResult.name,
          landline: this.formdData.personCardOrcResult.landline,
          userMobile: this.formdData.personCardOrcResult.userMobile,
        };
        let res = await submitMiMechanism(paramsParse);
        uni.showToast({
          title: "注册完成",
          //将值设置为 success 或者直接不用写icon这个参数
          icon: "success",
          //显示持续时间为 2秒
          duration: 2000,
        });
        uni.navigateTo({
          url: `/pages/companiesRegistered/companiesPassword?adminUserName=${res.data.adminUser.name}&adminUserPwdOriginal=${res.data.adminUser.pwdOriginal}&userName=${res.data.user.name}&userPwdOriginal=${res.data.user.pwdOriginal}`,
          success: (res) => {},
          fail: () => {},
          complete: () => {},
        });
      } catch (error) {
      } finally {
        setTimeout(() => {
          uni.hideLoading();
        }, 2000);
      }
    },
    //下一步
    handleNext() {
      if (this.componentsKey[this.current] == "uploadLicense") {
        this.handleOcr();
      } else if (this.componentsKey[this.current] == "companiesInformation") {
        this.handleConrim();
      } else if (this.componentsKey[this.current] == "authorizer") {
        this.handlePerson();
      } else if (this.componentsKey[this.current] == "recognition") {
        if (this.formdData.isPass) {
          this.handlefinish();
        }
      }
    },
    //上一步
    handlePre() {
      if (this.current == 0) {
        uni.navigateBack({
          delta: 1,
        });
      }
      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 {
  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>