feat : 对接接口 - 商品订单列表

This commit is contained in:
赵毅 2025-07-18 16:50:37 +08:00
parent b027a8f8ce
commit 09e949af6f
2 changed files with 81 additions and 104 deletions

3
api/order.js Normal file
View File

@ -0,0 +1,3 @@
export const apiArr = {
orderList: '/api/v2/wechat/commodity/order', // 商品订单列表
}

View File

@ -17,26 +17,27 @@
<view v-for="(item, index) in orderData" :key="index"> <view v-for="(item, index) in orderData" :key="index">
<view class="contentList"> <view class="contentList">
<!-- 订单头部信息 --> <!-- 订单头部信息 -->
<view class="order-header" @click="toDetails(item.status)"> <view class="order-header" @click="toDetails(item.order_status)">
<text>提交订单{{ item.createTime }}</text> <text>提交订单{{ item.order_time }}</text>
<view <view
v-if="item.status == '已取消' || item.status == '已完成'" v-if="item.order_status == 6 || item.order_status == 5"
class="status3" class="status3"
>{{ item.status }}</view >{{ getOrderStatus(item.order_status) }}</view
> >
<view v-else-if="item.status == '退款中'" class="status2"> <view v-else-if="item.order_status == 7" class="status2">
<img <img src="http://localhost:8080/refund.png" />
src="http://localhost:8080/refund.png" {{ getOrderStatus(item.order_status) }}
/>
{{ item.status }}
</view> </view>
<view v-else class="status">{{ item.status }}</view> <view v-else class="order_status">{{
getOrderStatus(item.order_status)
}}</view>
</view> </view>
<!-- 商品列表 --> <!-- 商品列表 -->
<view class="goods-list" @click="toDetails(item.status)"> <view class="goods-list" @click="toDetails(item.order_status)">
<view <view
v-for="(goods, goodsIndex) in item.goodsList" v-for="(goods, goodsIndex) in item.commodity_order_item_list
.commodity_pic"
:key="goodsIndex" :key="goodsIndex"
class="goods-item" class="goods-item"
> >
@ -46,28 +47,30 @@
<!-- 订单底部信息 --> <!-- 订单底部信息 -->
<view class="order-footer"> <view class="order-footer">
<view class="order-footer-text" @click="toDetails(item.status)" <view
>{{ item.totalCount }}件商品共计 class="order-footer-text"
<text> {{ item.totalPrice }}</text> @click="toDetails(item.order_status)"
>{{ item.total_count }}件商品共计
<text> {{ item.total_amount }}</text>
</view> </view>
<view> <view>
<view class="btn-group" v-if="item.status === '待付款'"> <view class="btn-group" v-if="item.order_status === 1">
<button class="cancel-btn" @click="cancelOrder"> <button class="cancel-btn" @click="cancelOrder">
取消订单 取消订单
</button> </button>
<button class="yfd-btn" @click="cancelOrder">运费单</button> <button class="yfd-btn" @click="cancelOrder">运费单</button>
<button class="pay-btn" @click="goToPay">立即支付</button> <button class="pay-btn" @click="goToPay">立即支付</button>
</view> </view>
<view class="btn-group" v-if="item.status === '待发货'"> <view class="btn-group" v-if="item.order_status === 3">
<button class="yfd-btn" @click="cancelOrder">运费单</button> <button class="yfd-btn" @click="cancelOrder">运费单</button>
</view> </view>
<view class="btn-group" v-if="item.status === '已取消'"> <view class="btn-group" v-if="item.order_status === 6">
<button class="yfd-btn" @click="cancelOrder">运费单</button> <button class="yfd-btn" @click="cancelOrder">运费单</button>
<button class="pay-btn" @click="cancelOrder"> <button class="pay-btn" @click="cancelOrder">
再来一单 再来一单
</button> </button>
</view> </view>
<view class="btn-group" v-if="item.status === '配送中'"> <view class="btn-group" v-if="item.order_status === 4">
<button class="cancel-btn" @click="checkLogistics"> <button class="cancel-btn" @click="checkLogistics">
查看物流 查看物流
</button> </button>
@ -76,7 +79,7 @@
再来一单 再来一单
</button> </button>
</view> </view>
<view class="btn-group" v-if="item.status === '已完成'"> <view class="btn-group" v-if="item.order_status === 5">
<button class="cancel-btn" @click="orderEvaluate"> <button class="cancel-btn" @click="orderEvaluate">
服务评价 服务评价
</button> </button>
@ -85,7 +88,7 @@
再来一单 再来一单
</button> </button>
</view> </view>
<view class="btn-group" v-if="item.status === '退款中'"> <view class="btn-group" v-if="item.order_status === 7">
<button class="pay-btn" @click="cancelOrder"> <button class="pay-btn" @click="cancelOrder">
再来一单 再来一单
</button> </button>
@ -100,7 +103,8 @@
</view> </view>
</template> </template>
<script> <script>
import { picUrl, NavgateTo } from "../../../utils"; import { picUrl, NavgateTo, request } from "../../../utils";
import { apiArr } from "../../../api/order"
export default { export default {
data() { data() {
@ -113,91 +117,13 @@ export default {
{ category_name: "已完成" }, { category_name: "已完成" },
], ],
selectedTab: 0, selectedTab: 0,
orderData: [ orderData:[],
{
createTime: "2025-07-15 23:23:23",
status: "待付款",
goodsList: [
{ image: "http://localhost:8080/order_index1.png" },
{ image: "http://localhost:8080/order_index2.png" },
{ image: "http://localhost:8080/order_index3.png" },
{ image: "http://localhost:8080/order_index4.png" },
{ image: "http://localhost:8080/order_index5.png" },
],
totalCount: 1,
totalPrice: "¥4704.00",
},
{
createTime: "2025-07-15 23:23:23",
status: "待发货",
goodsList: [
{ image: "http://localhost:8080/order_index1.png" },
{ image: "http://localhost:8080/order_index2.png" },
{ image: "http://localhost:8080/order_index3.png" },
{ image: "http://localhost:8080/order_index4.png" },
{ image: "http://localhost:8080/order_index5.png" },
],
totalCount: 2,
totalPrice: "¥4704.00",
},
{
createTime: "2025-07-15 23:23:23",
status: "已取消",
goodsList: [
{ image: "http://localhost:8080/order_index1.png" },
{ image: "http://localhost:8080/order_index2.png" },
{ image: "http://localhost:8080/order_index3.png" },
{ image: "http://localhost:8080/order_index4.png" },
{ image: "http://localhost:8080/order_index5.png" },
],
totalCount: 3,
totalPrice: "¥4704.00",
},
{
createTime: "2025-07-15 23:23:23",
status: "配送中",
goodsList: [
{ image: "http://localhost:8080/order_index1.png" },
{ image: "http://localhost:8080/order_index2.png" },
{ image: "http://localhost:8080/order_index3.png" },
{ image: "http://localhost:8080/order_index4.png" },
{ image: "http://localhost:8080/order_index5.png" },
],
totalCount: 2,
totalPrice: "¥4704.00",
},
{
createTime: "2025-07-15 23:23:23",
status: "已完成",
goodsList: [
{ image: "http://localhost:8080/order_index1.png" },
{ image: "http://localhost:8080/order_index2.png" },
{ image: "http://localhost:8080/order_index3.png" },
{ image: "http://localhost:8080/order_index4.png" },
{ image: "http://localhost:8080/order_index5.png" },
],
totalCount: 3,
totalPrice: "¥4704.00",
},
{
createTime: "2025-07-15 23:23:23",
status: "退款中",
goodsList: [
{ image: "http://localhost:8080/order_index1.png" },
{ image: "http://localhost:8080/order_index2.png" },
{ image: "http://localhost:8080/order_index3.png" },
{ image: "http://localhost:8080/order_index4.png" },
{ image: "http://localhost:8080/order_index5.png" },
],
totalCount: 3,
totalPrice: "¥4704.00",
},
],
}; };
}, },
methods: { methods: {
selectTab(index, item) { selectTab(index, item) {
this.selectedTab = index; this.selectedTab = index;
this.getOrderList()
}, },
cancelOrder() { cancelOrder() {
// //
@ -214,8 +140,8 @@ export default {
goToPay() { goToPay() {
console.log("🚀 ~ goToPay ~ goToPay:", "去支付..."); console.log("🚀 ~ goToPay ~ goToPay:", "去支付...");
}, },
toDetails(status) { toDetails(order_status) {
NavgateTo(`/packages/myOrders/orderDetails/index?status=${status}`); NavgateTo(`/packages/myOrders/orderDetails/index?order_status=${order_status}`);
}, },
checkLogistics() { checkLogistics() {
@ -224,8 +150,56 @@ export default {
orderEvaluate(){ orderEvaluate(){
NavgateTo(`/packages/myOrders/orderEvaluate/index`); NavgateTo(`/packages/myOrders/orderEvaluate/index`);
},
getOrderStatus(order_status){
switch(order_status){
case 1:
return '待付款'
case 2:
return '支付中'
case 3:
return '待发货'
case 4:
return '配送中'
case 5:
return '已完成'
case 6:
return '已取消'
case 7:
return '退款中'
case 8:
return '已退款'
}
},
getOrderList(){
request(apiArr.orderList, "POST", {
user_id: uni.getStorageSync('userId')
}).then(res => {
const orderList = res.order_list || [];
let filteredData = orderList;
if (this.selectedTab !== 0) {
const statusMap = {
1: 1, //
2: 3, //
3: 4, //
4: 5 //
};
const targetStatus = statusMap[this.selectedTab];
if (targetStatus) {
filteredData = orderList.filter(item => item.order_status === targetStatus);
}
}
this.orderData = filteredData;
})
} }
}, },
onLoad(options) {
this.getOrderList();
},
}; };
</script> </script>
<style> <style>