Merge branch 'feat/liujie'

src/app.config.ts

@@ -8,6 +8,9 @@ export default defineAppConfig({
     'pages/publishBall/index',
     // 'pages/mapDisplay/index',
     'pages/detail/index',
+    'pages/message/index',
+    'pages/personal/index',
+    'pages/orderCheck/index',
   ],
   window: {
     backgroundTextStyle: 'light',

src/components/GuideBar/index.scss

@@ -0,0 +1,88 @@
+@use '~@/scss/images.scss' as img;
+
+.guide-bar-container {
+  padding-top: calc(60px + 20px + env(safe-area-inset-bottom));
+}
+
+.guide-bar {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: calc(60px + 20px + env(safe-area-inset-bottom));
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 12px env(safe-area-inset-bottom);
+
+  &-pages {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    display: inline-flex;
+    height: 60px;
+    padding: 8px 6px;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.20);
+    background: rgba(255, 255, 255, 0.40);
+    box-shadow: 0 4px 64px 0 rgba(0, 0, 0, 0.16);
+    backdrop-filter: blur(16px);
+
+    &-item {
+      display: flex;
+      width: 76px;
+      height: 48px;
+      padding: 14px 22px;
+      box-sizing: border-box;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+      color: rgba(60, 60, 67, 0.60);
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px; /* 125% */
+    }
+
+    &-item-active {
+      display: flex;
+      width: 76px;
+      height: 48px;
+      padding: 14px 22px;
+      box-sizing: border-box;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+      border-radius: 999px;
+      border: 0.5px solid rgba(0, 0, 0, 0.06);
+      background: #FFF;
+      box-shadow: 0 4px 48px 0 rgba(0, 0, 0, 0.08);
+      color: #000;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 20px; /* 125% */
+    }
+  }
+
+  &-publish {
+    display: flex;
+    width: 60px;
+    height: 60px;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    border-radius: 999px;
+    // border: 2px solid rgba(0, 0, 0, 0.06);
+    background: radial-gradient(75.92% 98.69% at 26.67% 8.33%, #BDFF4A 16.88%, #95F23E 54.19%, #32D838 100%);
+    box-shadow: 0 4px 48px 0 rgba(0, 0, 0, 0.08);
+    backdrop-filter: blur(16px);
+
+    &-icon {
+      width: 36px;
+      height: 36px;
+    }
+  }
+}

src/components/GuideBar/index.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react'
+import { View, Text, Image } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import img from '@/config/images'
+import './index.scss'
+
+export type currentPageType = 'games' | 'message' | 'personal'
+
+const GuideBar = (props) => {
+  const { currentPage } = props
+
+  const guideItems = [
+    {
+      code: 'list',
+      text: '球局',
+    },
+    {
+      code: 'message',
+      text: '消息',
+    },
+    {
+      code: 'personal',
+      text: '我的',
+    },
+  ]
+
+  const handlePublish = () => {
+    Taro.navigateTo({
+      url: '/pages/publishBall/index',
+    })
+  }
+
+  const handlePageChange = (code: string) => {
+    if (code === currentPage) {
+      return
+    }
+    Taro.navigateTo({
+      url: `/pages/${code}/index`,
+    }).then(() => {
+      Taro.pageScrollTo({
+        scrollTop: 0,
+        duration: 300,
+      })
+    })
+  }
+
+  return (
+    <View className='guide-bar-container'>
+      <View className='guide-bar'>
+        {/* guide area on the left */}
+        <View className='guide-bar-pages'>
+          {guideItems.map((item) => (
+            <View
+              className={`guide-bar-pages-item ${currentPage === item.code ? 'guide-bar-pages-item-active' : ''}`}
+              onClick={() => handlePageChange(item.code)}
+            >
+              <Text>{item.text}</Text>
+            </View>
+          ))}
+        </View>
+        {/* publish button on the right */}
+        <View className='guide-bar-publish' onClick={handlePublish}>
+          <Image className='guide-bar-publish-icon' src={img.ICON_GUIDE_BAR_PUBLISH} />
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export default GuideBar

src/config/images.js

@@ -41,4 +41,6 @@ export default {
     ICON_DETAIL_COMMENT: require('@/static/detail/icon-comment.svg'),
     ICON_DETAIL_COMMENT_DARK: require('@/static/detail/icon-comment-dark.svg'),
     ICON_DETAIL_SHARE: require('@/static/detail/icon-share-dark.svg'),
+    ICON_GUIDE_BAR_PUBLISH: require('@/static/common/guide-bar-publish.svg'),
+    ICON_NAVIGATOR_BACK: require('@/static/common/navigator-back.svg'),
   }

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,6 +12,7 @@ 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 获取数据和方法
@@ -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

src/scss/images.scss

@@ -38,6 +38,8 @@ $-images: (
   'icon-detail-comment': '/detail/icon-comment.svg',
   'icon-detail-comment-dark': '/detail/icon-comment-dark.svg',
   'icon-detail-share': '/detail/icon-share-dark.svg',
+  'icon-guide-bar-publish': '/common/guide-bar-publish.svg',
+  'icon-navigator-back': '/common/navigator-back.svg',
 ) !default;
 
 // 图片获取函数

src/static/common/guide-bar-publish.svg

@@ -0,0 +1,22 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3006_12308)">
+<g filter="url(#filter0_d_3006_12308)">
+<path d="M18.0479 5.5C19.1523 5.50156 20.0464 6.39843 20.0449 7.50293L20.0342 16H28.5C29.6046 16 30.5 16.8954 30.5 18C30.5 19.1046 29.6046 20 28.5 20H20.0283L20.0176 28.5029C20.016 29.6074 19.1191 30.5014 18.0146 30.5C16.9104 30.4982 16.0161 29.6014 16.0176 28.4971L16.0283 20H7.5C6.39543 20 5.5 19.1046 5.5 18C5.5 16.8954 6.39543 16 7.5 16H16.0342L16.0449 7.49707C16.0465 6.39276 16.9435 5.49874 18.0479 5.5Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_3006_12308" x="-6.5" y="-2.5" width="49" height="49" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="6"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3006_12308"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3006_12308" result="shape"/>
+</filter>
+<clipPath id="clip0_3006_12308">
+<rect width="36" height="36" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/static/common/navigator-back.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+  <path d="M20.6667 24L12.6667 16L20.6667 8" stroke="black" stroke-width="2.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>