yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

✨ 售后列表、详情：完成

pull/28/head
YunaiV 2023-12-14 19:44:01 +08:00
parent 030dcfd461
commit 2d6cfdf53b
6 changed files with 766 additions and 684 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
pages/order/aftersale/detail.vue
View File

@ -3,26 +3,22 @@
<s-layout title="售后详情" :navbar="!isEmpty(state.info) && state.loading ? 'inner' : 'normal'"> <s-layout title="售后详情" :navbar="!isEmpty(state.info) && state.loading ? 'inner' : 'normal'">
<view class="content_box" v-if="!isEmpty(state.info) && state.loading"> <view class="content_box" v-if="!isEmpty(state.info) && state.loading">
<!-- 步骤条 --> <!-- 步骤条 -->
<!-- 这个没找到替换方案 -->
<view class="steps-box ss-flex" :style="[ <view class="steps-box ss-flex" :style="[
{ {
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx', marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
paddingTop: Number(statusBarHeight + 88) + 'rpx', paddingTop: Number(statusBarHeight + 88) + 'rpx',
}, },
]"> ]">
<!-- <uni-steps :options="state.list" :active="state.active" active-color="#fff" /> -->
<view class="ss-flex"> <view class="ss-flex">
<view class="steps-item" v-for="(item, index) in state.list" :key="index"> <view class="steps-item" v-for="(item, index) in state.list" :key="index">
<view class="ss-flex"> <view class="ss-flex">
<text class="sicon-circleclose" v-if=" <text class="sicon-circleclose"
(state.list.length - 1 == index && state.info.aftersale_status === -2) || v-if="state.list.length - 1 === index && [61, 62, 63].includes(state.info.status)" />
(state.list.length - 1 == index && state.info.aftersale_status === -1)
"></text>
<text class="sicon-circlecheck" v-else <text class="sicon-circlecheck" v-else
:class="state.active >= index ? 'activity-color' : 'info-color'"></text> :class="state.active >= index ? 'activity-color' : 'info-color'" />
<view v-if="state.list.length - 1 != index" class="line" <view v-if="state.list.length - 1 !== index" class="line"
:class="state.active >= index ? 'activity-bg' : 'info-bg'"></view> :class="state.active >= index ? 'activity-bg' : 'info-bg'" />
</view> </view>
<view class="steps-item-title" :class="state.active >= index ? 'activity-color' : 'info-color'"> <view class="steps-item-title" :class="state.active >= index ? 'activity-color' : 'info-color'">
{{ item.title }} {{ item.title }}
@ -32,28 +28,33 @@
</view> </view>
<!-- 服务状态 --> <!-- 服务状态 -->
<!-- <view class="status-box ss-flex ss-col-center ss-row-between ss-m-x-20" <view class="status-box ss-flex ss-col-center ss-row-between ss-m-x-20"
@tap="sheep.$router.go('/pages/order/aftersale/log', { id: state.aftersaleId })"> @tap="sheep.$router.go('/pages/order/aftersale/log', { id: state.id })">
<view class=""> <view class="">
<view class="status-text">{{ state.info.aftersale_status_desc }}</view> <view class="status-text">
<view class="status-time">{{ state.info.update_time }}</view> {{ formatAfterSaleStatusDescription(state.info) }}
</view>
<view class="status-time">
{{ sheep.$helper.timeFormat(state.info.updateTime, 'yyyy-mm-dd hh:MM:ss') }}
</view>
</view> </view>
<text class="ss-iconfont _icon-forward" style="color: #666"></text> <text class="ss-iconfont _icon-forward" style="color: #666" />
</view> --> </view>
<!-- 退款金额 --> <!-- 退款金额 -->
<view class="aftersale-money ss-flex ss-col-center ss-row-between"> <view class="aftersale-money ss-flex ss-col-center ss-row-between">
<view class="aftersale-money--title">退款总额</view> <view class="aftersale-money--title">退款总额</view>
<view class="aftersale-money--num">￥{{ state.info.refundPrice/100 }}</view> <view class="aftersale-money--num">￥{{ fen2yuan(state.info.refundPrice) }}</view>
</view> </view>
<!-- 服务商品 --> <!-- 服务商品 -->
<view class="order-shop"> <view class="order-shop">
<!-- <s-goods-item :title="state.info.goods_title" :price="state.info.goods_price" <s-goods-item
:img="state.info.goods_image" priceColor="#333333" :titleWidth="480" :img=" state.info.picUrl"
:skuText="state.info.goods_sku_text" :num="state.info.goods_num"></s-goods-item> --> :title=" state.info.spuName"
<s-goods-item :img=" state.info.picUrl" :title=" state.info.spuName" priceColor="#333333" :titleWidth="480"
:titleWidth="480" :skuText=" state.info.properties.reduce((a,b)=>a+b.valueName+' ','')" :skuText="state.info.properties.map((property) => property.valueName).join(' ')"
:price=" state.info.refundPrice/100" :num=" state.info.count"></s-goods-item> :num=" state.info.count"
/>
</view> </view>
<!-- 服务内容 --> <!-- 服务内容 -->
@ -71,7 +72,7 @@
</view> </view>
<view class="aftersale-item ss-flex ss-col-center"> <view class="aftersale-item ss-flex ss-col-center">
<view class="item-title">售后类型：</view> <view class="item-title">售后类型：</view>
<view class="item-content">{{ status2[state.info.way] }}</view> <view class="item-content">{{ state.info.way === 10 ? '仅退款' : '退款退货' }}</view>
</view> </view>
<view class="aftersale-item ss-flex ss-col-center"> <view class="aftersale-item ss-flex ss-col-center">
<view class="item-title">申请原因：</view> <view class="item-title">申请原因：</view>
@ -83,114 +84,97 @@
</view> </view>
</view> </view>
</view> </view>
<!-- 操作区 -->
<s-empty v-if="isEmpty(state.info) && state.loading" icon="/static/order-empty.png" text="暂无该订单售后详情" /> <s-empty v-if="isEmpty(state.info) && state.loading" icon="/static/order-empty.png" text="暂无该订单售后详情" />
<!-- <su-fixed bottom placeholder bg="bg-white" v-if="!isEmpty(state.info)"> <su-fixed bottom placeholder bg="bg-white" v-if="!isEmpty(state.info)">
<view class="foot_box"> <view class="foot_box">
<button class="ss-reset-button btn" v-if="state.info.btns?.includes('cancel')" <!-- TODO 功能缺失：填写退货信息 -->
@tap="onApply(state.info.id)">取消申请</button> <button class="ss-reset-button btn" v-if="state.info.buttons?.includes('cancel')"
<button class="ss-reset-button btn" v-if="state.info.btns?.includes('delete')" @tap="onApply(state.info.id)">
@tap="onDelete(state.info.id)">删除</button> 取消申请
<button class="ss-reset-button contcat-btn btn" </button>
@tap="sheep.$router.go('/pages/chat/index')">联系客服</button> <button class="ss-reset-button contcat-btn btn" @tap="sheep.$router.go('/pages/chat/index')">
联系客服
</button>
</view> </view>
</su-fixed> --> </su-fixed>
</s-layout> </s-layout>
</template> </template>
<script setup> <script setup>
import sheep from '@/sheep'; import sheep from '@/sheep';
import { import { onLoad } from '@dcloudio/uni-app';
onLoad import { reactive } from 'vue';
} from '@dcloudio/uni-app'; import { isEmpty } from 'lodash';
import { import { fen2yuan, formatAfterSaleStatusDescription, handleAfterSaleButtons } from '@/sheep/hooks/useGoods';
reactive import AfterSaleApi from '@/sheep/api/trade/afterSale';
} from 'vue';
import {
isEmpty
} from 'lodash';
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2; const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png'); const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png');
const state = reactive({ const state = reactive({
active: 0, id: 0, // 售后编号
aftersaleId: 0, info: {}, // 收货信息
info: {},
list: [{
title: '提交申请',
},
{
title: '处理中',
},
],
loading: false, loading: false,
active: 0, // 在 list 的激活位置
list: [{
title: '提交申请',
}, {
title: '处理中',
}, {
title: '完成'
}], // 时间轴
}); });
const status2 = { function onApply(id) {
10: '仅退款',
20: '退货退款'
}
function onApply(orderId) {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
content: '确定要取消此申请吗？', content: '确定要取消此申请吗？',
success: async function(res) { success: async function(res) {
if (res.confirm) { if (!res.confirm) {
const { return;
error
} = await sheep.$api.order.aftersale.cancel(orderId);
if (error === 0) {
getDetail(state.aftersaleId);
}
} }
const { code } = await AfterSaleApi.cancelAfterSale(id);
if (code === 0) {
await getDetail(id);
}
}, },
}); });
} }
function onDelete(orderId) { // 复制
uni.showModal({ const onCopy = () => {
title: '提示', sheep.$helper.copyText(state.info.no);
content: '确定要删除吗？',
success: async function(res) {
if (res.confirm) {
const {
error
} = await sheep.$api.order.aftersale.delete(orderId);
if (error === 0) {
sheep.$router.back();
}
}
},
});
}
const onCopy = () => {
sheep.$helper.copyText(state.info.aftersale_sn);
}; };
async function getDetail(id) { async function getDetail(id) {
const { state.loading = true;
code, const { code, data } = await AfterSaleApi.getAfterSale(id);
data if (code !== 0) {
} = await sheep.$api.order.aftersale.detail(id); state.info = null;
state.loading = true; return;
if (code === 0) { }
state.info = data; state.info = data;
if (state.info.aftersale_status === -2 || state.info.aftersale_status === -1) { handleAfterSaleButtons(state.info);
state.list.push({
title: state.info.aftersale_status_text // 处理时间轴
}); if ([10].includes(state.info.status)) {
state.active = 2; state.active = 0;
} else { } else if ([20, 30].includes(state.info.status)) {
state.list.push({ state.active = 1;
title: '完成' } else if ([40, 50].includes(state.info.status)) {
}); state.active = 2;
state.active = state.info.aftersale_status; } else if ([61, 62, 63].includes(state.info.status)) {
} state.active = 2;
} else { }
state.info = null;
}
} }
onLoad((options) => { onLoad((options) => {
state.aftersaleId = options.id; if (!options.id) {
sheep.$helper.toast(`缺少订单信息，请检查`);
return
}
state.id = options.id;
getDetail(options.id); getDetail(options.id);
}); });
</script> </script>

165
pages/order/aftersale/list.vue
View File

@ -3,92 +3,73 @@
<s-layout title="售后列表"> <s-layout title="售后列表">
<!-- tab --> <!-- tab -->
<su-sticky bgColor="#fff"> <su-sticky bgColor="#fff">
<su-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab"></su-tabs> <su-tabs :list="tabMaps" :scrollable="false" @change="onTabsChange" :current="state.currentTab" />
</su-sticky> </su-sticky>
<s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无数据"> <s-empty v-if="state.pagination.total === 0" icon="/static/data-empty.png" text="暂无数据" />
</s-empty>
<!-- 列表 --> <!-- 列表 -->
<view v-if="state.pagination.total > 0"> <view v-if="state.pagination.total > 0">
<view class="list-box ss-m-y-20" v-for="order in state.pagination.data" :key="order.id" <view class="list-box ss-m-y-20" v-for="order in state.pagination.list" :key="order.id"
@tap="sheep.$router.go('/pages/order/aftersale/detail', { id: order.id })"> @tap="sheep.$router.go('/pages/order/aftersale/detail', { id: order.id })">
<view class="order-head ss-flex ss-col-center ss-row-between"> <view class="order-head ss-flex ss-col-center ss-row-between">
<text class="no">服务单号：{{ order.no }}</text> <text class="no">服务单号：{{ order.no }}</text>
<text class="state">{{ status[order.status] }}</text> <text class="state">{{ formatAfterSaleStatus(order) }}</text>
</view> </view>
<s-goods-item :img="order.picUrl" :title="order.spuName" <s-goods-item
:skuText="order.properties.reduce((a,b)=>a+b.valueName+' ','')" :price="order.refundPrice/100" :img="order.picUrl"
:num="order.count"></s-goods-item> :title="order.spuName"
:skuText="order.properties.map((property) => property.valueName).join(' ')"
:price="order.refundPrice"
/>
<view class="apply-box ss-flex ss-col-center ss-row-between border-bottom ss-p-x-20"> <view class="apply-box ss-flex ss-col-center ss-row-between border-bottom ss-p-x-20">
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
<!-- 此处需修改 --> <view class="title ss-m-r-20">{{ order.way === 10 ? '仅退款' : '退款退货' }}</view>
<view class="title ss-m-r-20">{{ status2[order.way] }}</view> <view class="value">{{ formatAfterSaleStatusDescription(order) }}</view>
<!-- <view class="value">{{ order.aftersale_status_desc }}</view> -->
<view class="value">{{ order.applyReason }}</view>
</view> </view>
<text class="_icon-forward"></text> <text class="_icon-forward"></text>
</view> </view>
<!-- <view class="tool-btn-box ss-flex ss-col-center ss-row-right ss-p-r-20"> <view class="tool-btn-box ss-flex ss-col-center ss-row-right ss-p-r-20">
<!-- TODO 功能缺失：填写退货信息 -->
<view> <view>
<button class="ss-reset-button tool-btn" @tap.stop="onApply(order.id)" <button class="ss-reset-button tool-btn" @tap.stop="onApply(order.id)"
v-if="order.btns.includes('cancel')">取消申请</button> v-if="order?.buttons.includes('cancel')">取消申请</button>
</view> </view>
<view> </view>
<button class="ss-reset-button tool-btn" @tap.stop="onDelete(order.id)"
v-if="order.btns.includes('delete')">删除</button>
</view>
</view> -->
</view> </view>
</view> </view>
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{ <uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
contentdown: '上拉加载更多', contentdown: '上拉加载更多',
}" @tap="loadmore" /> }" @tap="loadMore" />
</s-layout> </s-layout>
</template> </template>
<script setup> <script setup>
import sheep from '@/sheep'; import sheep from '@/sheep';
import { import { onLoad, onReachBottom } from '@dcloudio/uni-app';
onLoad, import { reactive } from 'vue';
onReachBottom
} from '@dcloudio/uni-app';
import {
computed,
reactive
} from 'vue';
import _ from 'lodash'; import _ from 'lodash';
import { formatAfterSaleStatus, formatAfterSaleStatusDescription, handleAfterSaleButtons } from '@/sheep/hooks/useGoods';
import AfterSaleApi from '@/sheep/api/trade/afterSale';
const pagination = { const paginationNull = {
data: [], list: [],
current_page: 1, total: 0,
total: 1, pageNo: 1,
last_page: 1, pageSize: 10
}; };
const state = reactive({ const state = reactive({
currentTab: 0, currentTab: 0,
showApply: false, showApply: false,
pagination: { pagination: {
data: [], list: [],
current_page: 1, total: 0,
total: 1, pageNo: 1,
last_page: 1, pageSize: 10
}, },
loadStatus: '', loadStatus: '',
}); });
// 字典需要登录 尚未接入 先用固定值代替
const status = { // TODO 芋艿：优化点，增加筛选
10: '申请售后',
20: '商品待退货',
30: '商家待收货',
40: '等待退款',
50: '退款成功',
61: '买家取消',
62: '商家拒绝',
63: '商家拒收货'
}
const status2 = {
10: '仅退款',
20: '退货退款'
}
const tabMaps = [{ const tabMaps = [{
name: '全部', name: '全部',
value: 'all', value: 'all',
@ -110,38 +91,29 @@
// value: 'refuse', // value: 'refuse',
// }, // },
]; ];
// 切换选项卡 // 切换选项卡
function onTabsChange(e) { function onTabsChange(e) {
state.pagination = pagination state.pagination = paginationNull
state.currentTab = e.index; state.currentTab = e.index;
getOrderList(); getOrderList();
} }
// 获取售后列表 // 获取售后列表
async function getOrderList(page = 1, list_rows = 5) { async function getOrderList() {
pagination.current_page = page;
state.loadStatus = 'loading'; state.loadStatus = 'loading';
let res = await sheep.$api.order.aftersale.list({ let { data, code } = await sheep.$api.order.aftersale.list({
// type: tabMaps[state.currentTab].value, // type: tabMaps[state.currentTab].value,
pageSize: list_rows, pageNo: state.pagination.pageNo,
pageNo: page, pageSize: state.pagination.pageSize,
}); });
console.log(res, '未处理前售后列表数据') if (code !== 0) {
if (res.code === 0) { return;
let orderList = _.concat(state.pagination.data, res.data.list);
state.pagination = {
total: res.data.total,
...res.data,
data: orderList,
};
console.log(state.pagination, '售后订单数据')
// if (state.pagination.current_page < state.pagination.last_page) {
state.loadStatus = 'more';
// } else {
// state.loadStatus = 'noMore';
// }
} }
data.list.forEach(order => handleAfterSaleButtons(order));
state.pagination.list = _.concat(state.pagination.list, data.list);
state.pagination.total = data.total;
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
} }
function onApply(orderId) { function onApply(orderId) {
@ -149,33 +121,14 @@
title: '提示', title: '提示',
content: '确定要取消此申请吗？', content: '确定要取消此申请吗？',
success: async function(res) { success: async function(res) {
if (res.confirm) { if (!res.confirm) {
const { return;
error
} = await sheep.$api.order.aftersale.cancel(orderId);
if (error === 0) {
state.pagination = pagination
getOrderList();
}
}
},
});
}
function onDelete(orderId) {
uni.showModal({
title: '提示',
content: '确定要删除吗？',
success: async function(res) {
if (res.confirm) {
const {
error
} = await sheep.$api.order.aftersale.delete(orderId);
if (error === 0) {
state.pagination = pagination
getOrderList();
}
} }
const { code } = await AfterSaleApi.cancelAfterSale(orderId);
if (code === 0) {
state.pagination = paginationNull
await getOrderList();
}
}, },
}); });
} }
@ -184,19 +137,21 @@
if (options.type) { if (options.type) {
state.currentTab = options.type; state.currentTab = options.type;
} }
getOrderList(); await getOrderList();
}); });
// 加载更多 // 加载更多
function loadmore() { function loadMore() {
// if (state.loadStatus !== 'noMore') { if (state.loadStatus === 'noMore') {
getOrderList(pagination.current_page + 1); return
// } }
state.pagination.pageNo++;
getOrderList();
} }
// 上拉加载更多 // 上拉加载更多
onReachBottom(() => { onReachBottom(() => {
loadmore(); loadMore();
}); });
</script> </script>

976
pages/order/detail.vue
View File

File diff suppressed because it is too large Load Diff

18
sheep/api/order.js
View File

@ -129,13 +129,6 @@ export default {
}), }),
// 售后 // 售后
aftersale: { aftersale: {
// 申请售后
apply: (data) =>
request({
url: 'order/aftersale',
method: 'POST',
data,
}),
list: (params) => list: (params) =>
request({ request({
url: '/app-api/trade/after-sale/page', url: '/app-api/trade/after-sale/page',
@ -145,15 +138,6 @@ export default {
showLoading: false, showLoading: false,
}, },
}), }),
// list: (params) =>
// request({
// url: 'order/aftersale',
// method: 'GET',
// params,
// custom: {
// showLoading: false,
// },
// }),
//取消售后 //取消售后
cancel: (id) => cancel: (id) =>
request({ request({
@ -166,7 +150,7 @@ export default {
url: 'order/aftersale/' + id, url: 'order/aftersale/' + id,
method: 'DELETE', method: 'DELETE',
}), }),
// 售后详情 // 售后详情 DONE
detail: (id) => detail: (id) =>
request({ request({
url: '/app-api/trade/after-sale/get?id=' + id, url: '/app-api/trade/after-sale/get?id=' + id,

20
sheep/api/trade/afterSale.js
View File

@ -10,6 +10,26 @@ const AfterSaleApi = {
data, data,
}); });
}, },
// 获得售后
getAfterSale: (id) => {
return request2({
url: `/app-api/trade/after-sale/get`,
method: 'GET',
params: {
id,
},
});
},
// 取消售后
cancelAfterSale: (id) => {
return request2({
url: `/app-api/trade/after-sale/cancel`,
method: 'DELETE',
params: {
id,
},
});
}
}; };
export default AfterSaleApi; export default AfterSaleApi;

81
sheep/hooks/useGoods.js
View File

@ -182,6 +182,87 @@ export function handleOrderButtons(order) {
} }
} }
/**
* 格式化售后状态
*
* @param afterSale 售后
*/
export function formatAfterSaleStatus(afterSale) {
if (afterSale.status === 10) {
return '申请售后';
}
if (afterSale.status === 20) {
return '商品待退货';
}
if (afterSale.status === 30) {
return '商家待收货';
}
if (afterSale.status === 40) {
return '等待退款';
}
if (afterSale.status === 50) {
return '退款成功';
}
if (afterSale.status === 61) {
return '买家取消';
}
if (afterSale.status === 62) {
return '商家拒绝';
}
if (afterSale.status === 63) {
return '商家拒收货';
}
return '未知状态';
}
/**
* 格式化售后状态的描述
*
* @param afterSale 售后
*/
export function formatAfterSaleStatusDescription(afterSale) {
if (afterSale.status === 10) {
return '退款申请待商家处理';
}
if (afterSale.status === 20) {
return '请退货并填写物流信息';
}
if (afterSale.status === 30) {
return '退货退款申请待商家处理';
}
if (afterSale.status === 40) {
return '等待退款';
}
if (afterSale.status === 50) {
return '退款成功';
}
if (afterSale.status === 61) {
return '退款关闭';
}
if (afterSale.status === 62) {
return `商家不同意退款申请，拒绝原因：${afterSale.auditReason}`;
}
if (afterSale.status === 63) {
return `商家拒绝收货，不同意退款，拒绝原因：${afterSale.auditReason}`;
}
return '未知状态';
}
/**
* 处理售后的 button 操作按钮数组
*
* @param afterSale 售后
*/
export function handleAfterSaleButtons(afterSale) {
afterSale.buttons = [];
if ([10, 20, 30].includes(afterSale.status)) { // 取消订单
afterSale.buttons.push('cancel');
}
if (afterSale.status === 20) { // 退货信息
afterSale.buttons.push('delivery');
}
}
/** /**
* 倒计时 * 倒计时
* @param toTime 截止时间 * @param toTime 截止时间