web/buyer/src/pages/shopEntry/shop-entry.vue

<template>
  <div class="shop-entry">
    <div style="height: 20px"></div>
    <div class="content">
      <h3>店铺入驻</h3>
      <Steps :current="currentIndex" size="small" class="margin">
        <Step title="企业资质信息"></Step>
        <Step title="财务资质信息"></Step>
        <Step title="其他信息"></Step>
        <Step title="提交审核"></Step>
      </Steps>
      <first-apply
        v-if="currentIndex == 0 && dataReview"
        :content="firstData"
        @change="nextPage"
      ></first-apply>

      <second-apply
        v-if="currentIndex == 1 && dataReview"
        :content="secondData"
        @change="nextPage"
      ></second-apply>

      <third-apply
        v-if="currentIndex == 2 && dataReview"
        :content="thirdData"
        @change="nextPage"
      ></third-apply>

      <div class="success-page" v-if="currentIndex == 3">
        <span v-if="storeDisable == '' || storeDisable == 'APPLYING'"
          >入驻申请提交成功，等待平台审核</span
        >
        <span v-if="storeDisable == 'OPEN'">申请已通过，请联系管理员</span>
        <span v-if="storeDisable == 'CLOSED'">店铺已关闭，重申请联系管理员</span>
      </div>
      <Button v-if="currentIndex == 3" @click="$router.push('/')">返回</Button>
    </div>

    <Modal
      title="店铺入驻协议"
      v-model="showAgreement"
      width="1200"
      :closable="false"
      :mask-closable="false"
    >
      <div class="agreeent-con" v-html="agreementCon"></div>

      <div slot="footer" style="text-align: center">
        <p><Checkbox v-model="checked">我已同意以上协议</Checkbox></p>
        <Button
          type="primary"
          :disabled="!checked"
          class="margin"
          @click="showAgreement = false"
          >同意协议填写资质信息</Button
        >
      </div>
    </Modal>
  </div>
</template>
<script>
import { agreement, applyStatus } from '@/api/shopentry';
import firstApply from './first-apply';
import secondApply from './second-apply';
import thirdApply from './third-apply';
export default {
  components: {
    firstApply,
    secondApply,
    thirdApply
  },
  data () {
    return {
      currentIndex: 0, // 当前步骤
      showAgreement: false, // 协议显示
      agreementCon: '', // 协议内容
      checked: false, // 选中协议
      applyData: {}, // 申请数据
      firstData: {}, // 第一步数据
      secondData: {}, // 第二步数据
      thirdData: {}, // 第三步数据
      storeDisable: '', // APPLY OPEN 开店中 CLOSED 关闭 REFUSED 拒绝 APPLYING 申请中，审核
      dataReview: true // 根据接口返回判断是否可展示数据
    };
  },
  methods: {
    getArticle () {
      // 入驻协议
      agreement().then((res) => {
        console.log(res);
        this.agreementCon = res.result;
      });
    },
    getData () {
      applyStatus().then((res) => {
        if (res.success) {
          if (!res.result) {
            this.showAgreement = true;
          } else {
            this.dataReview = false;
            let data = res.result;
            let first = [
              'addressIdPath',
              'addressPath',
              'companyAddress',
              'companyEmail',
              'companyName',
              'employeeNum',
              'legalId',
              'legalName',
              'licencePhoto',
              'legalPhoto',
              'licenseNum',
              'linkName',
              'linkPhone',
              'registeredCapital',
              'scope'
            ];
            let second = [
              'settlementBankAccountName',
              'settlementBankAccountNum',
              'settlementBankBranchName',
              'settlementBankJointName'
            ];
            let third = [
              'goodsManagementCategory',
              'storeCenter',
              'storeDesc',
              'storeLogo',
              'storeName'
            ];

            this.storeDisable = data.storeDisable;

            first.forEach((e) => {
              this.firstData[e] = data[e];
            });
            second.forEach((e) => {
              this.secondData[e] = data[e];
            });
            third.forEach((e) => {
              this.thirdData[e] = data[e];
            });

            if (this.storeDisable === 'APPLY') {
              this.currentIndex = 0;
            } else {
              this.currentIndex = 3;
            }
            this.dataReview = true;
            this.$forceUpdate();
          }
        }
      });
    },
    nextPage (step) {
      this.currentIndex = step;
    }
  },
  mounted () {
    this.getData();
  }
};
</script>
<style lang="scss" scoped>
.content {
  width: 1200px;
  margin: 0 auto;
  border: 1px solid #eee;
  min-height: 500px;
  border-radius: 5px;
  box-shadow: 3px 3px 10px #999;
  background: #fff;
  padding: 10px 20px;

  h3 {
    text-align: center;
    margin-bottom: 10px;
  }
}

.margin {
  margin: 10px 0;
}
.agreeent-con {
  max-height: 500px;
}
.success-page {
  height: 500px;
  width: 100%;
  line-height: 500px;
  text-align: center;
  font-size: 20px;
}
</style>