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"
        v-if="componentsKey[current] == 'companiesInformation'"
        :is="'companiesInformation'"
      ></component>
      <component
        :formdData.sync="formdData"
        v-if="componentsKey[current] == 'authorizer'"
        :is="'authorizer'"
      ></component>
    </view>
    <view class="btn">
      <u-button
        class="custom-style"
        @click="handlePre"
        :plain="true"
        shape="circle"
        type="primary"
        >上一步</u-button
      >
      <u-button
        class="custom-style"
        @click="handleNext"
        shape="circle"
        type="primary"
        >下一步</u-button
      >
    </view>
  </view>
</template>

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

export default {
  components: {
    uploadLicense,
    companiesInformation,
    authorizer,
  },
  data() {
    return {
      formdData: {
        //企业营业照
        imageUrl: null,
        //营业识别数据
        companiesOrcResult: {
          region: "", //单位区域
          location: "", //地理位置
          postalAddress: "", //详细地址
        },
      },
      componentsKey: {
        0: "uploadLicense",
        1: "companiesInformation",
        2: "authorizer",
      },
      current: 2,
    };
  },
  methods: {
    //ocr识别
    async handleOcr() {
      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: "识别错误",
        });
        setTimeout(() => {
          uni.hideLoading();
        }, 2000);
      } finally {
      }
    },
    //确认企业信息
    handleConrim() {
      // if (
      //   !this.formdData.companiesOrcResult.region ||
      //   !this.formdData.companiesOrcResult.location
      // ) {
      //   uni.showToast({
      //     title: "位置区域不能为空",
      //     //将值设置为 success 或者直接不用写icon这个参数
      //     icon: "none",
      //     //显示持续时间为 2秒
      //     duration: 2000,
      //   });
      // } else {
      //   this.current++;
      // }
      this.current++;
    },
    //下一步
    handleNext() {
      if (this.componentsKey[this.current] == "uploadLicense") {
        this.handleOcr();
      } else if (this.componentsKey[this.current] == "companiesInformation") {
        this.handleConrim();
      }
    },
    //上一步
    handlePre() {
      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>