OfficeApp/components/merchantAudit/merchantAudit.vue

<template>
  <view class="card">
    <view class="nav_bar">
      <view class="left">
        <image src="../../static/img/company/company.png"></image>
        <view>{{extend.company_name}}</view>
      </view>
      <view class="right" @click="navTo(`/subpkg/merchantDetails/merchantDetails?id=${id=datas.id}&name=${datas.name}`)">
        <text>查看</text>
        <u-icon name="arrow-right" size="12" color="#fff"></u-icon>
      </view>
    </view>
    <view class="body">
      <view class="b_item name">
        <view class="text">
          <view>审核类型:</view>
          <view>{{datas.name}}</view>
        </view>
        <view class="type">
          <text v-if="datas.check_status==1" style="color: #ff7c32;">审核中</text>
          <text v-else-if="datas.check_status==2" style="color: #47be62;">已通过</text>
          <text v-else-if="datas.check_status==3" style="color: #FF0000;">未通过</text>
        </view>
      </view>
      <view class="b_item">
        <view>商户分类:</view>
        <view>{{extend.category_name}}</view>
      </view>
      <view class="b_item">
        <view>店铺类型:</view>
        <view>{{extend.type_name}}</view>
      </view>
      <view class="b_item">
        <view>店铺名称:</view>
        <view>{{extend.mer_name}}</view>
      </view>
      <view class="b_item">
        <view>联系方式:</view>
        <view>{{extend.master_phone}}</view>
      </view>
      <view class="b_item">
        <view>申请时间:</view>
        <view>{{datas.create_time}}</view>
      </view>
      <u-line></u-line>
      <view class="img" style="padding-top: 16rpx;">
        <image v-for="(item, index) in extend.qualification" :key="`img`+index" :src="item"></image>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "merchantAudit",
    props: {
      datas:{
        type: Object,
        default: ()=>{
          return {};
        }
      }
    },
    data() {
      return {
        extend: {}
      };
    },
    mounted() {
      try{
        this.extend = this.$props.datas?.extend;
        this.extend.qualification?this.extend.qualification=JSON.parse(this.extend.qualification):this.extend.qualification=[];
        this.extend.qualification = this.extend.qualification.slice(0,3);
      }catch(e){
        //TODO handle the exception
      }
    },
    methods:{
      navTo (url) {
        if (url) {
          uni.navigateTo({
            url: url,
          })
        } else Toast('暂未开放')
      },
    }
  }
</script>

<style lang="scss" scoped>
.card{
    margin: 0 auto;
    margin-bottom: 28rpx;
    width: 694rpx;
    background-color: #fff;
    border-radius: 26rpx;
    overflow: hidden;
    .nav_bar{
      background-color: #0122c7;
      padding: 28rpx;
      color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left{
        display: flex;
        font-size: 32rpx;
        image{
          width: 40rpx;
          height: 40rpx;
          margin-right: 16rpx;
        }
      }
      .right{
        display: flex;
        font-size: 28rpx;
        align-items: center;
      }
    }
    .body{
      font-size: 28rpx;
      padding: 28rpx;
      .b_item{
        padding-bottom: 16rpx;
        display: flex;
        view:nth-child(1){
          flex-shrink: 0;
          padding-right: 10rpx;
        }
      }
      .name{
        display: flex;
        justify-content: space-between;
        .text{
          flex: 1;
          display: flex;
          view:nth-child(1){
            flex-shrink: 0;
          }
        }
        .type{
          flex-shrink: 0;
        }
      }
      .img{
        display: flex;
        
        image{
          width: 200rpx;
          height: 150rpx;
          margin-right: 19rpx;
          &:last-child{
            margin-right: 0;
          }
        }
      }
    }
  }
</style>