294 lines
7.4 KiB
Vue
294 lines
7.4 KiB
Vue
<template>
|
||
<div class="add-eval">
|
||
<div class="title">
|
||
<card _Title="订单投诉" :_Size="16"></card>
|
||
<p>
|
||
<span class="fontsize_16 global_color">{{ statusLabel[detail.complainStatus] }}</span>
|
||
<span class="color999 ml_20">创建时间：</span><span>{{ detail.createTime }}</span>
|
||
<span class="color999 ml_20">{{ detail.createTime }}</span>
|
||
</p>
|
||
</div>
|
||
|
||
<Alert class="l_title" show-icon type="warning">我的申诉信息</Alert>
|
||
<table cellspacing="0" cellpadding='0' border="1">
|
||
<tr>
|
||
<td>投诉商品</td>
|
||
<td class="hover-color" @click="linkTo(`/goodsDetail?goodsId=${detail.goodsId}&skuId=${detail.skuId}`)"><img :src="detail.goodsImage" width="60" alt=""> {{ detail.goodsName }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>投诉主题</td>
|
||
<td>{{ detail.complainTopic }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>投诉内容</td>
|
||
<td>{{ detail.content }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>补充内容</td>
|
||
<td>
|
||
<div style="display:flex;align-items:center;">
|
||
<template v-if="detail.images">
|
||
<div class="demo-upload-list" v-for="(img, index) in detail.images.split(',')" :key="index">
|
||
<img :src="img">
|
||
<div class="demo-upload-list-cover">
|
||
<Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<div v-else>暂无</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<Alert class="l_title" show-icon type="warning">商家申诉信息</Alert>
|
||
<table cellspacing="0" cellpadding='0' border="1">
|
||
<tr>
|
||
<td>申诉时间</td>
|
||
<td>{{ detail.appealTime || '暂无' }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>申诉内容</td>
|
||
<td>{{ detail.appealContent || '暂无' }}</td>
|
||
</tr>
|
||
<tr>
|
||
<td>申诉凭证</td>
|
||
<td>
|
||
|
||
<div style="display:flex;align-items:center;">
|
||
<template v-if="detail.appealImages">
|
||
<div class="demo-upload-list" v-for="(img, index) in detail.appealImages.split(',')" :key="index">
|
||
<img :src="img">
|
||
<div class="demo-upload-list-cover">
|
||
<Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<div v-else>暂无</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<Alert class="l_title" show-icon type="warning">平台仲裁</Alert>
|
||
<table cellspacing="0" cellpadding='0' border="1">
|
||
<tr>
|
||
<td>仲裁意见</td>
|
||
<td>{{ detail.arbitrationResult || '暂无' }}</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<Alert class="l_title" show-icon type="warning">对话详情</Alert>
|
||
<div class="speak-way" v-if="detail.orderComplaintCommunications && detail.orderComplaintCommunications.length">
|
||
<div
|
||
class="speak-msg seller"
|
||
:class="{'speak-buyer': item.owner == 'BUYER', 'speak-platform': item.owner == 'PLATFORM', 'speak-seller': item.owner == 'STORE',}"
|
||
:key="i"
|
||
v-for="(item, i) in detail.orderComplaintCommunications"
|
||
>
|
||
{{
|
||
item.owner == "PLATFORM"
|
||
? "平台"
|
||
: item.owner == "BUYER"
|
||
? "买家"
|
||
: "卖家"
|
||
}}[{{ item.createTime }}]：
|
||
<span>{{ item.content }}</span>
|
||
</div>
|
||
</div>
|
||
<div v-else>暂无对话</div>
|
||
<table cellspacing="0" cellpadding='0' border="1" v-if="detail.complainStatus!='COMPLETE'">
|
||
<tr>
|
||
<td>回复：</td>
|
||
<td><label>
|
||
<input type="textarea" maxlength="200" :rows="4" clearable
|
||
style="width:260px" v-model="params.content" />
|
||
</label></td>
|
||
</tr>
|
||
<tr>
|
||
<td></td>
|
||
<td>
|
||
<Button type="primary" :loading="submitLoading" @click="handleSubmit" style="margin-left: 5px">
|
||
回复
|
||
</Button>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<Modal title="View Image" v-model="visible">
|
||
<img :src="previewImage" v-if="visible" style="width: 100%">
|
||
</Modal>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {getComplainDetail} from '@/api/member.js';
|
||
import {communication} from '@/api/order';
|
||
export default {
|
||
data () {
|
||
return {
|
||
detail: {}, // 评价详情
|
||
visible: false, // 图片预览
|
||
previewImage: '', // 预览图片地址
|
||
loading: false, // 加载状态
|
||
submitLoading: false, // 回复消息loading
|
||
// 状态
|
||
statusLabel: {
|
||
NO_APPLY: '未申请',
|
||
APPLYING: '申请中',
|
||
COMPLETE: '已完成',
|
||
EXPIRED: '已失效',
|
||
CANCEL: '已取消',
|
||
NEW: '待审核'
|
||
},
|
||
// 商家回复内容
|
||
params: {
|
||
content: '',
|
||
complainId: ''
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
getDetail () { // 获取投诉详情
|
||
getComplainDetail(this.$route.query.id).then(res => {
|
||
if (res.success) this.detail = res.result
|
||
})
|
||
},
|
||
goGoodsDetail (skuId, goodsId) { // 跳转商品详情
|
||
let routerUrl = this.$router.resolve({
|
||
path: '/goodsDetail',
|
||
query: {skuId, goodsId}
|
||
})
|
||
window.open(routerUrl.href, '_blank')
|
||
},
|
||
handleView (name) { // 预览图片
|
||
this.previewImage = name;
|
||
this.visible = true;
|
||
},
|
||
// 回复消息
|
||
handleSubmit () {
|
||
if (this.params.content === '') {
|
||
this.$Message.error('请填写对话内容');
|
||
return;
|
||
}
|
||
this.submitLoading = true;
|
||
this.params.complainId = this.$route.query.id;
|
||
communication(this.params).then((res) => {
|
||
this.submitLoading = false;
|
||
if (res.success) {
|
||
this.$Message.success('对话成功');
|
||
this.params.content = '';
|
||
this.getDetail();
|
||
}
|
||
});
|
||
}
|
||
},
|
||
mounted () {
|
||
this.getDetail()
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.speak-way {
|
||
background-color: #fff;
|
||
width: 100%;
|
||
border: 1px solid #999;
|
||
|
||
.speak-seller {
|
||
background-color: #fff2c6;
|
||
}
|
||
|
||
.speak-platform {
|
||
background-color: #ffe2d1;
|
||
}
|
||
|
||
.speak-buyer {
|
||
background-color: #c1d6d5;
|
||
}
|
||
}
|
||
|
||
.speak-msg {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
padding: 0 5px;
|
||
border-radius: 5px;
|
||
margin: 5px;
|
||
background-color: #eee;
|
||
}
|
||
|
||
.demo-upload-list {
|
||
display: inline-block;
|
||
width: 100px;
|
||
height: 100px;
|
||
text-align: center;
|
||
line-height: 100px;
|
||
border: 1px solid transparent;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
background: #fff;
|
||
position: relative;
|
||
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
|
||
margin-right: 4px;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.demo-upload-list img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.demo-upload-list-cover {
|
||
display: none;
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(0, 0, 0, .6);
|
||
}
|
||
|
||
.demo-upload-list:hover .demo-upload-list-cover {
|
||
display: block;
|
||
}
|
||
|
||
.demo-upload-list-cover i {
|
||
color: #fff;
|
||
font-size: 30px;
|
||
cursor: pointer;
|
||
margin: 0 2px;
|
||
}
|
||
|
||
.icon-upload {
|
||
width: 58px;
|
||
height: 58px;
|
||
line-height: 58px;
|
||
text-align: center;
|
||
display: inline-block;
|
||
border: 1px dashed #999;
|
||
border-radius: 4px;
|
||
margin-top: 10px;
|
||
|
||
&:hover {
|
||
cursor: pointer;
|
||
border-color: $theme_color;
|
||
}
|
||
}
|
||
|
||
.l_title {
|
||
margin: 10px 0;
|
||
}
|
||
|
||
table {
|
||
width: 100%;
|
||
border-color: #eee;
|
||
|
||
td {
|
||
padding: 10px;
|
||
|
||
&:nth-child(1) {
|
||
width: 120px;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
</style>
|