diff --git a/src/app.config.ts b/src/app.config.ts index c52ab69..0a9ad92 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -37,6 +37,7 @@ export default defineAppConfig({ 'startTable/index', // 开台页面 'selfStart/index', // 自助开台页面 'timedStart/index', // 定时开台页面 + 'couponStart/index', // 团购券开台页面 ] } ], diff --git a/src/pageScan/couponStart/images/scanIconIn.png b/src/pageScan/couponStart/images/scanIconIn.png new file mode 100644 index 0000000..fa32cec Binary files /dev/null and b/src/pageScan/couponStart/images/scanIconIn.png differ diff --git a/src/pageScan/couponStart/index.config.ts b/src/pageScan/couponStart/index.config.ts new file mode 100644 index 0000000..63d2cb4 --- /dev/null +++ b/src/pageScan/couponStart/index.config.ts @@ -0,0 +1,5 @@ +export default definePageConfig({ + navigationBarTitleText: '团购券开台', + navigationBarBackgroundColor: '#121212', + navigationBarTextStyle: 'white', +}) diff --git a/src/pageScan/couponStart/index.scss b/src/pageScan/couponStart/index.scss new file mode 100644 index 0000000..e3dd0f9 --- /dev/null +++ b/src/pageScan/couponStart/index.scss @@ -0,0 +1,449 @@ +/** + * 团购券开台页面样式 + */ +.coupon-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; + } + } + + // 使用说明 + .instruction-box { + background-color: #21212A; + border-radius: 13px; + padding: 23px; + margin-bottom: 30px; + + .instruction-item { + display: flex; + align-items: center; + margin-bottom: 15px; + + &:last-of-type { + margin-bottom: 10px; + } + + .number-circle { + width: 32px; + height: 32px; + // background-color: #FFFFFF; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-right: 12px; + flex-shrink: 0; + + .number { + font-size: 20px; + color: #fff; + } + } + + .instruction-text { + font-size: 25px; + color: #999999; + } + } + + .instruction-note { + display: block; + font-size: 25px; + color: #999999; + margin-top: 0; + padding-left: 44px; + } + } + + // 券码输入框 + .code-input-box { + height: 90px; + background-color: #2A2A2A; + border-radius: 8px; + padding: 0 30px; + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 30px; + + .code-input { + flex: 1; + font-size: 29px; + color: #FFFFFF; + } + + .code-placeholder { + color: #666666; + } + + .scan-icon { + width: 41px; + height: 41px; + flex-shrink: 0; + } + } + + // 券类型选项卡 + .coupon-tabs { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 30px; + + .tabs-left { + display: flex; + gap: 40px; + + .tab-item { + position: relative; + padding-bottom: 10px; + + .tab-text { + font-size: 29px; + color: #999999; + } + + &.active { + .tab-text { + color: #FFFFFF; + } + + .tab-indicator { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 6px; + background-color: #01CA68; + border-radius: 3px; + } + } + } + } + + .tabs-right { + display: flex; + align-items: center; + gap: 8px; + + .total-text { + font-size: 25px; + color: #999999; + } + + .arrow-text { + font-size: 32px; + color: #999999; + } + } + } + + // 券列表 + .coupon-list { + .coupon-item { + position: relative; + background-color: #2A2A2A; + border-radius: 12px; + margin-bottom: 20px; + overflow: hidden; + + // 左上角标签 + .coupon-tag { + position: absolute; + top: 0; + left: 0; + background-color: transparent; + border: 2px solid #FF6B00; + border-top: none; + border-left: none; + color: #FF6B00; + font-size: 22px; + padding: 4px 12px; + border-bottom-right-radius: 12px; + z-index: 1; + } + + // 券主体 + .coupon-main { + display: flex; + padding: 30px; + gap: 20px; + + // 左侧:时长和券类型 + .coupon-left { + display: flex; + flex-direction: column; + align-items: center; + width: 150px; + flex-shrink: 0; + padding-top: 40px; // 为左上角标签留空间 + + .coupon-duration-wrapper { + display: flex; + align-items: baseline; + gap: 4px; + margin-bottom: 12px; + + .coupon-duration { + font-size: 50px; + color: #FF6B00; + font-weight: bold; + line-height: 1; + } + + .coupon-unit { + font-size: 25px; + color: #FF6B00; + line-height: 1; + } + } + + .coupon-type { + font-size: 29px; + color: #999999; + line-height: 1.2; + } + } + + // 右侧:信息区域 + .coupon-right { + flex: 1; + display: flex; + flex-direction: column; + gap: 8px; + min-width: 0; + + // 标题行:标题 + 选择按钮 + .title-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + + .coupon-title { + flex: 1; + font-size: 29px; + color: #FFFFFF; + font-weight: 500; + line-height: 1.4; + min-width: 0; + } + + .select-btn { + width: 44px; + height: 44px; + border: 2px solid #666666; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + + &.selected { + background-color: #01CA68; + border-color: #01CA68; + + .check-icon { + font-size: 28px; + color: #FFFFFF; + font-weight: bold; + } + } + } + } + + .coupon-expire { + font-size: 23px; + color: #999999; + } + + .coupon-desc { + font-size: 23px; + color: #FF6B00; + line-height: 1.5; + white-space: pre-line; + } + } + } + + // 详情区域 + .coupon-details-section { + padding: 0 30px 30px; + border-top: 1px dashed #3A3A3A; + padding-top: 20px; + + .detail-row { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; + margin-bottom: 8px; + + .detail-text { + flex: 1; + font-size: 23px; + color: #999999; + line-height: 1.8; + } + + .toggle-text { + font-size: 20px; + color: #999999; + flex-shrink: 0; + white-space: nowrap; + } + } + + .detail-text { + display: block; + font-size: 23px; + color: #999999; + line-height: 1.8; + margin-bottom: 8px; + + &:last-child { + margin-bottom: 0; + } + } + } + } + } + + // 底部提示 + .end-tip { + display: block; + text-align: center; + font-size: 25px; + color: #666666; + padding: 40px 0 60px; + + } + } + + // 底部固定按钮 + .footer-bar { + position: fixed; + bottom: 0; + left: 0; + right: 0; + padding: 20px 30px; + padding-bottom: calc(20px + env(safe-area-inset-bottom)); + background-color: #121212; + box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.3); + + .exchange-btn { + width: 100%; + height: 90px; + background-color: #01CA68; + border-radius: 50px; + display: flex; + align-items: center; + justify-content: center; + + .exchange-text { + font-size: 33px; + color: #FFFFFF; + font-weight: bold; + } + } + } +} diff --git a/src/pageScan/couponStart/index.tsx b/src/pageScan/couponStart/index.tsx new file mode 100644 index 0000000..7cd9d4d --- /dev/null +++ b/src/pageScan/couponStart/index.tsx @@ -0,0 +1,307 @@ +/** + * 团购券开台页面 + */ +import { View, Text, Image, Input } from '@tarojs/components' +import Taro, { useLoad } from '@tarojs/taro' +import { useState } from 'react' +import './index.scss' + +// 使用本地图片资源 +const phoneIcon = require('../startTable/images/phone.png') +const scanIcon = require('./images/scanIconIn.png') + +// 券类型枚举 +enum CouponType { + THIRD_PARTY = 'third_party', + ACTIVITY = 'activity', +} + +// 券数据接口 +interface Coupon { + id: number + type: string // '团八' | '黑八' + duration: string + couponType: string // '活动抵时券' | '抵时券' + title: string + expireDate: string + description: string + details: string[] + expanded: boolean +} + +const CouponStart = () => { + const [couponCode, setCouponCode] = useState('') // 券码 + const [selectedCouponType, setSelectedCouponType] = useState(CouponType.THIRD_PARTY) + const [selectedCouponId, setSelectedCouponId] = useState(1) // 选中的券ID + + // 券列表数据 + const [coupons, setCoupons] = useState([ + { + id: 1, + type: '团八', + duration: '20', + couponType: '活动抵时券', + title: '20分钟通用券(体验券)', + expireDate: '2025-10-01 16:21', + description: '需要交押金,超时扣押金\n单笔满40分钟可减免20分钟', + details: ['不限时段,全天可用', '适用类型:中八', '每桌只单限用1张'], + expanded: false, + }, + { + id: 2, + type: '黑八', + duration: '180', + couponType: '抵时券', + title: '自助中式台球3小时59.9元体验券', + expireDate: '2025-11-01 09:00', + description: '', + details: ['不限时段,全天可用'], + expanded: false, + }, + ]) + + useLoad(() => { + console.log('团购券开台页面加载') + }) + + // 拨打电话 + const handlePhoneCall = () => { + Taro.makePhoneCall({ + phoneNumber: '100-666-XXXX', + }).catch((err) => { + console.error('拨打电话失败:', err) + }) + } + + // 扫描券码 + const handleScanCode = () => { + Taro.scanCode({ + scanType: ['qrCode', 'barCode'], + }).then((res) => { + setCouponCode(res.result) + }).catch((err) => { + console.error('扫码失败:', err) + }) + } + + // 切换券类型 + const handleSwitchType = (type: CouponType) => { + setSelectedCouponType(type) + } + + // 选择券 + const handleSelectCoupon = (id: number) => { + setSelectedCouponId(id) + } + + // 展开/收起券详情 + const handleToggleExpand = (id: number) => { + setCoupons(prev => prev.map(coupon => + coupon.id === id ? { ...coupon, expanded: !coupon.expanded } : coupon + )) + } + + // 兑换开台 + const handleExchange = () => { + if (!selectedCouponId) { + Taro.showToast({ + title: '请选择一张券', + icon: 'none', + duration: 2000 + }) + return + } + + console.log('兑换开台,选中券ID:', selectedCouponId) + Taro.showToast({ + title: '功能开发中', + icon: 'none', + duration: 2000 + }) + } + + return ( + + {/* 内容区域 */} + + {/* 台球桌信息卡片 */} + + {/* 顶部:店名和电话 */} + + 北京黑八大师联盟球厅店 + + + 联系店长 + + + + {/* 台球桌标题 */} + + [中式台球]来力.山岩-A03/3号球桌 + + + {/* 价格信息 */} + + + ¥28.80 + /小时 + + + 押金 + ¥100.00 + + + VIP ¥20.00 + + + + {/* 价格时段 */} + + 价格时段:00:00-24:00 + + + + {/* 使用说明 */} + + + + + + 打开美团、抖音、大众点评或快手等 + + + + + + 长按复制券码贴到对方输入框 + + + + + + 点击[兑换],成功兑换团购券 + + 注:也可以通过扫团购券码完成兑换 + + + {/* 券码输入框 */} + + setCouponCode(e.detail.value)} + /> + + + + {/* 券类型选项卡 */} + + + handleSwitchType(CouponType.THIRD_PARTY)} + > + 第三方卡券 + {selectedCouponType === CouponType.THIRD_PARTY && } + + handleSwitchType(CouponType.ACTIVITY)} + > + 活动卡券 + {selectedCouponType === CouponType.ACTIVITY && } + + + + 共{coupons.length}张 + + + + + {/* 券列表 */} + + {coupons.map((coupon) => ( + + {/* 左上角标签 */} + {coupon.type} + + handleSelectCoupon(coupon.id)}> + {/* 左侧:时长和券类型 */} + + + {coupon.duration} + 分钟 + + {coupon.couponType} + + + {/* 右侧:信息区域 */} + + {/* 标题行:标题 + 选择按钮 */} + + {coupon.title} + { + e.stopPropagation() + handleSelectCoupon(coupon.id) + }} + > + {selectedCouponId === coupon.id && } + + + + {/* 有效期 */} + 有效日期至:{coupon.expireDate} + + {/* 描述 */} + {coupon.description && {coupon.description}} + + + + {/* 详情区域 */} + + {/* 第一条详情 + 展开/收起按钮 */} + {coupon.details.length > 0 && ( + + {coupon.details[0]} + handleToggleExpand(coupon.id)} + > + {coupon.expanded ? '∧' : '∨'} + + + )} + + {/* 展开时显示其余详情 */} + {coupon.expanded && coupon.details.slice(1).map((detail, index) => ( + {detail} + ))} + + + ))} + + + {/* 底部提示 */} + 到底了~ + + + {/* 底部固定按钮 */} + + + 兑换开台 + + + + ) +} + +export default CouponStart diff --git a/src/pageScan/startTable/index.tsx b/src/pageScan/startTable/index.tsx index 03b71d9..1fe58d7 100644 --- a/src/pageScan/startTable/index.tsx +++ b/src/pageScan/startTable/index.tsx @@ -66,6 +66,14 @@ const StartTable = () => { return } + // 如果是团购券开台,跳转到团购券开台页面 + if (method.id === 4) { + Taro.navigateTo({ + url: '/pageScan/couponStart/index' + }) + return + } + // 其他方式暂时提示功能开发中 Taro.showToast({ title: '功能开发中',