From 5889bef48ee984bc4afac3859a496b164d436598 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E6=AF=85?= <1335909236@qq.com>
Date: Wed, 16 Jul 2025 10:15:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=88=91=E7=9A=84=E8=AE=A2=E5=8D=95=20-?=
 =?UTF-8?q?=20=E5=BE=85=E4=BB=98=E6=AC=BE=20=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/myOrders/index/index.vue        |  42 ++---
 packages/myOrders/orderDetails/index.css | 207 +++++++++++++++++++++++
 packages/myOrders/orderDetails/index.vue | 207 +++++++++++++++++++++++
 pages.json                               |   6 +
 4 files changed, 442 insertions(+), 20 deletions(-)
 create mode 100644 packages/myOrders/orderDetails/index.css
 create mode 100644 packages/myOrders/orderDetails/index.vue

diff --git a/packages/myOrders/index/index.vue b/packages/myOrders/index/index.vue
index 389c7fb2..6e6383c9 100644
--- a/packages/myOrders/index/index.vue
+++ b/packages/myOrders/index/index.vue
@@ -15,7 +15,7 @@
       <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="contentList" @click="toDetails">
               <!-- 订单头部信息 -->
               <view class="order-header">
                 <text>提交订单：{{ item.createTime }}</text>
@@ -54,6 +54,8 @@
   </view>
 </template>
 <script>
+import { picUrl, NavgateTo } from '../../../utils';
+
 export default {
   data() {
     return {
@@ -70,11 +72,11 @@ export default {
           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" },
+            { 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",
@@ -83,11 +85,11 @@ export default {
           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" },
+            { 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",
@@ -96,11 +98,11 @@ export default {
           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" },
+            { 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",
@@ -125,10 +127,10 @@ export default {
       });
     },
     goToPay() {
-      // 跳转到支付页面
-      uni.navigateTo({
-        url: "/kitchen/pay/index",
-      });
+      console.log("🚀 ~ goToPay ~ goToPay:", "去支付...");
+    },
+    toDetails() {
+      NavgateTo("/packages/myOrders/orderDetails/index");
     },
   },
 };
diff --git a/packages/myOrders/orderDetails/index.css b/packages/myOrders/orderDetails/index.css
new file mode 100644
index 00000000..779d9d76
--- /dev/null
+++ b/packages/myOrders/orderDetails/index.css
@@ -0,0 +1,207 @@
+/* 基础样式 */
+page {
+    background-color: #f6f7fb;
+}
+
+/* 顶部状态栏 */
+.status-bar {
+    background: linear-gradient(#ff5500, #f5f7fb);
+    color: white;
+    padding: 30rpx 20rpx 20rpx;
+    height: 350rpx;
+}
+
+.status {
+    font-size: 36rpx;
+    font-weight: bold;
+    margin-bottom: 10rpx;
+}
+
+.countdown {
+    font-size: 30rpx;
+    margin: 15rpx 0;
+}
+
+.tips {
+    font-size: 24rpx;
+    opacity: 0.9;
+}
+
+/* 订单金额 */
+.content {
+    margin: -180rpx 15rpx 14rpx;
+}
+
+.amount-section {
+    background: #ffffff;
+    padding: 30rpx 20rpx;
+    border-bottom: 1rpx solid #eee;
+    border-radius: 20rpx;
+}
+
+.total-amount {
+    font-size: 36rpx;
+    font-weight: bold;
+    margin-bottom: 10rpx;
+}
+
+.amount-desc,
+.original-price {
+    font-size: 24rpx;
+    color: #aaaaaa;
+    margin-bottom: 30rpx;
+}
+
+.original-price text {
+    font-size: 24rpx;
+    color: #333;
+    margin-left: 10rpx;
+    font-weight: bold;
+}
+
+/* 商品列表 */
+.goods-list {
+    background: #ffffff;
+    margin-top: 20rpx;
+    padding: 20rpx;
+}
+
+.goods-item {
+    display: flex;
+    margin-bottom: 20rpx;
+    margin-top: 20rpx;
+}
+
+.goods-img {
+    width: 120rpx;
+    height: 120rpx;
+    border-radius: 8rpx;
+    margin-right: 20rpx;
+}
+
+.goods-info {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.goods-info-right {
+    float: right;
+    color: #a0a0a0;
+}
+
+.goods-name {
+    font-size: 30rpx;
+    margin-bottom: 5rpx;
+}
+
+.goods-desc {
+    font-size: 24rpx;
+    color: #999;
+    margin-bottom: 10rpx;
+}
+
+.goods-price {
+    font-size: 28rpx;
+}
+
+/* 信息区块通用样式 */
+.order-info,
+.delivery-info,
+.recipient-info,
+.order-detail-info {
+    background: #ffffff;
+    margin-top: 20rpx;
+    padding: 20rpx;
+    border-radius: 20rpx;
+}
+
+.section-title {
+    font-size: 30rpx;
+    font-weight: bold;
+    margin-bottom: 20rpx;
+    color: #333;
+}
+
+.hr {
+    height: 1rpx;
+    margin: 20rpx 0;
+    background: #f5f7fb;
+}
+
+.info-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 15rpx 0;
+    border-bottom: 1rpx solid #f5f5f5;
+    font-size: 28rpx;
+}
+
+.info-item:last-child {
+    border-bottom: none;
+}
+
+.info-label1 {
+    font-size: 28rpx;
+    font-weight: bold;
+    margin-bottom: 20rpx;
+    color: #333;
+}
+
+.info-label {
+    color: #a7a7a7;
+    font-size: 26rpx;
+}
+
+.info-value {
+    color: #333;
+    font-size: 26rpx;
+}
+
+.info-value text{
+    color: #f64927;
+    font-size: 26rpx;
+    margin-left: 10rpx;
+}
+
+.info-action {
+    color: #a5a5a5;
+    margin-left: 20rpx;
+    font-size: 26rpx;
+}
+
+/* 底部按钮 */
+.bottom-buttons {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    background: #ffffff;
+    padding: 20rpx;
+    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
+}
+
+.cancel-btn {
+    flex: 1;
+    height: 80rpx;
+    background: #d9d9d9;
+    color: #333;
+    border: 1rpx solid #ddd;
+    border-radius: 8rpx;
+    margin-right: 20rpx;
+    font-size: 30rpx;
+    border-radius: 50rpx;
+}
+
+.pay-btn {
+    flex: 1;
+    height: 80rpx;
+    background: #FF5252;
+    color: white;
+    border: none;
+    border-radius: 8rpx;
+    font-size: 30rpx;
+    border-radius: 50rpx;
+}
\ No newline at end of file
diff --git a/packages/myOrders/orderDetails/index.vue b/packages/myOrders/orderDetails/index.vue
new file mode 100644
index 00000000..2830680f
--- /dev/null
+++ b/packages/myOrders/orderDetails/index.vue
@@ -0,0 +1,207 @@
+<template>
+  <view class="container">
+    <!-- 顶部状态栏 -->
+    <view class="status-bar">
+      <view class="status">待付款</view>
+      <view class="countdown">剩余支付时间: {{ countdown }}</view>
+      <view class="tips">10分钟内未支付订单自动取消</view>
+    </view>
+
+    <view class="content">
+      <!-- 订单金额 -->
+      <view class="amount-section">
+        <view class="total-amount">¥{{ orderInfo.totalAmount }}</view>
+        <view class="original-price"
+          >商品下单应付
+          <text> ¥{{ orderInfo.originalPrice }}</text>
+        </view>
+        <view
+          class="goods-item"
+          v-for="(item, index) in orderInfo.goodsList"
+          :key="index"
+        >
+          <image :src="item.image" class="goods-img"></image>
+          <view class="goods-info">
+            <view>
+              <view class="goods-name">{{ item.name }}</view>
+              <view class="goods-desc">{{ item.desc }}</view>
+            </view>
+            <view>
+              <view class="goods-price">¥{{ item.price }}</view>
+              <view class="goods-info-right"> x{{ item.quantity }}</view>
+            </view>
+          </view>
+        </view>
+        <view class="hr"></view>
+        <view class="info-item">
+          <view class="info-label1"
+            >下单总金额( ¥{{ orderInfo.orderAmount }} )</view
+          >
+          <view class="info-action">明细</view>
+        </view>
+        <view class="info-item">
+          <view class="info-label">商品下单总金额</view>
+          <view class="info-value">¥{{ orderInfo.goodsTotal }}</view>
+        </view>
+        <view class="info-item">
+          <view class="info-label">运费总计</view>
+          <view class="info-value">¥{{ orderInfo.freight }}</view>
+        </view>
+      </view>
+
+      <!-- 配送信息 -->
+      <view class="delivery-info">
+        <view class="section-title">配送信息</view>
+        <view class="info-item">
+          <view class="info-label">配送方式</view>
+          <view class="info-value">{{ orderInfo.deliveryType }}</view>
+        </view>
+        <view class="info-item">
+          <view class="info-label">预计配送时间</view>
+          <view class="info-value">{{ orderInfo.deliveryTime }}</view>
+        </view>
+      </view>
+
+      <!-- 收货信息 -->
+      <view class="recipient-info">
+        <view class="section-title">收货信息</view>
+        <view class="info-item">
+          <view class="info-label">收货人</view>
+          <view class="info-value"
+            >{{ orderInfo.recipientName }}
+            <text> {{ orderInfo.recipientPhone }}</text>
+          </view>
+        </view>
+        <view class="info-item">
+          <view class="info-label">收货地址</view>
+          <view class="info-value">{{ orderInfo.recipientAddress }}</view>
+        </view>
+      </view>
+
+      <!-- 订单信息详情 -->
+      <view class="order-detail-info">
+        <view class="section-title">订单信息</view>
+        <view class="info-item">
+          <view class="info-label">订单编号</view>
+          <view class="info-value">{{ orderInfo.orderNumber }}</view>
+        </view>
+        <view class="info-item">
+          <view class="info-label">支付方式</view>
+          <view class="info-value">{{ orderInfo.paymentMethod }}</view>
+        </view>
+        <view class="info-item">
+          <view class="info-label">下单时间</view>
+          <view class="info-value">{{ orderInfo.orderTime }}</view>
+        </view>
+        <view class="info-item">
+          <view class="info-label">备注</view>
+          <view class="info-value">{{ orderInfo.remark }}</view>
+        </view>
+      </view>
+
+      <!-- 底部操作按钮 -->
+      <view class="bottom-buttons">
+        <button class="cancel-btn" @click="cancelOrder">取消订单</button>
+        <button class="pay-btn" @click="gotoPayment">立即支付</button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      countdown: "9:59:59",
+      orderInfo: {
+        totalAmount: "4704.00",
+        payAmount: "4704.00",
+        originalPrice: "4704.00",
+        orderAmount: "290.00",
+        goodsTotal: "4704.00",
+        freight: "4704.00",
+        deliveryType: "商家配送",
+        deliveryTime: "2021-04-16 20:00-22:00",
+        recipientName: "杜先生",
+        recipientPhone: "15901518415",
+        recipientAddress: "河北省衡水市桃城区上海公馆",
+        orderNumber: "159144551545654",
+        paymentMethod: "微信支付",
+        orderTime: "2021-03-16 20:00-22:00",
+        remark: "明天9点之前送到",
+        goodsList: [
+          {
+            image: "http://localhost:8080/order_details.png",
+            name: "泰国金枕榴莲",
+            desc: "泰国金枕榴莲 软糯 香甜",
+            price: "125.9",
+            quantity: 1,
+          },
+          {
+            image: "http://localhost:8080/order_details.png",
+            name: "泰国金枕榴莲",
+            desc: "泰国金枕榴莲 软糯 香甜",
+            price: "125.9",
+            quantity: 1,
+          },
+          {
+            image: "http://localhost:8080/order_details.png",
+            name: "泰国金枕榴莲",
+            desc: "泰国金枕榴莲 软糯 香甜",
+            price: "125.9",
+            quantity: 1,
+          },
+        ],
+      },
+    };
+  },
+  onLoad() {
+    // 启动倒计时
+    this.startCountdown();
+  },
+  methods: {
+    startCountdown() {
+      // 实际项目中应该从服务器获取剩余时间
+      // 这里使用模拟倒计时
+      let seconds = 10 * 60; // 10分钟
+      const timer = setInterval(() => {
+        seconds--;
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds % 3600) / 60);
+        const secs = seconds % 60;
+        this.countdown = `${hours}:${minutes.toString().padStart(2, "0")}:${secs
+          .toString()
+          .padStart(2, "0")}`;
+        if (seconds <= 0) {
+          clearInterval(timer);
+          // 倒计时结束，处理订单取消逻辑
+          uni.showToast({ title: "订单已取消", icon: "none" });
+          setTimeout(() => uni.navigateBack(), 1500);
+        }
+      }, 1000);
+    },
+    cancelOrder() {
+      uni.showModal({
+        title: "提示",
+        content: "确定要取消订单吗？",
+        success: (res) => {
+          if (res.confirm) {
+            // 调用取消订单API
+            uni.showToast({ title: "订单已取消", icon: "none" });
+            setTimeout(() => uni.navigateBack(), 1500);
+          }
+        },
+      });
+    },
+    gotoPayment() {
+      // 跳转到支付页面
+      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 3eb7100a..7d03fbbf 100644
--- a/pages.json
+++ b/pages.json
@@ -737,6 +737,12 @@
 					"style": {
 						"navigationBarTitleText": "我的订单"
 					}
+				},
+				{
+					"path": "orderDetails/index",
+					"style": {
+						"navigationBarTitleText": "我的订单"
+					}
 				}
 			]
 		}