mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2025-12-18 08:25:55 +08:00
commit message
This commit is contained in:
Chopper
223
pages/order/complain/complain.vue
Normal file
223
pages/order/complain/complain.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<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 }}
|
||||
<!-- <span>+{{ '1' }}积分</span> -->
|
||||
</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() }" upload-text="" :show-progress="false" :action="action" width="100" @on-uploaded="onUploaded" :max-count="5"></u-upload>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="submit-btn" @click="handleSumit">提交</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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: "",
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
console.log(option);
|
||||
this.loadData(option.sn);
|
||||
this.sn = option.sn;
|
||||
this.skuId = option.skuId;
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getReasion();
|
||||
},
|
||||
methods: {
|
||||
onUploaded(lists) {
|
||||
console.log(lists);
|
||||
let images = [];
|
||||
|
||||
lists.forEach((item) => {
|
||||
images.push(item.response.result);
|
||||
});
|
||||
|
||||
this.images = images;
|
||||
console.log(this.images);
|
||||
},
|
||||
// 提交
|
||||
handleSumit() {
|
||||
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;
|
||||
console.log(this.complainTopic);
|
||||
}
|
||||
});
|
||||
},
|
||||
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;
|
||||
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
confirmComplain(e) {
|
||||
console.log(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>
|
||||
169
pages/order/complain/complainInfo.vue
Normal file
169
pages/order/complain/complainInfo.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<view class="wrapper">
|
||||
<view class="tips">我的投诉信息</view>
|
||||
<u-cell-group>
|
||||
<u-cell-item
|
||||
:arrow="false"
|
||||
:value="detail.goodsName"
|
||||
title="投诉商品"
|
||||
></u-cell-item>
|
||||
<u-cell-item
|
||||
:arrow="false"
|
||||
:value="statusData[detail.complainStatus]"
|
||||
title="投诉状态"
|
||||
></u-cell-item>
|
||||
<u-cell-item
|
||||
:arrow="false"
|
||||
:value="detail.createTime"
|
||||
title="投诉时间"
|
||||
></u-cell-item>
|
||||
<u-cell-item
|
||||
:arrow="false"
|
||||
:value="detail.complainTopic"
|
||||
title="投诉主题"
|
||||
></u-cell-item>
|
||||
<u-cell-item
|
||||
:arrow="false"
|
||||
:value="detail.content"
|
||||
title="投诉内容"
|
||||
></u-cell-item>
|
||||
<view class="row" v-if="detail.orderComplaintImages">
|
||||
<u-image
|
||||
width="100rpx"
|
||||
height="100rpx"
|
||||
border-radius="10"
|
||||
style="margin: 0 10rpx"
|
||||
v-for="(item, index) in detail.orderComplaintImages"
|
||||
:key="index"
|
||||
:src="item"
|
||||
@click="preview(detail.orderComplaintImages, index)"
|
||||
/>
|
||||
</view>
|
||||
</u-cell-group>
|
||||
<view class="tips">商家申诉信息</view>
|
||||
<u-cell-group>
|
||||
<u-cell-item
|
||||
:arrow="false"
|
||||
:value="detail.appealTime || '暂无'"
|
||||
title="申诉时间"
|
||||
></u-cell-item>
|
||||
<u-cell-item
|
||||
:arrow="false"
|
||||
:value="detail.appealContent || '暂无'"
|
||||
title="申诉内容"
|
||||
></u-cell-item>
|
||||
<view class="row" v-if="detail.appealImagesList">
|
||||
<u-image
|
||||
width="100rpx"
|
||||
height="100rpx"
|
||||
border-radius="10"
|
||||
style="margin: 0 10rpx"
|
||||
v-for="(item, index) in detail.appealImagesList"
|
||||
@click="preview(detail.appealImagesList, index)"
|
||||
:key="index"
|
||||
:src="item"
|
||||
/>
|
||||
</view>
|
||||
</u-cell-group>
|
||||
<view class="tips">对话详情</view>
|
||||
<view class="speak-way" v-if="detail.orderComplaintCommunications">
|
||||
<view
|
||||
class="speak-msg seller"
|
||||
:key="i"
|
||||
v-for="(complaint, i) in detail.orderComplaintCommunications"
|
||||
>
|
||||
{{
|
||||
complaint.owner == "PLATFORM"
|
||||
? "平台"
|
||||
: complaint.owner == "BUYER"
|
||||
? "买家"
|
||||
: "卖家"
|
||||
}}：
|
||||
<span>{{ complaint.content }}</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="speak-way" v-else>暂无对话</view>
|
||||
<view class="tips">平台仲裁</view>
|
||||
<u-cell-group>
|
||||
<u-cell-item
|
||||
:arrow="false"
|
||||
title="仲裁意见"
|
||||
:value="detail.arbitrationResult || '暂无'"
|
||||
></u-cell-item>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getComplainDetail } from "@/api/after-sale";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
detail: "",
|
||||
|
||||
statusData: {
|
||||
NO_APPLY: "未申请",
|
||||
APPLYING: "申请中",
|
||||
COMPLETE: "已完成，此时可申请",
|
||||
EXPIRED: "已失效，不可申请",
|
||||
CANCEL: "已取消",
|
||||
},
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
this.init(option.id);
|
||||
},
|
||||
methods: {
|
||||
preview(urls, index) {
|
||||
uni.previewImage({
|
||||
current: index,
|
||||
urls: urls,
|
||||
longPressActions: {
|
||||
itemList: ["保存图片"],
|
||||
success: function (data) {},
|
||||
fail: function (err) {},
|
||||
},
|
||||
});
|
||||
},
|
||||
init(id) {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
getComplainDetail(id).then((res) => {
|
||||
if (res.data.success) {
|
||||
this.detail = res.data.result;
|
||||
|
||||
}
|
||||
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.speak-msg {
|
||||
padding: 26rpx 32rpx;
|
||||
> span {
|
||||
color: #999 !important;
|
||||
}
|
||||
}
|
||||
.admin {
|
||||
color: $main-color;
|
||||
}
|
||||
.speak-way {
|
||||
background: #fff;
|
||||
}
|
||||
.wrapper {
|
||||
padding: 16rpx;
|
||||
}
|
||||
.tips {
|
||||
margin: 40rpx 0;
|
||||
}
|
||||
</style>
|
||||
188
pages/order/complain/complainList.vue
Normal file
188
pages/order/complain/complainList.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<view>
|
||||
<view
|
||||
class="seller-view"
|
||||
v-for="(item, index) in complaionData"
|
||||
:key="index"
|
||||
>
|
||||
<view class="seller-info u-flex u-row-between">
|
||||
<view class="seller-name">
|
||||
<view class="name">{{ item.storeName }}</view>
|
||||
</view>
|
||||
<view class="order-sn">{{ statusData[item.complainStatus] }}</view>
|
||||
</view>
|
||||
<u-line color="#DCDFE6"></u-line>
|
||||
<view class="goods-item-view">
|
||||
<view class="goods-img" @click="handleToGoods(item)">
|
||||
<u-image
|
||||
border-radius="6"
|
||||
width="131rpx"
|
||||
height="131rpx"
|
||||
:src="item.goodsImage"
|
||||
></u-image>
|
||||
</view>
|
||||
<view class="goods-info" @click="handleToGoods(item)">
|
||||
<view class="goods-title u-line-2">{{ item.goodsName }}</view>
|
||||
<view class="goods-price">
|
||||
￥{{ item.goodsPrice | unitPrice }}
|
||||
<!-- <span>+{{ '1' }}积分</span> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-num">
|
||||
<view>x{{ item.num }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="complain-item-view">
|
||||
<view class="complain-time"> {{ item.createTime }} </view>
|
||||
<view class="complain-speak"> {{ item.complainTopic }} </view>
|
||||
</view>
|
||||
<view class="complain-btn">
|
||||
<u-tag
|
||||
mode="plain"
|
||||
@click="handleClear(item)"
|
||||
class="complain-tag"
|
||||
text="撤销投诉"
|
||||
type="info"
|
||||
v-if="
|
||||
item.complainStatus != 'EXPIRED' && item.complainStatus != 'CANCEL'
|
||||
"
|
||||
/>
|
||||
<u-tag
|
||||
mode="plain"
|
||||
@click="handleInfo(item)"
|
||||
class="complain-tag"
|
||||
text="投诉详情"
|
||||
type="info"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="empty" style="margin-top: 40rpx">
|
||||
<u-empty text="暂无投诉列表" mode="list"></u-empty>
|
||||
</view>
|
||||
<u-modal
|
||||
show-cancel-button
|
||||
@confirm="handleClearConfirm"
|
||||
v-model="show"
|
||||
:content="content"
|
||||
></u-modal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getComplain, clearComplain } from "@/api/after-sale";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusData: {
|
||||
NEW: "新订单",
|
||||
NO_APPLY: "未申请",
|
||||
APPLYING: "申请中",
|
||||
COMPLETE: "已完成",
|
||||
EXPIRED: "已失效",
|
||||
CANCEL: "已取消",
|
||||
},
|
||||
show: false,
|
||||
content: "是否撤销投诉？",
|
||||
params: {
|
||||
pageNumber: 1,
|
||||
pageSize: 20,
|
||||
// memberId: "",
|
||||
// memberName: "",
|
||||
},
|
||||
complaionData: [],
|
||||
empty: false,
|
||||
rows: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
onReachBottom() {
|
||||
this.params.pageNumber++;
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 点击跳转到商品
|
||||
handleToGoods(val) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/product/goods?id=" + val.skuId+"&goodsId="+val.goodsId,
|
||||
});
|
||||
},
|
||||
|
||||
// 撤销投诉
|
||||
handleClear(val) {
|
||||
console.log(val);
|
||||
this.show = true;
|
||||
this.rows = val;
|
||||
},
|
||||
handleClearConfirm() {
|
||||
clearComplain(this.rows.id).then((res) => {
|
||||
if (res.data.success) {
|
||||
uni.showToast({
|
||||
title: "撤销成功",
|
||||
duration: 2000,
|
||||
icon: "none",
|
||||
});
|
||||
this.complaionData = [];
|
||||
this.params.pageNumber = 1;
|
||||
this.init();
|
||||
}
|
||||
});
|
||||
},
|
||||
handleInfo(val) {
|
||||
uni.navigateTo({
|
||||
url: "./complainInfo?id=" + val.id,
|
||||
});
|
||||
},
|
||||
|
||||
init() {
|
||||
uni.showLoading({
|
||||
title: "加载中",
|
||||
});
|
||||
|
||||
getComplain(this.params).then((res) => {
|
||||
console.log(res);
|
||||
if (res.data.result.records.length >= 1) {
|
||||
this.complaionData.push(...res.data.result.records);
|
||||
} else {
|
||||
this.empty = true;
|
||||
}
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../goods.scss";
|
||||
|
||||
.complain-item-view {
|
||||
border-bottom: 2rpx solid #f5f7fa;
|
||||
border-top: 2rpx solid #f5f7fa;
|
||||
padding: 20rpx 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.complain-time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
/deep/ .seller-name {
|
||||
width: auto !important;
|
||||
}
|
||||
.complain-btn {
|
||||
padding: 20rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
.complain-tag {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user