bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feat/liujie'

Browse Source
This commit is contained in:
刘杰
2025-08-26 00:02:56 +08:00
parent da8b05ee5d f184624c33
commit 98a0cca142
15 changed files with 1291 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/UploadCover/index.tsx
View File

@@ -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])

8
src/config/images.js
View File

@@ -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'),
}

853
src/pages/detail/index.scss
View File

@@ -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;
}
}
}
}

394
src/pages/detail/index.tsx
View File

@@ -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<string []>([])
const [detail, setDetail] = useState<any>(null)
const { params } = useRouter()
const { id, share } = params
// 本地状态管理
const [loading, setLoading] = useState(false)
const [userProfile, setUserProfile] = useState<any>(null)
const [interests, setInterests] = useState<string[]>([])
// 页面加载时获取数据
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 (
<View className='detail-page'>
{/* custom navbar */}
<view className="custom-navbar">
<View className='detail-navigator'>
<View className='detail-navigator-back'>
@@ -73,10 +146,10 @@ function Index() {
<Image className='detail-navigator-logo-icon' src={img.ICON_LOGO_GO} />
</View>
</View>
{/* <view className="navbar-title">我的自定义标题</view> */}
</view>
<View className='detail-page-bg' style={{ backgroundImage: `url(${images[current]})` }} />
<View className='detail-page-bg-text' />
{/* swiper */}
<Swiper
className='detail-swiper'
indicatorDots={false}
@@ -100,9 +173,284 @@ function Index() {
</SwiperItem>
))}
</Swiper>
<Text className='detail-text' style={{ color: colors[current] }}>
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.
</Text>
{/* content */}
<View className='detail-page-content'>
{/* avatar and tags */}
<View className='detail-page-content-avatar-tags'>
<View className='detail-page-content-avatar-tags-avatar'>
{/* network image mock */}
<Image className='detail-page-content-avatar-tags-avatar-image' src="https://img.yzcdn.cn/vant/cat.jpeg" />
</View>
<View className='detail-page-content-avatar-tags-tags'>
{tags.map((tag, index) => (
<View key={index} className='detail-page-content-avatar-tags-tags-tag'>
{tag.icon && <Image src={tag.icon} />}
<Text>{tag.name}</Text>
</View>
))}
</View>
</View>
{/* title */}
<View className='detail-page-content-title'>
<Text className='detail-page-content-title-text'>{title}</Text>
</View>
{/* Date and Place and weather */}
<View className='detail-page-content-game-info'>
{/* Date and Weather */}
<View className='detail-page-content-game-info-date-weather'>
{/* Calendar and Date time */}
<View className='detail-page-content-game-info-date-weather-calendar-date'>
{/* Calendar */}
<View className='detail-page-content-game-info-date-weather-calendar-date-calendar'>
<View className="month">3月</View>
<View className="day">25</View>
</View>
{/* Date time */}
<View className='detail-page-content-game-info-date-weather-calendar-date-date'>
<View className="date">3月25日 周一</View>
<View className="venue-time">19:00-21:00 （2小时）</View>
</View>
</View>
{/* Weather */}
<View className='detail-page-content-game-info-date-weather-weather'>
{/* Weather icon */}
<View className='detail-page-content-game-info-date-weather-weather-icon'>
<Image className="weather-icon" src={img.ICON_WEATHER_SUN} />
</View>
{/* Weather text and temperature */}
<View className='detail-page-content-game-info-date-weather-weather-text-temperature'>
<Text>28℃ - 32℃</Text>
</View>
</View>
</View>
{/* Place */}
<View className='detail-page-content-game-info-place'>
{/* venue location message */}
<View className='location-message'>
{/* location icon */}
<View className='location-message-icon'>
<Image className='location-message-icon-image' src={img.ICON_DETAIL_MAP} />
</View>
{/* location message */}
<View className='location-message-text'>
{/* venue name and distance */}
<View className='location-message-text-name-distance'>
<Text>上海体育场</Text>
<Text>·</Text>
<Text>1.2km</Text>
<Image className='location-message-text-name-distance-arrow' src={img.ICON_DETAIL_ARROW_RIGHT} />
</View>
{/* venue address */}
<View className='location-message-text-address'>
<Text>上海市徐汇区肇嘉浜路128号</Text>
</View>
</View>
</View>
{/* venue map */}
<View className='location-map'>
<Map
className='location-map-map'
longitude={longitude}
latitude={latitude}
onError={() => {}}
// hide business msg
showLocation
theme='dark'
/>
</View>
</View>
</View>
{/* detail */}
<View className='detail-page-content-detail'>
{/* venue detail title and venue ordered status */}
<View className='venue-detail-title'>
<Text>场馆详情</Text>
<Text>·</Text>
<Text>已订场</Text>
<Popover
title="场地预定截图"
description={<View>
<Image src="https://img.yzcdn.cn/vant/cat.jpeg" />
</View>}
location='top'
visible={false}
>
<Image className='venue-detail-title-notice-icon' src={img.ICON_DETAIL_NOTICE} />
</Popover>
</View>
{/* venue detail content */}
<View className='venue-detail-content'>
{/* venue detail tags */}
<View className='venue-detail-content-tags'>
{insertDotInTags(detailTags).map((tag, index) => (
<View key={index} className='venue-detail-content-tags-tag'>
<Text>{tag}</Text>
</View>
))}
</View>
{/* venue remarks */}
<View className='venue-detail-content-remarks'>
<Text>其他这是用户在场地补充描述里自己写的东西啦啦啦啦啦啦啦啦啦啦啦啦</Text>
</View>
</View>
</View>
{/* gameplay requirements */}
<View className='detail-page-content-gameplay-requirements'>
{/* title */}
<View className="gameplay-requirements-title">
<Text>玩法要求</Text>
</View>
{/* requirements */}
<View className='gameplay-requirements'>
{requirements.map((item, index) => (
<View key={index} className='gameplay-requirements-item'>
<Text className='gameplay-requirements-item-title'>{item.title}</Text>
<Text className='gameplay-requirements-item-desc'>{item.desc}</Text>
</View>
))}
</View>
</View>
{/* participants */}
<View className='detail-page-content-participants'>
<View className='participants-title'>
<Text>参与者</Text>
<Text>·</Text>
<Text>剩余空位 3</Text>
</View>
<View className='participants-list'>
{/* application */}
<View className='participants-list-application' onClick={() => { Taro.showToast({ title: 'To be continued', icon: 'none' }) }}>
<Image className='participants-list-application-icon' src={img.ICON_DETAIL_APPLICATION_ADD} />
<Text className='participants-list-application-text'>申请加入</Text>
</View>
{/* participants list */}
<ScrollView className='participants-list-scroll' scrollX>
<View className='participants-list-scroll-content' style={{ width: `${(participants.length + 1) * 108 + (participants.length) * 8 - 30}px` }}>
{participants.map((participant) => (
<View key={participant.id} className='participants-list-item'>
{/* <Avatar className='participants-list-item-avatar' src={participant.user.avatar_url} /> */}
{/* network image mock random */}
<Avatar className='participants-list-item-avatar' src={`https://picsum.photos/800/600?random=${participant.id}`} />
<Text className='participants-list-item-name'>{participant.user.nickname || '未知'}</Text>
<Text className='participants-list-item-level'>{participant.level || '未知'}</Text>
<Text className='participants-list-item-role'>{participant.role || '参与者'}</Text>
</View>
))}
</View>
</ScrollView>
</View>
</View>
{/* supplemental notes */}
<View className='detail-page-content-supplemental-notes'>
<View className='supplemental-notes-title'>
<Text>补充说明</Text>
</View>
<View className='supplemental-notes-content'>
{/* supplemental notes tags */}
<View className='supplemental-notes-content-tags'>
{insertDotInTags(supplementalNotesTags).map((tag, index) => (
<View key={index} className='supplemental-notes-content-tags-tag'>
<Text>{tag}</Text>
</View>
))}
</View>
{/* supplemental notes content */}
<View className='supplemental-notes-content-text'>
<Text>其他这是用户在补充说明里自己写的东西啦啦啦啦啦啦啦啦啦啦啦啦其他这是用户在补充说明里自己写的东西啦啦啦啦啦啦啦啦啦啦啦啦</Text>
</View>
</View>
</View>
{/* organizer and recommend games by organizer */}
<View className='detail-page-content-organizer-recommend-games'>
{/* orgnizer title */}
<View className='organizer-title'>
<Text>组织者</Text>
</View>
{/* organizer avatar and name */}
<View className='organizer-avatar-name'>
<Avatar className='organizer-avatar-name-avatar' src="https://img.yzcdn.cn/vant/cat.jpeg" />
<View className='organizer-avatar-name-message'>
<Text className='organizer-avatar-name-message-name'>Light</Text>
<View className='organizer-avatar-name-message-stats'>
<Text>已组织 8 次</Text>
<View className='organizer-avatar-name-message-stats-separator' />
<Text>NTRP 3.5</Text>
</View>
</View>
<View className="organizer-actions">
<View className="organizer-actions-follow">
<Image className='organizer-actions-follow-icon' src={img.ICON_DETAIL_APPLICATION_ADD} />
<Text className='organizer-actions-follow-text'>关注</Text>
</View>
<View className="organizer-actions-comment">
<Image className='organizer-actions-comment-icon' src={img.ICON_DETAIL_COMMENT} />
</View>
</View>
</View>
{/* recommend games by organizer */}
<View className='organizer-recommend-games'>
<View className='organizer-recommend-games-title'>
<Text>TA的更多活动</Text>
<Image className='organizer-recommend-games-title-arrow' src={img.ICON_DETAIL_ARROW_RIGHT} />
</View>
<ScrollView className='recommend-games-list' scrollX>
<View className='recommend-games-list-content'>
{recommendGames.map((game, index) => (
<View key={index} className='recommend-games-list-item'>
{/* game title */}
<View className='recommend-games-list-item-title'>
<Text>{game.title}</Text>
<Image className='recommend-games-list-item-title-arrow' src={img.ICON_DETAIL_ARROW_RIGHT} />
</View>
{/* game time and range */}
<View className='recommend-games-list-item-time-range'>
<Text>{game.time}</Text>
<Text>{game.timeLength}</Text>
</View>
{/* game location、vunue、distance */}
<View className='recommend-games-list-item-location-venue-distance'>
<Text>{game.venue}</Text>
<Text>·</Text>
<Text>{game.veuneType}</Text>
<Text>·</Text>
<Text>{game.distance}</Text>
</View>
{/* organizer avatar、applications、level requirements、play type */}
<View className='recommend-games-list-item-addon'>
<Avatar className='recommend-games-list-item-addon-avatar' src={game.avatar} />
<View className='recommend-games-list-item-addon-message'>
<View className='recommend-games-list-item-addon-message-applications'>
<Text>报名人数 {game.checkedApplications} / {game.applications}</Text>
</View>
<View className='recommend-games-list-item-addon-message-level-requirements'>
<Text>{game.levelRequirements}</Text>
</View>
<View className='recommend-games-list-item-addon-message-play-type'>
<Text>{game.playType}</Text>
</View>
</View>
</View>
</View>
))}
</View>
</ScrollView>
</View>
</View>
{/* sticky bottom action bar */}
<View className="sticky-bottom-bar">
<View className="sticky-bottom-bar-share-and-comment">
<View></View>
<View></View>
</View>
<View className="sticky-bottom-bar-join-game">
<Text>🎾</Text>
<Text>立即加入</Text>
<View className='game-price'>
<Text>¥ 65</Text>
</View>
</View>
</View>
</View>
</View>
)
}

8
src/scss/images.scss
View File

@@ -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;
// 图片获取函数

0
src/services/detailApi.ts → src/services/detailService.ts
View File

2
src/services/publishService.ts
View File

@@ -124,7 +124,7 @@ class PublishService {
}
async getPictures(req: getPicturesReq): Promise<ApiResponse<getPicturesRes>> {
return httpService.post('/gallery/sys_img_list', req, {
showLoading: true,
showLoading: false,
showToast: false,
})
}

4
src/static/detail/icon-application-add.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.035 5.83337L14.0137 22.1667" stroke="white" stroke-opacity="0.6" stroke-width="2.22222" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.83333 14H22.1667" stroke="white" stroke-opacity="0.6" stroke-width="2.22222" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 391 B

3
src/static/detail/icon-arrow-right.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.33334 4L10.3333 8L6.33334 12" stroke="white" stroke-opacity="0.8" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 253 B

7
src/static/detail/icon-comment-dark.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.75 15.8333H9.16666V12.5H15V9.16663H18.3333V15.8333H16.25L15 17.0833L13.75 15.8333Z" stroke="black" stroke-opacity="0.85" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.66666 2.5H15V12.5H7.08333L5.41666 14.1667L3.75 12.5H1.66666V2.5Z" stroke="black" stroke-opacity="0.85" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.91666 7.5H8.33333" stroke="black" stroke-opacity="0.85" stroke-width="1.66667" stroke-linecap="round"/>
<path d="M10.8333 7.5H11.25" stroke="black" stroke-opacity="0.85" stroke-width="1.66667" stroke-linecap="round"/>
<path d="M5 7.5H5.41667" stroke="black" stroke-opacity="0.85" stroke-width="1.66667" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 836 B

7
src/static/detail/icon-comment.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 12.6667H7.33334V10H12V7.33337H14.6667V12.6667H13L12 13.6667L11 12.6667Z" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.33334 2H12V10H5.66668L4.33334 11.3333L3.00001 10H1.33334V2Z" stroke="white" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.33334 6H6.66668" stroke="white" stroke-width="1.33333" stroke-linecap="round"/>
<path d="M8.66666 6H8.99999" stroke="white" stroke-width="1.33333" stroke-linecap="round"/>
<path d="M4 6H4.33333" stroke="white" stroke-width="1.33333" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 706 B

7
src/static/detail/icon-map.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.08333 5L1.66667 2.5V15L7.08333 17.5L12.9167 15L18.3333 17.5V5L12.9167 2.5L7.08333 5Z" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12.9167 2.5V15" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.08333 5V17.5" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.375 3.75L7.08333 5L12.9167 2.5L15.625 3.75" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M4.375 16.25L7.08333 17.5L12.9167 15L15.625 16.25" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 804 B

5
src/static/detail/icon-notice.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5832 9.45002C7.5832 9.77219 7.32203 10.0334 6.99986 10.0334C6.6777 10.0334 6.41653 9.77219 6.41653 9.45002V6.53335C6.41653 6.21119 6.6777 5.95002 6.99986 5.95002C7.32203 5.95002 7.5832 6.21119 7.5832 6.53335V9.45002Z" fill="white" fill-opacity="0.6"/>
<path d="M6.99997 4.08335C6.64559 4.08335 6.35831 4.37064 6.35831 4.72502C6.35831 5.0794 6.64559 5.36669 6.99997 5.36669C7.35436 5.36669 7.64164 5.0794 7.64164 4.72502C7.64164 4.37064 7.35436 4.08335 6.99997 4.08335Z" fill="white" fill-opacity="0.6"/>
<path d="M7.00001 12.8334C10.2217 12.8334 12.8333 10.2217 12.8333 7.00002C12.8333 3.77836 10.2217 1.16669 7.00001 1.16669C3.77834 1.16669 1.16667 3.77836 1.16667 7.00002C1.16667 10.2217 3.77834 12.8334 7.00001 12.8334ZM7.00001 11.6667C4.42268 11.6667 2.33334 9.57735 2.33334 7.00002C2.33334 4.42269 4.42268 2.33335 7.00001 2.33335C9.57733 2.33335 11.6667 4.42269 11.6667 7.00002C11.6667 9.57735 9.57733 11.6667 7.00001 11.6667Z" fill="white" fill-opacity="0.6"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
src/static/detail/icon-share-dark.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.83333 1.66663L17.3333 9.16663L9.83333 16.25V11.6666C4 11.6666 1.5 17.9166 1.5 17.9166C1.5 10.8333 3.58333 6.24996 9.83333 6.24996V1.66663Z" stroke="black" stroke-opacity="0.85" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 364 B

18
src/static/detail/icon-weather-sun.svg Normal file
View File

@@ -0,0 +1,18 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3061_9153)">
<path d="M3.81265 3.81287L4.74074 4.74096" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.25 10H2.5625" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.81265 16.1873L4.74074 15.2592" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.1873 16.1873L15.2592 15.2592" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18.7498 10H17.4373" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.1873 3.81287L15.2592 4.74096" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 1.25V2.5625" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 15C12.7614 15 15 12.7614 15 10C15 7.23858 12.7614 5 10 5C7.23858 5 5 7.23858 5 10C5 12.7614 7.23858 15 10 15Z" fill="white" stroke="white" stroke-width="1.66667" stroke-linejoin="round"/>
<path d="M10 18.7501V17.4376" stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0_3061_9153">
<rect width="20" height="20" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB