zhuangcheng/uni-wechat-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 订单详情

Browse Source
This commit is contained in:
zc 2025-12-04 00:25:51 +08:00
parent 07280fb3f7
commit 8d5168365d
5 changed files with 155 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
api/goods/index.js
View File

@ -62,3 +62,11 @@ export const apiAddCart = (data) => {
);
}
// 获取商品评价列表
export const apiGetCommentList = (data) => {
return httpRequest.post(
`${baseUrl}/comment/list`,
data
);
}

8
api/order.js
View File

@ -92,4 +92,12 @@ export const apiGetCartList = (data) => {
);
}
// 获取订单详情
export const apiGetOrderDetail = (data) => {
return httpRequest.post(
`${baseUrl}/order/detail`,
data
);
}

29
pages/goods/components/Comment.vue
View File

@ -16,19 +16,19 @@
<view class="comment-item_row dis-flex flex-y-center">
<view class="user-info dis-flex flex-y-center">
<view class="user-avatar">
<avatar-image :url="item.user.avatar_url" :width="50" />
<avatar-image :url="item.avatar" :width="50" />
</view>
<text class="user-name">{{ item.user.nick_name }}</text>
<text class="user-name">{{ item.buyerName }}</text>
</view>
<!-- 评星 -->
<view class="star-rating">
<!-- <view class="star-rating">
<u-rate active-color="#f4a213" :current="rates[item.score]" :disabled="true" />
</view>
</view> -->
</view>
<view class="item-content m-top20">
<text class="f-26 twoline-hide">{{ item.content }}</text>
<text class="f-26 twoline-hide">{{ item.productComment }}</text>
</view>
<view class="comment-time">{{ item.create_time }}</view>
<view class="comment-time">{{ new Date(item.createTime).toLocaleString() }}</view>
</view>
</view>
</view>
@ -38,6 +38,7 @@
<script>
import AvatarImage from '@/components/avatar-image'
import * as CommentApi from '@/api/comment'
import * as GoodsApi from '@/api/goods'
export default {
components: {
@ -74,18 +75,18 @@
},
methods: {
// 加载评价列表数据
getCommentList() {
const app = this
app.isLoading = true
CommentApi.listRows(app.goodsId, app.limit)
.then(result => {
app.list = result.data.list
app.total = result.data.total
})
.catch(err => err)
.finally(() => app.isLoading = false)
GoodsApi.apiGetCommentList({
productId: app.goodsId,
page: 1,
limit: app.limit
}).then(result => {
app.list = result.data
app.total = result.data.length
}).finally(() => app.isLoading = false)
},
// 跳转到评论列表页

274
pages/order/detail.vue
View File

@ -2,69 +2,40 @@
<view v-if="!isLoading" class="container" :style="appThemeStyle">
<view class="header">
<!-- 订单状态 -->
<view class="order-status">
<view class="status-icon">
<!-- 进行中的订单 -->
<block v-if="order.order_status == OrderStatusEnum.NORMAL.value">
<!-- 待支付 -->
<block v-if="order.pay_status == PayStatusEnum.PENDING.value">
<image class="image" src="/static/order/status/wait_pay.png" mode="aspectFit"></image>
</block>
<!-- 待发货 -->
<block v-else-if="order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
<image class="image" src="/static/order/status/wait_deliver.png" mode="aspectFit"></image>
</block>
<!-- 待收货 -->
<block v-else-if="order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value">
<image class="image" src="/static/order/status/wait_receipt.png" mode="aspectFit"></image>
</block>
</block>
<!-- 已完成 -->
<block v-if="order.order_status == OrderStatusEnum.COMPLETED.value">
<image class="image" src="/static/order/status/received.png" mode="aspectFit"></image>
</block>
<!-- 已取消/待取消 -->
<block v-if="order.order_status == OrderStatusEnum.CANCELLED.value || order.order_status == OrderStatusEnum.APPLY_CANCEL.value">
<image class="image" src="/static/order/status/close.png" mode="aspectFit"></image>
</block>
<image class="image" :src="iconMap[orderDetail.tradeOrderEntity.status]" mode="aspectFit"></image>
</view>
<view class="status-text">
<text>{{ order.state_text }}</text>
<text>{{ orderDetail.tradeOrderEntity.state_text }}</text>
</view>
</view>
<!-- 下一步操作 -->
<view class="next-action" v-if="order.order_status == OrderStatusEnum.NORMAL.value">
<view v-if="order.pay_status == PayStatusEnum.PENDING.value" class="action-btn" @click="onPay(order.order_id)">
<!-- <view class="next-action" v-if="['wait_pay', 'shipping', 'shipped', 'delivered'].includes(orderDetail.tradeOrderEntity.status)">
<view v-if="orderDetail.tradeOrderEntity.status == 'wait_pay'" class="action-btn" @click="onPay(order.order_id)">
去支付</view>
<view
v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value"
v-if="['shipping', 'shipped', 'delivered'].includes(orderDetail.tradeOrderEntity.status)"
class="action-btn" @click="onReceipt(order.order_id)">确认收货</view>
</view>
</view> -->
</view>
<view class="card-area">
<!-- 实物订单 -->
<block v-if="order.order_type == OrderTypeEnum.PHYSICAL.value">
<!-- 快递配送：配送地址 -->
<view v-if="order.delivery_type == DeliveryTypeEnum.EXPRESS.value" class="delivery-address i-card">
<view class="link-man">
<text class="name">{{ order.address.name }}</text>
<text class="phone">{{ order.address.phone }}</text>
</view>
<view class="address">
<text class="region" v-for="(region, idx) in order.address.region" :key="idx">{{ region }}</text>
<text class="detail">{{ order.address.detail }}</text>
</view>
</view>
</block>
<view class="delivery-address i-card">
<view class="link-man">
<text class="name">{{ orderDetail.tradeOrderEntity.buyerName }}</text>
<text class="phone">{{ orderDetail.tradeOrderEntity.buyerPhone }}</text>
</view>
<view class="address">
<text class="region" v-for="(region, idx) in orderDetail.tradeOrderEntity.region" :key="idx">{{ region }}</text>
<text class="detail">{{ orderDetail.tradeOrderEntity.buyerDetailAddress }}</text>
</view>
</view>
<!-- 物流信息 -->
<view v-if="order.delivery_type == DeliveryTypeEnum.EXPRESS.value
&& order.delivery_status == DeliveryStatusEnum.DELIVERED.value
&& order.delivery
&& order.delivery.length" class="express i-card" @click="handleTargetExpress()">
<view v-if="order.delivery.length > 1" class="main">
<view v-if="orderDetail.vvPackageEntity.trackNumber" class="express i-card" @click="handleTargetExpress()">
<!-- <view v-if="order.delivery.length > 1" class="main">
<view class="info-item">
<view class="item-content">
<text>订单已拆分多个包裹发货</text>
@ -75,21 +46,19 @@
<text>已发货{{ order.delivery.length }}个包裹</text>
</view>
</view>
</view>
<view v-else class="main">
</view> -->
<view class="main">
<view class="info-item">
<view class="item-lable">物流公司</view>
<view class="item-content">
<text
v-if="order.delivery[0].delivery_method != DeliveryMethodEnum.UNWANTED.value">{{ order.delivery[0].express ? order.delivery[0].express.express_name : '--' }}</text>
<text v-else>无需物流</text>
<text>{{ orderDetail.vvPackageEntity.logisticsCompany || '--' }}</text>
</view>
</view>
<view class="info-item">
<view class="item-lable">物流单号</view>
<view class="item-content">
<text>{{ order.delivery[0].express_no ? order.delivery[0].express_no : '--' }}</text>
<view v-if="order.delivery[0].express_no" class="act-copy" @click.stop="handleCopy(order.delivery[0].express_no)">
<text>{{ orderDetail.vvPackageEntity.trackNumber || '--' }}</text>
<view class="act-copy" @click.stop="handleCopy(orderDetail.vvPackageEntity.trackNumber)">
<text>复制</text>
</view>
</view>
@ -102,17 +71,17 @@
<!-- 商品列表 -->
<view class="goods-list i-card">
<view class="goods-item" v-for="(goods, idx) in order.goods" :key="idx">
<view class="goods-main" @click="handleTargetGoods(goods.goods_id)">
<view class="goods-item" v-for="(goods, idx) in orderDetail.vvTradeOrderLineDOList" :key="idx">
<view class="goods-main" @click="handleTargetGoods(goods.productId)">
<!-- 商品图片 -->
<view class="goods-image">
<image class="image" :src="goods.goods_image" mode="scaleToFill"></image>
<image class="image" :src="goods.productMainImageUrl" mode="scaleToFill"></image>
</view>
<!-- 商品信息 -->
<view class="goods-content">
<view class="goods-title"><text class="twoline-hide">{{ goods.goods_name }}</text></view>
<view class="goods-title"><text class="twoline-hide">{{ goods.productName }}</text></view>
<view class="goods-props clearfix">
<view class="goods-props-item" v-for="(props, idx) in goods.goods_props" :key="idx">
<view class="goods-props-item" v-for="(props, idx) in goods.skuInfo" :key="idx">
<text>{{ props.value.name }}</text>
</view>
</view>
@ -121,19 +90,19 @@
<view class="goods-trade">
<view class="goods-price">
<text class="unit">￥</text>
<text class="value">{{ goods.is_user_grade ? goods.grade_goods_price : goods.goods_price }}</text>
<text class="value">{{ goods.promotionPrice }}</text>
</view>
<view class="goods-num">
<text>×{{ goods.total_num }}</text>
<text>×{{ goods.num }}</text>
</view>
</view>
</view>
<!-- 商品售后 -->
<view class="goods-refund">
<!-- <view class="goods-refund">
<text v-if="goods.refund" class="stata-text">已申请售后</text>
<view v-else-if="order.isAllowRefund && goods.delivery_status == DeliveryStatusEnum.DELIVERED.value" class="action-btn"
@click.stop="handleApplyRefund(goods.order_goods_id)">申请售后</view>
</view>
</view> -->
</view>
</view>
@ -142,8 +111,8 @@
<view class="info-item">
<view class="item-lable">订单编号</view>
<view class="item-content">
<text>{{ order.order_no }}</text>
<view class="act-copy" @click="handleCopy(order.order_no)">
<text>{{ orderDetail.tradeOrderEntity.id }}</text>
<view class="act-copy" @click="handleCopy(orderDetail.tradeOrderEntity.id)">
<text>复制</text>
</view>
</view>
@ -151,13 +120,13 @@
<view class="info-item">
<view class="item-lable">下单时间</view>
<view class="item-content">
<text>{{ order.create_time }}</text>
<text>{{ orderDetail.tradeOrderEntity.createTime }}</text>
</view>
</view>
<view class="info-item">
<view class="item-lable">买家留言</view>
<view class="item-content">
<text>{{ order.buyer_remark ? order.buyer_remark : '--' }}</text>
<text>{{ orderDetail.tradeOrderEntity.remark || '--' }}</text>
</view>
</view>
</view>
@ -167,72 +136,50 @@
<view class="info-item">
<view class="item-lable">订单金额</view>
<view class="item-content">
<text>￥{{ order.total_price }}</text>
<text>￥{{ orderDetail.tradeOrderEntity.payAmount }}</text>
</view>
</view>
<view v-if="order.coupon_money > 0" class="info-item">
<!-- <view v-if="order.coupon_money > 0" class="info-item">
<view class="item-lable">优惠券抵扣</view>
<view class="item-content">
<text>-￥{{ order.coupon_money }}</text>
</view>
</view>
<view v-if="order.points_money > 0" class="info-item">
</view> -->
<!-- <view v-if="order.points_money > 0" class="info-item">
<view class="item-lable">{{ setting.points_name }}抵扣</view>
<view class="item-content">
<text>-￥{{ order.points_money }}</text>
</view>
</view>
</view> -->
<view class="info-item">
<view class="item-lable">运费</view>
<view class="item-content">
<text>+￥{{ order.express_price }}</text>
<text>+￥{{ 0 }}</text>
</view>
</view>
<view v-if="order.update_price.value != '0.00'" class="info-item">
<!-- <view v-if="order.update_price.value != '0.00'" class="info-item">
<view class="item-lable">后台改价</view>
<view class="item-content">
<text>{{ order.update_price.symbol }}</text>
<text>￥{{ order.update_price.value }}</text>
</view>
</view>
</view> -->
<view class="divider"></view>
<view class="trade-total">
<text class="lable">实付款</text>
<view class="goods-price">
<text class="unit">￥</text>
<text class="value">{{ order.pay_price }}</text>
<text class="value">{{ orderDetail.tradeOrderEntity.payAmount }}</text>
</view>
</view>
</view>
</view>
<!-- 底部操作按钮 -->
<view v-if="order.order_status != OrderStatusEnum.CANCELLED.value" class="footer-fixed">
<view v-if="!['apply_cancel', 'close', 'cancel', 'refund'].includes(orderDetail.tradeOrderEntity.status)" class="footer-fixed">
<view class="btn-wrapper">
<!-- 未支付取消订单 -->
<block v-if="order.pay_status == PayStatusEnum.PENDING.value">
<view class="btn-item" @click="onCancel(order.order_id)">取消</view>
</block>
<!-- 已支付进行中的订单 -->
<block v-if="order.order_status != OrderStatusEnum.APPLY_CANCEL.value">
<block v-if="order.pay_status == PayStatusEnum.SUCCESS.value && order.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
<view class="btn-item" @click="onCancel(order.order_id)">申请取消</view>
</block>
</block>
<!-- 已申请取消 -->
<view v-else class="f-28 col-8">取消申请中</view>
<!-- 未支付的订单 -->
<block v-if="order.pay_status == PayStatusEnum.PENDING.value">
<view class="btn-item active" @click="onPay(order.order_id)">去支付</view>
</block>
<!-- 确认收货 -->
<block
v-if="order.delivery_status == DeliveryStatusEnum.DELIVERED.value && order.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value">
<view class="btn-item active" @click="onReceipt(order.order_id)">确认收货</view>
</block>
<!-- 订单评价 -->
<block v-if="order.order_status == OrderStatusEnum.COMPLETED.value && order.is_comment == 0">
<view class="btn-item" @click="handleTargetComment(order.order_id)">评价</view>
<block v-for="(action, idx) in orderDetail.orderActionList" :key="idx">
<view :class="['btn-item', { 'active': ['pay', 'delivered', 'shipped'].some(key => action.interfaceUri.includes(key)) }]" @click="onClickBtn(item.tradeOrderEntity.tradeOrderId, action)">{{ action.desc }}</view>
</block>
</view>
</view>
@ -242,17 +189,6 @@
<script>
import { inArray } from '@/utils/util'
import {
OrderTypeEnum,
DeliveryStatusEnum,
DeliveryTypeEnum,
OrderStatusEnum,
PayStatusEnum,
ReceiptStatusEnum
} from '@/common/enum/order'
import ClientEnum from '@/common/enum/Client'
import { PayMethodEnum } from '@/common/enum/payment'
import { DeliveryMethodEnum } from '@/common/enum/order/delivery'
import * as OrderApi from '@/api/order'
// wx.onAppShow监听器
@ -261,37 +197,35 @@
export default {
data() {
return {
// 外部方法
inArray,
// 枚举类
OrderTypeEnum,
DeliveryStatusEnum,
DeliveryTypeEnum,
OrderStatusEnum,
PayStatusEnum,
ReceiptStatusEnum,
DeliveryMethodEnum,
PayMethodEnum,
// 当前订单ID
orderId: null,
// 加载中
isLoading: true,
// 当前订单详情
order: {},
// 当前设置
setting: {},
// 控制onShow事件是否刷新订单信息
canReset: false,
iconMap: {
'wait_pay': 'https://heyuimage.ihzhy.com/prd/202512/d268cca8c867391c.png?access_token=e01c8565446ad0448dfb6d9f69f3d562', // 待支付
'wait_shipping': 'https://heyuimage.ihzhy.com/prd/202512/1f21df64f11d66bf.png?access_token=e01c8565446ad0448dfb6d9f69f3d562', // 待发货
'shipping': 'https://heyuimage.ihzhy.com/prd/202512/db9f0abf7e5016c7.png?access_token=e01c8565446ad0448dfb6d9f69f3d562', // 已发货
'shipped': 'https://heyuimage.ihzhy.com/prd/202512/db9f0abf7e5016c7.png?access_token=e01c8565446ad0448dfb6d9f69f3d562', // 已发货
'delivered': 'https://heyuimage.ihzhy.com/prd/202512/db9f0abf7e5016c7.png?access_token=e01c8565446ad0448dfb6d9f69f3d562', // 已发货
'received': 'https://heyuimage.ihzhy.com/prd/202512/d4df8dfef7d7613f.png?access_token=e01c8565446ad0448dfb6d9f69f3d562', // 已收货
'apply_cancel': 'https://heyuimage.ihzhy.com/prd/202512/45505b3a13c5f5cb.png?access_token=e01c8565446ad0448dfb6d9f69f3d562', // 已取消
'cancel': 'https://heyuimage.ihzhy.com/prd/202512/45505b3a13c5f5cb.png?access_token=e01c8565446ad0448dfb6d9f69f3d562', // 已取消
'close': 'https://heyuimage.ihzhy.com/prd/202512/45505b3a13c5f5cb.png?access_token=e01c8565446ad0448dfb6d9f69f3d562', // 已取消
'refund': 'https://heyuimage.ihzhy.com/prd/202512/45505b3a13c5f5cb.png?access_token=e01c8565446ad0448dfb6d9f69f3d562', // 已取消
},
orderDetail: {
tradeOrderEntity: {},
vvTradeOrderLineDOList: [],
orderActionList: [],
vvPackageEntity: {}
}
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad({ orderId }) {
// 当前订单ID
this.orderId = orderId
// 获取当前订单信息
onLoad({ tradeOrderId }) {
this.orderId = tradeOrderId
this.getOrderDetail()
// 注册全局事件订阅: 是否刷新当前订单数据
uni.$on('syncRefresh', (val, isCur) => {
@ -323,17 +257,29 @@
},
methods: {
// 获取当前订单信息
getOrderDetail(canReset = false) {
const app = this
app.isLoading = true
OrderApi.detail(app.orderId)
.then(result => {
app.order = result.data.order
app.setting = result.data.setting
OrderApi.apiGetOrderDetail({ tradeOrderLineIdList: [app.orderId] }).then(res => {
const data = res.data[0]
const tradeOrderEntity = data.tradeOrderEntity
const status = data.vvTradeOrderLineDOList[0].status
tradeOrderEntity.status = status
tradeOrderEntity.state_text = { 'wait_pay': '待支付', 'wait_shipping': '待发货', 'shipping': '已发货', 'shipped': '已发货', 'delivered': '已发货', 'received': '已收货', 'apply_cancel': '已取消', 'cancel': '已取消', 'close': '已取消', 'refund': '已取消' }[status]
data.vvTradeOrderLineDOList = data.vvTradeOrderLineDOList.map(item => {
return {
...item,
skuInfo: JSON.parse(item.skuInfo)
}
})
tradeOrderEntity.region = []
tradeOrderEntity.region.push(tradeOrderEntity.province)
tradeOrderEntity.region.push(tradeOrderEntity.city)
tradeOrderEntity.region.push(tradeOrderEntity.district)
data.orderActionList = data.orderActionList.filter(item => item.interfaceUri.startsWith('/app'))
app.orderDetail = data
app.isLoading = false
})
})
// 相应全局事件订阅: 刷新上级页面数据
canReset && uni.$emit('syncRefresh', true, true)
},
@ -382,9 +328,26 @@
}
});
},
// 确认收货
async onReceipt(orderId) {
onReceipt(orderId, url) {
const app = this
uni.showModal({
title: '友情提示',
content: '确认要确认收货吗？',
success(o) {
if (o.confirm) {
OrderApi.apiActionOrder(url, { tradeOrderId: orderId })
.then(result => {
// 显示成功信息
app.$toast(result.msg)
// 刷新订单列表
app.onRefreshList()
})
}
}
});
},
// 确认收货
/* async onReceipt(orderId) {
const app = this
// 判断微信小程序端 - 同步发货信息管理
if (
@ -401,11 +364,11 @@
// 确认收货弹窗 (系统默认)
app.receiptModal(orderId)
}
},
}, */
// 确认收货弹窗 (微信小程序提供的用于同步发货信息管理)
// #ifdef MP-WEIXIN
openBusinessView() {
/* openBusinessView() {
const app = this
return new Promise((resolve, reject) => {
// 引导用户升级微信版本
@ -429,7 +392,7 @@
}
})
})
},
}, */
// 微信小程序确认收货组件 - 回调监听
listenerBusinessView() {
@ -461,7 +424,6 @@
}
})
},
// 确认收货事件
receiptEvent(orderId) {
const app = this
@ -473,19 +435,27 @@
setTimeout(() => app.getOrderDetail(true), 1500)
})
},
// 点击去支付
onPay(orderId) {
this.$navTo('pages/checkout/cashier/index', { orderId })
},
// 跳转到订单评价页
handleTargetComment(orderId) {
this.$navTo('pages/order/comment/index', { orderId })
},
},
onClickBtn(orderId, action) {
console.warn('----- my data is orderId, action: ', orderId, action)
if (action.interfaceUri === '/app/order/applyCancel') {
this.onCancel(orderId, action.interfaceUri)
} else if (action.interfaceUri.includes('/pay')) {
this.onPay(orderId)
} else if (action.interfaceUri.includes('/receipt')) {
this.onReceipt(orderId, action.interfaceUri)
} else if (action.interfaceUri.includes('/comment')) {
this.handleTargetComment(orderId)
}
}
}
</script>

3
pages/order/index.vue
View File

@ -124,7 +124,8 @@
status: 'shipping'
}, {
name: `待评价`,
value: 'comment'
value: 'comment',
status: 'wait_comment'
}]
// wx.onAppShow监听器