diff --git a/src/app.config.ts b/src/app.config.ts
index ba6d663..e12e2bd 100644
--- a/src/app.config.ts
+++ b/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',
diff --git a/src/components/GuideBar/index.scss b/src/components/GuideBar/index.scss
new file mode 100644
index 0000000..41787e9
--- /dev/null
+++ b/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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/components/GuideBar/index.tsx b/src/components/GuideBar/index.tsx
new file mode 100644
index 0000000..d616759
--- /dev/null
+++ b/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 (
+
+
+ {/* guide area on the left */}
+
+ {guideItems.map((item) => (
+ handlePageChange(item.code)}
+ >
+ {item.text}
+
+ ))}
+
+ {/* publish button on the right */}
+
+
+
+
+
+ )
+}
+
+export default GuideBar
\ No newline at end of file
diff --git a/src/config/images.js b/src/config/images.js
index 13c69c9..61d87fe 100644
--- a/src/config/images.js
+++ b/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'),
}
\ No newline at end of file
diff --git a/src/pages/detail/index.tsx b/src/pages/detail/index.tsx
index 957328b..f0e856a 100644
--- a/src/pages/detail/index.tsx
+++ b/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() {
32
-
+
🎾
立即加入
diff --git a/src/pages/list/index.tsx b/src/pages/list/index.tsx
index 7c12b7f..220117b 100644
--- a/src/pages/list/index.tsx
+++ b/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 = () => {
})}
+
+
);
};
diff --git a/src/pages/message/index.config.ts b/src/pages/message/index.config.ts
new file mode 100644
index 0000000..42d7ad1
--- /dev/null
+++ b/src/pages/message/index.config.ts
@@ -0,0 +1,5 @@
+export default definePageConfig({
+ navigationBarTitleText: '消息',
+ // navigationBarBackgroundColor: '#FAFAFA',
+ navigationStyle: 'custom',
+})
\ No newline at end of file
diff --git a/src/pages/message/index.scss b/src/pages/message/index.scss
new file mode 100644
index 0000000..092c41b
--- /dev/null
+++ b/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;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/pages/message/index.tsx b/src/pages/message/index.tsx
new file mode 100644
index 0000000..18f4130
--- /dev/null
+++ b/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 (
+
+
+
+
+ 消息
+
+
+
+
+ {messageList.map((item) => (
+
+
+ {item.title}
+
+
+ {item.content}
+
+
+ ))}
+
+
+
+
+ )
+}
+
+export default Personal
\ No newline at end of file
diff --git a/src/pages/orderCheck/index.config.ts b/src/pages/orderCheck/index.config.ts
new file mode 100644
index 0000000..e8419ed
--- /dev/null
+++ b/src/pages/orderCheck/index.config.ts
@@ -0,0 +1,4 @@
+export default definePageConfig({
+ navigationBarTitleText: '订单确认',
+ navigationBarBackgroundColor: '#FAFAFA'
+})
\ No newline at end of file
diff --git a/src/pages/orderCheck/index.scss b/src/pages/orderCheck/index.scss
new file mode 100644
index 0000000..e9e7c6b
--- /dev/null
+++ b/src/pages/orderCheck/index.scss
@@ -0,0 +1 @@
+@use '~@/scss/images.scss' as img;
\ No newline at end of file
diff --git a/src/pages/orderCheck/index.tsx b/src/pages/orderCheck/index.tsx
new file mode 100644
index 0000000..8165946
--- /dev/null
+++ b/src/pages/orderCheck/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { View, Text } from '@tarojs/components'
+
+const OrderCheck = () => {
+ return (
+
+ OrderCheck
+
+ )
+}
+
+export default OrderCheck
\ No newline at end of file
diff --git a/src/pages/personal/index.config.ts b/src/pages/personal/index.config.ts
new file mode 100644
index 0000000..ca1f786
--- /dev/null
+++ b/src/pages/personal/index.config.ts
@@ -0,0 +1,5 @@
+export default definePageConfig({
+ navigationBarTitleText: '个人中心',
+ // navigationBarBackgroundColor: '#FAFAFA',
+ navigationStyle: 'custom',
+})
\ No newline at end of file
diff --git a/src/pages/personal/index.scss b/src/pages/personal/index.scss
new file mode 100644
index 0000000..c2475fe
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/src/pages/personal/index.tsx b/src/pages/personal/index.tsx
new file mode 100644
index 0000000..042bc8e
--- /dev/null
+++ b/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 (
+
+ {id && (
+
+
+
+ )}
+
+ Personal
+
+
+
+ )
+}
+
+export default Personal
\ No newline at end of file
diff --git a/src/scss/images.scss b/src/scss/images.scss
index 3527d5a..28b8db1 100644
--- a/src/scss/images.scss
+++ b/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;
// 图片获取函数
diff --git a/src/static/common/guide-bar-publish.svg b/src/static/common/guide-bar-publish.svg
new file mode 100644
index 0000000..133858f
--- /dev/null
+++ b/src/static/common/guide-bar-publish.svg
@@ -0,0 +1,22 @@
+
diff --git a/src/static/common/navigator-back.svg b/src/static/common/navigator-back.svg
new file mode 100644
index 0000000..2ac5245
--- /dev/null
+++ b/src/static/common/navigator-back.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file