增加订单详情

pages.json

@@ -70,6 +70,12 @@
 			"style": {
 				"navigationBarTitleText": "订单详情"
 			}
+		},
+		{
+			"path": "pages/orderInfo/orderDetail",
+			"style": {
+				"navigationBarTitleText": "订单详情"
+			}
 		}
 	],
 	"globalStyle": {

pages/orderInfo/index.vue

@@ -4,61 +4,46 @@
     <!-- 搜索栏 -->
     <view class="search-container">
       <view class="search-box">
-        <view class="search-icon">🔍</view>
+        <image :src="getFileUrl('img/personal/search.png')" mode="widthFix" class="search-icon"></image>
         <input type="text" placeholder="搜索" class="search-input" v-model="searchKeyword" />
       </view>
     </view>
 
     <!-- 标签页 -->
     <view class="tabs">
-      <view 
-        class="tab-item" 
-        :class="{ active: activeTab === 'current' }"
-        @click="switchTab('current')"
-      >
+      <view class="tab-item" :class="{ active: activeTab === 'current' }" @click="switchTab('current')">
         当前订单
       </view>
-      <view 
-        class="tab-item" 
-        :class="{ active: activeTab === 'history' }"
-        @click="switchTab('history')"
-      >
+      <view class="tab-item" :class="{ active: activeTab === 'history' }" @click="switchTab('history')">
         历史订单
       </view>
     </view>
 
     <!-- 订单列表 -->
     <scroll-view class="order-list" scroll-y>
-      <view 
-        v-for="(order, index) in currentOrderList" 
-        :key="order.id || index" 
-        class="order-card"
-      >
+      <view v-for="(order, index) in currentOrderList" :key="order.id || index" class="order-card">
         <!-- 订单头部 -->
         <view class="order-header">
           <view class="order-number">NO.{{ order.orderNo }}</view>
-          <view class="order-status" :class="order.statusClass">{{ order.statusText }}</view>
+
         </view>
 
         <!-- 店铺信息 -->
         <view class="store-info" @click="handleStoreClick(order)">
-          <text class="store-name">{{ order.storeName }}</text>
-          <text class="store-arrow">›</text>
+          <view><text class="store-name">{{ order.storeName }}</text>
+            <text class="store-arrow">›</text>
+          </view>
+          <view class="order-status" :class="order.statusClass">{{ order.statusText }}</view>
         </view>
 
         <!-- 订单时间 -->
         <view class="order-time">{{ order.createTime }}</view>
 
         <!-- 商品信息 -->
-        <view class="order-goods">
+        <view class="order-goods" @click="handleOrderDetail(order)">
           <view class="goods-images">
-            <image 
-              v-for="(image, imgIndex) in order.goodsImages" 
-              :key="imgIndex"
-              :src="getFileUrl(image)" 
-              mode="aspectFill" 
-              class="goods-image"
-            />
+            <image v-for="(image, imgIndex) in order.goodsImages" :key="imgIndex" :src="getFileUrl(image)"
+              mode="aspectFill" class="goods-image" />
           </view>
           <view class="goods-info">
             <view class="goods-price">¥{{ order.totalPrice }}</view>
@@ -117,12 +102,18 @@ const currentOrderList = computed(() => {
   if (!searchKeyword.value) {
     return orders;
   }
-  return orders.filter(order => 
-    order.orderNo.includes(searchKeyword.value) || 
+  return orders.filter(order =>
+    order.orderNo.includes(searchKeyword.value) ||
     order.storeName.includes(searchKeyword.value)
   );
 });
 
+// 处理订单详情
+const handleOrderDetail = (order) => {
+  console.log('订单详情');
+  go('/pages/orderInfo/orderDetail');
+};
+
 // 切换标签页
 const switchTab = (tab) => {
   activeTab.value = tab;
@@ -182,12 +173,9 @@ onLoad((e) => {
     box-sizing: border-box;
 
     .search-icon {
-      font-size: 32rpx;
-      color: #999;
+      width: 34rpx;
+      height: 34rpx;
       margin-right: 16rpx;
-      line-height: 1;
-      display: flex;
-      align-items: center;
     }
 
     .search-input {
@@ -213,14 +201,16 @@ onLoad((e) => {
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 32rpx;
-    color: #666;
+    font-size: 27rpx;
+    color: #AAAAAA;
+    font-weight: bold;
     position: relative;
     transition: color 0.3s;
 
     &.active {
-      color: #FF6B35;
-      font-weight: 600;
+      font-size: 27rpx;
+      color: #151515;
+      font-weight: bold;
 
       &::after {
         content: '';
@@ -228,10 +218,10 @@ onLoad((e) => {
         bottom: 0;
         left: 50%;
         transform: translateX(-50%);
-        width: 60rpx;
-        height: 4rpx;
+        width: 40rpx;
+        height: 8rpx;
         background-color: #FF6B35;
-        border-radius: 2rpx;
+        border-radius: 5rpx;
       }
     }
   }
@@ -266,13 +256,23 @@ onLoad((e) => {
       color: #151515;
       font-weight: 500;
     }
+  }
+
+  // 店铺信息
+  .store-info {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12rpx;
+
 
     .order-status {
       font-size: 28rpx;
       font-weight: 500;
 
       &.status-active {
-        color: #07C160;
+        font-size: 23rpx;
+        color: #008844;
       }
 
       &.status-completed {
@@ -283,20 +283,11 @@ onLoad((e) => {
         color: #FF3B30;
       }
     }
-  }
-
-  // 店铺信息
-  .store-info {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 12rpx;
 
     .store-name {
-      font-size: 30rpx;
+      font-size: 27rpx;
       color: #151515;
-      font-weight: 500;
-      flex: 1;
+      font-weight: bold;
     }
 
     .store-arrow {
@@ -308,8 +299,8 @@ onLoad((e) => {
 
   // 订单时间
   .order-time {
-    font-size: 24rpx;
-    color: #999;
+    font-size: 23rpx;
+    color: #AAAAAA;
     margin-bottom: 20rpx;
   }
 
@@ -339,15 +330,15 @@ onLoad((e) => {
       align-items: flex-end;
 
       .goods-price {
-        font-size: 32rpx;
+        font-weight: bold;
+        font-size: 27rpx;
         color: #151515;
-        font-weight: 600;
         margin-bottom: 8rpx;
       }
 
       .goods-count {
-        font-size: 24rpx;
-        color: #999;
+        font-size: 23rpx;
+        color: #666666;
       }
     }
   }
@@ -358,9 +349,9 @@ onLoad((e) => {
     gap: 20rpx;
     padding-top: 20rpx;
     border-top: 1rpx solid #f0f0f0;
+    justify-content: flex-end;
 
     .action-btn {
-      flex: 1;
       height: 68rpx;
       display: flex;
       align-items: center;
@@ -370,10 +361,17 @@ onLoad((e) => {
       font-weight: 500;
       transition: all 0.3s;
 
+
       &.outline {
         border: 2rpx solid #FF6B35;
         color: #FF6B35;
         background-color: transparent;
+        text-align: center;
+        width: 172rpx;
+        height: 73rpx;
+        box-shadow: 0rpx -11rpx 46rpx 0rpx rgba(86, 125, 244, 0.05);
+        border-radius: 19rpx 19rpx 19rpx 19rpx;
+        border: 2rpx solid #F47D1F;
 
         &:active {
           background-color: #fff4e6;
@@ -383,6 +381,11 @@ onLoad((e) => {
       &.primary {
         background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
         color: #fff;
+        width: 172rpx;
+        height: 73rpx;
+        background: linear-gradient(0deg, #FCB73F 0%, #FC733D 100%);
+        box-shadow: 0rpx -11rpx 46rpx 0rpx rgba(86, 125, 244, 0.05);
+        border-radius: 19rpx 19rpx 19rpx 19rpx;
 
         &:active {
           opacity: 0.8;

pages/orderInfo/orderDetail.vue

@@ -0,0 +1,374 @@
+<template>
+  <!-- 订单详情页面 -->
+  <view class="content">
+    <!-- 菜品清单 -->
+    <view class="card">
+      <!-- 店铺信息 -->
+      <view class="store-info">
+        <view class="store-info-title">正旗手选海鲜烧烤(东港店)</view>
+        <view class="store-info-address">辽宁省大连市甘井子区高新技术产业园区礼贤街39A号一层</view>
+      </view>
+      <view class="card-header">
+        <view class="card-header-title">菜品详情</view>
+      </view>
+      <view class="card-content">
+        <view class="info-food">
+          <view v-for="(item, index) in foodList" :key="item.id || index" class="food-item">
+            <!-- 菜品图片 -->
+            <image :src="getFileUrl(item.image)" mode="aspectFill" class="food-item__image"></image>
+
+            <!-- 菜品信息 -->
+            <view class="food-item__info">
+              <view class="food-item__name">{{ item.name }}</view>
+              <view class="food-item__desc" v-if="item.tags && item.tags.length > 0">
+                <text v-for="(tag, tagIndex) in item.tags" :key="tagIndex" class="food-item__tag">
+                  {{ tag.text }}<text v-if="tagIndex < item.tags.length - 1">,</text>
+                </text>
+              </view>
+            </view>
+
+            <!-- 价格和数量 -->
+            <view class="food-item__right">
+              <view class="food-item__price">
+                <text class="price-main">¥{{ item.price }}</text>
+              </view>
+              <view class="food-item__quantity">{{ item.quantity || 1 }}份</view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view class="card-header">
+        <view class="card-header-title">价格明细</view>
+      </view>
+      <view class="card-content">
+        <view class="info-item">
+          <view class="info-item-label">菜品总价</view>
+          <view class="info-item-value">1234567890</view>
+        </view>
+        <view class="info-item">
+          <view class="info-item-label">餐具费</view>
+          <view class="info-item-value">1234567890</view>
+        </view>
+        <view class="info-item">
+          <view class="info-item-label">优惠券</view>
+          <view class="info-item-value">1234567890</view>
+        </view>
+        <view class="price-line">
+          <view class="price-line-label">合计</view>
+          <view class="price-line-value">¥890</view>
+        </view>
+      </view>
+    </view>
+
+
+    <!-- 订单卡片 -->
+    <view class="card">
+      <view class="card-header">
+        <view class="card-header-title">订单信息</view>
+      </view>
+      <view class="card-content">
+        <view class="info-item">
+          <view class="info-item-label">订单编号</view>
+          <view class="info-item-value">1234567890</view>
+        </view>
+        <view class="info-item">
+          <view class="info-item-label">就餐桌号</view>
+          <view class="info-item-value">1234567890</view>
+        </view>
+        <view class="info-item">
+          <view class="info-item-label">用餐人数</view>
+          <view class="info-item-value">1234567890</view>
+        </view>
+        <view class="info-item">
+          <view class="info-item-label">下单时间</view>
+          <view class="info-item-value">1234567890</view>
+        </view>
+        <view class="info-item">
+          <view class="info-item-label">联系电话</view>
+          <view class="info-item-value">1234567890</view>
+        </view>
+        <view class="info-item">
+          <view class="info-item-label">备注信息</view>
+          <view class="info-item-value">1234567890</view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部按钮 -->
+    <view class="bottom-button">
+      <view class="bottom-button-text1 " hover-class="hover-active" @click="handleConfirmOrder">去加餐</view>
+      <view class="bottom-button-text" hover-class="hover-active" @click="handleConfirmPay">去结算</view>
+    </view>
+
+  </view>
+</template>
+
+<script setup>
+import { onLoad } from "@dcloudio/uni-app";
+import { ref } from "vue";
+import { go } from "@/utils/utils.js";
+import { getFileUrl } from "@/utils/file.js";
+
+const payType = ref('confirmOrder'); // confirmOrder 确认下单 confirmPay 确认支付
+
+// 菜品列表数据（示例数据，实际应该从购物车或订单数据中获取）
+const foodList = ref([
+  {
+    id: 1,
+    name: '石板肉酱豆腐',
+    price: 19.9,
+    image: '/static/demo.png',
+    tags: [
+      { text: '份', type: 'normal' },
+      { text: '微辣', type: 'spicy' }
+    ],
+    quantity: 1
+  },
+  {
+    id: 2,
+    name: '经典三杯鸡',
+    price: 26.9,
+    image: '/static/demo.png',
+    tags: [
+      { text: '份', type: 'normal' }
+    ],
+    quantity: 1
+  }
+]);
+
+const handleConfirmOrder = () => {
+  go('/pages/result/index');
+};
+
+onLoad((e) => {
+  if (e.payType) payType.value = e.payType;
+  // TODO: 从存储或接口获取订单菜品数据
+  // const cartList = uni.getStorageSync('cartList') || [];
+  // foodList.value = cartList.filter(item => item.quantity > 0);
+});
+</script>
+
+<style lang="scss" scoped>
+.content {
+  padding: 0 30rpx 300rpx;
+}
+
+.card {
+  background-color: #fff;
+  border-radius: 24rpx;
+  padding: 30rpx 0;
+  margin-top: 20rpx;
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 30rpx;
+    height: 40rpx;
+    position: relative;
+    font-size: 27rpx;
+    color: #151515;
+    font-weight: bold;
+  }
+
+  .tag {
+    width: 10rpx;
+    height: 42rpx;
+    background: linear-gradient(35deg, #FCB73F 0%, #FC733D 100%);
+    border-radius: 0rpx 0rpx 0rpx 0rpx;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  .card-content {
+    padding: 0 30rpx;
+  }
+
+  .info-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 20rpx;
+    font-size: 27rpx;
+
+    .info-item-label {
+      color: #666666;
+    }
+
+    .info-item-value {
+      color: #151515;
+    }
+  }
+
+  .info-item-textarea {
+    width: 100%;
+    height: 115rpx;
+    border-radius: 8rpx;
+    border: 1rpx solid #F2F2F2;
+    margin-top: 20rpx;
+    font-size: 23rpx;
+    color: #AAAAAA;
+    box-sizing: border-box;
+    padding: 20rpx;
+  }
+
+  .info-food {
+    margin-top: 20rpx;
+  }
+
+  .food-item {
+    display: flex;
+    align-items: center;
+    padding: 20rpx 0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &__image {
+      width: 118rpx;
+      height: 118rpx;
+      border-radius: 8rpx;
+      flex-shrink: 0;
+      background-color: #f5f5f5;
+    }
+
+    &__info {
+      flex: 1;
+      margin-left: 20rpx;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    &__name {
+      font-size: 28rpx;
+      font-weight: bold;
+      color: #151515;
+      margin-bottom: 8rpx;
+    }
+
+    &__desc {
+      font-size: 24rpx;
+      color: #666666;
+      line-height: 1.5;
+    }
+
+    &__tag {
+      font-size: 24rpx;
+      color: #666666;
+    }
+
+    &__right {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      justify-content: center;
+      margin-left: 20rpx;
+    }
+
+    &__price {
+      display: flex;
+      align-items: baseline;
+      color: #151515;
+      font-weight: bold;
+      margin-bottom: 8rpx;
+
+      .price-symbol {
+        font-size: 20rpx;
+        margin-right: 2rpx;
+      }
+
+      .price-main {
+        font-size: 28rpx;
+      }
+
+      .price-decimal {
+        font-size: 24rpx;
+      }
+    }
+
+    &__quantity {
+      font-size: 24rpx;
+      color: #797979;
+    }
+  }
+
+  .price-line {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 20rpx;
+    font-size: 27rpx;
+    color: #151515;
+    border-top: 1rpx solid rgba(170, 170, 170, 0.15);
+    font-weight: bold;
+    padding-top: 20rpx;
+  }
+}
+
+.bottom-button {
+  width: 100%;
+  background-color: #fff;
+  padding: 20rpx 30rpx;
+  box-sizing: border-box;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  padding-bottom: env(safe-area-inset-bottom);
+  box-shadow: 0rpx -11rpx 46rpx 0rpx rgba(0, 0, 0, 0.05);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .bottom-button-text1 {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #fff;
+    width: 324rpx;
+    height: 80rpx;
+    border-radius: 23rpx 23rpx 23rpx 23rpx;
+    border: 2rpx solid #F47D1F;
+    display: flex;
+    align-items: center;
+    color: #F47D1F;
+    justify-content: center;
+  }
+
+  .bottom-button-text {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #fff;
+    background: linear-gradient(90deg, #FCB73F 0%, #FC743D 100%);
+    border-radius: 23rpx 23rpx 23rpx 23rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 324rpx;
+    height: 80rpx;
+  }
+}
+
+.store-info {
+  border-bottom: 1rpx solid rgba(170, 170, 170, 0.15);
+  box-sizing: border-box;
+  margin: 0 30rpx 30rpx;
+
+  .store-info-title {
+    font-size: 27rpx;
+    color: #151515;
+    font-weight: bold;
+    margin-bottom: 10rpx;
+  }
+
+  .store-info-address {
+    font-size: 23rpx;
+    color: #AAAAAA;
+    margin-bottom: 30rpx;
+  }
+}
+</style>

unpackage/dist/dev/mp-weixin/app.js

@@ -17,6 +17,7 @@ if (!Math) {
   "./pages/personal/userInfo.js";
   "./pages/personal/setPhone.js";
   "./pages/orderInfo/index.js";
+  "./pages/orderInfo/orderDetail.js";
 }
 const _sfc_main = {
   onLaunch: function(e) {

unpackage/dist/dev/mp-weixin/app.json

@@ -10,7 +10,8 @@
     "pages/result/index",
     "pages/personal/userInfo",
     "pages/personal/setPhone",
-    "pages/orderInfo/index"
+    "pages/orderInfo/index",
+    "pages/orderInfo/orderDetail"
   ],
   "usingComponents": {},
   "window": {

unpackage/dist/dev/mp-weixin/pages/orderInfo/index.js

@@ -30,18 +30,22 @@ const _sfc_main = {
         (order) => order.orderNo.includes(searchKeyword.value) || order.storeName.includes(searchKeyword.value)
       );
     });
+    const handleOrderDetail = (order) => {
+      common_vendor.index.__f__("log", "at pages/orderInfo/index.vue:113", "订单详情");
+      utils_utils.go("/pages/orderInfo/orderDetail");
+    };
     const switchTab = (tab) => {
       activeTab.value = tab;
     };
     const handleStoreClick = (order) => {
-      common_vendor.index.__f__("log", "at pages/orderInfo/index.vue:133", "点击店铺:", order);
+      common_vendor.index.__f__("log", "at pages/orderInfo/index.vue:124", "点击店铺:", order);
     };
     const handleAddFood = (order) => {
-      common_vendor.index.__f__("log", "at pages/orderInfo/index.vue:139", "去加餐:", order);
+      common_vendor.index.__f__("log", "at pages/orderInfo/index.vue:130", "去加餐:", order);
       utils_utils.go("/pages/orderFood/index");
     };
     const handleCheckout = (order) => {
-      common_vendor.index.__f__("log", "at pages/orderInfo/index.vue:146", "去结算:", order);
+      common_vendor.index.__f__("log", "at pages/orderInfo/index.vue:137", "去结算:", order);
       utils_utils.go("/pages/placeOrder/index");
     };
     common_vendor.onLoad((e) => {
@@ -51,18 +55,19 @@ const _sfc_main = {
     });
     return (_ctx, _cache) => {
       return common_vendor.e({
-        a: searchKeyword.value,
-        b: common_vendor.o(($event) => searchKeyword.value = $event.detail.value),
-        c: activeTab.value === "current" ? 1 : "",
-        d: common_vendor.o(($event) => switchTab("current")),
-        e: activeTab.value === "history" ? 1 : "",
-        f: common_vendor.o(($event) => switchTab("history")),
-        g: common_vendor.f(currentOrderList.value, (order, index, i0) => {
+        a: common_vendor.unref(utils_file.getFileUrl)("img/personal/search.png"),
+        b: searchKeyword.value,
+        c: common_vendor.o(($event) => searchKeyword.value = $event.detail.value),
+        d: activeTab.value === "current" ? 1 : "",
+        e: common_vendor.o(($event) => switchTab("current")),
+        f: activeTab.value === "history" ? 1 : "",
+        g: common_vendor.o(($event) => switchTab("history")),
+        h: common_vendor.f(currentOrderList.value, (order, index, i0) => {
           return {
             a: common_vendor.t(order.orderNo),
-            b: common_vendor.t(order.statusText),
-            c: common_vendor.n(order.statusClass),
-            d: common_vendor.t(order.storeName),
+            b: common_vendor.t(order.storeName),
+            c: common_vendor.t(order.statusText),
+            d: common_vendor.n(order.statusClass),
             e: common_vendor.o(($event) => handleStoreClick(order), order.id || index),
             f: common_vendor.t(order.createTime),
             g: common_vendor.f(order.goodsImages, (image, imgIndex, i1) => {
@@ -73,12 +78,13 @@ const _sfc_main = {
             }),
             h: common_vendor.t(order.totalPrice),
             i: common_vendor.t(order.goodsCount),
-            j: common_vendor.o(($event) => handleAddFood(order), order.id || index),
-            k: common_vendor.o(($event) => handleCheckout(order), order.id || index),
-            l: order.id || index
+            j: common_vendor.o(($event) => handleOrderDetail(), order.id || index),
+            k: common_vendor.o(($event) => handleAddFood(order), order.id || index),
+            l: common_vendor.o(($event) => handleCheckout(order), order.id || index),
+            m: order.id || index
           };
         }),
-        h: currentOrderList.value.length === 0
+        i: currentOrderList.value.length === 0
       }, currentOrderList.value.length === 0 ? {} : {});
     };
   }

unpackage/dist/dev/mp-weixin/pages/orderInfo/index.wxss

@@ -22,12 +22,9 @@
   box-sizing: border-box;
 }
 .search-container .search-box .search-icon.data-v-c0232ef0 {
-  font-size: 32rpx;
-  color: #999;
+  width: 34rpx;
+  height: 34rpx;
   margin-right: 16rpx;
-  line-height: 1;
-  display: flex;
-  align-items: center;
 }
 .search-container .search-box .search-input.data-v-c0232ef0 {
   flex: 1;
@@ -48,14 +45,16 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 32rpx;
-  color: #666;
+  font-size: 27rpx;
+  color: #AAAAAA;
+  font-weight: bold;
   position: relative;
   transition: color 0.3s;
 }
 .tabs .tab-item.active.data-v-c0232ef0 {
-  color: #FF6B35;
-  font-weight: 600;
+  font-size: 27rpx;
+  color: #151515;
+  font-weight: bold;
 }
 .tabs .tab-item.active.data-v-c0232ef0::after {
   content: "";
@@ -63,10 +62,10 @@
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
-  width: 60rpx;
-  height: 4rpx;
+  width: 40rpx;
+  height: 8rpx;
   background-color: #FF6B35;
-  border-radius: 2rpx;
+  border-radius: 5rpx;
 }
 .order-list.data-v-c0232ef0 {
   flex: 1;
@@ -93,30 +92,30 @@
   color: #151515;
   font-weight: 500;
 }
-.order-card .order-header .order-status.data-v-c0232ef0 {
+.order-card .store-info.data-v-c0232ef0 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12rpx;
+}
+.order-card .store-info .order-status.data-v-c0232ef0 {
   font-size: 28rpx;
   font-weight: 500;
 }
-.order-card .order-header .order-status.status-active.data-v-c0232ef0 {
-  color: #07C160;
+.order-card .store-info .order-status.status-active.data-v-c0232ef0 {
+  font-size: 23rpx;
+  color: #008844;
 }
-.order-card .order-header .order-status.status-completed.data-v-c0232ef0 {
+.order-card .store-info .order-status.status-completed.data-v-c0232ef0 {
   color: #999;
 }
-.order-card .order-header .order-status.status-cancelled.data-v-c0232ef0 {
+.order-card .store-info .order-status.status-cancelled.data-v-c0232ef0 {
   color: #FF3B30;
 }
-.order-card .store-info.data-v-c0232ef0 {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 12rpx;
-}
 .order-card .store-info .store-name.data-v-c0232ef0 {
-  font-size: 30rpx;
+  font-size: 27rpx;
   color: #151515;
-  font-weight: 500;
-  flex: 1;
+  font-weight: bold;
 }
 .order-card .store-info .store-arrow.data-v-c0232ef0 {
   font-size: 36rpx;
@@ -124,8 +123,8 @@
   margin-left: 10rpx;
 }
 .order-card .order-time.data-v-c0232ef0 {
-  font-size: 24rpx;
-  color: #999;
+  font-size: 23rpx;
+  color: #AAAAAA;
   margin-bottom: 20rpx;
 }
 .order-card .order-goods.data-v-c0232ef0 {
@@ -151,23 +150,23 @@
   align-items: flex-end;
 }
 .order-card .order-goods .goods-info .goods-price.data-v-c0232ef0 {
-  font-size: 32rpx;
+  font-weight: bold;
+  font-size: 27rpx;
   color: #151515;
-  font-weight: 600;
   margin-bottom: 8rpx;
 }
 .order-card .order-goods .goods-info .goods-count.data-v-c0232ef0 {
-  font-size: 24rpx;
-  color: #999;
+  font-size: 23rpx;
+  color: #666666;
 }
 .order-card .order-actions.data-v-c0232ef0 {
   display: flex;
   gap: 20rpx;
   padding-top: 20rpx;
   border-top: 1rpx solid #f0f0f0;
+  justify-content: flex-end;
 }
 .order-card .order-actions .action-btn.data-v-c0232ef0 {
-  flex: 1;
   height: 68rpx;
   display: flex;
   align-items: center;
@@ -181,6 +180,12 @@
   border: 2rpx solid #FF6B35;
   color: #FF6B35;
   background-color: transparent;
+  text-align: center;
+  width: 172rpx;
+  height: 73rpx;
+  box-shadow: 0rpx -11rpx 46rpx 0rpx rgba(86, 125, 244, 0.05);
+  border-radius: 19rpx 19rpx 19rpx 19rpx;
+  border: 2rpx solid #F47D1F;
 }
 .order-card .order-actions .action-btn.outline.data-v-c0232ef0:active {
   background-color: #fff4e6;
@@ -188,6 +193,11 @@
 .order-card .order-actions .action-btn.primary.data-v-c0232ef0 {
   background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
   color: #fff;
+  width: 172rpx;
+  height: 73rpx;
+  background: linear-gradient(0deg, #FCB73F 0%, #FC733D 100%);
+  box-shadow: 0rpx -11rpx 46rpx 0rpx rgba(86, 125, 244, 0.05);
+  border-radius: 19rpx 19rpx 19rpx 19rpx;
 }
 .order-card .order-actions .action-btn.primary.data-v-c0232ef0:active {
   opacity: 0.8;

unpackage/dist/dev/mp-weixin/pages/orderInfo/orderDetail.js

@@ -0,0 +1,69 @@
+"use strict";
+const common_vendor = require("../../common/vendor.js");
+const utils_utils = require("../../utils/utils.js");
+const utils_file = require("../../utils/file.js");
+const _sfc_main = {
+  __name: "orderDetail",
+  setup(__props) {
+    const payType = common_vendor.ref("confirmOrder");
+    const foodList = common_vendor.ref([
+      {
+        id: 1,
+        name: "石板肉酱豆腐",
+        price: 19.9,
+        image: "/static/demo.png",
+        tags: [
+          { text: "份", type: "normal" },
+          { text: "微辣", type: "spicy" }
+        ],
+        quantity: 1
+      },
+      {
+        id: 2,
+        name: "经典三杯鸡",
+        price: 26.9,
+        image: "/static/demo.png",
+        tags: [
+          { text: "份", type: "normal" }
+        ],
+        quantity: 1
+      }
+    ]);
+    const handleConfirmOrder = () => {
+      utils_utils.go("/pages/result/index");
+    };
+    common_vendor.onLoad((e) => {
+      if (e.payType)
+        payType.value = e.payType;
+    });
+    return (_ctx, _cache) => {
+      return {
+        a: common_vendor.f(foodList.value, (item, index, i0) => {
+          return common_vendor.e({
+            a: common_vendor.unref(utils_file.getFileUrl)(item.image),
+            b: common_vendor.t(item.name),
+            c: item.tags && item.tags.length > 0
+          }, item.tags && item.tags.length > 0 ? {
+            d: common_vendor.f(item.tags, (tag, tagIndex, i1) => {
+              return common_vendor.e({
+                a: common_vendor.t(tag.text),
+                b: tagIndex < item.tags.length - 1
+              }, tagIndex < item.tags.length - 1 ? {} : {}, {
+                c: tagIndex
+              });
+            })
+          } : {}, {
+            e: common_vendor.t(item.price),
+            f: common_vendor.t(item.quantity || 1),
+            g: item.id || index
+          });
+        }),
+        b: common_vendor.o(handleConfirmOrder),
+        c: common_vendor.o((...args) => _ctx.handleConfirmPay && _ctx.handleConfirmPay(...args))
+      };
+    };
+  }
+};
+const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-a6cd41f4"]]);
+wx.createPage(MiniProgramPage);
+//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/orderInfo/orderDetail.js.map

unpackage/dist/dev/mp-weixin/pages/orderInfo/orderDetail.json

@@ -0,0 +1,4 @@
+{
+  "navigationBarTitleText": "订单详情",
+  "usingComponents": {}
+}

unpackage/dist/dev/mp-weixin/pages/orderInfo/orderDetail.wxss

@@ -0,0 +1,192 @@
+.content.data-v-a6cd41f4 {
+  padding: 0 30rpx 300rpx;
+}
+.card.data-v-a6cd41f4 {
+  background-color: #fff;
+  border-radius: 24rpx;
+  padding: 30rpx 0;
+  margin-top: 20rpx;
+}
+.card .card-header.data-v-a6cd41f4 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 30rpx;
+  height: 40rpx;
+  position: relative;
+  font-size: 27rpx;
+  color: #151515;
+  font-weight: bold;
+}
+.card .tag.data-v-a6cd41f4 {
+  width: 10rpx;
+  height: 42rpx;
+  background: linear-gradient(35deg, #FCB73F 0%, #FC733D 100%);
+  border-radius: 0rpx 0rpx 0rpx 0rpx;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.card .card-content.data-v-a6cd41f4 {
+  padding: 0 30rpx;
+}
+.card .info-item.data-v-a6cd41f4 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20rpx;
+  font-size: 27rpx;
+}
+.card .info-item .info-item-label.data-v-a6cd41f4 {
+  color: #666666;
+}
+.card .info-item .info-item-value.data-v-a6cd41f4 {
+  color: #151515;
+}
+.card .info-item-textarea.data-v-a6cd41f4 {
+  width: 100%;
+  height: 115rpx;
+  border-radius: 8rpx;
+  border: 1rpx solid #F2F2F2;
+  margin-top: 20rpx;
+  font-size: 23rpx;
+  color: #AAAAAA;
+  box-sizing: border-box;
+  padding: 20rpx;
+}
+.card .info-food.data-v-a6cd41f4 {
+  margin-top: 20rpx;
+}
+.card .food-item.data-v-a6cd41f4 {
+  display: flex;
+  align-items: center;
+  padding: 20rpx 0;
+}
+.card .food-item.data-v-a6cd41f4:last-child {
+  border-bottom: none;
+}
+.card .food-item__image.data-v-a6cd41f4 {
+  width: 118rpx;
+  height: 118rpx;
+  border-radius: 8rpx;
+  flex-shrink: 0;
+  background-color: #f5f5f5;
+}
+.card .food-item__info.data-v-a6cd41f4 {
+  flex: 1;
+  margin-left: 20rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.card .food-item__name.data-v-a6cd41f4 {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #151515;
+  margin-bottom: 8rpx;
+}
+.card .food-item__desc.data-v-a6cd41f4 {
+  font-size: 24rpx;
+  color: #666666;
+  line-height: 1.5;
+}
+.card .food-item__tag.data-v-a6cd41f4 {
+  font-size: 24rpx;
+  color: #666666;
+}
+.card .food-item__right.data-v-a6cd41f4 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  margin-left: 20rpx;
+}
+.card .food-item__price.data-v-a6cd41f4 {
+  display: flex;
+  align-items: baseline;
+  color: #151515;
+  font-weight: bold;
+  margin-bottom: 8rpx;
+}
+.card .food-item__price .price-symbol.data-v-a6cd41f4 {
+  font-size: 20rpx;
+  margin-right: 2rpx;
+}
+.card .food-item__price .price-main.data-v-a6cd41f4 {
+  font-size: 28rpx;
+}
+.card .food-item__price .price-decimal.data-v-a6cd41f4 {
+  font-size: 24rpx;
+}
+.card .food-item__quantity.data-v-a6cd41f4 {
+  font-size: 24rpx;
+  color: #797979;
+}
+.card .price-line.data-v-a6cd41f4 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20rpx;
+  font-size: 27rpx;
+  color: #151515;
+  border-top: 1rpx solid rgba(170, 170, 170, 0.15);
+  font-weight: bold;
+  padding-top: 20rpx;
+}
+.bottom-button.data-v-a6cd41f4 {
+  width: 100%;
+  background-color: #fff;
+  padding: 20rpx 30rpx;
+  box-sizing: border-box;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  padding-bottom: env(safe-area-inset-bottom);
+  box-shadow: 0rpx -11rpx 46rpx 0rpx rgba(0, 0, 0, 0.05);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.bottom-button .bottom-button-text1.data-v-a6cd41f4 {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #fff;
+  width: 324rpx;
+  height: 80rpx;
+  border-radius: 23rpx 23rpx 23rpx 23rpx;
+  border: 2rpx solid #F47D1F;
+  display: flex;
+  align-items: center;
+  color: #F47D1F;
+  justify-content: center;
+}
+.bottom-button .bottom-button-text.data-v-a6cd41f4 {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #fff;
+  background: linear-gradient(90deg, #FCB73F 0%, #FC743D 100%);
+  border-radius: 23rpx 23rpx 23rpx 23rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 324rpx;
+  height: 80rpx;
+}
+.store-info.data-v-a6cd41f4 {
+  border-bottom: 1rpx solid rgba(170, 170, 170, 0.15);
+  box-sizing: border-box;
+  margin: 0 30rpx 30rpx;
+}
+.store-info .store-info-title.data-v-a6cd41f4 {
+  font-size: 27rpx;
+  color: #151515;
+  font-weight: bold;
+  margin-bottom: 10rpx;
+}
+.store-info .store-info-address.data-v-a6cd41f4 {
+  font-size: 23rpx;
+  color: #AAAAAA;
+  margin-bottom: 30rpx;
+}

unpackage/dist/dev/mp-weixin/project.private.config.json

@@ -2,7 +2,7 @@
   "libVersion": "3.14.0",
   "projectname": "WechatApp",
   "setting": {
-    "urlCheck": true,
+    "urlCheck": false,
     "coverView": true,
     "lazyloadPlaceholderEnable": false,
     "skylineRenderEnable": false,
@@ -17,5 +17,25 @@
     "checkInvalidKey": true,
     "ignoreDevUnusedFiles": true,
     "bigPackageSizeSupport": false
+  },
+  "condition": {
+    "miniprogram": {
+      "list": [
+        {
+          "name": "pages/orderInfo/orderDetail",
+          "pathName": "pages/orderInfo/orderDetail",
+          "query": "",
+          "scene": null,
+          "launchMode": "default"
+        },
+        {
+          "name": "pages/orderInfo/index",
+          "pathName": "pages/orderInfo/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        }
+      ]
+    }
   }
 }