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

增加获取场馆、字典

Browse Source
This commit is contained in:
筱野
2025-08-24 16:04:31 +08:00
parent c6f4f11259
commit bb6ec8c183
29 changed files with 1217 additions and 414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages/publishBall/components/SelectStadium/SelectStadium.scss
View File

@@ -134,7 +134,24 @@
}
}
}
.stadium-item-loading{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
.loading-icon{
color: #666;
font-size: 30px;
.nut-loading-icon{
width: 20px;
height: 20px;
}
.nut-loading-text{
font-size: 14px;
color: #666;
}
}
}
// 场馆列表
.stadium-list {
flex: 1;
@@ -172,6 +189,11 @@
font-weight: 600;
line-height: 24px;
display: flex;
.highlight-text {
color: #007AFF;
font-weight: 700;
}
}
.stadium-address{
display: flex;

203
src/pages/publishBall/components/SelectStadium/SelectStadium.tsx
View File

@@ -1,10 +1,13 @@
import React, { useState } from 'react'
import React, { useState, useRef, useEffect } from 'react'
import { View, Text, Input, ScrollView, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import StadiumDetail from './StadiumDetail'
import { Loading } from '@nutui/nutui-react-taro'
import StadiumDetail, { StadiumDetailRef } from './StadiumDetail'
import { CommonPopup } from '../../../../components'
import './SelectStadium.scss'
import { getLocation } from '@/utils/locationUtils'
import PublishService from '@/services/publishService'
import images from '@/config/images'
import './SelectStadium.scss'
export interface Stadium {
id?: string
@@ -21,17 +24,6 @@ interface SelectStadiumProps {
onConfirm: (stadium: Stadium | null) => void
}
const stadiumList: Stadium[] = [
{ id: '1', name: '静安网球馆', address: '浦东新区东园路18号', istance: '100米' , longitude: 121.4367, latitude: 31.2304},
{ id: '2', name: '芦湾体育馆', address: '浦东新区东园路18号', istance: '100米' , longitude: 121.4367, latitude: 31.2304 },
{ id: '3', name: '静安网球馆', address: '浦东新区东园路18号', istance: '100米' , longitude: 121.4367, latitude: 31.2304 },
{ id: '4', name: '徐汇游泳中心', address: '浦东新区东园路18号', istance: '100米' , longitude: 121.4367, latitude: 31.2304 },
{ id: '5', name: '汇龙新城小区', address: '浦东新区东园路18号', istance: '100米' , longitude: 121.4367, latitude: 31.2304 },
{ id: '6', name: '翠湖御苑小区', address: '浦东新区东园路18号', istance: '100米' , longitude: 121.4367, latitude: 31.2304 },
{ id: '7', name: '仁恒河滨花园网球场', address: '浦东新区东园路18号', istance: '100米' , longitude: 121.4367, latitude: 31.2304 },
{ id: '8', name: 'Our Tennis 东江球场', address: '浦东新区东园路18号', istance: '100米' , longitude: 121.4367, latitude: 31.2304 },
{ id: '9', name: '上海琦梦网球俱乐部', address: '浦东新区东园路18号', istance: '100米' , longitude: 121.4367, latitude: 31.2304 }
]
const SelectStadium: React.FC<SelectStadiumProps> = ({
visible,
@@ -41,6 +33,37 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
const [searchValue, setSearchValue] = useState('')
const [selectedStadium, setSelectedStadium] = useState<Stadium | null>(null)
const [showDetail, setShowDetail] = useState(false)
const stadiumDetailRef = useRef<StadiumDetailRef>(null)
const [stadiumList, setStadiumList] = useState<Stadium[]>([])
const [loading, setLoading] = useState(false)
const initData = async () => {
setLoading(true)
try {
const location = await getLocation()
if (location.latitude && location.longitude) {
const res = await PublishService.getStadiumList({
seachOption: {
latitude: location.latitude,
longitude: location.longitude
}
})
if (res.code === 0 && res.data) {
setStadiumList(res.data.rows || [])
}
}
} catch (error) {
console.error('获取场馆列表失败:', error)
} finally {
setLoading(false)
}
}
useEffect(() => {
if (visible) {
initData()
}
}, [visible])
if (!visible) return null
@@ -55,11 +78,6 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
setShowDetail(true)
}
// 处理返回球馆列表
const handleBackToList = () => {
setShowDetail(false)
setSelectedStadium(null)
}
// 处理搜索框输入
const handleSearchInput = (e: any) => {
@@ -70,7 +88,6 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
const handleMapLocation = () => {
Taro.chooseLocation({
success: (res) => {
console.log('选择位置成功:', res)
setSelectedStadium({
name: res.name,
address: res.address,
@@ -81,33 +98,26 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
},
fail: (err) => {
console.error('选择位置失败:', err)
Taro.showToast({
title: '位置选择失败',
icon: 'error'
})
}
})
}
// 处理确认
const handleConfirm = (stadium: Stadium, venueType: string, groundMaterial: string, additionalInfo: string) => {
// 这里可以处理球馆详情的信息
console.log('球馆详情:', { stadium, venueType, groundMaterial, additionalInfo })
onConfirm(stadium)
setShowDetail(false)
setSelectedStadium(null)
setSearchValue('')
}
// 处理球馆列表确认
const handleListConfirm = () => {
if (selectedStadium) {
onConfirm(selectedStadium)
const handleConfirm = () => {
if (stadiumDetailRef.current) {
const formData = stadiumDetailRef.current.getFormData()
console.log('获取球馆表单数据:', formData)
const { description, ...rest } = formData
onConfirm({ ...rest, ...description })
setSelectedStadium(null)
setSearchValue('')
}
}
// 处理取消
const handleCancel = () => {
onClose()
@@ -117,25 +127,30 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
}
const handleItemLocation = (stadium: Stadium) => {
console.log(stadium,'stadiumstadium');
if(stadium.latitude && stadium.longitude){
if (stadium.latitude && stadium.longitude) {
Taro.openLocation({
latitude: stadium.latitude,
longitude: stadium.longitude,
name: stadium.name,
address: stadium.address,
success: (res) => {
console.log(res,'resres');
console.log(res, 'resres')
}
})
}
}
const markSearchText = (text: string) => {
return text.replace(searchValue, `<span style="color: #007AFF;">${searchValue}</span>`)
if (!searchValue) return text
return text.replace(
new RegExp(searchValue, 'gi'),
`<span class="highlight-text">${searchValue}</span>`
)
}
// 如果显示详情页面
if (showDetail && selectedStadium) {
return (
@@ -146,14 +161,13 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
confirmText="确认"
className="select-stadium-popup"
onCancel={handleCancel}
onConfirm={handleListConfirm}
onConfirm={handleConfirm}
position="bottom"
round
>
<StadiumDetail
ref={stadiumDetailRef}
stadium={selectedStadium}
onBack={handleBackToList}
onConfirm={handleConfirm}
/>
</CommonPopup>
)
@@ -168,8 +182,6 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
cancelText="返回"
confirmText="完成"
className="select-stadium-popup"
onCancel={handleCancel}
onConfirm={handleListConfirm}
position="bottom"
round
>
@@ -215,47 +227,68 @@ const SelectStadium: React.FC<SelectStadiumProps> = ({
</View>
</View>
</View>
{/* 场馆列表 */}
<ScrollView className='stadium-list' scrollY>
{filteredStadiums.map((stadium) => (
<View
key={stadium.id}
className={`stadium-item ${selectedStadium?.id === stadium.id ? 'selected' : ''}`}
onClick={() => handleStadiumSelect(stadium)}
>
<View className='stadium-item-left'>
<Image src={images.ICON_STADIUM} className='stadium-icon' />
</View>
<View className='stadium-item-right'>
<View className='stadium-name' dangerouslySetInnerHTML={{ __html: markSearchText(stadium.name) }}></View>
<View className='stadium-address' >
<Text onClick={(e) => { e.stopPropagation(); handleItemLocation(stadium); }}>{stadium.istance} · </Text>
<Text onClick={(e) => { e.stopPropagation(); handleItemLocation(stadium); }}>{stadium.address}</Text>
<Image src={images.ICON_ARRORW_SMALL} className='stadium-map-icon' />
</View>
</View>
{
loading ? (
<View className='stadium-item-loading'>
<Loading type="circular" className='loading-icon'>加载中</Loading>
</View>
))}
{
searchValue && (<View
className={`stadium-item`}
onClick={() => handleMapLocation()}
>
<View className='stadium-item-left'>
<Image src={images.ICON_MAP_SEARCH} className='stadium-icon' />
</View>
<View className='stadium-item-right'>
<View className='stadium-name'>没有找到球场？去地图定位</View>
<View className='stadium-address'>
<Text>腾讯地图</Text>
<Image src={images.ICON_ARRORW_SMALL} className='stadium-map-icon' />
) : (
<ScrollView className='stadium-list' scrollY>
{filteredStadiums.map((stadium) => (
<View
key={stadium.id}
className={`stadium-item ${selectedStadium?.id === stadium.id ? 'selected' : ''}`}
onClick={() => handleStadiumSelect(stadium)}
>
<View className='stadium-item-left'>
<Image src={images.ICON_STADIUM} className='stadium-icon' />
</View>
<View className='stadium-item-right'>
<View className='stadium-name' dangerouslySetInnerHTML={{ __html: markSearchText(stadium.name) }}></View>
<View className='stadium-address'>
<Text
className='stadium-distance'
onClick={(e) => {
e.stopPropagation()
handleItemLocation(stadium)
}}
>
{stadium.istance} ·
</Text>
<Text
className='stadium-address-text'
onClick={(e) => {
e.stopPropagation()
handleItemLocation(stadium)
}}
>
{stadium.address}
</Text>
<Image src={images.ICON_ARRORW_SMALL} className='stadium-map-icon' />
</View>
</View>
</View>
))}
{searchValue && (
<View className='stadium-item map-search-item' onClick={handleMapLocation}>
<View className='stadium-item-left'>
<Image src={images.ICON_MAP_SEARCH} className='stadium-icon' />
</View>
<View className='stadium-item-right'>
<View className='stadium-name'>没有找到球场？去地图定位</View>
<View className='stadium-address'>
<Text className='map-search-text'>腾讯地图</Text>
<Image src={images.ICON_ARRORW_SMALL} className='stadium-map-icon' />
</View>
</View>
</View>
</View>)
}
</ScrollView>
)}
</ScrollView>
)
}
{/* 场馆列表 */}
</View>
</CommonPopup>
)

1
src/pages/publishBall/components/SelectStadium/StadiumDetail.scss
View File

@@ -114,7 +114,6 @@
border: 1px solid #e0e0e0;
background: white;
cursor: pointer;
transition: all 0.2s;
display: flex;
flex: 1;
justify-content: center;

129
src/pages/publishBall/components/SelectStadium/StadiumDetail.tsx
View File

@@ -1,10 +1,11 @@
import React, { useState, useCallback } from 'react'
import React, { useState, useCallback, forwardRef, useImperativeHandle } from 'react'
import Taro from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import images from '@/config/images'
import './StadiumDetail.scss'
import TextareaTag from '@/components/TextareaTag'
import CoverImageUpload, { type CoverImage } from '@/components/ImageUpload'
import { useDictionaryActions } from '@/store/dictionaryStore'
import './StadiumDetail.scss'
export interface Stadium {
id?: string
@@ -13,45 +14,27 @@ export interface Stadium {
longitude?: number
latitude?: number
istance?: string
court_type?: string
court_surface?: string
description?: string
description_tag?: string[]
venue_image_list?: CoverImage[]
}
interface StadiumDetailProps {
stadium: Stadium
onBack: () => void
onConfirm: (stadium: Stadium, venueType: string, groundMaterial: string, additionalInfo: string) => void
}
const stadiumInfo = [
{
label: '场地类型',
options: ['室内', '室外', '室外雨棚'],
prop: 'venueType',
type: 'tags'
},
{
label: '地面材质',
options: ['硬地', '红土', '草地'],
prop: 'groundMaterial',
type: 'tags'
},
{
label: '场地信息补充',
options: ['1号场', '2号场', '3号场', '4号场', '有空调', '6号场','6号场'],
prop: 'additionalInfo',
type: 'textareaTag'
},
{
label: '场地预定截图',
options: ['有其他场地信息可备注'],
prop: 'imagesList',
type: 'image'
}
]
// 定义暴露给父组件的方法接口
export interface StadiumDetailRef {
getFormData: () => any
setFormData: (data: any) => void
}
// 公共的标题组件
const SectionTitle: React.FC<{ title: string,prop: string }> = ({ title, prop }) => {
console.log(prop,'propprop');
if (prop === 'imagesList') {
if (prop === 'venue_image_list') {
return (
<View className='section-title'>
<Text>{title}</Text>
@@ -78,21 +61,61 @@ const SectionContainer: React.FC<{ title: string; children: React.ReactNode, pro
</View>
)
const StadiumDetail: React.FC<StadiumDetailProps> = ({
const StadiumDetail = forwardRef<StadiumDetailRef, StadiumDetailProps>(({
stadium,
}) => {
}, ref) => {
const { getDictionaryValue } = useDictionaryActions()
const court_type = getDictionaryValue('court_type') || []
const court_surface = getDictionaryValue('court_surface') || []
const supplementary_information = getDictionaryValue('supplementary_information') || []
const stadiumInfo = [
{
label: '场地类型',
options: court_type,
prop: 'court_type',
type: 'tags'
},
{
label: '地面材质',
options: court_surface,
prop: 'court_surface',
type: 'tags'
},
{
label: '场地信息补充',
options: supplementary_information,
prop: 'description',
type: 'textareaTag'
},
{
label: '场地预定截图',
options: ['有其他场地信息可备注'],
prop: 'venue_image_list',
type: 'image'
}
]
const [formData, setFormData] = useState({
stadiumName: stadium.name,
stadiumAddress: stadium.address,
stadiumLongitude: stadium.longitude,
stadiumLatitude: stadium.latitude,
name: stadium.name,
address: stadium.address,
latitude: stadium.longitude,
longitude: stadium.latitude,
istance: stadium.istance,
venueType: '室内',
groundMaterial: '硬地',
court_type: court_type[0] || '',
court_surface: court_surface[0] || '',
additionalInfo: '',
imagesList: [] as CoverImage[]
venue_image_list: [] as CoverImage[],
description:{
description: '',
description_tag: []
}
})
// 暴露方法给父组件
useImperativeHandle(ref, () => ({
getFormData: () => formData,
setFormData: (data: any) => setFormData(data)
}), [formData, stadium])
const handleMapLocation = () => {
@@ -101,10 +124,10 @@ const StadiumDetail: React.FC<StadiumDetailProps> = ({
console.log(res,'resres');
setFormData({
...formData,
stadiumName: res.name,
stadiumAddress: res.address,
stadiumLongitude: res.longitude,
stadiumLatitude: res.latitude
name: res.name,
address: res.address,
latitude: res.longitude,
longitude: res.latitude
})
},
fail: (err) => {
@@ -122,10 +145,10 @@ const StadiumDetail: React.FC<StadiumDetailProps> = ({
}, [])
const getSelectedByLabel = useCallback((label: string) => {
if (label === '场地类型') return formData.venueType
if (label === '地面材质') return formData.groundMaterial
if (label === '场地类型') return formData.court_type
if (label === '地面材质') return formData.court_surface
return ''
}, [formData.venueType, formData.groundMaterial])
}, [formData.court_type, formData.court_surface])
console.log(stadium,'stadiumstadium');
@@ -140,10 +163,10 @@ const StadiumDetail: React.FC<StadiumDetailProps> = ({
<Image src={images.ICON_STADIUM} className='stadium-icon' />
</View>
<View className='stadium-item-right'>
<View className='stadium-name'>{formData.stadiumName}</View>
<View className='stadium-name'>{formData.name}</View>
<View className='stadium-address'>
<Text>{formData.istance} · </Text>
<Text>{formData.stadiumAddress}</Text>
<Text>{formData.address}</Text>
<Image src={images.ICON_ARRORW_SMALL} className='stadium-map-icon' />
</View>
</View>
@@ -172,7 +195,7 @@ const StadiumDetail: React.FC<StadiumDetailProps> = ({
<SectionContainer key={item.label} title={item.label} prop={item.prop}>
<View className='textarea-tag-container'>
<TextareaTag
value={formData.additionalInfo}
value={formData[item.prop]}
onChange={(value) => updateFormData(item.prop, value)}
placeholder='有其他场地信息可备注'
options={(item.options || []).map((o) => ({ label: o, value: o }))}
@@ -186,7 +209,7 @@ const StadiumDetail: React.FC<StadiumDetailProps> = ({
return (
<SectionContainer key={item.label} title={item.label} prop={item.prop}>
<CoverImageUpload
images={formData.imagesList}
images={formData[item.prop]}
onChange={(images) => updateFormData(item.prop, images)}
/>
</SectionContainer>
@@ -197,6 +220,6 @@ const StadiumDetail: React.FC<StadiumDetailProps> = ({
})}
</View>
)
}
})
export default StadiumDetail