428 lines
11 KiB
Vue
428 lines
11 KiB
Vue
<script setup>
|
|
import { ref, computed } from "vue";
|
|
import { onPullDownRefresh, onReachBottom, onShow } from "@dcloudio/uni-app";
|
|
import {
|
|
getShootingList,
|
|
getMyShootings,
|
|
getMyApplications,
|
|
} from "@/api/shooting";
|
|
import { getEventList, getMyEvents, getMyRegistrations } from "@/api/event";
|
|
import { checkLogin } from "@/utils/auth";
|
|
|
|
const tabs = [
|
|
{ key: "shooting_plaza", label: "约拍广场", type: "shooting", mine: false },
|
|
{ key: "shooting_mine", label: "我的约拍", type: "shooting", mine: true },
|
|
{ key: "event_plaza", label: "活动广场", type: "event", mine: false },
|
|
{ key: "event_mine", label: "我的活动", type: "event", mine: true },
|
|
];
|
|
|
|
const activeTab = ref("shooting_plaza");
|
|
|
|
const shootingPlaza = ref({ list: [], page: 1, total: 0, finished: false, loading: false });
|
|
const shootingMine = ref({ list: [], page: 1, total: 0, finished: false, loading: false });
|
|
const eventPlaza = ref({ list: [], page: 1, total: 0, finished: false, loading: false });
|
|
const eventMine = ref({ list: [], page: 1, total: 0, finished: false, loading: false });
|
|
|
|
const stateMap = {
|
|
shooting_plaza: shootingPlaza,
|
|
shooting_mine: shootingMine,
|
|
event_plaza: eventPlaza,
|
|
event_mine: eventMine,
|
|
};
|
|
|
|
const currentState = computed(() => stateMap[activeTab.value].value);
|
|
const currentItems = computed(() => currentState.value.list || []);
|
|
const isCurrentLoading = computed(() => currentState.value.loading);
|
|
const isCurrentFinished = computed(() => currentState.value.finished);
|
|
const currentTabMeta = computed(() => tabs.find((t) => t.key === activeTab.value));
|
|
|
|
const shootingStatusLabels = {
|
|
open: "招募中",
|
|
matched: "已匹配",
|
|
closed: "已关闭",
|
|
};
|
|
const shootingStatusColors = {
|
|
open: "#22c55e",
|
|
matched: "#f59e0b",
|
|
closed: "#9ca3af",
|
|
};
|
|
|
|
const eventStatusLabels = {
|
|
upcoming: "即将开始",
|
|
ongoing: "进行中",
|
|
ended: "已结束",
|
|
cancelled: "已取消",
|
|
};
|
|
const eventStatusColors = {
|
|
upcoming: "#6366f1",
|
|
ongoing: "#22c55e",
|
|
ended: "#9ca3af",
|
|
cancelled: "#ef4444",
|
|
};
|
|
|
|
const roleLabels = {
|
|
photographer: "找摄影",
|
|
cosplayer: "找Coser",
|
|
both: "不限",
|
|
};
|
|
|
|
function formatDateTime(val) {
|
|
if (!val) return "时间待定";
|
|
const dt = new Date(val);
|
|
const y = dt.getFullYear();
|
|
const m = String(dt.getMonth() + 1).padStart(2, "0");
|
|
const d = String(dt.getDate()).padStart(2, "0");
|
|
const hh = String(dt.getHours()).padStart(2, "0");
|
|
const mm = String(dt.getMinutes()).padStart(2, "0");
|
|
return `${y}-${m}-${d} ${hh}:${mm}`;
|
|
}
|
|
|
|
function formatBudget(item) {
|
|
if (item.is_free) return "互免";
|
|
if (item.budget_min && item.budget_max) return `￥${item.budget_min}-${item.budget_max}`;
|
|
if (item.budget_min) return `￥${item.budget_min}起`;
|
|
if (item.budget_max) return `￥${item.budget_max}以内`;
|
|
return "面议";
|
|
}
|
|
|
|
function ensureLoginForMineTab() {
|
|
if (!currentTabMeta.value?.mine) return true;
|
|
return checkLogin();
|
|
}
|
|
|
|
async function fetchTab(tabKey, reset = false) {
|
|
const stateRef = stateMap[tabKey];
|
|
const state = stateRef.value;
|
|
if (state.loading) return;
|
|
if (!reset && state.finished) return;
|
|
|
|
const tabMeta = tabs.find((t) => t.key === tabKey);
|
|
if (tabMeta?.mine && !checkLogin()) return;
|
|
|
|
if (reset) {
|
|
state.page = 1;
|
|
state.total = 0;
|
|
state.finished = false;
|
|
state.list = [];
|
|
}
|
|
|
|
state.loading = true;
|
|
try {
|
|
const params = { page: state.page, page_size: 20 };
|
|
let res;
|
|
|
|
if (tabKey === "shooting_plaza") {
|
|
params.status = "open";
|
|
res = await getShootingList(params);
|
|
} else if (tabKey === "shooting_mine") {
|
|
const [mineRes, applyRes] = await Promise.all([
|
|
getMyShootings(params),
|
|
getMyApplications({ page: 1, page_size: 5 }),
|
|
]);
|
|
const mixed = [...(mineRes.items || [])];
|
|
if (state.page === 1) {
|
|
(applyRes.items || []).forEach((app) => {
|
|
mixed.push({
|
|
id: `applied_${app.id}`,
|
|
_application: true,
|
|
request_id: app.request_id,
|
|
title: `我报名的约拍 #${app.request_id}`,
|
|
city: "",
|
|
status: app.status,
|
|
created_at: app.created_at,
|
|
message: app.message,
|
|
});
|
|
});
|
|
}
|
|
res = { items: mixed, total: (mineRes.total || 0) + (state.page === 1 ? (applyRes.items || []).length : 0) };
|
|
} else if (tabKey === "event_plaza") {
|
|
res = await getEventList(params);
|
|
} else {
|
|
const [mineRes, regRes] = await Promise.all([
|
|
getMyEvents(params),
|
|
getMyRegistrations({ page: 1, page_size: 5 }),
|
|
]);
|
|
const mixed = [...(mineRes.items || [])];
|
|
if (state.page === 1) {
|
|
(regRes.items || []).forEach((reg) => {
|
|
mixed.push({
|
|
id: `joined_${reg.id}`,
|
|
_registration: true,
|
|
event_id: reg.event_id,
|
|
title: `我参加的活动 #${reg.event_id}`,
|
|
city: "",
|
|
status: reg.status,
|
|
created_at: reg.created_at,
|
|
});
|
|
});
|
|
}
|
|
res = { items: mixed, total: (mineRes.total || 0) + (state.page === 1 ? (regRes.items || []).length : 0) };
|
|
}
|
|
|
|
const items = res.items || [];
|
|
if (reset) state.list = items;
|
|
else state.list.push(...items);
|
|
|
|
state.total = res.total || 0;
|
|
state.finished = items.length < 20 || state.list.length >= state.total;
|
|
state.page += 1;
|
|
} catch (err) {
|
|
console.error(err);
|
|
} finally {
|
|
state.loading = false;
|
|
}
|
|
}
|
|
|
|
function switchTab(key) {
|
|
activeTab.value = key;
|
|
if (!ensureLoginForMineTab()) return;
|
|
if (stateMap[key].value.list.length === 0) {
|
|
fetchTab(key, true);
|
|
}
|
|
}
|
|
|
|
function goCreate() {
|
|
if (currentTabMeta.value?.type === "shooting") {
|
|
uni.navigateTo({ url: "/pages/shooting/create" });
|
|
return;
|
|
}
|
|
uni.navigateTo({ url: "/pages/event/create" });
|
|
}
|
|
|
|
function goDetail(item) {
|
|
if (item._application) {
|
|
uni.navigateTo({ url: `/pages/shooting/detail?id=${item.request_id}` });
|
|
return;
|
|
}
|
|
if (item._registration) {
|
|
uni.navigateTo({ url: `/pages/event/detail?id=${item.event_id}` });
|
|
return;
|
|
}
|
|
if (currentTabMeta.value?.type === "shooting") {
|
|
uni.navigateTo({ url: `/pages/shooting/detail?id=${item.id}` });
|
|
return;
|
|
}
|
|
uni.navigateTo({ url: `/pages/event/detail?id=${item.id}` });
|
|
}
|
|
|
|
onShow(() => {
|
|
if (stateMap[activeTab.value].value.list.length === 0) {
|
|
fetchTab(activeTab.value, true);
|
|
}
|
|
});
|
|
|
|
onPullDownRefresh(async () => {
|
|
await fetchTab(activeTab.value, true);
|
|
uni.stopPullDownRefresh();
|
|
});
|
|
|
|
onReachBottom(() => {
|
|
fetchTab(activeTab.value);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<view class="activity-page">
|
|
<view class="page-header">
|
|
<text class="page-title">活动</text>
|
|
<view class="create-btn" @tap="goCreate">
|
|
<uni-icons type="plusempty" size="16" color="#fff" />
|
|
<text>发布</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="tabs">
|
|
<view
|
|
v-for="tab in tabs"
|
|
:key="tab.key"
|
|
class="tab-item"
|
|
:class="{ active: activeTab === tab.key }"
|
|
@tap="switchTab(tab.key)"
|
|
>
|
|
{{ tab.label }}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="list-wrap">
|
|
<view
|
|
v-for="item in currentItems"
|
|
:key="item.id"
|
|
class="card"
|
|
@tap="goDetail(item)"
|
|
>
|
|
<view class="card-top">
|
|
<text class="card-title">{{ item.title }}</text>
|
|
<view
|
|
class="status"
|
|
:style="{
|
|
background: currentTabMeta.type === 'shooting'
|
|
? (shootingStatusColors[item.status] || '#9ca3af')
|
|
: (eventStatusColors[item.status] || '#9ca3af')
|
|
}"
|
|
>
|
|
{{ currentTabMeta.type === "shooting" ? (shootingStatusLabels[item.status] || item.status) : (eventStatusLabels[item.status] || item.status) }}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card-row" v-if="item.city">
|
|
<uni-icons type="location" size="14" color="#6366f1" />
|
|
<text>{{ item.city }}</text>
|
|
</view>
|
|
|
|
<view class="card-row" v-if="currentTabMeta.type === 'shooting' && item.role_needed">
|
|
<uni-icons type="person" size="14" color="#6366f1" />
|
|
<text>{{ roleLabels[item.role_needed] || item.role_needed }}</text>
|
|
<text class="dot">·</text>
|
|
<text>{{ formatBudget(item) }}</text>
|
|
</view>
|
|
|
|
<view class="card-row" v-if="item.message">
|
|
<uni-icons type="chat" size="14" color="#6366f1" />
|
|
<text class="line1">{{ item.message }}</text>
|
|
</view>
|
|
|
|
<view class="card-bottom">
|
|
<text>{{ formatDateTime(item.start_time || item.shoot_date || item.created_at) }}</text>
|
|
<text v-if="currentTabMeta.type === 'shooting' && !item._application">{{ item.application_count || 0 }}人报名</text>
|
|
<text v-if="currentTabMeta.type === 'event' && !item._registration">{{ item.registration_count || 0 }}人报名</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="isCurrentLoading" class="status-tip">加载中...</view>
|
|
<view v-else-if="isCurrentFinished && currentItems.length" class="status-tip">没有更多了</view>
|
|
<view v-else-if="!isCurrentLoading && !currentItems.length" class="empty-tip">
|
|
<uni-icons type="info" size="40" color="#d1d5db" />
|
|
<text>暂无内容</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.activity-page {
|
|
min-height: 100vh;
|
|
background: #f5f6fa;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
.page-header {
|
|
background: #fff;
|
|
padding: 20rpx 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.page-title {
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
color: #1e1e2e;
|
|
}
|
|
.create-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6rpx;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 32rpx;
|
|
background: #6366f1;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
}
|
|
.tabs {
|
|
display: flex;
|
|
background: #fff;
|
|
border-top: 1rpx solid #f1f5f9;
|
|
border-bottom: 1rpx solid #e5e7eb;
|
|
}
|
|
.tab-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 20rpx 0;
|
|
font-size: 26rpx;
|
|
color: #6b7280;
|
|
position: relative;
|
|
}
|
|
.tab-item.active {
|
|
color: #6366f1;
|
|
font-weight: 600;
|
|
}
|
|
.tab-item.active::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 26%;
|
|
right: 26%;
|
|
bottom: 0;
|
|
height: 4rpx;
|
|
background: #6366f1;
|
|
border-radius: 4rpx;
|
|
}
|
|
.list-wrap {
|
|
padding: 0 20rpx;
|
|
}
|
|
.card {
|
|
background: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 24rpx 28rpx;
|
|
margin-top: 16rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
}
|
|
.card-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12rpx;
|
|
}
|
|
.card-title {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #1e1e2e;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.status {
|
|
font-size: 22rpx;
|
|
color: #fff;
|
|
padding: 4rpx 14rpx;
|
|
border-radius: 16rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
.card-row {
|
|
margin-top: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6rpx;
|
|
color: #6b7280;
|
|
font-size: 24rpx;
|
|
}
|
|
.dot {
|
|
margin: 0 4rpx;
|
|
}
|
|
.line1 {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.card-bottom {
|
|
margin-top: 12rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 22rpx;
|
|
color: #9ca3af;
|
|
}
|
|
.status-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>
|