开台

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,

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: {

src/pageScan/startTable/index.config.ts

@@ -0,0 +1,5 @@
+export default {
+  navigationBarTitleText: '',
+  navigationBarBackgroundColor: '#121212',
+  navigationBarTextStyle: 'white',
+}

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;
+          }
+        }
+      }
+    }
+  }
+}

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 (
+    <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

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;
+    }
   }
 }

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 (
     <View className="scan-page">
       <View className="header">
@@ -35,6 +43,9 @@ const ScanIndex = observer(() => {
         <Button className="scan-btn" onClick={handleScan}>
           点击扫码
         </Button>
+        <Button className="start-table-btn" onClick={handleStartTable}>
+          开台
+        </Button>
       </View>
     </View>
   )