fix(api): 替换所有接口请求的域名为 guilixu-api.websoft.top
- 将获取 STS Token 的接口地址由 paopao-api 改为 guilixu-api - 更新图片上传接口地址为新的 guilixu-api 域名 - 修改用户推广页面中邀请码链接和二维码接口的域名 - 更改注册页微信登录接口请求的域名为 guilixu-api
This commit is contained in:
245
src/pages/activity/detail/index.tsx
Normal file
245
src/pages/activity/detail/index.tsx
Normal file
@@ -0,0 +1,245 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { View, Text, ScrollView, Image } from '@tarojs/components'
|
||||
import Taro from '@tarojs/taro'
|
||||
import { getShopActivity, signUpActivity, cancelSignUpActivity, getSignUpStatus } from '@/api/shop/shopActivity'
|
||||
import type { ShopActivity, ActivityStatus } from '@/api/shop/shopActivity/model'
|
||||
|
||||
definePageConfig({
|
||||
navigationBarTitleText: '活动详情',
|
||||
})
|
||||
|
||||
const ActivityDetailPage: React.FC = () => {
|
||||
const { id } = Taro.getCurrentInstance().router?.params || {}
|
||||
const [activity, setActivity] = useState<ShopActivity | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [signedUp, setSignedUp] = useState(false)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
fetchDetail(Number(id))
|
||||
fetchSignUpStatus(Number(id))
|
||||
}
|
||||
}, [id])
|
||||
|
||||
const fetchDetail = async (activityId: number) => {
|
||||
try {
|
||||
const data = await getShopActivity(activityId)
|
||||
setActivity(data)
|
||||
} catch (err: any) {
|
||||
Taro.showToast({ title: err.message || '加载失败', icon: 'none' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchSignUpStatus = async (activityId: number) => {
|
||||
try {
|
||||
const res = await getSignUpStatus(activityId)
|
||||
setSignedUp(res.signedUp)
|
||||
} catch {
|
||||
// 未登录或接口不可用时忽略
|
||||
}
|
||||
}
|
||||
|
||||
// 报名活动
|
||||
const handleSignUp = () => {
|
||||
if (!activity) return
|
||||
Taro.showModal({
|
||||
title: '确认报名',
|
||||
content: '确定报名参加该活动吗？',
|
||||
confirmColor: '#0e932e',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
setSubmitting(true)
|
||||
try {
|
||||
await signUpActivity({ activityId: activity.id, userId: 0 })
|
||||
setSignedUp(true)
|
||||
setActivity(prev => prev ? { ...prev, participants: prev.participants + 1 } : prev)
|
||||
Taro.showToast({ title: '报名成功', icon: 'success' })
|
||||
} catch (err: any) {
|
||||
Taro.showToast({ title: err.message || '报名失败', icon: 'none' })
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 取消报名
|
||||
const handleCancelSignUp = () => {
|
||||
if (!activity) return
|
||||
Taro.showModal({
|
||||
title: '取消报名',
|
||||
content: '确定取消报名吗？',
|
||||
confirmColor: '#ef4444',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
setSubmitting(true)
|
||||
try {
|
||||
await cancelSignUpActivity(activity.id)
|
||||
setSignedUp(false)
|
||||
setActivity(prev => prev ? { ...prev, participants: Math.max(0, prev.participants - 1) } : prev)
|
||||
Taro.showToast({ title: '已取消报名', icon: 'success' })
|
||||
} catch (err: any) {
|
||||
Taro.showToast({ title: err.message || '取消失败', icon: 'none' })
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 分享活动
|
||||
const handleShare = () => {
|
||||
Taro.showToast({ title: '分享功能开发中', icon: 'none' })
|
||||
}
|
||||
|
||||
// 获取状态标签
|
||||
const getStatusLabel = (status: ActivityStatus) => {
|
||||
const map: Record<ActivityStatus, { label: string; color: string }> = {
|
||||
upcoming: { label: '未开始', color: 'text-blue-500' },
|
||||
ongoing: { label: '进行中', color: 'text-green-500' },
|
||||
ended: { label: '已结束', color: 'text-gray-400' },
|
||||
cancelled: { label: '已取消', color: 'text-gray-400' },
|
||||
}
|
||||
return map[status] || { label: '未知', color: 'text-gray-400' }
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
const formatTime = (timeStr: string) => {
|
||||
const date = new Date(timeStr)
|
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
|
||||
}
|
||||
|
||||
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 (!activity) {
|
||||
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 = getStatusLabel(activity.status)
|
||||
|
||||
return (
|
||||
<View className='min-h-screen bg-gray-50 flex flex-col'>
|
||||
<ScrollView scrollY className='flex-1'>
|
||||
{/* 活动头图 */}
|
||||
{activity.image ? (
|
||||
<Image src={activity.image} className='w-full' style={{ height: '192px' }} mode='aspectFill' />
|
||||
) : (
|
||||
<View className='w-full flex items-center justify-center' style={{ height: '192px', background: 'linear-gradient(to right, #fb923c, #ef4444)' }}>
|
||||
<Text className='text-6xl'>🎉</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 活动信息 */}
|
||||
<View className='bg-white p-4 mb-3'>
|
||||
<View className='flex items-center gap-2 mb-2'>
|
||||
<Text className='text-xl font-bold text-gray-800 flex-1'>{activity.name}</Text>
|
||||
<View className={`px-2 py-1 rounded ${activity.status === 'ongoing' ? 'bg-green-50' : activity.status === 'upcoming' ? 'bg-blue-50' : 'bg-gray-50'}`}>
|
||||
<Text className={`text-xs ${statusInfo.color}`}>{statusInfo.label}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className='flex items-center gap-3 text-xs text-gray-500 mb-3'>
|
||||
<View className='flex items-center gap-1'>
|
||||
<Text>📅</Text>
|
||||
<Text>{formatTime(activity.startTime)}</Text>
|
||||
</View>
|
||||
<View className='flex items-center gap-1'>
|
||||
<Text>👥</Text>
|
||||
<Text>{activity.participants}人参与</Text>
|
||||
</View>
|
||||
{activity.maxParticipants && (
|
||||
<View className='flex items-center gap-1'>
|
||||
<Text>🔢</Text>
|
||||
<Text>限{activity.maxParticipants}人</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View className='bg-orange-50 rounded-lg p-3'>
|
||||
<Text className='text-sm text-orange-500 font-medium'>{activity.typeName || activity.type}</Text>
|
||||
<Text className='text-xs text-gray-600 mt-1 block leading-5'>{activity.description.split('\n')[0]}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 活动详情 */}
|
||||
<View className='bg-white p-4 mb-3'>
|
||||
<Text className='text-base font-medium text-gray-800 mb-3 block'>活动详情</Text>
|
||||
<Text className='text-sm text-gray-700 leading-7 block whitespace-pre-wrap'>
|
||||
{activity.description}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* 活动规则 */}
|
||||
{activity.rules && (
|
||||
<View className='bg-white p-4 mb-3'>
|
||||
<Text className='text-base font-medium text-gray-800 mb-3 block'>活动规则</Text>
|
||||
<Text className='text-sm text-gray-700 leading-7 block whitespace-pre-wrap'>
|
||||
{activity.rules}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className='h-20' />
|
||||
</ScrollView>
|
||||
|
||||
{/* 底部操作栏 */}
|
||||
<View className='bg-white p-3 shadow-lg flex gap-2' style={{ paddingBottom: '20px' }}>
|
||||
<View
|
||||
className='flex-1 bg-gray-100 text-center py-3 rounded-full'
|
||||
onClick={handleShare}
|
||||
>
|
||||
<Text className='text-sm text-gray-700'>分享</Text>
|
||||
</View>
|
||||
|
||||
{activity.status === 'ongoing' && !signedUp && (
|
||||
<View
|
||||
className='flex-1 bg-orange-500 text-center py-3 rounded-full'
|
||||
onClick={submitting ? undefined : handleSignUp}
|
||||
style={{ opacity: submitting ? 0.6 : 1 }}
|
||||
>
|
||||
<Text className='text-sm text-white font-bold'>{submitting ? '处理中...' : '立即报名'}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{activity.status === 'ongoing' && signedUp && (
|
||||
<View
|
||||
className='flex-1 bg-gray-400 text-center py-3 rounded-full'
|
||||
onClick={submitting ? undefined : handleCancelSignUp}
|
||||
style={{ opacity: submitting ? 0.6 : 1 }}
|
||||
>
|
||||
<Text className='text-sm text-white font-bold'>{submitting ? '处理中...' : '取消报名'}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{activity.status === 'upcoming' && (
|
||||
<View className='flex-1 bg-blue-500 text-center py-3 rounded-full'>
|
||||
<Text className='text-sm text-white font-bold'>即将开始</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{(activity.status === 'ended' || activity.status === 'cancelled') && (
|
||||
<View className='flex-1 bg-gray-300 text-center py-3 rounded-full'>
|
||||
<Text className='text-sm text-white font-bold'>已结束</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default ActivityDetailPage
|
||||
Reference in New Issue
Block a user