diff --git a/src/pages/detail/index.scss b/src/pages/detail/index.scss
index 92a3ec6..2a1acf2 100644
--- a/src/pages/detail/index.scss
+++ b/src/pages/detail/index.scss
@@ -16,6 +16,8 @@
position: sticky;
top: 0;
z-index: 100;
+ overflow: hidden;
+ background-color: rgba(0, 0, 0, 0.2);
}
.detail-navigator {
@@ -63,12 +65,26 @@
left: 0;
top: 0;
background-size: cover;
- filter: blur(40px);
- transform: scale(1.5);
+ // filter: blur(40px);
+ // transform: scale(1.5);
z-index: -2;
- width: calc(100% + 20px);
- height: calc(100% + 20px);
- margin: -10px;
+ // width: calc(100% + 20px);
+ // height: calc(100% + 20px);
+ // margin: -10px;
+ width: 100vw;
+ height: 100vh;
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: -1;
+ background: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.40) 100%);
+ backdrop-filter: blur(100px);
+ }
}
.detail-page-bg-text {
@@ -215,7 +231,6 @@
display: flex;
width: 48px;
height: 48px;
- padding-bottom: 6px;
box-sizing: border-box;
flex-direction: column;
align-items: center;
@@ -225,6 +240,7 @@
background: rgba(255, 255, 255, 0.25);
overflow: hidden;
color: #FFF;
+ background: #536272;
.month {
width: 100%;
@@ -235,20 +251,21 @@
box-sizing: border-box;
justify-content: center;
align-items: center;
- border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ // border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: #7B828B;
}
.day {
display: flex;
width: 48px;
- padding-bottom: 6px;
+ height: 30px;
+ // padding-bottom: 6px;
box-sizing: border-box;
flex-direction: column;
align-items: center;
- gap: 4px;
// border: 0.5px solid rgba(255, 255, 255, 0.08);
// background: rgba(255, 255, 255, 0.25);
+ // background-color: #536272;
}
}
@@ -334,7 +351,7 @@
align-items: center;
overflow: hidden;
// border: 0.5px solid rgba(255, 255, 255, 0.08);
- background: rgba(255, 255, 255, 0.25);
+ // background: rgba(255, 255, 255, 0.25);
&-image {
width: 20px;
@@ -399,7 +416,7 @@
}
}
- &-detail {
+ &-venue {
padding: 24px 15px 0;
box-sizing: border-box;
@@ -408,7 +425,7 @@
height: 31px;
align-items: center;
justify-content: flex-start;
- gap: 4px;
+ gap: 8px;
padding-bottom: 6px;
color: #FFF;
text-overflow: ellipsis;
@@ -419,9 +436,15 @@
line-height: 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
- &-notice-icon {
- width: 14px;
- height: 14px;
+ .venue-reserve-status {
+ display: inline-flex;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 4px;
+ .venue-reserve-screenshot {
+ width: 16px;
+ height: 16px;
+ }
}
}
@@ -461,6 +484,51 @@
line-height: 24px; /* 160% */
}
}
+
+ .venue-screenshot-title {
+ display: flex;
+ padding: 18px 20px 10px 20px;
+ align-items: center;
+ align-self: stretch;
+ font-family: "PingFang SC";
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 24px; /* 150% */
+ letter-spacing: -0.23px;
+ }
+
+ .venue-screenshot-scroll-view {
+ max-height: calc(100vh - 260px);
+ overflow-y: auto;
+ padding-bottom: 40px;
+
+ .venue-screenshot-image-list {
+ width: 100%;
+ padding: 0 16px;
+ box-sizing: border-box;
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 10px 10px;
+
+ .venue-screenshot-image-item {
+ aspect-ratio: 1/1;
+ border-radius: 9px;
+ border: 1px solid rgba(0, 0, 0, 0.12);
+ box-sizing: border-box;
+ background: rgba(0, 0, 0, 0.06);
+ margin: 0;
+ position: relative;
+
+ .venue-screenshot-image-item-image {
+ width: 100%;
+ height: 100%;
+ border-radius: 9px;
+ margin: 0;
+ }
+ }
+ }
+ }
}
&-gameplay-requirements {
@@ -591,7 +659,7 @@
.participants-list-item {
display: flex;
width: 108px;
- padding: 16px 12px 10px 12px;
+ padding: 16px 4px 10px 4px;
box-sizing: border-box;
flex-direction: column;
justify-content: center;
@@ -608,6 +676,7 @@
}
&-name {
+ width: 100%;
color: rgba(255, 255, 255, 0.85);
text-align: center;
font-feature-settings: 'liga' off, 'clig' off;
@@ -616,6 +685,9 @@
font-style: normal;
font-weight: 500;
line-height: 24px; /* 184.615% */
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
&-level {
diff --git a/src/pages/detail/index.tsx b/src/pages/detail/index.tsx
index dbf2ba2..298968f 100644
--- a/src/pages/detail/index.tsx
+++ b/src/pages/detail/index.tsx
@@ -1,6 +1,6 @@
import React, { useState, useRef, useImperativeHandle, forwardRef } from 'react'
import { View, Text, Image, Map, ScrollView } from '@tarojs/components'
-import { Avatar, Popover } from '@nutui/nutui-react-taro'
+import { Avatar, Popover, ImagePreview } from '@nutui/nutui-react-taro'
import Taro, { useRouter, useShareAppMessage, useShareTimeline, useDidShow } from '@tarojs/taro'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
@@ -86,7 +86,6 @@ function StickyButton(props) {
const { publisher_id, match_status, price } = detail || {}
const role = Number(publisher_id) === id ? 'ownner' : 'visitor'
- console.log(match_status, role)
return (
@@ -214,117 +213,196 @@ function GameInfo(props) {
)
}
-function Index() {
- // 使用Zustand store
- // const userStats = useUserStats()
- // const { incrementRequestCount, resetUserStats } = useUserActions()
+// 场馆信息
+function VenueInfo(props) {
+ const { detail } = props
+ const [visible, setVisible] = useState(false)
+ const { venue_description, venue_description_tag = [], venue_image_list = [] } = detail
- const [current, setCurrent] = useState(0)
- // const [textColor, setTextColor] = useState([])
- const [detail, setDetail] = useState(null)
- const { params } = useRouter()
- const [currentLocation, setCurrentLocation] = useState<[number, number]>([0, 0])
- const { id, autoShare, from } = params
- const { fetchUserInfo, updateUserInfo } = useUserActions()
-
- console.group('params')
- console.log(params)
- console.groupEnd()
-
- // 本地状态管理
- const [loading, setLoading] = useState(false)
- const sharePopupRef = useRef(null)
-
- // 页面加载时获取数据
- // useEffect(() => {
- // fetchDetail()
- // calcBgMainColors()
- // }, [])
-
- useDidShow(async () => {
- await updateLocation()
- await fetchUserInfo()
- await fetchDetail()
- // calcBgMainColors()
- })
-
- const updateLocation = async () => {
- try {
- const location = await getCurrentLocation()
- setCurrentLocation([location.latitude, location.longitude])
- await updateUserInfo({ latitude: location.latitude, longitude: location.longitude })
- console.log('用户位置更新成功')
- } catch (error) {
- console.error('用户位置更新失败', error)
- }
+ function showScreenShot() {
+ setVisible(true)
+ }
+ function onClose() {
+ setVisible(false)
}
- const fetchDetail = async () => {
- const res = await DetailService.getDetail(243/* Number(id) */)
- if (res.code === 0) {
- console.log(res.data)
- setDetail(res.data)
- }
- }
-
- // const calcBgMainColors = async () => {
- // const textcolors: string[] = []
- // // for (const index in images) {
- // // const { textColor } = await getTextColorOnImage(images[index])
- // // textcolors[index] = textColor
- // // }
- // if (detail?.image_list?.length > 0) {
- // const { textColor } = await getTextColorOnImage(detail.image_list[0])
- // textcolors[0] = textColor
- // }
- // setColors(textcolors)
- // }
-
- function handleShare() {
- sharePopupRef.current.show()
- }
-
- const handleJoinGame = () => {
- Taro.navigateTo({
- url: `/pages/orderCheck/index?gameId=${243/* id */}`,
+ function previewImage(current_url) {
+ Taro.previewImage({
+ current: current_url,
+ urls: venue_image_list.map(c => c.url),
})
}
+ return (
+
+ {/* venue detail title and venue ordered status */}
+
+ 场馆详情
+ {venue_image_list?.length > 0 ?
+ <>
+ ·
+
+ 已订场
+
+
+
+ :
+ ''
+ }
+
+ {/* venue detail content */}
+
+ {/* venue detail tags */}
+
+ {insertDotInTags(venue_description_tag).map((tag, index) => (
+
+ {tag}
+
+ ))}
+
+ {/* venue remarks */}
+
+ {venue_description}
+
+
+
+ 预定截图
+
+
+ {venue_image_list.map(item => {
+ return (
+
+
+
+ )
+ })}
+
+
+
+
+ )
+}
- const tags = [{
- name: '🕙 急招',
- icon: '',
- }, {
- name: '🔥 本周热门',
- icon: '',
- }, {
- name: '🎉 新活动',
- icon: '',
- }, {
- name: '官方组织',
- icon: '',
- }]
+function genNTRPRequirementText(min, max) {
+ if (min && max) {
+ return `${min} - ${max} 之间`
+ } else if (max) {
+ return `${max} 以上`
+ }
+ return '没有要求'
+}
+// 玩法要求
+function GamePlayAndRequirement(props) {
+ const { detail: { skill_level_min, skill_level_max, play_type, game_type } } = props
- const detailTags = ['室内', '硬地', '2号场', '有停车场', '有淋浴间', '有更衣室']
+ const requirements = [
+ {
+ title: 'NTRP水平要求',
+ desc: genNTRPRequirementText(skill_level_min, skill_level_max),
+ },
+ {
+ title: '活动玩法',
+ desc: play_type || '-',
+ },
+ {
+ title: '人员构成',
+ desc: game_type || '-',
+ }
+ ]
+ return (
+
+ {/* title */}
+
+ 玩法要求
+
+ {/* requirements */}
+
+ {requirements.map((item, index) => (
+
+ {item.title}
+ {item.desc}
+
+ ))}
+
+
+ )
+}
- const { title, longitude, latitude } = detail || {}
+// 参与者
+function Participants(props) {
+ const { detail = {} } = props
+ const participants = detail.participants || []
+ const organizer_id = Number(detail.publisher_id)
+ return (
+
+
+ 参与者
+ ·
+ 剩余空位 3
+
+
+ {/* application */}
+ { Taro.showToast({ title: 'To be continued', icon: 'none' }) }}>
+
+ 申请加入
+
+ {/* participants list */}
+
+
+ {participants.map((participant) => {
+ const { user: { avatar_url, nickname, level, id: participant_user_id } } = participant
+ const role = participant_user_id === organizer_id ? '组织者' : '参与者'
+ return (
+
+
+ {nickname || '未知'}
+ {level || '未知'}
+ {role}
+
+ )
+ })}
+
+
+
+
+ )
+}
- console.log(longitude, latitude, 2222)
-
- const requirements = [{
- title: 'NTRP水平要求',
- desc: '2.0 - 4.5 之间',
- }, {
- title: '活动玩法',
- desc: '双打',
- }, {
- title: '人员构成',
- desc: '个人球局 · 组织者参与活动',
- }]
-
- const participants = detail?.participants || []
-
- const supplementalNotesTags = ['仅限男生', '装备自备', '其他']
+function SupplementalNotes(props) {
+ const { detail: { description, description_tag = [] } } = props
+ return (
+
+
+ 补充说明
+
+
+ {/* supplemental notes tags */}
+
+ {insertDotInTags(description_tag).map((tag, index) => (
+
+ {tag}
+
+ ))}
+
+ {/* supplemental notes content */}
+
+ {description}
+
+
+
+ )
+}
+function OrganizerInfo(props) {
const recommendGames = [
{
title: '黄浦日场对拉',
@@ -366,6 +444,140 @@ function Index() {
playType: '双打',
},
]
+ return (
+
+ {/* orgnizer title */}
+
+ 组织者
+
+ {/* organizer avatar and name */}
+
+
+
+ Light
+
+ 已组织 8 次
+
+ NTRP 3.5
+
+
+
+
+
+ 关注
+
+
+
+
+
+
+ {/* recommend games by organizer */}
+
+
+ TA的更多活动
+
+
+
+
+ {recommendGames.map((game, index) => (
+
+ {/* game title */}
+
+ {game.title}
+
+
+ {/* game time and range */}
+
+ {game.time}
+ {game.timeLength}
+
+ {/* game location、vunue、distance */}
+
+ {game.venue}
+ ·
+ {game.veuneType}
+ ·
+ {game.distance}
+
+ {/* organizer avatar、applications、level requirements、play type */}
+
+
+
+
+ 报名人数 {game.checkedApplications}/{game.applications}
+
+
+ {game.levelRequirements}
+
+
+ {game.playType}
+
+
+
+
+ ))}
+
+
+
+
+ )
+}
+
+function Index() {
+ const [detail, setDetail] = useState({})
+ const { params } = useRouter()
+ const [currentLocation, setCurrentLocation] = useState<[number, number]>([0, 0])
+ const { id, from } = params
+ const { fetchUserInfo, updateUserInfo } = useUserActions()
+
+ const sharePopupRef = useRef(null)
+
+ useDidShow(async () => {
+ await updateLocation()
+ await fetchUserInfo()
+ await fetchDetail()
+ })
+
+ const updateLocation = async () => {
+ try {
+ const location = await getCurrentLocation()
+ setCurrentLocation([location.latitude, location.longitude])
+ await updateUserInfo({ latitude: location.latitude, longitude: location.longitude })
+ } catch (error) {
+ console.error('用户位置更新失败', error)
+ }
+ }
+
+ const fetchDetail = async () => {
+ const res = await DetailService.getDetail(243/* Number(id) */)
+ if (res.code === 0) {
+ setDetail(res.data)
+ }
+ }
+
+ function handleShare() {
+ sharePopupRef.current.show()
+ }
+
+ const handleJoinGame = () => {
+ Taro.navigateTo({
+ url: `/pages/orderCheck/index?gameId=${243/* id */}`,
+ })
+ }
+
+ const tags = [{
+ name: '🕙 急招',
+ icon: '',
+ }, {
+ name: '🔥 本周热门',
+ icon: '',
+ }, {
+ name: '🎉 新活动',
+ icon: '',
+ }, {
+ name: '官方组织',
+ icon: '',
+ }]
function handleBack() {
const pages = Taro.getCurrentPages()
@@ -380,6 +592,8 @@ function Index() {
console.log('detail', detail)
+ const backgroundImage = detail?.image_list?.[0] ? { backgroundImage: `url(${detail?.image_list?.[0]})` } : {}
+
return (
{/* custom navbar */}
@@ -393,8 +607,7 @@ function Index() {
-
-
+
{/* swiper */}
@@ -413,29 +626,6 @@ function Index() {
}
- {/* { setCurrent(e.detail.current) }}
- >
- {images.map((imageUrl, index) => (
-
-
-
- ))}
- */}
{/* content */}
{/* avatar and tags */}
@@ -455,186 +645,20 @@ function Index() {
{/* title */}
- {title}
+ {detail.title}
{/* Date and Place and weather */}
{/* detail */}
-
- {/* venue detail title and venue ordered status */}
-
- 场馆详情
- ·
- 已订场
-
-
- }
- location='top'
- visible={false}
- >
-
-
-
- {/* venue detail content */}
-
- {/* venue detail tags */}
-
- {insertDotInTags(detailTags).map((tag, index) => (
-
- {tag}
-
- ))}
-
- {/* venue remarks */}
-
- 其他这是用户在场地补充描述里自己写的东西啦啦啦啦啦啦啦啦啦啦啦啦
-
-
-
+
{/* gameplay requirements */}
-
- {/* title */}
-
- 玩法要求
-
- {/* requirements */}
-
- {requirements.map((item, index) => (
-
- {item.title}
- {item.desc}
-
- ))}
-
-
+
{/* participants */}
-
-
- 参与者
- ·
- 剩余空位 3
-
-
- {/* application */}
- { Taro.showToast({ title: 'To be continued', icon: 'none' }) }}>
-
- 申请加入
-
- {/* participants list */}
-
-
- {participants.map((participant) => (
-
- {/* */}
- {/* network image mock random */}
-
- {participant.user.nickname || '未知'}
- {participant.level || '未知'}
- {participant.role || '参与者'}
-
- ))}
-
-
-
-
+
{/* supplemental notes */}
-
-
- 补充说明
-
-
- {/* supplemental notes tags */}
-
- {insertDotInTags(supplementalNotesTags).map((tag, index) => (
-
- {tag}
-
- ))}
-
- {/* supplemental notes content */}
-
- 其他这是用户在补充说明里自己写的东西啦啦啦啦啦啦啦啦啦啦啦啦其他这是用户在补充说明里自己写的东西啦啦啦啦啦啦啦啦啦啦啦啦
-
-
-
+
{/* organizer and recommend games by organizer */}
-
- {/* orgnizer title */}
-
- 组织者
-
- {/* organizer avatar and name */}
-
-
-
- Light
-
- 已组织 8 次
-
- NTRP 3.5
-
-
-
-
-
- 关注
-
-
-
-
-
-
- {/* recommend games by organizer */}
-
-
- TA的更多活动
-
-
-
-
- {recommendGames.map((game, index) => (
-
- {/* game title */}
-
- {game.title}
-
-
- {/* game time and range */}
-
- {game.time}
- {game.timeLength}
-
- {/* game location、vunue、distance */}
-
- {game.venue}
- ·
- {game.veuneType}
- ·
- {game.distance}
-
- {/* organizer avatar、applications、level requirements、play type */}
-
-
-
-
- 报名人数 {game.checkedApplications}/{game.applications}
-
-
- {game.levelRequirements}
-
-
- {game.playType}
-
-
-
-
- ))}
-
-
-
-
+
{/* sticky bottom action bar */}
{/* share popup */}
diff --git a/src/pages/login/index/index.tsx b/src/pages/login/index/index.tsx
index a7b607a..53e7da1 100644
--- a/src/pages/login/index/index.tsx
+++ b/src/pages/login/index/index.tsx
@@ -45,7 +45,6 @@ const LoginPage: React.FC = () => {
setTimeout(() => {
if (redirect) {
- console.log('redirect:', decodeURIComponent(redirect))
Taro.redirectTo({ url: decodeURIComponent(redirect) });
} else {
Taro.redirectTo({ url: '/pages/list/index' });
diff --git a/src/services/httpService.ts b/src/services/httpService.ts
index 4c356fa..223617e 100644
--- a/src/services/httpService.ts
+++ b/src/services/httpService.ts
@@ -211,12 +211,13 @@ class HttpService {
}
try {
- console.log(this.buildHeaders(config), 1111);
+ const reqHeader = this.buildHeaders(config)
+ this.log('info', 'HTTP REQ HEADER: ', reqHeader)
const requestConfig = {
url: fullUrl,
method: method,
data: method !== 'GET' ? data : undefined,
- header: this.buildHeaders(config),
+ header: reqHeader,
timeout: this.timeout
}
diff --git a/src/store/userStore.ts b/src/store/userStore.ts
index 07ebb81..16831ab 100644
--- a/src/store/userStore.ts
+++ b/src/store/userStore.ts
@@ -34,7 +34,6 @@ export const useUser = create()((set) => ({
},
updateUserInfo: async(userInfo: Partial) => {
const res = await updateUserProfile(userInfo)
- console.log(res)
set({ user: res.data })
}
}))