140 lines
4.3 KiB
Vue
140 lines
4.3 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="tabs">
|
||
<view
|
||
v-for="(item, index) in categoryList"
|
||
:key="index"
|
||
:class="['tabItem', selectedTab === index ? 'active2' : '']"
|
||
@click="selectTab(index, item)"
|
||
>
|
||
{{ item.category_name }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content">
|
||
<view v-for="(category, catIndex) in categoryList" :key="catIndex">
|
||
<view v-if="selectedTab === catIndex">
|
||
<view v-for="(item, index) in orderData" :key="index">
|
||
<view class="contentList" @click="toDetails">
|
||
<!-- 订单头部信息 -->
|
||
<view class="order-header">
|
||
<text>提交订单：{{ item.createTime }}</text>
|
||
<text class="status">{{ item.status }}</text>
|
||
</view>
|
||
|
||
<!-- 商品列表 -->
|
||
<view class="goods-list">
|
||
<view
|
||
v-for="(goods, goodsIndex) in item.goodsList"
|
||
:key="goodsIndex"
|
||
class="goods-item"
|
||
>
|
||
<image :src="goods.image" class="goods-img"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单底部信息 -->
|
||
<view class="order-footer">
|
||
<view class="order-footer-text"
|
||
>共{{ item.totalCount }}件商品，共计
|
||
<text> {{ item.totalPrice }}</text>
|
||
</view>
|
||
<view class="btn-group">
|
||
<button class="cancel-btn" @click="cancelOrder">
|
||
取消订单
|
||
</button>
|
||
<button class="pay-btn" @click="goToPay">立即支付</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import { picUrl, NavgateTo } from '../../../utils';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
categoryList: [
|
||
{ category_name: "全部" },
|
||
{ category_name: "待付款" },
|
||
{ category_name: "待发货" },
|
||
{ category_name: "配送中" },
|
||
{ category_name: "已完成" },
|
||
],
|
||
selectedTab: 0,
|
||
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",
|
||
},
|
||
],
|
||
};
|
||
},
|
||
methods: {
|
||
selectTab(index, item) {
|
||
this.selectedTab = index;
|
||
},
|
||
cancelOrder() {
|
||
// 取消订单逻辑
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "确定要取消订单吗？",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 调用取消订单API
|
||
}
|
||
},
|
||
});
|
||
},
|
||
goToPay() {
|
||
console.log("🚀 ~ goToPay ~ goToPay:", "去支付...");
|
||
},
|
||
toDetails() {
|
||
NavgateTo("/packages/myOrders/orderDetails/index");
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style>
|
||
@import url("./index.css");
|
||
</style> |