From 8e0db3215b859a1851f0a6923aa1663e72e045d9 Mon Sep 17 00:00:00 2001
From: DU <kingdujiabo@163.com>
Date: Sun, 18 Jan 2026 12:21:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=85=B3=E5=8F=B0=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app.config.ts                             |   1 +
 .../closeTable/components/FooterButtons.scss  |  65 ++++
 .../closeTable/components/FooterButtons.tsx   | 116 ++++++
 src/pageScan/closeTable/index.config.ts       |   5 +
 src/pageScan/closeTable/index.scss            | 353 ++++++++++++++++++
 src/pageScan/closeTable/index.tsx             | 233 ++++++++++++
 src/pages/scan/index.tsx                      |  20 +
 7 files changed, 793 insertions(+)
 create mode 100644 src/pageScan/closeTable/components/FooterButtons.scss
 create mode 100644 src/pageScan/closeTable/components/FooterButtons.tsx
 create mode 100644 src/pageScan/closeTable/index.config.ts
 create mode 100644 src/pageScan/closeTable/index.scss
 create mode 100644 src/pageScan/closeTable/index.tsx

diff --git a/src/app.config.ts b/src/app.config.ts
index 0a9ad92..ccc2cd1 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -38,6 +38,7 @@ export default defineAppConfig({
         'selfStart/index',        // 自助开台页面
         'timedStart/index',       // 定时开台页面
         'couponStart/index',      // 团购券开台页面
+        'closeTable/index',       // 关台页面
       ]
     }
   ],
diff --git a/src/pageScan/closeTable/components/FooterButtons.scss b/src/pageScan/closeTable/components/FooterButtons.scss
new file mode 100644
index 0000000..3da4889
--- /dev/null
+++ b/src/pageScan/closeTable/components/FooterButtons.scss
@@ -0,0 +1,65 @@
+.footer-buttons {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 20px 30px;
+  padding-bottom: calc(20px + env(safe-area-inset-bottom));
+  background-color: #FFFFFF;
+  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
+  z-index: 100;
+
+  // 主要按钮（立即关台、续费、帮他付款关台、AA制付款关台）
+  .primary-button {
+    width: 100%;
+    height: 88px;
+    border-radius: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+
+    &.green {
+      background-color: #01CA68;
+    }
+
+    .button-text {
+      font-size: 33px;
+      color: #FFFFFF;
+      font-weight: 500;
+    }
+  }
+
+  // 次要按钮（邀请球友、关灯重开）
+  .secondary-buttons {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+
+    .secondary-button {
+      flex: 1;
+      height: 88px;
+      border-radius: 44px;
+      background: #FFFFFF;
+      border: 2px solid #01CA68;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &.right {
+        background: linear-gradient(-90deg, #F0BE86 0%, #FADEB9 100%);
+        border: none;
+      }
+
+      .secondary-text {
+        font-size: 31px;
+        color: #01CA68;
+      }
+
+      &.right .secondary-text {
+        color: #844614;
+      }
+    }
+  }
+}
diff --git a/src/pageScan/closeTable/components/FooterButtons.tsx b/src/pageScan/closeTable/components/FooterButtons.tsx
new file mode 100644
index 0000000..9e76305
--- /dev/null
+++ b/src/pageScan/closeTable/components/FooterButtons.tsx
@@ -0,0 +1,116 @@
+/**
+ * 关台页面底部按钮组件
+ */
+import { View, Text } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import './FooterButtons.scss'
+
+interface FooterButtonsProps {
+  type: 'owner' | 'guest' // owner: 开台人员扫码, guest: 非开台人扫码
+}
+
+const FooterButtons = ({ type }: FooterButtonsProps) => {
+  // 立即关台
+  const handleCloseNow = () => {
+    console.log('立即关台')
+    Taro.showToast({
+      title: '功能开发中',
+      icon: 'none',
+      duration: 2000
+    })
+  }
+
+  // 续费
+  const handleRecharge = () => {
+    console.log('续费')
+    Taro.showToast({
+      title: '功能开发中',
+      icon: 'none',
+      duration: 2000
+    })
+  }
+
+  // 帮他付款关台
+  const handlePayForOther = () => {
+    console.log('帮他付款关台')
+    Taro.showToast({
+      title: '功能开发中',
+      icon: 'none',
+      duration: 2000
+    })
+  }
+
+  // AA制付款关台
+  const handleAAPay = () => {
+    console.log('AA制付款关台')
+    Taro.showToast({
+      title: '功能开发中',
+      icon: 'none',
+      duration: 2000
+    })
+  }
+
+  // 邀请球友
+  const handleInviteFriend = () => {
+    console.log('邀请球友')
+    Taro.showToast({
+      title: '功能开发中',
+      icon: 'none',
+      duration: 2000
+    })
+  }
+
+  // 关灯重开
+  const handleTurnOffRestart = () => {
+    console.log('关灯重开')
+    Taro.showToast({
+      title: '功能开发中',
+      icon: 'none',
+      duration: 2000
+    })
+  }
+
+  return (
+    <View className="footer-buttons">
+      {type === 'owner' ? (
+        <>
+          {/* 开台人员扫码 - 图1 */}
+          <View className="primary-button green" onClick={handleCloseNow}>
+            <Text className="button-text">立即关台</Text>
+          </View>
+          <View className="primary-button green" onClick={handleRecharge}>
+            <Text className="button-text">续费</Text>
+          </View>
+          <View className="secondary-buttons">
+            <View className="secondary-button" onClick={handleInviteFriend}>
+              <Text className="secondary-text">邀请球友</Text>
+            </View>
+            <View className="secondary-button right" onClick={handleTurnOffRestart}>
+              <Text className="secondary-text">关灯重开</Text>
+            </View>
+          </View>
+        </>
+      ) : (
+        <>
+          {/* 非开台人扫码 - 图2 */}
+          <View className="primary-button green" onClick={handlePayForOther}>
+            <Text className="button-text">帮他付款关台</Text>
+          </View>
+          <View className="primary-button green" onClick={handleAAPay}>
+            <Text className="button-text">AA制付款关台</Text>
+          </View>
+          <View className="secondary-buttons">
+            <View className="secondary-button" onClick={handleInviteFriend}>
+              <Text className="secondary-text">邀请球友</Text>
+            </View>
+            <View className="secondary-button right" onClick={handleTurnOffRestart}>
+              <Text className="secondary-text">关灯重开</Text>
+            </View>
+          </View>
+        </>
+      )}
+    </View>
+  )
+}
+
+export default FooterButtons
diff --git a/src/pageScan/closeTable/index.config.ts b/src/pageScan/closeTable/index.config.ts
new file mode 100644
index 0000000..5c4cac6
--- /dev/null
+++ b/src/pageScan/closeTable/index.config.ts
@@ -0,0 +1,5 @@
+export default {
+  navigationBarTitleText: '关台',
+  navigationBarBackgroundColor: '#FFFFFF',
+  navigationBarTextStyle: 'black',
+}
diff --git a/src/pageScan/closeTable/index.scss b/src/pageScan/closeTable/index.scss
new file mode 100644
index 0000000..d677146
--- /dev/null
+++ b/src/pageScan/closeTable/index.scss
@@ -0,0 +1,353 @@
+.close-table-page {
+  min-height: 100vh;
+  background-color: #F2F3F5;
+  padding-bottom: calc(280px + env(safe-area-inset-bottom) + 30px); // 为底部按钮留空间
+
+  // 内容区域
+  .content-area {
+    padding: 30px;
+
+    // 台球桌信息卡片
+    .table-card {
+      background: url('../startTable/images/startBiliardCardBg.png') no-repeat center;
+      background-size: cover;
+      height: 190px;
+      border-radius: 12px;
+      padding: 24px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      margin-bottom: 40px;
+
+      // 顶部：类型和电话
+      .card-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .table-type {
+          font-size: 25px;
+          color: #FFFFFF;
+        }
+
+        .phone-box {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+
+          .phone-icon {
+            width: 28px;
+            height: 28px;
+          }
+
+          .phone-text {
+            font-size: 25px;
+            color: #FFFFFF;
+          }
+        }
+      }
+
+      // 台球桌标题和使用状态
+      .table-title-row {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+
+        .table-title {
+          font-weight: bold;
+          font-size: 42px;
+          color: #FFFFFF;
+          line-height: 1.3;
+        }
+
+        .table-status {
+          font-size: 42px;
+          color: #01CA68;
+          font-weight: bold;
+          line-height: 1.3;
+        }
+      }
+
+      // 位置信息
+      .location-info {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        .location-icon {
+          width: 28px;
+          height: 28px;
+        }
+
+        .location-text {
+          font-size: 25px;
+          color: #FFFFFF;
+        }
+      }
+    }
+
+    // 开台订单信息卡片
+    .order-info-card {
+      background-color: #FFFFFF;
+      border-radius: 12px;
+      padding: 30px;
+      margin-bottom: 30px;
+
+      // 顶部：开台方式和详情按钮
+      .order-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 30px;
+
+        .order-tag {
+          background-color: transparent;
+          border: 1px solid #FF6B00;
+          border-radius: 4px;
+          padding: 6px 12px;
+
+          .tag-text {
+            font-size: 25px;
+            color: #FF6B00;
+          }
+        }
+
+        .detail-btn {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+
+          .detail-text {
+            font-size: 25px;
+            color: #595959;
+          }
+
+          .arrow-icon {
+            transition: transform 0.3s ease;
+
+            &.expanded {
+              transform: rotate(180deg);
+            }
+          }
+        }
+      }
+
+      // 订单统计
+      .order-stats {
+        display: flex;
+        justify-content: space-around;
+
+        .stat-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 20px;
+
+          .stat-value {
+            font-size: 37px;
+            color: #000000;
+            font-weight: 500;
+          }
+
+          .stat-label {
+            font-size: 25px;
+            color: #8D8D8D;
+          }
+        }
+      }
+
+      // 收费规则（展开时显示）
+      .pricing-rules {
+        // margin-top: 30px;
+        padding-top: 30px;
+        border-top: 1px solid #F2F3F5;
+
+        .rules-content {
+          background-color: #F2F3F5;
+          border-radius: 13px;
+          padding: 30px;
+          display: flex;
+          flex-direction: column;
+          gap: 25px;
+
+          .rules-title {
+            font-weight: 400;
+            font-size: 29px;
+            color: #000000;
+          }
+
+          .price-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .price-item {
+              display: flex;
+              align-items: center;
+              gap: 4px;
+
+              .price-label {
+                font-size: 25px;
+                color: #8B8B8B;
+              }
+
+              .price-value {
+                font-size: 25px;
+                color: #333333;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // 展开的详细信息卡片（支付信息、开台信息）
+    .info-card {
+      background-color: #FFFFFF;
+      border-radius: 12px;
+      padding: 30px;
+      margin-bottom: 30px;
+
+      .card-title {
+        font-size: 33px;
+        color: #000000;
+        font-weight: 500;
+        margin-bottom: 30px;
+        display: block;
+      }
+
+      .info-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 20px 0;
+        border-bottom: 1px solid #F2F3F5;
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        &.total {
+          padding-top: 25px;
+
+          .info-label {
+            color: #8B8B8B;
+          }
+
+          .info-value {
+            font-size: 35px;
+            font-weight: 500;
+          }
+        }
+
+        &.expandable {
+          cursor: pointer;
+        }
+
+        .info-label {
+          font-size: 30px;
+          color: #595959;
+          flex-shrink: 0;
+        }
+
+        .info-value {
+          font-size: 30px;
+          color: #000000;
+          text-align: right;
+          flex: 1;
+          margin-left: 20px;
+          word-break: break-all;
+        }
+
+        .info-value-box {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+        }
+
+        .info-desc {
+          font-size: 30px;
+          color: #8B8B8B;
+        }
+
+        .info-right {
+          display: flex;
+          align-items: center;
+          flex: 1;
+          justify-content: flex-end;
+
+          .info-desc {
+            font-size: 30px;
+            color: #8B8B8B;
+            flex: none;
+          }
+
+          .info-value {
+            font-size: 30px;
+            color: #FF6B00;
+            margin-left: 16px;
+            margin-right: 10px;
+            flex: none;
+            text-align: left;
+          }
+
+          .arrow-icon {
+            transition: transform 0.3s ease;
+            flex-shrink: 0;
+
+            &.expanded {
+              transform: rotate(180deg);
+            }
+          }
+        }
+      }
+
+      // 展开内容
+      .expand-content {
+        background-color: #F2F3F5;
+        border-radius: 13px;
+        padding: 25px;
+        margin-top: 15px;
+        margin-bottom: 15px;
+
+        .expand-text {
+          display: block;
+          font-size: 28px;
+          color: #333333;
+          line-height: 1.8;
+          margin-bottom: 10px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+
+        .expand-value {
+          display: block;
+          font-size: 28px;
+          color: #FF6B00;
+          line-height: 1.8;
+          margin-top: 10px;
+        }
+
+        // 优惠券展开内容（横向布局）
+        &.coupon {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .expand-text {
+            margin-bottom: 0;
+            flex: 1;
+          }
+
+          .expand-value {
+            margin-top: 0;
+            flex-shrink: 0;
+            margin-left: 20px;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/pageScan/closeTable/index.tsx b/src/pageScan/closeTable/index.tsx
new file mode 100644
index 0000000..e627abd
--- /dev/null
+++ b/src/pageScan/closeTable/index.tsx
@@ -0,0 +1,233 @@
+/**
+ * 关台页面
+ */
+import { View, Text, Image } from '@tarojs/components'
+import Taro, { useLoad, useRouter } from '@tarojs/taro'
+import { useState } from 'react'
+import { ArrowDown } from '@taroify/icons'
+import FooterButtons from './components/FooterButtons'
+import './index.scss'
+
+// 使用本地图片资源
+const phoneIcon = require('../startTable/images/phone.png')
+const locationIcon = require('../../assets/icon/locationIcon.png')
+
+const CloseTable = () => {
+  const router = useRouter()
+  const { type = 'owner' } = router.params as { type?: 'owner' | 'guest' } // owner: 开台人员, guest: 非开台人
+  const [expanded, setExpanded] = useState(false) // 订单详情是否展开
+  const [couponExpanded, setCouponExpanded] = useState(false) // 优惠券详情是否展开
+  const [priceExpanded, setPriceExpanded] = useState(false) // 收费标准详情是否展开
+
+  useLoad(() => {
+    console.log('关台页面加载，类型:', type)
+  })
+
+  // 拨打电话
+  const handlePhoneCall = () => {
+    Taro.makePhoneCall({
+      phoneNumber: '100-666-XXXX',
+    }).catch((err) => {
+      console.error('拨打电话失败:', err)
+    })
+  }
+
+  // 切换展开/收起
+  const handleToggleExpand = () => {
+    setExpanded(!expanded)
+  }
+
+  return (
+    <View className="close-table-page">
+      {/* 内容区域 */}
+      <View className="content-area">
+        {/* 台球桌信息卡片 */}
+        <View className="table-card">
+          {/* 顶部：类型和店名 */}
+          <View className="card-header">
+            <Text className="table-type">中式台球</Text>
+            <View className="phone-box" onClick={handlePhoneCall}>
+              <Image className="phone-icon" src={phoneIcon} mode="aspectFit" />
+              <Text className="phone-text">联系店长</Text>
+            </View>
+          </View>
+
+          {/* 台球桌标题和使用状态 */}
+          <View className="table-title-row">
+            <Text className="table-title">来力.山岩-A03/3号球桌</Text>
+            <Text className="table-status">使用中...</Text>
+          </View>
+
+          {/* 位置信息 */}
+          <View className="location-info">
+            <Image className="location-icon" src={locationIcon} mode="aspectFit" />
+            <Text className="location-text">北京黑八大师联盟球厅店</Text>
+          </View>
+        </View>
+
+        {/* 开台订单信息卡片 */}
+        <View className="order-info-card">
+          {/* 顶部：开台方式和详情按钮 */}
+          <View className="order-header" onClick={handleToggleExpand}>
+            <View className="order-tag">
+              <Text className="tag-text">开台方式</Text>
+            </View>
+            <View className="detail-btn">
+              <Text className="detail-text">详情</Text>
+              <ArrowDown 
+                className={`arrow-icon ${expanded ? 'expanded' : ''}`} 
+                size="16px" 
+                color="#646566"
+              />
+            </View>
+          </View>
+
+          {/* 订单统计 */}
+          <View className="order-stats">
+            <View className="stat-item">
+              <Text className="stat-value">1小时56分</Text>
+              <Text className="stat-label">已消费时长</Text>
+            </View>
+            <View className="stat-item">
+              <Text className="stat-value">100.00元</Text>
+              <Text className="stat-label">已消费金额</Text>
+            </View>
+          </View>
+
+          {/* 收费规则 */}
+          <View className="pricing-rules">
+            <View className="rules-content">
+              <Text className="rules-title">收费规则</Text>
+              <View className="price-row">
+                <View className="price-item">
+                  <Text className="price-label">价格：</Text>
+                  <Text className="price-value">90.00元/小时</Text>
+                </View>
+                <View className="price-item">
+                  <Text className="price-label">折扣价：</Text>
+                  <Text className="price-value">80.00元/小时</Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+
+        {/* 展开的详细信息 */}
+        {expanded && (
+          <>
+            {/* 支付信息卡片 */}
+            <View className="info-card">
+                <Text className="card-title">支付信息</Text>
+                
+                <View className="info-row">
+                  <Text className="info-label">在线总支付：</Text>
+                  <View className="info-value-box">
+                    <Text className="info-desc">0元</Text>
+                  </View>
+                </View>
+
+                <View className="info-row">
+                  <Text className="info-label">押金</Text>
+                  <Text className="info-value">0元</Text>
+                </View>
+
+                <View className="info-row">
+                  <Text className="info-label">订单原价</Text>
+                  <Text className="info-value">92.80元</Text>
+                </View>
+
+                {/* 优惠券抵扣 - 可展开 */}
+                <View className="info-row expandable" onClick={() => setCouponExpanded(!couponExpanded)}>
+                  <Text className="info-label">优惠券抵扣</Text>
+                  <View className="info-right">
+                    <Text className="info-desc">不可用</Text>
+                    <Text className="info-value">-96.00元</Text>
+                    <ArrowDown 
+                      className={`arrow-icon ${couponExpanded ? 'expanded' : ''}`}
+                      size="16px"
+                      color="#646566"
+                    />
+                  </View>
+                </View>
+
+                {/* 优惠券展开内容 */}
+                {couponExpanded && (
+                  <View className="expand-content coupon">
+                    <Text className="expand-text">美团：2小时通用券（新人奖励）</Text>
+                    <Text className="expand-value">-96.00元</Text>
+                  </View>
+                )}
+
+                <View className="info-row total">
+                  <Text className="info-label">待结算：</Text>
+                  <Text className="info-value">92.8元</Text>
+                </View>
+              </View>
+
+              {/* 开台信息卡片 */}
+              <View className="info-card">
+                <Text className="card-title">开台信息</Text>
+
+                <View className="info-row">
+                  <Text className="info-label">门店信息</Text>
+                  <Text className="info-value">XXXXXX店</Text>
+                </View>
+
+                <View className="info-row">
+                  <Text className="info-label">桌台信息</Text>
+                  <Text className="info-value">中式台球 来力.山岩-A03/3号球桌</Text>
+                </View>
+
+                <View className="info-row">
+                  <Text className="info-label">开始时间</Text>
+                  <Text className="info-value">2025-01-01 00:00:00</Text>
+                </View>
+
+                <View className="info-row">
+                  <Text className="info-label">使用时长</Text>
+                  <Text className="info-value">1小时56分</Text>
+                </View>
+
+                <View className="info-row">
+                  <Text className="info-label">订单编号</Text>
+                  <Text className="info-value">987654321012345678</Text>
+                </View>
+
+                {/* 收费标准 - 可展开 */}
+                <View className="info-row expandable" onClick={() => setPriceExpanded(!priceExpanded)}>
+                  <Text className="info-label">收费标准</Text>
+                  <View className="info-right">
+                    <Text className="info-value">80元/小时</Text>
+                    <ArrowDown 
+                      className={`arrow-icon ${priceExpanded ? 'expanded' : ''}`}
+                      size="16px"
+                      color="#646566"
+                    />
+                  </View>
+                </View>
+
+                {/* 收费标准展开内容 */}
+                {priceExpanded && (
+                  <View className="expand-content">
+                    <Text className="expand-text">1分钟以内不计费，超过1分钟按6.67元/5分钟计费</Text>
+                    <Text className="expand-text">• 00:00-11:00  原价90元/小时，折扣价80元/小时</Text>
+                    <Text className="expand-text">• 11:00-24:00  原价100元/小时，折扣价90元/小时</Text>
+                  </View>
+                )}
+
+                <View className="info-row">
+                  <Text className="info-label">支付方式</Text>
+                  <Text className="info-value">微信支付</Text>
+                </View>
+              </View>
+            </>
+          )}
+      </View>
+
+      {/* 底部按钮区域 */}
+      <FooterButtons type={type} />
+    </View>
+  )
+}
+
+export default CloseTable
diff --git a/src/pages/scan/index.tsx b/src/pages/scan/index.tsx
index db0f7d6..3ffa3ef 100644
--- a/src/pages/scan/index.tsx
+++ b/src/pages/scan/index.tsx
@@ -34,6 +34,20 @@ const ScanIndex = observer(() => {
     })
   }
 
+  // 关台-开台人员扫码
+  const handleCloseTableOwner = () => {
+    Taro.navigateTo({
+      url: '/pageScan/closeTable/index?type=owner'
+    })
+  }
+
+  // 关台-非开台人扫码
+  const handleCloseTableGuest = () => {
+    Taro.navigateTo({
+      url: '/pageScan/closeTable/index?type=guest'
+    })
+  }
+
   return (
     <View className="scan-page">
       <View className="header">
@@ -46,6 +60,12 @@ const ScanIndex = observer(() => {
         <Button className="start-table-btn" onClick={handleStartTable}>
           开台
         </Button>
+        <Button className="close-table-btn" onClick={handleCloseTableOwner}>
+          关台-开台人员扫码
+        </Button>
+        <Button className="close-table-btn" onClick={handleCloseTableGuest}>
+          关台-非开台人扫码
+        </Button>
       </View>
     </View>
   )