dujiabo
/
billiard-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

关灯重开

master
DU 6 months ago
parent
f288d6f448
commit
0b6ddd07a4
5 changed files with 361 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/app.config.ts
  2. 12
      src/pageScan/closeTable/components/FooterButtons.tsx
  3. 5
      src/pageScan/turnOffRestart/index.config.ts
  4. 231
      src/pageScan/turnOffRestart/index.scss
  5. 120
      src/pageScan/turnOffRestart/index.tsx

1
src/app.config.ts
Unescape View File

@ -40,6 +40,7 @@ export default defineAppConfig({ @@ -40,6 +40,7 @@ export default defineAppConfig({
'couponStart/index', // 团购券开台页面
'closeTable/index', // 关台页面
'renewFee/index', // 续费页面
'turnOffRestart/index', // 关灯重开页面
]
}
],

12
src/pageScan/closeTable/components/FooterButtons.tsx
Unescape View File

@ -13,10 +13,8 @@ const FooterButtons = ({ type }: FooterButtonsProps) => { @@ -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) => { @@ -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'
})
}

5
src/pageScan/turnOffRestart/index.config.ts
Unescape View File

@ -0,0 +1,5 @@ @@ -0,0 +1,5 @@
export default {
navigationBarTitleText: '关灯重开',
navigationBarBackgroundColor: '#FFFFFF',
navigationBarTextStyle: 'black',
}

231
src/pageScan/turnOffRestart/index.scss
Unescape View File

@ -0,0 +1,231 @@ @@ -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;
}
}
}
}

120
src/pageScan/turnOffRestart/index.tsx
Unescape View File

@ -0,0 +1,120 @@ @@ -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 (
<View className="turn-off-restart-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="tip-card">
<Text className="tip-label">温馨提示：</Text>
<Text className="tip-text">结算本次消费金额，押金于最后关台时结算。</Text>
</View>
{/* 开台订单信息卡片 */}
<View className="order-info-card">
{/* 开台方式标签 */}
<View className="order-header">
<View className="order-tag">
<Text className="tag-text">开台方式</Text>
</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>
</View>
{/* 底部固定区域 */}
<View className="footer-bar">
<View className="confirm-btn" onClick={handleConfirmSettle}>
<Text className="confirm-text">确认结算</Text>
</View>
</View>
</View>
)
}
export default TurnOffRestart
Write Preview
Loading…
Cancel
Save