fix(api): 替换所有接口请求的域名为 guilixu-api.websoft.top
- 将获取 STS Token 的接口地址由 paopao-api 改为 guilixu-api - 更新图片上传接口地址为新的 guilixu-api 域名 - 修改用户推广页面中邀请码链接和二维码接口的域名 - 更改注册页微信登录接口请求的域名为 guilixu-api
This commit is contained in:
3
src/pages/event/detail/index.config.ts
Normal file
3
src/pages/event/detail/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '立即报名',
|
||||
}
|
||||
195
src/pages/event/detail/index.tsx
Normal file
195
src/pages/event/detail/index.tsx
Normal file
@@ -0,0 +1,195 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { View, Text, ScrollView, Image } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { getShopEvent, getRegistrationStatus, getEventStatusLabel } from '@/api/shop/shopEvent'
|
||||
import type { ShopEvent, RegistrationStatus, EventFormField } from '@/api/shop/shopEvent'
|
||||
|
||||
definePageConfig({ navigationBarTitleText: '赛事详情' })
|
||||
|
||||
const EventDetailPage: React.FC = () => {
|
||||
const { id } = Taro.getCurrentInstance().router?.params || {}
|
||||
const [event, setEvent] = useState<ShopEvent | null>(null)
|
||||
const [regStatus, setRegStatus] = useState<RegistrationStatus | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
fetchDetail(Number(id))
|
||||
fetchRegStatus(Number(id))
|
||||
}
|
||||
}, [id])
|
||||
|
||||
const fetchDetail = async (eventId: number) => {
|
||||
try {
|
||||
const data = await getShopEvent(eventId)
|
||||
setEvent(data)
|
||||
} catch (err: any) {
|
||||
Taro.showToast({ title: err.message || '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchRegStatus = async (eventId: number) => {
|
||||
try {
|
||||
const data = await getRegistrationStatus(eventId)
|
||||
setRegStatus(data)
|
||||
} catch {
|
||||
// 未登录时忽略
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
const d = new Date(dateStr)
|
||||
return `${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日 ${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`
|
||||
}
|
||||
|
||||
const handleRegister = () => {
|
||||
if (!event) return
|
||||
Taro.navigateTo({ url: `/pages/event/register/index?id=${event.id}` })
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50 flex items-center justify-center'>
|
||||
<Text className='text-sm text-gray-400'>加载中...</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
if (!event) {
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50 flex items-center justify-center'>
|
||||
<Text className='text-sm text-gray-400'>赛事不存在</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const statusInfo = getEventStatusLabel(event.status as number)
|
||||
const isFull = event.maxParticipants > 0 && event.paidCount >= event.maxParticipants
|
||||
const alreadyPaid = regStatus?.registered && regStatus.payStatus === 1
|
||||
const pendingPay = regStatus?.registered && regStatus.payStatus === 0
|
||||
|
||||
// 解析动态表单字段
|
||||
let formFields: EventFormField[] = []
|
||||
if (event.formFields) {
|
||||
if (Array.isArray(event.formFields)) {
|
||||
formFields = event.formFields
|
||||
} else {
|
||||
try { formFields = JSON.parse(event.formFields) } catch { formFields = [] }
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50 flex flex-col'>
|
||||
<ScrollView scrollY className='flex-1'>
|
||||
{/* 封面 */}
|
||||
{event.image ? (
|
||||
<Image src={event.image} className='w-full' style={{ height: '200px' }} mode='aspectFill' />
|
||||
) : (
|
||||
<View className='w-full flex items-center justify-center' style={{ height: '200px', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
|
||||
<Text className='text-6xl'>🏆</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 基本信息 */}
|
||||
<View className='bg-white p-4 mb-3'>
|
||||
<View className='flex items-center gap-2 mb-3'>
|
||||
<Text className='text-xl font-bold text-gray-800 flex-1'>{event.name}</Text>
|
||||
<View className={`px-2 py-1 rounded ${event.status === 1 ? 'bg-green-50' : 'bg-gray-50'}`}>
|
||||
<Text className={`text-xs ${statusInfo.color}`}>{statusInfo.label}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className='space-y-2 text-sm text-gray-600'>
|
||||
<View className='flex items-center gap-2'>
|
||||
<Text className='text-gray-400 w-16'>赛事时间</Text>
|
||||
<Text>{formatDate(event.eventDate)}</Text>
|
||||
</View>
|
||||
{event.location && (
|
||||
<View className='flex items-center gap-2'>
|
||||
<Text className='text-gray-400 w-16'>赛事地点</Text>
|
||||
<Text>{event.location}</Text>
|
||||
</View>
|
||||
)}
|
||||
<View className='flex items-center gap-2'>
|
||||
<Text className='text-gray-400 w-16'>报名名额</Text>
|
||||
<Text>{event.paidCount} / {event.maxParticipants > 0 ? event.maxParticipants : '不限'}</Text>
|
||||
{isFull && <Text className='text-red-500 text-xs'>（已满）</Text>}
|
||||
</View>
|
||||
<View className='flex items-center gap-2'>
|
||||
<Text className='text-gray-400 w-16'>报名费用</Text>
|
||||
<Text className={event.entryFee > 0 ? 'text-orange-500 font-bold text-base' : 'text-green-500 font-bold'}>
|
||||
{event.entryFee > 0 ? `¥${event.entryFee}` : '免费'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 报名须知 */}
|
||||
<View className='bg-white p-4 mb-3'>
|
||||
<Text className='text-base font-medium text-gray-800 mb-2 block'>报名须知</Text>
|
||||
<View className='text-xs text-gray-500 space-y-1'>
|
||||
{formFields.length > 0 ? (
|
||||
formFields.map(field => (
|
||||
<Text key={field.key} className='block'>
|
||||
• 需{field.required === 1 ? '填写' : '选填'}{field.label}
|
||||
{field.type === 'select' || field.type === 'radio' ? `（${(field.options || []).join('/')}）` : ''}
|
||||
</Text>
|
||||
))
|
||||
) : (
|
||||
<Text className='block'>• 该赛事无需填写额外信息</Text>
|
||||
)}
|
||||
{event.entryFee > 0 && <Text className='block'>• 缴费成功后报名生效，缴费失败不占名额</Text>}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 赛事描述 */}
|
||||
{event.description && (
|
||||
<View className='bg-white p-4 mb-3'>
|
||||
<Text className='text-base font-medium text-gray-800 mb-2 block'>赛事详情</Text>
|
||||
<Text className='text-sm text-gray-700 leading-7 whitespace-pre-wrap block'>{event.description}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className='h-24' />
|
||||
</ScrollView>
|
||||
|
||||
{/* 底部操作栏 */}
|
||||
<View className='bg-white px-4 py-3 shadow-lg' style={{ paddingBottom: '20px' }}>
|
||||
{alreadyPaid && (
|
||||
<View className='bg-green-500 text-center py-3 rounded-full'>
|
||||
<Text className='text-sm text-white font-bold'>✓ 已报名</Text>
|
||||
</View>
|
||||
)}
|
||||
{pendingPay && (
|
||||
<View
|
||||
className='bg-orange-500 text-center py-3 rounded-full'
|
||||
onClick={() => Taro.navigateTo({ url: '/pages/event/my/index' })}
|
||||
>
|
||||
<Text className='text-sm text-white font-bold'>待缴费 — 前往我的报名</Text>
|
||||
</View>
|
||||
)}
|
||||
{!regStatus?.registered && event.status === 1 && !isFull && (
|
||||
<View className='bg-orange-500 text-center py-3 rounded-full' onClick={handleRegister}>
|
||||
<Text className='text-sm text-white font-bold'>
|
||||
{event.entryFee > 0 ? `立即报名 ¥${event.entryFee}` : '立即报名（免费）'}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
{!regStatus?.registered && event.status === 1 && isFull && (
|
||||
<View className='bg-gray-300 text-center py-3 rounded-full'>
|
||||
<Text className='text-sm text-white font-bold'>名额已满</Text>
|
||||
</View>
|
||||
)}
|
||||
{event.status !== 1 && !alreadyPaid && !pendingPay && (
|
||||
<View className='bg-gray-300 text-center py-3 rounded-full'>
|
||||
<Text className='text-sm text-white font-bold'>{statusInfo.label}</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default EventDetailPage
|
||||
3
src/pages/event/list/index.config.ts
Normal file
3
src/pages/event/list/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '报名活动',
|
||||
}
|
||||
146
src/pages/event/list/index.tsx
Normal file
146
src/pages/event/list/index.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { View, Text, ScrollView, Image } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { pageShopEvent, getEventStatusLabel } from '@/api/shop/shopEvent'
|
||||
import type { ShopEvent } from '@/api/shop/shopEvent'
|
||||
import EmptyState from '@/components/common/EmptyState'
|
||||
import LoadMore from '@/components/common/LoadMore'
|
||||
|
||||
definePageConfig({ navigationBarTitleText: '赛事报名' })
|
||||
|
||||
const TABS = ['全部', '未开始', '报名中', '已截止', '已结束']
|
||||
const STATUS_MAP: Record<number, number | undefined> = { 1: 0, 2: 1, 3: 2, 4: 3 }
|
||||
|
||||
const EventListPage: React.FC = () => {
|
||||
const [activeTab, setActiveTab] = useState(0)
|
||||
const [events, setEvents] = useState<ShopEvent[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [finished, setFinished] = useState(false)
|
||||
const [page, setPage] = useState(1)
|
||||
|
||||
useEffect(() => {
|
||||
setEvents([])
|
||||
setPage(1)
|
||||
setFinished(false)
|
||||
loadList(1)
|
||||
}, [activeTab])
|
||||
|
||||
const loadList = async (p: number) => {
|
||||
if (loading) return
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await pageShopEvent({
|
||||
page: p,
|
||||
limit: 10,
|
||||
status: STATUS_MAP[activeTab],
|
||||
})
|
||||
if (res?.list) {
|
||||
setEvents(prev => p === 1 ? res.list : [...prev, ...res.list])
|
||||
setFinished(res.list.length < 10)
|
||||
setPage(p)
|
||||
}
|
||||
} catch (err) {
|
||||
Taro.showToast({ title: '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
const d = new Date(dateStr)
|
||||
return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50'>
|
||||
{/* Tab 栏 */}
|
||||
<View className='bg-white flex'>
|
||||
{TABS.map((tab, index) => (
|
||||
<View
|
||||
key={index}
|
||||
className={`flex-1 text-center py-3 relative ${activeTab === index ? 'text-orange-500 font-medium' : 'text-gray-600'}`}
|
||||
onClick={() => setActiveTab(index)}
|
||||
>
|
||||
<Text className='text-sm'>{tab}</Text>
|
||||
{activeTab === index && (
|
||||
<View className='absolute bottom-0 w-8 h-px bg-orange-500 rounded' style={{ left: '50%', transform: 'translateX(-50%)' }} />
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
|
||||
<ScrollView scrollY className='flex-1' onScrollToLower={() => !finished && !loading && loadList(page + 1)} lowerThreshold={100}>
|
||||
<View className='p-3'>
|
||||
{events.length === 0 && !loading ? (
|
||||
<EmptyState text='暂无赛事' />
|
||||
) : (
|
||||
events.map(event => {
|
||||
const statusInfo = getEventStatusLabel(event.status as number)
|
||||
return (
|
||||
<View
|
||||
key={event.id}
|
||||
className='bg-white rounded-xl mb-3 shadow-sm overflow-hidden'
|
||||
onClick={() => Taro.navigateTo({ url: `/pages/event/detail/index?id=${event.id}` })}
|
||||
>
|
||||
{/* 封面 */}
|
||||
{event.image ? (
|
||||
<Image src={event.image} className='w-full' style={{ height: '160px' }} mode='aspectFill' />
|
||||
) : (
|
||||
<View className='w-full flex items-center justify-center' style={{ height: '140px', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
|
||||
<Text className='text-5xl'>🏆</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className='p-4'>
|
||||
{/* 标题+状态 */}
|
||||
<View className='flex items-center gap-2 mb-2'>
|
||||
<Text className='text-base font-bold text-gray-800 flex-1'>{event.name}</Text>
|
||||
<View className={`px-2 py-1 rounded ${event.status === 1 ? 'bg-green-50' : event.status === 0 ? 'bg-blue-50' : 'bg-gray-50'}`}>
|
||||
<Text className={`text-xs ${statusInfo.color}`}>{statusInfo.label}</Text>
|
||||
</View>
|
||||
{event.isHot === 1 && (
|
||||
<View className='bg-red-50 px-2 py-1 rounded'>
|
||||
<Text className='text-xs text-red-500'>🔥热门</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 信息行 */}
|
||||
<View className='flex items-center gap-3 text-xs text-gray-500 mb-3'>
|
||||
<Text>📅 {formatDate(event.eventDate)}</Text>
|
||||
{event.location && <Text>📍 {event.location}</Text>}
|
||||
</View>
|
||||
|
||||
{/* 底部：名额+费用+按钮 */}
|
||||
<View className='flex items-center justify-between'>
|
||||
<View className='flex items-center gap-3 text-xs text-gray-500'>
|
||||
<Text>👥 {event.paidCount}/{event.maxParticipants > 0 ? event.maxParticipants : '不限'}</Text>
|
||||
<Text className={event.entryFee > 0 ? 'text-orange-500 font-medium' : 'text-green-500'}>
|
||||
{event.entryFee > 0 ? `¥${event.entryFee}` : '免费'}
|
||||
</Text>
|
||||
</View>
|
||||
{event.status === 1 && (
|
||||
event.maxParticipants > 0 && event.paidCount >= event.maxParticipants ? (
|
||||
<View className='bg-gray-200 px-4 py-1 rounded-full'>
|
||||
<Text className='text-xs text-gray-500'>名额已满</Text>
|
||||
</View>
|
||||
) : (
|
||||
<View className='bg-orange-500 px-4 py-1 rounded-full'>
|
||||
<Text className='text-xs text-white font-medium'>立即报名</Text>
|
||||
</View>
|
||||
)
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
})
|
||||
)}
|
||||
<LoadMore loading={loading} finished={finished} />
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default EventListPage
|
||||
3
src/pages/event/my/index.config.ts
Normal file
3
src/pages/event/my/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '我的报名',
|
||||
}
|
||||
170
src/pages/event/my/index.tsx
Normal file
170
src/pages/event/my/index.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { View, Text, ScrollView } from '@tarojs/components'
|
||||
import Taro, { useDidShow } from '@tarojs/taro'
|
||||
import { getMyRegistrations, payEventRegistration, getPayStatusLabel } from '@/api/shop/shopEvent'
|
||||
import type { EventRegistration, EventFormField } from '@/api/shop/shopEvent'
|
||||
|
||||
definePageConfig({ navigationBarTitleText: '我的报名' })
|
||||
|
||||
const MyRegistrationsPage: React.FC = () => {
|
||||
const [list, setList] = useState<EventRegistration[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [paying, setPaying] = useState<number | null>(null)
|
||||
|
||||
useDidShow(() => {
|
||||
fetchList()
|
||||
})
|
||||
|
||||
const fetchList = async () => {
|
||||
try {
|
||||
const data = await getMyRegistrations()
|
||||
setList(data || [])
|
||||
} catch (err: any) {
|
||||
Taro.showToast({ title: err.message || '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRepay = async (reg: EventRegistration) => {
|
||||
setPaying(reg.id)
|
||||
try {
|
||||
const wxParams = await payEventRegistration(reg.id)
|
||||
// 后端返回已支付（回调丢失自动修复场景）
|
||||
if ((wxParams as any).paid === 'true') {
|
||||
Taro.showToast({ title: '支付成功', icon: 'success' })
|
||||
setList(prev => prev.map(r => r.id === reg.id ? { ...r, payStatus: 1, paidAt: new Date().toISOString() } : r))
|
||||
fetchList()
|
||||
return
|
||||
}
|
||||
await Taro.requestPayment({
|
||||
timeStamp: wxParams.timeStamp,
|
||||
nonceStr: wxParams.nonceStr,
|
||||
package: wxParams.package,
|
||||
signType: wxParams.signType as any,
|
||||
paySign: wxParams.paySign,
|
||||
})
|
||||
// 支付成功后立即更新本地状态，避免后端回调延迟导致仍显示"待缴费"
|
||||
setList(prev => prev.map(r => r.id === reg.id ? { ...r, payStatus: 1, paidAt: new Date().toISOString() } : r))
|
||||
Taro.showToast({ title: '支付成功', icon: 'success' })
|
||||
fetchList()
|
||||
} catch (err: any) {
|
||||
if (!err?.errMsg?.includes('cancel')) {
|
||||
Taro.showToast({ title: err.message || '支付失败', icon: 'none' })
|
||||
}
|
||||
} finally {
|
||||
setPaying(null)
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
const d = new Date(dateStr)
|
||||
return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`
|
||||
}
|
||||
|
||||
const fieldLabelMap: Record<string, string> = {
|
||||
name: '姓名',
|
||||
phone: '手机号',
|
||||
idCard: '身份证号',
|
||||
size: '服装尺码',
|
||||
email: '邮箱',
|
||||
gender: '性别',
|
||||
age: '年龄',
|
||||
address: '地址',
|
||||
company: '单位/公司',
|
||||
job: '职业',
|
||||
remark: '备注',
|
||||
emergencyContact: '紧急联系人',
|
||||
emergencyPhone: '紧急联系人电话',
|
||||
wechat: '微信号',
|
||||
team: '团队/队伍',
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50 flex items-center justify-center'>
|
||||
<Text className='text-sm text-gray-400'>加载中...</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50'>
|
||||
<ScrollView scrollY className='flex-1'>
|
||||
<View className='p-3'>
|
||||
{list.length === 0 ? (
|
||||
<View className='flex flex-col items-center justify-center py-20'>
|
||||
<Text className='text-4xl mb-3'>🏆</Text>
|
||||
<Text className='text-sm text-gray-400'>暂无报名记录</Text>
|
||||
<View
|
||||
className='mt-4 bg-orange-500 px-6 py-2 rounded-full'
|
||||
onClick={() => Taro.navigateTo({ url: '/pages/event/list/index' })}
|
||||
>
|
||||
<Text className='text-sm text-white'>去报名赛事</Text>
|
||||
</View>
|
||||
</View>
|
||||
) : (
|
||||
list.map(reg => {
|
||||
// 后端支付回调可能延迟，paidAt 有值即视为已缴费
|
||||
const effectivePayStatus = reg.paidAt ? 1 : reg.payStatus
|
||||
const payInfo = getPayStatusLabel(effectivePayStatus)
|
||||
return (
|
||||
<View key={reg.id} className='bg-white rounded-xl p-4 mb-3 shadow-sm'>
|
||||
<View className='flex items-start justify-between mb-3'>
|
||||
<Text className='text-base font-bold text-gray-800 flex-1 mr-2'>{reg.eventName || '赛事'}</Text>
|
||||
<View className={`px-2 py-1 rounded ${effectivePayStatus === 1 ? 'bg-green-50' : effectivePayStatus === 0 ? 'bg-orange-50' : 'bg-gray-50'}`}>
|
||||
<Text className={`text-xs ${payInfo.color}`}>{payInfo.label}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className='text-xs text-gray-500 space-y-1 mb-3'>
|
||||
{/* 动态表单数据展示 */}
|
||||
{(() => {
|
||||
let formData: Record<string, string> = {}
|
||||
if (reg.formData) {
|
||||
if (typeof reg.formData === 'string') {
|
||||
try { formData = JSON.parse(reg.formData) } catch { formData = {} }
|
||||
} else {
|
||||
formData = reg.formData as Record<string, string>
|
||||
}
|
||||
}
|
||||
// 去重：过滤掉与英文 key 重复的中文 label key
|
||||
const labelToKey: Record<string, string> = {}
|
||||
Object.entries(fieldLabelMap).forEach(([k, v]) => { labelToKey[v] = k })
|
||||
return Object.entries(formData).filter(([key]) => {
|
||||
if (fieldLabelMap[key]) return true // 英文 key 保留
|
||||
if (labelToKey[key]) return false // 中文 label key 跳过（会由英文 key 渲染）
|
||||
return true // 自定义字段保留
|
||||
}).map(([key, value]) => (
|
||||
<Text key={key} className='block'>{fieldLabelMap[key] || key}：{value}</Text>
|
||||
))
|
||||
})()}
|
||||
<Text className='block'>
|
||||
报名费：{reg.entryFee > 0 ? `¥${reg.entryFee}` : '免费'}
|
||||
</Text>
|
||||
<Text className='block'>报名时间：{formatDate(reg.createTime)}</Text>
|
||||
{reg.paidAt && <Text className='block'>缴费时间：{formatDate(reg.paidAt)}</Text>}
|
||||
</View>
|
||||
|
||||
{effectivePayStatus === 0 && (
|
||||
<View
|
||||
className='bg-orange-500 text-center py-2 rounded-full'
|
||||
style={{ opacity: paying === reg.id ? 0.6 : 1 }}
|
||||
onClick={paying === reg.id ? undefined : () => handleRepay(reg)}
|
||||
>
|
||||
<Text className='text-sm text-white font-medium'>
|
||||
{paying === reg.id ? '支付中...' : `重新支付 ¥${reg.entryFee}`}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default MyRegistrationsPage
|
||||
3
src/pages/event/register/index.config.ts
Normal file
3
src/pages/event/register/index.config.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export default {
|
||||
navigationBarTitleText: '立即报名',
|
||||
}
|
||||
317
src/pages/event/register/index.tsx
Normal file
317
src/pages/event/register/index.tsx
Normal file
@@ -0,0 +1,317 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { View, Text, Input, Picker } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { getShopEvent, registerEvent } from '@/api/shop/shopEvent'
|
||||
import type { ShopEvent, EventFormField } from '@/api/shop/shopEvent'
|
||||
|
||||
definePageConfig({ navigationBarTitleText: '填写报名信息' })
|
||||
|
||||
/** 解析动态表单字段配置 */
|
||||
function parseFormFields(event: ShopEvent): EventFormField[] {
|
||||
// 1. 优先读取 formFields（新架构）
|
||||
const raw = (event as any).formFields || (event as any).form_fields
|
||||
if (raw) {
|
||||
if (Array.isArray(raw)) return raw as EventFormField[]
|
||||
try {
|
||||
const parsed = JSON.parse(raw)
|
||||
if (Array.isArray(parsed)) return parsed as EventFormField[]
|
||||
} catch { /* ignore */ }
|
||||
}
|
||||
|
||||
// 2. 兼容旧架构：根据 requireName/requirePhone/requireIdCard/requireSize 构建表单字段
|
||||
const fields: EventFormField[] = []
|
||||
let sort = 1
|
||||
|
||||
// 从 sizeOptions 解析尺码选项
|
||||
const sizeOptions: string[] = []
|
||||
if ((event as any).sizeOptions) {
|
||||
const opts = String((event as any).sizeOptions).split(/[,，]/).map(s => s.trim()).filter(Boolean)
|
||||
sizeOptions.push(...opts)
|
||||
}
|
||||
|
||||
// 姓名
|
||||
if ((event as any).requireName === 1) {
|
||||
fields.push({ key: 'name', label: '姓名', type: 'text', required: 1, placeholder: '请输入姓名', sort: sort++ })
|
||||
}
|
||||
// 手机号
|
||||
if ((event as any).requirePhone === 1) {
|
||||
fields.push({ key: 'phone', label: '手机号', type: 'phone', required: 1, placeholder: '请输入手机号', sort: sort++ })
|
||||
}
|
||||
// 身份证
|
||||
if ((event as any).requireIdCard === 1) {
|
||||
fields.push({ key: 'idCard', label: '身份证号', type: 'idcard', required: 1, placeholder: '请输入身份证号', sort: sort++ })
|
||||
}
|
||||
// 尺码
|
||||
if ((event as any).requireSize === 1) {
|
||||
fields.push({
|
||||
key: 'size',
|
||||
label: '服装尺码',
|
||||
type: 'select',
|
||||
required: 1,
|
||||
placeholder: '请选择尺码',
|
||||
options: sizeOptions.length > 0 ? sizeOptions : ['XS', 'S', 'M', 'L', 'XL', 'XXL'],
|
||||
sort: sort++,
|
||||
})
|
||||
}
|
||||
|
||||
return fields.sort((a, b) => a.sort - b.sort)
|
||||
}
|
||||
|
||||
/** 根据字段类型返回校验规则 */
|
||||
function getFieldValidator(field: EventFormField) {
|
||||
return (value: string): string | null => {
|
||||
if (field.required === 1 && !value.trim()) {
|
||||
return `请填写${field.label}`
|
||||
}
|
||||
if (!value.trim()) return null
|
||||
|
||||
switch (field.type) {
|
||||
case 'phone':
|
||||
if (!/^1[3-9]\d{9}$/.test(value.trim())) {
|
||||
return '手机号格式不正确'
|
||||
}
|
||||
break
|
||||
case 'idcard':
|
||||
if (!/^\d{17}[\dXx]$/.test(value.trim())) {
|
||||
return '身份证号格式不正确'
|
||||
}
|
||||
break
|
||||
case 'number':
|
||||
if (!/^\d+$/.test(value.trim())) {
|
||||
return `${field.label}必须为数字`
|
||||
}
|
||||
break
|
||||
}
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
const EventRegisterPage: React.FC = () => {
|
||||
const { id } = Taro.getCurrentInstance().router?.params || {}
|
||||
const [event, setEvent] = useState<ShopEvent | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
|
||||
// 动态表单数据：key -> value
|
||||
const [formValues, setFormValues] = useState<Record<string, string>>({})
|
||||
|
||||
useEffect(() => {
|
||||
if (id) fetchEvent(Number(id))
|
||||
}, [id])
|
||||
|
||||
const fetchEvent = async (eventId: number) => {
|
||||
try {
|
||||
const data = await getShopEvent(eventId)
|
||||
setEvent(data)
|
||||
} catch (err: any) {
|
||||
Taro.showToast({ title: err.message || '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleFieldChange = (key: string, value: string) => {
|
||||
setFormValues(prev => ({ ...prev, [key]: value }))
|
||||
}
|
||||
|
||||
const validate = (): boolean => {
|
||||
if (!event) return false
|
||||
const fields = parseFormFields(event)
|
||||
for (const field of fields) {
|
||||
const validator = getFieldValidator(field)
|
||||
const error = validator(formValues[field.key] || '')
|
||||
if (error) {
|
||||
Taro.showToast({ title: error, icon: 'none' })
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
/** 将英文 key 映射为中文 key，与后端兼容 */
|
||||
const buildFormData = (): Record<string, string> => {
|
||||
const map: Record<string, string> = {
|
||||
name: '姓名',
|
||||
phone: '手机号',
|
||||
idCard: '身份证号',
|
||||
size: '服装尺码',
|
||||
}
|
||||
const result: Record<string, string> = {}
|
||||
for (const [key, value] of Object.entries(formValues)) {
|
||||
const cnKey = map[key] || key
|
||||
result[cnKey] = value
|
||||
// 同时保留英文 key，确保后端兼容
|
||||
result[key] = value
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!event || !validate()) return
|
||||
setSubmitting(true)
|
||||
try {
|
||||
const result = await registerEvent({
|
||||
eventId: event.id,
|
||||
formData: buildFormData(),
|
||||
})
|
||||
|
||||
if (result.free) {
|
||||
Taro.showToast({ title: '报名成功！', icon: 'success' })
|
||||
setTimeout(() => Taro.redirectTo({ url: '/pages/event/my/index' }), 2000)
|
||||
return
|
||||
}
|
||||
|
||||
// 后端返回已支付（回调丢失自动修复场景）
|
||||
if ((result as any).paid === 'true') {
|
||||
Taro.showToast({ title: '报名成功！', icon: 'success' })
|
||||
setTimeout(() => Taro.redirectTo({ url: '/pages/event/my/index' }), 2000)
|
||||
return
|
||||
}
|
||||
|
||||
// 收费赛事：发起微信支付
|
||||
await Taro.requestPayment({
|
||||
timeStamp: result.timeStamp,
|
||||
nonceStr: result.nonceStr,
|
||||
package: result.package,
|
||||
signType: result.signType as any,
|
||||
paySign: result.paySign,
|
||||
})
|
||||
Taro.showToast({ title: '报名成功！', icon: 'success' })
|
||||
// 延迟3秒跳转，给微信支付异步回调充足时间
|
||||
setTimeout(() => Taro.redirectTo({ url: '/pages/event/my/index' }), 3000)
|
||||
} catch (err: any) {
|
||||
if (err?.errMsg?.includes('cancel')) {
|
||||
Taro.showModal({
|
||||
title: '支付已取消',
|
||||
content: '您可以在"我的报名"中重新发起支付',
|
||||
showCancel: false,
|
||||
confirmText: '知道了',
|
||||
})
|
||||
} else {
|
||||
Taro.showToast({ title: err.message || '报名失败', icon: 'none' })
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (loading || !event) {
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50 flex items-center justify-center'>
|
||||
<Text className='text-sm text-gray-400'>{loading ? '加载中...' : '赛事不存在'}</Text>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const fields = parseFormFields(event)
|
||||
|
||||
/** 渲染单个表单字段 */
|
||||
const renderField = (field: EventFormField, index: number) => {
|
||||
const value = formValues[field.key] || ''
|
||||
const isLast = index === fields.length - 1
|
||||
const requiredMark = field.required === 1 ? <Text className='text-red-500'>*</Text> : null
|
||||
const placeholder = field.placeholder || `请输入${field.label}${field.required === 1 ? '' : '(选填)'}`
|
||||
|
||||
switch (field.type) {
|
||||
case 'select':
|
||||
case 'radio': {
|
||||
const options = field.options || []
|
||||
return (
|
||||
<View key={field.key} className={`bg-white rounded-xl p-4 mb-4`}>
|
||||
<Text className='text-sm text-gray-600 mb-3 block'>
|
||||
{field.label} {requiredMark}
|
||||
</Text>
|
||||
<View className='flex flex-wrap gap-2'>
|
||||
{options.map(opt => (
|
||||
<View
|
||||
key={opt}
|
||||
className={`px-4 py-2 rounded-lg border text-sm ${
|
||||
value === opt
|
||||
? 'bg-orange-500 border-orange-500 text-white'
|
||||
: 'bg-white border-gray-200 text-gray-700'
|
||||
}`}
|
||||
onClick={() => handleFieldChange(field.key, opt)}
|
||||
>
|
||||
<Text>{opt}</Text>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
default: {
|
||||
// text / number / idcard / phone
|
||||
const inputType = field.type === 'number' ? 'number' : 'text'
|
||||
const maxLength = field.type === 'phone' ? 11 : field.type === 'idcard' ? 18 : undefined
|
||||
return (
|
||||
<View
|
||||
key={field.key}
|
||||
className={`flex items-center px-4 py-3 ${!isLast ? 'border-b border-gray-100' : ''}`}
|
||||
>
|
||||
<Text className='text-sm text-gray-600 w-24'>
|
||||
{field.label} {requiredMark}
|
||||
</Text>
|
||||
<Input
|
||||
className='flex-1 text-sm text-gray-800'
|
||||
placeholder={placeholder}
|
||||
type={inputType}
|
||||
maxlength={maxLength}
|
||||
value={value}
|
||||
onInput={e => handleFieldChange(field.key, e.detail.value)}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50 flex flex-col'>
|
||||
<View className='flex-1 p-4'>
|
||||
{/* 赛事信息卡 */}
|
||||
<View className='bg-orange-50 rounded-xl p-4 mb-4'>
|
||||
<Text className='text-base font-bold text-gray-800 block mb-1'>{event.name}</Text>
|
||||
<Text className='text-sm text-orange-500'>
|
||||
{event.entryFee > 0 ? `报名费：¥${event.entryFee}` : '免费报名'}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 动态表单 */}
|
||||
{fields.length > 0 ? (
|
||||
<View className='bg-white rounded-xl overflow-hidden mb-4'>
|
||||
{fields.map((field, idx) => renderField(field, idx))}
|
||||
</View>
|
||||
) : (
|
||||
<View className='bg-white rounded-xl p-4 mb-4'>
|
||||
<Text className='text-sm text-gray-400 text-center'>该赛事无需填写报名信息</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 提示 */}
|
||||
{event.entryFee > 0 && (
|
||||
<View className='bg-yellow-50 rounded-xl p-3 mb-4'>
|
||||
<Text className='text-xs text-yellow-700'>
|
||||
💡 提交后将跳转微信支付，缴费成功后报名生效。若支付失败，可在"我的报名"中重新支付。
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 提交按钮 */}
|
||||
<View className='bg-white px-4 py-3 shadow-lg' style={{ paddingBottom: '20px' }}>
|
||||
<View
|
||||
className='bg-orange-500 text-center py-3 rounded-full'
|
||||
style={{ opacity: submitting ? 0.6 : 1 }}
|
||||
onClick={submitting ? undefined : handleSubmit}
|
||||
>
|
||||
<Text className='text-sm text-white font-bold'>
|
||||
{submitting ? '提交中...' : event.entryFee > 0 ? `确认报名并支付 ¥${event.entryFee}` : '确认报名'}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default EventRegisterPage
|
||||
Reference in New Issue
Block a user