Files
dvcp_v2_webapp/project/fengdu/AppOutSource/AppMarkRate/components/Detail.vue
2024-06-26 16:48:30 +08:00

175 lines
4.5 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.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">
<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="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: {
fileList:[]
},
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.$dict.load('evaluatorType').then(()=>{
this.getDetail()
this.getScoredetail()
})
},
methods: {
async getScoredetail(){
try {
const {code,data} = await this.instance.post('/app/appscoredetails/queryDetailById',null,{
params:{
id:this.params.shopId
}
})
if(code===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>