diff --git a/src/app.config.ts b/src/app.config.ts index 81ef32c..8673078 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -40,6 +40,7 @@ export default defineAppConfig({ 'couponStart/index', // 团购券开台页面 'closeTable/index', // 关台页面 'renewFee/index', // 续费页面 + 'turnOffRestart/index', // 关灯重开页面 ] } ], diff --git a/src/pageScan/closeTable/components/FooterButtons.tsx b/src/pageScan/closeTable/components/FooterButtons.tsx index be13b02..57c2b0f 100644 --- a/src/pageScan/closeTable/components/FooterButtons.tsx +++ b/src/pageScan/closeTable/components/FooterButtons.tsx @@ -13,10 +13,8 @@ const FooterButtons = ({ type }: FooterButtonsProps) => { // 立即关台 const handleCloseNow = () => { console.log('立即关台') - Taro.showToast({ - title: '功能开发中', - icon: 'none', - duration: 2000 + Taro.navigateTo({ + url: '/pageScan/turnOffRestart/index' }) } @@ -61,10 +59,8 @@ const FooterButtons = ({ type }: FooterButtonsProps) => { // 关灯重开 const handleTurnOffRestart = () => { console.log('关灯重开') - Taro.showToast({ - title: '功能开发中', - icon: 'none', - duration: 2000 + Taro.navigateTo({ + url: '/pageScan/turnOffRestart/index' }) } diff --git a/src/pageScan/turnOffRestart/index.config.ts b/src/pageScan/turnOffRestart/index.config.ts new file mode 100644 index 0000000..161b0d0 --- /dev/null +++ b/src/pageScan/turnOffRestart/index.config.ts @@ -0,0 +1,5 @@ +export default { + navigationBarTitleText: '关灯重开', + navigationBarBackgroundColor: '#FFFFFF', + navigationBarTextStyle: 'black', +} diff --git a/src/pageScan/turnOffRestart/index.scss b/src/pageScan/turnOffRestart/index.scss new file mode 100644 index 0000000..fbfff33 --- /dev/null +++ b/src/pageScan/turnOffRestart/index.scss @@ -0,0 +1,231 @@ +.turn-off-restart-page { + min-height: 100vh; + background-color: #F2F3F5; + padding-bottom: calc(120px + env(safe-area-inset-bottom)); // 为底部按钮留空间 + + // 内容区域 + .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; + } + } + } + + // 温馨提示卡片 + .tip-card { + background-color: transparent; + padding: 0 0 32px 0; + display: flex; + align-items: flex-start; + gap: 4px; + + .tip-label { + font-size: 25px; + color: #FF6B00; + flex-shrink: 0; + } + + .tip-text { + font-size: 25px; + color: #999999; + line-height: 1.5; + } + } + + // 开台订单信息卡片 + .order-info-card { + background-color: #FFFFFF; + border-radius: 12px; + padding: 30px; + margin-bottom: 30px; + + // 顶部:开台方式 + .order-header { + margin-bottom: 30px; + + .order-tag { + background-color: transparent; + border: 1px solid #FF6B00; + border-radius: 4px; + padding: 6px 12px; + display: inline-block; + + .tag-text { + font-size: 25px; + color: #FF6B00; + } + } + } + + // 订单统计 + .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 { + 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; + } + } + } + } + } + } + } + + // 底部固定区域(只有一个按钮) + .footer-bar { + 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); + + .confirm-btn { + width: 100%; + height: 88px; + background-color: #01CA68; + border-radius: 44px; + display: flex; + align-items: center; + justify-content: center; + + .confirm-text { + font-size: 33px; + color: #FFFFFF; + font-weight: 500; + } + } + } +} diff --git a/src/pageScan/turnOffRestart/index.tsx b/src/pageScan/turnOffRestart/index.tsx new file mode 100644 index 0000000..f603561 --- /dev/null +++ b/src/pageScan/turnOffRestart/index.tsx @@ -0,0 +1,120 @@ +/** + * 关灯重开页面 + */ +import { View, Text, Image } from '@tarojs/components' +import Taro, { useLoad } from '@tarojs/taro' +import './index.scss' + +// 使用本地图片资源 +const phoneIcon = require('../startTable/images/phone.png') +const locationIcon = require('../../assets/icon/locationIcon.png') + +const TurnOffRestart = () => { + useLoad(() => { + console.log('关灯重开页面加载') + }) + + // 拨打电话 + const handlePhoneCall = () => { + Taro.makePhoneCall({ + phoneNumber: '100-666-XXXX', + }).catch((err) => { + console.error('拨打电话失败:', err) + }) + } + + // 确认结算 + const handleConfirmSettle = () => { + console.log('确认结算') + Taro.showToast({ + title: '功能开发中', + icon: 'none', + duration: 2000 + }) + } + + return ( + + {/* 内容区域 */} + + {/* 台球桌信息卡片 */} + + {/* 顶部:类型和店名 */} + + 中式台球 + + + 联系店长 + + + + {/* 台球桌标题和使用状态 */} + + 来力.山岩-A03/3号球桌 + 使用中... + + + {/* 位置信息 */} + + + 北京黑八大师联盟球厅店 + + + + {/* 温馨提示 */} + + 温馨提示: + 结算本次消费金额,押金于最后关台时结算。 + + + {/* 开台订单信息卡片 */} + + {/* 开台方式标签 */} + + + 开台方式 + + + + {/* 订单统计 */} + + + 1小时56分钟 + 消费时长 + + + 100.00元 + 消费金额 + + + + {/* 收费规则 */} + + + 收费规则 + + + 价格: + 90.00元/小时 + + + 折扣价: + 80.00元/小时 + + + + + + + + {/* 底部固定区域 */} + + + 确认结算 + + + + ) +} + +export default TurnOffRestart