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/23/head
落日晚风 2023-12-05 17:59:31 +08:00
parent 4030e40ebc
commit 648b1a6351
4 changed files with 623 additions and 655 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

280
pages/order/detail.vue
View File

@ -2,46 +2,29 @@
<template>
<s-layout title="订单详情" class="index-wrap" navbar="inner">
<!-- 订单状态 -->
<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',
paddingTop: Number(statusBarHeight + 88) + 'rpx',
},
]"
>
]">
<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 == 'nosend' ||
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
v-if="
<image v-if="
state.orderInfo.status_code == 'completed' ||
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
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 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
v-if="state.orderInfo.status_code == 'noget'"
class="state-img"
:src="sheep.$url.static('/static/img/shop/order/order_express.png')"
>
<image v-if="state.orderInfo.status_code == 'noget'" class="state-img"
:src="sheep.$url.static('/static/img/shop/order/order_express.png')">
</image>
<view class="ss-font-30">{{ state.orderInfo.status_text }}</view>
</view>
@ -63,77 +46,54 @@
<!-- 订单信息 -->
<view class="order-list" v-for="item in state.orderInfo.items" :key="item.goods_id">
<view class="order-card">
<s-goods-item
@tap="onGoodsDetail(item.goods_id)"
:img="item.goods_image"
:title="item.goods_title"
:skuText="item.goods_sku_text"
:price="item.goods_price"
:score="state.orderInfo.score_amount"
:num="item.goods_num"
>
<template #top>
<s-goods-item @tap="onGoodsDetail(item.goods_id)" :img="item.goods_image" :title="item.goods_title"
:skuText="item.goods_sku_text" :price="item.goods_price" :score="state.orderInfo.score_amount"
:num="item.goods_num">
<!-- <template #top>
<view class="order-item ss-flex ss-col-center ss-row-between ss-p-x-20 bg-white">
<view class="item-title">配送方式</view>
<view class="ss-flex ss-col-center">
<text class="item-value ss-m-r-20">{{ item.dispatch_type_text }}</text>
<button
class="ss-reset-button copy-btn"
@tap="onDetail(item)"
v-if="
<button class="ss-reset-button copy-btn" @tap="onDetail(item)" v-if="
(item.dispatch_type === 'autosend' || item.dispatch_type === 'custom') &&
item.dispatch_status !== 0
"
>详情</button
>
">详情</button>
</view>
</view>
</template>
<template #tool>
<view class="ss-flex">
<button
class="ss-reset-button apply-btn"
v-if="item.btns.includes('aftersale')"
<button class="ss-reset-button apply-btn" v-if="item.btns.includes('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('re_aftersale')"
<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')"
<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')"
<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>
@ -142,7 +102,7 @@
<button class="ss-reset-button tag-btn" v-if="item.status_text">
{{ item.status_text }}
</button>
</template>
</template> -->
</s-goods-item>
</view>
</view>
@ -176,19 +136,12 @@
<view class="notice-item ss-flex ss-row-between">
<text class="title">商品总额</text>
<view class="ss-flex">
<text class="detail" v-if="Number(state.orderInfo.goods_amount) > 0"
>￥{{ state.orderInfo.goods_amount }}</text
>
<view
v-if="state.orderInfo.score_amount && Number(state.orderInfo.goods_amount) > 0"
class="detail"
>+</view
>
<text class="detail"
v-if="Number(state.orderInfo.goods_amount) > 0">￥{{ state.orderInfo.goods_amount }}</text>
<view v-if="state.orderInfo.score_amount && Number(state.orderInfo.goods_amount) > 0"
class="detail">+</view>
<view class="price-text ss-flex ss-col-center" v-if="state.orderInfo.score_amount">
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="score-img"
></image>
<image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="score-img"></image>
<view class="detail">{{ state.orderInfo.score_amount }}</view>
</view>
</view>
@ -197,10 +150,7 @@
<text class="title">运费</text>
<text class="detail">￥{{ state.orderInfo.dispatch_amount }}</text>
</view>
<view
class="notice-item ss-flex ss-row-between"
v-if="state.orderInfo.total_discount_fee > 0"
>
<view class="notice-item ss-flex ss-row-between" v-if="state.orderInfo.total_discount_fee > 0">
<text class="title">优惠金额</text>
<text class="detail">¥{{ state.orderInfo.total_discount_fee }}</text>
</view>
@ -208,28 +158,17 @@
<text class="title">{{
['paid', 'completed'].includes(state.orderInfo.status) ? '已付款' : '需付款'
}}</text>
<text class="detail all-price" v-if="Number(state.orderInfo.pay_fee) > 0"
>￥{{ state.orderInfo.pay_fee }}</text
>
<view
v-if="
<text class="detail all-price"
v-if="Number(state.orderInfo.pay_fee) > 0">￥{{ state.orderInfo.pay_fee }}</text>
<view v-if="
state.orderInfo.score_amount &&
Number(state.orderInfo.pay_fee) > 0 &&
['paid', 'completed'].includes(state.orderInfo.status)
"
class="detail all-price"
>+</view
>
<view
class="price-text ss-flex ss-col-center"
v-if="
" class="detail all-price">+</view>
<view class="price-text ss-flex ss-col-center" v-if="
state.orderInfo.score_amount && ['paid', 'completed'].includes(state.orderInfo.status)
"
>
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="score-img"
></image>
">
<image :src="sheep.$url.static('/static/img/shop/goods/score1.svg')" class="score-img"></image>
<view class="detail all-price">{{ state.orderInfo.score_amount }}</view>
</view>
</view>
@ -243,65 +182,31 @@
<!-- TODO: 查看物流、等待成团、评价完后返回页面没刷新页面 -->
<su-fixed bottom placeholder bg="bg-white" v-if="state.orderInfo.btns?.length">
<view class="footer-box ss-flex ss-col-center ss-row-right">
<button
class="ss-reset-button cancel-btn"
v-if="state.orderInfo.btns?.includes('cancel')"
@tap="onCancel(state.orderInfo.id)"
>取消订单</button
>
<button
class="ss-reset-button pay-btn ui-BG-Main-Gradient"
v-if="state.orderInfo.btns?.includes('pay')"
@tap="onPay(state.orderInfo.order_sn)"
>继续支付</button
>
<button
class="ss-reset-button cancel-btn"
v-if="state.orderInfo.btns?.includes('apply_refund')"
@tap="onRefund(state.orderInfo.id)"
>申请退款</button
>
<button
class="ss-reset-button cancel-btn"
v-if="state.orderInfo.btns?.includes('groupon')"
@tap="
<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.btns?.includes('cancel')"
@tap="onCancel(state.orderInfo.id)">取消订单</button>
<button class="ss-reset-button pay-btn ui-BG-Main-Gradient" v-if="state.orderInfo.btns?.includes('pay')"
@tap="onPay(state.orderInfo.order_sn)">继续支付</button>
<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.btns?.includes('apply_refund')"
@tap="onRefund(state.orderInfo.id)">申请退款</button>
<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.btns?.includes('groupon')" @tap="
sheep.$router.go('/pages/activity/groupon/detail', {
id: state.orderInfo.ext.groupon_id,
})
"
>
">
{{ state.orderInfo.status_code === 'groupon_ing' ? '邀请拼团' : '拼团详情' }}
</button>
<button
class="ss-reset-button cancel-btn"
v-if="state.orderInfo.btns?.includes('express')"
@tap="onExpress(state.orderInfo.id)"
>查看物流</button
>
<button
class="ss-reset-button cancel-btn"
v-if="state.orderInfo.btns?.includes('confirm')"
@tap="onConfirm(state.orderInfo.id)"
>确认收货</button
>
<button
class="ss-reset-button cancel-btn"
v-if="state.orderInfo.btns?.includes('comment')"
@tap="onComment(state.orderInfo.order_sn)"
>评价晒单</button
>
<button
v-if="state.orderInfo.btns?.includes('invoice')"
class="ss-reset-button cancel-btn"
@tap.stop="onOrderInvoice(state.orderInfo.invoice?.id)"
>
<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.btns?.includes('express')"
@tap="onExpress(state.orderInfo.id)">查看物流</button>
<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.btns?.includes('confirm')"
@tap="onConfirm(state.orderInfo.id)">确认收货</button>
<button class="ss-reset-button cancel-btn" v-if="state.orderInfo.btns?.includes('comment')"
@tap="onComment(state.orderInfo.order_sn)">评价晒单</button>
<button v-if="state.orderInfo.btns?.includes('invoice')" class="ss-reset-button cancel-btn"
@tap.stop="onOrderInvoice(state.orderInfo.invoice?.id)">
查看发票
</button>
<button
v-if="state.orderInfo.btns?.includes('re_apply_refund')"
class="ss-reset-button cancel-btn"
@tap.stop="onRefund(state.orderInfo.id)"
>
<button v-if="state.orderInfo.btns?.includes('re_apply_refund')" class="ss-reset-button cancel-btn"
@tap.stop="onRefund(state.orderInfo.id)">
重新退款
</button>
</view>
@ -311,9 +216,16 @@
<script setup>
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';
import { computed, reactive } from 'vue';
import { isEmpty } from 'lodash';
import {
onLoad
} from '@dcloudio/uni-app';
import {
computed,
reactive
} from 'vue';
import {
isEmpty
} from 'lodash';
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
const headerBg = sheep.$url.css('/static/img/shop/order/order_bg.png');
@ -353,7 +265,9 @@
}
function onGoodsDetail(id) {
sheep.$router.go('/pages/goods/index', { id });
sheep.$router.go('/pages/goods/index', {
id
});
}
// 取消订单
@ -363,7 +277,10 @@
content: '确定要取消订单吗?',
success: async function(res) {
if (res.confirm) {
const { error, data } = await sheep.$api.order.cancel(orderId);
const {
error,
data
} = await sheep.$api.order.cancel(orderId);
if (error === 0) {
getOrderDetail(data.order_sn);
}
@ -379,7 +296,10 @@
content: '确定要申请退款吗?',
success: async function(res) {
if (res.confirm) {
const { error, data } = await sheep.$api.order.applyRefund(orderId);
const {
error,
data
} = await sheep.$api.order.applyRefund(orderId);
if (error === 0) {
getOrderDetail(data.order_sn);
}
@ -413,7 +333,10 @@
}
// 正常的确认收货流程
const { error, data } = await sheep.$api.order.confirm(orderId);
const {
error,
data
} = await sheep.$api.order.confirm(orderId);
if (error === 0) {
getOrderDetail(data.order_sn);
}
@ -475,6 +398,7 @@
});
}
async function getOrderDetail(id) {
// 对详情数据进行适配
let res = {};
if (state.comeinType === 'wechat') {
res = await sheep.$api.order.detail(id, {
@ -483,8 +407,41 @@
} else {
res = await sheep.$api.order.detail(id);
}
if (res.error === 0) {
console.log(res, '我的订单详情数据');
if (res.code === 0) {
let obj = {
10: ['待发货', '等待买家付款', ["apply_refund"]]
}
res.data.status_text = obj[res.data.status][0];
res.data.status_desc = obj[res.data.status][1];
res.data.btns = obj[res.data.status][2];
res.data.address = {
province_name: res.data.receiverAreaName.split(' ')[0],
district_name: res.data.receiverAreaName.split(' ')[2],
city_name: res.data.receiverAreaName.split(' ')[1],
address: res.data.receiverDetailAddress,
consignee: res.data.receiverName,
mobile: res.data.receiverMobile,
}
res.data.pay_fee = res.data.payPrice / 100
res.data.create_time = sheep.$helper.timeFormat(res.data.createTime, 'yyyy-mm-dd hh:MM:ss')
res.data.order_sn = res.data.no
res.data.goods_amount = res.data.totalPrice / 100
res.data.dispatch_amount = res.data.deliveryPrice / 100
res.data.pay_types_text = res.data.payChannelName.split(',')
res.data.items = res.data.items.map(ite => {
return {
...ite,
goods_title: ite.spuName,
goods_num: ite.count,
goods_price: ite.price / 100,
goods_image: ite.picUrl,
goods_sku_text: ite.properties.reduce((it0, it1) => it0 + it1.valueName + ' ', '')
}
})
state.orderInfo = res.data;
console.log(state.orderInfo, '修改后数据')
} else {
sheep.$router.back();
}
@ -512,6 +469,7 @@
height: 36rpx;
margin: 0 4rpx;
}
.apply-btn {
width: 140rpx;
height: 50rpx;
@ -521,6 +479,7 @@
line-height: normal;
margin-left: 16rpx;
}
.state-box {
color: rgba(#fff, 0.9);
width: 100%;
@ -528,6 +487,7 @@
linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
background-size: 750rpx 100%;
box-sizing: border-box;
.state-img {
width: 60rpx;
height: 60rpx;
@ -580,6 +540,7 @@
margin-right: 10rpx;
}
}
.tag-btn {
margin-left: 16rpx;
font-size: 24rpx;
@ -642,6 +603,7 @@
}
}
}
.copy-btn {
width: 100rpx;
line-height: 50rpx;

5
pages/order/list.vue
View File

@ -7,7 +7,7 @@
<s-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无订单"></s-empty>
<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"
:key="order.id" @tap="onOrderDetail(order.no)">
: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-no">订单号：{{ order.no }}</view>
<view class="order-state ss-font-26" :class="formatOrderColor(order.status_code)">{{
@ -15,7 +15,8 @@
}}</view>
</view>
<view class="border-bottom" v-for="item in order.items" :key="item.id">
<s-goods-item :img="item.picUrl" :title="item.spuName" :skuText="item.properties.length>1? item.properties.reduce((items2,items)=>items2.valueName+' '+items.valueName):item.properties[0].valueName"
<s-goods-item :img="item.picUrl" :title="item.spuName"
:skuText="item.properties.length>1? item.properties.reduce((items2,items)=>items2.valueName+' '+items.valueName):item.properties[0].valueName"
:price="item.price/100" :score="order.score_amount" :num="item.count">
<template #tool>
<view class="ss-flex">

22
sheep/api/order.js
View File

@ -4,11 +4,17 @@ import request2 from '@/sheep/request2';
export default {
// 订单详情
detail: (id, params) =>
request({
url: 'order/order/' + id,
request2({
url: 'trade/order/get-detail?id=' + id,
method: 'GET',
params,
}),
// detail: (id, params) =>
// request({
// url: 'order/order/' + id,
// method: 'GET',
// params,
// }),
// 发票详情
invoice: (id) =>
request({
@ -59,12 +65,12 @@ export default {
// 解决 SpringMVC 接受 List<Item> 参数的问题
delete data2.items
for (let i = 0; i < data.items.length; i++) {
data2['items[' + i + '' + '].skuId'] = data.items[i].skuId + '';
data2['items[' + i + '' + '].count'] = data.items[i].count + '';
data2['items[' + i + '' + '].cartId'] = data.items[i].cartId + '';
// data2['items' + `%5B${i}%5D` + '.skuId'] = data.items[i].skuId + '';
// data2['items' + `%5B${i}%5D` + '.count'] = data.items[i].count + '';
// data2['items' + `%5B${i}%5D` + '.cartId'] = data.items[i].cartId + '';
// data2['items[' + i + '' + '].skuId'] = data.items[i].skuId + '';
// data2['items[' + i + '' + '].count'] = data.items[i].count + '';
// data2['items[' + i + '' + '].cartId'] = data.items[i].cartId + '';
data2['items' + `%5B${i}%5D` + '.skuId'] = data.items[i].skuId + '';
data2['items' + `%5B${i}%5D` + '.count'] = data.items[i].count + '';
data2['items' + `%5B${i}%5D` + '.cartId'] = data.items[i].cartId + '';
}
console.log(data2, '对比数据')
return request2({

3
sheep/request2/index.js
View File

@ -55,8 +55,7 @@ const http = new Request({
method: 'GET',
header: {
Accept: 'text/json',
'Content-Type': 'application/json',
// ;charset=UTF-8
'Content-Type': 'application/json;charset=UTF-8',
platform: $platform.name,
},
// #ifdef APP-PLUS