chelvc-custom/src/pages/merchant/mine/openStore/openStoreAppealDetail.vue

<template>
  <view class="container">
    <view class="top-box">
      <p>您的开店申请已经提交成功。</p>
      <p>我们将在1-3个工作日内完成线上审核工作，请您耐心等候，并留意审核进程。</p>
    </view>

    <view class="content-item">
      <view class="item-l">
        <p>负责人 : {{ merchantAuthList.legalRepresentativeName || '--' }}</p>
        <p>手机号 : {{ merchantAuthList.mobileNumber || '--' }}</p>
      </view>
      <img class="img" src="@/static/mine/icon_mine_underReview.png" alt="" />
    </view>

    <view class="content-item">
      <view class="item-l">
        <p>店名 : {{ merchant.name || '--' }}</p>
        <p>店铺类型 : {{ merchantAuthList.mobileNumber || '--' }}</p>
        <p>手机号 : {{ merchantAuthList.mobileNumber || '--' }}</p>
        <p>所在地 : {{ merchantAuthList.storeAddress || '--' }}</p>
        <p>详细地址 : {{ merchant.address || '--' }}</p>
      </view>
    </view>

    <view class="content-item2">
      <view class="item2-box">
        <img class="img2" src="@/static/logo.png" alt="" />
        <view class="img-text">店铺门面图(需包含完整牌匾)</view>
      </view>
      <view class="item2-box">
        <img class="img2" src="@/static/logo.png" alt="" />
        <view class="img-text">店内真实环境</view>
      </view>
    </view>

    <view class="content-item2">
      <view class="item-l">
        <p>法人姓名 : {{ merchantAuthList.legalRepresentativeName || '--' }}</p>
        <p>性别 : {{ merchantAuthList.legalRepresentativeGender || '--' }}</p>
        <p>证件号码 : {{ merchantAuthList.idCardNumber || '--' }}</p>
        <p>有效期 : {{ merchantAuthList.idCardExpirationDate || '--' }}</p>
      </view>
      <view class="item2-box">
        <img class="img2" src="@/static/logo.png" alt="" />
        <view class="img-text">证件正面图(国徽图)</view>
      </view>
      <view class="item2-box">
        <img class="img2" src="@/static/logo.png" alt="" />
        <view class="img-text">证件反面图(人像图)</view>
      </view>
    </view>

    <view class="content-item2">
      <view class="item-l">
        <p>证件名称 : 营业执照</p>
        <p>证件编号 : {{ merchantAuthList.mobileNumber || '--' }}</p>
        <p>有效期 : {{ merchantAuthList.mobileNumber || '--' }}</p>
      </view>
      <view class="item2-box">
        <img class="img2" src="@/static/logo.png" alt="" />
        <view class="img-text">证件正面图</view>
      </view>
    </view>

    <view class="content-item2">
      <view class="item-l">
        <p>证件名称 : 经营许可证</p>
        <p>证件编号 : {{ merchantAuthList.mobileNumber || '--' }}</p>
        <p>有效期 : {{ merchantAuthList.mobileNumber || '--' }}</p>
      </view>
      <view class="item2-box">
        <img class="img2" src="@/static/logo.png" alt="" />
        <view class="img-text">证件正面图</view>
      </view>
    </view>
  </view>
</template>

<script>
import { getMerchantAuthData } from '@/api/merchant/merchantAuth';
export default {
  data() {
    return {
      merchantAuthList: {},
      merchant: {},
    };
  },
  methods: {
    async getMerchantAuth() {
      let res = await getMerchantAuthData();
      console.log('@@@res', res);

      if (res.code == 200) {
        this.merchantAuthList = res.data;
        this.merchant = res.data = res.data.merchant;

        // 将数据存储到vuex中
        this.$store.commit('SET_MERCHANTINFO', res.data);
      }
    },
  },
  created() {
    this.getMerchantAuth();
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5 !important;
  .top-box {
    color: #8b8b8b;
    padding: 0 20rpx;
    background-color: #fff;
  }
  .content-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    margin: 20rpx 0;
    .item-l {
      p {
        margin: 20rpx 0;
        line-height: 50rpx;
      }
    }
    .img {
      width: 130rpx;
      height: 100rpx;
    }
  }
  .content-item2 {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    margin: 20rpx 0;
    .item-l {
      p {
        margin: 20rpx 0;
        line-height: 50rpx;
      }
    }
    .item2-box {
      text-align: center;
      margin-bottom: 20rpx;
      .img2 {
        width: 100%;
        height: 400rpx;
      }
    }
  }
}
</style>