9 changed files with 330 additions and 1 deletions
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 80 KiB |
@ -0,0 +1,5 @@
@@ -0,0 +1,5 @@
|
||||
export default { |
||||
navigationBarTitleText: '', |
||||
navigationBarBackgroundColor: '#121212', |
||||
navigationBarTextStyle: 'white', |
||||
} |
||||
@ -0,0 +1,158 @@
@@ -0,0 +1,158 @@
|
||||
.start-table-page { |
||||
min-height: 100vh; |
||||
background-color: #121212; |
||||
|
||||
// 内容区域 |
||||
.content-area { |
||||
padding: 30px 30px 0; |
||||
} |
||||
|
||||
// 台球桌信息卡片 |
||||
.table-card { |
||||
// height: 265px; |
||||
background-image: url('./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; |
||||
|
||||
.store-name { |
||||
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 { |
||||
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; |
||||
|
||||
.price-value { |
||||
font-size: 40px; |
||||
color: #FFFFFF; |
||||
} |
||||
|
||||
.price-label { |
||||
font-size: 25px; |
||||
color: #FFFFFF; |
||||
margin-left: 4px; |
||||
} |
||||
} |
||||
|
||||
.vip-price { |
||||
background: linear-gradient(90deg, #333333 0%, #000000 100%); |
||||
border-radius: 8px; |
||||
padding: 7px 9px; |
||||
|
||||
.vip-text { |
||||
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; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 价格时段 |
||||
.time-period { |
||||
font-size: 25px; |
||||
color: #FFFFFF; |
||||
} |
||||
} |
||||
|
||||
// 开台方式列表 |
||||
.methods-list { |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 30px; |
||||
|
||||
.method-item { |
||||
background-color: #202029; |
||||
border-radius: 13px; |
||||
padding: 33px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
|
||||
.method-left { |
||||
flex: 1; |
||||
display: flex; |
||||
flex-direction: column; |
||||
gap: 12px; |
||||
|
||||
.method-title { |
||||
font-weight: bold; |
||||
font-size: 33px; |
||||
color: #FFFEFE; |
||||
} |
||||
|
||||
.method-desc { |
||||
font-size: 25px; |
||||
color: #999999; |
||||
line-height: 1.6; |
||||
} |
||||
} |
||||
|
||||
.method-right { |
||||
.start-btn { |
||||
width: 160px; |
||||
height: 83px; |
||||
background: #01CA68; |
||||
border-radius: 42px; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
|
||||
.btn-text { |
||||
font-size: 31px; |
||||
color: #FFFFFF; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,124 @@
@@ -0,0 +1,124 @@
|
||||
/** |
||||
* 开台页面 |
||||
*/ |
||||
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) |
||||
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 |
||||
Loading…
Reference in new issue