dvcp_v2_webapp/project/fengdu/AppOutSource/AppArchives/components/Detail.vue

<template>
  <ai-detail class="detail">
    <template slot="title">
      <ai-title title="档案详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
    </template>
    <template slot="content">
      <ai-card title="基本信息">
        <template #content>
          <ai-wrapper>
            <ai-info-item label="经营者姓名：" isLine :value="form.name"></ai-info-item>
            <ai-info-item label="身份证号：" :value="form.idNumber"></ai-info-item>
            <ai-info-item label="性别：" :value="$dict.getLabel('sex', form.sex)"></ai-info-item>
            <ai-info-item label="联系电话：" :value="form.phone"></ai-info-item>
            <ai-info-item label="出生日期：" :value="form.birthday"></ai-info-item>
            <ai-info-item label="年龄：" :value="form.age"></ai-info-item>
          </ai-wrapper>
        </template>
      </ai-card>
      <ai-card title="门店信息">
        <template #content>
          <ai-wrapper label-width="100px">
            <ai-info-item label="门店名称：" isLine :value="form.shopName"></ai-info-item>
            <ai-info-item label="门店照片：" isLine>
              <div class="files">
                <ai-uploader
                    :instance="instance"
                    fileType="img"
                    acceptType=".jpg,.png,.jpeg,.JPG,.PNG,.JPEG"
                    v-model="form.fileUrl"
                    :limit="1" :disabled="true">
                </ai-uploader>
              </div>
            </ai-info-item>
            <ai-info-item label="经营类型：" isLine :value="$dict.getLabel('operatorType',form.operatorType)"></ai-info-item>
            <ai-info-item label="所属片区：" isLine :value="form.girdName"></ai-info-item>
            <ai-info-item label="社会信用代码：" isLine :value="form.creditCode"></ai-info-item>
            <ai-info-item label="门店住址：" isLine :value="form.address"></ai-info-item>
            <ai-info-item label="门店描述：" isLine :value="form.description"></ai-info-item>
          </ai-wrapper>
        </template>
      </ai-card>
    </template>
  </ai-detail>
</template>

<script>
export default {
  name: 'Detail',

  props: {
    instance: Function,
    dict: Object,
    params: Object
  },

  data() {
    return {
      form: {
        name: '',
        idNumber: '',
        sex: '',
        phone: '',
        birthday: '',
        age: '',
        shopName: '',
        operatorTypes: '',
        creditCode: '',
        girdName: '',
        address: '',
        description: '',
        fileUrl:[]
      },
    }
  },

  created() {
    this.$dict.load('sex','operatorType').then(()=>{
      this.getDetail()
    })
  },

  methods: {
    async getDetail() {
      try {
        const {code, data} = await this.instance.post('/app/appshoparchives/queryDetailById', null, {
          params: {
            id: this.params.id
          }
        })
        if (code === 0) {
          this.form = {...data}
          this.form.fileUrl = [{
            url: data.fileUrl
          }]
        }
      } catch (e) {
        console.error(e)
      }
    },
    cancel() {
      this.$emit('change', {
        type: 'List',
        isRefresh: true
      })
    }
  }
}
</script>

<style scoped lang="scss">
.detail {
  .files {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .file-item {
      width: 118px;
      height: 118px;
      margin: 0 20px 20px 0;

      img, video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      img {
        cursor: pointer;
        transition: all ease 0.3s;

        &:hover {
          opacity: 0.7;
        }
      }
    }
  }
}
</style>