4 changed files with 302 additions and 224 deletions
@ -1,238 +1,315 @@ |
|||
<template> |
|||
<div class="address_edit"> |
|||
<!-- 导航栏 --> |
|||
<!--<div class="header_body"> |
|||
<header-nav :slefBack="true" @goBack="goBack" :titelText="`评价详情`"></header-nav> |
|||
</div> |
|||
--> |
|||
<!-- 中间 --> |
|||
<div class="warp_body"> |
|||
|
|||
<div class="cardsty"><label>处置单位</label><span>深圳市卫生健康委员会</span></div> |
|||
<div class="cardsty"> |
|||
<h4>您对我们的服务满意吗?</h4> |
|||
<div class="eval-item"><label>处置速度</label><span class="eval-star"><van-icon class="active" name="star" /><van-icon class="active" name="star" /><van-icon class="active" name="star" /><van-icon class="active" name="star" /><van-icon class="active" name="star" /></span><span>非常满意</span></div> |
|||
<div class="eval-item"><label>处置效果</label><span class="eval-star"><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /></span><span>非常满意</span></div> |
|||
<div class="eval-item"><label>服务体验</label><span class="eval-star"><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /></span><span>非常满意</span></div> |
|||
<div class="eval-item"><label>反馈质量</label><span class="eval-star"><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /></span><span>非常满意</span></div> |
|||
|
|||
<div class="eval-all"><span>整体评价:</span><i class="verygood"></i><span>非常满意</span></div> |
|||
|
|||
</div> |
|||
<div class="cardsty"> |
|||
<label>反馈详情</label> |
|||
<div class="eval-cont"> |
|||
|
|||
<div class="address_edit"> |
|||
<!-- 导航栏 --> |
|||
<!--<div class="header_body"> |
|||
<header-nav :slefBack="true" @goBack="goBack" :titelText="`评价详情`"></header-nav> |
|||
</div> |
|||
</div> |
|||
--> |
|||
<!-- 中间 --> |
|||
<div class="warp_body"> |
|||
|
|||
<div class="cardsty"><label>处置单位</label><span>{{data.dataObj.orgText}}</span></div> |
|||
<div class="cardsty"> |
|||
<h4>您对我们的服务满意吗?</h4> |
|||
<div class="eval-item"> |
|||
<label>处置速度</label> |
|||
<span class="eval-star"> |
|||
<van-icon class="active" name="star" v-for="n in data.dataObj.dealSpeedMetrics"/> |
|||
<van-icon name="star" v-for="n in (5 - data.dataObj.dealSpeedMetrics)"/> |
|||
</span> |
|||
<span v-if="data.dataObj.dealSpeedMetrics == 1">非常不满意</span> |
|||
<span v-if="data.dataObj.dealSpeedMetrics == 2">不满意</span> |
|||
<span v-if="data.dataObj.dealSpeedMetrics == 3">基本满意</span> |
|||
<span v-if="data.dataObj.dealSpeedMetrics == 4">满意</span> |
|||
<span v-if="data.dataObj.dealSpeedMetrics == 5">非常满意</span> |
|||
</div> |
|||
<div class="eval-item"> |
|||
<label>处置效果</label> |
|||
<span class="eval-star"> |
|||
<van-icon class="active" name="star" v-for="n in data.dataObj.dealEffectMetrics"/> |
|||
<van-icon name="star" v-for="n in (5 - data.dataObj.dealEffectMetrics)"/> |
|||
</span> |
|||
<span v-if="data.dataObj.dealEffectMetrics == 1">非常不满意</span> |
|||
<span v-if="data.dataObj.dealEffectMetrics == 2">不满意</span> |
|||
<span v-if="data.dataObj.dealEffectMetrics == 3">基本满意</span> |
|||
<span v-if="data.dataObj.dealEffectMetrics == 4">满意</span> |
|||
<span v-if="data.dataObj.dealEffectMetrics == 5">非常满意</span> |
|||
</div> |
|||
<div class="eval-item"> |
|||
<label>服务体验</label> |
|||
<span class="eval-star"> |
|||
<van-icon class="active" name="star" v-for="n in data.dataObj.serviceMetrics"/> |
|||
<van-icon name="star" v-for="n in (5 - data.dataObj.serviceMetrics)"/> |
|||
</span> |
|||
<span v-if="data.dataObj.serviceMetrics == 1">非常不满意</span> |
|||
<span v-if="data.dataObj.serviceMetrics == 2">不满意</span> |
|||
<span v-if="data.dataObj.serviceMetrics == 3">基本满意</span> |
|||
<span v-if="data.dataObj.serviceMetrics == 4">满意</span> |
|||
<span v-if="data.dataObj.serviceMetrics == 5">非常满意</span> |
|||
</div> |
|||
<div class="eval-item"> |
|||
<label>反馈质量</label> |
|||
<span class="eval-star"> |
|||
<van-icon class="active" name="star" v-for="n in data.dataObj.feedbackQualityMetrics"/> |
|||
<van-icon name="star" v-for="n in (5 - data.dataObj.feedbackQualityMetrics)"/> |
|||
</span> |
|||
<span v-if="data.dataObj.feedbackQualityMetrics == 1">非常不满意</span> |
|||
<span v-if="data.dataObj.feedbackQualityMetrics == 2">不满意</span> |
|||
<span v-if="data.dataObj.feedbackQualityMetrics == 3">基本满意</span> |
|||
<span v-if="data.dataObj.feedbackQualityMetrics == 4">满意</span> |
|||
<span v-if="data.dataObj.feedbackQualityMetrics == 5">非常满意</span> |
|||
</div> |
|||
|
|||
<div class="eval-all"> |
|||
<span>整体评价:</span> |
|||
<i class="verygood bad" v-if="data.dataObj.approveCode == 1 || data.dataObj.approveCode == 2"></i> |
|||
<i class="verygood good" v-if="data.dataObj.approveCode == 3 || data.dataObj.approveCode == 4"></i> |
|||
<i class="verygood" v-if="data.dataObj.approveCode == 5"></i> |
|||
<span v-if="data.dataObj.approveCode == 1">非常不满意</span> |
|||
<span v-if="data.dataObj.approveCode == 2">不满意</span> |
|||
<span v-if="data.dataObj.approveCode == 3">基本满意</span> |
|||
<span v-if="data.dataObj.approveCode == 4">满意</span> |
|||
<span v-if="data.dataObj.approveCode == 5">非常满意</span> |
|||
<span v-if="data.dataObj.approveCode == 6">未评价</span> |
|||
<span v-if="data.dataObj.approveCode == 7">无效评价</span> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="cardsty"> |
|||
<label>反馈详情</label> |
|||
<div class="eval-cont"> |
|||
{{data.dataObj.writingEvaluation}} |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="file-upload"> |
|||
<div class="file-upload-center"> |
|||
<label>附件</label> |
|||
</div> |
|||
<!-- <van-uploader v-model="submitData.fileListObj" class="file" :after-read="uploadFiles" multiple :max-size="500 * 1024" @oversize="onOversize" :before-delete="deleteFile">--> |
|||
<!-- <template #preview-cover="{ file }">--> |
|||
<!-- <div class="preview-cover van-ellipsis">{{ file.name }}</div>--> |
|||
<!-- </template>--> |
|||
<!-- </van-uploader>--> |
|||
<!-- <van-uploader v-model="submitData.fileListObj" max-count="9" class="file" multiple |
|||
:after-read="uploadFiles" :before-delete="deleteFile"> |
|||
<template #preview-cover="{ file }"> |
|||
<div class="preview-cover van-ellipsis">{{ file.name }}</div> |
|||
</template> |
|||
</van-uploader> --> |
|||
<van-uploader v-model="submitData.fileListObj" class="file" multiple max-count="9" |
|||
:after-read="uploadFiles" :before-delete="deleteFile"> |
|||
<template #preview-cover="{ file }"> |
|||
<div class="preview-cover van-ellipsis">{{ file.name }}</div> |
|||
</template> |
|||
</van-uploader> |
|||
|
|||
</div> |
|||
|
|||
<div class="file-upload"> |
|||
<div class="file-upload-center"> |
|||
<label>附件</label> |
|||
</div> |
|||
<!-- <van-uploader v-model="submitData.fileListObj" class="file" :after-read="uploadFiles" multiple :max-size="500 * 1024" @oversize="onOversize" :before-delete="deleteFile">--> |
|||
<!-- <template #preview-cover="{ file }">--> |
|||
<!-- <div class="preview-cover van-ellipsis">{{ file.name }}</div>--> |
|||
<!-- </template>--> |
|||
<!-- </van-uploader>--> |
|||
<!-- <van-uploader v-model="submitData.fileListObj" max-count="9" class="file" multiple |
|||
:after-read="uploadFiles" :before-delete="deleteFile"> |
|||
<template #preview-cover="{ file }"> |
|||
<div class="preview-cover van-ellipsis">{{ file.name }}</div> |
|||
</template> |
|||
</van-uploader> --> |
|||
<van-uploader v-model="submitData.fileListObj" class="file" multiple max-count="9" |
|||
:after-read="uploadFiles" :before-delete="deleteFile"> |
|||
<template #preview-cover="{ file }"> |
|||
<div class="preview-cover van-ellipsis">{{ file.name }}</div> |
|||
</template> |
|||
</van-uploader> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup name="register"> |
|||
|
|||
|
|||
import {uploadFile} from '../../util/fileUpload' |
|||
import {reactive, ref} from "vue"; |
|||
import * as w6s from 'szient-js-sdk'; |
|||
|
|||
const {useCommon, useMy} = $globalStore |
|||
|
|||
const router = useRouter(); |
|||
const route = useRoute(); |
|||
|
|||
const data = reactive({ |
|||
}); |
|||
//保存参数 |
|||
const submitData = reactive({ |
|||
id:"", |
|||
}); |
|||
|
|||
onMounted(() => { |
|||
submitData.id = route?.query?.id; |
|||
}); |
|||
import {uploadFile} from '../../util/fileUpload' |
|||
import {reactive, ref} from "vue"; |
|||
import * as w6s from 'szient-js-sdk'; |
|||
import {queryEnterpriseComplaintList, getObjByKey} from "../../api/enterprise"; |
|||
|
|||
const {useCommon, useMy} = $globalStore |
|||
|
|||
const router = useRouter(); |
|||
const route = useRoute(); |
|||
|
|||
const data = reactive({ |
|||
dataObj: { |
|||
dealSpeedMetrics: 0, |
|||
dealEffectMetrics: 0, |
|||
serviceMetrics: 0, |
|||
feedbackQualityMetrics: 0, |
|||
writingEvaluation: "", |
|||
}, |
|||
}); |
|||
//保存参数 |
|||
const submitData = reactive({ |
|||
id: "", |
|||
}); |
|||
|
|||
onMounted(() => { |
|||
submitData.id = route?.query?.id; |
|||
getObjById(submitData.id) |
|||
}); |
|||
|
|||
const getObjById = (proWorkCode) => { |
|||
getObjByKey(proWorkCode, success => { |
|||
data.dataObj = success.data |
|||
console.log("========> : ", data.dataObj); |
|||
}, error => { |
|||
}) |
|||
} |
|||
|
|||
|
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.address_edit { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
background-color: #ebf3fb; |
|||
} |
|||
|
|||
.warp_body { |
|||
margin: 2% 3%; |
|||
padding-bottom: 3rem; |
|||
width: 94%; |
|||
height: 100%; |
|||
//border-radius: 0.25rem; |
|||
//background-image: linear-gradient(to bottom, #ebf3fb, #fff); |
|||
background: transparent; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.file-upload { |
|||
position: relative; |
|||
min-height: 3.0rem; |
|||
/*max-height: 6.5rem;*/ |
|||
padding: 1rem 0.27rem 0.27rem 0.43rem; |
|||
box-sizing: border-box; |
|||
background: #fff; |
|||
border-radius: 0.2rem; |
|||
} |
|||
|
|||
.file-upload-center { |
|||
position: absolute; |
|||
top: 0.27rem; |
|||
left: 0.43rem; |
|||
width: 90%; |
|||
height: 0.65rem; |
|||
font-size: 0.38rem; |
|||
font-weight: 600; |
|||
span { |
|||
font-size: 0.32rem; |
|||
color: rgb(221, 229, 227); |
|||
} |
|||
} |
|||
.file { |
|||
position: relative; |
|||
width: 100%; |
|||
height: calc(100% - 1.5rem); |
|||
} |
|||
|
|||
/deep/ .van-uploader__upload, /deep/ .van-uploader__preview-image { |
|||
width: 1.95rem !important; |
|||
} |
|||
|
|||
.preview-cover { |
|||
position: absolute; |
|||
bottom: 0; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
padding: 4px; |
|||
color: #fff; |
|||
font-size: 0.32rem; |
|||
text-align: center; |
|||
background: rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
.zoom { |
|||
/*margin-top: 0.65rem; |
|||
padding-top: 0.27rem; |
|||
padding-left: 0.27rem;*/ |
|||
img { |
|||
width: 1.95rem; |
|||
height: 2rem; |
|||
margin: 0 0.21rem 0.21rem 0; |
|||
font-size: 0.35rem; |
|||
} |
|||
} |
|||
|
|||
.cardsty { |
|||
margin: 3% 0; |
|||
width: 100%; |
|||
padding: 5%; |
|||
background: #fff; |
|||
border-radius: 0.2rem; |
|||
font-size: 0.38rem; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.cardsty h4 { |
|||
margin: 0.2rem 0 0.5rem; |
|||
font-size: 0.42rem; |
|||
} |
|||
|
|||
.cardsty label { |
|||
margin-right: 0.3rem; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.eval-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin: 0.27rem 0; |
|||
} |
|||
|
|||
.eval-star { |
|||
margin: 0 0.3rem 0 0.2rem; |
|||
} |
|||
|
|||
.eval-star i { |
|||
margin: 0 0.1rem; |
|||
color: #ddd; |
|||
font-size: 0.5rem; |
|||
} |
|||
|
|||
.eval-star i.active { |
|||
color: #fbb516; |
|||
} |
|||
|
|||
.eval-all { |
|||
display: flex; |
|||
align-items: center; |
|||
margin: 8% 2% 3%; |
|||
padding: 8% 0 0 0; |
|||
width: 96%; |
|||
border-top: 0.02667rem solid #eee; |
|||
} |
|||
|
|||
.eval-all i { |
|||
display: inline-block; |
|||
margin: 0 0.3rem 0 0.5rem; |
|||
width: 0.75rem; |
|||
height: 0.75rem; |
|||
background: url("../../assets/images/eval-verygood.png") no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.eval-all i.good { |
|||
background: url("../../assets/images/eval-good.png") no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.eval-all i.bad { |
|||
background: url("../../assets/images/eval-bad.png") no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
.eval-cont { |
|||
margin: 3% 0; |
|||
padding: 0.27rem; |
|||
width: 100%; |
|||
min-height: 3rem; |
|||
border-radius: 0.2rem; |
|||
border: 0.02667rem solid #eee; |
|||
box-sizing: border-box; |
|||
line-height: 1.5; |
|||
} |
|||
.address_edit { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
background-color: #ebf3fb; |
|||
} |
|||
|
|||
.warp_body { |
|||
margin: 2% 3%; |
|||
padding-bottom: 3rem; |
|||
width: 94%; |
|||
height: 100%; |
|||
//border-radius: 0.25rem; |
|||
//background-image: linear-gradient(to bottom, #ebf3fb, #fff); |
|||
background: transparent; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.file-upload { |
|||
position: relative; |
|||
min-height: 3.0rem; |
|||
/*max-height: 6.5rem;*/ |
|||
padding: 1rem 0.27rem 0.27rem 0.43rem; |
|||
box-sizing: border-box; |
|||
background: #fff; |
|||
border-radius: 0.2rem; |
|||
} |
|||
|
|||
.file-upload-center { |
|||
position: absolute; |
|||
top: 0.27rem; |
|||
left: 0.43rem; |
|||
width: 90%; |
|||
height: 0.65rem; |
|||
font-size: 0.38rem; |
|||
font-weight: 600; |
|||
|
|||
span { |
|||
font-size: 0.32rem; |
|||
color: rgb(221, 229, 227); |
|||
} |
|||
} |
|||
|
|||
.file { |
|||
position: relative; |
|||
width: 100%; |
|||
height: calc(100% - 1.5rem); |
|||
} |
|||
|
|||
/deep/ .van-uploader__upload, /deep/ .van-uploader__preview-image { |
|||
width: 1.95rem !important; |
|||
} |
|||
|
|||
.preview-cover { |
|||
position: absolute; |
|||
bottom: 0; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
padding: 4px; |
|||
color: #fff; |
|||
font-size: 0.32rem; |
|||
text-align: center; |
|||
background: rgba(0, 0, 0, 0.3); |
|||
} |
|||
|
|||
.zoom { |
|||
/*margin-top: 0.65rem; |
|||
padding-top: 0.27rem; |
|||
padding-left: 0.27rem;*/ |
|||
|
|||
img { |
|||
width: 1.95rem; |
|||
height: 2rem; |
|||
margin: 0 0.21rem 0.21rem 0; |
|||
font-size: 0.35rem; |
|||
} |
|||
} |
|||
|
|||
.cardsty { |
|||
margin: 3% 0; |
|||
width: 100%; |
|||
padding: 5%; |
|||
background: #fff; |
|||
border-radius: 0.2rem; |
|||
font-size: 0.38rem; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.cardsty h4 { |
|||
margin: 0.2rem 0 0.5rem; |
|||
font-size: 0.42rem; |
|||
} |
|||
|
|||
.cardsty label { |
|||
margin-right: 0.3rem; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.eval-item { |
|||
display: flex; |
|||
align-items: center; |
|||
margin: 0.27rem 0; |
|||
} |
|||
|
|||
.eval-star { |
|||
margin: 0 0.3rem 0 0.2rem; |
|||
} |
|||
|
|||
.eval-star i { |
|||
margin: 0 0.1rem; |
|||
color: #ddd; |
|||
font-size: 0.5rem; |
|||
} |
|||
|
|||
.eval-star i.active { |
|||
color: #fbb516; |
|||
} |
|||
|
|||
.eval-all { |
|||
display: flex; |
|||
align-items: center; |
|||
margin: 8% 2% 3%; |
|||
padding: 8% 0 0 0; |
|||
width: 96%; |
|||
border-top: 0.02667rem solid #eee; |
|||
} |
|||
|
|||
.eval-all i { |
|||
display: inline-block; |
|||
margin: 0 0.3rem 0 0.5rem; |
|||
width: 0.75rem; |
|||
height: 0.75rem; |
|||
background: url("../../assets/images/eval-verygood.png") no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.eval-all i.good { |
|||
background: url("../../assets/images/eval-good.png") no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.eval-all i.bad { |
|||
background: url("../../assets/images/eval-bad.png") no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
|
|||
.eval-cont { |
|||
margin: 3% 0; |
|||
padding: 0.27rem; |
|||
width: 100%; |
|||
min-height: 3rem; |
|||
border-radius: 0.2rem; |
|||
border: 0.02667rem solid #eee; |
|||
box-sizing: border-box; |
|||
line-height: 1.5; |
|||
} |
|||
|
|||
</style> |
|||
|
|||
Loading…
Reference in new issue