others_lilishop_ui/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>
        <span v-if="storeDisable == 'REFUSED'">审核未通过,请修改资质信息，如有疑问请联系管理员</span>
      </div>
      <Button v-if="currentIndex === 3" @click="$router.push('/')">返回</Button>
      <Button type="primary" @click='currentIndex = 0' v-if="storeDisable === 'REFUSED' && currentIndex === 3">重新申请</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) => {
        this.agreementCon = res.result.content;
      });
    },
    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();
    this.getArticle();
  },
};
</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>