166 lines
		
	
	
		
			4.3 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			166 lines
		
	
	
		
			4.3 KiB
		
	
	
	
		
			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.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="评价人电话" :value="info.auditTime"></ai-info-item>
 | 
						|
            <ai-info-item label="评价时间" :value="info.auditTime"></ai-info-item>
 | 
						|
            <ai-info-item label="评价人类型" :value="info.auditTime"></ai-info-item>
 | 
						|
            <ai-info-item label="评价类型" isLine :value="info.auditTime"></ai-info-item>
 | 
						|
            <ai-info-item label="评语" isLine :value="info.auditTime"></ai-info-item>
 | 
						|
            <ai-info-item label="现场图片" isLine :value="info.auditTime">
 | 
						|
              <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-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="colConfigs1">
 | 
						|
        </ai-table>
 | 
						|
        <label class="aibar-left">2、负面清单</label>
 | 
						|
        <ai-table
 | 
						|
            class="mt-16"
 | 
						|
            :tableData="tableData2"
 | 
						|
            :is-show-pagination="false"
 | 
						|
            :col-configs="colConfigs2">
 | 
						|
        </ai-table>
 | 
						|
      </ai-card>
 | 
						|
    </template>
 | 
						|
  </ai-detail>
 | 
						|
</template>
 | 
						|
 | 
						|
<script>
 | 
						|
export default {
 | 
						|
  name: "Detail",
 | 
						|
  props: {
 | 
						|
    instance: Function,
 | 
						|
    dict: Object,
 | 
						|
    params: Object
 | 
						|
  },
 | 
						|
  data() {
 | 
						|
    return {
 | 
						|
      info: {},
 | 
						|
      tableData1:[],
 | 
						|
      colConfigs1:[
 | 
						|
        { prop: 'integralUserName',  label: '清单类型', align: 'center' },
 | 
						|
        { prop: 'areaName',  label: '状态', align: 'center' },
 | 
						|
        { prop: 'girdName',  label: '分数', align: 'center' },
 | 
						|
      ],
 | 
						|
      tableData2:[],
 | 
						|
      colConfigs2:[
 | 
						|
        { prop: 'integralUserName',  label: '清单类型', align: 'center' },
 | 
						|
        { prop: 'areaName',  label: '状态', align: 'center' },
 | 
						|
        { prop: 'girdName',  label: '分数', align: 'center' },
 | 
						|
      ]
 | 
						|
    }
 | 
						|
  },
 | 
						|
 | 
						|
  created() {
 | 
						|
    this.getDetail()
 | 
						|
    this.getScoredetail()
 | 
						|
  },
 | 
						|
 | 
						|
  methods: {
 | 
						|
    async getScoredetail(){
 | 
						|
      try {
 | 
						|
        const {code,data} = await this.instance.post('/app/appscoredetails/queryDetailById',null,{
 | 
						|
          params:{
 | 
						|
            id:this.params.id
 | 
						|
          }
 | 
						|
        })
 | 
						|
        if(code===0){
 | 
						|
          console.log('data',data)
 | 
						|
        }
 | 
						|
      }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
 | 
						|
        }
 | 
						|
      }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>
 |