dvcp_v2_webapp/project/fengdu/AppOutSource/AppMarkRate/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="门店名称" :value="info.shopName"></ai-info-item>
            <ai-info-item label="门店地址" :value="info.address"></ai-info-item>
            <ai-info-item label="经营者姓名" :value="info.shopPerson"></ai-info-item>
            <ai-info-item label="联系电话" :value="info.phone"></ai-info-item>
            <ai-info-item label="评价人" :value="info.evaluator"></ai-info-item>
            <ai-info-item label="评价人电话" :value="info.evaluatorPhone"></ai-info-item>
            <ai-info-item label="评价时间" :value="info.evaluationTime"></ai-info-item>
            <ai-info-item label="评价人类型" :value="$dict.getLabel('evaluatorType',info.evaluatorType)"></ai-info-item>
            <ai-info-item label="评价类型" isLine :value="info.assessType"></ai-info-item>
            <ai-info-item label="评语" isLine :value="info.remark"></ai-info-item>
            <ai-info-item label="现场图片" isLine>
              <div class="files" v-if="info.pictureUrl">
                <ai-uploader
                    :instance="instance"
                    fileType="img"
                    v-model="info.fileList"
                    acceptType=".jpg,.png,.jpeg,.JPG,.PNG,.JPEG"
                    :limit="9" :disabled="true">
                </ai-uploader>
              </div>
            </ai-info-item>
          </ai-wrapper>
        </template>
      </ai-card>
      <ai-card title="打分细则">
        <label class="aibar-left">1、正面清单</label>
        <ai-table
            class="mt-16"
            :tableData="tableData1"
            :is-show-pagination="false"
            :col-configs="colConfigs">
        </ai-table>
        <label class="aibar-left">2、负面清单</label>
        <ai-table
            class="mt-16"
            :tableData="tableData2"
            :is-show-pagination="false"
            :col-configs="colConfigs">
        </ai-table>
      </ai-card>
    </template>
  </ai-detail>
</template>

<script>
export default {
  name: "Detail",
  props: {
    instance: Function,
    dict: Object,
    params: Object
  },
  data() {
    return {
      info: {
        fileList: []
      },
      tableData1: [],
      colConfigs: [
        {prop: 'listType', label: '清单类型', align: 'center'},
        {
          prop: 'status', label: '状态', align: 'center', render: (h, {row}) => {
            if (row.status === '1') {
              return h('i', {
                class: "el-icon-circle-check",
                style: 'font-size:18px'
              })
            }
            return ''
          }
        },
        {prop: 'score', label: '分数', align: 'center'},
      ],
      tableData2: [],
    }
  },

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

  methods: {
    async getList() {
      try {
        const {code, data: {records}} = await this.instance.post('/app/appscoredetails/list', null, {
          params: {
            shopId: this.params.shopId,
            pages: 1000
          }
        })
        if (code === 0 && records) {
          this.tableData1 = records?.filter(item => item.type === '1')
          this.tableData2 = records?.filter(item => item.type === '0')
        }
      } catch (e) {
        console.error(e)
      }
    },

    async getDetail() {
      try {
        const {code, data} = await this.instance.post('/app/appshopassess/queryDetailById', null, {
          params: {
            id: this.params.id
          }
        })
        if (code === 0) {
          this.info = data
          this.info.fileList = data.pictureUrl?.split(',')?.map(item => {
            return {
              url: item
            }
          })
        }
      } catch (e) {
        console.error(e)
      }
    },

    cancel() {
      this.$emit('change', {
        type: 'List',
        isRefresh: true
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.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;
        }
      }
    }
  }

  .aibar-left {
    color: #222;
    font-size: 16px;
    font-weight: 700;
  }

  .mt-16 {
    margin-top: 16px;
  }
}
</style>