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="info.applyItemName"></ai-info-item>
            <ai-info-item label="身份证号" :value="info.integralUserName"></ai-info-item>
            <ai-info-item label="性别" :value="info.phone"></ai-info-item>
            <ai-info-item label="联系电话" :value="info.areaName"></ai-info-item>
            <ai-info-item label="出生日期" :value="info.girdName"></ai-info-item>
            <ai-info-item label="年龄" v-if="info.status === '1'" :value="info.auditTime"></ai-info-item>
          </ai-wrapper>
        </template>
      </ai-card>
      <ai-card title="门店信息">
        <template #content>
          <ai-wrapper>
            <ai-info-item label="门店名称" isLine :value="info.applyIntegral"></ai-info-item>
            <ai-info-item label="门店照片" isLine v-if="info.images && info.images.length">
              <div class="files">
                <ai-uploader
                    :instance="instance"
                    fileType="img"
                    acceptType=".jpg,.png,.jpeg,.JPG,.PNG,.JPEG"
                    v-model="info.images"
                    :limit="9" :disabled="true">
                </ai-uploader>
              </div>
            </ai-info-item>
            <ai-info-item label="经营类型" isLine :value="info.applyIntegral"></ai-info-item>
            <ai-info-item label="所属片区" isLine :value="info.applyIntegral"></ai-info-item>
            <ai-info-item label="社会信用代码" isLine :value="info.applyIntegral"></ai-info-item>
            <ai-info-item label="门店住址" isLine :value="info.applyIntegral"></ai-info-item>
            <ai-info-item label="门店描述" isLine :value="info.applyIntegral"></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 {
      info: {},
      form: {
        auditDesc: '',
        auditStatus: ''
      },
      eventForm: {
        files: null,
        images: [],
        videos: [],
        content: '',
        applyIntegral: ''
      },
      isShowEvent: false,
      isShow: false
    }
  },

  created() {
    this.getInfo()
  },

  methods: {
    getInfo() {
      this.instance.post(`/app/appintegraluserapply/queryDetailById?id=${this.params.id}`).then(res => {
        if (res.code == 0) {
          if (res.data) {
            this.info = {
              ...res.data,
              files: res.data.files.map(v => {
                return {
                  ...v,
                  postfix: v.postfix.toLowerCase()
                }
              })
            }

            if (res.data.status === '0') {
              this.eventForm.files = res.data.files
              this.eventForm.content = res.data.content
              this.eventForm.applyIntegral = res.data.applyIntegral
            }
            this.info.images = res.data.files.filter(e => (['jpeg', 'jpg', 'png', 'JPG', 'JPEG', 'PNG'].includes(e.postfix.split('.')[1])))
            this.info.videos = res.data.files.filter(e => (['mp4', 'MP4', 'MOV'].includes(e.postfix.split('.')[1])))
          }
        }
      })
    },

    showEvent() {
      this.eventForm.files = null
      this.eventForm.content = this.info.content
      this.eventForm.applyIntegral = this.info.applyIntegral
      this.eventForm.images = this.info.images
      this.eventForm.videos = this.info.videos
      this.isShowEvent = true
    },

    onClose() {
      this.form.auditDesc = ''
      this.form.auditStatus = ''
    },

    onEventConfirm() {
      if ((this.eventForm.images.length + this.eventForm.videos.length) > 9) {
        return this.$message.error('图片和视频不得超过9个')
      } else {
        this.eventForm.files = [...this.eventForm.images, ...this.eventForm.videos]
      }
      this.$refs.eventForm.validate((valid) => {
        if (valid) {
          this.instance.post(`/app/appintegraluserapply/updateByGirdMember`, {
            ...this.eventForm,
            id: this.params.id,
          }).then(res => {
            if (res.code == 0) {
              this.$message.success('编辑成功！')
              this.isShowEvent = false
              this.getInfo()
            }
          })
        }
      })
    },

    onConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.instance.post(`/app/appintegraluserapply/auditById`, {
            ...this.form,
            id: this.params.id
          }).then(res => {
            if (res.code == 0) {
              this.$message.success('审核成功！')
              this.isShow = false
              this.getInfo()
            }
          })
        }
      })
    },

    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>