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-01 23:25:05 +08:00
parent 0ac6b869bf
commit 9dfa9fd1a2
3 changed files with 132 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/goods/index.js
View File

@ -41,7 +41,7 @@ export const skuInfo = (goodsId, goodsSkuId, param) => {
// 获取商品列表
export const apiGetCommodityList = (data) => {
return httpRequest.post(
`${baseUrl}/app/index/page/list`,
`${baseUrl}/index/page/list`,
data
);
}

19
api/order.js
View File

@ -58,3 +58,22 @@ export const apiOrderAdd = (data) => {
data
);
}
// 获取订单列表
export const apiGetOrderList = (data) => {
return httpRequest.post(
`${baseUrl}/order/list`,
data
);
}
// 订单操作
export const apiActionOrder = (url, data) => {
url = url.startsWith('/app') ? url.substring(4) : url
return httpRequest.post(
`${baseUrl}${url}`,
data
);
}

173
pages/order/index.vue
View File

@ -9,25 +9,25 @@
<view class="order-item" v-for="(item, index) in list.data" :key="index">
<view class="item-top">
<view class="item-top-left">
<text class="order-time">{{ item.create_time }}</text>
<text class="order-time">{{ new Date(item.tradeOrderEntity.createTime).toLocaleString() }}</text>
</view>
<view class="item-top-right">
<text class="state-text">{{ item.state_text }}</text>
<text class="state-text">{{ item.tradeOrderEntity.statusText }}</text>
</view>
</view>
<!-- 商品列表 -->
<view class="goods-list" @click="handleTargetDetail(item.order_id)">
<view class="goods-item" v-for="(goods, idx) in item.goods" :key="idx">
<view class="goods-list" @click="handleTargetDetail(item.tradeOrderEntity.tradeOrderId)">
<view class="goods-item" v-for="(goods, idx) in item.vvTradeOrderLineDOList" :key="idx">
<!-- 商品图片 -->
<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">
<text>{{ props.value.name }}</text>
<view class="goods-props-item" v-for="(prop, idx) in goods.skuInfo" :key="idx">
<text>{{ prop }}</text>
</view>
</view>
</view>
@ -35,49 +35,50 @@
<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>
<!-- 订单合计 -->
<view class="order-total">
<text>共{{ item.total_num }}件商品，总金额</text>
<text>共{{ item.tradeOrderEntity.num }}件商品，总金额</text>
<text class="unit">￥</text>
<text class="money">{{ item.pay_price }}</text>
<text class="money">{{ item.tradeOrderEntity.payAmount }}</text>
</view>
<!-- 订单操作 -->
<view v-if="item.order_status != OrderStatusEnum.CANCELLED.value" class="order-handle">
<view class="btn-group clearfix">
<block v-for="(action, i) in item.orderActionList" :key="action.interfaceUri">
<view :class="['btn-item', i && 'active']" @click="onClickBtn(item.tradeOrderEntity.tradeOrderId, action)">{{ action.desc }}</view>
</block>
<!-- 未支付取消订单 -->
<block v-if="item.pay_status == PayStatusEnum.PENDING.value">
<!-- <block v-if="item.interfaceUri == PayStatusEnum.PENDING.value">
<view class="btn-item" @click="onCancel(item.order_id)">取消</view>
</block>
</block> -->
<!-- 已支付进行中的订单 -->
<block v-if="item.order_status != OrderStatusEnum.APPLY_CANCEL.value">
<!-- <block v-if="item.order_status != OrderStatusEnum.APPLY_CANCEL.value">
<block
v-if="item.pay_status == PayStatusEnum.SUCCESS.value && item.delivery_status == DeliveryStatusEnum.NOT_DELIVERED.value">
<view class="btn-item" @click="onCancel(item.order_id)">申请取消</view>
</block>
</block>
<!-- 已申请取消 -->
<view v-else class="f-28 col-8">取消申请中</view>
</block> -->
<!-- 未支付的订单 -->
<block v-if="item.pay_status == PayStatusEnum.PENDING.value">
<!-- <block v-if="item.pay_status == PayStatusEnum.PENDING.value">
<view class="btn-item active" @click="onPay(item.order_id)">去支付</view>
</block>
</block> -->
<!-- 确认收货 -->
<block
<!-- <block
v-if="item.delivery_status == DeliveryStatusEnum.DELIVERED.value && item.receipt_status == ReceiptStatusEnum.NOT_RECEIVED.value">
<view class="btn-item active" @click="onReceipt(index)">确认收货</view>
</block>
</block> -->
<!-- 订单评价 -->
<block v-if="item.order_status == OrderStatusEnum.COMPLETED.value && item.is_comment == 0">
<!-- <block v-if="item.order_status == OrderStatusEnum.COMPLETED.value && item.is_comment == 0">
<view class="btn-item" @click="handleTargetComment(item.order_id)">评价</view>
</block>
</block> -->
</view>
</view>
</view>
@ -107,16 +108,20 @@
// tab栏数据
const tabs = [{
name: `全部`,
value: 'all'
value: 'all',
status: ''
}, {
name: `待支付`,
value: 'payment'
value: 'wait_pay',
status: 'wait_pay'
}, {
name: `待发货`,
value: 'delivery'
value: 'wait_shipping',
status: 'wait_shipping'
}, {
name: `待收货`,
value: 'received'
value: 'shipping',
status: 'shipping'
}, {
name: `待评价`,
value: 'comment'
@ -138,7 +143,7 @@
ReceiptStatusEnum,
PayMethodEnum,
// 当前页面参数
options: { dataType: 'all', orderSource: null },
options: { dataType: 'all' },
// tab栏数据
tabs,
// 当前标签索引
@ -232,9 +237,8 @@
getOrderList(pageNo = 1) {
const app = this
return new Promise((resolve, reject) => {
OrderApi.list({
dataType: app.getTabValue(),
orderSource: app.options.orderSource,
/* OrderApi.list({
status: this.tabs[this.curTab].value,
page: pageNo,
}, { load: false })
.then(result => {
@ -242,6 +246,23 @@
const newList = app.initList(result.data.list)
app.list.data = getMoreListData(newList, app.list, pageNo)
resolve(newList)
}) */
OrderApi.apiGetOrderList({
status: app.tabs[app.curTab].status,
page: pageNo,
})
.then(result => {
const newList = result.data
newList.forEach(item => {
item.tradeOrderEntity.statusText = (app.tabs.find(tab => tab.value == item.vvTradeOrderLineDOList[0].status)|| {}).name
item.tradeOrderEntity.tradeOrderId = item.vvTradeOrderLineDOList[0].tradeOrderId
item.vvTradeOrderLineDOList.forEach(good => {
good.skuInfo = JSON.parse(good.skuInfo).map(sku => `${sku.propertyName}: ${sku.propertyValue}`)
})
item.orderActionList = item.orderActionList.filter(action => action.interfaceUri.startsWith('/app'))
})
app.list.data = getMoreListData({ data: newList }, app.list, pageNo)
resolve(newList)
})
})
},
@ -257,11 +278,6 @@
return newList
},
// 获取当前标签项的值
getTabValue() {
return this.tabs[this.curTab].value
},
// 切换标签项
onChangeTab(index) {
const app = this
@ -279,18 +295,31 @@
}, 120)
},
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)
}
},
// 取消订单
onCancel(orderId) {
onCancel(orderId, url) {
const app = this
uni.showModal({
title: '友情提示',
content: '确认要取消该订单吗？',
success(o) {
if (o.confirm) {
OrderApi.cancel(orderId)
OrderApi.apiActionOrder(url, { tradeOrderId: orderId })
.then(result => {
// 显示成功信息
app.$toast(result.message)
app.$toast(result.msg)
// 刷新订单列表
app.onRefreshList()
})
@ -298,7 +327,39 @@
}
});
},
// 点击去支付
onPay(orderId) {
this.$navTo('pages/checkout/cashier/index', { tradeOrderId: orderId })
},
// 跳转到订单详情页
handleTargetDetail(orderId) {
this.$navTo('pages/order/detail', { tradeOrderId: orderId })
},
// 跳转到订单评价页
handleTargetComment(orderId) {
this.$navTo('pages/order/comment/index', { tradeOrderId: 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(orderIndex) {
const app = this
@ -391,23 +452,7 @@
// 刷新订单列表
app.onRefreshList()
})
},
// 点击去支付
onPay(orderId) {
this.$navTo('pages/checkout/cashier/index', { orderId })
},
// 跳转到订单详情页
handleTargetDetail(orderId) {
this.$navTo('pages/order/detail', { orderId })
},
// 跳转到订单评价页
handleTargetComment(orderId) {
this.$navTo('pages/order/comment/index', { orderId })
}
}, */
},
}
@ -477,11 +522,14 @@
color: #ababab;
font-size: 24rpx;
overflow: hidden;
display: flex;
align-items: center;
gap: 10rpx;
.goods-props-item {
padding: 4rpx 16rpx;
border-radius: 12rpx;
background-color: #fcfcfc;
background-color: #f5f5f5;
}
}
@ -533,18 +581,21 @@
// 订单操作
.order-handle {
.btn-group {
display: flex;
align-items: center;
justify-content: flex-end;
.btn-item {
border-radius: 10rpx;
padding: 8rpx 20rpx;
margin-left: 15rpx;
margin-right: 15rpx;
font-size: 26rpx;
float: right;
float: left;
color: #383838;
border: 1rpx solid #a8a8a8;
&:last-child {
margin-left: 0;
margin-right: 0;
}
&.active {