You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
3.8 KiB
142 lines
3.8 KiB
/** |
|
* 开台页面 |
|
*/ |
|
import { View, Text, Image } from '@tarojs/components' |
|
import Taro, { useLoad } from '@tarojs/taro' |
|
import './index.scss' |
|
|
|
// 使用本地图片资源 |
|
const phoneIcon = require('./images/phone.png') |
|
|
|
// 开台方式列表 |
|
const startTableMethods = [ |
|
{ |
|
id: 1, |
|
title: '自助开台', |
|
description: '会员余额>押金直接开台或支付开台', |
|
}, |
|
{ |
|
id: 2, |
|
title: '定时开台', |
|
description: '设定开台时长', |
|
}, |
|
{ |
|
id: 3, |
|
title: '信用开台', |
|
description: '信用分≥550，直接开台，关台时结账', |
|
}, |
|
{ |
|
id: 4, |
|
title: '团购券开台', |
|
description: '使用美团、抖音等团购券开台', |
|
}, |
|
] |
|
|
|
const StartTable = () => { |
|
useLoad(() => { |
|
console.log('开台页面加载') |
|
}) |
|
|
|
// 拨打电话 |
|
const handlePhoneCall = () => { |
|
Taro.makePhoneCall({ |
|
phoneNumber: '100-666-XXXX', |
|
}).catch((err) => { |
|
console.error('拨打电话失败:', err) |
|
}) |
|
} |
|
|
|
// 去开台 |
|
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', |
|
duration: 2000 |
|
}) |
|
} |
|
|
|
return ( |
|
<View className="start-table-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="methods-list"> |
|
{startTableMethods.map((method) => ( |
|
<View key={method.id} className="method-item"> |
|
<View className="method-left"> |
|
<Text className="method-title">{method.title}</Text> |
|
<Text className="method-desc">{method.description}</Text> |
|
</View> |
|
<View className="method-right"> |
|
<View |
|
className="start-btn" |
|
onClick={() => handleStartTable(method)} |
|
> |
|
<Text className="btn-text">去开台</Text> |
|
</View> |
|
</View> |
|
</View> |
|
))} |
|
</View> |
|
</View> |
|
</View> |
|
) |
|
} |
|
|
|
export default StartTable
|
|
|