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(() => {
+
)