未结算订单 页面

.cursorrules

@@ -68,6 +68,7 @@ import { HomeOutlined } from '@taroify/icons'
 - 使用 px单位,会自动转换为 rpx
 - 使用 BEM 命名规范
 - 非特殊说明,不要使用PX
+- 新页面的 样式使用 _ 链接 比如“name_label”
 
 ## 常用命令
 

src/pages/scan/index.scss

@@ -44,5 +44,71 @@
       align-items: center;
       justify-content: center;
     }
+
+    .unsettled-orders-btn {
+      width: 500px;
+      height: 88px;
+      background: #01CA68;
+      border-radius: 44px;
+      color: #fff;
+      font-size: 32px;
+      font-weight: bold;
+      border: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  // 未结算订单弹窗样式
+  :global {
+    .unsettled-dialog {
+      .taroify-dialog__header {
+        font-size: 36px;
+        font-weight: 500;
+        color: #333333;
+        padding: 50px 30px 30px;
+      }
+
+      .taroify-dialog__content {
+        padding: 20px 30px 50px;
+
+        .dialog-content {
+          font-size: 30px;
+          color: #666666;
+          line-height: 1.6;
+          text-align: center;
+        }
+      }
+
+      .taroify-dialog__footer {
+        display: flex;
+        border-top: 1PX solid #EEEEEE;
+
+        .cancel-btn, .confirm-btn {
+          flex: 1;
+          height: 100px;
+          line-height: 100px;
+          font-size: 33px;
+          background: transparent;
+          border: none;
+          border-radius: 0;
+          padding: 0;
+          margin: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .cancel-btn {
+          color: #8B8B8B;
+        }
+
+        .confirm-btn {
+          color: #03C175;
+          border-left: 1PX solid #EEEEEE;
+        }
+      }
+    }
   }
 }

src/pages/scan/index.tsx

@@ -4,9 +4,13 @@
 import { View, Text, Button } from '@tarojs/components'
 import Taro, { useLoad } from '@tarojs/taro'
 import { observer } from 'mobx-react'
+import { useState } from 'react'
+import { Dialog } from '@taroify/core'
 import './index.scss'
 
 const ScanIndex = observer(() => {
+  const [showUnsettledDialog, setShowUnsettledDialog] = useState(false)
+
   useLoad(() => {
     console.log('扫码页面加载')
   })
@@ -48,6 +52,19 @@ const ScanIndex = observer(() => {
     })
   }
 
+  // 打开未结算订单弹窗
+  const handleUnsettledOrders = () => {
+    setShowUnsettledDialog(true)
+  }
+
+  // 去结算
+  const handleGoToSettle = () => {
+    setShowUnsettledDialog(false)
+    Taro.navigateTo({
+      url: '/pagesUser/unsettledOrders/index'
+    })
+  }
+
   return (
     <View className="scan-page">
       <View className="header">
@@ -66,7 +83,32 @@ const ScanIndex = observer(() => {
         <Button className="close-table-btn" onClick={handleCloseTableGuest}>
           关台-非开台人扫码
         </Button>
+        <Button className="unsettled-orders-btn" onClick={handleUnsettledOrders}>
+          未结算订单
+        </Button>
+      </View>
+
+      {/* 未结算订单提示弹窗 */}
+      <Dialog 
+        open={showUnsettledDialog} 
+        onClose={() => setShowUnsettledDialog(false)}
+        className="unsettled-dialog"
+      >
+        <Dialog.Header>温馨提示</Dialog.Header>
+        <Dialog.Content>
+          <View className="dialog-content">
+            您有1笔消费未结算，请先结算。
           </View>
+        </Dialog.Content>
+        <Dialog.Actions>
+          <Button className="cancel-btn" onClick={() => setShowUnsettledDialog(false)}>
+            取消
+          </Button>
+          <Button className="confirm-btn" onClick={handleGoToSettle}>
+            去结算
+          </Button>
+        </Dialog.Actions>
+      </Dialog>
     </View>
   )
 })

src/pagesUser/unsettledOrders/index.scss

@@ -2,4 +2,102 @@
   min-height: 100vh;
   background-color: #F2F3F5;
   padding: 30px;
+
+  // 空数据
+  .empty-data {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 150px 0;
+
+    .empty-image {
+      width: 300px;
+      height: 300px;
+      margin-bottom: 30px;
+    }
+
+    .empty-text {
+      font-size: 30px;
+      color: #999999;
+    }
+  }
+
+  // 订单列表
+  .order-list {
+    // 订单卡片
+    .order-card {
+      background-color: #FFFFFF;
+      border-radius: 12px;
+      padding: 30px;
+      margin-bottom: 30px;
+
+      // 标题行
+      .card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 30px;
+
+        .order-type {
+          font-size: 33px;
+          color: #333333;
+          font-weight: bold;
+        }
+
+        .detail-btn {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+
+          .detail-text {
+            font-size: 33px;
+            color: #8B8B8B;
+          }
+        }
+      }
+
+      // 订单信息
+      .card-info {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        margin-bottom: 30px;
+
+        .info-row {
+          display: flex;
+          align-items: flex-start;
+          justify-content: space-between;
+
+          .info-label {
+            font-size: 30px;
+            color: #333333;
+            flex-shrink: 0;
+          }
+
+          .info-value {
+            font-size: 30px;
+            color: #595959;
+            text-align: right;
+            word-break: break-all;
+          }
+        }
+      }
+
+      // 立即支付按钮
+      .pay-btn {
+        width: 100%;
+        height: 88px;
+        background: #03C175;
+        border-radius: 12px;
+        border: none;
+        font-weight: 400;
+        font-size: 31px;
+        color: #FFFFFF;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
 }

src/pagesUser/unsettledOrders/index.tsx

@@ -1,18 +1,104 @@
 /**
  * 未结算账单页
  */
-import { View, Text } from '@tarojs/components'
+import { View, Text, Image, Button } from '@tarojs/components'
-import { useLoad } from '@tarojs/taro'
+import { useState } from 'react'
+import Taro, { useLoad } from '@tarojs/taro'
+import { Divider } from '@taroify/core'
+import { Arrow } from '@taroify/icons'
 import './index.scss'
 
+const noDataImg = require('../../assets/big/noData.png')
+
+// 未结算订单数据接口
+interface UnsettledOrderItem {
+  id: string
+  type: string           // 台球 / 自助售货机
+  amount: number         // 消费金额
+  consumeTime: string    // 消费时间
+  orderNo: string        // 订单号
+  storeName: string      // 门店
+  address: string        // 地址
+}
+
 const UnsettledOrders = () => {
+  // 模拟未结算订单数据
+  const [orderList] = useState<UnsettledOrderItem[]>([])
+
   useLoad(() => {
     console.log('未结算账单页面加载')
   })
 
+  // 点击详情
+  const handleDetailClick = (orderId: string) => {
+    console.log('查看订单详情', orderId)
+    Taro.navigateTo({
+      url: `/pagesUser/orderDetail/index?orderId=${orderId}`
+    })
+  }
+
+  // 立即支付
+  const handlePay = (orderId: string) => {
+    console.log('立即支付', orderId)
+    Taro.showToast({
+      title: '跳转支付',
+      icon: 'none'
+    })
+  }
+
   return (
     <View className="unsettled-orders-page">
-      <Text>未结算账单</Text>
+      {orderList.length === 0 ? (
+        <View className="empty-data">
+          <Image className="empty-image" src={noDataImg} mode="aspectFit" />
+          <Text className="empty-text">没有数据哦~</Text>
+        </View>
+      ) : (
+        <View className="order-list">
+          {orderList.map(order => (
+            <View key={order.id} className="order-card">
+              {/* 标题行 */}
+              <View className="card-header">
+                <Text className="order-type">{order.type}</Text>
+                <View className="detail-btn" onClick={() => handleDetailClick(order.id)}>
+                  <Text className="detail-text">详情</Text>
+                  <Arrow size="16px" color="#8B8B8B" />
+                </View>
+              </View>
+              <Divider dashed={true} />
+              
+              {/* 订单信息 */}
+              <View className="card-info">
+                <View className="info-row">
+                  <Text className="info-label">消费金额</Text>
+                  <Text className="info-value">{order.amount.toFixed(2)}元</Text>
+                </View>
+                <View className="info-row">
+                  <Text className="info-label">消费时间</Text>
+                  <Text className="info-value">{order.consumeTime}</Text>
+                </View>
+                <View className="info-row">
+                  <Text className="info-label">订单号</Text>
+                  <Text className="info-value">{order.orderNo}</Text>
+                </View>
+                <View className="info-row">
+                  <Text className="info-label">门店</Text>
+                  <Text className="info-value">{order.storeName}</Text>
+                </View>
+                <View className="info-row">
+                  <Text className="info-label">地址</Text>
+                  <Text className="info-value">{order.address}</Text>
+                </View>
+              </View>
+
+              {/* 立即支付按钮 */}
+              <Button className="pay-btn" onClick={() => handlePay(order.id)}>
+                立即支付
+              </Button>
+            </View>
+          ))}
+        </View>
+      )}
     </View>
   )
 }