首页

src/app.scss

@@ -4,7 +4,7 @@
 
 /* 重置样式 */
 page {
-  background-color: #f5f5f5;
+  background-color: #121212;
   font-size: 28px;
   line-height: 1.6;
   font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;

src/pages/index/index.config.ts

@@ -1,4 +1,4 @@
 export default {
-  navigationBarTitleText: '首页',
+  navigationStyle: 'custom',
   usingComponents: {},
 }

src/pages/index/index.scss

@@ -1,44 +1,166 @@
+/**
+ * 首页样式
+ * 设计稿宽度: 750px
+ */
+
 .index-page {
-  min-height: 100vh;
+  // 高度为 100vh 减去 tabbar 高度（100Px + 安全区域）
-  // background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  height: calc(100vh - 40Px);
+  height: calc(100vh - 40Px - constant(safe-area-inset-bottom)); // iOS 11.0-11.2
+  height: calc(100vh - 40Px - env(safe-area-inset-bottom)); // iOS 11.2+
+  background-color: red;
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto; // 超出计算高度后才可以滚动
+  box-sizing: border-box;
+}
 
-  .header {
+/* 轮播图区域 */
-    padding: 80px 32px 40px;
+.swiper-container {
-    text-align: center;
+  width: 100%;
+  height: 465px; // 设计稿高度 465px
+  position: relative;
 
-    .title {
+  .swiper {
-      font-size: 48px;
+    width: 100%;
-      font-weight: bold;
+    height: 100%;
-      color: #fff;
-    }
   }
 
-  .content {
+  .swiper-image {
-    padding: 32px;
+    width: 100%;
-
+    height: 100%;
-    .welcome {
+    display: block;
-      background: #fff;
+  }
-      border-radius: 16px;
+
-      padding: 40px 32px;
+  .swiper-indicator {
-      text-align: center;
+    position: absolute;
-      margin-bottom: 40px;
+    bottom: 40px;
-
+    left: 50%;
-      .welcome-text {
+    transform: translateX(-50%);
-        font-size: 32px;
+  }
-        color: #333;
+}
-        display: block;
+
-        margin-bottom: 16px;
+/* 内容区域 - 上移覆盖轮播图 */
-      }
+.content-area {
-
+  position: relative;
-      .user-name {
+  margin-top: -20px; // 上移 20px 覆盖轮播图
-        font-size: 36px;
+  background-color: #121212;
-        font-weight: bold;
+  border-top-left-radius: 25px;
-        color: #667eea;
+  border-top-right-radius: 25px;
-      }
+  padding: 33px;
-    }
+}
+
+/* 卡片容器 */
+.card-container {
+  display: flex;
+  justify-content: space-between;
+  gap: 25px; // 左右间距 25px
+}
+
+/* 通用卡片背景图 */
+.card-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 20px;
+}
+
+/* 通用卡片文字内容 */
+.card-text-content {
+  position: absolute;
+  top: 28px;
+  left: 30px;
+  z-index: 1;
+
+  .card-text-title {
+    font-family: 'Source Han Sans CN', sans-serif;
+    font-weight: bold;
+    font-size: 33px;
+    color: #FFFFFF;
+    margin-bottom: 20px;
+  }
 
-    .actions {
+  .card-text-desc {
-      margin-top: 40px;
+    font-family: 'Source Han Sans CN', sans-serif;
+    font-weight: 400;
+    font-size: 23px;
+    color: #FFFFFF;
+  }
+}
+
+/* 左侧扫码开台卡片 */
+.scan-card {
+  width: 330px;
+  height: 335px; // 设计稿尺寸 330px * 335px
+  border-radius: 20px;
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+/* 右侧卡片容器 */
+.right-cards {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 335px; // 与左侧扫码开台高度一致
+  flex: 1;
+}
+
+/* 附近门店卡片 */
+.nearby-store-card {
+  width: 100%;
+  height: 155px; // (335 - 25) / 2 = 155px，使总高度与左侧一致
+  border-radius: 20px;
+  position: relative;
+  overflow: hidden;
+
+  .card-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    z-index: 1;
+  }
+
+  .card-title {
+    font-size: 36px;
+    font-weight: bold;
+    color: #fff;
+    margin-bottom: 8px;
+  }
+
+  .store-name {
+    font-size: 24px;
+    color: rgba(255, 255, 255, 0.9);
+    margin-bottom: 12px;
+  }
+
+  .store-distance {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #fff;
+    
+    .distance-text {
+      font-size: 22px;
+      color: rgba(255, 255, 255, 0.85);
     }
   }
 }
+
+/* 团购核销卡片 */
+.group-buy-card {
+  width: 100%;
+  height: 155px; // (335 - 25) / 2 = 155px，使总高度与左侧一致
+  border-radius: 20px;
+  position: relative;
+  overflow: hidden;
+}

src/pages/index/index.tsx

@@ -1,39 +1,172 @@
 /**
  * 首页
  */
-import { View, Text } from '@tarojs/components'
+import { View, Image } from '@tarojs/components'
 import { useLoad } from '@tarojs/taro'
+import Taro from '@tarojs/taro'
 import { observer } from 'mobx-react'
-import { Button } from '@taroify/core'
+import { Swiper } from '@taroify/core'
+import { LocationOutlined } from '@taroify/icons'
+import { useEffect, useState } from 'react'
 import { userStore } from '../../store'
+import swBG from '../../assets/big/swBG.png'
+import smkt from '../../assets/big/smkt.png'
+import fjmd from '../../assets/big/fjmd.png'
+import tghx from '../../assets/big/tghx.png'
 import './index.scss'
 
 const Index = observer(() => {
+  const [currentDistance, setCurrentDistance] = useState('--')
+  const [storeName, setStoreName] = useState('黑八大师联盟球厅店')
+
   useLoad(() => {
     console.log('首页加载')
   })
 
+  // 请求定位权限并获取位置
+  const requestLocationPermission = async () => {
+    try {
+      // 检查定位权限设置
+      const setting = await Taro.getSetting()
+      
+      if (!setting.authSetting['scope.userLocation']) {
+        // 未授权，请求授权
+        try {
+          await Taro.authorize({ scope: 'scope.userLocation' })
+        } catch (err) {
+          // 用户拒绝授权，引导用户手动开启
+          Taro.showModal({
+            title: '定位权限',
+            content: '需要获取您的位置信息以显示附近门店，请在设置中开启定位权限',
+            confirmText: '去设置',
+            success: (res) => {
+              if (res.confirm) {
+                Taro.openSetting()
+              }
+            }
+          })
+          return
+        }
+      }
+
+      // 获取当前位置
+      const location = await Taro.getLocation({
+        type: 'gcj02',
+        isHighAccuracy: true
+      })
+      
+      console.log('当前位置:', location)
+      // 这里可以根据实际位置计算距离，暂时模拟
+      setCurrentDistance('1.12km')
+      
+    } catch (err) {
+      console.error('获取位置失败:', err)
+      setCurrentDistance('--')
+    }
+  }
+
+  useEffect(() => {
+    // 页面加载时请求定位权限
+    requestLocationPermission()
+  }, [])
+
+  // 处理扫码开台点击
+  const handleScanClick = () => {
+    Taro.switchTab({
+      url: '/pages/scan/index'
+    })
+  }
+
+  // 处理附近门店点击
+  const handleNearbyStoreClick = () => {
+    Taro.switchTab({
+      url: '/pages/store/index'
+    })
+  }
+
+  // 处理团购核销点击
+  const handleGroupBuyClick = () => {
+    Taro.showToast({
+      title: '团购核销功能开发中',
+      icon: 'none'
+    })
+  }
+
   return (
     <View className="index-page">
-      <View className="header">
+      {/* 轮播图区域 */}
-        <Text className="title">台球馆自助小程序</Text>
+      <View className="swiper-container">
+        <Swiper 
+          className="swiper" 
+          autoplay={3000}
+          lazyRender
+        >
+          <Swiper.Indicator className="swiper-indicator" />
+          <Swiper.Item>
+            <Image 
+              className="swiper-image" 
+              src={swBG} 
+              mode="aspectFill" 
+            />
+          </Swiper.Item>
+          <Swiper.Item>
+            <Image 
+              className="swiper-image" 
+              src={swBG} 
+              mode="aspectFill" 
+            />
+          </Swiper.Item>
+        </Swiper>
       </View>
 
-      <View className="content">
+      {/* 内容区域 - 上移覆盖轮播图 */}
-        <View className="welcome">
+      <View className="content-area">
-          <Text className="welcome-text">
+        <View className="card-container">
-            欢迎使用
+          {/* 左侧扫码开台 */}
-          </Text>
+          <View className="scan-card" onClick={handleScanClick}>
-          {userStore.userInfo && (
+            <Image 
-            <Text className="user-name">{userStore.userInfo.nickname}</Text>
+              className="card-bg" 
-          )}
+              src={smkt} 
-        </View>
+              mode="aspectFill" 
+            />
+            <View className="card-text-content">
+              <View className="card-text-title">扫码开台</View>
+              <View className="card-text-desc">扫球桌二维码开台/关台</View>
+            </View>
+          </View>
+
+          {/* 右侧上下两个卡片 */}
+          <View className="right-cards">
+            {/* 附近门店 */}
+            <View className="nearby-store-card" onClick={handleNearbyStoreClick}>
+              <Image 
+                className="card-bg" 
+                src={fjmd} 
+                mode="aspectFill" 
+              />
+              <View className="card-content">
+                <View className="card-title">附近门店</View>
+                <View className="store-name">{storeName}</View>
+                <View className="store-distance">
+                  <LocationOutlined size={24} />
+                  <View className="distance-text">{currentDistance}</View>
+                </View>
+              </View>
+            </View>
 
-        <View className="actions">
+            {/* 团购核销 */}
-          <Button color="primary" block>扫码开台</Button>
+            <View className="group-buy-card" onClick={handleGroupBuyClick}>
-          <Button color="success" block style={{ marginTop: '20px' }}>
+              <Image 
-            查找附近门店
+                className="card-bg" 
-          </Button>
+                src={tghx} 
+                mode="aspectFill" 
+              />
+              <View className="card-text-content">
+                <View className="card-text-title">团购核销</View>
+                <View className="card-text-desc">美团/抖音/点评/快手</View>
+              </View>
+            </View>
+          </View>
         </View>
       </View>
     </View>

src/pages/message/index.config.ts

@@ -1,4 +1,4 @@
 export default {
-  navigationBarTitleText: '消息',
+  navigationStyle: 'custom',
   usingComponents: {},
 }

src/pages/message/index.scss

@@ -1,6 +1,6 @@
 .message-page {
   min-height: 100vh;
-  background-color: #f5f5f5;
+  background-color: #121212;
 
   .header {
     padding: 32px;

src/pages/scan/index.config.ts

@@ -1,4 +1,4 @@
 export default {
-  navigationBarTitleText: '扫码',
+  navigationStyle: 'custom',
   usingComponents: {},
 }

src/pages/scan/index.scss

@@ -1,6 +1,6 @@
 .scan-page {
   min-height: 100vh;
-  background-color: #f5f5f5;
+  background-color: #121212;
 
   .header {
     padding: 32px;

src/pages/store/index.config.ts

@@ -1,4 +1,4 @@
 export default {
-  navigationBarTitleText: '门店',
+  navigationStyle: 'custom',
   usingComponents: {},
 }

src/pages/store/index.scss

@@ -1,6 +1,6 @@
 .store-page {
   min-height: 100vh;
-  background-color: #f5f5f5;
+  background-color: #121212;
 
   .header {
     padding: 32px;

src/pages/user/index.config.ts

@@ -1,4 +1,4 @@
 export default {
-  navigationBarTitleText: '我的',
+  navigationStyle: 'custom',
   usingComponents: {},
 }

src/pages/user/index.scss

@@ -1,6 +1,6 @@
 .user-page {
   min-height: 100vh;
-  background-color: #f5f5f5;
+  background-color: #121212;
 
   .header {
     padding: 60px 32px;