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

✨ 订单列表：接入 80%，部分操作待测试

pull/26/head^2
YunaiV 2023-12-12 23:26:02 +08:00
parent 4245164cae
commit 25a82c1812
2 changed files with 133 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

216
pages/order/list.vue
View File

@ -1,153 +1,72 @@
<!-- 页面 --> <!-- 订单列表 -->
<template> <template>
<s-layout title="我的订单"> <s-layout title="我的订单">
<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/order-empty.png" text="暂无订单"></s-empty> <s-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单" />
<view v-if="state.pagination.total > 0"> <view v-if="state.pagination.total > 0">
<view class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20" v-for="order in state.pagination.data" <view class="bg-white order-list-card-box ss-r-10 ss-m-t-14 ss-m-20" v-for="order in state.pagination.data"
:key="order.id" @tap="onOrderDetail(order.id)"> :key="order.id" @tap="onOrderDetail(order.id)">
<view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20"> <view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
<view class="order-no">订单号：{{ order.no }}</view> <view class="order-no">订单号：{{ order.no }}</view>
<view class="order-state ss-font-26" :class="formatOrderColor(order.status_code)">{{ <view class="order-state ss-font-26" :class="formatOrderColor(order)">
order.status {{ formatOrderStatus(order) }}
}}</view> </view>
</view> </view>
<view class="border-bottom" v-for="item in order.items" :key="item.id"> <view class="border-bottom" v-for="item in order.items" :key="item.id">
<s-goods-item :img="item.picUrl" :title="item.spuName" <s-goods-item
:skuText="item.properties.length>1? item.properties.reduce((items2,items)=>items2.valueName+' '+items.valueName):item.properties[0].valueName" :img="item.picUrl"
:price="item.price/100" :score="order.score_amount" :num="item.count"> :title="item.spuName"
<template #tool> :skuText="item.properties.map((property) => property.valueName).join(' ')"
<view class="ss-flex"> :price="item.price"
<!-- <button class="ss-reset-button apply-btn" v-if="item.btns.includes('aftersale')" :num="item.count"
@tap.stop=" />
sheep.$router.go('/pages/order/aftersale/apply', {
item: JSON.stringify(item),
})
">
申请售后
</button>
<button class="ss-reset-button apply-btn" v-if="item.btns.includes('re_aftersale')"
@tap.stop="
sheep.$router.go('/pages/order/aftersale/apply', {
item: JSON.stringify(item),
})
">
重新售后
</button>
<button class="ss-reset-button apply-btn" v-if="item.btns.includes('aftersale_info')"
@tap.stop="
sheep.$router.go('/pages/order/aftersale/detail', {
id: item.ext.aftersale_id,
})
">
售后详情
</button>
<button class="ss-reset-button apply-btn" v-if="item.btns.includes('buy_again')"
@tap.stop="
sheep.$router.go('/pages/goods/index', {
id: item.goods_id,
})
">
再次购买
</button> -->
</view>
</template>
</s-goods-item>
</view> </view>
<view class="pay-box ss-m-t-30 ss-flex ss-row-right ss-p-r-20"> <view class="pay-box ss-m-t-30 ss-flex ss-row-right ss-p-r-20">
<!-- <view v-if="order.total_discount_fee > 0" class="ss-flex ss-col-center ss-m-r-8">
<view class="discounts-title">优惠:￥</view>
<view class="discounts-money">{{ order.total_discount_fee }}</view>
</view> -->
<!-- <view class="ss-flex ss-col-center ss-m-r-8">
<view class="discounts-title">运费:￥</view>
<view class="discounts-money">{{ order.dispatch_amount }}</view>
</view> -->
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
<view class="discounts-title pay-color">共{{count}}件商品,总金额:</view> <view class="discounts-title pay-color">共 {{ order.productCount }} 件商品,总金额:</view>
<view class="discounts-money pay-color" v-if="Number(order.payPrice) > 0"> <view class="discounts-money pay-color">
￥{{ order.payPrice/100 }}</view> ￥{{ fen2yuan(order.payPrice) }}
<view v-if="order.score_amount && Number(order.payPrice) > 0">+</view>
<view class="discounts-money pay-color ss-flex ss-col-center" v-if="order.score_amount">
<image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="score-img">
</image>
<view>{{ order.score_amount }}</view>
</view> </view>
</view> </view>
</view> </view>
<!-- :class="order.btns.length > 3 ? 'ss-row-between' : 'ss-row-right'" --> <view class="order-card-footer ss-flex ss-col-center ss-p-x-20"
<view class="order-card-footer ss-flex ss-col-center ss-p-x-20"> :class="order.buttons.length > 3 ? 'ss-row-between' : 'ss-row-right'">
<!-- <su-popover>
<button class="more-btn ss-reset-button" @click.stop>更多</button>
<template #content>
<view class="more-item-box">
<view class="more-item ss-flex ss-col-center ss-reset-button">
<view class="item-title">删除订单</view>
</view>
<view class="more-item ss-flex ss-col-center ss-reset-button">
<view class="item-title">查看发票</view>
</view>
<view class="more-item ss-flex ss-col-center ss-reset-button">
<view class="item-title">评价晒单</view>
</view>
</view>
</template>
</su-popover> -->
<view class="ss-flex ss-col-center"> <view class="ss-flex ss-col-center">
<!-- <button v-if="order.btns.includes('groupon')" class="tool-btn ss-reset-button" <!-- TODO 芋艿：再次购买 -->
<button v-if="order.buttons.includes('combination')" class="tool-btn ss-reset-button"
@tap.stop="onOrderGroupon(order)"> @tap.stop="onOrderGroupon(order)">
{{ order.status_code === 'groupon_ing' ? '邀请拼团' : '拼团详情' }} 拼团详情
</button> </button>
<button v-if="order.btns.includes('invoice')" class="tool-btn ss-reset-button" <button v-if="order.buttons.length === 0" class="tool-btn ss-reset-button"
@tap.stop="onOrderInvoice(order.invoice?.id)"> @tap.stop="onOrderDetail(order.id)">
查看发票
</button>
<button v-if="order.btns.length === 0" class="tool-btn ss-reset-button"
@tap.stop="onOrderDetail(order.order_sn)">
查看详情 查看详情
</button> </button>
<button v-if="order.buttons.includes('confirm')" class="tool-btn ss-reset-button"
<button v-if="order.btns.includes('confirm')" class="tool-btn ss-reset-button"
@tap.stop="onConfirm(order)"> @tap.stop="onConfirm(order)">
确认收货 确认收货
</button> </button>
<button v-if="order.buttons.includes('express')" class="tool-btn ss-reset-button"
<button v-if="order.btns.includes('express')" class="tool-btn ss-reset-button"
@tap.stop="onExpress(order.id)"> @tap.stop="onExpress(order.id)">
查看物流 查看物流
</button> </button>
<button v-if="order.buttons.includes('cancel')" class="tool-btn ss-reset-button"
<button v-if="order.btns.includes('apply_refund')" class="tool-btn ss-reset-button"
@tap.stop="onRefund(order.id)">
申请退款
</button>
<button v-if="order.btns.includes('re_apply_refund')" class="tool-btn ss-reset-button"
@tap.stop="onRefund(order.id)">
重新退款
</button>
<button v-if="order.btns.includes('cancel')" class="tool-btn ss-reset-button"
@tap.stop="onCancel(order.id)"> @tap.stop="onCancel(order.id)">
取消订单 取消订单
</button> </button>
<button v-if="order.buttons.includes('comment')" class="tool-btn ss-reset-button"
<button v-if="order.btns.includes('comment')" class="tool-btn ss-reset-button"
@tap.stop="onComment(order.order_sn)"> @tap.stop="onComment(order.order_sn)">
评价晒单 评价
</button> </button>
<button v-if="order.buttons.includes('delete')" class="delete-btn ss-reset-button"
<button v-if="order.btns.includes('delete')" class="delete-btn ss-reset-button"
@tap.stop="onDelete(order.id)"> @tap.stop="onDelete(order.id)">
删除订单 删除订单
</button> </button>
<button v-if="order.buttons.includes('pay')" class="tool-btn ss-reset-button ui-BG-Main-Gradient"
<button v-if="order.btns.includes('pay')" class="tool-btn ss-reset-button ui-BG-Main-Gradient"
@tap.stop="onPay(order.order_sn)"> @tap.stop="onPay(order.order_sn)">
继续支付 继续支付
</button> --> </button>
</view> </view>
</view> </view>
</view> </view>
@ -171,7 +90,8 @@
onPullDownRefresh onPullDownRefresh
} from '@dcloudio/uni-app'; } from '@dcloudio/uni-app';
import { import {
formatOrderColor fen2yuan,
formatOrderColor, formatOrderStatus, handleOrderButtons,
} from '@/sheep/hooks/useGoods'; } from '@/sheep/hooks/useGoods';
import sheep from '@/sheep'; import sheep from '@/sheep';
import _ from 'lodash'; import _ from 'lodash';
@ -182,17 +102,16 @@
const pagination = { const pagination = {
data: [], data: [],
current_page: 1, current_page: 1,
total: 1, total: 1
last_page: 1,
}; };
// 数据 // 数据
const state = reactive({ const state = reactive({
currentTab: 0, currentTab: 0, // 选中的 tabMaps 下标
pagination: { pagination: {
data: [], data: [],
current_page: 1, current_page: 1,
total: 1, total: 1
last_page: 1,
}, },
loadStatus: '', loadStatus: '',
deleteOrderId: 0, deleteOrderId: 0,
@ -200,8 +119,7 @@
}); });
const tabMaps = [{ const tabMaps = [{
name: '全部', name: '全部'
// value: 'all',
}, },
{ {
name: '待付款', name: '待付款',
@ -232,44 +150,37 @@
} }
// 订单详情 // 订单详情
function onOrderDetail(orderSN) { function onOrderDetail(id) {
sheep.$router.go('/pages/order/detail', { sheep.$router.go('/pages/order/detail', {
orderSN, id,
}); });
} }
// 分享拼团 // 分享拼团 TODO 芋艿：待测试
function onOrderGroupon(order) { function onOrderGroupon(order) {
sheep.$router.go('/pages/activity/groupon/detail', { sheep.$router.go('/pages/activity/groupon/detail', {
id: order.ext.groupon_id, id: order.ext.groupon_id,
}); });
} }
// 查看发票 // 继续支付 TODO 芋艿：待测试
function onOrderInvoice(invoiceId) {
sheep.$router.go('/pages/order/invoice', {
invoiceId,
});
}
// 继续支付
function onPay(orderSN) { function onPay(orderSN) {
sheep.$router.go('/pages/pay/index', { sheep.$router.go('/pages/pay/index', {
orderSN, orderSN,
}); });
} }
// 评价 // 评价 TODO 芋艿：待测试
function onComment(orderSN) { function onComment(orderSN) {
sheep.$router.go('/pages/goods/comment/add', { sheep.$router.go('/pages/goods/comment/add', {
orderSN, orderSN,
}); });
} }
// 确认收货 // 确认收货 TODO 芋艿：待测试
async function onConfirm(order, ignore = false) { async function onConfirm(order, ignore = false) {
// 需开启确认收货组件 // 需开启确认收货组件
// todo: // todo: 芋艿：需要后续接入微信收货组件
// 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去 // 1.怎么检测是否开启了发货组件功能？如果没有开启的话就不能在这里return出去
// 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果 // 2.如果开启了走mpConfirm方法,需要在App.vue的show方法中拿到确认收货结果
let isOpenBusinessView = true; let isOpenBusinessView = true;
@ -284,13 +195,12 @@
} }
// 正常的确认收货流程 // 正常的确认收货流程
const { const {
error error
} = await sheep.$api.order.confirm(order.id); } = await sheep.$api.order.confirm(order.id);
if (error === 0) { if (error === 0) {
state.pagination = pagination; state.pagination = pagination;
getOrderList(); await getOrderList();
} }
} }
@ -326,14 +236,14 @@
} }
// #endif // #endif
// 查看物流 // 查看物流 TODO 芋艿：待测试
async function onExpress(orderId) { async function onExpress(orderId) {
sheep.$router.go('/pages/order/express/list', { sheep.$router.go('/pages/order/express/list', {
orderId, orderId,
}); });
} }
// 取消订单 // 取消订单 TODO 芋艿：待测试
async function onCancel(orderId) { async function onCancel(orderId) {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
@ -353,7 +263,7 @@
}); });
} }
// 删除订单 // 删除订单 TODO 芋艿：待测试
function onDelete(orderId) { function onDelete(orderId) {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
@ -373,30 +283,7 @@
}); });
} }
// 申请退款 // 获取订单列表 TODO 芋艿：待测试
async function onRefund(orderId) {
uni.showModal({
title: '提示',
content: '确定要申请退款吗?',
success: async function(res) {
if (res.confirm) {
// #ifdef MP
sheep.$platform.useProvider('wechat').subscribeMessage('order_refund');
// #endif
const {
error,
data
} = await sheep.$api.order.applyRefund(orderId);
if (error === 0) {
let index = state.pagination.data.findIndex((order) => order.id === orderId);
state.pagination.data[index] = data;
}
}
},
});
}
// 获取订单列表
async function getOrderList(page = 1, list_rows = 5) { async function getOrderList(page = 1, list_rows = 5) {
state.loadStatus = 'loading'; state.loadStatus = 'loading';
let res = await sheep.$api.order.list({ let res = await sheep.$api.order.list({
@ -407,6 +294,7 @@
}); });
state.error = res.code; state.error = res.code;
if (res.code === 0) { if (res.code === 0) {
res.data.list.forEach(order => handleOrderButtons(order));
let orderList = _.concat(state.pagination.data, res.data.list); let orderList = _.concat(state.pagination.data, res.data.list);
state.pagination = { state.pagination = {
...res.data, ...res.data,
@ -440,7 +328,7 @@
loadmore(); loadmore();
}); });
//下拉刷新 // 下拉刷新
onPullDownRefresh(() => { onPullDownRefresh(() => {
state.pagination = pagination; state.pagination = pagination;
getOrderList(); getOrderList();

85
sheep/hooks/useGoods.js
View File

@ -82,27 +82,78 @@ export function formatGoodsSwiper(urlList) {
/** /**
* 格式化订单状态的颜色 * 格式化订单状态的颜色
* @param type 订单类型 *
* @param order 订单
* @return {string} 颜色的 class 名称 * @return {string} 颜色的 class 名称
*/ */
export function formatOrderColor(type) { export function formatOrderColor(order) {
switch (type) { if (order.status === 0) {
case 'apply_refund':
case 'groupon_ing':
case 'nocomment':
case 'noget':
case 'nosend':
return 'warning-color';
case 'closed':
case 'groupon_invalid':
case 'cancel':
case 'refund_agree':
return 'danger-color';
case 'completed':
return 'success-color';
case 'unpaid':
return 'info-color'; return 'info-color';
} }
if (order.status === 10
|| order.status === 20
|| (order.status === 30 && !order.commentStatus)) {
return 'warning-color';
}
if (order.status === 30 && order.commentStatus) {
return 'success-color';
}
return 'danger-color';
}
/**
* 格式化订单状态
*
* @param order 订单
*/
export function formatOrderStatus(order) {
if (order.status === 0) {
return '待付款';
}
if (order.status === 10 && order.deliveryType === 1) {
return '待发货';
}
if (order.status === 10 && order.deliveryType === 2) {
return '待核销';
}
if (order.status === 20) {
return '待收货';
}
if (order.status === 30 && !order.commentStatus) {
return '待评价';
}
if (order.status === 30 && order.commentStatus) {
return '已完成';
}
return '已关闭';
}
/**
* 处理订单的 button 操作按钮数组
*
* @param order 订单
*/
export function handleOrderButtons(order) {
order.buttons = []
if (order.type === 3) { // 查看拼团
order.buttons.push('combination');
}
if (order.status === 20) { // 确认收货
order.buttons.push('confirm');
}
if (order.logisticsId > 0) { // 查看物流
order.buttons.push('express');
}
if (order.status === 0) { // 取消订单 / 发起支付
order.buttons.push('cancel');
order.buttons.push('pay');
}
if (order.status === 30 && !order.commentStatus) { // 发起评价
order.buttons.push('comment');
}
if (order.status === 40) { // 删除订单
order.buttons.push('delete');
}
} }
/** /**