c-chengc1/hmc_gbhd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

..

Browse Source
This commit is contained in:
那些花儿
2025-04-28 15:32:41 +08:00
parent cb3bcb57bc
commit 12c3afb4a6
42 changed files with 3272 additions and 1627 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/activity/list/index.vue
+58 -197
View File
@@ -1,6 +1,5 @@
<template>
<view class="page-container">
<!-- 顶部搜索和筛选 -->
<view class="header">
<view class="search-container">
<t-search
@@ -8,65 +7,66 @@
placeholder="搜索活动名称"
shape="round"
class="search-input"
@search="handleSearch"
@onSearch="handleSearch"
/>
</view>
<!-- 状态筛选标签组 -->
<view class="filter-tabs">
<scroll-view scroll-x class="tabs-scroll-view" :show-scrollbar="false">
<view class="tabs-container">
<view
v-for="option in statusOptions"
:key="option.value"
class="filter-tab"
:class="{ active: pageForm.status === option.value }"
@click="selectStatusFilter(option.value)"
>
{{ option.label }}
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 活动列表 - 使用scroll-view实现 -->
<scroll-view
scroll-y
class="list-scroll-view"
@scrolltolower="handleScrollToBottom"
refresher-enabled
:refresher-triggered="refresherTriggered"
@refresherrefresh="handleRefresh"
refresher-background="#f2f3f5"
<scroll-view
scroll-y
class="list-scroll-view"
@scrolltolower="handleScrollToBottom"
refresher-enabled
:refresher-triggered="refresherTriggered"
@refresherrefresh="handleRefresh"
refresher-background="#f2f3f5"
>
<view class="list-container">
<view
class="activity-card"
class="card-item"
v-for="item in dataList"
:key="item.id"
@click="navigateToDetail(item.id)"
>
<view class="image-container">
<image :src="item.cover" mode="aspectFill" class="activity-image"/>
<view class="activity-time">
{{ formatTimeRange(item.startTime, item.endTime) }}
</view>
<view class="status-tag-container">
<t-tag
:theme="getTagTheme(getActivityStatus(item))"
size="medium"
shape="mark"
>{{ getStatusText(getActivityStatus(item)) }}
</t-tag>
</view>
</view>
<view class="activity-info">
<text class="activity-title">{{ item.title }}</text>
<view class="activity-address">
<t-icon name="location" size="small"/>
<text>{{ item.address || '暂无地址信息' }}</text>
<view>
<view style="display: flex;align-items: center;margin-bottom: 10px">
<image
src="https://assets.cumen.fun/upload/017cdaf1-c5fa-788e-eea2-d0ee249f902b/0187376a-3cfa-07b3-3cd6-7479bf463865?x-oss-process=style/720-jpg"
style="width: 30px;height: 30px;flex-shrink: 0"
></image>
<view
style="margin-left: 10px;font-weight: 600;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
{{ item.title }}
</view>
</view>
<view style="display: flex;">
<image :src="item.cover" mode="aspectFill" style="flex-shrink:0;width: 120px;height: 90px;border-radius: 5px;"></image>
<view
style="margin-left:10px;flex:1;overflow:hidden;display: flex;flex-direction: column;justify-content:space-around;color: #534d4d;">
<view
style="display: flex; align-items: center; column-gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<t-icon name="time"></t-icon>
{{ moment(item.startTime).format('MM-DD') }}
</view>
<view style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<t-icon name="location"></t-icon>
{{ item.address }}
</view>
<view style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<t-icon name="castle-7"></t-icon>
{{ item.address }}
</view>
</view>
</view>
<view style="border-top: 1px solid #f0f0f0;margin-top: 10px;padding-top: 12px;display: flex;align-items: center;justify-content: space-between">
<view>
100人已报名
</view>
<!-- <image src="https://assets.cumen.fun/upload/017cdaf1-c5fa-788e-eea2-d0ee249f902b/01892580-5db0-be0b-5643-35d6c5a83591"-->
<!-- style="width: 105px;height: 40px"-->
<!-- ></image>-->
<t-button theme="primary" shape="round" size="small">立即报名</t-button>
</view>
</view>
</view>
@@ -89,8 +89,6 @@
<script setup>
import {ref, reactive, onMounted} from 'vue';
// 移除不再需要的onReachBottom和onPullDownRefresh
// import {onReachBottom, onPullDownRefresh} from "@dcloudio/uni-app";
import {Toast} from 'tdesign-mobile-vue';
import {useRequest} from "@/utils/request";
import moment from "moment";
@@ -118,57 +116,8 @@ const pageForm = reactive({
const dataList = ref([]);
const loading = ref(false);
const hasMore = ref(true);
// 添加下拉刷新状态
const refresherTriggered = ref(false);
// 获取活动状态
const getActivityStatus = (item) => {
const now = moment();
const signStartTime = moment(item.signStartTime);
const signEndTime = moment(item.signEndTime);
const activityStartTime = moment(item.startTime);
const activityEndTime = moment(item.endTime);
if (now.isBefore(signStartTime)) {
return 'notStartSign'; // 未开始报名
} else if (now.isBetween(signStartTime, signEndTime)) {
return 'signing'; // 报名中
} else if (now.isBetween(signEndTime, activityStartTime)) {
return 'notStartActivity'; // 活动未开始
} else if (now.isBetween(activityStartTime, activityEndTime)) {
return 'activitying'; // 活动进行中
} else {
return 'ended'; // 已结束
}
};
// 获取状态文本
const getStatusText = (status) => {
return {
'notStartSign': '未开始报名',
'signing': '报名中',
'notStartActivity': '活动未开始',
'activitying': '活动进行中',
'ended': '已结束'
}[status] || '未知状态';
};
// 获取标签主题
const getTagTheme = (status) => {
return {
'notStartSign': 'primary',
'signing': 'success',
'notStartActivity': 'warning',
'activitying': 'info',
'ended': 'default'
}[status] || 'default';
};
// 格式化时间范围
const formatTimeRange = (startTime, endTime) => {
return `${moment(startTime).format('MM-DD')} ~ ${moment(endTime).format('MM-DD')}`;
};
// 选择状态筛选
const selectStatusFilter = (status) => {
pageForm.status = status;
@@ -221,13 +170,13 @@ const getListData = async (isRefresh = false) => {
}
};
// scroll-view 下拉刷新
//下拉刷新
const handleRefresh = () => {
if (loading.value) {
refresherTriggered.value = false;
return;
}
refresherTriggered.value = true;
pageForm.pageNumber = 1;
getListData(true);
@@ -241,7 +190,7 @@ const handleSearch = () => {
getListData(true);
};
// scroll-view 触底加载更多
// 触底加载更多
const handleScrollToBottom = () => {
if (loading.value || !hasMore.value) return;
getListData();
@@ -276,38 +225,6 @@ onMounted(() => {
width: 100%;
}
.filter-tabs {
margin-top: 20rpx;
padding: 0 12rpx;
}
.tabs-scroll-view {
white-space: nowrap;
width: 100%;
}
.tabs-container {
display: inline-flex;
padding: 0 12rpx;
}
.filter-tab {
display: inline-block;
padding: 10rpx 24rpx;
margin: 0 12rpx;
font-size: 26rpx;
color: #666;
background-color: #f5f5f5;
border-radius: 48rpx;
transition: all 0.3s;
&.active {
color: #fff;
background-color: var(--td-brand-color);
font-weight: 500;
}
}
.list-scroll-view {
flex: 1;
height: 0;
@@ -319,82 +236,26 @@ onMounted(() => {
padding: 20rpx 24rpx;
}
.activity-card {
.card-item {
width: 100%;
margin-bottom: 24rpx;
background-color: #fff;
border-radius: 16rpx;
padding: 24rpx;
overflow: hidden;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
transition: transform 0.3s;
//background: url("https://assets.cumen.fun/upload/017cdaf1-c5fa-788e-eea2-d0ee249f902b/0189257e-fc75-5b89-b900-104c706f2d63") top / 100% auto no-repeat,
//linear-gradient(to right, white, #ecb5b5);
//background: no-repeat, linear-gradient(to right, white, #f6d4d4);
background: #ffffff;
&:active {
transform: scale(0.98);
}
}
.image-container {
position: relative;
height: 360rpx;
overflow: hidden;
}
.activity-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s;
.activity-card:hover & {
transform: scale(1.05);
}
}
.activity-time {
position: absolute;
left: 16rpx;
bottom: 16rpx;
padding: 6rpx 16rpx;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 22rpx;
border-radius: 6rpx;
}
.activity-info {
padding: 20rpx 24rpx 10rpx;
}
.activity-title {
width: 100%;
font-size: 32rpx;
font-weight: 500;
color: #333;
line-height: 1.4;
display: block;
}
.activity-address {
display: flex;
align-items: center;
font-size: 26rpx;
color: #666;
margin-top: 12rpx;
}
.activity-address :deep(.t-icon) {
margin-right: 8rpx;
color: #999;
}
.status-tag-container {
position: absolute;
right: 0;
top: 16rpx;
}
.loading-container {
padding: 40rpx 0;
text-align: center;
}
</style>