jiangyinzhi
356 lines
11 KiB
Vue
356 lines
11 KiB
Vue
<template>
|
|
<div class="userEvaluate">
|
|
<Loading :loading="overlayShow"/>
|
|
<div class="user-content">
|
|
<div class="user-head" >
|
|
<span>报告价值:</span>
|
|
<div>
|
|
<van-rate class="evaluate-rate" readonly v-model="reportLevel.reportValue" :size="20" allow-half color="#ffd21e" void-icon="star" void-color="#eee" />
|
|
<span>{{reportLevel.valName}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="evaluate-main">
|
|
|
|
<div class="main-list" v-for="item in list" :key="item.id">
|
|
|
|
|
|
<div class="evaluate-item">
|
|
|
|
<div v-if="item.image" class="item-pic">
|
|
|
|
<img :src="item.image" />
|
|
|
|
</div>
|
|
|
|
<div class="item-text-main">
|
|
<div class="item-text evaluate">{{item.content}}</div>
|
|
|
|
<div class="item-user-time">
|
|
|
|
<div class="user-time">
|
|
|
|
<div class="item-user">
|
|
|
|
<span>评价人:</span>
|
|
|
|
<span>{{item.nickName}}</span>
|
|
|
|
</div>
|
|
|
|
<div class="item-time">
|
|
|
|
<span>{{item.evaluateTime}}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="btn" v-if="!item.showTextArea && !item.show" >
|
|
<button @click="handelClickEvaluate(item)">评价回复</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="item-text-area" v-if="item.showTextArea">
|
|
|
|
<van-field v-model="item.message" rows="2" autosize type="textarea" maxlength="100" placeholder="请输入回复内容" show-word-limit />
|
|
|
|
<div class="btn" >
|
|
<button @click="handelClickClose(item)">取消</button>
|
|
<button @click="handleClick(item)">回复</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<template v-if="item.show">
|
|
<div class="item-text-main" v-for="v in item.nxzdEvaluateReplyDTOS" :key="v.replyId">
|
|
|
|
<div class="item-text reply">
|
|
<div>评价回复:</div>
|
|
<div>{{v.content}}</div>
|
|
</div>
|
|
|
|
<div class="item-user-time">
|
|
<div class="item-user">
|
|
<span>回复人:</span>
|
|
<span>{{v.replyName}}</span>
|
|
</div>
|
|
<div class="item-time">
|
|
<span>{{v.replyTime}}</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getCurrentUserEvaluate, getCurrentUserEvaluateAdd } from '@/api/evaluateAndReply'
|
|
import { Notify } from 'vant'
|
|
import Loading from '@/components/loading'
|
|
import { downloadUrl } from '@/settings'
|
|
import {debounce} from '@/utils/common.js'
|
|
export default {
|
|
name: 'userEvaluate',
|
|
components: {
|
|
Loading
|
|
},
|
|
data() {
|
|
return {
|
|
//评价及回复的list
|
|
list: [],
|
|
|
|
/**
|
|
* loading及遮罩
|
|
*/
|
|
overlayShow: false,
|
|
// 报告价值
|
|
reportLevel: {},
|
|
doDebounce: null,
|
|
}
|
|
},
|
|
activated() {
|
|
},
|
|
computed: {
|
|
|
|
},
|
|
created() {
|
|
this.doDebounce = debounce(function (item) {
|
|
this.hanelClickReply(item)
|
|
}, 5000, true)
|
|
this.getuserEvaluate()
|
|
},
|
|
methods: {
|
|
//获取评价列表
|
|
async getuserEvaluate() {
|
|
this.overlayShow = true
|
|
const data = {
|
|
taskId: this.$route.query.id
|
|
}
|
|
const res = await getCurrentUserEvaluate(data)
|
|
try {
|
|
if (res.code == 0) {
|
|
if (res.data.list.length > 0) {
|
|
res.data.list.forEach((v) => {
|
|
if(v.nxzdEvaluateReplyDTOS && v.nxzdEvaluateReplyDTOS.length > 0) {
|
|
v.show = true
|
|
v.showTextArea = false
|
|
} else if(!v.nxzdEvaluateReplyDTOS || v.nxzdEvaluateReplyDTOS.length == 0) {
|
|
v.show = false
|
|
v.showTextArea = false
|
|
v.message = ''
|
|
}
|
|
if(v.image) {
|
|
v.image = `${downloadUrl}${v.image}`
|
|
}
|
|
})
|
|
this.list = res.data.list
|
|
this.reportLevel = res.data.list[0]
|
|
this.levelName(this.reportLevel.reportValue)
|
|
|
|
} else {
|
|
Notify({ type: 'success', background: '#34baae', message: '暂无数据' })
|
|
}
|
|
}
|
|
}
|
|
finally {
|
|
this.overlayShow = false
|
|
}
|
|
|
|
},
|
|
//评分等级中文展示
|
|
levelName(val) {
|
|
if(val == 5 || val == 4) {
|
|
this.reportLevel.valName = '非常好'
|
|
} else if(val == 3) {
|
|
this.reportLevel.valName = '较好'
|
|
} else if(val == 2) {
|
|
this.reportLevel.valName = '一般'
|
|
} else if(val == 1) {
|
|
this.reportLevel.valName = '差'
|
|
} else if(val == 0) {
|
|
this.reportLevel.valName = '非常差'
|
|
}
|
|
},
|
|
//点击评价回复按钮
|
|
handelClickEvaluate(item) {
|
|
item.showTextArea = true
|
|
},
|
|
//点击取消按钮
|
|
handelClickClose(item) {
|
|
item.show = false
|
|
item.showTextArea = false
|
|
},
|
|
handleClick(item) {
|
|
this.doDebounce(item)
|
|
},
|
|
//点击回复按钮
|
|
async hanelClickReply(item) {
|
|
console.log(item);
|
|
const name = this.$store.getters.username
|
|
const time = this.currentTime()
|
|
const data = {
|
|
evaluateId: item.evaluateId,
|
|
content: item.message,
|
|
replyName: name,
|
|
replyTime: time
|
|
}
|
|
const res = await getCurrentUserEvaluateAdd(data)
|
|
if(res.code == 0) {
|
|
this.getuserEvaluate()
|
|
Notify({ type: 'success', background: '#34baae', message: '回复成功' })
|
|
} else {
|
|
Notify({ type: 'danger', message: res.msg })
|
|
}
|
|
|
|
},
|
|
//获取当前日期的年月日 时分秒
|
|
currentTime() {
|
|
const date = new Date()
|
|
const y = date.getFullYear()
|
|
const month = date.getMonth()+ 1
|
|
const day = date.getDate()
|
|
const m = month >= 10 ? month : '0' + month
|
|
const d = day >= 10 ? day : '0' + day
|
|
const Hours = date.getHours()
|
|
const Minutes = date.getMinutes()
|
|
const Seconds = date.getSeconds()
|
|
const hh = Hours >=10 ? Hours : '0'+Hours
|
|
const mm = Minutes >=10 ? Minutes : '0'+Minutes
|
|
const ss = Seconds >=10 ? Seconds : '0'+Seconds
|
|
const time = `${y}-${m}-${d} ${hh}:${mm}:${ss}`
|
|
return time
|
|
}
|
|
|
|
},
|
|
}
|
|
</script>
|
|
<style lang='less' scoped>
|
|
.userEvaluate {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #333;
|
|
background: #fff;
|
|
.user-content{
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
.main-list{
|
|
margin-top: 10px;
|
|
background: #fff;
|
|
|
|
}
|
|
.main-list:nth-child(1){
|
|
margin-top: 0;
|
|
}
|
|
.user-head
|
|
.evaluate-item {
|
|
padding: 0 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.user-head {
|
|
width: 100%;
|
|
line-height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
background: #fff;
|
|
padding: 0 10px;
|
|
box-sizing: border-box;
|
|
.evaluate-rate {
|
|
margin: 0 10px;
|
|
}
|
|
}
|
|
|
|
.evaluate-main {
|
|
flex: 1; // display: flex;
|
|
// flex-direction: column;
|
|
.evaluate-item {
|
|
width: 100%;
|
|
padding: 10px 10px;
|
|
box-sizing: border-box;
|
|
.item-pic {
|
|
width: 4rem;
|
|
height: 4rem;
|
|
>img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
}
|
|
.item-text-main {
|
|
margin-top: 10px;
|
|
}
|
|
.item-text {
|
|
margin: 0 0 10px;
|
|
}
|
|
.reply {
|
|
color: #34baae;
|
|
display: flex;
|
|
>div:nth-child(1) {
|
|
width: 80px;
|
|
}
|
|
>div:nth-child(2) {
|
|
flex: 1;
|
|
white-space: normal;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
.item-user-time {
|
|
width: 100%;
|
|
display: flex;
|
|
font-size: 12px;
|
|
align-items: center;
|
|
color: #a1a1a1;
|
|
.user-time {
|
|
flex: 1;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.item-user{
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.item-text-area {
|
|
margin: 10px 0 0;
|
|
.van-cell {
|
|
border: 1px solid #ccc;
|
|
border-radius: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.btn {
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
button {
|
|
padding: 4px 8px;
|
|
background: #34baae;
|
|
border: none;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
margin-left: 10px;
|
|
}
|
|
.evaluate-item:nth-child(2) {
|
|
padding-top: 0;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |