修改发布
This commit is contained in:
筱野
264
src/pages/publishBall/components/SelectStadium/SelectStadium.tsx
Normal file
264
src/pages/publishBall/components/SelectStadium/SelectStadium.tsx
Normal file
@@ -0,0 +1,264 @@
|
||||
import React, { useState } from 'react'
|
||||
import { View, Text, Input, ScrollView, Image } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import StadiumDetail from './StadiumDetail'
|
||||
import { CommonPopup } from '../../../../components'
|
||||
import './SelectStadium.scss'
|
||||
import images from '@/config/images'
|
||||
|
||||
export interface Stadium {
|
||||
id?: string
|
||||
name: string
|
||||
address?: string
|
||||
istance?: string
|
||||
longitude?: number
|
||||
latitude?: number
|
||||
}
|
||||
|
||||
interface SelectStadiumProps {
|
||||
visible: boolean
|
||||
onClose: () => void
|
||||
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,
|
||||
onClose,
|
||||
onConfirm
|
||||
}) => {
|
||||
const [searchValue, setSearchValue] = useState('')
|
||||
const [selectedStadium, setSelectedStadium] = useState<Stadium | null>(null)
|
||||
const [showDetail, setShowDetail] = useState(false)
|
||||
|
||||
if (!visible) return null
|
||||
|
||||
// 过滤场馆列表
|
||||
const filteredStadiums = stadiumList.filter(stadium =>
|
||||
stadium.name.toLowerCase().includes(searchValue.toLowerCase())
|
||||
)
|
||||
|
||||
// 处理场馆选择
|
||||
const handleStadiumSelect = (stadium: Stadium) => {
|
||||
setSelectedStadium(stadium)
|
||||
setShowDetail(true)
|
||||
}
|
||||
|
||||
// 处理返回球馆列表
|
||||
const handleBackToList = () => {
|
||||
setShowDetail(false)
|
||||
setSelectedStadium(null)
|
||||
}
|
||||
|
||||
// 处理搜索框输入
|
||||
const handleSearchInput = (e: any) => {
|
||||
setSearchValue(e.detail.value)
|
||||
}
|
||||
|
||||
// 处理地图选择位置
|
||||
const handleMapLocation = () => {
|
||||
Taro.chooseLocation({
|
||||
success: (res) => {
|
||||
console.log('选择位置成功:', res)
|
||||
setSelectedStadium({
|
||||
name: res.name,
|
||||
address: res.address,
|
||||
longitude: res.longitude,
|
||||
latitude: res.latitude
|
||||
})
|
||||
setShowDetail(true)
|
||||
},
|
||||
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)
|
||||
setSelectedStadium(null)
|
||||
setSearchValue('')
|
||||
}
|
||||
}
|
||||
|
||||
// 处理取消
|
||||
const handleCancel = () => {
|
||||
onClose()
|
||||
setShowDetail(false)
|
||||
setSelectedStadium(null)
|
||||
setSearchValue('')
|
||||
}
|
||||
|
||||
const handleItemLocation = (stadium: Stadium) => {
|
||||
console.log(stadium,'stadiumstadium');
|
||||
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');
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const markSearchText = (text: string) => {
|
||||
return text.replace(searchValue, `<span style="color: #007AFF;">${searchValue}</span>`)
|
||||
}
|
||||
|
||||
// 如果显示详情页面
|
||||
if (showDetail && selectedStadium) {
|
||||
return (
|
||||
<CommonPopup
|
||||
visible={visible}
|
||||
onClose={handleCancel}
|
||||
cancelText="返回"
|
||||
confirmText="确认"
|
||||
className="select-stadium-popup"
|
||||
onCancel={handleCancel}
|
||||
onConfirm={handleListConfirm}
|
||||
position="bottom"
|
||||
round
|
||||
>
|
||||
<StadiumDetail
|
||||
stadium={selectedStadium}
|
||||
onBack={handleBackToList}
|
||||
onConfirm={handleConfirm}
|
||||
/>
|
||||
</CommonPopup>
|
||||
)
|
||||
}
|
||||
|
||||
// 显示球馆列表
|
||||
return (
|
||||
<CommonPopup
|
||||
visible={visible}
|
||||
hideFooter
|
||||
onClose={handleCancel}
|
||||
cancelText="返回"
|
||||
confirmText="完成"
|
||||
className="select-stadium-popup"
|
||||
onCancel={handleCancel}
|
||||
onConfirm={handleListConfirm}
|
||||
position="bottom"
|
||||
round
|
||||
>
|
||||
|
||||
<View className='select-stadium'>
|
||||
{/* 搜索框 */}
|
||||
<View className='search-section'>
|
||||
<View className='search-wrapper'>
|
||||
<View className='search-bar'>
|
||||
<Image src={images.ICON_SEARCH} className='search-icon' />
|
||||
<Input
|
||||
className='search-input'
|
||||
placeholder='搜索'
|
||||
placeholderClass='search-placeholder'
|
||||
value={searchValue}
|
||||
onInput={handleSearchInput}
|
||||
/>
|
||||
{searchValue && (
|
||||
<View className='clear-btn' onClick={() => setSearchValue('')}>
|
||||
<Image src={images.ICON_REMOVE} className='clear-icon' />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
{
|
||||
!searchValue && (
|
||||
<View className='map-btn' onClick={handleMapLocation}>
|
||||
<Image src={images.ICON_MAP} className='map-icon' />
|
||||
<Text className='map-text'>地图</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 热门球场标题 */}
|
||||
<View className='hot-section'>
|
||||
<View className='hot-header'>
|
||||
<Text className='hot-title'>热门球场</Text>
|
||||
<View className='hot-stadium-line'></View>
|
||||
<View className='booking-section'>
|
||||
<Text className='booking-title'>预定球场</Text>
|
||||
<Text className='booking-status'>敬请期待</Text>
|
||||
</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>
|
||||
|
||||
</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' />
|
||||
</View>
|
||||
</View>
|
||||
</View>)
|
||||
}
|
||||
</ScrollView>
|
||||
</View>
|
||||
</CommonPopup>
|
||||
)
|
||||
}
|
||||
|
||||
export default SelectStadium
|
||||
Reference in New Issue
Block a user