uni-pos/src/views/management/apply/detail.vue

<template>
  <div class="detail_page">
    <div class="content">
      <div class="head_box">
        {{ getTitle() }}
        <div class="btn_list">
          <el-button v-if="Number(info.auditState) === 1" type="primary" @click="handle">处理</el-button>
          <el-button @click="cancel">返回列表</el-button>
        </div>
      </div>
      <div class="detail">
        <div class="shop_info">
          <p class="detail_title">店铺信息</p>
          <p v-for="(item, index) in shopInfoList" :key="index" class="detail_text">
            <span>
              <font>*</font>
              {{ item.name + ':' }}
            </span>
            <span>{{ item.value }}</span>
          </p>

        </div>
        <div class="person_info">
          <p class="detail_title">个人信息</p>
          <p v-for="(item, index) in personInfoList" :key="index" class="detail_text">
            <span>
              <font>*</font>
              {{ item.name + ':' }}
            </span>
            <span>{{ item.value }}</span>
          </p>
          <p class="detail_img">
            <span>
              <font>*</font>
              证件照片
            </span>
            <img :src="info.idCardCopyFilePath" alt="" />
            <img :src="info.idCardNationalFilePath" alt="" />
          </p>
          <p v-if="Number(info.organizationType) === 1" class="detail_img">
            <span>
              <font>*</font>
              手持证件照
            </span>
            <img :src="info.handHoldCardPath" alt="" />
          </p>
        </div>

        <div v-if="Number(info.auditState) === 2" class="shop_info">
          <p class="detail_title">授权信息</p>
          <p v-for="(item, index) in authInfoList" :key="index" class="detail_text">
            <span>
              <font>*</font>
              {{ item.name + ':' }}
            </span>
            <span>{{ item.value }}</span>
          </p>

        </div>
      </div>
    </div>
    <dialogs :dialog-data="dialogData" @closed="closed" />
  </div>
</template>

<script>
import dialogs from './dialog'
import Apply from '@/api/Apply'
export default {
  components: {
    dialogs
  },
  data() {
    return {
      shopInfoList: [
        { name: '店铺名称', value: '', field: 'storeName' },
        { name: '店铺类型', value: '', field: 'organizationType' },
        { name: '客服电话', value: '', field: 'customerPhone' },
        { name: '店铺负责人', value: '', field: 'storeHead' },
        { name: '负责人电话', value: '', field: 'headMobile' },
        { name: '店铺地址', value: '', field: 'storeAddressProvince' }
      ],
      personInfoList: [
        { name: '名称', value: '', field: 'legalPerson' },
        { name: '证件类型', value: '', field: 'idDocType' },
        { name: '身份证号码', value: '', field: 'idCardNumber' },
        { name: '身份证有效期', value: '', field: 'idCardValidTimeStart' }
      ],
      authInfoList: [
        { name: '生效日期', value: '', field: 'effectTime' },
        { name: '生效时限', value: '', field: 'effectTimeLimit' }
      ],
      dialogData: {},
      info: {}
    }
  },
  computed: {
    query() {
      return this.$route.query
    }
  },
  created() {
    this.applyInfo()
  },
  methods: {
    async applyInfo() {
      const vm = this
      const res = await Apply.applyInfo(this.query.id)
      const resData = res.data
      if (resData.code === 0) {
        const d = resData.data
        vm.info = d
        vm.getData(d)
      }
    },
    getTitle() {
      const ob = {
        1: '待审核列表/查看详情',
        2: '审核通过列表/查看详情',
        3: '已拒绝列表/查看详情'
      }
      return ob[this.query.type]
    },
    getData(info) {
      const vm = this
      // const info = vm.$route.query.info
      vm.getObjData(vm.shopInfoList, info)
      vm.getObjData(vm.personInfoList, info)
      vm.getObjData(vm.authInfoList, info)
    },
    getObjData(arr, o) {
      const t = {
        1: '个人',
        2: '个体工商户',
        3: '企业',
        4: '其他组织'
      }
      const ob = {
        1: '中国大陆居民身份证',
        2: '中国香港居民来往内地通行证',
        3: '中国澳门居民来往内地通行证',
        4: '中国台湾居民来往内地通行证',
        5: '其他国家或地区居民护照'
      }
      arr.map(item => {
        item.value = o[item.field]
        if (item.field === 'organizationType') {
          item.value = t[Number(o.organizationType || '')]
        }
        if (item.field === 'storeAddressProvince') {
          item.value = `${o.storeAddressProvince || ''}${o.storeAddressCity || ''}${o.storeAddressDetail || ''}`
        }
        if (item.field === 'idCardValidTimeStart') {
          item.value = `${o.idCardValidTimeStart || ''}──${o.idCardValidTimeEnd || ''}`
        }
        if (item.field === 'idDocType') {
          item.value = ob[Number(o.idDocType || '')]
        }
        if (item.field === 'effectTimeLimit') {
          item.value = `${o.effectTimeLimit}年`
        }
        if (item.field === 'effectTime') {
          item.value = o.effectDateType === 1 ? o.auditTime : o.effectTime
        }
      })
    },
    cancel() {
      this.$router.push({ path: '/apply' })
    },
    handle() {
      this.dialogData = {
        title: '处理审核',
        visible: true,
        info: this.info
      }
    },
    closed(v) {
      this.applyInfo()
      this.dialogData.visible = v
    }
  }
}
</script>

<style lang='less' scoped>
.detail_page {
    margin-top: 10px;
    background-color: #fff;
    height: calc(100% - 10px);
    .content {
        padding: 20px;
        .head_box {
            overflow: hidden;
            height: 80px;
            line-height: 80px;
            font-size: 24px;
            border-bottom: 1px solid #E0E5EB;
            .btn_list {
                display: inline-block;
                float: right;
            }
        }
        .detail {
          min-height: 500px;
          background:rgba(255,255,255,1);
          box-shadow:0px 0px 10px 0px rgba(51,51,51,0.15);
          border-radius:4px;
          padding:  1px 100px 20px;
          margin-top: 15px;

          .detail_title {
            font-size: 24px;
            color: #333333;
            position: relative;
            margin:50px 20px 20px;
            &:before {
                content: '';
                display: block;
                position: absolute;
                top: 5px;
                left: -20px;
                width: 4px;
                height: 24px;
                background-color: #3A68F2;
            }
          }
        }
        .detail_text {
          span {
            display: inline-block;
            color: #333333;
            font-size: 16px;
            &:nth-child(1) {
              width: 150px;
              text-indent: 20px;
              font {
                color: red;
              }
            }
            &:nth-child(2) {
              color: #666666;
            }
          }

        }

        .detail_img {
          position: relative;
          span {
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            color: #333333;
            font-size: 16px;
            width: 150px;
            text-indent: 20px;
            font {
              color: red;
            }
          }
          img {
            width: 265px;
            height: 170px;
            border-radius:4px;
            &:nth-of-type(1) {
              margin:0 30px 0 150px;
            }
          }
        }
    }
}
</style>