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

定时开台，自助开台

master
DU 6 months ago
parent
3f3be78f8a
commit
4518b10141
8 changed files with 929 additions and 0 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. 2
      src/app.config.ts
  2. 5
      src/pageScan/selfStart/index.config.ts
  3. 305
      src/pageScan/selfStart/index.scss
  4. 190
      src/pageScan/selfStart/index.tsx
  5. 18
      src/pageScan/startTable/index.tsx
  6. 5
      src/pageScan/timedStart/index.config.ts
  7. 247
      src/pageScan/timedStart/index.scss
  8. 157
      src/pageScan/timedStart/index.tsx

2
src/app.config.ts
Unescape View File

@ -35,6 +35,8 @@ export default defineAppConfig({ @@ -35,6 +35,8 @@ export default defineAppConfig({
name: 'scan-package',
pages: [
'startTable/index', // 开台页面
'selfStart/index', // 自助开台页面
'timedStart/index', // 定时开台页面
]
}
],

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

@ -0,0 +1,5 @@ @@ -0,0 +1,5 @@
export default definePageConfig({
navigationBarTitleText: '自助开台',
navigationBarBackgroundColor: '#121212',
navigationBarTextStyle: 'white',
})

305
src/pageScan/selfStart/index.scss
Unescape View File

@ -0,0 +1,305 @@ @@ -0,0 +1,305 @@
/**
* 自助开台页面样式
*/
.self-start-page {
min-height: 100vh;
background-color: #121212;
padding-bottom: 130px; // 为底部固定区域留空间
// 内容区域
.content-area {
padding: 30px 30px 0;
// 台球桌信息卡片
.table-card {
background-image: url('../startTable/images/startBiliardCardBg.png');
background-size: cover;
background-position: center;
border-radius: 12px;
padding: 24px;
margin-bottom: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
// 顶部：店名和电话
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.store-name {
font-size: 25px;
color: #FFFFFF;
}
.phone-box {
display: flex;
align-items: center;
gap: 8px;
.phone-icon {
width: 29px;
height: 29px;
}
.phone-text {
font-size: 25px;
color: #FFFFFF;
}
}
}
// 台球桌标题
.table-title {
font-weight: bold;
font-size: 42px;
color: #FFFFFF;
line-height: 1.4;
margin: 24px 0 26px;
}
// 价格信息
.price-info {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 24px;
.price-item {
display: flex;
align-items: baseline;
gap: 4px;
.price-label {
font-size: 25px;
color: #FFFFFF;
}
.price-value {
font-size: 22px;
color: #FFFFFF;
font-weight: bold;
// 文字渐变色
background: linear-gradient(0deg, #F6AE54 0%, #FBE49E 50%, #F6AE54 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.vip-price {
background: linear-gradient(90deg, #333333 0%, #000000 100%);
border-radius: 8px;
padding: 7px 9px;
.vip-text {
font-size: 22px;
color: #FFFFFF;
}
}
}
// 价格时段
.time-period {
font-size: 25px;
color: #FFFFFF;
}
}
// 押金卡片
.deposit-card {
background: #21212A;
border-radius: 13px;
padding: 34px 30px;
margin-bottom: 30px;
// 押金输入行
.deposit-input-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.deposit-label {
font-size: 31px;
color: #E6E6E6;
}
// 步进器样式覆盖（使用 CSS 变量）
.deposit-stepper {
// 输入框相关
--stepper-input-width: 100px;
--stepper-input-height: 56px;
--stepper-input-font-size: 31px;
--stepper-input-color: #FFFFFF;
--stepper-input-background-color: #21212A;
// 圆形风格 - 减号按钮
--stepper-circular-decrease-button-color: #FFFFFF;
--stepper-circular-decrease-button-background-color: #565B66;
--stepper-circular-decrease-button-border-color: #565B66;
// 圆形风格 - 加号按钮
--stepper-circular-increase-button-color: #FFFFFF;
--stepper-circular-increase-button-background-color: #565B66;
--stepper-circular-increase-button-border-color: #565B66;
}
}
// 押金说明
.deposit-tip {
font-size: 23px;
color: #999999;
line-height: 1.5;
}
// 分割线
.divider {
height: 1px;
background-color: #2A2A2A;
margin: 30px 0;
}
// 续费时长行
.duration-row {
display: flex;
justify-content: space-between;
align-items: center;
.duration-label,
.duration-value {
font-size: 31px;
color: #E6E6E6;
}
}
}
// 支付方式单元格（自定义实现）
.payment-cell {
height: 100px;
background-color: #21212A;
margin: 30px 0;
border-radius: 13px;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
.payment-label {
font-size: 31px;
color: #E6E6E6;
}
.payment-right {
display: flex;
align-items: center;
gap: 8px;
.payment-value {
font-size: 31px;
color: #E6E6E6;
}
.arrow-icon {
font-size: 40px;
color: #E6E6E6;
line-height: 1;
}
}
}
// 门店余额单元格（自定义实现）
.balance-cell {
height: 100px;
background-color: #21212A;
border-radius: 13px;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
.balance-left {
display: flex;
align-items: center;
gap: 18px;
.balance-label {
font-size: 31px;
color: #E6E6E6;
}
.balance-amount {
font-size: 31px;
color: #F5C8A6;
.balance-symbol {
font-size: 25px;
}
}
}
.recharge-btn {
background: linear-gradient(-90deg, #F0BE86 0%, #FADEB9 100%);
border-radius: 42px;
padding: 17px 36px;
.recharge-text {
font-size: 25px;
color: #844614;
}
}
}
}
// 底部固定区域
.footer-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 130px;
background-color: #1A1A1A;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30px;
box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.3);
// 支付信息
.payment-info {
display: flex;
align-items: baseline;
gap: 8px;
.payment-label {
font-size: 28px;
color: #FFFFFF;
}
.payment-symbol {
font-size: 28px;
color: #FFFFFF;
}
.payment-amount {
font-size: 45px;
color: #FFFFFF;
font-weight: bold;
}
}
// 立即开台按钮
.confirm-btn {
background-color: #01CA68;
border-radius: 50px;
padding: 20px 60px;
.confirm-text {
font-size: 31px;
color: #FFFFFF;
font-weight: bold;
}
}
}
}

190
src/pageScan/selfStart/index.tsx
Unescape View File

@ -0,0 +1,190 @@ @@ -0,0 +1,190 @@
/**
* 自助开台页面
*/
import { View, Text, Image } from '@tarojs/components'
import Taro, { useLoad } from '@tarojs/taro'
import { useState } from 'react'
import { Stepper } from '@taroify/core'
import './index.scss'
// 使用本地图片资源
const phoneIcon = require('../startTable/images/phone.png')
const SelfStart = () => {
const [deposit, setDeposit] = useState(100) // 押金金额
const [paymentMethod] = useState('微信支付') // 支付方式
const [storeBalance] = useState(20.00) // 门店余额
useLoad(() => {
console.log('自助开台页面加载')
// 显示提示 Toast
setTimeout(() => {
Taro.showToast({
title: '开台后需要手动进行关台哦！',
icon: 'none',
duration: 2000,
})
}, 300)
})
// 拨打电话
const handlePhoneCall = () => {
Taro.makePhoneCall({
phoneNumber: '100-666-XXXX',
}).catch((err) => {
console.error('拨打电话失败:', err)
})
}
// 押金变化
const handleDepositChange = (value: number) => {
setDeposit(value)
}
// 计算续费时长（以小时为单位，假设 28.8元/小时）
const calculateDuration = () => {
const hours = Math.floor(deposit / 28.8)
const minutes = Math.round((deposit / 28.8 - hours) * 60)
return `约${hours}小时${minutes}分钟`
}
// 选择支付方式
const handleSelectPayment = () => {
Taro.showToast({
title: '暂时只支持微信支付',
icon: 'none',
duration: 2000
})
}
// 去充值
const handleRecharge = () => {
console.log('去充值')
Taro.showToast({
title: '功能开发中',
icon: 'none',
duration: 2000
})
}
// 立即开台
const handleConfirmStart = () => {
console.log('立即开台，押金:', deposit)
Taro.showToast({
title: '功能开发中',
icon: 'none',
duration: 2000
})
}
return (
<View className="self-start-page">
{/* 内容区域 */}
<View className="content-area">
{/* 台球桌信息卡片 */}
<View className="table-card">
{/* 顶部：店名和电话 */}
<View className="card-header">
<Text className="store-name">北京黑八大师联盟球厅店</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">
<Text>[中式台球]来力.山岩-A03/3号球桌</Text>
</View>
{/* 价格信息 */}
<View className="price-info">
<View className="price-item">
<Text className="price-value">¥28.80</Text>
<Text className="price-label">/小时</Text>
</View>
<View className="price-item">
<Text className="price-label">押金</Text>
<Text className="price-value">¥100.00</Text>
</View>
<View className="vip-price">
<Text className="vip-text">VIP ¥20.00</Text>
</View>
</View>
{/* 价格时段 */}
<View className="time-period">
<Text>价格时段：00:00-24:00</Text>
</View>
</View>
{/* 押金卡片 */}
<View className="deposit-card">
{/* 押金输入 */}
<View className="deposit-input-row">
<Text className="deposit-label">押金（元）</Text>
<Stepper
value={deposit}
min={100}
step={10}
onChange={handleDepositChange}
shape="circular"
size="27px"
className="deposit-stepper"
/>
</View>
{/* 押金说明 */}
<Text className="deposit-tip">押金不小于100元，手动关台自动退剩余押金</Text>
{/* 分割线 */}
<View className="divider" />
{/* 续费时长 */}
<View className="duration-row">
<Text className="duration-label">续费时长</Text>
<Text className="duration-value">{calculateDuration()}</Text>
</View>
</View>
{/* 支付方式 */}
<View className="payment-cell" onClick={handleSelectPayment}>
<Text className="payment-label">支付方式</Text>
<View className="payment-right">
<Text className="payment-value">{paymentMethod}</Text>
{/* <Text className="arrow-icon">›</Text> */}
</View>
</View>
{/* 门店余额 */}
<View className="balance-cell">
<View className="balance-left">
<Text className="balance-label">门店余额</Text>
<Text className="balance-amount">
<Text className="balance-symbol">￥</Text>
{storeBalance.toFixed(2)}
</Text>
</View>
<View className="recharge-btn" onClick={handleRecharge}>
<Text className="recharge-text">去充值</Text>
</View>
</View>
</View>
{/* 底部固定区域 */}
<View className="footer-bar">
<View className="payment-info">
<Text className="payment-label">需支付</Text>
<Text className="payment-symbol">￥</Text>
<Text className="payment-amount">{deposit.toFixed(2)}</Text>
</View>
<View className="confirm-btn" onClick={handleConfirmStart}>
<Text className="confirm-text">立即开台</Text>
</View>
</View>
</View>
)
}
export default SelfStart

18
src/pageScan/startTable/index.tsx
Unescape View File

@ -49,6 +49,24 @@ const StartTable = () => { @@ -49,6 +49,24 @@ const StartTable = () => {
// 去开台
const handleStartTable = (method: any) => {
console.log('选择开台方式:', method)
// 如果是自助开台，跳转到自助开台页面
if (method.id === 1) {
Taro.navigateTo({
url: '/pageScan/selfStart/index'
})
return
}
// 如果是定时开台，跳转到定时开台页面
if (method.id === 2) {
Taro.navigateTo({
url: '/pageScan/timedStart/index'
})
return
}
// 其他方式暂时提示功能开发中
Taro.showToast({
title: '功能开发中',
icon: 'none',

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

@ -0,0 +1,5 @@ @@ -0,0 +1,5 @@
export default definePageConfig({
navigationBarTitleText: '定时开台',
navigationBarBackgroundColor: '#121212',
navigationBarTextStyle: 'white',
})

247
src/pageScan/timedStart/index.scss
Unescape View File

@ -0,0 +1,247 @@ @@ -0,0 +1,247 @@
/**
* 定时开台页面样式
*/
.timed-start-page {
min-height: 100vh;
background-color: #121212;
padding-bottom: 130px; // 为底部固定区域留空间
// 内容区域
.content-area {
padding: 30px 30px 0;
// 台球桌信息卡片
.table-card {
background-image: url('../startTable/images/startBiliardCardBg.png');
background-size: cover;
background-position: center;
border-radius: 12px;
padding: 24px;
margin-bottom: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
// 顶部：店名和电话
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.store-name {
font-size: 25px;
color: #FFFFFF;
}
.phone-box {
display: flex;
align-items: center;
gap: 8px;
.phone-icon {
width: 29px;
height: 29px;
}
.phone-text {
font-size: 25px;
color: #FFFFFF;
}
}
}
// 台球桌标题
.table-title {
font-weight: bold;
font-size: 42px;
color: #FFFFFF;
line-height: 1.4;
margin: 24px 0 26px;
}
// 价格信息
.price-info {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 24px;
.price-item {
display: flex;
align-items: baseline;
gap: 4px;
.price-label {
font-size: 25px;
color: #FFFFFF;
}
.price-value {
font-size: 22px;
color: #FFFFFF;
font-weight: bold;
// 文字渐变色
background: linear-gradient(0deg, #F6AE54 0%, #FBE49E 50%, #F6AE54 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.vip-price {
background: linear-gradient(90deg, #333333 0%, #000000 100%);
border-radius: 8px;
padding: 7px 9px;
.vip-text {
font-size: 22px;
color: #FFFFFF;
}
}
}
// 价格时段
.time-period {
font-size: 25px;
color: #FFFFFF;
}
}
// 温馨提示
.warm-tip {
display: block;
font-size: 25px;
color: #999999;
margin: 40px 0 32px;
}
// 开台时长卡片
.duration-card {
background: #21212A;
border-radius: 13px;
padding: 34px 30px;
margin-bottom: 30px;
.card-title {
display: block;
font-size: 31px;
color: #E6E6E6;
margin-bottom: 30px;
}
// 时长选项网格
.duration-options {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 27px;
row-gap: 25px;
.duration-btn {
background-color: #3A3D42;
border-radius: 8px;
padding: 22px 24px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s;
// 选中状态
&.active {
background-color: #01CA68;
}
.duration-text {
font-size: 29px;
color: #FFFFFF;
white-space: nowrap;
}
}
}
}
// 支付方式单元格
.payment-cell {
height: 100px;
background-color: #21212A;
margin: 30px 0;
border-radius: 13px;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
.payment-label {
font-size: 31px;
color: #E6E6E6;
}
.payment-right {
display: flex;
align-items: center;
gap: 8px;
.payment-value {
font-size: 31px;
color: #E6E6E6;
}
.arrow-icon {
font-size: 40px;
color: #E6E6E6;
line-height: 1;
}
}
}
}
// 底部固定区域
.footer-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 130px;
background-color: #1A1A1A;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30px;
box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.3);
// 支付信息
.payment-info {
display: flex;
align-items: baseline;
gap: 8px;
.payment-label {
font-size: 28px;
color: #FFFFFF;
}
.payment-symbol {
font-size: 28px;
color: #FFFFFF;
}
.payment-amount {
font-size: 45px;
color: #FFFFFF;
font-weight: bold;
}
}
// 立即开台按钮
.confirm-btn {
background-color: #01CA68;
border-radius: 50px;
padding: 20px 60px;
.confirm-text {
font-size: 31px;
color: #FFFFFF;
font-weight: bold;
}
}
}
}

157
src/pageScan/timedStart/index.tsx
Unescape View File

@ -0,0 +1,157 @@ @@ -0,0 +1,157 @@
/**
* 定时开台页面
*/
import { View, Text, Image } from '@tarojs/components'
import Taro, { useLoad } from '@tarojs/taro'
import { useState } from 'react'
import './index.scss'
// 使用本地图片资源
const phoneIcon = require('../startTable/images/phone.png')
// 时长选项（小时）
const durationOptions = [
{ id: 1, label: '1小时', value: 1 },
{ id: 2, label: '2小时', value: 2 },
{ id: 3, label: '3小时', value: 3 },
{ id: 4, label: '4小时', value: 4 },
{ id: 5, label: '5小时', value: 5 },
{ id: 6, label: '6小时', value: 6 },
{ id: 7, label: '7小时', value: 7 },
{ id: 8, label: '8小时', value: 8 },
]
const TimedStart = () => {
const [selectedDuration, setSelectedDuration] = useState(1) // 选中的时长
const [paymentMethod] = useState('微信支付') // 支付方式
useLoad(() => {
console.log('定时开台页面加载')
})
// 拨打电话
const handlePhoneCall = () => {
Taro.makePhoneCall({
phoneNumber: '100-666-XXXX',
}).catch((err) => {
console.error('拨打电话失败:', err)
})
}
// 选择时长
const handleSelectDuration = (value: number) => {
setSelectedDuration(value)
}
// 选择支付方式
const handleSelectPayment = () => {
Taro.showToast({
title: '暂时只支持微信支付',
icon: 'none',
duration: 2000
})
}
// 计算支付金额（28.8元/小时）
const calculateAmount = () => {
return (selectedDuration * 28.8).toFixed(2)
}
// 立即开台
const handleConfirmStart = () => {
console.log('立即开台，时长:', selectedDuration, '小时')
Taro.showToast({
title: '功能开发中',
icon: 'none',
duration: 2000
})
}
return (
<View className="timed-start-page">
{/* 内容区域 */}
<View className="content-area">
{/* 台球桌信息卡片 */}
<View className="table-card">
{/* 顶部：店名和电话 */}
<View className="card-header">
<Text className="store-name">北京黑八大师联盟球厅店</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">
<Text>[中式台球]来力.山岩-A03/3号球桌</Text>
</View>
{/* 价格信息 */}
<View className="price-info">
<View className="price-item">
<Text className="price-value">¥28.80</Text>
<Text className="price-label">/小时</Text>
</View>
<View className="price-item">
<Text className="price-label">押金</Text>
<Text className="price-value">¥100.00</Text>
</View>
<View className="vip-price">
<Text className="vip-text">VIP ¥20.00</Text>
</View>
</View>
{/* 价格时段 */}
<View className="time-period">
<Text>价格时段：00:00-24:00</Text>
</View>
</View>
{/* 温馨提示 */}
<Text className="warm-tip">温馨提示：定时开台为预付费，提前结束不退费。</Text>
{/* 开台时长选择 */}
<View className="duration-card">
<Text className="card-title">选择开台时长</Text>
{/* 时长选项 */}
<View className="duration-options">
{durationOptions.map((option) => (
<View
key={option.id}
className={`duration-btn ${selectedDuration === option.value ? 'active' : ''}`}
onClick={() => handleSelectDuration(option.value)}
>
<Text className="duration-text">{option.label}</Text>
</View>
))}
</View>
</View>
{/* 支付方式 */}
<View className="payment-cell" onClick={handleSelectPayment}>
<Text className="payment-label">支付方式</Text>
<View className="payment-right">
<Text className="payment-value">{paymentMethod}</Text>
<Text className="arrow-icon">›</Text>
</View>
</View>
</View>
{/* 底部固定区域 */}
<View className="footer-bar">
<View className="payment-info">
<Text className="payment-label">需支付</Text>
<Text className="payment-symbol">￥</Text>
<Text className="payment-amount">{calculateAmount()}</Text>
</View>
<View className="confirm-btn" onClick={handleConfirmStart}>
<Text className="confirm-text">立即开台</Text>
</View>
</View>
</View>
)
}
export default TimedStart
Write Preview
Loading…
Cancel
Save