111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
import { View, Text, Image, ScrollView } from '@tarojs/components'
|
|
import Taro, { useLoad, useShareAppMessage, useShareTimeline } from '@tarojs/taro'
|
|
import { useState } from 'react'
|
|
import { getCompetitions } from '../../api'
|
|
import './index.scss'
|
|
|
|
export default function CompetitionList() {
|
|
const [competitions, setCompetitions] = useState<any[]>([])
|
|
const [loading, setLoading] = useState(false)
|
|
const [debugMsg, setDebugMsg] = useState('')
|
|
|
|
useLoad(() => {
|
|
fetchCompetitions()
|
|
})
|
|
|
|
/**
|
|
* 配置并监听分享给朋友的功能
|
|
*/
|
|
useShareAppMessage(() => {
|
|
return {
|
|
title: '赛事中心',
|
|
path: '/pages/competition/index'
|
|
}
|
|
})
|
|
|
|
/**
|
|
* 配置并监听分享到朋友圈的功能
|
|
*/
|
|
useShareTimeline(() => {
|
|
return {
|
|
title: '赛事中心',
|
|
query: ''
|
|
}
|
|
})
|
|
|
|
const fetchCompetitions = async () => {
|
|
setLoading(true)
|
|
setDebugMsg('开始加载...')
|
|
try {
|
|
console.log('Fetching competitions...')
|
|
const res = await getCompetitions()
|
|
console.log('Competitions res:', res)
|
|
setDebugMsg(`请求成功: 数量 ${res?.results?.length}`)
|
|
|
|
if (res && res.results) {
|
|
setCompetitions(res.results)
|
|
} else {
|
|
setDebugMsg(`数据格式异常: ${JSON.stringify(res)}`)
|
|
}
|
|
} catch (e) {
|
|
console.error('Fetch failed:', e)
|
|
setDebugMsg(`请求失败: ${e.errMsg || JSON.stringify(e)}`)
|
|
Taro.showToast({ title: '加载失败', icon: 'none' })
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const goDetail = (id) => {
|
|
Taro.navigateTo({ url: `/pages/competition/detail?id=${id}` })
|
|
}
|
|
|
|
const getStatusText = (status) => {
|
|
const map = {
|
|
'published': '即将开始',
|
|
'registration': '报名中',
|
|
'submission': '作品提交中',
|
|
'judging': '评审中',
|
|
'ended': '已结束',
|
|
'draft': '草稿'
|
|
}
|
|
return map[status] || status
|
|
}
|
|
|
|
return (
|
|
<View className='competition-page'>
|
|
<ScrollView scrollY className='comp-list'>
|
|
{competitions.map(item => (
|
|
<View key={item.id} className='comp-card' onClick={() => goDetail(item.id)}>
|
|
<Image
|
|
className='cover'
|
|
mode='aspectFill'
|
|
src={item.display_cover_image || 'https://via.placeholder.com/400x200'}
|
|
/>
|
|
<View className='info'>
|
|
<View className='header'>
|
|
<Text className='title'>{item.title}</Text>
|
|
<Text className={`status ${item.status}`}>{getStatusText(item.status)}</Text>
|
|
</View>
|
|
<Text className='desc'>{item.description}</Text>
|
|
<View className='footer'>
|
|
<Text className='time'>
|
|
{item.start_time?.split('T')[0]} ~ {item.end_time?.split('T')[0]}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
))}
|
|
{!loading && competitions.length === 0 && (
|
|
<View className='empty'>
|
|
<Text>暂无比赛</Text>
|
|
<View style={{ marginTop: 20, color: '#666', fontSize: 12, wordBreak: 'break-all', padding: 20 }}>
|
|
调试信息: {debugMsg}
|
|
</View>
|
|
</View>
|
|
)}
|
|
</ScrollView>
|
|
</View>
|
|
)
|
|
}
|