diff --git a/config/index.ts b/config/index.ts index 5cc5473..f3502d4 100644 --- a/config/index.ts +++ b/config/index.ts @@ -26,6 +26,9 @@ export default defineConfig<'webpack5'>(async (merge, { command, mode }) => { framework: 'react', compiler: 'webpack5', mini: { + miniCssExtractPluginOption: { + ignoreOrder: true, + }, postcss: { pxtransform: { enable: true, diff --git a/src/app.config.ts b/src/app.config.ts index ee068e1..af97ce1 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -29,6 +29,13 @@ export default defineAppConfig({ 'editProfile/index', // 编辑资料 'accountBalance/index', // 账户余额 ] + }, + { + root: 'pageScan', + name: 'scan-package', + pages: [ + 'startTable/index', // 开台页面 + ] } ], // 分包预下载规则 @@ -40,6 +47,10 @@ export default defineAppConfig({ 'pages/user/index': { network: 'all', packages: ['user-package'] + }, + 'pages/scan/index': { + network: 'all', + packages: ['scan-package'] } }, window: { diff --git a/src/pageScan/startTable/images/phone.png b/src/pageScan/startTable/images/phone.png new file mode 100644 index 0000000..f2d9f6f Binary files /dev/null and b/src/pageScan/startTable/images/phone.png differ diff --git a/src/pageScan/startTable/images/startBiliardCardBg.png b/src/pageScan/startTable/images/startBiliardCardBg.png new file mode 100644 index 0000000..cd9458c Binary files /dev/null and b/src/pageScan/startTable/images/startBiliardCardBg.png differ diff --git a/src/pageScan/startTable/index.config.ts b/src/pageScan/startTable/index.config.ts new file mode 100644 index 0000000..e32df6c --- /dev/null +++ b/src/pageScan/startTable/index.config.ts @@ -0,0 +1,5 @@ +export default { + navigationBarTitleText: '', + navigationBarBackgroundColor: '#121212', + navigationBarTextStyle: 'white', +} diff --git a/src/pageScan/startTable/index.scss b/src/pageScan/startTable/index.scss new file mode 100644 index 0000000..6ed67c1 --- /dev/null +++ b/src/pageScan/startTable/index.scss @@ -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; + } + } + } + } + } +} diff --git a/src/pageScan/startTable/index.tsx b/src/pageScan/startTable/index.tsx new file mode 100644 index 0000000..66a3502 --- /dev/null +++ b/src/pageScan/startTable/index.tsx @@ -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 ( + + {/* 内容区域 */} + + {/* 台球桌信息卡片 */} + + {/* 顶部:店名和电话 */} + + 北京黑八大师联盟球厅店 + + + 联系店长 + + + + {/* 台球桌标题 */} + + [中式台球]来力.山岩-A03/3号球桌 + + + {/* 价格信息 */} + + + ¥28.80 + /小时 + + + 押金 + ¥100.00 + + + VIP ¥20.00 + + + + {/* 价格时段 */} + + 价格时段:00:00-24:00 + + + + {/* 开台方式列表 */} + + {startTableMethods.map((method) => ( + + + {method.title} + {method.description} + + + handleStartTable(method)} + > + 去开台 + + + + ))} + + + + ) +} + +export default StartTable diff --git a/src/pages/scan/index.scss b/src/pages/scan/index.scss index 1bd1b8c..71a6d4c 100644 --- a/src/pages/scan/index.scss +++ b/src/pages/scan/index.scss @@ -15,7 +15,10 @@ .content { padding: 80px 32px; - text-align: center; + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; .scan-btn { width: 400px; @@ -27,5 +30,19 @@ font-weight: bold; border: none; } + + .start-table-btn { + width: 500px; + height: 88px; + background: #01CA68; + border-radius: 44px; + color: #fff; + font-size: 32px; + font-weight: bold; + border: none; + display: flex; + align-items: center; + justify-content: center; + } } } diff --git a/src/pages/scan/index.tsx b/src/pages/scan/index.tsx index 7f90b96..db0f7d6 100644 --- a/src/pages/scan/index.tsx +++ b/src/pages/scan/index.tsx @@ -11,6 +11,7 @@ const ScanIndex = observer(() => { console.log('扫码页面加载') }) + // 扫码 const handleScan = () => { Taro.scanCode({ success: (res) => { @@ -26,6 +27,13 @@ const ScanIndex = observer(() => { }) } + // 去开台 + const handleStartTable = () => { + Taro.navigateTo({ + url: '/pageScan/startTable/index' + }) + } + return ( @@ -35,6 +43,9 @@ const ScanIndex = observer(() => { + )