|
|
@@ -1,8 +1,8 @@
|
|
|
<template>
|
|
|
<view class="complaint-page">
|
|
|
- <template v-if="complaintInfo.complaintsStatus == 1">
|
|
|
+ <template v-if="showComplaintList">
|
|
|
<!-- 处理状态展示 -->
|
|
|
- <view class="status-block" v-if="complaintInfo.disposeLogList && complaintInfo.disposeLogList.length">
|
|
|
+ <view class="status-block" v-if="complaintInfo.disposeLogList[0].userType == 1">
|
|
|
<view class="status-title">书嗨处理</view>
|
|
|
<view class="time">--</view>
|
|
|
|
|
|
@@ -13,7 +13,7 @@
|
|
|
</view>
|
|
|
<view class="info-row">
|
|
|
<text class="label">平台回复:</text>
|
|
|
- <text class="value">{{ complaintInfo.description || '暂无' }}</text>
|
|
|
+ <text class="value">{{ complaintInfo.description || "暂无" }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -24,7 +24,7 @@
|
|
|
<view class="complaint-item" v-for="(item, index) in complaintInfo.disposeLogList" :key="index">
|
|
|
<view class="complaint-header">
|
|
|
<view class="header-main">
|
|
|
- <text class="title">{{ item.userType == 1 ? '我的投诉' : '客服回复' }}</text>
|
|
|
+ <text class="title">{{ item.userType == 1 ? "我的投诉" : "客服回复" }}</text>
|
|
|
<text class="time">{{ item.createTime }}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -44,14 +44,26 @@
|
|
|
<view class="info-row image-list" v-if="item.imgList && item.imgList.length">
|
|
|
<text class="label">上传凭证:</text>
|
|
|
<view class="images">
|
|
|
- <image v-for="(img, imgIndex) in item.imgList" :key="imgIndex" :src="img"
|
|
|
- mode="aspectFill" @click="previewImage(item.imgList, imgIndex)">
|
|
|
+ <image
|
|
|
+ v-for="(img, imgIndex) in item.imgList"
|
|
|
+ :key="imgIndex"
|
|
|
+ :src="img"
|
|
|
+ mode="aspectFill"
|
|
|
+ @click="previewImage(item.imgList, imgIndex)"
|
|
|
+ >
|
|
|
</image>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+
|
|
|
+ <view
|
|
|
+ class="bottom-fixed-con"
|
|
|
+ v-if="complaintInfo.complaintsStatus == 2 && complaintInfo.disposeLogList[0].userType == 2"
|
|
|
+ >
|
|
|
+ <u-button type="primary" @click="continueComplaint">继续投诉</u-button>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<!-- 新投诉表单,仅在status为1时显示 -->
|
|
|
@@ -71,26 +83,47 @@
|
|
|
|
|
|
<view class="form-block">
|
|
|
<!-- 联系方式 -->
|
|
|
- <view class="form-item flex-a" style="padding:14rpx 0">
|
|
|
+ <view class="form-item flex-a" style="padding: 14rpx 0">
|
|
|
<view class="common-text-2 required">联系方式</view>
|
|
|
- <u-input class="flex-1" input-align="right" placeholder-style="color:#999;font-size:28rpx;"
|
|
|
- v-model="phone" placeholder="请输入联系方式" :border="false" type="number" maxlength="11"></u-input>
|
|
|
+ <u-input
|
|
|
+ class="flex-1"
|
|
|
+ input-align="right"
|
|
|
+ placeholder-style="color:#999;font-size:28rpx;"
|
|
|
+ v-model="phone"
|
|
|
+ placeholder="请输入联系方式"
|
|
|
+ :border="false"
|
|
|
+ type="number"
|
|
|
+ maxlength="11"
|
|
|
+ ></u-input>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="common-text-2 required mb-20">投诉说明</view>
|
|
|
- <view class="form-block" style="padding: 20rpx;">
|
|
|
+ <view class="form-block" style="padding: 20rpx">
|
|
|
<!-- 投诉说明 -->
|
|
|
- <u-input v-model="description" type="textarea" placeholder="请描述投诉情况,有助于客服更快处理" :height="200"
|
|
|
- :border="false"></u-input>
|
|
|
+ <u-input
|
|
|
+ v-model="description"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请描述投诉情况,有助于客服更快处理"
|
|
|
+ :height="200"
|
|
|
+ :border="false"
|
|
|
+ ></u-input>
|
|
|
</view>
|
|
|
|
|
|
<!-- 图片上传 -->
|
|
|
<view class="common-text-2 required mb-20">上传凭证(最多3张)</view>
|
|
|
|
|
|
- <u-upload class="upload-image" :fileList="fileList" @on-choose-complete="afterRead" @delete="deletePic"
|
|
|
- :maxCount="3" :auto-upload="false" :previewFullImage="true" uploadText="点击上传"
|
|
|
- @on-uploaded="onUploaded"></u-upload>
|
|
|
+ <u-upload
|
|
|
+ class="upload-image"
|
|
|
+ :fileList="fileList"
|
|
|
+ @on-choose-complete="afterRead"
|
|
|
+ @delete="deletePic"
|
|
|
+ :maxCount="3"
|
|
|
+ :auto-upload="false"
|
|
|
+ :previewFullImage="true"
|
|
|
+ uploadText="点击上传"
|
|
|
+ @on-uploaded="onUploaded"
|
|
|
+ ></u-upload>
|
|
|
|
|
|
<!-- 底部按钮 -->
|
|
|
<view class="bottom-fixed-con">
|
|
|
@@ -98,136 +131,147 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- 投诉原因选择器 -->
|
|
|
- <u-picker v-model="showPicker" mode="selector" :range="reasonList" @confirm="confirmReason"
|
|
|
- @cancel="showPicker = false"></u-picker>
|
|
|
+ <u-picker
|
|
|
+ v-model="showPicker"
|
|
|
+ mode="selector"
|
|
|
+ :range="reasonList"
|
|
|
+ @confirm="confirmReason"
|
|
|
+ @cancel="showPicker = false"
|
|
|
+ ></u-picker>
|
|
|
</template>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import ENV_CONFIG from '@/.env.js'
|
|
|
+import ENV_CONFIG from "@/.env.js";
|
|
|
// api前缀
|
|
|
-const env = ENV_CONFIG[process.env.ENV_TYPE || 'dev'];
|
|
|
+const env = ENV_CONFIG[process.env.ENV_TYPE || "dev"];
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- complaintReason: '',
|
|
|
- phone: '',
|
|
|
- description: '',
|
|
|
+ showComplaintList: false,
|
|
|
+ complaintReason: "",
|
|
|
+ phone: "",
|
|
|
+ description: "",
|
|
|
fileList: [],
|
|
|
showPicker: false,
|
|
|
reasonList: [],
|
|
|
- orderId: '',
|
|
|
+ orderId: "",
|
|
|
complaintInfo: {
|
|
|
status: 1,
|
|
|
- platformReply: '',
|
|
|
- disposeLogList: []
|
|
|
- }
|
|
|
- }
|
|
|
+ platformReply: "",
|
|
|
+ disposeLogList: [],
|
|
|
+ },
|
|
|
+ };
|
|
|
},
|
|
|
computed: {
|
|
|
complaintStatusText() {
|
|
|
const status = this.complaintInfo.complaintsStatus;
|
|
|
const statusMap = {
|
|
|
- "0": '未投诉过',
|
|
|
- "1": '待处理',
|
|
|
- "2": '处理中',
|
|
|
- "3": '已完结'
|
|
|
+ 0: "未投诉过",
|
|
|
+ 1: "待处理",
|
|
|
+ 2: "处理中",
|
|
|
+ 3: "已完结",
|
|
|
};
|
|
|
- return statusMap[status] || '未知状态';
|
|
|
- }
|
|
|
+ return statusMap[status] || "未知状态";
|
|
|
+ },
|
|
|
},
|
|
|
onLoad(ops) {
|
|
|
if (ops.orderId) {
|
|
|
- this.orderId = ops.orderId
|
|
|
- this.getComplaintInfo()
|
|
|
+ this.orderId = ops.orderId;
|
|
|
+ this.getComplaintInfo();
|
|
|
}
|
|
|
- this.getComplaintsOptions()
|
|
|
+ this.getComplaintsOptions();
|
|
|
},
|
|
|
methods: {
|
|
|
+ continueComplaint() {
|
|
|
+ this.showComplaintList = false;
|
|
|
+ },
|
|
|
// 获取投诉信息
|
|
|
getComplaintInfo() {
|
|
|
- uni.$u.http.get(`/token/order/getComplaintsInfo?orderId=${this.orderId}&type=1`)
|
|
|
- .then(res => {
|
|
|
- if (res.code === 200) {
|
|
|
- this.complaintInfo = res.data
|
|
|
- }
|
|
|
- })
|
|
|
+ uni.$u.http.get(`/token/order/getComplaintsInfo?orderId=${this.orderId}&type=1`).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.complaintInfo = res.data;
|
|
|
+ this.showComplaintList = res.data.complaintsStatus != 0;
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
//根据code获取字典 /token/common/getDictOptions
|
|
|
getDict(code) {
|
|
|
- return uni.$u.http.get('/token/common/getDictOptions?type=' + code)
|
|
|
+ return uni.$u.http.get("/token/common/getDictOptions?type=" + code);
|
|
|
},
|
|
|
//获取投诉选项 complaints_options
|
|
|
getComplaintsOptions() {
|
|
|
- this.getDict('complaints_options').then(res => {
|
|
|
+ this.getDict("complaints_options").then((res) => {
|
|
|
if (res.code === 200) {
|
|
|
- this.reasonList = res.data.map(item => item.dictLabel)
|
|
|
+ this.reasonList = res.data.map((item) => item.dictLabel);
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
showReasonPicker() {
|
|
|
- this.showPicker = true
|
|
|
+ this.showPicker = true;
|
|
|
},
|
|
|
confirmReason(e) {
|
|
|
- this.complaintReason = this.reasonList[e[0]]
|
|
|
- this.showPicker = false
|
|
|
+ this.complaintReason = this.reasonList[e[0]];
|
|
|
+ this.showPicker = false;
|
|
|
},
|
|
|
onUploaded(lists, name) {
|
|
|
- console.log(lists, name, 'xx111x')
|
|
|
+ console.log(lists, name, "xx111x");
|
|
|
},
|
|
|
afterRead(lists) {
|
|
|
// 先检查token是否存在
|
|
|
- const token = uni.getStorageSync('token');
|
|
|
+ const token = uni.getStorageSync("token");
|
|
|
|
|
|
- const uploadTasks = lists.map(item => {
|
|
|
+ const uploadTasks = lists.map((item) => {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
- console.log(item, env.apiUrl + `/api/token/order/complaintUpload/${this.orderId}`, 'xx111x')
|
|
|
+ console.log(item, env.apiUrl + `/api/token/order/complaintUpload/${this.orderId}`, "xx111x");
|
|
|
uni.uploadFile({
|
|
|
url: env.apiUrl + `/api/token/order/complaintUpload/${this.orderId}`,
|
|
|
filePath: item.url,
|
|
|
- name: 'file',
|
|
|
+ name: "file",
|
|
|
header: {
|
|
|
- Authorization: 'Bearer ' + token
|
|
|
+ Authorization: "Bearer " + token,
|
|
|
},
|
|
|
success: (res) => {
|
|
|
const result = JSON.parse(res.data);
|
|
|
if (result.code === 200 && result.data) {
|
|
|
resolve(result.data);
|
|
|
} else {
|
|
|
- uni.$u.toast(result.msg || '上传失败');
|
|
|
- reject(new Error(result.msg || '上传失败'));
|
|
|
+ uni.$u.toast(result.msg || "上传失败");
|
|
|
+ reject(new Error(result.msg || "上传失败"));
|
|
|
}
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
- uni.$u.toast('上传失败');
|
|
|
+ uni.$u.toast("上传失败");
|
|
|
reject(err);
|
|
|
- }
|
|
|
+ },
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
|
|
|
- Promise.all(uploadTasks).then(results => {
|
|
|
- this.uploadSuccessList = results.flat();
|
|
|
- this.fileList = lists;
|
|
|
- console.log(this.fileList, 'xx111x', results)
|
|
|
- }).catch(err => {
|
|
|
- console.error('Upload failed:', err);
|
|
|
- });
|
|
|
+ Promise.all(uploadTasks)
|
|
|
+ .then((results) => {
|
|
|
+ this.uploadSuccessList = results.flat();
|
|
|
+ this.fileList = lists;
|
|
|
+ console.log(this.fileList, "xx111x", results);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error("Upload failed:", err);
|
|
|
+ });
|
|
|
},
|
|
|
deletePic(event) {
|
|
|
- this.fileList.splice(event.index, 1)
|
|
|
+ this.fileList.splice(event.index, 1);
|
|
|
},
|
|
|
submitComplaint() {
|
|
|
if (!this.complaintReason) {
|
|
|
- return uni.$u.toast('请选择投诉原因')
|
|
|
+ return uni.$u.toast("请选择投诉原因");
|
|
|
}
|
|
|
if (!this.phone) {
|
|
|
- return uni.$u.toast('请输入联系方式')
|
|
|
+ return uni.$u.toast("请输入联系方式");
|
|
|
}
|
|
|
if (!this.description) {
|
|
|
- return uni.$u.toast('请输入投诉说明')
|
|
|
+ return uni.$u.toast("请输入投诉说明");
|
|
|
}
|
|
|
|
|
|
// 准备投诉数据
|
|
|
@@ -236,45 +280,44 @@ export default {
|
|
|
reason: this.complaintReason,
|
|
|
description: this.description,
|
|
|
contactNumber: this.phone,
|
|
|
- fileUrls: this.uploadSuccessList
|
|
|
- }
|
|
|
+ fileUrls: this.uploadSuccessList,
|
|
|
+ };
|
|
|
|
|
|
// 提交投诉
|
|
|
- uni.$u.http.post('/token/order/addComplaints', complaintData)
|
|
|
- .then(res => {
|
|
|
- if (res.code === 200) {
|
|
|
- uni.$u.toast('投诉上报已上报给管理员')
|
|
|
- // 返回订单页
|
|
|
- setTimeout(() => {
|
|
|
- uni.navigateBack({
|
|
|
- delta: 1
|
|
|
- })
|
|
|
- }, 1500)
|
|
|
- } else {
|
|
|
- uni.$u.toast(res.msg || '提交失败')
|
|
|
- }
|
|
|
- })
|
|
|
+ uni.$u.http.post("/token/order/addComplaints", complaintData).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ uni.$u.toast("投诉上报已上报给管理员");
|
|
|
+ // 返回订单页
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1,
|
|
|
+ });
|
|
|
+ }, 1500);
|
|
|
+ } else {
|
|
|
+ uni.$u.toast(res.msg || "提交失败");
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
// 图片预览
|
|
|
previewImage(urls, current) {
|
|
|
uni.previewImage({
|
|
|
urls: urls,
|
|
|
- current: current
|
|
|
+ current: current,
|
|
|
});
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.complaint-page {
|
|
|
min-height: 100vh;
|
|
|
- background: #F8F8F8;
|
|
|
+ background: #f8f8f8;
|
|
|
padding: 20rpx;
|
|
|
padding-bottom: 120rpx;
|
|
|
|
|
|
.status-block {
|
|
|
- background: #FFFFFF;
|
|
|
+ background: #ffffff;
|
|
|
border-radius: 12rpx;
|
|
|
padding: 30rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
@@ -287,7 +330,7 @@ export default {
|
|
|
|
|
|
.divider {
|
|
|
height: 2rpx;
|
|
|
- background: #EEEEEE;
|
|
|
+ background: #eeeeee;
|
|
|
margin: 20rpx 0;
|
|
|
}
|
|
|
|
|
|
@@ -308,7 +351,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.status-text {
|
|
|
- color: #FF5B5B;
|
|
|
+ color: #ff5b5b;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -316,7 +359,7 @@ export default {
|
|
|
|
|
|
.complaint-records {
|
|
|
.complaint-item {
|
|
|
- background: #FFFFFF;
|
|
|
+ background: #ffffff;
|
|
|
border-radius: 12rpx;
|
|
|
padding: 30rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
@@ -385,15 +428,15 @@ export default {
|
|
|
}
|
|
|
|
|
|
.form-block {
|
|
|
- background: #FFFFFF;
|
|
|
+ background: #ffffff;
|
|
|
border-radius: 12rpx;
|
|
|
padding: 0 30rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
|
|
|
.required::before {
|
|
|
- content: '*';
|
|
|
- color: #FF5B5B;
|
|
|
+ content: "*";
|
|
|
+ color: #ff5b5b;
|
|
|
margin-right: 4rpx;
|
|
|
}
|
|
|
|
|
|
@@ -419,4 +462,4 @@ export default {
|
|
|
background: #ffffff !important;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|