Initial project commit
This commit is contained in:
@@ -0,0 +1,297 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import { createEvent, updateEvent, getEventDetail } from "@/api/event";
|
||||
import { uploadImage } from "@/api/spot";
|
||||
import { resolveImageUrl } from "@/utils/image";
|
||||
|
||||
const isEdit = ref(false);
|
||||
const editId = ref(0);
|
||||
const submitting = ref(false);
|
||||
|
||||
const form = ref({
|
||||
title: "",
|
||||
city: "",
|
||||
description: "",
|
||||
cover_url: "",
|
||||
location_name: "",
|
||||
start_date: "",
|
||||
start_time: "10:00",
|
||||
end_date: "",
|
||||
end_time: "18:00",
|
||||
max_participants: 0,
|
||||
});
|
||||
|
||||
const coverPreview = ref("");
|
||||
|
||||
async function chooseCover() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: async (res) => {
|
||||
const path = res.tempFilePaths[0];
|
||||
try {
|
||||
uni.showLoading({ title: "上传中..." });
|
||||
const uploadRes = await uploadImage(path);
|
||||
form.value.cover_url = uploadRes.url || uploadRes.path;
|
||||
coverPreview.value = resolveImageUrl(form.value.cover_url);
|
||||
uni.showToast({ title: "上传成功", icon: "success" });
|
||||
} catch (e) {
|
||||
uni.showToast({ title: "上传失败", icon: "none" });
|
||||
} finally {
|
||||
uni.hideLoading();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function validate() {
|
||||
if (!form.value.title.trim()) {
|
||||
uni.showToast({ title: "请输入活动标题", icon: "none" });
|
||||
return false;
|
||||
}
|
||||
if (!form.value.city.trim()) {
|
||||
uni.showToast({ title: "请输入城市", icon: "none" });
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function buildDateTime(date, time) {
|
||||
if (!date) return null;
|
||||
return new Date(`${date}T${time || "00:00"}:00`).toISOString();
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!validate()) return;
|
||||
submitting.value = true;
|
||||
|
||||
const data = {
|
||||
title: form.value.title.trim(),
|
||||
city: form.value.city.trim(),
|
||||
description: form.value.description.trim() || null,
|
||||
cover_url: form.value.cover_url || null,
|
||||
location_name: form.value.location_name.trim() || null,
|
||||
max_participants: Number(form.value.max_participants) || 0,
|
||||
start_time: buildDateTime(form.value.start_date, form.value.start_time),
|
||||
end_time: buildDateTime(form.value.end_date, form.value.end_time),
|
||||
};
|
||||
|
||||
try {
|
||||
if (isEdit.value) {
|
||||
await updateEvent(editId.value, data);
|
||||
uni.showToast({ title: "更新成功", icon: "success" });
|
||||
} else {
|
||||
await createEvent(data);
|
||||
uni.showToast({ title: "发布成功，等待审核", icon: "success" });
|
||||
}
|
||||
setTimeout(() => uni.navigateBack(), 1200);
|
||||
} catch (e) {
|
||||
uni.showToast({ title: e.message || "提交失败", icon: "none" });
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadForEdit(id) {
|
||||
try {
|
||||
const d = await getEventDetail(id);
|
||||
form.value.title = d.title || "";
|
||||
form.value.city = d.city || "";
|
||||
form.value.description = d.description || "";
|
||||
form.value.cover_url = d.cover_url || "";
|
||||
form.value.location_name = d.location_name || "";
|
||||
form.value.max_participants = d.max_participants || 0;
|
||||
if (d.cover_url) coverPreview.value = resolveImageUrl(d.cover_url);
|
||||
if (d.start_time) {
|
||||
const st = new Date(d.start_time);
|
||||
form.value.start_date = st.toISOString().substring(0, 10);
|
||||
form.value.start_time = `${String(st.getHours()).padStart(2, "0")}:${String(st.getMinutes()).padStart(2, "0")}`;
|
||||
}
|
||||
if (d.end_time) {
|
||||
const et = new Date(d.end_time);
|
||||
form.value.end_date = et.toISOString().substring(0, 10);
|
||||
form.value.end_time = `${String(et.getHours()).padStart(2, "0")}:${String(et.getMinutes()).padStart(2, "0")}`;
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({ title: "加载失败", icon: "none" });
|
||||
}
|
||||
}
|
||||
|
||||
onLoad((query) => {
|
||||
if (query.id) {
|
||||
isEdit.value = true;
|
||||
editId.value = Number(query.id);
|
||||
uni.setNavigationBarTitle({ title: "编辑活动" });
|
||||
loadForEdit(editId.value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="create-page">
|
||||
<view class="form-card">
|
||||
<view class="cover-section" @tap="chooseCover">
|
||||
<image v-if="coverPreview" class="cover-preview" :src="coverPreview" mode="aspectFill" />
|
||||
<view v-else class="cover-placeholder">
|
||||
<uni-icons type="plusempty" size="32" color="#9ca3af" />
|
||||
<text class="cover-hint">添加封面图</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<text class="form-label required">活动标题</text>
|
||||
<input v-model="form.title" class="form-input" placeholder="如：外滩夜景约拍团" :maxlength="100" />
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<text class="form-label required">城市</text>
|
||||
<input v-model="form.city" class="form-input" placeholder="如：上海" :maxlength="50" />
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<text class="form-label">活动地点</text>
|
||||
<input v-model="form.location_name" class="form-input" placeholder="如：外滩观景平台" :maxlength="100" />
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<text class="form-label">开始日期</text>
|
||||
<picker mode="date" :value="form.start_date" @change="form.start_date = $event.detail.value">
|
||||
<view class="form-input picker-display">{{ form.start_date || "选择日期" }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">开始时间</text>
|
||||
<picker mode="time" :value="form.start_time" @change="form.start_time = $event.detail.value">
|
||||
<view class="form-input picker-display">{{ form.start_time }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<text class="form-label">结束日期</text>
|
||||
<picker mode="date" :value="form.end_date" @change="form.end_date = $event.detail.value">
|
||||
<view class="form-input picker-display">{{ form.end_date || "选择日期" }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="form-row">
|
||||
<text class="form-label">结束时间</text>
|
||||
<picker mode="time" :value="form.end_time" @change="form.end_time = $event.detail.value">
|
||||
<view class="form-input picker-display">{{ form.end_time }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<text class="form-label">人数限制</text>
|
||||
<input v-model="form.max_participants" class="form-input" type="number" placeholder="0表示不限" />
|
||||
</view>
|
||||
|
||||
<view class="form-row">
|
||||
<text class="form-label">活动详情</text>
|
||||
<textarea v-model="form.description" class="form-textarea" placeholder="描述活动内容、注意事项等" :maxlength="5000" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="submit-row">
|
||||
<view class="submit-btn" :class="{ disabled: submitting }" @tap="handleSubmit">
|
||||
{{ submitting ? "提交中..." : isEdit ? "保存修改" : "发布活动" }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.create-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f6fa;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
.form-card {
|
||||
background: #fff;
|
||||
margin: 16rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 12rpx 28rpx;
|
||||
}
|
||||
|
||||
.cover-section {
|
||||
margin: 16rpx 0;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cover-preview {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
}
|
||||
.cover-placeholder {
|
||||
width: 100%;
|
||||
height: 300rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f3f4f6;
|
||||
border: 2rpx dashed #d1d5db;
|
||||
border-radius: 16rpx;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.cover-hint {
|
||||
font-size: 26rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
padding: 20rpx 0;
|
||||
border-bottom: 1rpx solid #f3f4f6;
|
||||
}
|
||||
.form-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.form-label {
|
||||
font-size: 26rpx;
|
||||
color: #374151;
|
||||
margin-bottom: 10rpx;
|
||||
display: block;
|
||||
}
|
||||
.form-label.required::before {
|
||||
content: "* ";
|
||||
color: #ef4444;
|
||||
}
|
||||
.form-input {
|
||||
width: 100%;
|
||||
height: 72rpx;
|
||||
border: 1rpx solid #e5e7eb;
|
||||
border-radius: 12rpx;
|
||||
padding: 0 20rpx;
|
||||
font-size: 28rpx;
|
||||
box-sizing: border-box;
|
||||
line-height: 72rpx;
|
||||
}
|
||||
.picker-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #374151;
|
||||
}
|
||||
.form-textarea {
|
||||
width: 100%;
|
||||
min-height: 200rpx;
|
||||
border: 1rpx solid #e5e7eb;
|
||||
border-radius: 12rpx;
|
||||
padding: 16rpx 20rpx;
|
||||
font-size: 28rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.submit-row {
|
||||
padding: 20rpx 28rpx;
|
||||
}
|
||||
.submit-btn {
|
||||
text-align: center;
|
||||
padding: 24rpx 0;
|
||||
background: #6366f1;
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.submit-btn.disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,485 @@
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import {
|
||||
getEventDetail,
|
||||
registerEvent,
|
||||
cancelRegistration,
|
||||
cancelEvent,
|
||||
getRegistrations,
|
||||
addEventPhoto,
|
||||
} from "@/api/event";
|
||||
import { uploadImage } from "@/api/spot";
|
||||
import { resolveImageUrl } from "@/utils/image";
|
||||
|
||||
const detail = ref(null);
|
||||
const loading = ref(true);
|
||||
const eventId = ref(0);
|
||||
const isOwner = ref(false);
|
||||
const registrations = ref([]);
|
||||
const showRegistrations = ref(false);
|
||||
|
||||
const statusLabels = {
|
||||
upcoming: "即将开始",
|
||||
ongoing: "进行中",
|
||||
ended: "已结束",
|
||||
cancelled: "已取消",
|
||||
};
|
||||
const statusColors = {
|
||||
upcoming: "#6366f1",
|
||||
ongoing: "#22c55e",
|
||||
ended: "#9ca3af",
|
||||
cancelled: "#ef4444",
|
||||
};
|
||||
|
||||
async function loadDetail() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getEventDetail(eventId.value);
|
||||
detail.value = res;
|
||||
const userStr = uni.getStorageSync("userInfo");
|
||||
if (userStr) {
|
||||
try {
|
||||
const u = typeof userStr === "string" ? JSON.parse(userStr) : userStr;
|
||||
isOwner.value = u.id === res.creator?.id;
|
||||
} catch {}
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({ title: "加载失败", icon: "none" });
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRegister() {
|
||||
try {
|
||||
await registerEvent(eventId.value);
|
||||
uni.showToast({ title: "报名成功", icon: "success" });
|
||||
await loadDetail();
|
||||
} catch (e) {
|
||||
uni.showToast({ title: e.message || "报名失败", icon: "none" });
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCancelRegistration() {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "确定取消报名？",
|
||||
success: async (r) => {
|
||||
if (!r.confirm) return;
|
||||
try {
|
||||
await cancelRegistration(eventId.value);
|
||||
uni.showToast({ title: "已取消", icon: "success" });
|
||||
await loadDetail();
|
||||
} catch (e) {
|
||||
uni.showToast({ title: e.message || "操作失败", icon: "none" });
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function handleCancel() {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "确定取消活动？取消后将通知所有报名用户。",
|
||||
success: async (r) => {
|
||||
if (!r.confirm) return;
|
||||
try {
|
||||
await cancelEvent(eventId.value);
|
||||
uni.showToast({ title: "已取消", icon: "success" });
|
||||
await loadDetail();
|
||||
} catch (e) {
|
||||
uni.showToast({ title: e.message || "操作失败", icon: "none" });
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function loadRegistrations() {
|
||||
try {
|
||||
const res = await getRegistrations(eventId.value);
|
||||
registrations.value = Array.isArray(res) ? res : res.items || [];
|
||||
showRegistrations.value = true;
|
||||
} catch (e) {
|
||||
uni.showToast({ title: "无权查看", icon: "none" });
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUploadPhoto() {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: async (chooseRes) => {
|
||||
const tempPath = chooseRes.tempFilePaths[0];
|
||||
try {
|
||||
uni.showLoading({ title: "上传中..." });
|
||||
const uploadRes = await uploadImage(tempPath);
|
||||
const imageUrl = uploadRes.url || uploadRes.path;
|
||||
await addEventPhoto(eventId.value, { image_url: imageUrl });
|
||||
uni.showToast({ title: "上传成功", icon: "success" });
|
||||
await loadDetail();
|
||||
} catch (e) {
|
||||
uni.showToast({ title: "上传失败", icon: "none" });
|
||||
} finally {
|
||||
uni.hideLoading();
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function previewPhotos(idx) {
|
||||
const urls = (detail.value?.photos || []).map((p) => resolveImageUrl(p.image_url));
|
||||
uni.previewImage({ urls, current: urls[idx] || urls[0] });
|
||||
}
|
||||
|
||||
function formatDateTime(d) {
|
||||
if (!d) return "待定";
|
||||
const dt = new Date(d);
|
||||
return `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2, "0")}-${String(dt.getDate()).padStart(2, "0")} ${String(dt.getHours()).padStart(2, "0")}:${String(dt.getMinutes()).padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
const canRegister = computed(() => {
|
||||
if (!detail.value) return false;
|
||||
if (detail.value.status !== "upcoming") return false;
|
||||
if (detail.value.has_registered) return false;
|
||||
if (isOwner.value) return false;
|
||||
if (detail.value.max_participants > 0 && detail.value.registration_count >= detail.value.max_participants) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
onLoad((query) => {
|
||||
eventId.value = Number(query.id);
|
||||
loadDetail();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="detail-page">
|
||||
<view v-if="loading" class="loading-tip">加载中...</view>
|
||||
<template v-else-if="detail">
|
||||
<image
|
||||
v-if="detail.cover_url"
|
||||
class="cover-image"
|
||||
:src="resolveImageUrl(detail.cover_url)"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
|
||||
<view class="header-card">
|
||||
<view class="title-row">
|
||||
<text class="title">{{ detail.title }}</text>
|
||||
<view class="status-tag" :style="{ background: statusColors[detail.status] || '#9ca3af' }">
|
||||
{{ statusLabels[detail.status] || detail.status }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="creator-row" v-if="detail.creator">
|
||||
<text class="creator-nick">{{ detail.creator.nickname }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="info-card">
|
||||
<view class="info-row">
|
||||
<text class="info-label">城市</text>
|
||||
<text class="info-value">{{ detail.city }}</text>
|
||||
</view>
|
||||
<view class="info-row" v-if="detail.location_name">
|
||||
<text class="info-label">地点</text>
|
||||
<text class="info-value">{{ detail.location_name }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">开始时间</text>
|
||||
<text class="info-value">{{ formatDateTime(detail.start_time) }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">结束时间</text>
|
||||
<text class="info-value">{{ formatDateTime(detail.end_time) }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">人数限制</text>
|
||||
<text class="info-value">{{ detail.max_participants > 0 ? detail.max_participants + '人' : '不限' }}</text>
|
||||
</view>
|
||||
<view class="info-row">
|
||||
<text class="info-label">已报名</text>
|
||||
<text class="info-value">{{ detail.registration_count }}人</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="detail.description" class="desc-card">
|
||||
<text class="desc-title">活动详情</text>
|
||||
<text class="desc-text">{{ detail.description }}</text>
|
||||
</view>
|
||||
|
||||
<view v-if="detail.reject_reason" class="reject-card">
|
||||
<uni-icons type="info" size="16" color="#ef4444" />
|
||||
<text class="reject-text">驳回原因：{{ detail.reject_reason }}</text>
|
||||
</view>
|
||||
|
||||
<!-- Registration list for owner -->
|
||||
<view v-if="isOwner" class="section">
|
||||
<view class="section-header" @tap="loadRegistrations">
|
||||
<text class="section-title">报名列表</text>
|
||||
<uni-icons type="right" size="16" color="#6366f1" />
|
||||
</view>
|
||||
<view v-if="showRegistrations" class="reg-list">
|
||||
<view v-if="registrations.length === 0" class="reg-empty">暂无报名</view>
|
||||
<view v-for="reg in registrations" :key="reg.id" class="reg-item">
|
||||
<text class="reg-name">{{ reg.user?.nickname || '匿名' }}</text>
|
||||
<text class="reg-time">{{ formatDateTime(reg.created_at) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Photo album -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<text class="section-title">活动相册（{{ detail.photos?.length || 0 }}）</text>
|
||||
<view
|
||||
v-if="detail.has_registered || isOwner"
|
||||
class="upload-btn"
|
||||
@tap="handleUploadPhoto"
|
||||
>
|
||||
<uni-icons type="plusempty" size="14" color="#6366f1" />
|
||||
<text>上传</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="detail.photos && detail.photos.length > 0" class="photo-grid">
|
||||
<image
|
||||
v-for="(photo, idx) in detail.photos"
|
||||
:key="photo.id"
|
||||
class="photo-item"
|
||||
:src="resolveImageUrl(photo.image_url)"
|
||||
mode="aspectFill"
|
||||
@tap="previewPhotos(idx)"
|
||||
/>
|
||||
</view>
|
||||
<view v-else class="photo-empty">
|
||||
<text>暂无照片</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Bottom actions -->
|
||||
<view class="bottom-bar">
|
||||
<template v-if="isOwner">
|
||||
<view
|
||||
v-if="detail.status !== 'cancelled' && detail.status !== 'ended'"
|
||||
class="btn btn-cancel"
|
||||
@tap="handleCancel"
|
||||
>取消活动</view>
|
||||
<view
|
||||
class="btn btn-edit"
|
||||
@tap="uni.navigateTo({ url: `/pages/event/create?id=${detail.id}` })"
|
||||
v-if="detail.status === 'upcoming'"
|
||||
>编辑</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view v-if="canRegister" class="btn btn-register" @tap="handleRegister">
|
||||
我要报名
|
||||
</view>
|
||||
<view
|
||||
v-else-if="detail.has_registered"
|
||||
class="btn btn-unregister"
|
||||
@tap="handleCancelRegistration"
|
||||
>取消报名</view>
|
||||
<view v-else class="btn btn-disabled">
|
||||
{{ detail.status === 'cancelled' ? '已取消' : detail.status === 'ended' ? '已结束' : '人数已满' }}
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.detail-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f6fa;
|
||||
padding-bottom: 140rpx;
|
||||
}
|
||||
.loading-tip {
|
||||
text-align: center;
|
||||
padding: 100rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.cover-image {
|
||||
width: 100%;
|
||||
height: 360rpx;
|
||||
}
|
||||
|
||||
.header-card,
|
||||
.info-card,
|
||||
.desc-card,
|
||||
.reject-card,
|
||||
.section {
|
||||
background: #fff;
|
||||
margin: 16rpx 20rpx 0;
|
||||
border-radius: 20rpx;
|
||||
padding: 28rpx;
|
||||
}
|
||||
.title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
color: #1e1e2e;
|
||||
flex: 1;
|
||||
}
|
||||
.status-tag {
|
||||
font-size: 22rpx;
|
||||
color: #fff;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 20rpx;
|
||||
flex-shrink: 0;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
.creator-row {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
.creator-nick {
|
||||
font-size: 26rpx;
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 14rpx 0;
|
||||
border-bottom: 1rpx solid #f3f4f6;
|
||||
}
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.info-label {
|
||||
width: 160rpx;
|
||||
font-size: 26rpx;
|
||||
color: #9ca3af;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.info-value {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.desc-title,
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #1e1e2e;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.desc-text {
|
||||
font-size: 26rpx;
|
||||
color: #4b5563;
|
||||
line-height: 1.7;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.reject-card {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8rpx;
|
||||
background: #fef2f2;
|
||||
}
|
||||
.reject-text {
|
||||
font-size: 26rpx;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.upload-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6rpx;
|
||||
font-size: 24rpx;
|
||||
color: #6366f1;
|
||||
}
|
||||
.reg-list {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
.reg-empty {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #9ca3af;
|
||||
padding: 16rpx 0;
|
||||
}
|
||||
.reg-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12rpx 0;
|
||||
border-top: 1rpx solid #f3f4f6;
|
||||
}
|
||||
.reg-name {
|
||||
font-size: 26rpx;
|
||||
color: #1e1e2e;
|
||||
}
|
||||
.reg-time {
|
||||
font-size: 22rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.photo-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
.photo-item {
|
||||
width: calc(33.33% - 8rpx);
|
||||
height: 200rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
.photo-empty {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #9ca3af;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
padding: 20rpx 28rpx;
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
background: #fff;
|
||||
box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 22rpx 0;
|
||||
border-radius: 16rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.btn-register {
|
||||
background: #6366f1;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-unregister {
|
||||
background: #fef3c7;
|
||||
color: #d97706;
|
||||
}
|
||||
.btn-cancel {
|
||||
background: #fee2e2;
|
||||
color: #ef4444;
|
||||
}
|
||||
.btn-edit {
|
||||
background: #6366f1;
|
||||
color: #fff;
|
||||
}
|
||||
.btn-disabled {
|
||||
background: #e5e7eb;
|
||||
color: #9ca3af;
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,291 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
|
||||
import { getMyEvents, getMyRegistrations } from "@/api/event";
|
||||
|
||||
const tab = ref("created");
|
||||
const createdList = ref([]);
|
||||
const joinedList = ref([]);
|
||||
const createdPage = ref(1);
|
||||
const joinedPage = ref(1);
|
||||
const createdTotal = ref(0);
|
||||
const joinedTotal = ref(0);
|
||||
const createdFinished = ref(false);
|
||||
const joinedFinished = ref(false);
|
||||
const loading = ref(false);
|
||||
|
||||
const statusLabels = {
|
||||
upcoming: "即将开始",
|
||||
ongoing: "进行中",
|
||||
ended: "已结束",
|
||||
cancelled: "已取消",
|
||||
};
|
||||
const statusColors = {
|
||||
upcoming: "#6366f1",
|
||||
ongoing: "#22c55e",
|
||||
ended: "#9ca3af",
|
||||
cancelled: "#ef4444",
|
||||
};
|
||||
const auditLabels = {
|
||||
pending: "待审核",
|
||||
approved: "已通过",
|
||||
rejected: "已驳回",
|
||||
};
|
||||
const auditColors = {
|
||||
pending: "#f59e0b",
|
||||
approved: "#22c55e",
|
||||
rejected: "#ef4444",
|
||||
};
|
||||
|
||||
async function fetchCreated(reset = false) {
|
||||
if (loading.value) return;
|
||||
if (reset) {
|
||||
createdPage.value = 1;
|
||||
createdFinished.value = false;
|
||||
createdList.value = [];
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getMyEvents({ page: createdPage.value, page_size: 20 });
|
||||
const items = res.items || [];
|
||||
if (reset) createdList.value = items;
|
||||
else createdList.value.push(...items);
|
||||
createdTotal.value = res.total || 0;
|
||||
if (createdList.value.length >= createdTotal.value) createdFinished.value = true;
|
||||
createdPage.value++;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchJoined(reset = false) {
|
||||
if (loading.value) return;
|
||||
if (reset) {
|
||||
joinedPage.value = 1;
|
||||
joinedFinished.value = false;
|
||||
joinedList.value = [];
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await getMyRegistrations({ page: joinedPage.value, page_size: 20 });
|
||||
const items = res.items || [];
|
||||
if (reset) joinedList.value = items;
|
||||
else joinedList.value.push(...items);
|
||||
joinedTotal.value = res.total || 0;
|
||||
if (joinedList.value.length >= joinedTotal.value) joinedFinished.value = true;
|
||||
joinedPage.value++;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function switchTab(t) {
|
||||
tab.value = t;
|
||||
if (t === "created" && createdList.value.length === 0) fetchCreated(true);
|
||||
if (t === "joined" && joinedList.value.length === 0) fetchJoined(true);
|
||||
}
|
||||
|
||||
function goDetail(id) {
|
||||
uni.navigateTo({ url: `/pages/event/detail?id=${id}` });
|
||||
}
|
||||
|
||||
function formatDate(d) {
|
||||
if (!d) return "";
|
||||
const dt = new Date(d);
|
||||
return `${dt.getMonth() + 1}月${dt.getDate()}日`;
|
||||
}
|
||||
|
||||
onPullDownRefresh(async () => {
|
||||
if (tab.value === "created") await fetchCreated(true);
|
||||
else await fetchJoined(true);
|
||||
uni.stopPullDownRefresh();
|
||||
});
|
||||
|
||||
onReachBottom(() => {
|
||||
if (tab.value === "created" && !createdFinished.value) fetchCreated();
|
||||
if (tab.value === "joined" && !joinedFinished.value) fetchJoined();
|
||||
});
|
||||
|
||||
fetchCreated(true);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="mine-event-page">
|
||||
<view class="tabs">
|
||||
<view class="tab-item" :class="{ active: tab === 'created' }" @tap="switchTab('created')">
|
||||
我发布的
|
||||
</view>
|
||||
<view class="tab-item" :class="{ active: tab === 'joined' }" @tap="switchTab('joined')">
|
||||
我参加的
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="tab === 'created'" class="card-list">
|
||||
<view
|
||||
v-for="item in createdList"
|
||||
:key="item.id"
|
||||
class="ev-card"
|
||||
@tap="goDetail(item.id)"
|
||||
>
|
||||
<view class="card-title-row">
|
||||
<text class="card-title">{{ item.title }}</text>
|
||||
<view class="dual-tags">
|
||||
<view class="mini-tag" :style="{ background: auditColors[item.audit_status] || '#9ca3af' }">
|
||||
{{ auditLabels[item.audit_status] || item.audit_status }}
|
||||
</view>
|
||||
<view class="mini-tag" :style="{ background: statusColors[item.status] || '#9ca3af' }">
|
||||
{{ statusLabels[item.status] || item.status }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-sub">
|
||||
<text>{{ item.city }}</text>
|
||||
<text v-if="item.location_name"> · {{ item.location_name }}</text>
|
||||
</view>
|
||||
<view class="card-bottom">
|
||||
<text class="card-date">{{ formatDate(item.start_time) }}</text>
|
||||
<text class="reg-count">{{ item.registration_count }}人报名</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="loading" class="loading-tip">加载中...</view>
|
||||
<view v-else-if="createdFinished && createdList.length" class="loading-tip">没有更多了</view>
|
||||
<view v-else-if="!loading && !createdList.length" class="empty-tip">
|
||||
<uni-icons type="info" size="40" color="#d1d5db" />
|
||||
<text>还没有发布活动</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="tab === 'joined'" class="card-list">
|
||||
<view
|
||||
v-for="reg in joinedList"
|
||||
:key="reg.id"
|
||||
class="ev-card"
|
||||
@tap="goDetail(reg.event_id)"
|
||||
>
|
||||
<view class="card-title-row">
|
||||
<text class="card-title">活动 #{{ reg.event_id }}</text>
|
||||
<view class="mini-tag" style="background: #22c55e">{{ reg.status === 'registered' ? '已报名' : reg.status }}</view>
|
||||
</view>
|
||||
<view class="card-bottom">
|
||||
<text class="card-date">{{ formatDate(reg.created_at) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="loading" class="loading-tip">加载中...</view>
|
||||
<view v-else-if="joinedFinished && joinedList.length" class="loading-tip">没有更多了</view>
|
||||
<view v-else-if="!loading && !joinedList.length" class="empty-tip">
|
||||
<uni-icons type="info" size="40" color="#d1d5db" />
|
||||
<text>还没有参加活动</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mine-event-page {
|
||||
min-height: 100vh;
|
||||
background: #f5f6fa;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-bottom: 1rpx solid #e5e7eb;
|
||||
}
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 24rpx 0;
|
||||
font-size: 28rpx;
|
||||
color: #6b7280;
|
||||
position: relative;
|
||||
}
|
||||
.tab-item.active {
|
||||
color: #6366f1;
|
||||
font-weight: 600;
|
||||
}
|
||||
.tab-item.active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 30%;
|
||||
right: 30%;
|
||||
bottom: 0;
|
||||
height: 4rpx;
|
||||
background: #6366f1;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
.ev-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx 28rpx;
|
||||
margin-top: 16rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
.card-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #1e1e2e;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dual-tags {
|
||||
display: flex;
|
||||
gap: 8rpx;
|
||||
flex-shrink: 0;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
.mini-tag {
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
padding: 2rpx 12rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.card-sub {
|
||||
font-size: 24rpx;
|
||||
color: #6b7280;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.card-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
.card-date {
|
||||
font-size: 22rpx;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.reg-count {
|
||||
font-size: 22rpx;
|
||||
color: #6366f1;
|
||||
}
|
||||
|
||||
.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