34 lines
1.4 KiB
TypeScript
34 lines
1.4 KiB
TypeScript
import { useState } from 'react'
|
|
import { View, Text } from '@tarojs/components'
|
|
import { useLoad } from '@tarojs/taro'
|
|
import { fetchDestination, type Destination } from '../../services/api'
|
|
import './index.scss'
|
|
|
|
export default function DestinationPage() {
|
|
const [d, setD] = useState<Destination | null>(null)
|
|
const [err, setErr] = useState('')
|
|
|
|
useLoad((q) => {
|
|
const slug = String(q.slug || '')
|
|
if (!slug) { setErr('缺少城市'); return }
|
|
fetchDestination(slug).then(setD).catch((e) => setErr(e.message || '加载失败'))
|
|
})
|
|
|
|
if (err) return <View className='detail'><Text className='err'>{err}</Text></View>
|
|
if (!d) return <View className='detail'><Text>加载中…</Text></View>
|
|
|
|
return (
|
|
<View className='detail'>
|
|
<Text className='name'>{d.name}</Text>
|
|
<Text className='meta'>{d.country}</Text>
|
|
<Text className='tag'>{d.tagline}</Text>
|
|
<View className='grid'>
|
|
<View className='cell'><Text className='k'>月生活费</Text><Text className='v'>¥{d.cost ?? '—'}</Text></View>
|
|
<View className='cell'><Text className='k'>网速</Text><Text className='v'>{d.speed ?? '—'} Mbps</Text></View>
|
|
<View className='cell'><Text className='k'>评分</Text><Text className='v'>{d.rating ?? '—'}</Text></View>
|
|
<View className='cell'><Text className='k'>气候</Text><Text className='v'>{d.climate || '—'}</Text></View>
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|