<template>
|
<div class="page_talk_detail">
|
<div
|
class="fl-cen repair-state-label"
|
:class="[
|
detail.repairStatus === 0
|
? 'state-1'
|
: detail.repairStatus === 1
|
? 'state-2'
|
: detail.repairStatus === 2
|
? 'state-3'
|
: '',
|
]"
|
>
|
<span class="fz-15 fw-bold" v-if="detail.repairStatus === 0">待处理</span>
|
<span class="fz-15 fw-bold" v-if="detail.repairStatus === 1">待评价</span>
|
<span class="fz-15 fw-bold" v-if="detail.repairStatus === 2">已评价</span>
|
</div>
|
<v-header title=""></v-header>
|
<div class="fl-co" style="padding-bottom: 10px">
|
<!-- 上报信息 -->
|
<div class="fl-co">
|
<div class="label-text-box">
|
<span class="fw-bold fz-9">上报信息</span>
|
</div>
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box">上报内容:</div>
|
<div class="label-text">{{ detail.repairContent }}</div>
|
</div>
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box"></div>
|
<div class="label-text">
|
<el-image
|
v-for="(item, index) in detail.repairUrl"
|
:key="index"
|
class="repair-img mr-r-10 cp"
|
:preview-src-list="detail.repairUrl"
|
:src="item"
|
fit="cover"
|
></el-image>
|
</div>
|
</div>
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box">上报时间:</div>
|
<div class="label-text">{{ showTime(detail.createTime) }}</div>
|
</div>
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box">上报人姓名:</div>
|
<div class="label-text">{{ detail.repairName }}</div>
|
</div>
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box">手机号码:</div>
|
<div class="label-text">{{ detail.repairPhone }}</div>
|
</div>
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box">上报地址:</div>
|
<div class="label-text">{{ detail.repairPosition }}</div>
|
</div>
|
<div
|
class="fl-f mr-t-10"
|
v-if="detail.repairStatus === 0 && repair_del != 1"
|
>
|
<div class="fc-333 label-text-box">处理信息:</div>
|
<div class="label-text">
|
<el-input
|
type="textarea"
|
class="textarea-width"
|
:rows="7"
|
resize="none"
|
placeholder="请输入处理结果"
|
maxlength="200"
|
clearable
|
show-word-limit
|
v-model="form.feedbackContent"
|
>
|
</el-input>
|
</div>
|
</div>
|
<div
|
class="fl-f mr-t-10"
|
v-if="detail.repairStatus === 0 && repair_del != 1"
|
>
|
<div class="fc-333 label-text-box"></div>
|
<div class="label-text">
|
<section class="sec" data-gray="true">
|
<article class="fl-fw">
|
<div
|
class="avatar img-item-box mr-b-10 mr-r-10"
|
v-for="(i, j) in image"
|
:key="j + '-ta-img'"
|
>
|
<span
|
class="close el-icon-close close-btn"
|
@click.stop="onCloseImage(i)"
|
></span>
|
<img
|
class="img-style"
|
:src="i"
|
alt=""
|
@click.stop="onScaleImage(i)"
|
/>
|
</div>
|
<div class="avatar" v-if="image.length < 9">
|
<v-upload @path="onPath" slots>
|
<div class="avatar">
|
<i class="el-icon-plus"></i><b>上传</b>
|
</div>
|
</v-upload>
|
</div>
|
</article>
|
</section>
|
</div>
|
</div>
|
</div>
|
<!-- 处理信息 -->
|
<div
|
class="fl-co mr-t-30"
|
v-if="detail.repairStatus === 1 || detail.repairStatus === 2"
|
>
|
<div class="label-text-box">
|
<span class="fw-bold fz-9">处理信息</span>
|
</div>
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box">处理反馈:</div>
|
<div class="label-text">{{ detail.feedbackContent }}</div>
|
</div>
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box">处理人:</div>
|
<div class="label-text">{{ detail.feedback }}</div>
|
</div>
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box">处理时间:</div>
|
<div class="label-text">{{ showTime(detail.feedbackTime) }}</div>
|
</div>
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box"></div>
|
<div class="label-text">
|
<el-image
|
v-for="(item, index) in detail.feedbackUrl"
|
:key="index"
|
class="repair-img mr-r-10 cp"
|
:preview-src-list="detail.feedbackUrl"
|
:src="item"
|
fit="cover"
|
></el-image>
|
</div>
|
</div>
|
</div>
|
<!-- 评价信息 -->
|
<div class="fl-co mr-t-30" v-if="detail.repairStatus === 2">
|
<div class="label-text-box">
|
<span class="fw-bold fz-9">评价信息</span>
|
</div>
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box">评价内容:</div>
|
<div class="label-text">{{ detail.replyContent }}</div>
|
</div>
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box">评分:</div>
|
<div class="label-text">
|
<el-rate
|
disabled
|
v-model="detail.replyScore"
|
show-text
|
:texts="showTextList"
|
>
|
</el-rate>
|
</div>
|
</div>
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box">评价时间:</div>
|
<div class="label-text">{{ showTime(detail.replyTime) }}</div>
|
</div>
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box"></div>
|
<div class="label-text">
|
<el-image
|
v-for="(item, index) in detail.replyUrl"
|
:key="index"
|
class="repair-img mr-r-10 cp"
|
:preview-src-list="detail.replyUrl"
|
:src="item"
|
fit="cover"
|
></el-image>
|
</div>
|
</div>
|
</div>
|
<!-- 操作 -->
|
<div class="fl-co mr-t-30">
|
<div class="fl-f mr-t-10">
|
<div class="fc-999 label-text-box"></div>
|
<div class="label-text">
|
<el-button size="small" @click="$router.go(-1)">返 回</el-button>
|
<el-button
|
type="primary"
|
v-if="detail.repairStatus === 0 && repair_del != 1"
|
size="small"
|
@click="submitHandle"
|
>提 交</el-button
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import vUpload from "com/upload/upload1";
|
import { dateTime } from "../../../utils/common";
|
export default {
|
props: {},
|
components: { vUpload },
|
data() {
|
return {
|
detail: {},
|
type: false,
|
image: [],
|
talk: [],
|
repair_del: null,
|
form: {
|
feedbackContent: "",
|
repairStatus: 1,
|
},
|
repair_id: "",
|
repair_type: "",
|
showTextList: ["极差", "失望", "一般", "满意", "非常满意"],
|
};
|
},
|
watch: {},
|
methods: {
|
onScaleImage(i) {
|
this.$store.dispatch("setImage", {
|
time: Date.now(),
|
title: "[大图]",
|
foot: 1,
|
tool: 1,
|
pic: i,
|
list: this.image,
|
});
|
},
|
onCloseImage(i) {
|
this.image = this.image.filter((r) => {
|
return r !== i;
|
});
|
},
|
onPath(v) {
|
this.image.push(v);
|
},
|
init() {
|
this.$api.get("propertyRepair/" + this.repair_id, {}, (e) => {
|
e.feedbackUrl = e.feedbackUrl ? e.feedbackUrl.split(",") : [];
|
e.replyUrl = e.replyUrl ? e.replyUrl.split(",") : [];
|
e.repairUrl = e.repairUrl ? e.repairUrl.split(",") : [];
|
e.replyScore = e.replyScore ? e.replyScore : 0;
|
this.detail = e;
|
});
|
},
|
showTime(t) {
|
return dateTime(t);
|
},
|
// 提交
|
submitHandle() {
|
if (this.form.feedbackContent === "" || !this.form.feedbackContent) {
|
demo.toast("请输入处理结果");
|
return;
|
}
|
if (this.image.length) {
|
this.form.feedbackUrl = this.image.join(",");
|
}
|
this.form.id = this.repair_id;
|
this.$api.post("propertyRepair/update", this.form, (e) => {
|
if (e) {
|
demo.toast("审核成功");
|
this.$router.go(-1);
|
}
|
});
|
},
|
},
|
mounted() {
|
this.repair_id = this.$route.query.id;
|
this.repair_type = this.$route.query.type;
|
this.repair_del = this.$route.query.del;
|
this.init();
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.page_talk_detail {
|
position: relative;
|
overflow-y: scroll;
|
.p {
|
margin: 2px 0 8px;
|
padding-left: 50px;
|
box-sizing: border-box;
|
p {
|
font-size: 14px;
|
margin-bottom: 5px;
|
line-height: 1.2;
|
b {
|
padding-right: 10px;
|
cursor: pointer;
|
}
|
}
|
}
|
.sec article {
|
line-height: 32px;
|
}
|
.cover-img {
|
width: 128px;
|
height: 72px;
|
display: inline-block;
|
margin: 0 5px 5px 0;
|
border-radius: 3px;
|
overflow: hidden;
|
}
|
.image {
|
img {
|
// width: 128px;
|
// height: 72px;
|
// display: inline-block;
|
// margin: 0 5px 5px 0;
|
width: 100%;
|
cursor: pointer;
|
}
|
}
|
.lit {
|
position: relative;
|
box-sizing: border-box;
|
&.lft {
|
padding-left: 80px;
|
min-height: 80px;
|
}
|
img {
|
position: absolute;
|
width: 60px;
|
height: 60px;
|
left: 5px;
|
top: 0;
|
border-radius: 5px;
|
cursor: pointer;
|
}
|
}
|
.progress {
|
.sec {
|
margin-bottom: 0;
|
}
|
ul {
|
padding: 0 30px;
|
}
|
li {
|
width: 400px;
|
margin-bottom: 10px;
|
b {
|
display: block;
|
margin-bottom: 2px;
|
font-size: 13px;
|
line-height: 1.3;
|
font-weight: 700;
|
}
|
}
|
}
|
}
|
.taln_add {
|
.up {
|
padding-top: 6px;
|
}
|
.list {
|
.el-input {
|
width: 80%;
|
}
|
li {
|
display: flex;
|
align-items: center;
|
margin-bottom: 8px;
|
.but-box {
|
height: 50px;
|
flex: 1;
|
display: flex;
|
padding-left: 4px;
|
align-items: center;
|
.but {
|
font-size: 12px;
|
display: flex;
|
align-items: center;
|
}
|
.image {
|
position: relative;
|
cursor: pointer;
|
width: 50px;
|
height: 50px;
|
&:hover .clear {
|
display: block;
|
}
|
.clear {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
width: 25px;
|
height: 25px;
|
display: none;
|
}
|
img {
|
width: 50px;
|
height: 50px;
|
}
|
}
|
}
|
.circle {
|
display: block;
|
width: 30px;
|
height: 30px;
|
/*margin-left: 10px;*/
|
text-align: center;
|
font-size: 22px;
|
line-height: 30px;
|
border-radius: 10px;
|
border: 1px solid #999;
|
transform: scale(0.8);
|
cursor: pointer;
|
}
|
&.add {
|
text-align: center;
|
display: block;
|
width: 80%;
|
padding: 5px 0;
|
span {
|
height: 40px;
|
line-height: 40px;
|
cursor: pointer;
|
font-size: 14px;
|
letter-spacing: 2px;
|
font-weight: 450;
|
}
|
}
|
}
|
}
|
.flex {
|
display: flex;
|
flex-wrap: wrap;
|
.avatar {
|
margin: 0 10px 10px 0;
|
position: relative;
|
img {
|
display: block;
|
width: 100%;
|
height: 100%;
|
}
|
.close {
|
position: absolute;
|
right: -8px;
|
top: -8px;
|
width: 16px;
|
height: 16px;
|
border-radius: 50%;
|
background-color: tomato;
|
color: #fff;
|
cursor: pointer;
|
}
|
}
|
}
|
}
|
.img-item-box {
|
position: relative;
|
}
|
.close-btn {
|
position: absolute;
|
right: -5px;
|
top: -5px;
|
background-color: red;
|
color: #fff;
|
border-radius: 50%;
|
}
|
.label-text-box {
|
line-height: 1.5;
|
width: 120px;
|
text-align: right;
|
}
|
.label-text {
|
margin-left: 10px;
|
width: 700px;
|
line-height: 1.5;
|
}
|
.repair-img {
|
width: 120px;
|
height: 120px;
|
}
|
.img-style {
|
width: 104px;
|
height: 104px;
|
}
|
.textarea-width {
|
width: 400px;
|
}
|
.repair-state-label {
|
position: absolute;
|
right: 0;
|
top: 30px;
|
width: 150px;
|
height: 150px;
|
border-radius: 50%;
|
}
|
.state-1 {
|
border: 4px solid #999;
|
color: #999999;
|
}
|
.state-2 {
|
border: 4px solid #67c23a;
|
color: #67c23a;
|
}
|
.state-3 {
|
border: 4px solid #f56c6c;
|
color: #f56c6c;
|
}
|
</style>
|
