<template>
|
<view>
|
<!-- 商品模块 -->
|
<view class="seller-view">
|
<view class="seller-info u-flex u-row-between">
|
<view class="seller-name">
|
<view class="name">{{ order.storeName || "" }}</view>
|
<view class="status">{{ orderStatusList[order.orderStatus] }}</view>
|
</view>
|
<view class="order-sn"></view>
|
</view>
|
<u-line color="#DCDFE6"></u-line>
|
<view class="goods-item-view" v-for="(sku, index) in orderGoodsList" :key="index" v-if="sku.skuId == skuId">
|
<view class="goods-img">
|
<u-image border-radius="6" width="131rpx" height="131rpx" :src="sku.image"></u-image>
|
</view>
|
<view class="goods-info">
|
<view class="goods-title u-line-2">{{ sku.goodsName }}</view>
|
<view class="goods-price">
|
￥{{ sku.flowPrice | unitPrice }}
|
</view>
|
</view>
|
<view class="goods-num">
|
<view>x{{ sku.num }}</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 投诉主题 -->
|
<u-select @confirm="confirmComplain" v-model="complainShow" :list="complainList"></u-select>
|
<!-- 投诉模块 -->
|
<view class="cell">
|
<view class="cell-item between" @click="complainShow = true">
|
<view class="cell-title"> 投诉主题 </view>
|
<view class="cell-view"> {{ complainTopic }} </view>
|
<u-icon style="margin-left: 20rpx" name="arrow-down"></u-icon>
|
</view>
|
|
<view class="cell-item complain-content">
|
<view class="cell-title title"> 投诉内容 </view>
|
<view class="cell-view content">
|
<u-input type="textarea" height="70rpx" auto-height v-model="complainValue" />
|
</view>
|
</view>
|
<view class="cell-item">
|
<view class="cell-title"> 投诉凭证 </view>
|
<view class="cell-view">
|
<u-upload ref="uUpload" :header=" { accessToken: storage.getAccessToken() }" :action="action" width="200" @on-uploaded="onUploaded" :max-count="5">
|
</u-upload>
|
</view>
|
</view>
|
</view>
|
|
<view class="submit-btn" @click="handleSubmit">提交</view>
|
</view>
|
</template>
|
|
<script>
|
import '@/components/uview-components/uview-ui'
|
import storage from "@/utils/storage.js";
|
import { getOrderDetail } from "@/api/order.js";
|
import { getComplainReason, addComplain } from "@/api/after-sale.js";
|
import { upload } from "@/api/common.js";
|
export default {
|
data() {
|
return {
|
storage,
|
action: upload, //上传图片地址
|
orderStatusList: {
|
//订单状态列表
|
UNDELIVERED: "待发货",
|
UNPAID: "未付款",
|
PAID: "已付款",
|
DELIVERED: "已发货",
|
CANCELLED: "已取消",
|
COMPLETE: "已完成",
|
TAKE: "已完成",
|
},
|
complainValue: "", //投诉内容
|
complainShow: false, //投诉主题开关
|
complainTopic: "", //投诉抱怨话题
|
complainList: [], // 投诉列表
|
images: [], //投诉内容图片
|
order: "", //订单
|
orderGoodsList: "", //订单商品
|
orderDetail: "", //订单详情
|
sn: "",
|
skuId: "", //商品skuid
|
};
|
},
|
|
onLoad(option) {
|
this.loadData(option.sn);
|
this.sn = option.sn;
|
this.skuId = option.skuId;
|
this.getReasion();
|
},
|
|
methods: {
|
/**
|
* 上传完成
|
*/
|
onUploaded(lists) {
|
let images = [];
|
lists.forEach((item) => {
|
images.push(item.response.result);
|
});
|
this.images = images;
|
},
|
/**
|
* 提交
|
*/
|
handleSubmit() {
|
if(!this.images.length && !this.complainValue){
|
uni.showToast({
|
title:'请上传图片凭证和投诉内容',
|
icon:'none'
|
})
|
return
|
|
}
|
// 循环出商品
|
let goods = this.orderGoodsList.filter((item) => {
|
return item.skuId == this.skuId;
|
});
|
//数据赋值
|
let data = {
|
complainTopic: this.complainTopic, //投诉主题,
|
content: this.complainValue, //投诉内容
|
goodsId: goods[0].goodsId, //商品id
|
images: this.images, //图片
|
orderSn: this.sn, //订单号
|
skuId: this.skuId, //skuid
|
};
|
addComplain(data).then((res) => {
|
if (res.data.success) {
|
uni.showToast({
|
title: "提交成功!",
|
duration: 2000,
|
icon: "none",
|
});
|
|
setTimeout(() => {
|
uni.redirectTo({
|
url: "/pages/order/complain/complainList",
|
});
|
}, 1000);
|
}
|
});
|
},
|
|
/**
|
* 获取投诉原因
|
*/
|
getReasion() {
|
getComplainReason().then((res) => {
|
if (res.data.result.length >= 1) {
|
res.data.result.forEach((item) => {
|
let way = {
|
value: item.reason,
|
label: item.reason,
|
};
|
this.complainList.push(way);
|
});
|
this.complainTopic = res.data.result[0].reason;
|
}
|
});
|
},
|
|
/**
|
* 加载订单详情
|
*/
|
loadData(sn) {
|
uni.showLoading({
|
title: "加载中",
|
});
|
getOrderDetail(sn).then((res) => {
|
const order = res.data.result;
|
this.order = order.order;
|
this.orderGoodsList = order.orderItems;
|
this.orderDetail = res.data.result;
|
if (this.$store.state.isShowToast){ uni.hideLoading() };
|
});
|
},
|
|
/**
|
* 确认投诉
|
*/
|
confirmComplain(e) {
|
this.complainTopic = e[0].label;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import "../goods.scss";
|
.cell {
|
width: 100%;
|
background: #fff;
|
padding: 26rpx;
|
}
|
.cell-item {
|
padding: 30rpx 0;
|
border-bottom: 2rpx solid #f5f7fa;
|
display: flex;
|
align-items: center;
|
}
|
.complain-content {
|
display: flex;
|
align-items: center;
|
.content {
|
width: 100%;
|
}
|
.title {
|
width: 140rpx;
|
}
|
}
|
|
/deep/ .u-input__textarea {
|
padding: 0;
|
}
|
.cell-title {
|
font-weight: bold;
|
margin-right: 20rpx;
|
}
|
.submit-btn {
|
width: 70%;
|
margin: 0 auto;
|
height: 80rpx;
|
line-height: 80rpx;
|
color: #fff;
|
text-align: center;
|
background: $light-color;
|
margin-top: 20px;
|
border-radius: 200px;
|
}
|
</style>
|
