feat: add guide route and message page and empty person page

src/pages/detail/index.tsx

@@ -142,6 +142,12 @@ function Index() {
     })
   }
 
+  const handleJoinGame = () => {
+    Taro.navigateTo({
+      url: `/pages/orderCheck/index?id=${id}`,
+    })
+  }
+
   const tags = [{
     name: '🕙 急招',
     icon: '',
@@ -532,7 +538,7 @@ function Index() {
               <Text className='sticky-bottom-bar-comment-text'>32</Text>
             </View>
           </View>
-          <View className="sticky-bottom-bar-join-game">
+          <View className="sticky-bottom-bar-join-game" onClick={handleJoinGame}>
             <Text>🎾</Text>
             <Text>立即加入</Text>
             <View className='game-price'>

src/pages/list/index.tsx

@@ -12,11 +12,12 @@ import { useListStore } from "@/store/listStore";
 import {useGlobalState} from '@/store/global'
 import { View } from "@tarojs/components";
 import CustomerNavBar from "@/components/CustomNavbar";
+import GuideBar from "@/components/GuideBar";
 
 const ListPage = () => {
   // 从 store 获取数据和方法
   const store = useListStore() || {};
-  
+
     const {statusNavbarHeightInfo } = useGlobalState() || {}
     // console.log("===store===", store);
     // console.log('===statusNavbarHeightInfo', statusNavbarHeightInfo)
@@ -241,6 +242,8 @@ const ListPage = () => {
             })}
         </View>
       </View>
+
+      <GuideBar currentPage='list' />
     </>
   );
 };

src/pages/message/index.config.ts

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '消息',
+  // navigationBarBackgroundColor: '#FAFAFA',
+  navigationStyle: 'custom',
+})

src/pages/message/index.scss

@@ -0,0 +1,80 @@
+@use '~@/scss/images.scss' as img;
+
+$--Backgrounds-Primary: '#fff';
+
+.message-container {
+  width: 100%;
+  height: 100vh;
+  background: radial-gradient(227.15% 100% at 50% 0%, #EEFFDC 0%, #FFF 36.58%), var(--Backgrounds-Primary, #FFF);
+  // padding-top: 100px;
+  box-sizing: border-box;
+
+  .custom-navbar {
+    height: 56px; /* 通常与原生导航栏高度一致 */
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    // background-color: #fff;
+    color: #000;
+    padding-top: 44px; /* 适配状态栏 */
+    position: sticky;
+    top: 0;
+    z-index: 100;
+
+    .message-navigator {
+      position: relative;
+      left: 15px;
+      top: -2px;
+      width: 80px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+
+      .message-navigator-avatar {
+        width: 32px;
+        height: 32px;
+      }
+
+      .message-navigator-title {
+        font-size: 16px;
+        font-weight: 500;
+        color: #000;
+      }
+    }
+  }
+
+  .message-content {
+
+    .message-content-list {
+      display: flex;
+      flex-direction: column;
+      padding: 10px 15px;
+      box-sizing: border-box;
+      gap: 12px;
+
+      .message-item {
+        padding: 10px;
+        // border: 1px solid rgba(0, 0, 0, 0.1);
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
+        background-color: rgba(255, 255, 255, 0.5);
+        border-radius: 10px;
+      }
+
+      .message-item-title {
+        font-size: 16px;
+        font-weight: 500;
+        color: #000;
+      }
+
+      .message-item-content {
+        font-size: 14px;
+        color: #666;
+      }
+    }
+  }
+}

src/pages/message/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { View, Text, ScrollView } from '@tarojs/components'
+import { Avatar } from '@nutui/nutui-react-taro'
+import Taro from '@tarojs/taro'
+import GuideBar from '@/components/GuideBar'
+// import img from '@/config/images'
+import './index.scss'
+
+const Personal = () => {
+  const messageList = Array(10).fill(0).map((_, index) => ({
+    id: index + 1,
+    title: `消息${index + 1}消息${index + 1}消息${index + 1}消息${index + 1}`,
+    content: Array(Math.round(Math.random() * 40)).fill(0).map((_, index) => `消息${index + 1}`).join(''),
+  }))
+
+  return (
+    <View className='message-container'>
+      <View className='custom-navbar'>
+        <View className='message-navigator'>
+          <Avatar className='message-navigator-avatar' src="https://img.yzcdn.cn/vant/cat.jpeg" />
+          <Text className='message-navigator-title'>消息</Text>
+        </View>
+      </View>
+      <ScrollView scrollY className='message-content'>
+        <View className='message-content-list'>
+          {messageList.map((item) => (
+            <View className='message-item' key={item.id}>
+              <View className='message-item-title'>
+                <Text>{item.title}</Text>
+              </View>
+              <View className='message-item-content'>
+                <Text>{item.content}</Text>
+              </View>
+            </View>
+          ))}
+        </View>
+      </ScrollView>
+      <GuideBar currentPage='message' />
+    </View>
+  )
+}
+
+export default Personal

src/pages/orderCheck/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '订单确认',
+  navigationBarBackgroundColor: '#FAFAFA'
+})

src/pages/orderCheck/index.scss

@@ -0,0 +1 @@
+@use '~@/scss/images.scss' as img;

src/pages/orderCheck/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { View, Text } from '@tarojs/components'
+
+const OrderCheck = () => {
+  return (
+    <View>
+      <Text>OrderCheck</Text>
+    </View>
+  )
+}
+
+export default OrderCheck

src/pages/personal/index.config.ts

@@ -0,0 +1,5 @@
+export default definePageConfig({
+  navigationBarTitleText: '个人中心',
+  // navigationBarBackgroundColor: '#FAFAFA',
+  navigationStyle: 'custom',
+})

src/pages/personal/index.scss

@@ -0,0 +1,35 @@
+@use '~@/scss/images.scss' as img;
+
+$--Backgrounds-Primary: '#fff';
+
+.personal-container {
+  width: 100%;
+  height: 100vh;
+  background: radial-gradient(227.15% 100% at 50% 0%, #EEFFDC 0%, #FFF 36.58%), var(--Backgrounds-Primary, #FFF);
+  padding-top: 100px;
+  box-sizing: border-box;
+
+  .personal-navigator {
+    position: fixed;
+    left: 10px;
+    top: 54px;
+    width: 32px;
+    height: 32px;
+
+    .personal-navigator-back {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .personal-content {
+    width: 100%;
+    height: calc(100vh - 300px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 32px;
+    font-weight: 500;
+    color: #000;
+  }
+}

src/pages/personal/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { View, Text, Image } from '@tarojs/components'
+import Taro, { useRouter } from '@tarojs/taro'
+import GuideBar from '@/components/GuideBar'
+import img from '@/config/images'
+import './index.scss'
+
+const Personal = () => {
+  const { params } = useRouter()
+  const { id } = params
+
+  const handleBack = () => {
+    Taro.navigateBack()
+  }
+
+  return (
+    <View className='personal-container'>
+      {id && (
+        <View className='personal-navigator' onClick={handleBack}>
+          <Image className='personal-navigator-back' src={img.ICON_NAVIGATOR_BACK} />
+        </View>
+      )}
+      <View className='personal-content'>
+        <Text>Personal</Text>
+      </View>
+      <GuideBar currentPage='personal' />
+    </View>
+  )
+}
+
+export default Personal