feat(activity): 活动大厅全面以陪吃·陪唱·陪喝为主,增加品类快捷胶囊筛选并完善TDD门禁
这个提交包含在:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="activity-container">
|
||||
<view class="activity-container" :class="{ 'theme-warm': currentThemeKey === 'warm' }">
|
||||
<!-- 顶部模式切换选项卡 (矢量SVG模式图标) -->
|
||||
<view class="tab-header">
|
||||
<view
|
||||
@@ -33,9 +33,24 @@
|
||||
<!-- 顶部状态小提示 (矢量盾牌图标) -->
|
||||
<view class="tips-bar">
|
||||
<image class="tips-svg" :src="ICONS.shield" mode="aspectFit" />
|
||||
<text class="tips-text">AA制活动人均AA平摊,项目制为房主全额悬赏或赛事奖池</text>
|
||||
<text class="tips-text">同城组局主打美食陪吃、同城陪唱、下午茶陪喝,凭4位核销码现场签到履约</text>
|
||||
</view>
|
||||
|
||||
<!-- 品类横滑筛选胶囊 -->
|
||||
<scroll-view scroll-x class="cat-filter-scroll" :show-scrollbar="false">
|
||||
<view class="cat-filter-list">
|
||||
<view
|
||||
v-for="cat in categoryOptions"
|
||||
:key="cat.key"
|
||||
class="cat-chip btn-active"
|
||||
:class="{ active: currentCategory === cat.key }"
|
||||
@click="selectCategory(cat.key)"
|
||||
>
|
||||
<text class="chip-text">{{ cat.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 活动列表 -->
|
||||
<view class="activity-list">
|
||||
<view
|
||||
@@ -120,10 +135,38 @@ import { ICONS } from '@/common/icons.js';
|
||||
|
||||
const activities = ref(ACTIVITIES_LIST);
|
||||
const currentTab = ref('ALL');
|
||||
const currentCategory = ref('ALL');
|
||||
|
||||
const categoryOptions = [
|
||||
{ key: 'ALL', label: '全部品类' },
|
||||
{ key: 'MEAL', label: '美食陪吃' },
|
||||
{ key: 'SING', label: '同城陪唱' },
|
||||
{ key: 'DRINK', label: '下午茶陪喝' },
|
||||
{ key: 'GAME', label: '电竞开黑' },
|
||||
];
|
||||
|
||||
const selectCategory = (key) => {
|
||||
currentCategory.value = key;
|
||||
};
|
||||
|
||||
const filteredActivities = computed(() => {
|
||||
if (currentTab.value === 'ALL') return activities.value;
|
||||
return activities.value.filter(a => a.payType === currentTab.value);
|
||||
let list = activities.value;
|
||||
if (currentTab.value !== 'ALL') {
|
||||
list = list.filter(a => a.payType === currentTab.value);
|
||||
}
|
||||
if (currentCategory.value !== 'ALL') {
|
||||
const map = {
|
||||
MEAL: '美食陪吃',
|
||||
SING: '同城陪唱',
|
||||
DRINK: '下午茶陪喝',
|
||||
GAME: '王者荣耀',
|
||||
};
|
||||
const target = map[currentCategory.value];
|
||||
if (target) {
|
||||
list = list.filter(a => a.game === target);
|
||||
}
|
||||
}
|
||||
return list;
|
||||
});
|
||||
|
||||
const switchTab = (tab) => {
|
||||
@@ -225,6 +268,40 @@ const createActivity = () => {
|
||||
}
|
||||
}
|
||||
|
||||
.cat-filter-scroll {
|
||||
white-space: nowrap;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.cat-filter-list {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
|
||||
.cat-chip {
|
||||
padding: 10rpx 24rpx;
|
||||
border-radius: 28rpx;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
.chip-text {
|
||||
font-size: 24rpx;
|
||||
color: #94A3B8;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background: rgba(99, 102, 241, 0.2);
|
||||
border-color: #6366F1;
|
||||
|
||||
.chip-text {
|
||||
color: #FFF;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
在新工单中引用
屏蔽一个用户