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 (
+
+ {type === 'owner' ? (
+ <>
+ {/* 开台人员扫码 - 图1 */}
+
+ 立即关台
+
+
+ 续费
+
+
+
+ 邀请球友
+
+
+ 关灯重开
+
+
+
+ ) : (
+ <>
+ {/* 非开台人扫码 - 图2 */}
+
+ 帮他付款关台
+
+
+ AA制付款关台
+
+
+
+ 邀请球友
+
+
+ 关灯重开
+
+
+
+ )}
+
+ )
+}
+
+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 (
+
+ {/* 内容区域 */}
+
+ {/* 台球桌信息卡片 */}
+
+ {/* 顶部：类型和店名 */}
+
+ 中式台球
+
+
+ 联系店长
+
+
+
+ {/* 台球桌标题和使用状态 */}
+
+ 来力.山岩-A03/3号球桌
+ 使用中...
+
+
+ {/* 位置信息 */}
+
+
+ 北京黑八大师联盟球厅店
+
+
+
+ {/* 开台订单信息卡片 */}
+
+ {/* 顶部：开台方式和详情按钮 */}
+
+
+ 开台方式
+
+
+ 详情
+
+
+
+
+ {/* 订单统计 */}
+
+
+ 1小时56分
+ 已消费时长
+
+
+ 100.00元
+ 已消费金额
+
+
+
+ {/* 收费规则 */}
+
+
+ 收费规则
+
+
+ 价格：
+ 90.00元/小时
+
+
+ 折扣价：
+ 80.00元/小时
+
+
+
+
+
+
+ {/* 展开的详细信息 */}
+ {expanded && (
+ <>
+ {/* 支付信息卡片 */}
+
+ 支付信息
+
+
+ 在线总支付：
+
+ 0元
+
+
+
+
+ 押金
+ 0元
+
+
+
+ 订单原价
+ 92.80元
+
+
+ {/* 优惠券抵扣 - 可展开 */}
+ setCouponExpanded(!couponExpanded)}>
+ 优惠券抵扣
+
+ 不可用
+ -96.00元
+
+
+
+
+ {/* 优惠券展开内容 */}
+ {couponExpanded && (
+
+ 美团：2小时通用券（新人奖励）
+ -96.00元
+
+ )}
+
+
+ 待结算：
+ 92.8元
+
+
+
+ {/* 开台信息卡片 */}
+
+ 开台信息
+
+
+ 门店信息
+ XXXXXX店
+
+
+
+ 桌台信息
+ 中式台球 来力.山岩-A03/3号球桌
+
+
+
+ 开始时间
+ 2025-01-01 00:00:00
+
+
+
+ 使用时长
+ 1小时56分
+
+
+
+ 订单编号
+ 987654321012345678
+
+
+ {/* 收费标准 - 可展开 */}
+ setPriceExpanded(!priceExpanded)}>
+ 收费标准
+
+ 80元/小时
+
+
+
+
+ {/* 收费标准展开内容 */}
+ {priceExpanded && (
+
+ 1分钟以内不计费，超过1分钟按6.67元/5分钟计费
+ • 00:00-11:00 原价90元/小时，折扣价80元/小时
+ • 11:00-24:00 原价100元/小时，折扣价90元/小时
+
+ )}
+
+
+ 支付方式
+ 微信支付
+
+
+
+ )}
+
+
+ {/* 底部按钮区域 */}
+
+
+ )
+}
+
+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 (
@@ -46,6 +60,12 @@ const ScanIndex = observer(() => {
+
+
)