3597 lines
99 KiB
Vue
3597 lines
99 KiB
Vue
<template>
|
||
<div class="activity-manage">
|
||
<van-nav-bar
|
||
:title="activity.title"
|
||
left-arrow
|
||
@click-left="$router.back()"
|
||
>
|
||
<template #right>
|
||
<van-icon name="edit" @click="editActivity" />
|
||
</template>
|
||
</van-nav-bar>
|
||
|
||
<van-tabs v-model:active="activeTab" color="#FF6700" title-active-color="#FF6700">
|
||
<van-tab title="基本信息" name="info">
|
||
<div class="tab-content">
|
||
<!-- 统计摘要 -->
|
||
<div class="info-stats">
|
||
<div class="stat-box">
|
||
<van-icon name="bill-o" color="#FF6700" />
|
||
<div class="stat-text">
|
||
<div class="stat-num">¥{{ totalExpense }}</div>
|
||
<div class="stat-desc">总支出</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-box">
|
||
<van-icon name="friends-o" color="#f5576c" />
|
||
<div class="stat-text">
|
||
<div class="stat-num">{{ registrations.length }}</div>
|
||
<div class="stat-desc">报名人数</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-box">
|
||
<van-icon name="photo-o" color="#00f2fe" />
|
||
<div class="stat-text">
|
||
<div class="stat-num">{{ approvedPhotos.length + pendingPhotos.length }}</div>
|
||
<div class="stat-desc">媒体数量</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-box">
|
||
<van-icon name="clock-o" color="#ffa940" />
|
||
<div class="stat-text">
|
||
<div class="stat-num">{{ registrations.filter(r => r.status === 'pending').length + pendingPhotos.length }}</div>
|
||
<div class="stat-desc">待审核</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 基本信息 -->
|
||
<van-cell-group>
|
||
<van-cell title="活动标题" :value="activity.title" />
|
||
<van-cell title="人均费用" :value="activity.price ? `¥${activity.price}` : '免费'" />
|
||
<van-cell title="活动预算" :value="activity.budget ? `¥${activity.budget}` : '未设置'" />
|
||
<van-cell title="活动地点" :value="activity.location" />
|
||
<van-cell title="开始时间" :value="formatDate(activity.startTime)" />
|
||
<van-cell title="报名截止" :value="formatDate(activity.registrationDeadline)" />
|
||
<van-cell title="状态" :value="activity.status === 'upcoming' ? '进行中' : '已结束'" />
|
||
<van-cell title="报名开关" center>
|
||
<template #right-icon>
|
||
<van-switch
|
||
v-model="activity.registrationEnabled"
|
||
size="24px"
|
||
@change="toggleRegistration"
|
||
active-color="#FF6700"
|
||
/>
|
||
</template>
|
||
</van-cell>
|
||
<van-cell title="弹幕开关" center>
|
||
<template #right-icon>
|
||
<van-switch
|
||
v-model="activity.danmakuEnabled"
|
||
size="24px"
|
||
@change="toggleDanmaku"
|
||
active-color="#d4af37"
|
||
/>
|
||
</template>
|
||
</van-cell>
|
||
<van-cell title="活动描述" :label="activity.description" />
|
||
</van-cell-group>
|
||
</div>
|
||
</van-tab>
|
||
|
||
<van-tab title="经费管理" name="expenses">
|
||
<div class="tab-content">
|
||
<!-- 经费统计 -->
|
||
<div class="info-stats">
|
||
<div class="stat-box">
|
||
<van-icon name="balance-pay" color="#FF6700" />
|
||
<div class="stat-text">
|
||
<div class="stat-num">¥{{ totalExpense }}</div>
|
||
<div class="stat-desc">总支出</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-box">
|
||
<van-icon name="balance-o" color="#07c160" />
|
||
<div class="stat-text">
|
||
<div class="stat-num">¥{{ activity.budget || '0' }}</div>
|
||
<div class="stat-desc">预算</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-box">
|
||
<van-icon name="chart-trending-o" :color="activity.budget && totalExpense > activity.budget ? '#ee0a24' : '#ffa940'" />
|
||
<div class="stat-text">
|
||
<div class="stat-num" :style="{ color: activity.budget && totalExpense > activity.budget ? '#ee0a24' : '#333' }">
|
||
{{ activity.budget ? ((totalExpense / activity.budget) * 100).toFixed(1) : '0' }}%
|
||
</div>
|
||
<div class="stat-desc">使用率</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-box">
|
||
<van-icon name="records" color="#f5576c" />
|
||
<div class="stat-text">
|
||
<div class="stat-num">{{ expenses.length }}</div>
|
||
<div class="stat-desc">经费项</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="expense-list">
|
||
<div v-for="expense in expenses" :key="expense.id" class="expense-item">
|
||
<div class="expense-icon" :style="{ background: getCategoryStyle(expense.category).gradient }">
|
||
<van-icon :name="getCategoryStyle(expense.category).icon" />
|
||
</div>
|
||
<div class="expense-content">
|
||
<div class="expense-name">{{ expense.item }}</div>
|
||
<div class="expense-meta">
|
||
<span class="expense-cat">{{ expense.category }}</span>
|
||
<span v-if="expense.note" class="expense-note">{{ expense.note }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="expense-right">
|
||
<div class="expense-amount">¥{{ expense.amount }}</div>
|
||
<div class="expense-actions">
|
||
<van-icon name="edit" @click="editExpense(expense)" />
|
||
<van-icon name="delete-o" @click="deleteExpenseItem(expense.id)" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 悬浮添加按钮 -->
|
||
<div class="float-add-btn" @click="addNewExpense">
|
||
<van-icon name="plus" />
|
||
</div>
|
||
</div>
|
||
</van-tab>
|
||
|
||
<van-tab title="赞助商" name="sponsors">
|
||
<div class="tab-content">
|
||
<div class="sponsor-list">
|
||
<div v-for="sponsor in sponsors" :key="sponsor.id" class="sponsor-card">
|
||
<div class="sponsor-logo-wrapper">
|
||
<div class="sponsor-logo" :style="sponsor.logo ? { backgroundImage: `url(${getImageUrl(sponsor.logo)})` } : {}">
|
||
<van-icon v-if="!sponsor.logo" name="shop-o" />
|
||
</div>
|
||
</div>
|
||
<div class="sponsor-details">
|
||
<div class="sponsor-header">
|
||
<span class="sponsor-name">{{ sponsor.name }}</span>
|
||
<span class="sponsor-badge" :class="sponsor.type === 'title' ? 'badge-title' : 'badge-sponsor'">
|
||
{{ sponsor.type === 'title' ? '冠名' : '赞助' }}
|
||
</span>
|
||
</div>
|
||
<div class="sponsor-meta">
|
||
<span class="sponsor-sort">排序: {{ sponsor.sortOrder || 0 }}</span>
|
||
<div v-if="sponsor.link" class="sponsor-link">
|
||
<van-icon name="link-o" />
|
||
<span>{{ sponsor.link }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sponsor-ops">
|
||
<van-icon name="edit" @click="editSponsor(sponsor)" />
|
||
<van-icon name="delete-o" @click="deleteSponsorItem(sponsor.id)" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<van-empty v-if="!sponsors.length" description="暂无赞助商" />
|
||
|
||
<!-- 悬浮添加按钮 -->
|
||
<div class="float-add-btn" @click="addNewSponsor">
|
||
<van-icon name="plus" />
|
||
</div>
|
||
</div>
|
||
</van-tab>
|
||
|
||
<van-tab title="奖品管理" name="prizes">
|
||
<div class="tab-content">
|
||
<div class="prize-list">
|
||
<div v-for="prize in prizes" :key="prize.id" class="prize-manage-card">
|
||
<div class="prize-image-wrapper">
|
||
<div class="prize-image" :style="prize.image ? { backgroundImage: `url(${getImageUrl(prize.image)})` } : {}">
|
||
<van-icon v-if="!prize.image" name="gift-o" size="30" />
|
||
</div>
|
||
</div>
|
||
<div class="prize-details">
|
||
<div class="prize-header">
|
||
<span class="prize-level-badge" :class="`level-${prize.level}`">{{ prize.level }}</span>
|
||
<span class="prize-name">{{ prize.name }}</span>
|
||
</div>
|
||
<div v-if="prize.description" class="prize-desc-text">{{ prize.description }}</div>
|
||
<div class="prize-meta">
|
||
<span class="prize-quantity-text">数量: {{ prize.quantity }}</span>
|
||
<span class="prize-sort">排序: {{ prize.sortOrder || 0 }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="prize-ops">
|
||
<van-icon name="edit" @click="editPrize(prize)" />
|
||
<van-icon name="delete-o" @click="deletePrizeItem(prize.id)" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<van-empty v-if="!prizes.length" description="暂无奖品" />
|
||
|
||
<!-- 悬浮添加按钮 -->
|
||
<div class="float-add-btn" @click="addNewPrize">
|
||
<van-icon name="plus" />
|
||
</div>
|
||
</div>
|
||
</van-tab>
|
||
|
||
<van-tab title="报名情况" name="registrations">
|
||
<div class="tab-content">
|
||
<!-- 统计栏 -->
|
||
<div class="info-stats reg-stats">
|
||
<div class="stat-box" :class="{ active: activeFilter === 'pending' }" @click="setFilter('pending')">
|
||
<van-icon name="clock-o" color="#ffa940" />
|
||
<div class="stat-text">
|
||
<div class="stat-num">{{ registrations.filter(r => r.status === 'pending').length }}</div>
|
||
<div class="stat-desc">待审核</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-box" :class="{ active: activeFilter === 'approved' }" @click="setFilter('approved')">
|
||
<van-icon name="passed" color="#07c160" />
|
||
<div class="stat-text">
|
||
<div class="stat-num">{{ registrations.filter(r => r.status === 'approved').length }}</div>
|
||
<div class="stat-desc">已通过</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-box">
|
||
<van-icon name="friends" color="#1989fa" />
|
||
<div class="stat-text">
|
||
<div class="stat-num">{{ approvedTotalPeople }}</div>
|
||
<div class="stat-desc">参与人数</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-box" :class="{ active: activeFilter === 'rejected' }" @click="setFilter('rejected')">
|
||
<van-icon name="close" color="#ee0a24" />
|
||
<div class="stat-text">
|
||
<div class="stat-num">{{ registrations.filter(r => r.status === 'rejected').length }}</div>
|
||
<div class="stat-desc">已拒绝</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-box" :class="{ active: activeFilter === 'all' }" @click="setFilter('all')">
|
||
<van-icon name="friends-o" color="#FF6700" />
|
||
<div class="stat-text">
|
||
<div class="stat-num">{{ registrations.length }}</div>
|
||
<div class="stat-desc">总报名</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-box" :class="{ active: activeFilter === 'checkedIn' }" @click="setFilter('checkedIn')">
|
||
<van-icon name="success" color="#07c160" />
|
||
<div class="stat-text">
|
||
<div class="stat-num">{{ registrations.filter(r => r.checkInStatus).length }}</div>
|
||
<div class="stat-desc">已签到</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-box" :class="{ active: activeFilter === 'notCheckedIn' }" @click="setFilter('notCheckedIn')">
|
||
<van-icon name="clock" color="#999" />
|
||
<div class="stat-text">
|
||
<div class="stat-num">{{ registrations.filter(r => !r.checkInStatus).length }}</div>
|
||
<div class="stat-desc">未签到</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-box" :class="{ active: activeFilter === 'grouped' }" @click="setFilter('grouped')">
|
||
<van-icon name="chat-o" color="#1989fa" />
|
||
<div class="stat-text">
|
||
<div class="stat-num">{{ registrations.filter(r => r.groupStatus).length }}</div>
|
||
<div class="stat-desc">已进群</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-box" :class="{ active: activeFilter === 'notGrouped' }" @click="setFilter('notGrouped')">
|
||
<van-icon name="comment-o" color="#999" />
|
||
<div class="stat-text">
|
||
<div class="stat-num">{{ registrations.filter(r => !r.groupStatus).length }}</div>
|
||
<div class="stat-desc">未进群</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 搜索框 -->
|
||
<div class="search-box">
|
||
<van-search
|
||
v-model="regSearchKeyword"
|
||
placeholder="搜索手机号或车牌号"
|
||
@search="onRegSearch"
|
||
@clear="onRegSearchClear"
|
||
/>
|
||
</div>
|
||
|
||
<div class="reg-list">
|
||
<div v-for="reg in filteredRegistrations" :key="reg.id" class="reg-item" :class="{ 'checked-in': reg.checkInStatus, 'status-approved': reg.status === 'approved', 'status-rejected': reg.status === 'rejected' }" @click="showRegDetail(reg)">
|
||
<div class="reg-left">
|
||
<div class="reg-avatar">{{ reg.name ? reg.name.charAt(0) : '?' }}</div>
|
||
<div class="reg-main">
|
||
<div class="reg-top">
|
||
<span class="reg-name">{{ reg.name || '未知' }}</span>
|
||
</div>
|
||
<div class="reg-info">
|
||
<a :href="`tel:${reg.phone}`" class="info-link" @click.stop>
|
||
<van-icon name="phone-o" />{{ reg.phone }}
|
||
</a>
|
||
<span v-if="reg.carNumber" class="info-text car-number" @click.stop="copyCarNumber(reg.carNumber)">
|
||
<van-icon name="certificate" />{{ reg.carNumber }}
|
||
</span>
|
||
<span class="info-text people-count">
|
||
<van-icon name="friends-o" />{{ reg.peopleCount || 1 }}人
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reg-right">
|
||
<div class="status-indicators">
|
||
<div
|
||
class="status-dot"
|
||
:class="{
|
||
'status-approved': reg.status === 'approved',
|
||
'status-rejected': reg.status === 'rejected',
|
||
'status-pending': reg.status === 'pending'
|
||
}"
|
||
:title="reg.status === 'approved' ? '已审核' : reg.status === 'rejected' ? '已拒绝' : '待审核'"
|
||
>
|
||
<van-icon v-if="reg.status === 'approved'" name="passed" />
|
||
<van-icon v-else-if="reg.status === 'rejected'" name="close" />
|
||
<van-icon v-else name="clock-o" />
|
||
</div>
|
||
<div
|
||
class="status-dot"
|
||
:class="{ 'status-active': reg.checkInStatus }"
|
||
:title="reg.checkInStatus ? '已签到' : '未签到'"
|
||
>
|
||
<van-icon name="location" />
|
||
</div>
|
||
<div
|
||
class="status-dot"
|
||
:class="{ 'status-active': reg.groupStatus }"
|
||
:title="reg.groupStatus ? '已进群' : '未进群'"
|
||
>
|
||
<van-icon name="chat-o" />
|
||
</div>
|
||
</div>
|
||
<van-icon name="arrow" color="#ccc" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<van-empty v-if="filteredRegistrations.length === 0" :description="regSearchKeyword ? '未找到匹配的报名' : '暂无报名'" />
|
||
|
||
<!-- 悬浮添加按钮 -->
|
||
<div class="float-add-btn" @click="addNewRegistration">
|
||
<van-icon name="plus" />
|
||
</div>
|
||
</div>
|
||
</van-tab>
|
||
|
||
<van-tab title="媒体管理" name="media">
|
||
<div class="tab-content">
|
||
<!-- 统计摘要 -->
|
||
<div class="info-stats">
|
||
<div class="stat-box">
|
||
<van-icon name="photo-o" color="#FF6700" />
|
||
<div class="stat-text">
|
||
<div class="stat-num">{{ approvedPhotos.filter(p => p.type === 'image').length + pendingPhotos.filter(p => p.type === 'image').length }}</div>
|
||
<div class="stat-desc">图片</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-box">
|
||
<van-icon name="video-o" color="#f5576c" />
|
||
<div class="stat-text">
|
||
<div class="stat-num">{{ approvedPhotos.filter(p => p.type === 'video').length + pendingPhotos.filter(p => p.type === 'video').length }}</div>
|
||
<div class="stat-desc">视频</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-box">
|
||
<van-icon name="clock-o" color="#ffa940" />
|
||
<div class="stat-text">
|
||
<div class="stat-num">{{ pendingPhotos.length }}</div>
|
||
<div class="stat-desc">待审核</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-box">
|
||
<van-icon name="passed" color="#07c160" />
|
||
<div class="stat-text">
|
||
<div class="stat-num">{{ approvedPhotos.length }}</div>
|
||
<div class="stat-desc">已通过</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 待审核 -->
|
||
<div v-if="pendingPhotos.length" class="media-section">
|
||
<div class="section-title">
|
||
<span>待审核</span>
|
||
<van-badge :content="pendingPhotos.length" />
|
||
</div>
|
||
<div class="media-list">
|
||
<div v-for="photo in pendingPhotos" :key="photo.id" class="media-card">
|
||
<div class="card-thumb" @click="photo.type === 'image' ? previewImage(photo.url) : playVideo(photo.url)">
|
||
<van-image v-if="photo.type === 'image'" :src="photo.url" fit="cover" />
|
||
<div v-else class="video-thumb">
|
||
<video :src="photo.url"></video>
|
||
<van-icon name="play-circle-o" class="play-btn" />
|
||
</div>
|
||
</div>
|
||
<div class="card-info">
|
||
<div class="info-row">
|
||
<van-tag :type="photo.type === 'image' ? 'primary' : 'success'" plain size="mini">
|
||
{{ photo.type === 'image' ? '图片' : '视频' }}
|
||
</van-tag>
|
||
<span class="uploader">{{ photo.uploadedBy || '用户' }}</span>
|
||
</div>
|
||
<div class="action-row">
|
||
<van-button size="mini" type="success" plain @click="approvePhoto(photo.id, 'approved')">通过</van-button>
|
||
<van-button size="mini" type="danger" plain @click="approvePhoto(photo.id, 'rejected')">拒绝</van-button>
|
||
<van-button size="mini" type="warning" plain @click="deletePhoto(photo.id)">删除</van-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 已通过 -->
|
||
<div v-if="approvedPhotos.length" class="media-section">
|
||
<div class="section-title">
|
||
<span>已通过</span>
|
||
<van-badge :content="approvedPhotos.length" color="#07c160" />
|
||
</div>
|
||
<div class="media-grid">
|
||
<div v-for="photo in approvedPhotos" :key="photo.id" class="grid-item" @click="photo.type === 'image' ? previewImage(photo.url) : playVideo(photo.url)">
|
||
<van-image v-if="photo.type === 'image'" :src="photo.url" fit="cover" />
|
||
<div v-else class="video-thumb">
|
||
<video :src="photo.url"></video>
|
||
<van-icon name="play-circle-o" class="play-btn" />
|
||
</div>
|
||
<van-icon name="cross" class="del-btn" @click.stop="deletePhoto(photo.id)" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<van-empty v-if="!pendingPhotos.length && !approvedPhotos.length" description="暂无媒体" />
|
||
|
||
<!-- 悬浮上传按钮 -->
|
||
<van-uploader
|
||
v-model="photoFiles"
|
||
multiple
|
||
:max-count="10"
|
||
:after-read="uploadPhotos"
|
||
accept="image/*,video/*"
|
||
>
|
||
<div class="float-add-btn">
|
||
<van-icon name="photograph" />
|
||
</div>
|
||
</van-uploader>
|
||
</div>
|
||
</van-tab>
|
||
|
||
<van-tab title="场地管理" name="venue">
|
||
<div class="tab-content">
|
||
<div class="venue-list">
|
||
<div v-for="image in venueImages" :key="image.id" class="venue-item">
|
||
<div class="venue-thumb" @click="previewImage(getImageUrl(image.image))">
|
||
<van-image :src="getImageUrl(image.image)" fit="cover" />
|
||
</div>
|
||
<div class="venue-actions">
|
||
<van-field
|
||
v-model.number="image.sortOrder"
|
||
type="number"
|
||
label="排序"
|
||
placeholder="数字越小越靠前"
|
||
@blur="updateVenueOrder(image.id, image.sortOrder)"
|
||
/>
|
||
<van-button
|
||
size="mini"
|
||
type="danger"
|
||
icon="delete-o"
|
||
@click="deleteVenueImage(image.id)"
|
||
>删除</van-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<van-empty v-if="!venueImages.length" description="暂无场地图片" />
|
||
|
||
<!-- 悬浮上传按钮 -->
|
||
<van-uploader
|
||
v-model="venueFiles"
|
||
:max-count="1"
|
||
:after-read="uploadVenueImage"
|
||
accept="image/*"
|
||
>
|
||
<div class="float-add-btn">
|
||
<van-icon name="photograph" />
|
||
</div>
|
||
</van-uploader>
|
||
</div>
|
||
</van-tab>
|
||
</van-tabs>
|
||
|
||
<!-- 编辑活动弹窗 -->
|
||
<van-popup v-model:show="showActivityForm" position="bottom" round>
|
||
<div class="form-popup">
|
||
<div class="popup-header">
|
||
<h3>编辑活动</h3>
|
||
<van-icon name="cross" @click="showActivityForm = false" />
|
||
</div>
|
||
<van-form @submit="submitActivity" class="popup-form">
|
||
<van-cell-group>
|
||
<van-field v-model="activityForm.title" label="活动标题" placeholder="请输入活动标题" required />
|
||
<van-field v-model="activityForm.description" label="活动描述" type="textarea" placeholder="请输入活动描述" rows="3" autosize />
|
||
<van-field
|
||
v-model="activityForm.price"
|
||
label="人均费用"
|
||
type="number"
|
||
placeholder="请输入人均费用"
|
||
>
|
||
<template #left-icon>
|
||
<van-icon name="gold-coin-o" style="margin-right: 8px;" />
|
||
</template>
|
||
<template #button>
|
||
<span style="color: #999;">元</span>
|
||
</template>
|
||
</van-field>
|
||
<van-field
|
||
v-model="activityForm.budget"
|
||
label="活动预算"
|
||
type="number"
|
||
placeholder="请输入预算金额"
|
||
>
|
||
<template #left-icon>
|
||
<van-icon name="balance-o" style="margin-right: 8px;" />
|
||
</template>
|
||
</van-field>
|
||
<van-field
|
||
v-model="activityForm.location"
|
||
label="活动地点"
|
||
placeholder="点击选择地点"
|
||
readonly
|
||
is-link
|
||
required
|
||
:rules="[{ required: true, message: '请选择活动地点' }]"
|
||
@click="showMapPicker = true"
|
||
>
|
||
<template #left-icon>
|
||
<van-icon name="location-o" style="margin-right: 8px;" />
|
||
</template>
|
||
</van-field>
|
||
<van-field
|
||
v-model="startTimeDisplay"
|
||
label="开始时间"
|
||
placeholder="请选择开始时间"
|
||
readonly
|
||
is-link
|
||
required
|
||
:rules="[{ required: true, message: '请选择开始时间' }]"
|
||
@click="showStartTimePicker = true"
|
||
>
|
||
<template #left-icon>
|
||
<van-icon name="clock-o" style="margin-right: 8px;" />
|
||
</template>
|
||
</van-field>
|
||
<van-field
|
||
v-model="deadlineDisplay"
|
||
label="报名截止"
|
||
placeholder="请选择报名截止时间"
|
||
readonly
|
||
is-link
|
||
required
|
||
:rules="[{ required: true, message: '请选择报名截止时间' }]"
|
||
@click="showDeadlinePicker = true"
|
||
>
|
||
<template #left-icon>
|
||
<van-icon name="calendar-o" style="margin-right: 8px;" />
|
||
</template>
|
||
</van-field>
|
||
</van-cell-group>
|
||
<div class="form-actions">
|
||
<van-button round block type="primary" native-type="submit" size="large">保存修改</van-button>
|
||
</div>
|
||
</van-form>
|
||
</div>
|
||
</van-popup>
|
||
|
||
<!-- 开始时间选择器 -->
|
||
<van-popup v-model:show="showStartTimePicker" position="bottom" round>
|
||
<div class="datetime-picker-popup">
|
||
<div class="picker-header">
|
||
<van-button size="small" @click="showStartTimePicker = false">取消</van-button>
|
||
<h3>选择开始时间</h3>
|
||
<van-button size="small" type="primary" @click="confirmStartTime">确定</van-button>
|
||
</div>
|
||
<div class="picker-body">
|
||
<input
|
||
type="datetime-local"
|
||
v-model="startTimeInput"
|
||
class="datetime-input"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</van-popup>
|
||
|
||
<!-- 报名截止时间选择器 -->
|
||
<van-popup v-model:show="showDeadlinePicker" position="bottom" round>
|
||
<div class="datetime-picker-popup">
|
||
<div class="picker-header">
|
||
<van-button size="small" @click="showDeadlinePicker = false">取消</van-button>
|
||
<h3>选择报名截止时间</h3>
|
||
<van-button size="small" type="primary" @click="confirmDeadline">确定</van-button>
|
||
</div>
|
||
<div class="picker-body">
|
||
<input
|
||
type="datetime-local"
|
||
v-model="deadlineInput"
|
||
class="datetime-input"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</van-popup>
|
||
|
||
<!-- 地图选点弹窗 -->
|
||
<van-popup v-model:show="showMapPicker" position="bottom" round :style="{ height: '80%' }">
|
||
<div class="map-picker">
|
||
<div class="map-picker-header">
|
||
<van-icon name="arrow-left" @click="showMapPicker = false" />
|
||
<h3>选择地点</h3>
|
||
<van-button type="primary" size="small" @click="confirmLocation">确定</van-button>
|
||
</div>
|
||
<div class="map-search">
|
||
<van-search
|
||
v-model="searchKeyword"
|
||
placeholder="搜索地点"
|
||
@search="searchLocation"
|
||
@clear="clearSearch"
|
||
show-action
|
||
action-text="搜索"
|
||
@click-right-icon="searchLocation"
|
||
/>
|
||
</div>
|
||
<div v-if="searchResults.length" class="search-results">
|
||
<div
|
||
v-for="(result, index) in searchResults"
|
||
:key="index"
|
||
class="search-result-item"
|
||
@click="selectSearchResult(result)"
|
||
>
|
||
<div class="result-name">{{ result.name }}</div>
|
||
<div class="result-address">{{ result.address }}</div>
|
||
</div>
|
||
</div>
|
||
<div id="map-picker-container-manage" class="map-container"></div>
|
||
<div class="selected-location">
|
||
<van-icon name="location-o" />
|
||
<span>{{ selectedLocation.name || '请在地图上选择位置' }}</span>
|
||
</div>
|
||
</div>
|
||
</van-popup>
|
||
|
||
<!-- 经费表单弹窗 -->
|
||
<van-popup v-model:show="showExpenseForm" position="bottom" round>
|
||
<div class="form-popup">
|
||
<div class="popup-header">
|
||
<h3>{{ expenseForm.id ? '编辑经费' : '添加经费' }}</h3>
|
||
<van-icon name="cross" @click="closeExpenseForm" />
|
||
</div>
|
||
<van-form @submit="submitExpense" class="popup-form">
|
||
<van-cell-group>
|
||
<van-field v-model="expenseForm.item" label="项目" placeholder="例如：场地费" required />
|
||
<van-field v-model="expenseForm.amount" label="金额" type="number" placeholder="请输入金额" required />
|
||
<van-field
|
||
v-model="expenseForm.category"
|
||
label="分类"
|
||
placeholder="选择或输入分类"
|
||
is-link
|
||
readonly
|
||
@click="showCategoryPicker = true"
|
||
/>
|
||
<van-field v-model="expenseForm.note" label="备注" type="textarea" placeholder="备注信息" rows="2" autosize />
|
||
<van-field name="media" label="照片/视频">
|
||
<template #input>
|
||
<div class="expense-media-upload">
|
||
<van-uploader
|
||
v-model="expenseMediaFiles"
|
||
multiple
|
||
:max-count="5"
|
||
accept="image/*,video/*"
|
||
:after-read="onExpenseMediaRead"
|
||
:disabled="expenseForm.media.length + expenseMediaFiles.length >= 5"
|
||
>
|
||
<van-button icon="photograph" type="primary" size="small">
|
||
上传 ({{ expenseForm.media.length + expenseMediaFiles.length }}/5)
|
||
</van-button>
|
||
</van-uploader>
|
||
|
||
<!-- 已有媒体 -->
|
||
<div v-if="expenseForm.media.length" class="existing-media">
|
||
<div class="media-section-title">已有媒体</div>
|
||
<div class="media-list">
|
||
<div v-for="(item, index) in expenseForm.media" :key="'existing-' + index" class="media-thumb">
|
||
<van-image v-if="item.type === 'image'" :src="item.url" fit="cover" />
|
||
<video v-else :src="item.url" class="video-thumb"></video>
|
||
<van-icon name="cross" class="remove-icon" @click="removeExpenseMedia(index)" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 新上传媒体 -->
|
||
<div v-if="expenseMediaFiles.length" class="existing-media">
|
||
<div class="media-section-title">新上传</div>
|
||
<div class="media-list">
|
||
<div v-for="(item, index) in expenseMediaFiles" :key="'new-' + index" class="media-thumb">
|
||
<van-image v-if="item.content" :src="item.content" fit="cover" />
|
||
<van-icon name="cross" class="remove-icon" @click="removeNewExpenseMedia(index)" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</van-field>
|
||
</van-cell-group>
|
||
<div class="form-actions">
|
||
<van-button round block type="primary" native-type="submit" size="large">保存</van-button>
|
||
</div>
|
||
</van-form>
|
||
</div>
|
||
</van-popup>
|
||
|
||
<!-- 分类选择器 -->
|
||
<van-popup v-model:show="showCategoryPicker" position="bottom" round>
|
||
<div class="category-picker">
|
||
<div class="picker-header">
|
||
<h3>选择分类</h3>
|
||
<van-icon name="cross" @click="showCategoryPicker = false" />
|
||
</div>
|
||
<div class="category-list">
|
||
<div
|
||
v-for="cat in expenseCategories"
|
||
:key="cat.name"
|
||
class="category-item"
|
||
@click="selectCategory(cat.name)"
|
||
>
|
||
<div class="category-icon" :style="{ background: cat.gradient }">
|
||
<van-icon :name="cat.icon" />
|
||
</div>
|
||
<span>{{ cat.name }}</span>
|
||
</div>
|
||
<div class="category-item" @click="showCustomCategory = true">
|
||
<div class="category-icon" style="background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
|
||
<van-icon name="add-o" />
|
||
</div>
|
||
<span>自定义</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</van-popup>
|
||
|
||
<!-- 自定义分类输入 -->
|
||
<van-dialog
|
||
v-model:show="showCustomCategory"
|
||
title="自定义分类"
|
||
show-cancel-button
|
||
@confirm="confirmCustomCategory"
|
||
>
|
||
<div style="padding: 16px;">
|
||
<van-field v-model="customCategoryName" placeholder="请输入分类名称" />
|
||
</div>
|
||
</van-dialog>
|
||
|
||
<!-- 赞助商表单弹窗 -->
|
||
<van-popup v-model:show="showSponsorForm" position="bottom" round>
|
||
<div class="form-popup">
|
||
<div class="popup-header">
|
||
<h3>{{ sponsorForm.id ? '编辑赞助商' : '添加赞助商' }}</h3>
|
||
<van-icon name="cross" @click="showSponsorForm = false" />
|
||
</div>
|
||
<van-form @submit="submitSponsor" class="popup-form">
|
||
<van-cell-group>
|
||
<van-field v-model="sponsorForm.name" label="名称" placeholder="请输入赞助商名称" required />
|
||
<van-field name="type" label="类型">
|
||
<template #input>
|
||
<van-radio-group v-model="sponsorForm.type" direction="horizontal">
|
||
<van-radio name="sponsor">赞助</van-radio>
|
||
<van-radio name="title">冠名</van-radio>
|
||
</van-radio-group>
|
||
</template>
|
||
</van-field>
|
||
<van-field
|
||
v-model.number="sponsorForm.sortOrder"
|
||
type="number"
|
||
label="排序"
|
||
placeholder="数字越小越靠前"
|
||
/>
|
||
<van-field v-model="sponsorForm.link" label="链接" placeholder="官网链接（选填）" />
|
||
<van-field name="logo" label="Logo">
|
||
<template #input>
|
||
<van-uploader
|
||
v-model="sponsorLogo"
|
||
:max-count="1"
|
||
:after-read="onLogoRead"
|
||
accept="image/*"
|
||
>
|
||
<van-button icon="plus" type="primary" size="small">选择图片</van-button>
|
||
</van-uploader>
|
||
</template>
|
||
</van-field>
|
||
</van-cell-group>
|
||
<div class="form-actions">
|
||
<van-button round block type="primary" native-type="submit" size="large">保存</van-button>
|
||
</div>
|
||
</van-form>
|
||
</div>
|
||
</van-popup>
|
||
|
||
<!-- 奖品表单弹窗 -->
|
||
<van-popup v-model:show="showPrizeForm" position="bottom" round>
|
||
<div class="form-popup">
|
||
<div class="popup-header">
|
||
<h3>{{ prizeForm.id ? '编辑奖品' : '添加奖品' }}</h3>
|
||
<van-icon name="cross" @click="showPrizeForm = false" />
|
||
</div>
|
||
<van-form @submit="submitPrize" class="popup-form">
|
||
<van-cell-group>
|
||
<van-field v-model="prizeForm.name" label="名称" placeholder="请输入奖品名称" required />
|
||
<van-field
|
||
v-model="prizeForm.level"
|
||
label="等级"
|
||
placeholder="选择等级"
|
||
is-link
|
||
readonly
|
||
@click="showLevelPicker = true"
|
||
required
|
||
/>
|
||
<van-field v-model="prizeForm.description" label="描述" type="textarea" placeholder="奖品描述（选填）" rows="2" autosize />
|
||
<van-field
|
||
v-model="prizeForm.source"
|
||
label="来源"
|
||
placeholder="选择来源"
|
||
is-link
|
||
readonly
|
||
@click="showSourcePicker = true"
|
||
required
|
||
/>
|
||
<van-field
|
||
v-if="prizeForm.source !== 'purchase'"
|
||
v-model="prizeForm.sponsor"
|
||
label="赞助者"
|
||
placeholder="请输入赞助者名称"
|
||
required
|
||
/>
|
||
<van-field
|
||
v-model.number="prizeForm.quantity"
|
||
type="number"
|
||
label="数量"
|
||
placeholder="请输入数量"
|
||
required
|
||
/>
|
||
<van-field
|
||
v-model.number="prizeForm.sortOrder"
|
||
type="number"
|
||
label="排序"
|
||
placeholder="数字越小越靠前"
|
||
/>
|
||
<van-field name="image" label="图片">
|
||
<template #input>
|
||
<van-uploader
|
||
v-model="prizeImage"
|
||
:max-count="1"
|
||
:after-read="onPrizeImageRead"
|
||
accept="image/*"
|
||
>
|
||
<van-button icon="plus" type="primary" size="small">选择图片</van-button>
|
||
</van-uploader>
|
||
</template>
|
||
</van-field>
|
||
</van-cell-group>
|
||
<div class="form-actions">
|
||
<van-button round block type="primary" native-type="submit" size="large">保存</van-button>
|
||
</div>
|
||
</van-form>
|
||
</div>
|
||
</van-popup>
|
||
|
||
<!-- 等级选择器 -->
|
||
<van-popup v-model:show="showLevelPicker" position="bottom" round>
|
||
<div class="level-picker">
|
||
<div class="picker-header">
|
||
<h3>选择等级</h3>
|
||
<van-icon name="cross" @click="showLevelPicker = false" />
|
||
</div>
|
||
<div class="level-list">
|
||
<div
|
||
v-for="level in prizeLevels"
|
||
:key="level"
|
||
class="level-item"
|
||
@click="selectLevel(level)"
|
||
>
|
||
<span class="prize-level-badge" :class="`level-${level}`">{{ level }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</van-popup>
|
||
|
||
<!-- 来源选择器 -->
|
||
<van-popup v-model:show="showSourcePicker" position="bottom" round>
|
||
<div class="level-picker">
|
||
<div class="picker-header">
|
||
<h3>选择来源</h3>
|
||
<van-icon name="cross" @click="showSourcePicker = false" />
|
||
</div>
|
||
<div class="level-list">
|
||
<div class="level-item" @click="selectSource('member')">
|
||
<van-icon name="friends-o" color="#FF6700" />
|
||
<span>群友赞助</span>
|
||
</div>
|
||
<div class="level-item" @click="selectSource('sponsor')">
|
||
<van-icon name="shop-o" color="#FF6700" />
|
||
<span>赞助商提供</span>
|
||
</div>
|
||
<div class="level-item" @click="selectSource('purchase')">
|
||
<van-icon name="shopping-cart-o" color="#999" />
|
||
<span>采购</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</van-popup>
|
||
|
||
<!-- 视频播放弹窗 -->
|
||
<van-popup v-model:show="showVideoPlayer" position="center" round :style="{ width: '90%' }">
|
||
<div class="video-player-popup">
|
||
<video :src="currentVideoUrl" controls autoplay class="popup-video"></video>
|
||
</div>
|
||
</van-popup>
|
||
|
||
<!-- 修改人数弹窗 -->
|
||
<van-popup v-model:show="showPeopleCountDialog" position="center" round :style="{ width: '80%' }">
|
||
<div class="people-count-dialog">
|
||
<div class="dialog-header">
|
||
<h3>修改人数</h3>
|
||
<van-icon name="cross" @click="showPeopleCountDialog = false" />
|
||
</div>
|
||
<div class="dialog-content">
|
||
<div class="count-info">
|
||
<span class="info-label">{{ currentEditReg.name }}</span>
|
||
<span class="info-desc">当前人数：{{ currentEditReg.peopleCount || 1 }}人</span>
|
||
</div>
|
||
<van-stepper v-model="newPeopleCount" min="1" max="20" />
|
||
</div>
|
||
<div class="dialog-actions">
|
||
<van-button block type="primary" @click="confirmPeopleCount">确定</van-button>
|
||
</div>
|
||
</div>
|
||
</van-popup>
|
||
|
||
<!-- 修改车牌号弹窗 -->
|
||
<van-popup v-model:show="showCarNumberDialog" position="center" round :style="{ width: '80%' }">
|
||
<div class="people-count-dialog">
|
||
<div class="dialog-header">
|
||
<h3>修改车牌号</h3>
|
||
<van-icon name="cross" @click="showCarNumberDialog = false" />
|
||
</div>
|
||
<div class="dialog-content">
|
||
<div class="count-info">
|
||
<span class="info-label">{{ currentEditReg.name }}</span>
|
||
<span class="info-desc">当前车牌号：{{ currentEditReg.carNumber || '未填写' }}</span>
|
||
</div>
|
||
<van-field v-model="newCarNumber" placeholder="请输入车牌号（如：闽A12345）" />
|
||
</div>
|
||
<div class="dialog-actions">
|
||
<van-button block type="primary" @click="confirmCarNumber">确定</van-button>
|
||
</div>
|
||
</div>
|
||
</van-popup>
|
||
|
||
<!-- 手动录入报名弹窗 -->
|
||
<van-popup v-model:show="showRegForm" position="bottom" round>
|
||
<div class="form-popup">
|
||
<div class="popup-header">
|
||
<h3>手动录入报名</h3>
|
||
<van-icon name="cross" @click="closeRegForm" />
|
||
</div>
|
||
<van-form @submit="submitRegistration" class="popup-form">
|
||
<van-cell-group>
|
||
<van-field
|
||
v-model="regForm.name"
|
||
label="姓名"
|
||
placeholder="请输入姓名"
|
||
required
|
||
:rules="[{ required: true, message: '请输入姓名' }]"
|
||
/>
|
||
<van-field
|
||
v-model="regForm.phone"
|
||
label="手机号"
|
||
type="tel"
|
||
placeholder="请输入手机号"
|
||
required
|
||
:rules="[{ required: true, message: '请输入手机号' }]"
|
||
/>
|
||
<van-field
|
||
v-model="regForm.carModel"
|
||
label="车型"
|
||
placeholder="请输入车型（选填）"
|
||
/>
|
||
<van-field
|
||
v-model="regForm.carNumber"
|
||
label="车牌号"
|
||
placeholder="请输入车牌号（选填）"
|
||
/>
|
||
<van-field
|
||
v-model.number="regForm.peopleCount"
|
||
type="number"
|
||
label="人数"
|
||
placeholder="请输入人数"
|
||
/>
|
||
<van-field
|
||
v-model="regForm.note"
|
||
label="备注"
|
||
type="textarea"
|
||
placeholder="备注信息（选填）"
|
||
rows="2"
|
||
autosize
|
||
/>
|
||
</van-cell-group>
|
||
<div class="form-actions">
|
||
<van-button round block type="primary" native-type="submit" size="large">提交报名</van-button>
|
||
</div>
|
||
</van-form>
|
||
</div>
|
||
</van-popup>
|
||
|
||
<!-- 报名详情弹窗 -->
|
||
<van-popup v-model:show="showRegDetailDialog" position="bottom" round>
|
||
<div class="reg-detail-popup">
|
||
<div class="popup-header">
|
||
<h3>报名详情</h3>
|
||
<van-icon name="cross" @click="showRegDetailDialog = false" />
|
||
</div>
|
||
<div class="detail-content">
|
||
<div class="detail-section">
|
||
<div class="detail-row">
|
||
<span class="detail-label">姓名</span>
|
||
<span class="detail-value">{{ currentReg.name || '未知' }}</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="detail-label">电话</span>
|
||
<a :href="`tel:${currentReg.phone}`" class="detail-value detail-link">
|
||
<van-icon name="phone-o" />{{ currentReg.phone }}
|
||
</a>
|
||
</div>
|
||
<div class="detail-row" v-if="currentReg.carNumber">
|
||
<span class="detail-label">车牌号</span>
|
||
<span class="detail-value detail-link" @click="editCarNumber(currentReg)">
|
||
<van-icon name="certificate" />{{ currentReg.carNumber }}
|
||
<van-icon name="edit" size="14" />
|
||
</span>
|
||
</div>
|
||
<div class="detail-row" v-if="currentReg.carModel">
|
||
<span class="detail-label">车型</span>
|
||
<span class="detail-value">{{ currentReg.carModel }}</span>
|
||
</div>
|
||
<div class="detail-row">
|
||
<span class="detail-label">人数</span>
|
||
<span class="detail-value detail-link" @click="editPeopleCount(currentReg)">
|
||
<van-icon name="friends-o" />{{ currentReg.peopleCount || 1 }}人
|
||
<van-icon name="edit" size="14" />
|
||
</span>
|
||
</div>
|
||
<div class="detail-row" v-if="currentReg.checkInTime">
|
||
<span class="detail-label">签到时间</span>
|
||
<span class="detail-value">{{ formatDate(currentReg.checkInTime) }}</span>
|
||
</div>
|
||
<div class="detail-row status-row">
|
||
<span class="detail-label">状态管理</span>
|
||
<div class="status-controls">
|
||
<div class="status-item">
|
||
<span class="status-name">审核（是否交钱）</span>
|
||
<van-tag :type="currentReg.status === 'approved' ? 'success' : currentReg.status === 'rejected' ? 'danger' : 'warning'">
|
||
{{ currentReg.status === 'approved' ? '已通过' : currentReg.status === 'rejected' ? '已拒绝' : '待审核' }}
|
||
</van-tag>
|
||
</div>
|
||
<div class="status-item">
|
||
<span class="status-name">签到（是否到现场）</span>
|
||
<van-switch
|
||
v-model="currentReg.checkInStatus"
|
||
size="20px"
|
||
@change="toggleCheckInFromDetail"
|
||
active-color="#07c160"
|
||
/>
|
||
</div>
|
||
<div class="status-item">
|
||
<span class="status-name">进群（是否加微信群）</span>
|
||
<van-switch
|
||
v-model="currentReg.groupStatus"
|
||
size="20px"
|
||
@change="toggleGroupStatusFromDetail"
|
||
active-color="#1989fa"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="detail-actions">
|
||
<div v-if="currentReg.status === 'pending'" class="action-buttons">
|
||
<van-button size="large" type="success" @click="approveFromDetail('approved')">通过审核</van-button>
|
||
<van-button size="large" type="danger" @click="approveFromDetail('rejected')">拒绝审核</van-button>
|
||
</div>
|
||
<van-button
|
||
block
|
||
size="large"
|
||
type="danger"
|
||
plain
|
||
@click="deleteRegistration"
|
||
:style="{ marginTop: currentReg.status === 'pending' ? '12px' : '0' }"
|
||
>
|
||
删除报名
|
||
</van-button>
|
||
</div>
|
||
</div>
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted, watch } from 'vue';
|
||
import { useRoute, useRouter } from 'vue-router';
|
||
import { showToast, closeToast, showConfirmDialog, ImagePreview } from 'vant';
|
||
import api from '../../api';
|
||
import { usePrizeManage } from './usePrizeManage';
|
||
|
||
const route = useRoute();
|
||
const router = useRouter();
|
||
const activeTab = ref('info');
|
||
|
||
// 获取完整图片URL的辅助函数
|
||
const getImageUrl = (path) => {
|
||
if (!path) return '';
|
||
if (path.startsWith('http://') || path.startsWith('https://')) {
|
||
return path;
|
||
}
|
||
return import.meta.env.DEV ? `http://localhost:3000${path}` : `https://mi.xyvan.cn${path}`;
|
||
};
|
||
|
||
const activity = ref({});
|
||
const expenses = ref([]);
|
||
const sponsors = ref([]);
|
||
const registrations = ref([]);
|
||
const sponsorLogo = ref([]);
|
||
const photoFiles = ref([]);
|
||
const pendingPhotos = ref([]);
|
||
const expenseMediaFiles = ref([]);
|
||
const approvedPhotos = ref([]);
|
||
const venueImages = ref([]);
|
||
const venueFiles = ref([]);
|
||
const showVideoPlayer = ref(false);
|
||
const currentVideoUrl = ref('');
|
||
const regSearchKeyword = ref('');
|
||
const showPeopleCountDialog = ref(false);
|
||
const currentEditReg = ref({});
|
||
const newPeopleCount = ref(1);
|
||
const showCarNumberDialog = ref(false);
|
||
const newCarNumber = ref('');
|
||
const showRegDetailDialog = ref(false);
|
||
const currentReg = ref({});
|
||
const activeFilter = ref('all'); // 过滤器状态
|
||
|
||
const showActivityForm = ref(false);
|
||
const showExpenseForm = ref(false);
|
||
const showSponsorForm = ref(false);
|
||
const showRegForm = ref(false);
|
||
|
||
const regForm = ref({
|
||
name: '',
|
||
phone: '',
|
||
carModel: '',
|
||
carNumber: '',
|
||
peopleCount: 1,
|
||
note: ''
|
||
});
|
||
|
||
// 奖品管理
|
||
const activityId = computed(() => route.params.id);
|
||
const {
|
||
prizes,
|
||
showPrizeForm,
|
||
showLevelPicker,
|
||
showSourcePicker,
|
||
prizeImage,
|
||
prizeForm,
|
||
prizeLevels,
|
||
loadPrizes,
|
||
editPrize,
|
||
onPrizeImageRead,
|
||
selectLevel,
|
||
selectSource,
|
||
submitPrize,
|
||
deletePrizeItem,
|
||
resetPrizeForm
|
||
} = usePrizeManage(activityId);
|
||
|
||
const showMapPicker = ref(false);
|
||
const showStartTimePicker = ref(false);
|
||
const showDeadlinePicker = ref(false);
|
||
const showCategoryPicker = ref(false);
|
||
const showCustomCategory = ref(false);
|
||
const customCategoryName = ref('');
|
||
const searchKeyword = ref('');
|
||
const searchResults = ref([]);
|
||
const selectedLocation = ref({});
|
||
|
||
// 经费分类预设
|
||
const expenseCategories = ref([
|
||
{ name: '场地', icon: 'shop-o', gradient: 'linear-gradient(135deg, #FF6700 0%, #FF8533 100%)' },
|
||
{ name: '餐饮', icon: 'food-o', gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
|
||
{ name: '交通', icon: 'logistics', gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
|
||
{ name: '住宿', icon: 'hotel-o', gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
|
||
{ name: '物料', icon: 'gift-o', gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
|
||
{ name: '人员', icon: 'friends-o', gradient: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)' },
|
||
{ name: '其他', icon: 'more-o', gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' }
|
||
]);
|
||
let pickerMap = null;
|
||
let pickerMarker = null;
|
||
let geocoder = null;
|
||
|
||
const activityForm = ref({
|
||
title: '',
|
||
description: '',
|
||
location: '',
|
||
locationLat: null,
|
||
locationLng: null,
|
||
startTime: '',
|
||
registrationDeadline: ''
|
||
});
|
||
|
||
// 日期时间选择器的值
|
||
const startTimeInput = ref('');
|
||
const deadlineInput = ref('');
|
||
|
||
// 显示格式化的日期时间
|
||
const startTimeDisplay = computed(() => {
|
||
if (!activityForm.value.startTime) return '';
|
||
return formatDateTime(activityForm.value.startTime);
|
||
});
|
||
|
||
const deadlineDisplay = computed(() => {
|
||
if (!activityForm.value.registrationDeadline) return '';
|
||
return formatDateTime(activityForm.value.registrationDeadline);
|
||
});
|
||
|
||
const expenseForm = ref({
|
||
id: null,
|
||
item: '',
|
||
amount: '',
|
||
category: '',
|
||
note: '',
|
||
media: []
|
||
});
|
||
|
||
const sponsorForm = ref({
|
||
id: null,
|
||
name: '',
|
||
type: 'sponsor',
|
||
link: '',
|
||
sortOrder: 0
|
||
});
|
||
|
||
const totalExpense = computed(() => {
|
||
return expenses.value.reduce((sum, e) => sum + parseFloat(e.amount), 0).toFixed(2);
|
||
});
|
||
|
||
// 审核通过的总人数（车主+带的人）
|
||
const approvedTotalPeople = computed(() => {
|
||
return registrations.value
|
||
.filter(r => r.status === 'approved')
|
||
.reduce((sum, r) => sum + (r.peopleCount || 1), 0);
|
||
});
|
||
|
||
// 过滤报名列表
|
||
const filteredRegistrations = computed(() => {
|
||
let result = registrations.value;
|
||
|
||
// 应用过滤器
|
||
if (activeFilter.value === 'pending') {
|
||
result = result.filter(r => r.status === 'pending');
|
||
} else if (activeFilter.value === 'approved') {
|
||
result = result.filter(r => r.status === 'approved');
|
||
} else if (activeFilter.value === 'rejected') {
|
||
result = result.filter(r => r.status === 'rejected');
|
||
} else if (activeFilter.value === 'checkedIn') {
|
||
result = result.filter(r => r.checkInStatus);
|
||
} else if (activeFilter.value === 'notCheckedIn') {
|
||
result = result.filter(r => !r.checkInStatus);
|
||
} else if (activeFilter.value === 'grouped') {
|
||
result = result.filter(r => r.groupStatus);
|
||
} else if (activeFilter.value === 'notGrouped') {
|
||
result = result.filter(r => !r.groupStatus);
|
||
}
|
||
|
||
// 应用搜索关键词
|
||
if (!regSearchKeyword.value || !regSearchKeyword.value.trim()) {
|
||
return result;
|
||
}
|
||
|
||
const keyword = regSearchKeyword.value.toLowerCase().trim();
|
||
return result.filter(reg => {
|
||
const phone = reg.phone ? reg.phone.toLowerCase() : '';
|
||
const carNumber = reg.carNumber ? reg.carNumber.toLowerCase() : '';
|
||
const name = reg.name ? reg.name.toLowerCase() : '';
|
||
|
||
return phone.includes(keyword) ||
|
||
carNumber.includes(keyword) ||
|
||
name.includes(keyword);
|
||
});
|
||
});
|
||
|
||
// 设置过滤器
|
||
const setFilter = (filter) => {
|
||
if (activeFilter.value === filter) {
|
||
activeFilter.value = 'all'; // 再次点击取消过滤
|
||
} else {
|
||
activeFilter.value = filter;
|
||
}
|
||
};
|
||
|
||
const onRegSearch = () => {
|
||
// 搜索逻辑已在 computed 中处理
|
||
};
|
||
|
||
const onRegSearchClear = () => {
|
||
regSearchKeyword.value = '';
|
||
};
|
||
|
||
const formatDate = (date) => {
|
||
return new Date(date).toLocaleString('zh-CN');
|
||
};
|
||
|
||
// 格式化日期时间显示
|
||
const formatDateTime = (dateTime) => {
|
||
if (!dateTime) return '';
|
||
const date = new Date(dateTime);
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
const hours = String(date.getHours()).padStart(2, '0');
|
||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
||
};
|
||
|
||
// 安全解析datetime-local格式，确保以本地时区创建Date对象
|
||
const parseDateTimeLocal = (dateTimeStr) => {
|
||
console.log('[时区转换] 输入的datetime-local字符串:', dateTimeStr);
|
||
const [datePart, timePart] = dateTimeStr.split('T');
|
||
const [year, month, day] = datePart.split('-').map(Number);
|
||
const [hours, minutes] = timePart.split(':').map(Number);
|
||
const localDate = new Date(year, month - 1, day, hours, minutes);
|
||
console.log('[时区转换] 创建的本地Date对象:', localDate.toString());
|
||
console.log('[时区转换] 转换为UTC (ISO):', localDate.toISOString());
|
||
console.log('[时区转换] 时区偏移(分钟):', localDate.getTimezoneOffset());
|
||
return localDate;
|
||
};
|
||
|
||
// 开始时间确认
|
||
const confirmStartTime = () => {
|
||
if (!startTimeInput.value) {
|
||
showToast('请选择开始时间');
|
||
return;
|
||
}
|
||
console.log('[开始时间] 用户选择的时间:', startTimeInput.value);
|
||
const selectedDate = parseDateTimeLocal(startTimeInput.value);
|
||
activityForm.value.startTime = selectedDate.toISOString();
|
||
console.log('[开始时间] 保存到表单的UTC时间:', activityForm.value.startTime);
|
||
showStartTimePicker.value = false;
|
||
};
|
||
|
||
// 报名截止时间确认
|
||
const confirmDeadline = () => {
|
||
if (!deadlineInput.value) {
|
||
showToast('请选择报名截止时间');
|
||
return;
|
||
}
|
||
console.log('[截止时间] 用户选择的时间:', deadlineInput.value);
|
||
const selectedDate = parseDateTimeLocal(deadlineInput.value);
|
||
if (activityForm.value.startTime && selectedDate > new Date(activityForm.value.startTime)) {
|
||
showToast('报名截止时间不能晚于活动开始时间');
|
||
return;
|
||
}
|
||
activityForm.value.registrationDeadline = selectedDate.toISOString();
|
||
console.log('[截止时间] 保存到表单的UTC时间:', activityForm.value.registrationDeadline);
|
||
showDeadlinePicker.value = false;
|
||
};
|
||
|
||
// 获取分类样式
|
||
const getCategoryStyle = (categoryName) => {
|
||
const category = expenseCategories.value.find(c => c.name === categoryName);
|
||
if (category) {
|
||
return { icon: category.icon, gradient: category.gradient };
|
||
}
|
||
// 默认样式
|
||
return {
|
||
icon: 'bill-o',
|
||
gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)'
|
||
};
|
||
};
|
||
|
||
// 选择分类
|
||
const selectCategory = (categoryName) => {
|
||
expenseForm.value.category = categoryName;
|
||
showCategoryPicker.value = false;
|
||
};
|
||
|
||
// 确认自定义分类
|
||
const confirmCustomCategory = () => {
|
||
if (customCategoryName.value.trim()) {
|
||
expenseForm.value.category = customCategoryName.value.trim();
|
||
showCategoryPicker.value = false;
|
||
customCategoryName.value = '';
|
||
} else {
|
||
showToast('请输入分类名称');
|
||
}
|
||
};
|
||
|
||
const loadData = async () => {
|
||
try {
|
||
const { data } = await api.getActivity(route.params.id);
|
||
activity.value = {
|
||
...data.activity,
|
||
danmakuEnabled: Boolean(data.activity.danmakuEnabled),
|
||
registrationEnabled: Boolean(data.activity.registrationEnabled)
|
||
};
|
||
expenses.value = data.expenses || [];
|
||
sponsors.value = data.sponsors || [];
|
||
|
||
// 加载媒体
|
||
const allPhotos = data.photos || [];
|
||
pendingPhotos.value = allPhotos.filter(p => p.status === 'pending');
|
||
approvedPhotos.value = allPhotos.filter(p => p.status === 'approved');
|
||
|
||
const { data: regs } = await api.getAllRegistrations({ activityId: route.params.id });
|
||
registrations.value = regs;
|
||
|
||
// 加载奖品
|
||
await loadPrizes();
|
||
|
||
// 加载场地图片
|
||
await loadVenueImages();
|
||
} catch (error) {
|
||
showToast('加载失败');
|
||
}
|
||
};
|
||
|
||
// 添加新奖品
|
||
const addNewPrize = () => {
|
||
resetPrizeForm();
|
||
showPrizeForm.value = true;
|
||
};
|
||
|
||
const editActivity = () => {
|
||
activityForm.value = { ...activity.value };
|
||
|
||
console.log('[编辑活动] 原始活动数据:', activity.value);
|
||
|
||
// 设置日期时间选择器的值
|
||
if (activity.value.startTime) {
|
||
console.log('[编辑活动] 数据库的开始时间(UTC):', activity.value.startTime);
|
||
const startDate = new Date(activity.value.startTime);
|
||
console.log('[编辑活动] 转换为本地Date对象:', startDate.toString());
|
||
startTimeInput.value = formatDateTimeLocal(startDate);
|
||
console.log('[编辑活动] 显示在选择器的时间:', startTimeInput.value);
|
||
}
|
||
if (activity.value.registrationDeadline) {
|
||
console.log('[编辑活动] 数据库的截止时间(UTC):', activity.value.registrationDeadline);
|
||
const deadlineDate = new Date(activity.value.registrationDeadline);
|
||
console.log('[编辑活动] 转换为本地Date对象:', deadlineDate.toString());
|
||
deadlineInput.value = formatDateTimeLocal(deadlineDate);
|
||
console.log('[编辑活动] 显示在选择器的时间:', deadlineInput.value);
|
||
}
|
||
|
||
showActivityForm.value = true;
|
||
};
|
||
|
||
// 格式化为 datetime-local 输入格式
|
||
const formatDateTimeLocal = (date) => {
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
const hours = String(date.getHours()).padStart(2, '0');
|
||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||
return `${year}-${month}-${day}T${hours}:${minutes}`;
|
||
};
|
||
|
||
const submitActivity = async () => {
|
||
try {
|
||
const formData = { ...activityForm.value };
|
||
// 清理空字符串，转换为null
|
||
if (formData.budget === '' || formData.budget === undefined) {
|
||
formData.budget = null;
|
||
}
|
||
if (formData.price === '' || formData.price === undefined) {
|
||
formData.price = null;
|
||
}
|
||
|
||
await api.updateActivity(activity.value.id, formData);
|
||
showToast('保存成功');
|
||
showActivityForm.value = false;
|
||
loadData();
|
||
} catch (error) {
|
||
showToast('保存失败');
|
||
}
|
||
};
|
||
|
||
const toggleRegistration = async (value) => {
|
||
try {
|
||
await api.updateActivity(activity.value.id, { registrationEnabled: value });
|
||
showToast(value ? '报名已开启' : '报名已关闭');
|
||
} catch (error) {
|
||
showToast('操作失败');
|
||
activity.value.registrationEnabled = !value;
|
||
}
|
||
};
|
||
|
||
const toggleDanmaku = async (value) => {
|
||
try {
|
||
await api.updateActivity(activity.value.id, { danmakuEnabled: value });
|
||
showToast(value ? '弹幕已开启' : '弹幕已关闭');
|
||
} catch (error) {
|
||
showToast('操作失败');
|
||
activity.value.danmakuEnabled = !value;
|
||
}
|
||
};
|
||
|
||
const submitExpense = async () => {
|
||
const loadingToast = showToast({
|
||
type: 'loading',
|
||
message: '保存中...',
|
||
forbidClick: true,
|
||
duration: 0
|
||
});
|
||
|
||
try {
|
||
const formData = new FormData();
|
||
formData.append('activityId', activity.value.id);
|
||
formData.append('item', expenseForm.value.item);
|
||
formData.append('amount', expenseForm.value.amount);
|
||
formData.append('category', expenseForm.value.category);
|
||
formData.append('note', expenseForm.value.note);
|
||
|
||
// 只在编辑时添加现有媒体
|
||
if (expenseForm.value.id && expenseForm.value.media && expenseForm.value.media.length > 0) {
|
||
formData.append('existingMedia', JSON.stringify(expenseForm.value.media));
|
||
}
|
||
|
||
// 添加新上传的媒体文件
|
||
expenseMediaFiles.value.forEach(item => {
|
||
if (item.file) {
|
||
formData.append('media', item.file);
|
||
}
|
||
});
|
||
|
||
if (expenseForm.value.id) {
|
||
await api.updateExpense(expenseForm.value.id, formData);
|
||
showToast('更新成功');
|
||
} else {
|
||
await api.addExpense(formData);
|
||
showToast('添加成功');
|
||
}
|
||
closeExpenseForm();
|
||
loadData();
|
||
} catch (error) {
|
||
showToast(expenseForm.value.id ? '更新失败' : '添加失败');
|
||
} finally {
|
||
loadingToast.clear();
|
||
}
|
||
};
|
||
|
||
const editExpense = (expense) => {
|
||
expenseForm.value = {
|
||
...expense,
|
||
media: expense.media || []
|
||
};
|
||
expenseMediaFiles.value = [];
|
||
showExpenseForm.value = true;
|
||
};
|
||
|
||
// 添加新经费
|
||
const addNewExpense = () => {
|
||
expenseForm.value = { id: null, item: '', amount: '', category: '', note: '', media: [] };
|
||
expenseMediaFiles.value = [];
|
||
showExpenseForm.value = true;
|
||
};
|
||
|
||
const onExpenseMediaRead = (file) => {
|
||
// 验证文件大小和类型
|
||
const fileItem = Array.isArray(file) ? file[0] : file;
|
||
const maxSize = 50 * 1024 * 1024; // 50MB
|
||
|
||
if (fileItem.file.size > maxSize) {
|
||
showToast('文件大小不能超过50MB');
|
||
// 移除超大文件
|
||
const index = expenseMediaFiles.value.findIndex(f => f.file === fileItem.file);
|
||
if (index > -1) {
|
||
expenseMediaFiles.value.splice(index, 1);
|
||
}
|
||
return;
|
||
}
|
||
};
|
||
|
||
const removeExpenseMedia = (index) => {
|
||
expenseForm.value.media.splice(index, 1);
|
||
};
|
||
|
||
// 添加新报名
|
||
const addNewRegistration = () => {
|
||
regForm.value = {
|
||
name: '',
|
||
phone: '',
|
||
carModel: '',
|
||
carNumber: '',
|
||
peopleCount: 1,
|
||
note: ''
|
||
};
|
||
showRegForm.value = true;
|
||
};
|
||
|
||
// 关闭报名表单
|
||
const closeRegForm = () => {
|
||
showRegForm.value = false;
|
||
regForm.value = {
|
||
name: '',
|
||
phone: '',
|
||
carModel: '',
|
||
carNumber: '',
|
||
peopleCount: 1,
|
||
note: ''
|
||
};
|
||
};
|
||
|
||
// 提交报名
|
||
const submitRegistration = async () => {
|
||
try {
|
||
await api.submitRegistration({
|
||
activityId: activity.value.id,
|
||
...regForm.value
|
||
});
|
||
showToast('报名成功');
|
||
closeRegForm();
|
||
loadData();
|
||
} catch (error) {
|
||
showToast('报名失败');
|
||
}
|
||
};;
|
||
|
||
const removeNewExpenseMedia = (index) => {
|
||
expenseMediaFiles.value.splice(index, 1);
|
||
};
|
||
|
||
const closeExpenseForm = () => {
|
||
showExpenseForm.value = false;
|
||
expenseForm.value = { id: null, item: '', amount: '', category: '', note: '', media: [] };
|
||
expenseMediaFiles.value = [];
|
||
};
|
||
|
||
const deleteExpenseItem = async (id) => {
|
||
try {
|
||
await showConfirmDialog({
|
||
title: '确认删除',
|
||
message: '确定要删除这条经费记录吗？',
|
||
});
|
||
await api.deleteExpense(id);
|
||
showToast('删除成功');
|
||
loadData();
|
||
} catch (error) {
|
||
// 用户取消或删除失败
|
||
if (error !== 'cancel') {
|
||
showToast('删除失败');
|
||
}
|
||
}
|
||
};
|
||
|
||
const submitSponsor = async () => {
|
||
// 验证必填字段
|
||
if (!sponsorForm.value.name || !sponsorForm.value.name.trim()) {
|
||
showToast('请输入赞助商名称');
|
||
return;
|
||
}
|
||
|
||
console.log('开始提交赞助商...');
|
||
console.log('表单数据:', sponsorForm.value);
|
||
console.log('Logo 文件:', sponsorLogo.value);
|
||
|
||
let loadingToast = null;
|
||
|
||
try {
|
||
const formData = new FormData();
|
||
if (!sponsorForm.value.id) {
|
||
formData.append('activityId', activity.value.id);
|
||
}
|
||
formData.append('name', sponsorForm.value.name);
|
||
formData.append('type', sponsorForm.value.type);
|
||
formData.append('link', sponsorForm.value.link || '');
|
||
formData.append('sortOrder', sponsorForm.value.sortOrder || 0);
|
||
|
||
// 检查是否有 Logo 需要上传
|
||
const hasLogo = sponsorLogo.value.length > 0 && sponsorLogo.value[0].file;
|
||
|
||
if (hasLogo) {
|
||
const logoSize = (sponsorLogo.value[0].file.size / 1024 / 1024).toFixed(2);
|
||
console.log('准备上传 Logo，大小:', logoSize, 'MB');
|
||
loadingToast = showToast({
|
||
type: 'loading',
|
||
message: `正在上传 Logo (${logoSize}MB)...`,
|
||
forbidClick: true,
|
||
duration: 0
|
||
});
|
||
formData.append('logo', sponsorLogo.value[0].file);
|
||
} else if (sponsorLogo.value.length === 0 && sponsorForm.value.logo) {
|
||
// 用户删除了logo
|
||
formData.append('removeLogo', 'true');
|
||
console.log('用户删除了 Logo');
|
||
loadingToast = showToast({
|
||
type: 'loading',
|
||
message: '正在保存...',
|
||
forbidClick: true,
|
||
duration: 0
|
||
});
|
||
} else {
|
||
console.log('没有 Logo，仅保存数据');
|
||
loadingToast = showToast({
|
||
type: 'loading',
|
||
message: '正在保存...',
|
||
forbidClick: true,
|
||
duration: 0
|
||
});
|
||
}
|
||
|
||
console.log('开始调用 API...');
|
||
const startTime = Date.now();
|
||
|
||
if (sponsorForm.value.id) {
|
||
await api.updateSponsor(sponsorForm.value.id, formData);
|
||
} else {
|
||
await api.addSponsor(formData);
|
||
}
|
||
|
||
const endTime = Date.now();
|
||
console.log('API 调用完成，耗时:', (endTime - startTime) / 1000, '秒');
|
||
|
||
// 显示成功提示
|
||
showToast({
|
||
type: 'success',
|
||
message: sponsorForm.value.id ? '更新成功' : '添加成功',
|
||
duration: 2000
|
||
});
|
||
|
||
// 关闭弹窗并重置表单
|
||
showSponsorForm.value = false;
|
||
sponsorForm.value = { id: null, name: '', type: 'sponsor', link: '', sortOrder: 0 };
|
||
sponsorLogo.value = [];
|
||
|
||
console.log('开始重新加载数据...');
|
||
// 重新加载数据（不等待，避免阻塞）
|
||
loadData();
|
||
console.log('数据加载完成');
|
||
} catch (error) {
|
||
console.error('赞助商提交失败:', error);
|
||
console.error('错误详情:', error.response);
|
||
const errorMsg = error.response?.data?.error || error.message || '操作失败';
|
||
showToast({
|
||
type: 'fail',
|
||
message: errorMsg,
|
||
duration: 3000
|
||
});
|
||
} finally {
|
||
if (loadingToast) {
|
||
loadingToast.clear();
|
||
}
|
||
}
|
||
};
|
||
|
||
const editSponsor = (sponsor) => {
|
||
sponsorForm.value = { ...sponsor };
|
||
// 回显Logo - 需要使用完整URL
|
||
if (sponsor.logo) {
|
||
const logoUrl = sponsor.logo.startsWith('http') ? sponsor.logo :
|
||
(import.meta.env.DEV ? `http://localhost:3000${sponsor.logo}` : `https://mi.xyvan.cn${sponsor.logo}`);
|
||
sponsorLogo.value = [{ url: logoUrl }];
|
||
} else {
|
||
sponsorLogo.value = [];
|
||
}
|
||
showSponsorForm.value = true;
|
||
};
|
||
|
||
// 添加新赞助商
|
||
const addNewSponsor = () => {
|
||
sponsorForm.value = { id: null, name: '', type: 'sponsor', link: '', sortOrder: 0 };
|
||
sponsorLogo.value = [];
|
||
showSponsorForm.value = true;
|
||
};
|
||
|
||
const onLogoRead = (file) => {
|
||
// 文件选择后的回调，显示文件已选择
|
||
if (file.file) {
|
||
const sizeMB = (file.file.size / 1024 / 1024).toFixed(2);
|
||
showToast(`已选择: ${file.file.name} (${sizeMB}MB)`);
|
||
}
|
||
};
|
||
|
||
const deleteSponsorItem = async (id) => {
|
||
try {
|
||
await showConfirmDialog({
|
||
title: '确认删除',
|
||
message: '确定要删除这个赞助商吗？',
|
||
});
|
||
await api.deleteSponsor(id);
|
||
showToast('删除成功');
|
||
loadData();
|
||
} catch (error) {
|
||
// 用户取消或删除失败
|
||
if (error !== 'cancel') {
|
||
showToast('删除失败');
|
||
}
|
||
}
|
||
};
|
||
|
||
const approve = async (id, status) => {
|
||
try {
|
||
await api.approveRegistration(id, status);
|
||
showToast('操作成功');
|
||
loadData();
|
||
} catch (error) {
|
||
showToast('操作失败');
|
||
}
|
||
};
|
||
|
||
// 签到/取消签到
|
||
const toggleCheckIn = async (id) => {
|
||
try {
|
||
await api.checkInRegistration(id);
|
||
showToast('操作成功');
|
||
loadData();
|
||
} catch (error) {
|
||
showToast('操作失败');
|
||
}
|
||
};
|
||
|
||
// 复制车牌号
|
||
const copyCarNumber = async (carNumber) => {
|
||
try {
|
||
await navigator.clipboard.writeText(carNumber);
|
||
showToast('车牌号已复制');
|
||
} catch (error) {
|
||
showToast('复制失败');
|
||
}
|
||
};
|
||
|
||
// 修改人数
|
||
const editPeopleCount = (reg) => {
|
||
currentEditReg.value = reg;
|
||
newPeopleCount.value = reg.peopleCount || 1;
|
||
showPeopleCountDialog.value = true;
|
||
};
|
||
|
||
const confirmPeopleCount = async () => {
|
||
try {
|
||
await api.updateRegistration(currentEditReg.value.id, { peopleCount: newPeopleCount.value });
|
||
showToast('修改成功');
|
||
showPeopleCountDialog.value = false;
|
||
loadData();
|
||
} catch (error) {
|
||
showToast('修改失败');
|
||
}
|
||
};
|
||
|
||
// 修改车牌号
|
||
const editCarNumber = (reg) => {
|
||
currentEditReg.value = reg;
|
||
newCarNumber.value = reg.carNumber || '';
|
||
showCarNumberDialog.value = true;
|
||
};
|
||
|
||
const confirmCarNumber = async () => {
|
||
try {
|
||
await api.updateRegistration(currentEditReg.value.id, { carNumber: newCarNumber.value });
|
||
showToast('修改成功');
|
||
showCarNumberDialog.value = false;
|
||
loadData();
|
||
} catch (error) {
|
||
showToast('修改失败');
|
||
}
|
||
};
|
||
|
||
// 显示报名详情
|
||
const showRegDetail = (reg) => {
|
||
currentReg.value = reg;
|
||
showRegDetailDialog.value = true;
|
||
};
|
||
|
||
// 从详情弹窗签到
|
||
const toggleCheckInFromDetail = async () => {
|
||
const originalStatus = currentReg.value.checkInStatus;
|
||
try {
|
||
await api.checkInRegistration(currentReg.value.id);
|
||
showToast('操作成功');
|
||
await loadData();
|
||
// 重新打开详情弹窗，显示更新后的数据
|
||
const updatedReg = registrations.value.find(r => r.id === currentReg.value.id);
|
||
if (updatedReg) {
|
||
currentReg.value = updatedReg;
|
||
}
|
||
} catch (error) {
|
||
showToast('操作失败');
|
||
currentReg.value.checkInStatus = originalStatus;
|
||
}
|
||
};
|
||
|
||
// 从详情弹窗审核
|
||
const approveFromDetail = async (status) => {
|
||
try {
|
||
await api.approveRegistration(currentReg.value.id, status);
|
||
showToast('操作成功');
|
||
showRegDetailDialog.value = false;
|
||
loadData();
|
||
} catch (error) {
|
||
showToast('操作失败');
|
||
}
|
||
};
|
||
|
||
// 从详情弹窗切换进群状态
|
||
const toggleGroupStatusFromDetail = async () => {
|
||
try {
|
||
await api.groupRegistration(currentReg.value.id);
|
||
showToast('操作成功');
|
||
await loadData();
|
||
// 重新打开详情弹窗，显示更新后的数据
|
||
const updatedReg = registrations.value.find(r => r.id === currentReg.value.id);
|
||
if (updatedReg) {
|
||
currentReg.value = updatedReg;
|
||
}
|
||
} catch (error) {
|
||
showToast('操作失败');
|
||
}
|
||
};
|
||
|
||
// 删除报名
|
||
const deleteRegistration = async () => {
|
||
try {
|
||
await showConfirmDialog({
|
||
title: '确认删除',
|
||
message: '删除后用户可以重新报名，确定要删除这条报名信息吗？'
|
||
});
|
||
await api.deleteRegistration(currentReg.value.id);
|
||
showToast('删除成功');
|
||
showRegDetailDialog.value = false;
|
||
loadData();
|
||
} catch (error) {
|
||
if (error !== 'cancel') {
|
||
showToast('删除失败');
|
||
}
|
||
}
|
||
};
|
||
|
||
// 媒体管理相关方法
|
||
const uploadPhotos = async (files) => {
|
||
const fileArray = Array.isArray(files) ? files : [files];
|
||
const totalSize = fileArray.reduce((sum, f) => sum + f.file.size, 0);
|
||
const totalSizeMB = (totalSize / 1024 / 1024).toFixed(2);
|
||
const fileCount = fileArray.length;
|
||
|
||
const loadingToast = showToast({
|
||
type: 'loading',
|
||
message: `正在上传 ${fileCount} 个文件 (${totalSizeMB}MB)...`,
|
||
forbidClick: true,
|
||
duration: 0
|
||
});
|
||
|
||
try {
|
||
const formData = new FormData();
|
||
formData.append('activityId', activity.value.id);
|
||
|
||
fileArray.forEach(file => formData.append('photos', file.file));
|
||
|
||
await api.uploadPhotos(formData);
|
||
|
||
// 显示成功提示
|
||
showToast({
|
||
type: 'success',
|
||
message: `成功上传 ${fileCount} 个文件`,
|
||
duration: 2000
|
||
});
|
||
|
||
// 清空文件列表
|
||
photoFiles.value = [];
|
||
|
||
// 重新加载数据（不等待，避免阻塞）
|
||
loadData();
|
||
} catch (error) {
|
||
console.error('上传失败:', error);
|
||
showToast({
|
||
type: 'fail',
|
||
message: error.response?.data?.error || '上传失败',
|
||
duration: 3000
|
||
});
|
||
} finally {
|
||
loadingToast.clear();
|
||
}
|
||
};
|
||
|
||
const approvePhoto = async (id, status) => {
|
||
try {
|
||
await api.approvePhoto(id, status);
|
||
showToast(status === 'approved' ? '已通过' : '已拒绝');
|
||
loadData();
|
||
} catch (error) {
|
||
console.error('操作失败:', error);
|
||
showToast('操作失败');
|
||
}
|
||
};
|
||
|
||
const deletePhoto = async (id) => {
|
||
try {
|
||
await showConfirmDialog({
|
||
title: '确认删除',
|
||
message: '删除后无法恢复，确定要删除吗？',
|
||
});
|
||
await api.deletePhoto(id);
|
||
showToast('删除成功');
|
||
loadData();
|
||
} catch (error) {
|
||
// 用户取消或删除失败
|
||
if (error !== 'cancel') {
|
||
console.error('删除失败:', error);
|
||
showToast('删除失败');
|
||
}
|
||
}
|
||
};
|
||
|
||
const previewImage = (url) => {
|
||
ImagePreview([url]);
|
||
};
|
||
|
||
const playVideo = (url) => {
|
||
currentVideoUrl.value = url;
|
||
showVideoPlayer.value = true;
|
||
};
|
||
|
||
// 场地管理相关方法
|
||
const loadVenueImages = async () => {
|
||
try {
|
||
const { data } = await api.getVenueImages(route.params.id);
|
||
venueImages.value = data;
|
||
} catch (error) {
|
||
console.error('加载场地图片失败:', error);
|
||
}
|
||
};
|
||
|
||
const uploadVenueImage = async (file) => {
|
||
const loadingToast = showToast({
|
||
type: 'loading',
|
||
message: '正在上传...',
|
||
forbidClick: true,
|
||
duration: 0
|
||
});
|
||
|
||
try {
|
||
const formData = new FormData();
|
||
formData.append('image', file.file);
|
||
formData.append('activityId', route.params.id);
|
||
formData.append('sortOrder', venueImages.value.length);
|
||
|
||
await api.uploadVenueImage(formData);
|
||
showToast('上传成功');
|
||
venueFiles.value = [];
|
||
await loadVenueImages();
|
||
} catch (error) {
|
||
console.error('上传失败:', error);
|
||
showToast('上传失败');
|
||
} finally {
|
||
loadingToast.clear();
|
||
}
|
||
};
|
||
|
||
const deleteVenueImage = async (id) => {
|
||
try {
|
||
await showConfirmDialog({
|
||
title: '确认删除',
|
||
message: '删除后无法恢复，确定要删除吗？',
|
||
});
|
||
await api.deleteVenueImage(id);
|
||
showToast('删除成功');
|
||
await loadVenueImages();
|
||
} catch (error) {
|
||
if (error !== 'cancel') {
|
||
console.error('删除失败:', error);
|
||
showToast('删除失败');
|
||
}
|
||
}
|
||
};
|
||
|
||
const updateVenueOrder = async (id, sortOrder) => {
|
||
try {
|
||
await api.updateVenueImageOrder(id, sortOrder);
|
||
showToast('排序已更新');
|
||
await loadVenueImages();
|
||
} catch (error) {
|
||
console.error('更新失败:', error);
|
||
showToast('更新失败');
|
||
}
|
||
};
|
||
|
||
// 地图选点相关（与Dashboard相同）
|
||
const initMapPicker = async () => {
|
||
try {
|
||
console.log('开始初始化地图选择器...');
|
||
// 等待地图加载
|
||
const AMap = await window.loadAMap();
|
||
console.log('地图API加载完成');
|
||
|
||
if (pickerMap) {
|
||
console.log('销毁旧地图实例');
|
||
pickerMap.destroy();
|
||
}
|
||
|
||
const center = activityForm.value.locationLat && activityForm.value.locationLng
|
||
? [activityForm.value.locationLng, activityForm.value.locationLat]
|
||
: [118.6762, 24.8742];
|
||
|
||
console.log('地图中心点:', center);
|
||
|
||
pickerMap = new AMap.Map('map-picker-container-manage', {
|
||
zoom: 15,
|
||
center: center
|
||
});
|
||
|
||
console.log('地图实例创建完成');
|
||
|
||
geocoder = new AMap.Geocoder();
|
||
console.log('地理编码器创建完成');
|
||
|
||
pickerMarker = new AMap.Marker({
|
||
position: center,
|
||
map: pickerMap,
|
||
draggable: true
|
||
});
|
||
|
||
console.log('地图标记创建完成');
|
||
|
||
if (activityForm.value.location) {
|
||
selectedLocation.value = {
|
||
name: activityForm.value.location,
|
||
lat: activityForm.value.locationLat,
|
||
lng: activityForm.value.locationLng
|
||
};
|
||
}
|
||
|
||
pickerMap.on('click', (e) => {
|
||
const { lng, lat } = e.lnglat;
|
||
pickerMarker.setPosition([lng, lat]);
|
||
|
||
selectedLocation.value = {
|
||
name: '获取地址中...',
|
||
lat: lat,
|
||
lng: lng
|
||
};
|
||
|
||
if (geocoder) {
|
||
geocoder.getAddress([lng, lat], (status, result) => {
|
||
if (status === 'complete' && result.info === 'OK') {
|
||
const address = result.regeocode.formattedAddress;
|
||
selectedLocation.value.name = address;
|
||
} else {
|
||
console.warn('逆地理编码失败:', status, result);
|
||
selectedLocation.value.name = `泉州市区 (${lat.toFixed(4)}, ${lng.toFixed(4)})`;
|
||
}
|
||
});
|
||
} else {
|
||
selectedLocation.value.name = `泉州市区 (${lat.toFixed(4)}, ${lng.toFixed(4)})`;
|
||
}
|
||
});
|
||
|
||
pickerMarker.on('dragend', (e) => {
|
||
const { lng, lat } = e.lnglat;
|
||
|
||
selectedLocation.value = {
|
||
name: '获取地址中...',
|
||
lat: lat,
|
||
lng: lng
|
||
};
|
||
|
||
if (geocoder) {
|
||
geocoder.getAddress([lng, lat], (status, result) => {
|
||
if (status === 'complete' && result.info === 'OK') {
|
||
const address = result.regeocode.formattedAddress;
|
||
selectedLocation.value.name = address;
|
||
} else {
|
||
console.warn('逆地理编码失败:', status, result);
|
||
selectedLocation.value.name = `泉州市区 (${lat.toFixed(4)}, ${lng.toFixed(4)})`;
|
||
}
|
||
});
|
||
} else {
|
||
selectedLocation.value.name = `泉州市区 (${lat.toFixed(4)}, ${lng.toFixed(4)})`;
|
||
}
|
||
});
|
||
|
||
console.log('地图初始化完成');
|
||
} catch (error) {
|
||
console.error('地图初始化失败:', error);
|
||
showToast('地图加载失败: ' + error.message);
|
||
}
|
||
};
|
||
|
||
const searchLocation = async () => {
|
||
if (!searchKeyword.value.trim()) {
|
||
showToast('请输入搜索关键词');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
console.log('开始搜索地点:', searchKeyword.value);
|
||
const AMap = await window.loadAMap();
|
||
|
||
if (!AMap.PlaceSearch) {
|
||
console.error('PlaceSearch插件未加载');
|
||
showToast('地图搜索功能未就绪');
|
||
return;
|
||
}
|
||
|
||
const placeSearch = new AMap.PlaceSearch({
|
||
pageSize: 10,
|
||
pageIndex: 1,
|
||
city: '泉州',
|
||
citylimit: false,
|
||
extensions: 'base'
|
||
});
|
||
|
||
placeSearch.search(searchKeyword.value, (status, result) => {
|
||
console.log('搜索状态:', status);
|
||
console.log('搜索结果:', result);
|
||
|
||
if (status === 'complete' && result.info === 'OK') {
|
||
if (result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
|
||
searchResults.value = result.poiList.pois.map(poi => ({
|
||
name: poi.name,
|
||
address: poi.address || poi.district || '',
|
||
lat: poi.location.lat,
|
||
lng: poi.location.lng
|
||
}));
|
||
console.log('搜索成功，找到', searchResults.value.length, '个结果');
|
||
} else {
|
||
searchResults.value = [];
|
||
showToast('未找到相关地点');
|
||
}
|
||
} else if (status === 'no_data') {
|
||
searchResults.value = [];
|
||
showToast('未找到相关地点');
|
||
} else {
|
||
console.error('搜索失败:', status, result);
|
||
searchResults.value = [];
|
||
showToast('搜索失败: ' + (result.info || status));
|
||
}
|
||
});
|
||
} catch (error) {
|
||
console.error('搜索异常:', error);
|
||
showToast('搜索失败: ' + error.message);
|
||
}
|
||
};
|
||
|
||
const selectSearchResult = (result) => {
|
||
selectedLocation.value = result;
|
||
pickerMarker.setPosition([result.lng, result.lat]);
|
||
pickerMap.setCenter([result.lng, result.lat]);
|
||
searchResults.value = [];
|
||
searchKeyword.value = '';
|
||
};
|
||
|
||
const clearSearch = () => {
|
||
searchResults.value = [];
|
||
};
|
||
|
||
const confirmLocation = () => {
|
||
if (selectedLocation.value.name) {
|
||
activityForm.value.location = selectedLocation.value.name;
|
||
activityForm.value.locationLat = selectedLocation.value.lat;
|
||
activityForm.value.locationLng = selectedLocation.value.lng;
|
||
showMapPicker.value = false;
|
||
} else {
|
||
showToast('请选择地点');
|
||
}
|
||
};
|
||
|
||
watch(showMapPicker, (val) => {
|
||
if (val) {
|
||
setTimeout(() => {
|
||
initMapPicker();
|
||
}, 300);
|
||
}
|
||
});
|
||
|
||
onMounted(loadData);
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import './prize-manage-styles.css';
|
||
|
||
.activity-manage {
|
||
min-height: 100vh;
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
/* 活动描述换行支持 */
|
||
.activity-manage :deep(.van-cell__label) {
|
||
white-space: pre-line;
|
||
}
|
||
|
||
/* Tab 样式优化 */
|
||
.activity-manage :deep(.van-tabs__nav) {
|
||
background: #fff;
|
||
}
|
||
|
||
.activity-manage :deep(.van-tabs__line) {
|
||
background: linear-gradient(135deg, #FF6700 0%, #FF8533 100%);
|
||
height: 3px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.activity-manage :deep(.van-tab) {
|
||
font-weight: 500;
|
||
color: #666;
|
||
}
|
||
|
||
.activity-manage :deep(.van-tab--active) {
|
||
font-weight: 700;
|
||
color: #FF6700;
|
||
}
|
||
|
||
.tab-content {
|
||
padding: 16px;
|
||
min-height: calc(100vh - 140px);
|
||
position: relative;
|
||
}
|
||
|
||
/* 悬浮添加按钮 */
|
||
.float-add-btn {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #FF6700 0%, #FF8533 100%);
|
||
box-shadow: 0 4px 12px rgba(255, 103, 0, 0.4);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 24px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.float-add-btn:active {
|
||
transform: scale(0.9);
|
||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
|
||
}
|
||
|
||
/* 媒体管理页面的悬浮按钮需要固定定位 */
|
||
.tab-content .van-uploader {
|
||
position: fixed;
|
||
right: 20px;
|
||
bottom: 80px;
|
||
z-index: 100;
|
||
}
|
||
|
||
/* 其他页面的悬浮按钮 */
|
||
.tab-content > .float-add-btn {
|
||
position: fixed;
|
||
right: 20px;
|
||
bottom: 80px;
|
||
z-index: 100;
|
||
}
|
||
|
||
/* 统一的信息统计卡片 */
|
||
.info-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 10px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
/* 报名情况tab的统计栏使用3列布局 */
|
||
.tab-content .info-stats.reg-stats {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
|
||
.stat-box {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||
border: 1px solid #f5f5f5;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.stat-box:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.stat-box.active {
|
||
border-color: #FF6700;
|
||
background: #fff7f0;
|
||
box-shadow: 0 2px 8px rgba(255, 103, 0, 0.15);
|
||
}
|
||
|
||
.stat-box .van-icon {
|
||
font-size: 26px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.stat-text {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.stat-num {
|
||
font-size: 20px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 2px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.stat-desc {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.expense-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.expense-item {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||
}
|
||
|
||
.expense-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 18px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.expense-content {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.expense-name {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.expense-meta {
|
||
display: flex;
|
||
gap: 8px;
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.expense-cat {
|
||
color: #FF6700;
|
||
}
|
||
|
||
.expense-note {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.expense-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 6px;
|
||
}
|
||
|
||
.expense-amount {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: #333;
|
||
}
|
||
|
||
.expense-actions {
|
||
display: flex;
|
||
gap: 10px;
|
||
color: #999;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.expense-actions .van-icon:active {
|
||
color: #FF6700;
|
||
}
|
||
|
||
/* 赞助商 */
|
||
.sponsor-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
margin-bottom: 80px;
|
||
}
|
||
|
||
.sponsor-card {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||
border: 1px solid #f0f0f0;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.sponsor-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 4px;
|
||
height: 100%;
|
||
background: linear-gradient(135deg, #FF6700 0%, #FF8533 100%);
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.sponsor-card:active::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
.sponsor-logo-wrapper {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.sponsor-logo {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 8px;
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-color: #f8f9fa;
|
||
border: 2px solid #e8e8e8;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.sponsor-logo .van-icon {
|
||
font-size: 24px;
|
||
color: #bbb;
|
||
}
|
||
|
||
.sponsor-card:active .sponsor-logo {
|
||
transform: scale(0.95);
|
||
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
|
||
}
|
||
|
||
.sponsor-details {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.sponsor-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.sponsor-name {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #1a1a1a;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.sponsor-badge {
|
||
padding: 3px 10px;
|
||
border-radius: 12px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: #fff;
|
||
white-space: nowrap;
|
||
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
|
||
}
|
||
|
||
.badge-title {
|
||
background: linear-gradient(135deg, #FF6700 0%, #FF8533 100%);
|
||
}
|
||
|
||
.badge-sponsor {
|
||
background: linear-gradient(135deg, #07c160 0%, #00d68f 100%);
|
||
}
|
||
|
||
.sponsor-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.sponsor-sort {
|
||
font-size: 12px;
|
||
color: #999;
|
||
padding: 2px 8px;
|
||
background: #f5f5f5;
|
||
border-radius: 4px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.sponsor-link {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
font-size: 12px;
|
||
color: #FF6700;
|
||
overflow: hidden;
|
||
flex: 1;
|
||
}
|
||
|
||
.sponsor-link .van-icon {
|
||
font-size: 13px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.sponsor-link span {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.sponsor-ops {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.sponsor-ops .van-icon {
|
||
font-size: 20px;
|
||
color: #999;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
padding: 8px;
|
||
border-radius: 8px;
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.sponsor-ops .van-icon:first-child:active {
|
||
color: #FF6700;
|
||
background: #fff7f0;
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
.sponsor-ops .van-icon:last-child:active {
|
||
color: #ee0a24;
|
||
background: #fff0f1;
|
||
transform: scale(0.9);
|
||
}
|
||
|
||
/* 报名列表 */
|
||
.search-box {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.reg-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.reg-item {
|
||
background: #fff;
|
||
border-radius: 16px;
|
||
padding: 14px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 12px;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
||
border: 2px solid #f5f5f5;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.reg-item:active {
|
||
background: #fafafa;
|
||
}
|
||
|
||
.reg-item.status-approved {
|
||
border-color: #52c41a;
|
||
}
|
||
|
||
.reg-item.status-rejected {
|
||
border-color: #ff4d4f;
|
||
}
|
||
|
||
.reg-item.checked-in {
|
||
border-color: #FF6700;
|
||
background: #fff7f0;
|
||
}
|
||
|
||
.reg-left {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
min-width: 0;
|
||
}
|
||
|
||
.reg-avatar {
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #FF6700 0%, #FF8533 100%);
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.reg-main {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.reg-top {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.reg-name {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.reg-tags {
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
.reg-info {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px 14px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.reg-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.reg-right .van-icon {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.status-indicators {
|
||
display: flex;
|
||
gap: 6px;
|
||
align-items: center;
|
||
}
|
||
|
||
.status-dot {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #f5f5f5;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.status-dot .van-icon {
|
||
font-size: 14px;
|
||
color: #999;
|
||
}
|
||
|
||
.status-dot.status-approved {
|
||
background: #e8f5e9;
|
||
}
|
||
|
||
.status-dot.status-approved .van-icon {
|
||
color: #07c160;
|
||
}
|
||
|
||
.status-dot.status-rejected {
|
||
background: #ffebee;
|
||
}
|
||
|
||
.status-dot.status-rejected .van-icon {
|
||
color: #ee0a24;
|
||
}
|
||
|
||
.status-dot.status-pending {
|
||
background: #fff3e0;
|
||
}
|
||
|
||
.status-dot.status-pending .van-icon {
|
||
color: #ffa940;
|
||
}
|
||
|
||
.status-dot.status-active {
|
||
background: #e3f2fd;
|
||
}
|
||
|
||
.status-dot.status-active .van-icon {
|
||
color: #1989fa;
|
||
}
|
||
|
||
.info-link,
|
||
.info-text {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
color: #666;
|
||
}
|
||
|
||
.info-link {
|
||
color: #FF6700;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.info-link:active {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.info-text .van-icon,
|
||
.info-link .van-icon {
|
||
font-size: 13px;
|
||
color: #999;
|
||
}
|
||
|
||
.car-number {
|
||
color: #FF6700;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.car-number:active {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.people-count {
|
||
color: #FF6700;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.people-count:active {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* 移除旧的 reg-right 样式，已在上面重新定义 */
|
||
|
||
/* 弹窗 */
|
||
.form-popup {
|
||
max-height: 80vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #fff;
|
||
border-radius: 16px 16px 0 0;
|
||
}
|
||
|
||
.popup-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.popup-header h3 {
|
||
font-size: 18px;
|
||
margin: 0;
|
||
color: #1a1a1a;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.popup-header .van-icon {
|
||
font-size: 20px;
|
||
color: #999;
|
||
}
|
||
|
||
.popup-form {
|
||
padding: 0;
|
||
overflow-y: auto;
|
||
flex: 1;
|
||
}
|
||
|
||
.popup-form .van-cell-group {
|
||
margin: 0;
|
||
background: #fff;
|
||
}
|
||
|
||
.popup-form .van-cell {
|
||
padding: 14px 20px;
|
||
}
|
||
|
||
.popup-form .van-field__label {
|
||
width: 80px;
|
||
color: #333;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.popup-form .van-field__control {
|
||
color: #1a1a1a;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.popup-form .van-field__control::placeholder {
|
||
color: #bbb;
|
||
}
|
||
|
||
.form-actions {
|
||
margin: 0;
|
||
padding: 16px 20px 20px;
|
||
flex-shrink: 0;
|
||
background: #fff;
|
||
border-top: 1px solid #f5f5f5;
|
||
}
|
||
|
||
.form-actions .van-button {
|
||
height: 48px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 地图选点 */
|
||
.map-picker {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.map-picker-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.map-picker-header h3 {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
margin: 0;
|
||
color: #333;
|
||
}
|
||
|
||
.map-picker-header .van-icon {
|
||
font-size: 20px;
|
||
color: #333;
|
||
}
|
||
|
||
.map-search {
|
||
padding: 12px 16px;
|
||
background: #fff;
|
||
}
|
||
|
||
.search-results {
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
background: #fff;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.search-result-item {
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.search-result-item:active {
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.result-name {
|
||
font-size: 14px;
|
||
color: #333;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.result-address {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.map-container {
|
||
flex: 1;
|
||
width: 100%;
|
||
}
|
||
|
||
.selected-location {
|
||
padding: 12px 16px;
|
||
background: #fff;
|
||
border-top: 1px solid #f0f0f0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.selected-location .van-icon {
|
||
color: #667eea;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.selected-location span {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
/* 媒体管理 */
|
||
.media-section {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 12px;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
color: #333;
|
||
}
|
||
|
||
.media-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.media-card {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||
border: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.card-thumb {
|
||
width: 100%;
|
||
height: 180px;
|
||
position: relative;
|
||
background: #f5f5f5;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.card-thumb .van-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.video-thumb {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
|
||
.video-thumb video {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.play-btn {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
font-size: 36px;
|
||
color: rgba(255,255,255,0.9);
|
||
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
|
||
pointer-events: none;
|
||
}
|
||
|
||
.card-info {
|
||
padding: 10px 12px;
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.uploader {
|
||
font-size: 12px;
|
||
color: #999;
|
||
}
|
||
|
||
.action-row {
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
.action-row .van-button {
|
||
flex: 1;
|
||
}
|
||
|
||
.media-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 8px;
|
||
}
|
||
|
||
.grid-item {
|
||
position: relative;
|
||
width: 100%;
|
||
padding-top: 100%;
|
||
background: #f5f5f5;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.grid-item .van-image,
|
||
.grid-item .video-thumb {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.del-btn {
|
||
position: absolute;
|
||
top: 4px;
|
||
right: 4px;
|
||
width: 22px;
|
||
height: 22px;
|
||
background: rgba(0,0,0,0.6);
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 10;
|
||
}
|
||
|
||
.del-btn:active {
|
||
background: rgba(0,0,0,0.8);
|
||
}
|
||
|
||
.video-player-popup {
|
||
padding: 20px;
|
||
background: #000;
|
||
border-radius: 16px;
|
||
}
|
||
|
||
.popup-video {
|
||
width: 100%;
|
||
max-height: 60vh;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
/* 场地管理 */
|
||
.venue-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
|
||
.venue-item {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
|
||
border: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.venue-thumb {
|
||
width: 100%;
|
||
height: 200px;
|
||
background: #f5f5f5;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.venue-thumb .van-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.venue-actions {
|
||
padding: 12px;
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.venue-actions .van-field {
|
||
flex: 1;
|
||
}
|
||
|
||
.venue-actions .van-button {
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* 分类选择器 */
|
||
.category-picker {
|
||
padding: 20px;
|
||
max-height: 60vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.picker-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.picker-header h3 {
|
||
font-size: 18px;
|
||
margin: 0;
|
||
color: #1a1a1a;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.picker-header .van-icon {
|
||
font-size: 20px;
|
||
color: #999;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.category-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 16px;
|
||
}
|
||
|
||
.category-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 16px 8px;
|
||
background: #f8f9fa;
|
||
border-radius: 12px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.category-item:active {
|
||
transform: scale(0.95);
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
.category-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 22px;
|
||
}
|
||
|
||
.category-item span {
|
||
font-size: 13px;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.datetime-picker-popup {
|
||
background: #fff;
|
||
border-radius: 16px 16px 0 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.picker-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16px 20px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.picker-header h3 {
|
||
font-size: 16px;
|
||
margin: 0;
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.picker-body {
|
||
padding: 20px;
|
||
}
|
||
|
||
.datetime-input {
|
||
width: 100%;
|
||
padding: 12px;
|
||
font-size: 16px;
|
||
border: 1px solid #e8e8e8;
|
||
border-radius: 8px;
|
||
outline: none;
|
||
color: #333;
|
||
}
|
||
|
||
.datetime-input:focus {
|
||
border-color: #667eea;
|
||
}
|
||
|
||
.category-item:active {
|
||
transform: scale(0.95);
|
||
background: #e9ecef;
|
||
}
|
||
|
||
.category-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-size: 24px;
|
||
}
|
||
|
||
/* 经费媒体上传 */
|
||
.expense-media-upload {
|
||
width: 100%;
|
||
}
|
||
|
||
.existing-media {
|
||
margin-top: 12px;
|
||
}
|
||
|
||
.media-section-title {
|
||
font-size: 13px;
|
||
color: #666;
|
||
margin-bottom: 8px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.media-list {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.media-thumb {
|
||
position: relative;
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.media-thumb .van-image,
|
||
.media-thumb .video-thumb {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.media-thumb .remove-icon {
|
||
position: absolute;
|
||
top: 4px;
|
||
right: 4px;
|
||
width: 20px;
|
||
height: 20px;
|
||
background: rgba(0,0,0,0.6);
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* 人数修改弹窗 */
|
||
.people-count-dialog {
|
||
padding: 20px;
|
||
background: #fff;
|
||
border-radius: 16px;
|
||
}
|
||
|
||
.people-count-dialog .dialog-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.people-count-dialog .dialog-header h3 {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
color: #333;
|
||
margin: 0;
|
||
}
|
||
|
||
.people-count-dialog .dialog-header .van-icon {
|
||
font-size: 20px;
|
||
color: #999;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.people-count-dialog .dialog-content {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.people-count-dialog .count-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
margin-bottom: 20px;
|
||
padding: 12px;
|
||
background: #f8f9fa;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.people-count-dialog .info-label {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
}
|
||
|
||
.people-count-dialog .info-desc {
|
||
font-size: 13px;
|
||
color: #666;
|
||
}
|
||
|
||
.people-count-dialog .van-stepper {
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.people-count-dialog .dialog-actions {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.people-count-dialog .dialog-actions .van-button {
|
||
height: 44px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 已签到状态特殊样式 */
|
||
.reg-item.checked-in {
|
||
border-color: #FF6700;
|
||
background: #fff7f0;
|
||
}
|
||
|
||
/* 报名详情弹窗 */
|
||
.reg-detail-popup {
|
||
max-height: 70vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #fff;
|
||
border-radius: 16px 16px 0 0;
|
||
}
|
||
|
||
.detail-content {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 0 20px 20px;
|
||
}
|
||
|
||
.detail-section {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.detail-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
}
|
||
|
||
.detail-row.status-row {
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
gap: 12px;
|
||
}
|
||
|
||
.status-controls {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
background: #f7f8fa;
|
||
padding: 12px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.status-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.status-name {
|
||
font-size: 14px;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.detail-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.detail-label {
|
||
font-size: 14px;
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.detail-value {
|
||
font-size: 14px;
|
||
color: #333;
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.detail-link {
|
||
color: #FF6700;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.detail-link:active {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.detail-actions {
|
||
padding: 16px 20px 20px;
|
||
border-top: 1px solid #f5f5f5;
|
||
}
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
|
||
.action-buttons .van-button {
|
||
flex: 1;
|
||
}
|
||
</style>
|