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

关台页面

master
DU 6 months ago
parent
c729c05c54
commit
8e0db3215b
7 changed files with 793 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. 1
      src/app.config.ts
  2. 65
      src/pageScan/closeTable/components/FooterButtons.scss
  3. 116
      src/pageScan/closeTable/components/FooterButtons.tsx
  4. 5
      src/pageScan/closeTable/index.config.ts
  5. 353
      src/pageScan/closeTable/index.scss
  6. 233
      src/pageScan/closeTable/index.tsx
  7. 20
      src/pages/scan/index.tsx

1
src/app.config.ts
Unescape View File

@ -38,6 +38,7 @@ export default defineAppConfig({ @@ -38,6 +38,7 @@ export default defineAppConfig({
'selfStart/index', // 自助开台页面
'timedStart/index', // 定时开台页面
'couponStart/index', // 团购券开台页面
'closeTable/index', // 关台页面
]
}
],

65
src/pageScan/closeTable/components/FooterButtons.scss
Unescape View File

@ -0,0 +1,65 @@ @@ -0,0 +1,65 @@
.footer-buttons {
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);
z-index: 100;
// 主要按钮（立即关台、续费、帮他付款关台、AA制付款关台）
.primary-button {
width: 100%;
height: 88px;
border-radius: 44px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
&.green {
background-color: #01CA68;
}
.button-text {
font-size: 33px;
color: #FFFFFF;
font-weight: 500;
}
}
// 次要按钮（邀请球友、关灯重开）
.secondary-buttons {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
.secondary-button {
flex: 1;
height: 88px;
border-radius: 44px;
background: #FFFFFF;
border: 2px solid #01CA68;
display: flex;
align-items: center;
justify-content: center;
&.right {
background: linear-gradient(-90deg, #F0BE86 0%, #FADEB9 100%);
border: none;
}
.secondary-text {
font-size: 31px;
color: #01CA68;
}
&.right .secondary-text {
color: #844614;
}
}
}
}

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

@ -0,0 +1,116 @@ @@ -0,0 +1,116 @@
/**
* 关台页面底部按钮组件
*/
import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './FooterButtons.scss'
interface FooterButtonsProps {
type: 'owner' | 'guest' // owner: 开台人员扫码, guest: 非开台人扫码
}
const FooterButtons = ({ type }: FooterButtonsProps) => {
// 立即关台
const handleCloseNow = () => {
console.log('立即关台')
Taro.showToast({
title: '功能开发中',
icon: 'none',
duration: 2000
})
}
// 续费
const handleRecharge = () => {
console.log('续费')
Taro.showToast({
title: '功能开发中',
icon: 'none',
duration: 2000
})
}
// 帮他付款关台
const handlePayForOther = () => {
console.log('帮他付款关台')
Taro.showToast({
title: '功能开发中',
icon: 'none',
duration: 2000
})
}
// AA制付款关台
const handleAAPay = () => {
console.log('AA制付款关台')
Taro.showToast({
title: '功能开发中',
icon: 'none',
duration: 2000
})
}
// 邀请球友
const handleInviteFriend = () => {
console.log('邀请球友')
Taro.showToast({
title: '功能开发中',
icon: 'none',
duration: 2000
})
}
// 关灯重开
const handleTurnOffRestart = () => {
console.log('关灯重开')
Taro.showToast({
title: '功能开发中',
icon: 'none',
duration: 2000
})
}
return (
<View className="footer-buttons">
{type === 'owner' ? (
<>
{/* 开台人员扫码 - 图1 */}
<View className="primary-button green" onClick={handleCloseNow}>
<Text className="button-text">立即关台</Text>
</View>
<View className="primary-button green" onClick={handleRecharge}>
<Text className="button-text">续费</Text>
</View>
<View className="secondary-buttons">
<View className="secondary-button" onClick={handleInviteFriend}>
<Text className="secondary-text">邀请球友</Text>
</View>
<View className="secondary-button right" onClick={handleTurnOffRestart}>
<Text className="secondary-text">关灯重开</Text>
</View>
</View>
</>
) : (
<>
{/* 非开台人扫码 - 图2 */}
<View className="primary-button green" onClick={handlePayForOther}>
<Text className="button-text">帮他付款关台</Text>
</View>
<View className="primary-button green" onClick={handleAAPay}>
<Text className="button-text">AA制付款关台</Text>
</View>
<View className="secondary-buttons">
<View className="secondary-button" onClick={handleInviteFriend}>
<Text className="secondary-text">邀请球友</Text>
</View>
<View className="secondary-button right" onClick={handleTurnOffRestart}>
<Text className="secondary-text">关灯重开</Text>
</View>
</View>
</>
)}
</View>
)
}
export default FooterButtons

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

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

353
src/pageScan/closeTable/index.scss
Unescape View File

@ -0,0 +1,353 @@ @@ -0,0 +1,353 @@
.close-table-page {
min-height: 100vh;
background-color: #F2F3F5;
padding-bottom: calc(280px + env(safe-area-inset-bottom) + 30px); // 为底部按钮留空间
// 内容区域
.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;
}
}
}
// 开台订单信息卡片
.order-info-card {
background-color: #FFFFFF;
border-radius: 12px;
padding: 30px;
margin-bottom: 30px;
// 顶部：开台方式和详情按钮
.order-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
.order-tag {
background-color: transparent;
border: 1px solid #FF6B00;
border-radius: 4px;
padding: 6px 12px;
.tag-text {
font-size: 25px;
color: #FF6B00;
}
}
.detail-btn {
display: flex;
align-items: center;
gap: 6px;
.detail-text {
font-size: 25px;
color: #595959;
}
.arrow-icon {
transition: transform 0.3s ease;
&.expanded {
transform: rotate(180deg);
}
}
}
}
// 订单统计
.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 {
// margin-top: 30px;
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;
}
}
}
}
}
}
// 展开的详细信息卡片（支付信息、开台信息）
.info-card {
background-color: #FFFFFF;
border-radius: 12px;
padding: 30px;
margin-bottom: 30px;
.card-title {
font-size: 33px;
color: #000000;
font-weight: 500;
margin-bottom: 30px;
display: block;
}
.info-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
border-bottom: 1px solid #F2F3F5;
&:last-child {
border-bottom: none;
}
&.total {
padding-top: 25px;
.info-label {
color: #8B8B8B;
}
.info-value {
font-size: 35px;
font-weight: 500;
}
}
&.expandable {
cursor: pointer;
}
.info-label {
font-size: 30px;
color: #595959;
flex-shrink: 0;
}
.info-value {
font-size: 30px;
color: #000000;
text-align: right;
flex: 1;
margin-left: 20px;
word-break: break-all;
}
.info-value-box {
display: flex;
align-items: center;
gap: 10px;
}
.info-desc {
font-size: 30px;
color: #8B8B8B;
}
.info-right {
display: flex;
align-items: center;
flex: 1;
justify-content: flex-end;
.info-desc {
font-size: 30px;
color: #8B8B8B;
flex: none;
}
.info-value {
font-size: 30px;
color: #FF6B00;
margin-left: 16px;
margin-right: 10px;
flex: none;
text-align: left;
}
.arrow-icon {
transition: transform 0.3s ease;
flex-shrink: 0;
&.expanded {
transform: rotate(180deg);
}
}
}
}
// 展开内容
.expand-content {
background-color: #F2F3F5;
border-radius: 13px;
padding: 25px;
margin-top: 15px;
margin-bottom: 15px;
.expand-text {
display: block;
font-size: 28px;
color: #333333;
line-height: 1.8;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
}
.expand-value {
display: block;
font-size: 28px;
color: #FF6B00;
line-height: 1.8;
margin-top: 10px;
}
// 优惠券展开内容（横向布局）
&.coupon {
display: flex;
justify-content: space-between;
align-items: center;
.expand-text {
margin-bottom: 0;
flex: 1;
}
.expand-value {
margin-top: 0;
flex-shrink: 0;
margin-left: 20px;
}
}
}
}
}
}

233
src/pageScan/closeTable/index.tsx
Unescape View File

@ -0,0 +1,233 @@ @@ -0,0 +1,233 @@
/**
* 关台页面
*/
import { View, Text, Image } from '@tarojs/components'
import Taro, { useLoad, useRouter } from '@tarojs/taro'
import { useState } from 'react'
import { ArrowDown } from '@taroify/icons'
import FooterButtons from './components/FooterButtons'
import './index.scss'
// 使用本地图片资源
const phoneIcon = require('../startTable/images/phone.png')
const locationIcon = require('../../assets/icon/locationIcon.png')
const CloseTable = () => {
const router = useRouter()
const { type = 'owner' } = router.params as { type?: 'owner' | 'guest' } // owner: 开台人员, guest: 非开台人
const [expanded, setExpanded] = useState(false) // 订单详情是否展开
const [couponExpanded, setCouponExpanded] = useState(false) // 优惠券详情是否展开
const [priceExpanded, setPriceExpanded] = useState(false) // 收费标准详情是否展开
useLoad(() => {
console.log('关台页面加载，类型:', type)
})
// 拨打电话
const handlePhoneCall = () => {
Taro.makePhoneCall({
phoneNumber: '100-666-XXXX',
}).catch((err) => {
console.error('拨打电话失败:', err)
})
}
// 切换展开/收起
const handleToggleExpand = () => {
setExpanded(!expanded)
}
return (
<View className="close-table-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="order-info-card">
{/* 顶部：开台方式和详情按钮 */}
<View className="order-header" onClick={handleToggleExpand}>
<View className="order-tag">
<Text className="tag-text">开台方式</Text>
</View>
<View className="detail-btn">
<Text className="detail-text">详情</Text>
<ArrowDown
className={`arrow-icon ${expanded ? 'expanded' : ''}`}
size="16px"
color="#646566"
/>
</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>
{/* 展开的详细信息 */}
{expanded && (
<>
{/* 支付信息卡片 */}
<View className="info-card">
<Text className="card-title">支付信息</Text>
<View className="info-row">
<Text className="info-label">在线总支付：</Text>
<View className="info-value-box">
<Text className="info-desc">0元</Text>
</View>
</View>
<View className="info-row">
<Text className="info-label">押金</Text>
<Text className="info-value">0元</Text>
</View>
<View className="info-row">
<Text className="info-label">订单原价</Text>
<Text className="info-value">92.80元</Text>
</View>
{/* 优惠券抵扣 - 可展开 */}
<View className="info-row expandable" onClick={() => setCouponExpanded(!couponExpanded)}>
<Text className="info-label">优惠券抵扣</Text>
<View className="info-right">
<Text className="info-desc">不可用</Text>
<Text className="info-value">-96.00元</Text>
<ArrowDown
className={`arrow-icon ${couponExpanded ? 'expanded' : ''}`}
size="16px"
color="#646566"
/>
</View>
</View>
{/* 优惠券展开内容 */}
{couponExpanded && (
<View className="expand-content coupon">
<Text className="expand-text">美团：2小时通用券（新人奖励）</Text>
<Text className="expand-value">-96.00元</Text>
</View>
)}
<View className="info-row total">
<Text className="info-label">待结算：</Text>
<Text className="info-value">92.8元</Text>
</View>
</View>
{/* 开台信息卡片 */}
<View className="info-card">
<Text className="card-title">开台信息</Text>
<View className="info-row">
<Text className="info-label">门店信息</Text>
<Text className="info-value">XXXXXX店</Text>
</View>
<View className="info-row">
<Text className="info-label">桌台信息</Text>
<Text className="info-value">中式台球 来力.山岩-A03/3号球桌</Text>
</View>
<View className="info-row">
<Text className="info-label">开始时间</Text>
<Text className="info-value">2025-01-01 00:00:00</Text>
</View>
<View className="info-row">
<Text className="info-label">使用时长</Text>
<Text className="info-value">1小时56分</Text>
</View>
<View className="info-row">
<Text className="info-label">订单编号</Text>
<Text className="info-value">987654321012345678</Text>
</View>
{/* 收费标准 - 可展开 */}
<View className="info-row expandable" onClick={() => setPriceExpanded(!priceExpanded)}>
<Text className="info-label">收费标准</Text>
<View className="info-right">
<Text className="info-value">80元/小时</Text>
<ArrowDown
className={`arrow-icon ${priceExpanded ? 'expanded' : ''}`}
size="16px"
color="#646566"
/>
</View>
</View>
{/* 收费标准展开内容 */}
{priceExpanded && (
<View className="expand-content">
<Text className="expand-text">1分钟以内不计费，超过1分钟按6.67元/5分钟计费</Text>
<Text className="expand-text">• 00:00-11:00 原价90元/小时，折扣价80元/小时</Text>
<Text className="expand-text">• 11:00-24:00 原价100元/小时，折扣价90元/小时</Text>
</View>
)}
<View className="info-row">
<Text className="info-label">支付方式</Text>
<Text className="info-value">微信支付</Text>
</View>
</View>
</>
)}
</View>
{/* 底部按钮区域 */}
<FooterButtons type={type} />
</View>
)
}
export default CloseTable

20
src/pages/scan/index.tsx
Unescape View File

@ -34,6 +34,20 @@ const ScanIndex = observer(() => { @@ -34,6 +34,20 @@ const ScanIndex = observer(() => {
})
}
// 关台-开台人员扫码
const handleCloseTableOwner = () => {
Taro.navigateTo({
url: '/pageScan/closeTable/index?type=owner'
})
}
// 关台-非开台人扫码
const handleCloseTableGuest = () => {
Taro.navigateTo({
url: '/pageScan/closeTable/index?type=guest'
})
}
return (
<View className="scan-page">
<View className="header">
@ -46,6 +60,12 @@ const ScanIndex = observer(() => { @@ -46,6 +60,12 @@ const ScanIndex = observer(() => {
<Button className="start-table-btn" onClick={handleStartTable}>
开台
</Button>
<Button className="close-table-btn" onClick={handleCloseTableOwner}>
关台-开台人员扫码
</Button>
<Button className="close-table-btn" onClick={handleCloseTableGuest}>
关台-非开台人扫码
</Button>
</View>
</View>
)

Write Preview
Loading…
Cancel
Save