From f184624c33566474283de1ddaa0d14e2cc172c3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=9D=B0?= Date: Tue, 26 Aug 2025 00:02:42 +0800 Subject: [PATCH] feat: detail static --- src/components/UploadCover/index.tsx | 1 + src/config/images.js | 8 + src/pages/detail/index.scss | 853 +++++++++++++++++- src/pages/detail/index.tsx | 394 +++++++- src/scss/images.scss | 8 + .../{detailApi.ts => detailService.ts} | 0 src/services/publishService.ts | 2 +- src/static/detail/icon-application-add.svg | 4 + src/static/detail/icon-arrow-right.svg | 3 + src/static/detail/icon-comment-dark.svg | 7 + src/static/detail/icon-comment.svg | 7 + src/static/detail/icon-map.svg | 7 + src/static/detail/icon-notice.svg | 5 + src/static/detail/icon-share-dark.svg | 3 + src/static/detail/icon-weather-sun.svg | 18 + 15 files changed, 1291 insertions(+), 29 deletions(-) rename src/services/{detailApi.ts => detailService.ts} (100%) create mode 100644 src/static/detail/icon-application-add.svg create mode 100644 src/static/detail/icon-arrow-right.svg create mode 100644 src/static/detail/icon-comment-dark.svg create mode 100644 src/static/detail/icon-comment.svg create mode 100644 src/static/detail/icon-map.svg create mode 100644 src/static/detail/icon-notice.svg create mode 100644 src/static/detail/icon-share-dark.svg create mode 100644 src/static/detail/icon-weather-sun.svg diff --git a/src/components/UploadCover/index.tsx b/src/components/UploadCover/index.tsx index e2982b3..08927d0 100644 --- a/src/components/UploadCover/index.tsx +++ b/src/components/UploadCover/index.tsx @@ -60,6 +60,7 @@ export default function UploadCover(props: UploadCoverProps) { const [visible, setVisible] = useState(false) const onAdd = useCallback((images: CoverImageValue[]) => { + // FIXME: prev is not latest value onChange(prev => mergeCoverImages(prev, images)) setVisible(false) }, [value]) diff --git a/src/config/images.js b/src/config/images.js index d5800c0..13c69c9 100644 --- a/src/config/images.js +++ b/src/config/images.js @@ -33,4 +33,12 @@ export default { ICON_CIRCLE_SELECT_ARROW: require('@/static/publishBall/icon-circle-select-arrow.svg'), ICON_LOGO: require('@/static/logo.svg'), ICON_CHANGE: require('@/static/list/icon-change.svg'), + ICON_WEATHER_SUN: require('@/static/detail/icon-weather-sun.svg'), + ICON_DETAIL_MAP: require('@/static/detail/icon-map.svg'), + ICON_DETAIL_ARROW_RIGHT: require('@/static/detail/icon-arrow-right.svg'), + ICON_DETAIL_NOTICE: require('@/static/detail/icon-notice.svg'), + ICON_DETAIL_APPLICATION_ADD: require('@/static/detail/icon-application-add.svg'), + 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'), } \ No newline at end of file diff --git a/src/pages/detail/index.scss b/src/pages/detail/index.scss index 267fa4a..4f7fa63 100644 --- a/src/pages/detail/index.scss +++ b/src/pages/detail/index.scss @@ -3,6 +3,7 @@ .detail-page { width: 100%; height: 100%; + // padding-bottom: env(safe-area-inset-bottom); .custom-navbar { height: 56px; /* 通常与原生导航栏高度一致 */ @@ -11,7 +12,10 @@ justify-content: center; // background-color: #fff; color: #000; - padding-top: 36px; /* 适配状态栏 */ + padding-top: 44px; /* 适配状态栏 */ + position: sticky; + top: 0; + z-index: 100; } .detail-navigator { @@ -94,9 +98,848 @@ } } - .detail-text { - font-size: 40rpx; - margin-top: 20px; - transition: color 0.3s ease-in; + .detail-page-content { + + &-avatar-tags { + padding: 20px 20px 0; + box-sizing: border-box; + display: flex; + align-items: center; + gap: 6px; + + &-avatar { + width: 28px; + height: 28px; + border-radius: 50%; + overflow: hidden; + + &-image { + width: 28px; + height: 28px; + border-radius: 50%; + } + } + + &-tags { + display: flex; + align-items: center; + gap: 6px; + + &-tag { + display: flex; + height: 28px; + padding: 6px 12px; + box-sizing: border-box; + align-items: center; + gap: 4px; + border-radius: 999px; + border: 0.5px solid rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0.25); + color: #fff; + font-size: 13px; + font-weight: 500; + line-height: 20px; + letter-spacing: -0.23px; + text-align: center; + } + } } + + &-title { + padding: 20px 20px 0; + box-sizing: border-box; + + &-text { + overflow: hidden; + color: #FFF; + font-feature-settings: 'liga' off, 'clig' off; + text-overflow: ellipsis; + font-family: "PingFang SC"; + font-size: 22px; + font-style: normal; + font-weight: 600; + line-height: 32px; /* 145.455% */ + } + } + + &-game-info { + &-date-weather { + padding: 20px 20px 0; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: space-between; + // gap: 12px; + + &-calendar-date { + width: 60%; + display: flex; + align-items: center; + gap: 16px; + + &-calendar { + display: flex; + width: 48px; + height: 48px; + padding-bottom: 6px; + box-sizing: border-box; + flex-direction: column; + align-items: center; + gap: 4px; + border-radius: 12px; + // border: 0.5px solid rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0.25); + overflow: hidden; + color: #FFF; + + .month { + width: 100%; + height: 18px; + font-size: 10px; + display: flex; + padding: 1px auto; + box-sizing: border-box; + justify-content: center; + align-items: center; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + background: #7B828B; + } + + .day { + display: flex; + width: 48px; + 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); + } + } + + &-date { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-evenly; + gap: 4px; + align-self: stretch; + color: #FFF; + + .date { + color: #FFF; + font-feature-settings: 'liga' off, 'clig' off; + font-family: "PingFang SC"; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 24px; /* 150% */ + } + + .venue-time { + color: rgba(255, 255, 255, 0.80); + font-feature-settings: 'liga' off, 'clig' off; + font-family: "PingFang SC"; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 20px; /* 166.667% */ + } + } + } + + &-weather { + display: flex; + align-items: flex-end; + flex-direction: column; + gap: 4px; + + &-icon { + width: 20px; + height: 20px; + + .weather-icon { + width: 20px; + height: 20px; + } + } + &-text-temperature { + display: flex; + align-items: center; + gap: 12px; + color: rgba(255, 255, 255, 0.80); + font-feature-settings: 'liga' off, 'clig' off; + font-family: "PingFang SC"; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 20px; /* 166.667% */ + } + } + } + + &-place { + .location-message { + padding: 20px 20px 0; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 12px; + + &-icon { + width: 48px; + height: 48px; + border-radius: 12px; + padding: 14px; + box-sizing: border-box; + background: #4D5865; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + // border: 0.5px solid rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0.25); + + &-image { + width: 20px; + height: 20px; + } + } + + &-text { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-evenly; + gap: 4px; + align-self: stretch; + + &-name-distance { + display: flex; + align-items: center; + gap: 4px; + color: #FFF; + text-align: center; + font-feature-settings: 'liga' off, 'clig' off; + font-family: "PingFang SC"; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 24px; /* 150% */ + + &-arrow { + width: 16px; + height: 16px; + } + } + + &-address { + color: rgba(255, 255, 255, 0.80); + text-align: center; + font-feature-settings: 'liga' off, 'clig' off; + font-family: "PingFang SC"; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 20px; /* 166.667% */ + } + } + } + + .location-map { + width: 100%; + padding: 20px 20px 0; + box-sizing: border-box; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + + &-map { + width: 100%; + height: 95px; + } + } + } + } + + &-detail { + padding: 24px 15px 0; + box-sizing: border-box; + + .venue-detail-title { + display: flex; + height: 31px; + align-items: center; + justify-content: flex-start; + gap: 4px; + padding-bottom: 6px; + color: #FFF; + text-overflow: ellipsis; + font-family: "PingFang SC"; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 24px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + + &-notice-icon { + width: 14px; + height: 14px; + } + } + + .venue-detail-content { + padding: 16px 0 0; + box-sizing: border-box; + + &-tags { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; + + &-tag { + overflow: hidden; + color: #FFF; + font-feature-settings: 'liga' off, 'clig' off; + text-overflow: ellipsis; + font-family: "PingFang SC"; + font-size: 15px; + font-style: normal; + font-weight: 500; + line-height: 24px; /* 160% */ + } + } + + &-remarks { + overflow: hidden; + color: rgba(255, 255, 255, 0.65); + // font-feature-settings: 'liga' off, 'clig' off; + // text-overflow: ellipsis; + // white-space: nowrap; + font-family: "PingFang SC"; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: 24px; /* 160% */ + } + } + } + + &-gameplay-requirements { + padding: 24px 15px 0; + box-sizing: border-box; + + .gameplay-requirements-title { + overflow: hidden; + color: #FFF; + height: 24px; + padding-bottom: 6px; + font-feature-settings: 'liga' off, 'clig' off; + text-overflow: ellipsis; + font-family: "PingFang SC"; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 24px; /* 150% */ + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + } + + .gameplay-requirements { + padding: 12px 0 0; + display: flex; + flex-direction: column; + gap: 12px; + + &-item { + display: flex; + justify-content: space-between; + align-items: center; + gap: 2px; + align-self: stretch; + + &-title { + color: rgba(255, 255, 255, 0.80); + font-feature-settings: 'liga' off, 'clig' off; + font-family: "PingFang SC"; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 24px; /* 171.429% */ + } + + &-desc { + color: #FFF; + font-feature-settings: 'liga' off, 'clig' off; + font-family: "PingFang SC"; + font-size: 15px; + font-style: normal; + font-weight: 600; + line-height: 24px; /* 160% */ + } + } + } + } + + &-participants { + padding: 24px 15px 0; + box-sizing: border-box; + + .participants-title { + display: flex; + padding-bottom: 6px; + align-items: center; + overflow: hidden; + color: #FFF; + font-feature-settings: 'liga' off, 'clig' off; + text-overflow: ellipsis; + font-family: "PingFang SC"; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 24px; /* 150% */ + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + } + + .participants-list { + padding: 10px 0 0; + height: 162px; + display: flex; + flex-direction: row; + gap: 8px; + + &-application { + display: flex; + width: 108px; + height: 162px; + padding: 16px 12px 10px 12px; + box-sizing: border-box; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 8px; + align-self: stretch; + border-radius: 20px; + border: 1px dashed rgba(255, 255, 255, 0.20); + background: rgba(255, 255, 255, 0.16); + flex: 0 0 auto; + + &-icon { + width: 28px; + height: 28px; + } + + &-text { + color: rgba(255, 255, 255, 0.60); + font-feature-settings: 'liga' off, 'clig' off; + font-family: "PingFang SC"; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 20px; /* 166.667% */ + } + } + + &-scroll { + flex: 0 0 auto; + + &-content { + display: flex; + flex-direction: row; + gap: 8px; + height: 162px; + flex-wrap: nowrap; + + .participants-list-item { + display: flex; + width: 108px; + padding: 16px 12px 10px 12px; + box-sizing: border-box; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 4px; + border-radius: 20px; + border: 0.5px solid rgba(255, 255, 255, 0.20); + background: rgba(255, 255, 255, 0.16); + flex: 0 0 auto; + + &-avatar { + width: 60px; + height: 60px; + } + + &-name { + color: rgba(255, 255, 255, 0.85); + text-align: center; + font-feature-settings: 'liga' off, 'clig' off; + font-family: "PingFang SC"; + font-size: 13px; + font-style: normal; + font-weight: 500; + line-height: 24px; /* 184.615% */ + } + + &-level { + color: rgba(255, 255, 255, 0.45); + text-align: center; + font-feature-settings: 'liga' off, 'clig' off; + font-family: "PingFang SC"; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 20px; /* 166.667% */ + } + + &-role { + color: #FFF; + text-align: center; + font-feature-settings: 'liga' off, 'clig' off; + font-family: "PingFang SC"; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: 20px; /* 166.667% */ + } + } + } + } + } + } + + &-supplemental-notes { + padding: 24px 15px 0; + + .supplemental-notes-title { + overflow: hidden; + padding-bottom: 7px; + height: 24px; + color: #FFF; + font-feature-settings: 'liga' off, 'clig' off; + text-overflow: ellipsis; + font-family: "PingFang SC"; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 24px; /* 150% */ + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + } + + .supplemental-notes-content { + padding: 12px 0 0; + display: flex; + flex-direction: column; + gap: 6px; + + &-tags { + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; + + &-tag { + overflow: hidden; + color: #FFF; + font-feature-settings: 'liga' off, 'clig' off; + text-overflow: ellipsis; + font-family: "PingFang SC"; + font-size: 15px; + font-style: normal; + font-weight: 500; + line-height: 24px; /* 160% */ + } + } + + &-text { + overflow: hidden; + color: rgba(255, 255, 255, 0.65); + font-feature-settings: 'liga' off, 'clig' off; + font-family: "PingFang SC"; + font-size: 15px; + font-style: normal; + font-weight: 400; + line-height: 24px; /* 160% */ + } + } + } + + &-organizer-recommend-games { + padding: 24px 15px 0; + + .organizer-title { + overflow: hidden; + padding-bottom: 6px; + height: 24px; + color: #FFF; + font-feature-settings: 'liga' off, 'clig' off; + text-overflow: ellipsis; + font-family: "PingFang SC"; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 24px; /* 150% */ + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + } + + .organizer-avatar-name { + display: flex; + align-items: center; + padding: 16px 0 0; + align-items: center; + gap: 8px; + justify-content: flex-start; + + &-avatar { + width: 40px; + height: 40px; + } + + &-message { + display: flex; + flex-direction: column; + gap: 4px; + + &-name { + color: rgba(255, 255, 255, 0.85); + font-size: 13px; + font-style: normal; + font-weight: 500; + line-height: 24px; /* 184.615% */ + } + + &-stats { + display: flex; + align-items: center; + gap: 5px; + color: rgba(255, 255, 255, 0.60); + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 16px; /* 133.333% */ + letter-spacing: 0.06px; + + &-separator { + width: 1px; + height: 10px; + color: rgba(255, 255, 255, 0.20); + } + } + } + + .organizer-actions { + display: flex; + align-items: center; + gap: 8px; + margin-left: auto; + + .organizer-actions-follow, .organizer-actions-comment { + display: flex; + height: 32px; + box-sizing: border-box; + align-items: center; + gap: 4px; + border-radius: 999px; + // border: 0.5px solid rgba(255, 255, 255, 0.10); + background: rgba(255, 255, 255, 0.16); + box-shadow: 0 4px 48px 0 rgba(0, 0, 0, 0.08); + + & > image { + width: 16px; + height: 16px; + } + } + + .organizer-actions-follow { + padding: 8px 12px 8px; + &-text { + color: #FFF; + font-size: 13px; + font-style: normal; + font-weight: 500; + line-height: 20px; /* 153.846% */ + letter-spacing: -0.23px; + } + } + + .organizer-actions-comment { + padding: 8px 10px; + } + } + } + + .organizer-recommend-games { + padding-top: 20px; + + .organizer-recommend-games-title { + overflow: hidden; + color: rgba(255, 255, 255, 0.65); + font-family: "PingFang SC"; + font-size: 15px; + font-style: normal; + font-weight: 500; + line-height: 24px; /* 160% */ + display: flex; + align-items: center; + gap: 2px; + align-self: stretch; + + &-arrow { + width: 12px; + height: 12px; + } + } + + .recommend-games-list { + padding: 10px 0; + display: flex; + gap: 8px; + flex-wrap: nowrap; + + &-content { + display: flex; + gap: 8px; + flex-wrap: nowrap; + + .recommend-games-list-item { + width: 246px; + height: 122px; + display: flex; + flex-direction: column; + gap: 6px; + flex: 0 0 auto; + border-radius: 20px; + border: 1px solid rgba(33, 178, 0, 0.20); + background: rgba(255, 255, 255, 0.16); + padding: 12px 15px; + box-sizing: border-box; + + &-title { + display: flex; + align-items: center; + height: 24px; + gap: 2px; + overflow: hidden; + color: rgba(255, 255, 255, 0.85); + text-overflow: ellipsis; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 24px; /* 150% */ + + &-arrow { + width: 12px; + height: 12px; + } + } + + &-time-range { + overflow: hidden; + color: rgba(255, 255, 255, 0.45); + text-overflow: ellipsis; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 18px; /* 150% */ + } + + &-location-venue-distance { + display: flex; + align-items: center; + gap: 2px; + overflow: hidden; + color: rgba(255, 255, 255, 0.45); + font-feature-settings: 'liga' off, 'clig' off; + text-overflow: ellipsis; + font-family: "PingFang SC"; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: 18px; /* 150% */ + } + + &-addon { + display: flex; + align-items: center; + gap: 4px; + + &-avatar { + width: 20px; + height: 20px; + } + + &-message { + display: flex; + gap: 4px; + + &-applications, &-level-requirements, &-play-type { + color: rgba(255, 255, 255, 0.85); + font-size: 11px; + font-style: normal; + font-weight: 500; + line-height: 20px; /* 181.818% */ + letter-spacing: -0.23px; + display: flex; + height: 20px; + padding: 6px 8px; + box-sizing: border-box; + align-items: center; + gap: 4px; + border-radius: 999px; + // border: 0.5px solid rgba(0, 0, 0, 0.16); + background: rgba(255, 255, 255, 0.12); + } + } + } + } + } + } + } + } + + .sticky-bottom-bar { + position: sticky; + bottom: 0; + padding: 10px 10px env(safe-area-inset-bottom); + box-sizing: border-box; + width: 100%; + height: calc(52px + env(safe-area-inset-bottom)); + display: flex; + align-items: center; + justify-content: space-between; + gap: 6px; + + &-share-and-comment { + display: flex; + align-items: center; + height: 52px; + width: 113px; + box-sizing: border-box; + padding: 2px 20px; + justify-content: center; + gap: 16px; + border-radius: 16px; + border: 1px solid rgba(255, 255, 255, 0.06); + background: #FFF; + } + + &-join-game { + display: flex; + align-items: center; + height: 52px; + width: auto; + padding: 2px 6px; + box-sizing: border-box; + justify-content: center; + gap: 12px; + flex: 1 0 0; + border-radius: 16px; + border: 1px solid rgba(0, 0, 0, 0.06); + background: #FFF; + } + } + } } + diff --git a/src/pages/detail/index.tsx b/src/pages/detail/index.tsx index 7693a67..ee52196 100644 --- a/src/pages/detail/index.tsx +++ b/src/pages/detail/index.tsx @@ -1,10 +1,9 @@ import React, { useState, useEffect } from 'react' -import { View, Text, Button, Swiper, SwiperItem, Image } from '@tarojs/components' -import { Cell, Avatar, Progress } from '@nutui/nutui-react-taro' -import Taro from '@tarojs/taro' +import { View, Text, Button, Swiper, SwiperItem, Image, Map, ScrollView } from '@tarojs/components' +import { Cell, Avatar, Progress, Popover } from '@nutui/nutui-react-taro' +import Taro, { useRouter } from '@tarojs/taro' // 导入API服务 -import demoApi from '../../services/demoApi' -import commonApi from '../../services/commonApi' +import DetailService from '../../services/detailService' import { useUserStats, useUserActions @@ -19,7 +18,9 @@ const images = [ 'http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/49d7cdf0-b03c-4a0f-91c6-e7778080cfcd.png' ] - +function insertDotInTags(tags: string[]) { + return tags.join('-·-').split('-') +} function Index() { // 使用Zustand store @@ -28,28 +29,24 @@ function Index() { const [current, setCurrent] = useState(0) const [colors, setColors] = useState([]) + const [detail, setDetail] = useState(null) + const { params } = useRouter() + const { id, share } = params // 本地状态管理 const [loading, setLoading] = useState(false) - const [userProfile, setUserProfile] = useState(null) - const [interests, setInterests] = useState([]) // 页面加载时获取数据 useEffect(() => { - initializeData() + fetchDetail() calcBgMainColors() }, []) - // 初始化数据 - const initializeData = async () => { - try { - // 获取推荐的兴趣爱好 - const interestsRes = await demoApi.getRecommendedInterests() - if (interestsRes.success) { - setInterests(interestsRes.data || []) - } - } catch (error) { - console.log('获取初始数据失败:', error) + const fetchDetail = async () => { + const res = await DetailService.getDetail(Number(id)) + if (res.code === 0) { + console.log(res.data) + setDetail(res.data) } } @@ -62,8 +59,84 @@ function Index() { setColors(textcolors) } + const tags = [{ + name: '🕙 急招', + icon: '', + }, { + name: '🔥 本周热门', + icon: '', + }, { + name: '🎉 新活动', + icon: '', + }, { + name: '官方组织', + icon: '', + }] + + const detailTags = ['室内', '硬地', '2号场', '有停车场', '有淋浴间', '有更衣室'] + + const { title, longitude, latitude } = detail || {} + + const requirements = [{ + title: 'NTRP水平要求', + desc: '2.0 - 4.5 之间', + }, { + title: '活动玩法', + desc: '双打', + }, { + title: '人员构成', + desc: '个人球局 · 组织者参与活动', + }] + + const participants = detail?.participants || [] + + const supplementalNotesTags = ['仅限男生', '装备自备', '其他'] + + const recommendGames = [ + { + title: '黄浦日场对拉', + time: '2025-08-25 9:00', + timeLength: '2小时', + venue: '上海体育场', + veuneType: '室外', + distance: '1.2km', + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', + applications: 10, + checkedApplications: 3, + levelRequirements: 'NTRP 3.5', + playType: '双打', + }, + { + title: '黄浦夜场对拉', + time: '2025-08-25 19:00', + timeLength: '2小时', + venue: '上海体育场', + veuneType: '室外', + distance: '1.2km', + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', + applications: 10, + checkedApplications: 3, + levelRequirements: 'NTRP 3.5', + playType: '双打', + }, + { + title: '黄浦全天对拉', + time: '2025-08-25 9:00', + timeLength: '12小时', + venue: '上海体育场', + veuneType: '室外', + distance: '1.2km', + avatar: 'https://img.yzcdn.cn/vant/cat.jpeg', + applications: 10, + checkedApplications: 3, + levelRequirements: 'NTRP 3.5', + playType: '双打', + }, + ] + return ( + {/* custom navbar */} @@ -73,10 +146,10 @@ function Index() { - {/* 我的自定义标题 */} + {/* swiper */} ))} - - Five feet from the bed was an earthen wall that had suffered from numerous cracks due to the passage of time. From the other side of the wall came the nagging voice of his mother and the occasional deep breathing of his father who was smoking his pipe. - + {/* content */} + + {/* avatar and tags */} + + + {/* network image mock */} + + + + {tags.map((tag, index) => ( + + {tag.icon && } + {tag.name} + + ))} + + + {/* title */} + + {title} + + {/* Date and Place and weather */} + + {/* Date and Weather */} + + {/* Calendar and Date time */} + + {/* Calendar */} + + 3月 + 25 + + {/* Date time */} + + 3月25日 周一 + 19:00-21:00 （2小时） + + + {/* Weather */} + + {/* Weather icon */} + + + + {/* Weather text and temperature */} + + 28℃ - 32℃ + + + + {/* Place */} + + {/* venue location message */} + + {/* location icon */} + + + + {/* location message */} + + {/* venue name and distance */} + + 上海体育场 + · + 1.2km + + + {/* venue address */} + + 上海市徐汇区肇嘉浜路128号 + + + + {/* venue map */} + + {}} + // hide business msg + showLocation + theme='dark' + /> + + + + {/* 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 */} + + + + + + + 🎾 + 立即加入 + + ¥ 65 + + + + ) } diff --git a/src/scss/images.scss b/src/scss/images.scss index a863e16..3527d5a 100644 --- a/src/scss/images.scss +++ b/src/scss/images.scss @@ -30,6 +30,14 @@ $-images: ( 'icon-circle-unselect': '/publishBall/icon-circle-unselect.svg', 'icon-circle-select-ring': '/publishBall/icon-circle-select-ring.svg', 'icon-circle-select-arrow': '/publishBall/icon-circle-select-arrow.svg', + 'icon-weather-sun': '/detail/icon-weather-sun.svg', + 'icon-detail-map': '/detail/icon-map.svg', + 'icon-detail-arrow-right': '/detail/icon-arrow-right.svg', + 'icon-detail-notice': '/detail/icon-notice.svg', + 'icon-detail-application-add': '/detail/icon-application-add.svg', + 'icon-detail-comment': '/detail/icon-comment.svg', + 'icon-detail-comment-dark': '/detail/icon-comment-dark.svg', + 'icon-detail-share': '/detail/icon-share-dark.svg', ) !default; // 图片获取函数 diff --git a/src/services/detailApi.ts b/src/services/detailService.ts similarity index 100% rename from src/services/detailApi.ts rename to src/services/detailService.ts diff --git a/src/services/publishService.ts b/src/services/publishService.ts index 63ea809..778ca2d 100644 --- a/src/services/publishService.ts +++ b/src/services/publishService.ts @@ -124,7 +124,7 @@ class PublishService { } async getPictures(req: getPicturesReq): Promise> { return httpService.post('/gallery/sys_img_list', req, { - showLoading: true, + showLoading: false, showToast: false, }) } diff --git a/src/static/detail/icon-application-add.svg b/src/static/detail/icon-application-add.svg new file mode 100644 index 0000000..be4ac42 --- /dev/null +++ b/src/static/detail/icon-application-add.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/static/detail/icon-arrow-right.svg b/src/static/detail/icon-arrow-right.svg new file mode 100644 index 0000000..3d6ef55 --- /dev/null +++ b/src/static/detail/icon-arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/static/detail/icon-comment-dark.svg b/src/static/detail/icon-comment-dark.svg new file mode 100644 index 0000000..1787969 --- /dev/null +++ b/src/static/detail/icon-comment-dark.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/static/detail/icon-comment.svg b/src/static/detail/icon-comment.svg new file mode 100644 index 0000000..d6b5f7d --- /dev/null +++ b/src/static/detail/icon-comment.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/static/detail/icon-map.svg b/src/static/detail/icon-map.svg new file mode 100644 index 0000000..9787f48 --- /dev/null +++ b/src/static/detail/icon-map.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/static/detail/icon-notice.svg b/src/static/detail/icon-notice.svg new file mode 100644 index 0000000..31119b7 --- /dev/null +++ b/src/static/detail/icon-notice.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/static/detail/icon-share-dark.svg b/src/static/detail/icon-share-dark.svg new file mode 100644 index 0000000..f2f0cac --- /dev/null +++ b/src/static/detail/icon-share-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/static/detail/icon-weather-sun.svg b/src/static/detail/icon-weather-sun.svg new file mode 100644 index 0000000..3851486 --- /dev/null +++ b/src/static/detail/icon-weather-sun.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + +