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

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