660 行
16 KiB
Vue
660 行
16 KiB
Vue
<template>
|
||
<view class="activity-container" :class="{ 'theme-warm': currentThemeKey === 'warm' }">
|
||
<!-- 顶部模式切换选项卡 (矢量SVG模式图标) -->
|
||
<view class="tab-header">
|
||
<view
|
||
class="tab-item btn-active"
|
||
:class="{ active: currentTab === 'ALL' }"
|
||
@click="switchTab('ALL')"
|
||
>
|
||
<text class="tab-text">全部活动</text>
|
||
<view class="tab-indicator" v-if="currentTab === 'ALL'"></view>
|
||
</view>
|
||
<view
|
||
class="tab-item btn-active"
|
||
:class="{ active: currentTab === 'AA' }"
|
||
@click="switchTab('AA')"
|
||
>
|
||
<image class="tab-svg" :src="ICONS.bolt" mode="aspectFit" />
|
||
<text class="tab-text">AA制拼桌</text>
|
||
<view class="tab-indicator" v-if="currentTab === 'AA'"></view>
|
||
</view>
|
||
<view
|
||
class="tab-item btn-active"
|
||
:class="{ active: currentTab === 'PROJECT' }"
|
||
@click="switchTab('PROJECT')"
|
||
>
|
||
<image class="tab-svg" :src="ICONS.gameTrophy" mode="aspectFit" />
|
||
<text class="tab-text">房主请客</text>
|
||
<view class="tab-indicator" v-if="currentTab === 'PROJECT'"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 核心品类快捷筛选胶囊栏 (陪吃·陪唱·陪喝) -->
|
||
<view class="category-capsule-bar">
|
||
<view
|
||
class="capsule-item btn-active"
|
||
:class="{ active: currentCategory === 'ALL' }"
|
||
@click="switchCategory('ALL')"
|
||
>
|
||
<text class="capsule-text">全部品类</text>
|
||
</view>
|
||
<view
|
||
class="capsule-item btn-active"
|
||
:class="{ active: currentCategory === 'MEAL' }"
|
||
@click="switchCategory('MEAL')"
|
||
>
|
||
<image class="capsule-svg" :src="ICONS.utensils" mode="aspectFit" />
|
||
<text class="capsule-text">美食陪吃</text>
|
||
</view>
|
||
<view
|
||
class="capsule-item btn-active"
|
||
:class="{ active: currentCategory === 'SING' }"
|
||
@click="switchCategory('SING')"
|
||
>
|
||
<image class="capsule-svg" :src="ICONS.micVocal" mode="aspectFit" />
|
||
<text class="capsule-text">同城陪唱</text>
|
||
</view>
|
||
<view
|
||
class="capsule-item btn-active"
|
||
:class="{ active: currentCategory === 'DRINK' }"
|
||
@click="switchCategory('DRINK')"
|
||
>
|
||
<image class="capsule-svg" :src="ICONS.coffee" mode="aspectFit" />
|
||
<text class="capsule-text">下午茶陪喝</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 顶部状态小提示 (矢量盾牌图标) -->
|
||
<view class="tips-bar">
|
||
<image class="tips-svg" :src="ICONS.shield" mode="aspectFit" />
|
||
<text class="tips-text">AA制聚会人均费用透明平摊，项目制为房主全额请客或悬赏组局，凭4位门票码现场核销</text>
|
||
</view>
|
||
|
||
<!-- 活动列表 -->
|
||
<view class="activity-list">
|
||
<view
|
||
v-for="act in filteredActivities"
|
||
:key="act.id"
|
||
class="activity-card card-active"
|
||
@click="goToDetail(act.id)"
|
||
>
|
||
<!-- 卡片头部 -->
|
||
<view class="card-header">
|
||
<view class="game-tag" :class="getCategoryTagClass(act.game)">{{ act.game }}</view>
|
||
<view class="mode-tag" :class="act.payType === 'AA' ? 'aa-mode' : 'project-mode'">
|
||
{{ act.payType === 'AA' ? 'AA制平摊' : '房主请客' }}
|
||
</view>
|
||
<view class="status-pill" :class="act.status">
|
||
{{ act.status === 'RECRUITING' ? '招募中' : '进行中' }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 卡片标题 -->
|
||
<view class="activity-title">{{ act.title }}</view>
|
||
|
||
<!-- 详细信息条 (矢量时钟与商圈位置) -->
|
||
<view class="meta-row">
|
||
<view class="meta-item">
|
||
<image class="meta-svg" :src="ICONS.clock" mode="aspectFit" />
|
||
<text class="meta-val">{{ act.startTime }}</text>
|
||
</view>
|
||
<view class="meta-item">
|
||
<image class="meta-svg" :src="ICONS.mapPin" mode="aspectFit" />
|
||
<text class="meta-val">{{ act.location }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 进度与头像 -->
|
||
<view class="progress-section">
|
||
<view class="progress-info">
|
||
<text class="progress-label">组局进度</text>
|
||
<text class="progress-count tabular-num">{{ act.currentParticipants }} / {{ act.maxParticipants }}人</text>
|
||
</view>
|
||
<view class="progress-track">
|
||
<view
|
||
class="progress-fill"
|
||
:style="{ width: (act.currentParticipants / act.maxParticipants * 100) + '%' }"
|
||
></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部房主与价格 -->
|
||
<view class="card-footer">
|
||
<view class="creator-info">
|
||
<image class="creator-avatar" :src="act.creatorAvatar" mode="aspectFill" />
|
||
<text class="creator-name">局长：{{ act.creatorNickname }}</text>
|
||
</view>
|
||
|
||
<view class="fee-info tabular-num">
|
||
<template v-if="act.payType === 'AA'">
|
||
<text class="fee-label">人均预估</text>
|
||
<text class="fee-amount">¥{{ act.aaFee }}</text>
|
||
</template>
|
||
<template v-else>
|
||
<text class="fee-label">房主请客</text>
|
||
<text class="fee-amount project-gold">¥{{ act.totalFee }}</text>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="filteredActivities.length === 0" class="empty-tip">
|
||
<text>暂无符合条件的组局活动，快来发起吧！</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 悬浮发起活动按钮 (脉冲微流光) -->
|
||
<view class="fab-btn btn-active" @click="createActivity">
|
||
<text class="fab-icon">＋</text>
|
||
<text class="fab-text">发起组局</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted, onUnmounted } from 'vue';
|
||
import { onShow } from '@dcloudio/uni-app';
|
||
import { ACTIVITIES_LIST } from '@/common/mock.js';
|
||
import { ICONS } from '@/common/icons.js';
|
||
import { getCurrentThemeKey, applyThemeToNativeUI } from '@/common/theme.js';
|
||
|
||
const activities = ref(ACTIVITIES_LIST);
|
||
const currentTab = ref('ALL');
|
||
const currentCategory = ref('ALL');
|
||
const currentThemeKey = ref(getCurrentThemeKey());
|
||
|
||
const onThemeChanged = (key) => {
|
||
currentThemeKey.value = key;
|
||
applyThemeToNativeUI(key);
|
||
};
|
||
|
||
onMounted(() => {
|
||
currentThemeKey.value = getCurrentThemeKey();
|
||
uni.$on('theme-change', onThemeChanged);
|
||
});
|
||
|
||
onShow(() => {
|
||
currentThemeKey.value = getCurrentThemeKey();
|
||
applyThemeToNativeUI(currentThemeKey.value);
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
uni.$off('theme-change', onThemeChanged);
|
||
});
|
||
|
||
const getCategoryTagClass = (game) => {
|
||
if (game === '美食陪吃') return 'tag-meal';
|
||
if (game === '同城陪唱') return 'tag-sing';
|
||
if (game === '下午茶陪喝' || game === '同城微醺') return 'tag-drink';
|
||
return '';
|
||
};
|
||
|
||
const filteredActivities = computed(() => {
|
||
return activities.value.filter(a => {
|
||
// 支付模式筛选
|
||
const matchTab = currentTab.value === 'ALL' || a.payType === currentTab.value;
|
||
// 品类筛选 (美食陪吃 / 同城陪唱 / 下午茶陪喝/微醺)
|
||
let matchCat = true;
|
||
if (currentCategory.value === 'MEAL') {
|
||
matchCat = a.game === '美食陪吃';
|
||
} else if (currentCategory.value === 'SING') {
|
||
matchCat = a.game === '同城陪唱';
|
||
} else if (currentCategory.value === 'DRINK') {
|
||
matchCat = a.game === '下午茶陪喝' || a.game === '同城微醺';
|
||
}
|
||
return matchTab && matchCat;
|
||
});
|
||
});
|
||
|
||
const switchTab = (tab) => {
|
||
currentTab.value = tab;
|
||
};
|
||
|
||
const switchCategory = (cat) => {
|
||
currentCategory.value = cat;
|
||
};
|
||
|
||
const goToDetail = (id) => {
|
||
uni.navigateTo({
|
||
url: `/pages/activity/detail?id=${id}`
|
||
});
|
||
};
|
||
|
||
const createActivity = () => {
|
||
uni.navigateTo({
|
||
url: '/pages/activity/create'
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.activity-container {
|
||
min-height: 100vh;
|
||
background-color: #0A0F1D;
|
||
padding: 20rpx 32rpx calc(180rpx + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
.tab-header {
|
||
display: flex;
|
||
background-color: #151D30;
|
||
border-radius: 20rpx;
|
||
padding: 8rpx;
|
||
margin-bottom: 24rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8rpx;
|
||
padding: 18rpx 0;
|
||
position: relative;
|
||
border-radius: 14rpx;
|
||
transition: all 0.2s ease;
|
||
|
||
.tab-svg {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
}
|
||
|
||
.tab-text {
|
||
font-size: 26rpx;
|
||
color: #94A3B8;
|
||
font-weight: 500;
|
||
}
|
||
|
||
&.active {
|
||
background: rgba(99, 102, 241, 0.18);
|
||
|
||
.tab-text {
|
||
color: #FFFFFF;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.tab-indicator {
|
||
position: absolute;
|
||
bottom: 4rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 32rpx;
|
||
height: 6rpx;
|
||
background: #6366F1;
|
||
border-radius: 3rpx;
|
||
box-shadow: 0 0 10rpx #6366F1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.category-capsule-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
margin-bottom: 24rpx;
|
||
overflow-x: auto;
|
||
white-space: nowrap;
|
||
|
||
.capsule-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
padding: 12rpx 24rpx;
|
||
background: #151D30;
|
||
border-radius: 30rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
transition: all 0.2s ease;
|
||
|
||
.capsule-svg {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
}
|
||
|
||
.capsule-text {
|
||
font-size: 24rpx;
|
||
color: #94A3B8;
|
||
font-weight: 500;
|
||
}
|
||
|
||
&.active {
|
||
background: rgba(99, 102, 241, 0.2);
|
||
border-color: #6366F1;
|
||
|
||
.capsule-text {
|
||
color: #FFFFFF;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tips-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgba(99, 102, 241, 0.08);
|
||
border: 1px solid rgba(99, 102, 241, 0.2);
|
||
border-radius: 12rpx;
|
||
padding: 12rpx 20rpx;
|
||
margin-bottom: 28rpx;
|
||
|
||
.tips-svg {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-right: 12rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.tips-text {
|
||
font-size: 22rpx;
|
||
color: #818CF8;
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
|
||
.activity-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
|
||
.empty-tip {
|
||
text-align: center;
|
||
padding: 60rpx 0;
|
||
font-size: 26rpx;
|
||
color: #64748B;
|
||
}
|
||
|
||
.activity-card {
|
||
background-color: #151D30;
|
||
border-radius: 24rpx;
|
||
padding: 28rpx;
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
margin-bottom: 16rpx;
|
||
|
||
.game-tag {
|
||
background: rgba(255, 255, 255, 0.08);
|
||
color: #E2E8F0;
|
||
font-size: 22rpx;
|
||
padding: 4rpx 14rpx;
|
||
border-radius: 8rpx;
|
||
|
||
&.tag-meal {
|
||
background: rgba(245, 158, 11, 0.15);
|
||
color: #FBBF24;
|
||
border: 1px solid rgba(245, 158, 11, 0.3);
|
||
}
|
||
&.tag-sing {
|
||
background: rgba(244, 63, 94, 0.15);
|
||
color: #FB7185;
|
||
border: 1px solid rgba(244, 63, 94, 0.3);
|
||
}
|
||
&.tag-drink {
|
||
background: rgba(16, 185, 129, 0.15);
|
||
color: #34D399;
|
||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||
}
|
||
}
|
||
|
||
.mode-tag {
|
||
font-size: 20rpx;
|
||
padding: 4rpx 14rpx;
|
||
border-radius: 8rpx;
|
||
font-weight: 600;
|
||
|
||
&.aa-mode {
|
||
background: rgba(16, 185, 129, 0.15);
|
||
color: #10B981;
|
||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||
}
|
||
&.project-mode {
|
||
background: rgba(245, 158, 11, 0.15);
|
||
color: #F59E0B;
|
||
border: 1px solid rgba(245, 158, 11, 0.3);
|
||
}
|
||
}
|
||
|
||
.status-pill {
|
||
margin-left: auto;
|
||
font-size: 20rpx;
|
||
padding: 4rpx 14rpx;
|
||
border-radius: 12rpx;
|
||
|
||
&.RECRUITING {
|
||
background: rgba(99, 102, 241, 0.2);
|
||
color: #818CF8;
|
||
}
|
||
&.RUNNING {
|
||
background: rgba(16, 185, 129, 0.2);
|
||
color: #10B981;
|
||
}
|
||
}
|
||
}
|
||
|
||
.activity-title {
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: #F8FAFC;
|
||
line-height: 1.4;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.meta-row {
|
||
display: flex;
|
||
gap: 28rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.meta-item {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
|
||
.meta-svg {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 8rpx;
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
}
|
||
|
||
.progress-section {
|
||
margin-bottom: 24rpx;
|
||
|
||
.progress-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 10rpx;
|
||
font-size: 22rpx;
|
||
|
||
.progress-label {
|
||
color: #64748B;
|
||
}
|
||
.progress-count {
|
||
color: #10B981;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.progress-track {
|
||
height: 10rpx;
|
||
background: rgba(255, 255, 255, 0.08);
|
||
border-radius: 5rpx;
|
||
overflow: hidden;
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, #10B981, #059669);
|
||
border-radius: 5rpx;
|
||
box-shadow: 0 0 10rpx rgba(16, 185, 129, 0.5);
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
||
padding-top: 18rpx;
|
||
|
||
.creator-info {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.creator-avatar {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
border-radius: 24rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
.creator-name {
|
||
font-size: 22rpx;
|
||
color: #94A3B8;
|
||
}
|
||
}
|
||
|
||
.fee-info {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 8rpx;
|
||
|
||
.fee-label {
|
||
font-size: 20rpx;
|
||
color: #64748B;
|
||
}
|
||
.fee-amount {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #10B981;
|
||
|
||
&.project-gold {
|
||
color: #F59E0B;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.fab-btn {
|
||
position: fixed;
|
||
right: 36rpx;
|
||
bottom: calc(140rpx + env(safe-area-inset-bottom));
|
||
background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
|
||
border-radius: 44rpx;
|
||
padding: 18rpx 34rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
box-shadow: 0 8rpx 28rpx rgba(99, 102, 241, 0.55);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
z-index: 100;
|
||
animation: fabPulse 3s infinite ease-in-out;
|
||
|
||
.fab-icon {
|
||
font-size: 32rpx;
|
||
color: #FFF;
|
||
font-weight: 700;
|
||
margin-right: 8rpx;
|
||
}
|
||
.fab-text {
|
||
font-size: 26rpx;
|
||
color: #FFF;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 481px) {
|
||
.fab-btn {
|
||
right: calc(50% - 225px + 36rpx);
|
||
bottom: calc(140rpx + 20px);
|
||
}
|
||
}
|
||
|
||
@keyframes fabPulse {
|
||
0%, 100% { box-shadow: 0 8rpx 24rpx rgba(99, 102, 241, 0.45); }
|
||
50% { box-shadow: 0 8rpx 36rpx rgba(99, 102, 241, 0.75); }
|
||
}
|
||
|
||
.activity-container.theme-warm {
|
||
background-color: #FDFBF7;
|
||
|
||
.tab-header {
|
||
background-color: #FFFFFF;
|
||
border-color: #F0ECE4;
|
||
box-shadow: 0 4rpx 16rpx rgba(28, 25, 23, 0.04);
|
||
|
||
.tab-item {
|
||
.tab-text {
|
||
color: #78716C;
|
||
}
|
||
&.active {
|
||
background: rgba(234, 88, 12, 0.1);
|
||
|
||
.tab-text {
|
||
color: #EA580C;
|
||
font-weight: 700;
|
||
}
|
||
.tab-indicator {
|
||
background: #EA580C;
|
||
box-shadow: 0 0 10rpx rgba(234, 88, 12, 0.4);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.category-capsule-bar {
|
||
.capsule-item {
|
||
background: #FFFFFF;
|
||
border: 1px solid #F0ECE4;
|
||
.capsule-text {
|
||
color: #57534E;
|
||
}
|
||
&.active {
|
||
background: linear-gradient(135deg, #F97316, #EA580C);
|
||
box-shadow: 0 4rpx 14rpx rgba(234, 88, 12, 0.35);
|
||
.capsule-text {
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tips-bar {
|
||
background: rgba(234, 88, 12, 0.08);
|
||
border-color: rgba(234, 88, 12, 0.2);
|
||
.tips-text {
|
||
color: #EA580C;
|
||
}
|
||
}
|
||
|
||
.activity-list .activity-card {
|
||
background-color: #FFFFFF;
|
||
border-color: #F0ECE4;
|
||
box-shadow: 0 6rpx 20rpx rgba(28, 25, 23, 0.05);
|
||
|
||
.activity-title {
|
||
color: #1C1917;
|
||
}
|
||
.meta-row .meta-item {
|
||
color: #78716C;
|
||
}
|
||
.card-footer {
|
||
border-top-color: #F5F2EC;
|
||
.creator-name {
|
||
color: #78716C;
|
||
}
|
||
}
|
||
}
|
||
|
||
.fab-btn {
|
||
background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
|
||
box-shadow: 0 8rpx 28rpx rgba(234, 88, 12, 0.4);
|
||
}
|
||
}
|
||
</style>
|