✨ 售后列表、详情:完成
parent
030dcfd461
commit
2d6cfdf53b
|
@ -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>
|
||||||
|
<text class="ss-iconfont _icon-forward" style="color: #666" />
|
||||||
</view>
|
</view>
|
||||||
<text class="ss-iconfont _icon-forward" style="color: #666"></text>
|
|
||||||
</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: {},
|
loading: false,
|
||||||
|
active: 0, // 在 list 的激活位置
|
||||||
list: [{
|
list: [{
|
||||||
title: '提交申请',
|
title: '提交申请',
|
||||||
},
|
}, {
|
||||||
{
|
|
||||||
title: '处理中',
|
title: '处理中',
|
||||||
},
|
}, {
|
||||||
],
|
title: '完成'
|
||||||
loading: false,
|
}], // 时间轴
|
||||||
});
|
});
|
||||||
|
|
||||||
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({
|
|
||||||
title: '提示',
|
|
||||||
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 = () => {
|
const onCopy = () => {
|
||||||
sheep.$helper.copyText(state.info.aftersale_sn);
|
sheep.$helper.copyText(state.info.no);
|
||||||
};
|
};
|
||||||
|
|
||||||
async function getDetail(id) {
|
async function getDetail(id) {
|
||||||
const {
|
|
||||||
code,
|
|
||||||
data
|
|
||||||
} = await sheep.$api.order.aftersale.detail(id);
|
|
||||||
state.loading = true;
|
state.loading = true;
|
||||||
if (code === 0) {
|
const { code, data } = await AfterSaleApi.getAfterSale(id);
|
||||||
state.info = data;
|
if (code !== 0) {
|
||||||
if (state.info.aftersale_status === -2 || state.info.aftersale_status === -1) {
|
|
||||||
state.list.push({
|
|
||||||
title: state.info.aftersale_status_text
|
|
||||||
});
|
|
||||||
state.active = 2;
|
|
||||||
} else {
|
|
||||||
state.list.push({
|
|
||||||
title: '完成'
|
|
||||||
});
|
|
||||||
state.active = state.info.aftersale_status;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
state.info = null;
|
state.info = null;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.info = data;
|
||||||
|
handleAfterSaleButtons(state.info);
|
||||||
|
|
||||||
|
// 处理时间轴
|
||||||
|
if ([10].includes(state.info.status)) {
|
||||||
|
state.active = 0;
|
||||||
|
} else if ([20, 30].includes(state.info.status)) {
|
||||||
|
state.active = 1;
|
||||||
|
} else if ([40, 50].includes(state.info.status)) {
|
||||||
|
state.active = 2;
|
||||||
|
} else if ([61, 62, 63].includes(state.info.status)) {
|
||||||
|
state.active = 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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>
|
||||||
|
|
|
@ -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>
|
|
||||||
<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>
|
</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,32 +121,13 @@
|
||||||
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>
|
||||||
|
|
||||||
|
|
|
@ -2,33 +2,52 @@
|
||||||
<template>
|
<template>
|
||||||
<s-layout title="订单详情" class="index-wrap" navbar="inner">
|
<s-layout title="订单详情" class="index-wrap" navbar="inner">
|
||||||
<!-- 订单状态 TODO -->
|
<!-- 订单状态 TODO -->
|
||||||
<view class="state-box ss-flex-col ss-col-center ss-row-right" :style="[
|
<view
|
||||||
|
class="state-box ss-flex-col ss-col-center ss-row-right"
|
||||||
|
:style="[
|
||||||
{
|
{
|
||||||
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
|
||||||
paddingTop: Number(statusBarHeight + 88) + 'rpx',
|
paddingTop: Number(statusBarHeight + 88) + 'rpx',
|
||||||
},
|
},
|
||||||
]">
|
]"
|
||||||
|
>
|
||||||
<view class="ss-flex ss-m-t-32 ss-m-b-20">
|
<view class="ss-flex ss-m-t-32 ss-m-b-20">
|
||||||
<image v-if="
|
<image
|
||||||
|
v-if="
|
||||||
state.orderInfo.status_code == 'unpaid' ||
|
state.orderInfo.status_code == 'unpaid' ||
|
||||||
state.orderInfo.status === 10 || // 待发货
|
state.orderInfo.status === 10 || // 待发货
|
||||||
state.orderInfo.status_code == 'nocomment'
|
state.orderInfo.status_code == 'nocomment'
|
||||||
" class="state-img" :src="sheep.$url.static('/static/img/shop/order/order_loading.png')">
|
"
|
||||||
|
class="state-img"
|
||||||
|
:src="sheep.$url.static('/static/img/shop/order/order_loading.png')"
|
||||||
|
>
|
||||||
</image>
|
</image>
|
||||||
<image v-if="
|
<image
|
||||||
|
v-if="
|
||||||
state.orderInfo.status_code == 'completed' ||
|
state.orderInfo.status_code == 'completed' ||
|
||||||
state.orderInfo.status_code == 'refund_agree'
|
state.orderInfo.status_code == 'refund_agree'
|
||||||
" class="state-img" :src="sheep.$url.static('/static/img/shop/order/order_success.png')">
|
"
|
||||||
|
class="state-img"
|
||||||
|
:src="sheep.$url.static('/static/img/shop/order/order_success.png')"
|
||||||
|
>
|
||||||
</image>
|
</image>
|
||||||
<image v-if="state.orderInfo.status_code == 'cancel' || state.orderInfo.status_code == 'closed'"
|
<image
|
||||||
class="state-img" :src="sheep.$url.static('/static/img/shop/order/order_close.png')">
|
v-if="state.orderInfo.status_code == 'cancel' || state.orderInfo.status_code == 'closed'"
|
||||||
|
class="state-img"
|
||||||
|
:src="sheep.$url.static('/static/img/shop/order/order_close.png')"
|
||||||
|
>
|
||||||
</image>
|
</image>
|
||||||
<image v-if="state.orderInfo.status_code == 'noget'" class="state-img"
|
<image
|
||||||
:src="sheep.$url.static('/static/img/shop/order/order_express.png')">
|
v-if="state.orderInfo.status_code == 'noget'"
|
||||||
|
class="state-img"
|
||||||
|
:src="sheep.$url.static('/static/img/shop/order/order_express.png')"
|
||||||
|
>
|
||||||
</image>
|
</image>
|
||||||
<view class="ss-font-30">{{ formatOrderStatus(state.orderInfo) }}</view>
|
<view class="ss-font-30">{{ formatOrderStatus(state.orderInfo) }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="ss-font-26 ss-m-x-20 ss-m-b-70">{{ formatOrderStatusDescription(state.orderInfo) }}</view>
|
<view class="ss-font-26 ss-m-x-20 ss-m-b-70">{{
|
||||||
|
formatOrderStatusDescription(state.orderInfo)
|
||||||
|
}}</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 收货地址 -->
|
<!-- 收货地址 -->
|
||||||
|
@ -44,7 +63,10 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="detail-goods" :style="[{ marginTop: state.orderInfo.receiverAreaId > 0 ? '0' : '-40rpx' }]">
|
<view
|
||||||
|
class="detail-goods"
|
||||||
|
:style="[{ marginTop: state.orderInfo.receiverAreaId > 0 ? '0' : '-40rpx' }]"
|
||||||
|
>
|
||||||
<!-- 订单信息 TODO 芋艿: -->
|
<!-- 订单信息 TODO 芋艿: -->
|
||||||
<view class="order-list" v-for="item in state.orderInfo.items" :key="item.goods_id">
|
<view class="order-list" v-for="item in state.orderInfo.items" :key="item.goods_id">
|
||||||
<view class="order-card">
|
<view class="order-card">
|
||||||
|
@ -58,29 +80,38 @@
|
||||||
>
|
>
|
||||||
<template #tool>
|
<template #tool>
|
||||||
<view class="ss-flex">
|
<view class="ss-flex">
|
||||||
<button class="ss-reset-button apply-btn" v-if="[10, 20, 30].includes(state.orderInfo.status) && item.afterSaleStatus === 0"
|
<button
|
||||||
|
class="ss-reset-button apply-btn"
|
||||||
|
v-if="[10, 20, 30].includes(state.orderInfo.status) && item.afterSaleStatus === 0"
|
||||||
@tap.stop="
|
@tap.stop="
|
||||||
sheep.$router.go('/pages/order/aftersale/apply', {
|
sheep.$router.go('/pages/order/aftersale/apply', {
|
||||||
orderId: state.orderInfo.id,
|
orderId: state.orderInfo.id,
|
||||||
itemId: item.id
|
itemId: item.id,
|
||||||
})
|
})
|
||||||
">
|
"
|
||||||
|
>
|
||||||
申请售后
|
申请售后
|
||||||
</button>
|
</button>
|
||||||
<button class="ss-reset-button apply-btn" v-if="item.afterSaleStatus === 10"
|
<button
|
||||||
|
class="ss-reset-button apply-btn"
|
||||||
|
v-if="item.afterSaleStatus === 10"
|
||||||
@tap.stop="
|
@tap.stop="
|
||||||
sheep.$router.go('/pages/order/aftersale/detail', {
|
sheep.$router.go('/pages/order/aftersale/detail', {
|
||||||
item: JSON.stringify(item),
|
id: item.afterSaleId,
|
||||||
})
|
})
|
||||||
">
|
"
|
||||||
|
>
|
||||||
退款中
|
退款中
|
||||||
</button>
|
</button>
|
||||||
<button class="ss-reset-button apply-btn" v-if="item.afterSaleStatus === 20"
|
<button
|
||||||
|
class="ss-reset-button apply-btn"
|
||||||
|
v-if="item.afterSaleStatus === 20"
|
||||||
@tap.stop="
|
@tap.stop="
|
||||||
sheep.$router.go('/pages/order/aftersale/detail', {
|
sheep.$router.go('/pages/order/aftersale/detail', {
|
||||||
id: item.ext.aftersale_id,
|
id: item.afterSaleId,
|
||||||
})
|
})
|
||||||
">
|
"
|
||||||
|
>
|
||||||
退款成功
|
退款成功
|
||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
|
@ -145,7 +176,10 @@
|
||||||
<text class="title">{{ state.orderInfo.payStatus ? '已付款' : '需付款' }}</text>
|
<text class="title">{{ state.orderInfo.payStatus ? '已付款' : '需付款' }}</text>
|
||||||
<text class="detail all-price">¥{{ fen2yuan(state.orderInfo.payPrice) }}</text>
|
<text class="detail all-price">¥{{ fen2yuan(state.orderInfo.payPrice) }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="notice-item all-rpice-item ss-flex ss-m-t-20" v-if="state.orderInfo.refundPrice > 0">
|
<view
|
||||||
|
class="notice-item all-rpice-item ss-flex ss-m-t-20"
|
||||||
|
v-if="state.orderInfo.refundPrice > 0"
|
||||||
|
>
|
||||||
<text class="title">已退款</text>
|
<text class="title">已退款</text>
|
||||||
<text class="detail all-price">¥{{ fen2yuan(state.orderInfo.refundPrice) }}</text>
|
<text class="detail all-price">¥{{ fen2yuan(state.orderInfo.refundPrice) }}</text>
|
||||||
</view>
|
</view>
|
||||||
|
@ -155,32 +189,51 @@
|
||||||
<!-- TODO: 查看物流、等待成团、评价完后返回页面没刷新页面 -->
|
<!-- TODO: 查看物流、等待成团、评价完后返回页面没刷新页面 -->
|
||||||
<su-fixed bottom placeholder bg="bg-white" v-if="state.orderInfo.buttons?.length">
|
<su-fixed bottom placeholder bg="bg-white" v-if="state.orderInfo.buttons?.length">
|
||||||
<view class="footer-box ss-flex ss-col-center ss-row-right">
|
<view class="footer-box ss-flex ss-col-center ss-row-right">
|
||||||
<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.buttons?.includes('cancel')"
|
<button
|
||||||
@tap="onCancel(state.orderInfo.id)">
|
class="ss-reset-button cancel-btn"
|
||||||
|
v-if="state.orderInfo.buttons?.includes('cancel')"
|
||||||
|
@tap="onCancel(state.orderInfo.id)"
|
||||||
|
>
|
||||||
取消订单
|
取消订单
|
||||||
</button>
|
</button>
|
||||||
<button class="ss-reset-button pay-btn ui-BG-Main-Gradient" v-if="state.orderInfo.buttons?.includes('pay')"
|
<button
|
||||||
@tap="onPay(state.orderInfo.payOrderId)">
|
class="ss-reset-button pay-btn ui-BG-Main-Gradient"
|
||||||
|
v-if="state.orderInfo.buttons?.includes('pay')"
|
||||||
|
@tap="onPay(state.orderInfo.payOrderId)"
|
||||||
|
>
|
||||||
继续支付
|
继续支付
|
||||||
</button>
|
</button>
|
||||||
<!-- TODO 芋艿:拼团接入 -->
|
<!-- TODO 芋艿:拼团接入 -->
|
||||||
<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.buttons?.includes('combination')" @tap="
|
<button
|
||||||
|
class="ss-reset-button cancel-btn"
|
||||||
|
v-if="state.orderInfo.buttons?.includes('combination')"
|
||||||
|
@tap="
|
||||||
sheep.$router.go('/pages/activity/groupon/detail', {
|
sheep.$router.go('/pages/activity/groupon/detail', {
|
||||||
id: state.orderInfo.ext.groupon_id,
|
id: state.orderInfo.ext.groupon_id,
|
||||||
})
|
})
|
||||||
">
|
"
|
||||||
|
>
|
||||||
拼团详情
|
拼团详情
|
||||||
</button>
|
</button>
|
||||||
<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.buttons?.includes('express')"
|
<button
|
||||||
@tap="onExpress(state.orderInfo.id)">
|
class="ss-reset-button cancel-btn"
|
||||||
|
v-if="state.orderInfo.buttons?.includes('express')"
|
||||||
|
@tap="onExpress(state.orderInfo.id)"
|
||||||
|
>
|
||||||
查看物流
|
查看物流
|
||||||
</button>
|
</button>
|
||||||
<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.buttons?.includes('confirm')"
|
<button
|
||||||
@tap="onConfirm(state.orderInfo.id)">
|
class="ss-reset-button cancel-btn"
|
||||||
|
v-if="state.orderInfo.buttons?.includes('confirm')"
|
||||||
|
@tap="onConfirm(state.orderInfo.id)"
|
||||||
|
>
|
||||||
确认收货
|
确认收货
|
||||||
</button>
|
</button>
|
||||||
<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.buttons?.includes('comment')"
|
<button
|
||||||
@tap="onComment(state.orderInfo.id, state.orderInfo)">
|
class="ss-reset-button cancel-btn"
|
||||||
|
v-if="state.orderInfo.buttons?.includes('comment')"
|
||||||
|
@tap="onComment(state.orderInfo.id, state.orderInfo)"
|
||||||
|
>
|
||||||
评价
|
评价
|
||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
|
@ -193,7 +246,12 @@
|
||||||
import { onLoad } from '@dcloudio/uni-app';
|
import { onLoad } from '@dcloudio/uni-app';
|
||||||
import { reactive } from 'vue';
|
import { reactive } from 'vue';
|
||||||
import { isEmpty } from 'lodash';
|
import { isEmpty } from 'lodash';
|
||||||
import { fen2yuan, formatOrderStatus, formatOrderStatusDescription, handleOrderButtons } from '@/sheep/hooks/useGoods';
|
import {
|
||||||
|
fen2yuan,
|
||||||
|
formatOrderStatus,
|
||||||
|
formatOrderStatusDescription,
|
||||||
|
handleOrderButtons,
|
||||||
|
} from '@/sheep/hooks/useGoods';
|
||||||
import OrderApi from '@/sheep/api/trade/order';
|
import OrderApi from '@/sheep/api/trade/order';
|
||||||
|
|
||||||
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
|
||||||
|
@ -220,7 +278,7 @@
|
||||||
// 查看商品
|
// 查看商品
|
||||||
function onGoodsDetail(id) {
|
function onGoodsDetail(id) {
|
||||||
sheep.$router.go('/pages/goods/index', {
|
sheep.$router.go('/pages/goods/index', {
|
||||||
id
|
id,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -307,7 +365,7 @@
|
||||||
function onComment(orderSN, orderId) {
|
function onComment(orderSN, orderId) {
|
||||||
sheep.$router.go('/pages/goods/comment/add', {
|
sheep.$router.go('/pages/goods/comment/add', {
|
||||||
orderSN,
|
orderSN,
|
||||||
orderId
|
orderId,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -323,7 +381,7 @@
|
||||||
}
|
}
|
||||||
if (res.code === 0) {
|
if (res.code === 0) {
|
||||||
state.orderInfo = res.data;
|
state.orderInfo = res.data;
|
||||||
handleOrderButtons(state.orderInfo)
|
handleOrderButtons(state.orderInfo);
|
||||||
} else {
|
} else {
|
||||||
sheep.$router.back();
|
sheep.$router.back();
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 截止时间
|
||||||
|
|
Loading…
Reference in New Issue