Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
ff4e1cdb 1 parent 8887ebc6

feat(router): 添加活动页和活动详情页路由 

新增活动页和活动详情页的路由配置，以便用户可以访问活动相关页面
Inline Side-by-side
Showing 3 changed files with 557 additions and 1 deletions
/*
* @Date: 2025-03-20 20:36:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-20 21:16:30
* @LastEditTime: 2025-03-20 21:47:32
* @FilePath: /mlaj/src/router/index.js
* @Description: 文件描述
*/
......@@ -44,6 +44,19 @@ const routes = [
component: () => import('../views/auth/RegisterPage.vue'),
meta: { title: 'Register' }
},
{
path: '/activities',
name: 'Activities',
component: () => import('../views/activities/ActivitiesPage.vue'),
meta: { title: 'Activities' }
},
{
path: '/activities/:id',
name: 'ActivityDetail',
component: () => import('../views/activities/ActivityDetailPage.vue'),
props: true,
meta: { title: 'Home' }
},
]
const router = createRouter({
......
<template>
<AppLayout title="最新活动" :showBackButton="true" :rightContent="RightContent">
<div class="bg-gradient-to-b from-green-50/70 to-white/90 min-h-screen pb-20">
<!-- Top filter section -->
<div class="sticky top-0 z-10 bg-white/80 backdrop-blur-sm shadow-sm">
<!-- Category filters -->
<div class="px-4 pt-3 pb-2 overflow-x-auto">
<div class="flex space-x-6 whitespace-nowrap">
<button
v-for="filter in filterCategories"
:key="filter"
:class="[
'pb-1',
activeFilter === filter
? 'text-green-600 border-b-2 border-green-600 font-medium'
: 'text-gray-500'
]"
@click="activeFilter = filter"
>
{{ filter }}
</button>
</div>
</div>
<!-- Additional filters -->
<div class="px-4 py-2 flex justify-between items-center border-b border-gray-100">
<div class="flex space-x-2">
<div
class="flex items-center px-3 py-1 bg-white/70 backdrop-blur-sm rounded-full text-sm border border-gray-200 shadow-sm"
@click="showFilters = !showFilters"
>
<span class="text-gray-700">{{ locationFilter || '活动地点' }}</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</div>
<div
class="flex items-center px-3 py-1 bg-white/70 backdrop-blur-sm rounded-full text-sm border border-gray-200 shadow-sm"
@click="showFilters = !showFilters"
>
<span class="text-gray-700">{{ statusFilter || '活动状态' }}</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</div>
</div>
<button
:class="[
'p-1 rounded-lg',
showFilters ? 'bg-green-100 text-green-600' : 'bg-white/70 text-gray-500'
]"
@click="toggleFilters"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
</svg>
</button>
</div>
</div>
<!-- Filter panel -->
<div v-if="showFilters" class="bg-white/90 backdrop-blur-md p-4 shadow-md">
<div class="mb-4">
<h3 class="font-medium text-gray-700 mb-2">活动地点</h3>
<div class="flex flex-wrap gap-2">
<button
v-for="location in locationOptions"
:key="location"
:class="[
'px-3 py-1 rounded-full text-sm',
(location === '全部' && !locationFilter) || locationFilter === location
? 'bg-green-100 text-green-600 border border-green-200'
: 'bg-gray-100 text-gray-600 border border-gray-200'
]"
@click="applyLocationFilter(location)"
>
{{ location }}
</button>
</div>
</div>
<div class="mb-4">
<h3 class="font-medium text-gray-700 mb-2">活动状态</h3>
<div class="flex flex-wrap gap-2">
<button
v-for="status in statusOptions"
:key="status"
:class="[
'px-3 py-1 rounded-full text-sm',
(status === '全部' && !statusFilter) || statusFilter === status
? 'bg-green-100 text-green-600 border border-green-200'
: 'bg-gray-100 text-gray-600 border border-gray-200'
]"
@click="applyStatusFilter(status)"
>
{{ status }}
</button>
</div>
</div>
<div class="flex justify-between">
<button
class="px-4 py-2 text-gray-600 bg-gray-100 rounded-lg"
@click="resetFilters"
>
重置
</button>
<button
class="px-4 py-2 text-white bg-green-600 rounded-lg"
@click="showFilters = false"
>
确认
</button>
</div>
</div>
<!-- Activity count -->
<div class="px-4 py-3 text-sm text-gray-500">
共 {{ filteredActivities.length }} 个活动
</div>
<!-- Activity list -->
<div class="px-4 pb-4 space-y-4">
<template v-if="filteredActivities.length > 0">
<ActivityCard
v-for="activity in filteredActivities"
:key="activity.id"
:activity="activity"
/>
</template>
<div v-else class="flex flex-col items-center justify-center py-10">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p class="mt-4 text-gray-500">没有找到符合条件的活动</p>
<button
class="mt-2 px-4 py-2 text-green-600 border border-green-600 rounded-full text-sm"
@click="resetFilters"
>
重置筛选条件
</button>
</div>
</div>
</div>
</AppLayout>
</template>
<script setup>
import { ref, computed, defineComponent, h } from 'vue'
import AppLayout from '@/components/layout/AppLayout.vue'
import ActivityCard from '@/components/ui/ActivityCard.vue'
import { activities } from '@/utils/mockData'
// 响应式状态
const activeFilter = ref('全部')
const locationFilter = ref('')
const statusFilter = ref('')
const showFilters = ref(false)
// 过滤选项
const filterCategories = ['全部', '游学', '共读', '营地', '线上讲座']
const locationOptions = ['全部', '线上', '北京', '上海', '广州', '成都']
const statusOptions = ['全部', '活动中', '即将开始', '已结束']
// 右侧内容组件
const RightContent = defineComponent({
setup() {
return () => h('button', { class: 'p-2' }, [
h('svg', {
xmlns: 'http://www.w3.org/2000/svg',
class: 'h-6 w-6 text-gray-700',
fill: 'none',
viewBox: '0 0 24 24',
stroke: 'currentColor'
}, [
h('path', {
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': '2',
d: 'M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z'
})
])
])
}
})
// 切换筛选面板
const toggleFilters = () => {
showFilters.value = !showFilters.value
}
// 应用地点筛选
const applyLocationFilter = (location) => {
locationFilter.value = location === '全部' ? '' : location
}
// 应用状态筛选
const applyStatusFilter = (status) => {
statusFilter.value = status === '全部' ? '' : status
}
// 重置所有筛选
const resetFilters = () => {
locationFilter.value = ''
statusFilter.value = ''
activeFilter.value = '全部'
showFilters.value = false
}
// 计算筛选后的活动列表
const filteredActivities = computed(() => {
return activities.filter(activity => {
// 地点筛选
if (locationFilter.value && activity.location !== locationFilter.value) {
return false
}
// 状态筛选
if (statusFilter.value && activity.status !== statusFilter.value) {
return false
}
return true
})
})
</script>
<script setup>
import { ref, onMounted, defineComponent, h } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import AppLayout from '@/components/layout/AppLayout.vue'
import FrostedGlass from '@/components/ui/FrostedGlass.vue'
import { activities } from '@/utils/mockData'
const route = useRoute()
const router = useRouter()
const activity = ref(null)
const activeTab = ref('活动信息')
// 获取活动数据
onMounted(() => {
const id = route.params.id
const foundActivity = activities.find(a => a.id === id)
if (foundActivity) {
activity.value = foundActivity
} else {
// 活动未找到，重定向到活动列表页
router.push('/activities')
}
})
// 获取状态颜色类名
const getStatusColorClass = (status) => {
switch (status) {
case '活动中':
return 'bg-blue-100 text-blue-700'
case '进行中':
return 'bg-green-100 text-green-700'
case '即将开始':
return 'bg-orange-100 text-orange-700'
case '已结束':
return 'bg-gray-100 text-gray-700'
default:
return 'bg-gray-100 text-gray-700'
}
}
// 相关活动
const relatedActivities = ref([])
onMounted(() => {
if (activity.value) {
relatedActivities.value = activities
.filter(a => a.id !== activity.value.id)
.slice(0, 3)
}
})
// 页面导航
const navigateTo = (path) => {
router.push(path)
}
// 右侧内容组件
const RightContent = defineComponent({
setup() {
return () => h('div', { class: 'flex' }, [
h('button', { class: 'p-2' }, [
h('svg', {
xmlns: 'http://www.w3.org/2000/svg',
class: 'h-6 w-6 text-gray-700',
fill: 'none',
viewBox: '0 0 24 24',
stroke: 'currentColor'
}, [
h('path', {
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': '2',
d: 'M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z'
})
])
]),
h('button', { class: 'p-2' }, [
h('svg', {
xmlns: 'http://www.w3.org/2000/svg',
class: 'h-6 w-6 text-gray-700',
fill: 'none',
viewBox: '0 0 24 24',
stroke: 'currentColor'
}, [
h('path', {
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': '2',
d: 'M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z'
})
])
])
])
}
})
</script>
<template>
<AppLayout title="活动详情" :showBackButton="true" :rightContent="RightContent">
<div class="pb-24">
<!-- Activity Cover Image -->
<div class="w-full h-56 relative">
<img
:src="activity?.imageUrl"
:alt="activity?.title"
class="w-full h-full object-cover"
/>
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
<div class="inline-block px-2 py-1 rounded bg-white/20 backdrop-blur-sm text-white text-xs mb-2">
{{ activity?.subtitle }}
</div>
<h1 class="text-xl text-white font-bold">{{ activity?.title }}</h1>
</div>
</div>
<!-- Activity Tags and Status -->
<div class="px-4 py-3 flex justify-between items-center">
<div class="flex space-x-2">
<span class="px-2 py-1 rounded-full bg-green-100 text-green-700 text-xs">
亲子活动
</span>
<span class="px-2 py-1 rounded-full bg-blue-100 text-blue-700 text-xs">
教育
</span>
<span :class="['px-2 py-1 rounded-full text-xs', getStatusColorClass(activity?.status)]">
{{ activity?.status }}
</span>
</div>
<div>
<button class="p-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-pink-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
</svg>
</button>
</div>
</div>
<!-- Tab Navigation -->
<div class="border-b border-gray-200 px-4">
<div class="flex space-x-8">
<button
v-for="tab in ['活动信息', '参与人员', '活动说明']"
:key="tab"
@click="activeTab = tab"
:class="[
'pb-3 font-medium',
activeTab === tab
? 'text-green-600 border-b-2 border-green-600'
: 'text-gray-500'
]"
>
{{ tab }}
</button>
</div>
</div>
<!-- Tab Content -->
<div class="px-4 py-4">
<div v-if="activeTab === '活动信息'">
<!-- Activity Details -->
<FrostedGlass class="p-4 mb-4 rounded-xl">
<div class="space-y-4">
<div class="flex items-start">
<div class="p-2 rounded-full bg-green-100 mr-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<div class="flex-1">
<p class="font-medium">活动地点</p>
<p class="text-gray-600 text-sm mt-1">{{ activity?.location }}</p>
</div>
</div>
<div class="flex items-start">
<div class="p-2 rounded-full bg-blue-100 mr-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
<div class="flex-1">
<p class="font-medium">活动时间</p>
<p class="text-gray-600 text-sm mt-1">{{ activity?.period }}</p>
<p class="text-xs text-gray-500 mt-1">每周六、日 10:00-12:00</p>
</div>
</div>
<div class="flex items-start">
<div class="p-2 rounded-full bg-purple-100 mr-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
<div class="flex-1">
<p class="font-medium">参与人数</p>
<p class="text-gray-600 text-sm mt-1">{{ activity?.participantsCount }}人 / 上限{{ activity?.maxParticipants }}人</p>
<div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
<div class="bg-green-600 h-1.5 rounded-full" :style="{ width: (activity?.participantsCount / activity?.maxParticipants * 100) + '%' }"></div>
</div>
</div>
</div>
<div class="flex items-start">
<div class="p-2 rounded-full bg-orange-100 mr-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div class="flex-1">
<p class="font-medium">活动费用</p>
<p class="text-gray-600 text-sm mt-1">¥{{ activity?.price }}/人（包含材料费、场地费）</p>
</div>
</div>
</div>
</FrostedGlass>
<!-- Activity Description -->
<FrostedGlass class="p-4 mb-4 rounded-xl">
<h2 class="text-lg font-semibold mb-3">活动介绍</h2>
<p class="text-gray-700 whitespace-pre-line">
{{ activity?.title }} 是一个精心设计的亲子互动活动，旨在增强家长与孩子之间的沟通与理解。
通过一系列有趣的游戏和学习环节，让孩子在轻松愉快的氛围中学习知识，培养良好的学习习惯和价值观。同时，也给予家长更多指导和支持，帮助他们更好地理解孩子的需求和成长过程。
活动特色：
- 专业导师全程引导
- 互动性强，参与感高
- 寓教于乐，收获满满
- 结交志同道合的家庭
</p>
</FrostedGlass>
</div>
<div v-if="activeTab === '参与人员'">
<FrostedGlass class="p-4 rounded-xl">
<h2 class="text-lg font-semibold mb-3">活动参与者</h2>
<div class="grid grid-cols-4 gap-4">
<div v-for="index in 12" :key="index" class="flex flex-col items-center">
<div class="w-14 h-14 rounded-full bg-gray-200 overflow-hidden mb-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-full w-full text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
</div>
<span class="text-xs text-gray-600">用户{{ index }}</span>
</div>
</div>
<div class="mt-4 flex justify-center">
<button class="text-green-600 text-sm">
查看全部参与者
</button>
</div>
</FrostedGlass>
</div>
<div v-if="activeTab === '活动说明'">
<FrostedGlass class="p-4 rounded-xl">
<h2 class="text-lg font-semibold mb-3">活动说明</h2>
<div class="space-y-4 text-gray-700">
<div>
<h3 class="font-medium mb-1">适合人群</h3>
<p class="text-sm">5-12岁儿童及其家长</p>
</div>
<div>
<h3 class="font-medium mb-1">注意事项</h3>
<ul class="text-sm list-disc pl-5 space-y-1">
<li>请提前15分钟到达活动地点</li>
<li>携带必要的学习用具（铅笔、彩笔等）</li>
<li>穿着舒适的衣物</li>
<li>如需取消报名，请提前48小时通知我们</li>
</ul>
</div>
<div>
<h3 class="font-medium mb-1">活动流程</h3>
<ol class="text-sm list-decimal pl-5 space-y-1">
<li>签到入场（15分钟）</li>
<li>活动介绍与热身（20分钟）</li>
<li>主题活动（60分钟）</li>
<li>小组分享（30分钟）</li>
<li>总结与合影（15分钟）</li>
</ol>
</div>
</div>
</FrostedGlass>
</div>
</div>
<!-- Related Activities -->
<div class="px-4 py-2">
<h2 class="text-lg font-semibold mb-3">相关活动</h2>
<div class="space-y-3">
<div
v-for="relatedActivity in relatedActivities"
:key="relatedActivity.id"
class="flex items-center bg-white/80 p-2 rounded-lg shadow-sm"
@click="navigateTo(`/activities/${relatedActivity.id}`)"
>
<div class="w-16 h-16 rounded-lg overflow-hidden mr-3">
<img
:src="relatedActivity.imageUrl"
:alt="relatedActivity.title"
class="w-full h-full object-cover"
/>
</div>
<div class="flex-1">
<h3 class="font-medium line-clamp-1">{{ relatedActivity.title }}</h3>
<p class="text-xs text-gray-500 mt-1">
{{ relatedActivity.period }}
</p>
</div>
</div>
</div>
</div>
</div>
</AppLayout>
</template>