From 6f3c5ceb630970b7ee75fe6165b6aa854815f770 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=AF=85?= <1335909236@qq.com>
Date: Tue, 15 Jul 2025 17:58:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=88=91=E7=9A=84=E8=AE=A2=E5=8D=95?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/myOrders/index/index.css | 125 +++++++++++++++++++++++++++
 packages/myOrders/index/index.vue | 138 ++++++++++++++++++++++++++++++
 pages.json                        |  11 +++
 pages/user/index.vue              |   2 +-
 4 files changed, 275 insertions(+), 1 deletion(-)
 create mode 100644 packages/myOrders/index/index.css
 create mode 100644 packages/myOrders/index/index.vue

diff --git a/packages/myOrders/index/index.css b/packages/myOrders/index/index.css
new file mode 100644
index 00000000..e484c0d9
--- /dev/null
+++ b/packages/myOrders/index/index.css
@@ -0,0 +1,125 @@
+page {
+    background-color: #f6f7fb;
+    padding-bottom: 0;
+    min-height: 100vh;
+}
+
+.tabs {
+    display: flex;
+    align-items: center;
+    background: #ffffff;
+    height: 100rpx;
+    padding: 0 20rpx;
+    box-sizing: border-box;
+}
+
+.tabItem {
+    font-size: 25rpx;
+    color: #222222;
+    margin-right: 60rpx;
+    height: 42rpx;
+}
+
+.active2 {
+    font-size: 25rpx;
+    font-weight: 700;
+    position: relative;
+}
+
+.active2::after {
+    content: '';
+    background: url(https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_active.png) no-repeat;
+    background-size: 100% 100%;
+    width: 52rpx;
+    height: 22rpx;
+    position: absolute;
+    left: 50%;
+    bottom: -16rpx;
+    transform: translateX(-50%);
+}
+
+.contentList {
+    margin: 20rpx;
+    min-height: 250rpx;
+    background-color: #ffffff;
+    border-radius: 20rpx;
+    padding: 10rpx;
+}
+
+.order-header {
+    display: flex;
+    justify-content: space-between;
+    padding: 20rpx;
+    font-size: 24rpx;
+    color: #a3a3a3;
+    border-bottom: 1rpx solid #eee;
+}
+
+.status {
+    color: #ff5252;
+    font-weight: bold;
+}
+
+.goods-list {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 15rpx;
+    gap: 15rpx;
+}
+
+.goods-item {
+    width: 120rpx;
+    height: 120rpx;
+}
+
+.goods-img {
+    width: 100%;
+    height: 100%;
+    border-radius: 8rpx;
+}
+
+.order-footer {
+    padding: 15rpx;
+    margin-top: 20rpx;
+    border-top: 1rpx solid #eee;
+}
+
+.order-footer-text {
+    font-size: 24rpx;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.order-footer-text text{
+    color: #ff3710;
+    margin-left: 10rpx;
+    font-weight: bold;
+}
+
+.btn-group {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 30rpx;
+}
+
+.cancel-btn {
+    width: 160rpx;
+    height: 60rpx;
+    background: #d9d9d9;
+    color: black;
+    border: 1rpx solid #ddd;
+    border-radius: 30rpx;
+    font-size: 24rpx;
+    margin: 0 20rpx;
+}
+
+.pay-btn {
+    width: 160rpx;
+    height: 60rpx;
+    background: #ff5252;
+    color: #fff;
+    border: none;
+    border-radius: 30rpx;
+    font-size: 24rpx;
+    margin: 0;
+}
\ No newline at end of file
diff --git a/packages/myOrders/index/index.vue b/packages/myOrders/index/index.vue
new file mode 100644
index 00000000..389c7fb2
--- /dev/null
+++ b/packages/myOrders/index/index.vue
@@ -0,0 +1,138 @@
+<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">
+              <!-- 订单头部信息 -->
+              <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>
+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: "/static/logo.png" },
+            { image: "/static/logo.png" },
+            { image: "/static/logo.png" },
+            { image: "/static/logo.png" },
+            { image: "/static/logo.png" },
+          ],
+          totalCount: 1,
+          totalPrice: "¥4704.00",
+        },
+        {
+          createTime: "2025-07-15 23:23:23",
+          status: "待发货",
+          goodsList: [
+            { image: "/static/logo.png" },
+            { image: "/static/logo.png" },
+            { image: "/static/logo.png" },
+            { image: "/static/logo.png" },
+            { image: "/static/logo.png" },
+          ],
+          totalCount: 2,
+          totalPrice: "¥4704.00",
+        },
+        {
+          createTime: "2025-07-15 23:23:23",
+          status: "已取消",
+          goodsList: [
+            { image: "/static/logo.png" },
+            { image: "/static/logo.png" },
+            { image: "/static/logo.png" },
+            { image: "/static/logo.png" },
+            { image: "/static/logo.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() {
+      // 跳转到支付页面
+      uni.navigateTo({
+        url: "/kitchen/pay/index",
+      });
+    },
+  },
+};
+</script>
+<style>
+@import url("./index.css");
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 86848ba4..3eb7100a 100644
--- a/pages.json
+++ b/pages.json
@@ -728,6 +728,17 @@
 					}
 				}
 			]
+		},
+		{
+			"root": "packages/myOrders",
+			"pages": [
+				{
+					"path": "index/index",
+					"style": {
+						"navigationBarTitleText": "我的订单"
+					}
+				}
+			]
 		}
 	],
 	"globalStyle": {
diff --git a/pages/user/index.vue b/pages/user/index.vue
index f5c6d686..fdeb9b26 100644
--- a/pages/user/index.vue
+++ b/pages/user/index.vue
@@ -140,7 +140,7 @@
 				networkList: [{
 						image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1568.png",
 						name: "我的订单",
-						url: "",
+						url: "/packages/myOrders/index/index",
 					},
 					{
 						image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/page_user_Group_1567.png",