Initial project commit
This commit is contained in:
@@ -0,0 +1,306 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
|
||||
import { getEventList } from "@/api/event";
|
||||
import { resolveImageUrl } from "@/utils/image";
|
||||
|
||||
const list = ref([]);
|
||||
const page = ref(1);
|
||||
const total = ref(0);
|
||||
const loading = ref(false);
|
||||
const finished = ref(false);
|
||||
const city = ref("");
|
||||
const statusFilter = ref("");
|
||||
|
||||
const statusLabels = {
|
||||
upcoming: "即将开始",
|
||||
ongoing: "进行中",
|
||||
ended: "已结束",
|
||||
cancelled: "已取消",
|
||||
};
|
||||
const statusColors = {
|
||||
upcoming: "#6366f1",
|
||||
ongoing: "#22c55e",
|
||||
ended: "#9ca3af",
|
||||
cancelled: "#ef4444",
|
||||
};
|
||||
|
||||
const statusTabs = [
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "即将开始", value: "upcoming" },
|
||||
{ label: "进行中", value: "ongoing" },
|
||||
{ label: "已结束", value: "ended" },
|
||||
];
|
||||
|
||||
async function fetchList(reset = false) {
|
||||
if (loading.value) return;
|
||||
if (reset) {
|
||||
page.value = 1;
|
||||
finished.value = false;
|
||||
list.value = [];
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
const params = { page: page.value, page_size: 20 };
|
||||
if (city.value) params.city = city.value;
|
||||
if (statusFilter.value) params.status = statusFilter.value;
|
||||
|
||||
const res = await getEventList(params);
|
||||
const items = res.items || [];
|
||||
if (reset) list.value = items;
|
||||
else list.value.push(...items);
|
||||
total.value = res.total || 0;
|
||||
if (list.value.length >= total.value) finished.value = true;
|
||||
page.value++;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function switchStatus(val) {
|
||||
statusFilter.value = val;
|
||||
fetchList(true);
|
||||
}
|
||||
|
||||
function goDetail(id) {
|
||||
uni.navigateTo({ url: `/pages/event/detail?id=${id}` });
|
||||
}
|
||||
|
||||
function goCreate() {
|
||||
uni.navigateTo({ url: "/pages/event/create" });
|
||||
}
|
||||
|
||||
function formatDate(d) {
|
||||
if (!d) return "待定";
|
||||
const dt = new Date(d);
|
||||
return `${dt.getMonth() + 1}月${dt.getDate()}日 ${String(dt.getHours()).padStart(2, "0")}:${String(dt.getMinutes()).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function participantText(item) {
|
||||
if (item.max_participants > 0) return `${item.registration_count}/${item.max_participants}人`;
|
||||
return `${item.registration_count}人报名`;
|
||||
}
|
||||
|
||||
onPullDownRefresh(async () => {
|
||||
await fetchList(true);
|
||||
uni.stopPullDownRefresh();
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
if (!finished.value) fetchList();
|
||||
});
|
||||
|
||||
fetchList(true);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="event-page">
|
||||
<view class="top-bar">
|
||||
<view class="bar-left">
|
||||
<text class="bar-title">活动</text>
|
||||
</view>
|
||||
<view class="bar-btn primary" @tap="goCreate">
|
||||
<uni-icons type="plusempty" size="16" color="#fff" />
|
||||
<text>发布</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="status-tabs">
|
||||
<view
|
||||
v-for="tab in statusTabs"
|
||||
:key="tab.value"
|
||||
class="status-tab"
|
||||
:class="{ active: statusFilter === tab.value }"
|
||||
@tap="switchStatus(tab.value)"
|
||||
>{{ tab.label }}</view>
|
||||
</view>
|
||||
|
||||
<view class="card-list">
|
||||
<view
|
||||
v-for="item in list"
|
||||
:key="item.id"
|
||||
class="event-card"
|
||||
@tap="goDetail(item.id)"
|
||||
>
|
||||
<image
|
||||
v-if="item.cover_url"
|
||||
class="card-cover"
|
||||
:src="resolveImageUrl(item.cover_url)"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="card-body">
|
||||
<view class="card-title-row">
|
||||
<text class="card-title">{{ item.title }}</text>
|
||||
<view class="status-tag" :style="{ background: statusColors[item.status] || '#9ca3af' }">
|
||||
{{ statusLabels[item.status] || item.status }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<view class="info-item">
|
||||
<uni-icons type="location" size="14" color="#6366f1" />
|
||||
<text>{{ item.city }}</text>
|
||||
<text v-if="item.location_name"> · {{ item.location_name }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<uni-icons type="calendar" size="14" color="#6366f1" />
|
||||
<text>{{ formatDate(item.start_time) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-footer">
|
||||
<text class="creator-name" v-if="item.creator">{{ item.creator.nickname }}</text>
|
||||
<text class="participant-count">{{ participantText(item) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="loading" class="loading-tip">加载中...</view>
|
||||
<view v-else-if="finished && list.length > 0" class="loading-tip">没有更多了</view>
|
||||
<view v-else-if="!loading && list.length === 0" class="empty-tip">
|
||||
<uni-icons type="info" size="40" color="#d1d5db" />
|
||||
<text>暂无活动</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.event-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f6fa;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
.top-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20rpx 28rpx;
|
||||
background: #fff;
|
||||
}
|
||||
.bar-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #1e1e2e;
|
||||
}
|
||||
.bar-btn.primary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
border-radius: 32rpx;
|
||||
font-size: 24rpx;
|
||||
background: #6366f1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.status-tabs {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
padding: 0 20rpx;
|
||||
border-bottom: 1rpx solid #e5e7eb;
|
||||
}
|
||||
.status-tab {
|
||||
padding: 18rpx 24rpx;
|
||||
font-size: 26rpx;
|
||||
color: #6b7280;
|
||||
position: relative;
|
||||
}
|
||||
.status-tab.active {
|
||||
color: #6366f1;
|
||||
font-weight: 600;
|
||||
}
|
||||
.status-tab.active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 20%;
|
||||
right: 20%;
|
||||
bottom: 0;
|
||||
height: 4rpx;
|
||||
background: #6366f1;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.event-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
margin-top: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.card-cover {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
}
|
||||
.card-body {
|
||||
padding: 24rpx 28rpx;
|
||||
}
|
||||
.card-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #1e1e2e;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.status-tag {
|
||||
font-size: 22rpx;
|
||||
color: #fff;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
flex-shrink: 0;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
.card-info {
|
||||
margin-top: 12rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
}
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
font-size: 24rpx;
|
||||
color: #6b7280;
|
||||
}
|
||||
.card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
.creator-name {
|
||||
font-size: 24rpx;
|
||||
color: #6366f1;
|
||||
}
|
||||
.participant-count {
|
||||
font-size: 22rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.loading-tip {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #9ca3af;
|
||||
padding: 30rpx 0;
|
||||
}
|
||||
.empty-tip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
padding: 120rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user