1. 礼物特效
This commit is contained in:
李琦
@@ -1054,11 +1054,176 @@
|
||||
<template v-else-if="column.key==='created_at'">
|
||||
<span class="text-[12px] text-[#8A8680]">{{ formatTime(record.created_at) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key==='actions'">
|
||||
<a-button size="small" danger type="text" @click="onDeleteRsvp(record)">删除</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 礼金 -->
|
||||
<section v-if="activeTab === 'cash'">
|
||||
<div class="admin-panel">
|
||||
<div class="flex justify-between items-center mb-4 gap-3 flex-wrap">
|
||||
<div>
|
||||
<div class="text-sm text-[#2c2c2c]">礼金记录</div>
|
||||
<div class="text-[11px] text-[#8A8680] mt-0.5">
|
||||
共 {{ cashGiftCount }} 笔 · 合计 ¥{{ cashGiftTotal }}
|
||||
· 前台录入 <a class="text-[#a88c6b]" href="/lijin" target="_blank">/lijin</a>
|
||||
· 明细 <a class="text-[#a88c6b]" href="/lijin/list" target="_blank">/lijin/list</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a-button size="small" @click="openCashGiftCreate">新增</a-button>
|
||||
<a-button size="small" :loading="cashGiftLoading" @click="loadCashGifts">
|
||||
<i class="fa-solid fa-rotate-right mr-1"></i>刷新
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<a-table
|
||||
class="admin-table"
|
||||
:columns="cashGiftColumns"
|
||||
:data-source="cashGiftList"
|
||||
:loading="cashGiftLoading"
|
||||
row-key="id"
|
||||
size="middle"
|
||||
:pagination="{ pageSize: 10, hideOnSinglePage: true }"
|
||||
>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key==='amount'">
|
||||
<span class="text-[#a88c6b] font-medium">¥{{ record.amount }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key==='created_at'">
|
||||
<span class="text-[12px] text-[#8A8680]">{{ formatTime(record.created_at) }}</span>
|
||||
</template>
|
||||
<template v-else-if="column.key==='actions'">
|
||||
<a-space>
|
||||
<a-button size="small" type="link" class="!text-[#a88c6b] !px-1" @click="openCashGiftEdit(record)">编辑</a-button>
|
||||
<a-button size="small" danger type="text" @click="onDeleteCashGift(record)">删除</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
|
||||
<div class="admin-panel mt-4">
|
||||
<div class="flex justify-between items-center mb-3 gap-3 flex-wrap">
|
||||
<div>
|
||||
<div class="text-sm text-[#2c2c2c]">记账口令</div>
|
||||
<div class="text-[11px] text-[#8A8680] mt-0.5">
|
||||
前台 <a class="text-[#a88c6b]" href="/lijin" target="_blank">/lijin</a> 登记礼金前需输入此口令
|
||||
</div>
|
||||
</div>
|
||||
<a-button
|
||||
size="small"
|
||||
type="primary"
|
||||
class="!bg-[#a88c6b] !border-[#a88c6b]"
|
||||
:loading="cashEntryPassSaving"
|
||||
@click="saveCashEntryPass"
|
||||
>保存口令</a-button>
|
||||
</div>
|
||||
<a-input-password
|
||||
v-model:value="cashEntryPass"
|
||||
placeholder="设置记账口令"
|
||||
class="!max-w-[320px]"
|
||||
:maxlength="64"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="admin-panel mt-4">
|
||||
<div class="flex justify-between items-center mb-3 gap-3 flex-wrap">
|
||||
<div>
|
||||
<div class="text-sm text-[#2c2c2c]">查看全部口令</div>
|
||||
<div class="text-[11px] text-[#8A8680] mt-0.5">
|
||||
前台 <a class="text-[#a88c6b]" href="/lijin/list" target="_blank">/lijin/list</a> 需输入口令后查看完整礼金列表
|
||||
</div>
|
||||
</div>
|
||||
<a-button
|
||||
size="small"
|
||||
type="primary"
|
||||
class="!bg-[#a88c6b] !border-[#a88c6b]"
|
||||
:loading="cashViewPassSaving"
|
||||
@click="saveCashViewPass"
|
||||
>保存口令</a-button>
|
||||
</div>
|
||||
<a-input-password
|
||||
v-model:value="cashViewPass"
|
||||
placeholder="设置查看口令"
|
||||
class="!max-w-[320px]"
|
||||
:maxlength="64"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="admin-panel mt-4">
|
||||
<div class="flex justify-between items-center mb-3 gap-3 flex-wrap">
|
||||
<div>
|
||||
<div class="text-sm text-[#2c2c2c]">备注快捷选项</div>
|
||||
<div class="text-[11px] text-[#8A8680] mt-0.5">前台礼金页可一键点选；男方 / 女方分开配置</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<a-button size="small" @click="resetCashNotePresets">恢复默认</a-button>
|
||||
<a-button
|
||||
size="small"
|
||||
type="primary"
|
||||
class="!bg-[#a88c6b] !border-[#a88c6b]"
|
||||
:loading="cashNotesSaving"
|
||||
@click="saveCashNotePresets"
|
||||
>保存选项</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
<a-tag
|
||||
v-for="(n, i) in cashNotePresets"
|
||||
:key="`${n}-${i}`"
|
||||
closable
|
||||
color="gold"
|
||||
@close.prevent="removeCashNotePreset(i)"
|
||||
>{{ n }}</a-tag>
|
||||
</div>
|
||||
<div class="flex gap-2 items-center flex-wrap">
|
||||
<a-input
|
||||
v-model:value="cashNoteDraft"
|
||||
placeholder="新增快捷备注，如：男方亲戚"
|
||||
class="!max-w-[280px]"
|
||||
:maxlength="30"
|
||||
@pressEnter="addCashNotePreset"
|
||||
/>
|
||||
<a-button size="small" @click="addCashNotePreset">添加</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-modal
|
||||
v-model:open="cashGiftModalOpen"
|
||||
:title="cashGiftEditingId ? '编辑礼金' : '新增礼金'"
|
||||
ok-text="保存"
|
||||
cancel-text="取消"
|
||||
:confirm-loading="cashGiftSaving"
|
||||
@ok="saveCashGiftModal"
|
||||
>
|
||||
<a-form layout="vertical" class="mt-2">
|
||||
<a-form-item label="姓名" required>
|
||||
<a-input v-model:value="cashGiftForm.name" placeholder="宾客姓名" :maxlength="20" />
|
||||
</a-form-item>
|
||||
<a-form-item label="金额（元）" required>
|
||||
<a-input-number v-model:value="cashGiftForm.amount" :min="1" :max="10000000" class="w-full" />
|
||||
</a-form-item>
|
||||
<a-form-item label="备注">
|
||||
<div class="flex flex-wrap gap-1.5 mb-2">
|
||||
<a-tag
|
||||
v-for="n in cashNotePresets"
|
||||
:key="'m-' + n"
|
||||
class="!cursor-pointer"
|
||||
:color="cashGiftForm.note === n ? 'gold' : undefined"
|
||||
@click="cashGiftForm.note = n"
|
||||
>{{ n }}</a-tag>
|
||||
</div>
|
||||
<a-input v-model:value="cashGiftForm.note" placeholder="可选" :maxlength="100" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</section>
|
||||
|
||||
<!-- 弹幕审核 -->
|
||||
<section v-if="activeTab === 'danmaku'">
|
||||
<div class="admin-panel">
|
||||
@@ -1134,9 +1299,13 @@ import { PieChart } from 'echarts/charts'
|
||||
import { TooltipComponent, LegendComponent } from 'echarts/components'
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import {
|
||||
getConfigSection, saveConfigSection, uploadImage, getRsvpList, getUploadConfig, saveUploadConfig,
|
||||
getConfigSection, saveConfigSection, uploadImage, getRsvpList, deleteRsvp, getUploadConfig, saveUploadConfig,
|
||||
getDanmakuList, updateDanmakuStatus, getVisitStats, getVisitList,
|
||||
getPosterConfig, savePosterConfig, getGiftStats, saveGiftCosts,
|
||||
getCashGiftList, updateCashGift, deleteCashGift, submitCashGift,
|
||||
getCashGiftNotes, saveCashGiftNotes,
|
||||
getCashGiftViewPass, saveCashGiftViewPass,
|
||||
getCashGiftEntryPass, saveCashGiftEntryPass,
|
||||
} from '@/api/wedding'
|
||||
import { useAdminStore } from '@/stores/admin'
|
||||
import ImageField from '@/components/ImageField.vue'
|
||||
@@ -1158,7 +1327,7 @@ const adminStore = useAdminStore()
|
||||
const TAB_KEY = 'wedding_admin_active_tab'
|
||||
const MENU_LAYOUT_KEY = 'wedding_admin_menu_layout'
|
||||
const CONFIG_SECTIONS = ['basic', 'copy', 'visual', 'music', 'photos', 'schedule']
|
||||
const VALID_TABS = ['overview', 'gifts', 'visits', ...CONFIG_SECTIONS, 'upload', 'poster', 'rsvp', 'danmaku']
|
||||
const VALID_TABS = ['overview', 'gifts', 'visits', ...CONFIG_SECTIONS, 'upload', 'poster', 'rsvp', 'cash', 'danmaku']
|
||||
|
||||
/** 后台菜单分组 */
|
||||
const adminMenuGroups = [
|
||||
@@ -1188,6 +1357,7 @@ const adminMenuGroups = [
|
||||
label: '宾客互动',
|
||||
items: [
|
||||
{ key: 'rsvp', label: '出席回执', icon: 'fa-solid fa-envelope-open-text' },
|
||||
{ key: 'cash', label: '礼金', icon: 'fa-solid fa-yen-sign' },
|
||||
{ key: 'danmaku', label: '弹幕审核', icon: 'fa-solid fa-comments' },
|
||||
],
|
||||
},
|
||||
@@ -1258,6 +1428,22 @@ const posterMusicOptions = ref([])
|
||||
const tabLoading = ref(false)
|
||||
const rsvpLoading = ref(false)
|
||||
const rsvpList = ref([])
|
||||
const cashGiftLoading = ref(false)
|
||||
const cashGiftSaving = ref(false)
|
||||
const cashGiftList = ref([])
|
||||
const cashGiftTotal = ref(0)
|
||||
const cashGiftCount = ref(0)
|
||||
const cashGiftModalOpen = ref(false)
|
||||
const cashGiftEditingId = ref(0)
|
||||
const cashGiftForm = reactive({ name: '', amount: 1000, note: '' })
|
||||
const cashNotePresets = ref([])
|
||||
const cashNoteDefaults = ref([])
|
||||
const cashNoteDraft = ref('')
|
||||
const cashNotesSaving = ref(false)
|
||||
const cashViewPass = ref('')
|
||||
const cashViewPassSaving = ref(false)
|
||||
const cashEntryPass = ref('')
|
||||
const cashEntryPassSaving = ref(false)
|
||||
const danmakuLoading = ref(false)
|
||||
const danmakuList = ref([])
|
||||
const danmakuFilter = ref('pending')
|
||||
@@ -2167,6 +2353,10 @@ async function onTabActivate(tab) {
|
||||
await loadRsvp()
|
||||
return
|
||||
}
|
||||
if (tab === 'cash') {
|
||||
await Promise.all([loadCashGifts(), loadCashNotePresets(), loadCashViewPass(), loadCashEntryPass()])
|
||||
return
|
||||
}
|
||||
if (tab === 'danmaku') {
|
||||
await loadDanmaku()
|
||||
}
|
||||
@@ -2190,6 +2380,7 @@ const rsvpColumns = [
|
||||
{ title: '出席', dataIndex: 'guest_count', key: 'guest_count' },
|
||||
{ title: '祝福', dataIndex: 'wishes', key: 'wishes', ellipsis: true },
|
||||
{ title: '提交时间', dataIndex: 'created_at', key: 'created_at' },
|
||||
{ title: '操作', key: 'actions', width: 90 },
|
||||
]
|
||||
const rsvpCountLabel = (v) => ({ '1': '1 人出席', '2': '2 人出席', '3': '3 人及以上', '0': '遗憾缺席' }[v] || v)
|
||||
function formatTime(t) {
|
||||
@@ -2204,6 +2395,182 @@ async function loadRsvp() {
|
||||
catch (e) { /* 忽略 */ }
|
||||
finally { rsvpLoading.value = false }
|
||||
}
|
||||
async function onDeleteRsvp(record) {
|
||||
if (!record?.id) return
|
||||
try {
|
||||
await deleteRsvp(record.id)
|
||||
message.success('已删除')
|
||||
await loadRsvp()
|
||||
} catch (e) {
|
||||
message.error(e?.message || '删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
const cashGiftColumns = [
|
||||
{ title: '姓名', dataIndex: 'name', key: 'name', width: 120 },
|
||||
{ title: '金额', key: 'amount', width: 110 },
|
||||
{ title: '备注', dataIndex: 'note', key: 'note', ellipsis: true },
|
||||
{ title: '时间', dataIndex: 'created_at', key: 'created_at', width: 170 },
|
||||
{ title: '操作', key: 'actions', width: 140 },
|
||||
]
|
||||
async function loadCashGifts() {
|
||||
cashGiftLoading.value = true
|
||||
try {
|
||||
const res = await getCashGiftList()
|
||||
const data = res.data || {}
|
||||
cashGiftList.value = Array.isArray(data.list) ? data.list : []
|
||||
cashGiftTotal.value = Number(data.total) || 0
|
||||
cashGiftCount.value = Number(data.count) || cashGiftList.value.length
|
||||
} catch {
|
||||
cashGiftList.value = []
|
||||
cashGiftTotal.value = 0
|
||||
cashGiftCount.value = 0
|
||||
} finally {
|
||||
cashGiftLoading.value = false
|
||||
}
|
||||
}
|
||||
function openCashGiftCreate() {
|
||||
cashGiftEditingId.value = 0
|
||||
cashGiftForm.name = ''
|
||||
cashGiftForm.amount = 1000
|
||||
cashGiftForm.note = ''
|
||||
cashGiftModalOpen.value = true
|
||||
}
|
||||
function openCashGiftEdit(record) {
|
||||
cashGiftEditingId.value = record.id
|
||||
cashGiftForm.name = record.name || ''
|
||||
cashGiftForm.amount = Number(record.amount) || 0
|
||||
cashGiftForm.note = record.note || ''
|
||||
cashGiftModalOpen.value = true
|
||||
}
|
||||
async function saveCashGiftModal() {
|
||||
const name = String(cashGiftForm.name || '').trim()
|
||||
const amount = Math.round(Number(cashGiftForm.amount))
|
||||
if (!name) {
|
||||
message.error('请填写姓名')
|
||||
return Promise.reject()
|
||||
}
|
||||
if (!Number.isFinite(amount) || amount <= 0) {
|
||||
message.error('请填写正确金额')
|
||||
return Promise.reject()
|
||||
}
|
||||
cashGiftSaving.value = true
|
||||
try {
|
||||
const payload = { name, amount, note: String(cashGiftForm.note || '').trim() }
|
||||
if (cashGiftEditingId.value) await updateCashGift(cashGiftEditingId.value, payload)
|
||||
else await submitCashGift(payload)
|
||||
message.success('已保存')
|
||||
cashGiftModalOpen.value = false
|
||||
await loadCashGifts()
|
||||
} catch (e) {
|
||||
if (e) message.error(e?.message || '保存失败')
|
||||
return Promise.reject(e)
|
||||
} finally {
|
||||
cashGiftSaving.value = false
|
||||
}
|
||||
}
|
||||
async function onDeleteCashGift(record) {
|
||||
if (!record?.id) return
|
||||
try {
|
||||
await deleteCashGift(record.id)
|
||||
message.success('已删除')
|
||||
await loadCashGifts()
|
||||
} catch (e) {
|
||||
message.error(e?.message || '删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function loadCashNotePresets() {
|
||||
try {
|
||||
const res = await getCashGiftNotes()
|
||||
cashNotePresets.value = Array.isArray(res.data?.notes) ? [...res.data.notes] : []
|
||||
cashNoteDefaults.value = Array.isArray(res.data?.defaults) ? [...res.data.defaults] : []
|
||||
} catch {
|
||||
cashNotePresets.value = []
|
||||
cashNoteDefaults.value = []
|
||||
}
|
||||
}
|
||||
|
||||
async function loadCashViewPass() {
|
||||
try {
|
||||
const res = await getCashGiftViewPass()
|
||||
cashViewPass.value = res.data?.password || ''
|
||||
} catch {
|
||||
cashViewPass.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
async function saveCashViewPass() {
|
||||
const password = String(cashViewPass.value || '').trim()
|
||||
if (!password) return message.error('请设置查看口令')
|
||||
cashViewPassSaving.value = true
|
||||
try {
|
||||
await saveCashGiftViewPass(password)
|
||||
message.success('查看口令已保存')
|
||||
} catch (e) {
|
||||
message.error(e?.message || '保存失败')
|
||||
} finally {
|
||||
cashViewPassSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function loadCashEntryPass() {
|
||||
try {
|
||||
const res = await getCashGiftEntryPass()
|
||||
cashEntryPass.value = res.data?.password || ''
|
||||
} catch {
|
||||
cashEntryPass.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
async function saveCashEntryPass() {
|
||||
const password = String(cashEntryPass.value || '').trim()
|
||||
if (!password) return message.error('请设置记账口令')
|
||||
cashEntryPassSaving.value = true
|
||||
try {
|
||||
await saveCashGiftEntryPass(password)
|
||||
message.success('记账口令已保存')
|
||||
} catch (e) {
|
||||
message.error(e?.message || '保存失败')
|
||||
} finally {
|
||||
cashEntryPassSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function addCashNotePreset() {
|
||||
const v = String(cashNoteDraft.value || '').trim()
|
||||
if (!v) return
|
||||
if (cashNotePresets.value.includes(v)) {
|
||||
message.warning('已存在该选项')
|
||||
return
|
||||
}
|
||||
cashNotePresets.value.push(v)
|
||||
cashNoteDraft.value = ''
|
||||
}
|
||||
|
||||
function removeCashNotePreset(index) {
|
||||
cashNotePresets.value.splice(index, 1)
|
||||
}
|
||||
|
||||
function resetCashNotePresets() {
|
||||
cashNotePresets.value = cashNoteDefaults.value.length
|
||||
? [...cashNoteDefaults.value]
|
||||
: ['男方亲戚', '女方亲戚', '男方朋友', '女方朋友', '男方同学', '女方同学', '男方同事', '女方同事', '男方邻居', '女方邻居', '其他']
|
||||
}
|
||||
|
||||
async function saveCashNotePresets() {
|
||||
if (!cashNotePresets.value.length) return message.error('至少保留一个快捷备注')
|
||||
cashNotesSaving.value = true
|
||||
try {
|
||||
const res = await saveCashGiftNotes(cashNotePresets.value)
|
||||
cashNotePresets.value = Array.isArray(res.data?.notes) ? [...res.data.notes] : [...cashNotePresets.value]
|
||||
message.success('备注选项已保存')
|
||||
} catch (e) {
|
||||
message.error(e?.message || '保存失败')
|
||||
} finally {
|
||||
cashNotesSaving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const danmakuColumns = [
|
||||
{ title: '姓名', dataIndex: 'name', key: 'name', width: 100 },
|
||||
@@ -2353,7 +2720,8 @@ onUnmounted(() => {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.admin-shell--top {
|
||||
max-width: 1040px;
|
||||
max-width: 80vw;
|
||||
width: 80vw;
|
||||
}
|
||||
.admin-shell--side {
|
||||
max-width: 1220px;
|
||||
|
||||
@@ -40,6 +40,7 @@
|
||||
ref="danmakuLayerRef"
|
||||
:enabled="!!data.danmakuEnabled && showDanmaku"
|
||||
:show-time="!!data.danmakuShowTime"
|
||||
:area="danmakuArea"
|
||||
:active="effectsActive"
|
||||
/>
|
||||
|
||||
@@ -62,15 +63,43 @@
|
||||
<img v-if="isAutoScroll" src="https://api.iconify.design/lucide:pause.svg?color=%23a88c6b" class="w-4 h-4" />
|
||||
<img v-else src="https://api.iconify.design/lucide:play.svg?color=%23a88c6b" class="w-4 h-4 ml-0.5" />
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="control-btn cursor-pointer transition-all duration-300"
|
||||
:class="showDanmaku ? 'bg-[#a88c6b]/15 !border-[#a88c6b]/60 shadow-sm' : 'bg-white/60 shadow-sm border-[#a88c6b]/30 opacity-55'"
|
||||
:title="showDanmaku ? '关闭弹幕' : '开启弹幕'"
|
||||
@click.stop="toggleShowDanmaku"
|
||||
>
|
||||
<i class="fa-solid fa-comment-dots text-[13px]" :class="showDanmaku ? 'text-[#a88c6b]' : 'text-[#a88c6b]/70'"></i>
|
||||
</button>
|
||||
<div class="relative">
|
||||
<button
|
||||
type="button"
|
||||
class="control-btn cursor-pointer transition-all duration-300"
|
||||
:class="showDanmaku ? 'bg-[#a88c6b]/15 !border-[#a88c6b]/60 shadow-sm' : 'bg-white/60 shadow-sm border-[#a88c6b]/30 opacity-55'"
|
||||
:title="showDanmaku ? '关闭弹幕（长按设范围）' : '开启弹幕（长按设范围）'"
|
||||
style="touch-action: manipulation; user-select: none; -webkit-user-select: none;"
|
||||
@click.stop="onDanmakuBtnClick"
|
||||
@touchstart.prevent="onDanmakuPressStart"
|
||||
@touchend="onDanmakuPressEnd"
|
||||
@touchcancel="onDanmakuPressCancel"
|
||||
@mousedown="onDanmakuPressStart"
|
||||
@mouseup="onDanmakuPressEnd"
|
||||
@mouseleave="onDanmakuPressCancel"
|
||||
>
|
||||
<i class="fa-solid fa-comment-dots text-[13px]" :class="showDanmaku ? 'text-[#a88c6b]' : 'text-[#a88c6b]/70'"></i>
|
||||
</button>
|
||||
<div
|
||||
v-if="showDanmakuAreaMenu"
|
||||
class="danmaku-area-menu"
|
||||
@click.stop
|
||||
>
|
||||
<button
|
||||
v-for="opt in danmakuAreaOptions"
|
||||
:key="opt.value"
|
||||
type="button"
|
||||
class="danmaku-area-opt"
|
||||
:class="{ active: danmakuArea === opt.value }"
|
||||
:title="opt.title"
|
||||
@click="selectDanmakuArea(opt.value)"
|
||||
>
|
||||
<span class="danmaku-area-phone" aria-hidden="true">
|
||||
<span class="danmaku-area-zone" :data-area="opt.value" />
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="control-btn cursor-pointer transition-all duration-300"
|
||||
@@ -798,6 +827,7 @@ import { DANMAKU_COLORS, DANMAKU_GRADIENT_COLORS, DEFAULT_DANMAKU_COLOR, BLESSIN
|
||||
import { parseLrc, formatAudioTime, findLrcIndex } from '@/utils/parseLrc'
|
||||
import CanvasEffects from '@/components/CanvasEffects.vue'
|
||||
import DanmakuLayer from '@/components/DanmakuLayer.vue'
|
||||
import { DANMAKU_AREA_OPTIONS, DEFAULT_DANMAKU_AREA } from '@/utils/danmakuArea'
|
||||
import LikeBurst from '@/components/LikeBurst.vue'
|
||||
import GiftEffect from '@/components/GiftEffect.vue'
|
||||
import GiftFeed from '@/components/GiftFeed.vue'
|
||||
@@ -1046,6 +1076,7 @@ const handleQuickLike = (n) => {
|
||||
}
|
||||
|
||||
const DANMAKU_PREF_KEY = 'wedding_show_danmaku_v1'
|
||||
const DANMAKU_AREA_KEY = 'wedding_danmaku_area_v1'
|
||||
const GIFT_FX_PREF_KEY = 'wedding_show_gift_fx_v1'
|
||||
const readPref = (key, fallback = true) => {
|
||||
try {
|
||||
@@ -1056,9 +1087,91 @@ const readPref = (key, fallback = true) => {
|
||||
return fallback
|
||||
}
|
||||
}
|
||||
const readDanmakuArea = () => {
|
||||
try {
|
||||
const v = localStorage.getItem(DANMAKU_AREA_KEY)
|
||||
if (DANMAKU_AREA_OPTIONS.some((o) => o.value === v)) return v
|
||||
} catch { /* ignore */ }
|
||||
return DEFAULT_DANMAKU_AREA
|
||||
}
|
||||
const showDanmaku = ref(readPref(DANMAKU_PREF_KEY, true))
|
||||
const showGiftFx = ref(readPref(GIFT_FX_PREF_KEY, true))
|
||||
const danmakuArea = ref(readDanmakuArea())
|
||||
const danmakuAreaOptions = DANMAKU_AREA_OPTIONS
|
||||
const showDanmakuAreaMenu = ref(false)
|
||||
let danmakuPressTimer = null
|
||||
let danmakuPressFired = false
|
||||
let danmakuSkipClick = false
|
||||
let danmakuAreaMenuHideTimer = null
|
||||
|
||||
const hideDanmakuAreaMenuSoon = () => {
|
||||
clearTimeout(danmakuAreaMenuHideTimer)
|
||||
danmakuAreaMenuHideTimer = setTimeout(() => {
|
||||
showDanmakuAreaMenu.value = false
|
||||
}, 4500)
|
||||
}
|
||||
|
||||
const clearDanmakuPressTimer = () => {
|
||||
if (danmakuPressTimer) {
|
||||
clearTimeout(danmakuPressTimer)
|
||||
danmakuPressTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
const onDanmakuPressStart = (e) => {
|
||||
if (e.type === 'mousedown' && e.button !== 0) return
|
||||
if (e.type === 'touchstart' && e.cancelable) e.preventDefault()
|
||||
danmakuPressFired = false
|
||||
clearDanmakuPressTimer()
|
||||
danmakuPressTimer = setTimeout(() => {
|
||||
danmakuPressFired = true
|
||||
danmakuSkipClick = true
|
||||
showDanmakuAreaMenu.value = true
|
||||
hideDanmakuAreaMenuSoon()
|
||||
if (typeof navigator !== 'undefined' && navigator.vibrate) {
|
||||
try { navigator.vibrate(12) } catch { /* ignore */ }
|
||||
}
|
||||
}, 420)
|
||||
}
|
||||
|
||||
const onDanmakuPressEnd = (e) => {
|
||||
const longPress = danmakuPressFired
|
||||
clearDanmakuPressTimer()
|
||||
if (e?.type === 'touchend' && !longPress) {
|
||||
danmakuSkipClick = true
|
||||
toggleShowDanmaku()
|
||||
return
|
||||
}
|
||||
if (longPress) danmakuSkipClick = true
|
||||
}
|
||||
|
||||
const onDanmakuPressCancel = () => {
|
||||
clearDanmakuPressTimer()
|
||||
danmakuPressFired = false
|
||||
}
|
||||
|
||||
const onDanmakuBtnClick = () => {
|
||||
if (danmakuSkipClick) {
|
||||
danmakuSkipClick = false
|
||||
return
|
||||
}
|
||||
toggleShowDanmaku()
|
||||
}
|
||||
|
||||
const selectDanmakuArea = (value) => {
|
||||
if (!DANMAKU_AREA_OPTIONS.some((o) => o.value === value)) return
|
||||
danmakuArea.value = value
|
||||
try { localStorage.setItem(DANMAKU_AREA_KEY, value) } catch { /* ignore */ }
|
||||
showDanmakuAreaMenu.value = false
|
||||
// 选了范围后若弹幕关着，顺手打开便于预览
|
||||
if (!showDanmaku.value) {
|
||||
showDanmaku.value = true
|
||||
try { localStorage.setItem(DANMAKU_PREF_KEY, '1') } catch { /* ignore */ }
|
||||
}
|
||||
}
|
||||
|
||||
const toggleShowDanmaku = () => {
|
||||
showDanmakuAreaMenu.value = false
|
||||
showDanmaku.value = !showDanmaku.value
|
||||
try { localStorage.setItem(DANMAKU_PREF_KEY, showDanmaku.value ? '1' : '0') } catch { /* ignore */ }
|
||||
}
|
||||
@@ -2045,6 +2158,8 @@ onUnmounted(() => {
|
||||
clearTimeout(likePressTimer)
|
||||
clearTimeout(likeBubblesHideTimer)
|
||||
clearTimeout(likePulseTimer)
|
||||
clearTimeout(danmakuPressTimer)
|
||||
clearTimeout(danmakuAreaMenuHideTimer)
|
||||
clearGiftPanelCloseTimer()
|
||||
clearBottomReturn()
|
||||
clearBlessingAutoClose()
|
||||
@@ -2106,6 +2221,64 @@ watch(
|
||||
width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 9999px;
|
||||
backdrop-filter: blur(12px); border: 0.5px solid rgba(168, 140, 107, 0.3); color: #a88c6b; background: rgba(255,255,255,0.6);
|
||||
}
|
||||
.danmaku-area-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: calc(100% + 10px);
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
padding: 8px;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 252, 247, 0.96);
|
||||
border: 1px solid rgba(168, 140, 107, 0.22);
|
||||
box-shadow: 0 10px 28px rgba(88, 68, 42, 0.14);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 5;
|
||||
}
|
||||
.danmaku-area-opt {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
padding: 4px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
.danmaku-area-opt:hover {
|
||||
background: rgba(168, 140, 107, 0.1);
|
||||
}
|
||||
.danmaku-area-opt.active {
|
||||
background: rgba(168, 140, 107, 0.16);
|
||||
border-color: rgba(168, 140, 107, 0.35);
|
||||
}
|
||||
.danmaku-area-phone {
|
||||
position: relative;
|
||||
width: 22px;
|
||||
height: 36px;
|
||||
border-radius: 5px;
|
||||
border: 1.5px solid #c4b59e;
|
||||
background: #f7f2ea;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
.danmaku-area-zone {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(168, 140, 107, 0.72);
|
||||
}
|
||||
.danmaku-area-zone[data-area='top30'] { top: 0; height: 30%; }
|
||||
.danmaku-area-zone[data-area='top'] { top: 0; height: 50%; }
|
||||
.danmaku-area-zone[data-area='bottom'] { bottom: 0; height: 50%; }
|
||||
.danmaku-area-zone[data-area='full'] { inset: 0; }
|
||||
.danmaku-area-opt.active .danmaku-area-zone {
|
||||
background: #a88c6b;
|
||||
}
|
||||
.danmaku-area-opt.active .danmaku-area-phone {
|
||||
border-color: #a88c6b;
|
||||
}
|
||||
.action-dock {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
|
||||
781
vite-tailwindcss/src/views/lijin/index.vue
Normal file
781
vite-tailwindcss/src/views/lijin/index.vue
Normal file
@@ -0,0 +1,781 @@
|
||||
<template>
|
||||
<div class="lj-root">
|
||||
<div class="lj-bg" aria-hidden="true">
|
||||
<span class="lj-xi lj-xi-1">囍</span>
|
||||
<span class="lj-xi lj-xi-2">囍</span>
|
||||
<span class="lj-xi lj-xi-3">囍</span>
|
||||
<span class="lj-xi lj-xi-4">囍</span>
|
||||
<i class="lj-spark lj-spark-1"></i>
|
||||
<i class="lj-spark lj-spark-2"></i>
|
||||
<i class="lj-spark lj-spark-3"></i>
|
||||
</div>
|
||||
|
||||
<main class="lj-main">
|
||||
<header class="lj-hero">
|
||||
<div class="lj-seal">囍</div>
|
||||
<h1 class="lj-title calligraphy">礼金登记</h1>
|
||||
<p class="lj-sub">喜结良缘 · 恭贺新禧</p>
|
||||
<div class="lj-divider">
|
||||
<span></span><i>✦</i><span></span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section v-if="!unlocked" class="lj-form-block lj-unlock">
|
||||
<label class="lj-label">记账口令</label>
|
||||
<input
|
||||
v-model="passInput"
|
||||
class="lj-input"
|
||||
type="password"
|
||||
maxlength="64"
|
||||
placeholder="请输入口令"
|
||||
:style="inputStyle"
|
||||
@keyup.enter="onUnlock"
|
||||
/>
|
||||
<p v-if="tip" class="lj-tip" :class="tipType">{{ tip }}</p>
|
||||
<button type="button" class="lj-submit" :disabled="busy" @click="onUnlock">
|
||||
{{ busy ? '验证中…' : '进入登记' }}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<template v-else>
|
||||
<section class="lj-form-block">
|
||||
<div class="lj-form-top">
|
||||
<span class="lj-form-hint">已解锁</span>
|
||||
<button type="button" class="lj-lock-btn" @click="onLock">退出</button>
|
||||
</div>
|
||||
<label class="lj-label">宾客姓名</label>
|
||||
<input
|
||||
v-model="form.name"
|
||||
class="lj-input"
|
||||
type="text"
|
||||
maxlength="20"
|
||||
placeholder="请输入姓名"
|
||||
autocomplete="name"
|
||||
:style="inputStyle"
|
||||
/>
|
||||
|
||||
<label class="lj-label">礼金金额</label>
|
||||
<div class="lj-quick">
|
||||
<button
|
||||
v-for="n in quickAmounts"
|
||||
:key="n"
|
||||
type="button"
|
||||
class="lj-chip"
|
||||
:class="{ active: Number(form.amount) === n }"
|
||||
@click="pickAmount(n)"
|
||||
>{{ n }}</button>
|
||||
</div>
|
||||
<div class="lj-amount-row">
|
||||
<span class="lj-yen">¥</span>
|
||||
<input
|
||||
v-model="form.amount"
|
||||
class="lj-input lj-amount"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
pattern="[0-9]*"
|
||||
maxlength="8"
|
||||
placeholder="或手动输入"
|
||||
:style="amountInputStyle"
|
||||
@input="onAmountInput"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<label class="lj-label">备注（可选）</label>
|
||||
<div v-if="noteGroups.length" class="lj-notes-groups">
|
||||
<div v-for="g in noteGroups" :key="g.key" class="lj-notes-group">
|
||||
<div class="lj-notes-group-title">{{ g.label }}</div>
|
||||
<div class="lj-notes">
|
||||
<button
|
||||
v-for="n in g.items"
|
||||
:key="n"
|
||||
type="button"
|
||||
class="lj-note-chip"
|
||||
:class="{ active: form.note === n }"
|
||||
@click="pickNote(n)"
|
||||
>{{ n }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
v-model="form.note"
|
||||
class="lj-input"
|
||||
type="text"
|
||||
maxlength="100"
|
||||
placeholder="点选上方或手动填写"
|
||||
:style="inputStyle"
|
||||
/>
|
||||
|
||||
<p v-if="tip" class="lj-tip" :class="tipType">{{ tip }}</p>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="lj-submit"
|
||||
:disabled="busy"
|
||||
@click="onSubmit"
|
||||
>
|
||||
{{ busy ? '登记中…' : '确认登记' }}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<section class="lj-recent">
|
||||
<div class="lj-recent-head">
|
||||
<span class="lj-recent-title">最近登记</span>
|
||||
<span class="lj-recent-line"></span>
|
||||
<router-link to="/lijin/list" class="lj-recent-all">查看全部</router-link>
|
||||
</div>
|
||||
<ul v-if="recent.length" class="lj-recent-list">
|
||||
<li v-for="item in recent" :key="item.id" class="lj-recent-item">
|
||||
<div class="lj-recent-left">
|
||||
<span class="lj-recent-name">{{ item.name }}</span>
|
||||
<span v-if="item.note" class="lj-recent-note">{{ item.note }}</span>
|
||||
</div>
|
||||
<div class="lj-recent-right">
|
||||
<span class="lj-recent-amount">¥{{ item.amount }}</span>
|
||||
<span class="lj-recent-time">{{ formatTime(item.created_at) }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-else class="lj-recent-empty">暂无登记记录</div>
|
||||
</section>
|
||||
</template>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import {
|
||||
submitCashGift,
|
||||
getCashGiftRecent,
|
||||
getCashGiftNotes,
|
||||
unlockCashGiftEntry,
|
||||
} from '@/api/wedding'
|
||||
|
||||
const ENTRY_TOKEN_KEY = 'cash_gift_entry_token'
|
||||
const quickAmounts = [200, 500, 600, 800, 1000, 1200, 1500, 2000, 2888, 5200]
|
||||
const form = reactive({ name: '', amount: '', note: '' })
|
||||
const busy = ref(false)
|
||||
const tip = ref('')
|
||||
const tipType = ref('ok')
|
||||
const recent = ref([])
|
||||
const notePresets = ref([])
|
||||
const unlocked = ref(false)
|
||||
const passInput = ref('')
|
||||
const entryToken = ref('')
|
||||
|
||||
/* 内联强制字色/底色，避免继承页面浅色导致「输入看不见」 */
|
||||
const inputStyle = {
|
||||
color: '#4a2018',
|
||||
WebkitTextFillColor: '#4a2018',
|
||||
caretColor: '#9b1b1b',
|
||||
backgroundColor: '#c9ad7a',
|
||||
borderColor: 'rgba(212, 175, 55, 0.55)',
|
||||
fontFamily: 'var(--font-calligraphy)',
|
||||
}
|
||||
const amountInputStyle = {
|
||||
...inputStyle,
|
||||
paddingLeft: '32px',
|
||||
}
|
||||
|
||||
const noteGroups = computed(() => {
|
||||
const list = Array.isArray(notePresets.value) ? notePresets.value : []
|
||||
const groom = []
|
||||
const bride = []
|
||||
const other = []
|
||||
for (const n of list) {
|
||||
const s = String(n || '').trim()
|
||||
if (!s) continue
|
||||
if (s.startsWith('男方')) groom.push(s)
|
||||
else if (s.startsWith('女方')) bride.push(s)
|
||||
else other.push(s)
|
||||
}
|
||||
const groups = []
|
||||
if (groom.length) groups.push({ key: 'groom', label: '男方', items: groom })
|
||||
if (bride.length) groups.push({ key: 'bride', label: '女方', items: bride })
|
||||
if (other.length) groups.push({ key: 'other', label: '其他', items: other })
|
||||
return groups
|
||||
})
|
||||
|
||||
const formatTime = (t) => {
|
||||
if (!t) return ''
|
||||
const d = new Date(t)
|
||||
if (Number.isNaN(d.getTime())) return ''
|
||||
const hh = String(d.getHours()).padStart(2, '0')
|
||||
const mm = String(d.getMinutes()).padStart(2, '0')
|
||||
return `${hh}:${mm}`
|
||||
}
|
||||
|
||||
const showTip = (text, type = 'ok') => {
|
||||
tip.value = text
|
||||
tipType.value = type
|
||||
clearTimeout(showTip._t)
|
||||
showTip._t = setTimeout(() => { tip.value = '' }, 2800)
|
||||
}
|
||||
|
||||
const pickAmount = (n) => {
|
||||
form.amount = String(n)
|
||||
}
|
||||
|
||||
const onAmountInput = (e) => {
|
||||
const digits = String(e?.target?.value || '').replace(/[^\d]/g, '')
|
||||
form.amount = digits
|
||||
if (e?.target && e.target.value !== digits) e.target.value = digits
|
||||
}
|
||||
|
||||
const pickNote = (n) => {
|
||||
form.note = form.note === n ? '' : n
|
||||
}
|
||||
|
||||
const loadRecent = async () => {
|
||||
if (!entryToken.value) {
|
||||
recent.value = []
|
||||
return
|
||||
}
|
||||
try {
|
||||
const res = await getCashGiftRecent(3, entryToken.value)
|
||||
recent.value = Array.isArray(res.data) ? res.data : []
|
||||
} catch (e) {
|
||||
recent.value = []
|
||||
if (/口令|记账/.test(e?.message || '')) onLock()
|
||||
}
|
||||
}
|
||||
|
||||
const loadNotePresets = async () => {
|
||||
try {
|
||||
const res = await getCashGiftNotes()
|
||||
const notes = res.data?.notes
|
||||
notePresets.value = Array.isArray(notes) ? notes : []
|
||||
} catch {
|
||||
notePresets.value = [
|
||||
'男方亲戚', '女方亲戚', '男方朋友', '女方朋友',
|
||||
'男方同学', '女方同学', '男方同事', '女方同事',
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
const onUnlock = async () => {
|
||||
const password = String(passInput.value || '').trim()
|
||||
if (!password) return showTip('请输入口令', 'err')
|
||||
busy.value = true
|
||||
tip.value = ''
|
||||
try {
|
||||
const res = await unlockCashGiftEntry(password)
|
||||
const token = res.data?.token
|
||||
if (!token) throw new Error('解锁失败')
|
||||
entryToken.value = token
|
||||
sessionStorage.setItem(ENTRY_TOKEN_KEY, token)
|
||||
unlocked.value = true
|
||||
passInput.value = ''
|
||||
await Promise.all([loadRecent(), loadNotePresets()])
|
||||
} catch (e) {
|
||||
showTip(e?.message || '口令错误', 'err')
|
||||
} finally {
|
||||
busy.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const onLock = () => {
|
||||
unlocked.value = false
|
||||
entryToken.value = ''
|
||||
sessionStorage.removeItem(ENTRY_TOKEN_KEY)
|
||||
recent.value = []
|
||||
form.name = ''
|
||||
form.amount = ''
|
||||
form.note = ''
|
||||
}
|
||||
|
||||
const onSubmit = async () => {
|
||||
const name = String(form.name || '').trim()
|
||||
const amountRaw = String(form.amount || '').replace(/[^\d]/g, '')
|
||||
const amount = Math.round(Number(amountRaw))
|
||||
if (!name) return showTip('请填写姓名', 'err')
|
||||
if (!Number.isFinite(amount) || amount <= 0) return showTip('请填写正确金额', 'err')
|
||||
if (!entryToken.value) return showTip('请先输入记账口令', 'err')
|
||||
form.amount = String(amount)
|
||||
busy.value = true
|
||||
try {
|
||||
await submitCashGift({
|
||||
name,
|
||||
amount,
|
||||
note: String(form.note || '').trim(),
|
||||
}, entryToken.value)
|
||||
showTip(`已登记 ${name} ¥${amount}`, 'ok')
|
||||
form.amount = ''
|
||||
form.note = ''
|
||||
form.name = ''
|
||||
await loadRecent()
|
||||
} catch (e) {
|
||||
const msg = e?.message || '登记失败'
|
||||
showTip(msg, 'err')
|
||||
if (/口令|记账/.test(msg)) onLock()
|
||||
} finally {
|
||||
busy.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const cached = sessionStorage.getItem(ENTRY_TOKEN_KEY) || ''
|
||||
if (!cached) return
|
||||
entryToken.value = cached
|
||||
unlocked.value = true
|
||||
await Promise.all([loadRecent(), loadNotePresets()])
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lj-root {
|
||||
--lj-red: #9b1b1b;
|
||||
--lj-deep: #7a0000;
|
||||
--lj-gold: #d4af37;
|
||||
--lj-cream: #f7efe0;
|
||||
--lj-ink: #4a2018;
|
||||
position: relative;
|
||||
min-height: 100dvh;
|
||||
overflow-x: hidden;
|
||||
color: var(--lj-cream);
|
||||
background:
|
||||
radial-gradient(ellipse at 50% -10%, rgba(196, 30, 58, 0.35), transparent 55%),
|
||||
linear-gradient(165deg, #5c0000 0%, #8b0000 42%, #6a0a0a 100%);
|
||||
font-family: var(--font-sans, "PingFang SC", "Microsoft YaHei", sans-serif);
|
||||
color-scheme: light;
|
||||
}
|
||||
.lj-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.lj-xi {
|
||||
position: absolute;
|
||||
font-size: 64px;
|
||||
font-weight: 700;
|
||||
color: rgba(212, 175, 55, 0.08);
|
||||
line-height: 1;
|
||||
}
|
||||
.lj-xi-1 { top: 8%; left: 6%; transform: rotate(-12deg); }
|
||||
.lj-xi-2 { top: 18%; right: 8%; transform: rotate(10deg); font-size: 88px; }
|
||||
.lj-xi-3 { bottom: 22%; left: 10%; transform: rotate(8deg); font-size: 72px; }
|
||||
.lj-xi-4 { bottom: 8%; right: 6%; transform: rotate(-6deg); font-size: 56px; }
|
||||
.lj-spark {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--lj-gold);
|
||||
opacity: 0.45;
|
||||
box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
|
||||
}
|
||||
.lj-spark-1 { top: 28%; left: 18%; }
|
||||
.lj-spark-2 { top: 42%; right: 16%; }
|
||||
.lj-spark-3 { bottom: 30%; left: 40%; }
|
||||
|
||||
.lj-main {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(100%, 460px);
|
||||
margin: 0 auto;
|
||||
padding: 36px 18px calc(28px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.lj-hero {
|
||||
text-align: center;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.lj-seal {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--lj-gold);
|
||||
color: #ffd76a;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
box-shadow: inset 0 0 0 4px rgba(155, 27, 27, 0.35), 0 8px 24px rgba(0, 0, 0, 0.25);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.lj-title {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.35em;
|
||||
color: #ffe9b0;
|
||||
text-indent: 0.35em;
|
||||
}
|
||||
.lj-sub {
|
||||
margin: 10px 0 0;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.32em;
|
||||
color: rgba(247, 239, 224, 0.72);
|
||||
}
|
||||
.lj-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 16px;
|
||||
color: var(--lj-gold);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.lj-divider span {
|
||||
width: 48px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--lj-gold), transparent);
|
||||
}
|
||||
.lj-divider i {
|
||||
font-style: normal;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.lj-form-block {
|
||||
border: 1.5px solid rgba(212, 175, 55, 0.45);
|
||||
background: rgba(90, 0, 0, 0.28);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 215, 120, 0.12), 0 16px 40px rgba(0, 0, 0, 0.22);
|
||||
border-radius: 18px;
|
||||
padding: 18px 16px 20px;
|
||||
}
|
||||
.lj-unlock {
|
||||
max-width: 420px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.lj-form-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.lj-form-hint {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.16em;
|
||||
color: rgba(255, 233, 176, 0.55);
|
||||
}
|
||||
.lj-lock-btn {
|
||||
border: 1px solid rgba(212, 175, 55, 0.35);
|
||||
background: transparent;
|
||||
color: #ffe9b0;
|
||||
border-radius: 999px;
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lj-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.2em;
|
||||
color: #f0d78a;
|
||||
margin: 12px 0 8px;
|
||||
}
|
||||
.lj-label:first-child { margin-top: 0; }
|
||||
|
||||
.lj-input {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border: 1.5px solid rgba(212, 175, 55, 0.55);
|
||||
background: #c9ad7a;
|
||||
background-color: #c9ad7a;
|
||||
color: #4a2018;
|
||||
-webkit-text-fill-color: #4a2018;
|
||||
caret-color: #9b1b1b;
|
||||
border-radius: 12px;
|
||||
padding: 12px 14px;
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-calligraphy);
|
||||
outline: none;
|
||||
box-shadow: inset 0 1px 2px rgba(90, 30, 20, 0.06);
|
||||
color-scheme: light;
|
||||
}
|
||||
.lj-input::placeholder {
|
||||
color: #9a7464;
|
||||
-webkit-text-fill-color: #9a7464;
|
||||
opacity: 1;
|
||||
}
|
||||
.lj-input:focus {
|
||||
border-color: #ffd76a;
|
||||
background: #d4bc8e;
|
||||
background-color: #d4bc8e;
|
||||
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.28), inset 0 1px 2px rgba(90, 30, 20, 0.04);
|
||||
}
|
||||
.lj-input:-webkit-autofill,
|
||||
.lj-input:-webkit-autofill:hover,
|
||||
.lj-input:-webkit-autofill:focus {
|
||||
-webkit-text-fill-color: #4a2018 !important;
|
||||
caret-color: #9b1b1b !important;
|
||||
border-color: rgba(212, 175, 55, 0.55) !important;
|
||||
box-shadow: 0 0 0 1000px #c9ad7a inset !important;
|
||||
transition: background-color 99999s ease-out;
|
||||
}
|
||||
.lj-notes-groups {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.lj-notes-group-title {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.18em;
|
||||
color: rgba(255, 233, 176, 0.72);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.lj-notes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
.lj-note-chip {
|
||||
border: 1px solid rgba(212, 175, 55, 0.4);
|
||||
background: rgba(255, 248, 235, 0.12);
|
||||
color: #ffe9b0;
|
||||
border-radius: 999px;
|
||||
padding: 7px 12px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.04em;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
}
|
||||
.lj-note-chip:hover {
|
||||
border-color: #ffd76a;
|
||||
}
|
||||
.lj-note-chip.active {
|
||||
background: linear-gradient(135deg, #d4af37, #b8860b);
|
||||
border-color: #ffd76a;
|
||||
color: #5c0000;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.lj-quick {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.lj-chip {
|
||||
border: 1px solid rgba(212, 175, 55, 0.4);
|
||||
background: rgba(255, 248, 235, 0.12);
|
||||
color: #ffe9b0;
|
||||
border-radius: 999px;
|
||||
padding: 8px 0;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
}
|
||||
.lj-chip:hover {
|
||||
border-color: #ffd76a;
|
||||
}
|
||||
.lj-chip.active {
|
||||
background: linear-gradient(135deg, #d4af37, #b8860b);
|
||||
border-color: #ffd76a;
|
||||
color: #5c0000;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.lj-amount-row { position: relative; }
|
||||
.lj-yen {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #4a2018;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
.lj-amount { padding-left: 32px; }
|
||||
|
||||
.lj-tip {
|
||||
margin: 12px 0 0;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.lj-tip.ok { color: #ffe9b0; }
|
||||
.lj-tip.err { color: #ffb4b4; }
|
||||
|
||||
.lj-submit {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
border: 1px solid rgba(255, 215, 106, 0.65);
|
||||
background: linear-gradient(135deg, #c41e3a 0%, #9b1b1b 55%, #7a0000 100%);
|
||||
color: #ffe9b0;
|
||||
border-radius: 999px;
|
||||
padding: 14px 16px;
|
||||
letter-spacing: 0.32em;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
.lj-submit:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.lj-recent {
|
||||
margin-top: 22px;
|
||||
}
|
||||
.lj-recent-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.lj-recent-title {
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.24em;
|
||||
color: #f0d78a;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.lj-recent-line {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, rgba(212, 175, 55, 0.55), transparent);
|
||||
}
|
||||
.lj-recent-all {
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.12em;
|
||||
color: #ffd76a;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
border: 1px solid rgba(212, 175, 55, 0.4);
|
||||
border-radius: 999px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
.lj-recent-all:hover {
|
||||
border-color: #ffd76a;
|
||||
background: rgba(212, 175, 55, 0.12);
|
||||
}
|
||||
.lj-recent-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.lj-recent-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 12px 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(212, 175, 55, 0.28);
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
.lj-recent-left {
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.lj-recent-name {
|
||||
font-size: 14px;
|
||||
color: #fff6e4;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.lj-recent-note {
|
||||
font-size: 11px;
|
||||
color: rgba(247, 239, 224, 0.55);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.lj-recent-right {
|
||||
text-align: right;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.lj-recent-amount {
|
||||
display: block;
|
||||
color: #ffd76a;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.lj-recent-time {
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
font-size: 10px;
|
||||
color: rgba(247, 239, 224, 0.5);
|
||||
}
|
||||
.lj-recent-empty {
|
||||
text-align: center;
|
||||
padding: 18px 12px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.16em;
|
||||
color: rgba(247, 239, 224, 0.45);
|
||||
border: 1px dashed rgba(212, 175, 55, 0.28);
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.lj-quick { grid-template-columns: repeat(4, 1fr); }
|
||||
}
|
||||
|
||||
/* PC：加宽 + 表单与最近登记左右分栏，移动端保持原样 */
|
||||
@media (min-width: 900px) {
|
||||
.lj-main {
|
||||
width: min(100%, 980px);
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
|
||||
gap: 20px 28px;
|
||||
align-items: start;
|
||||
padding: 48px 36px calc(40px + env(safe-area-inset-bottom));
|
||||
}
|
||||
.lj-hero {
|
||||
grid-column: 1 / -1;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.lj-seal {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
font-size: 32px;
|
||||
}
|
||||
.lj-title {
|
||||
font-size: 36px;
|
||||
}
|
||||
.lj-form-block {
|
||||
padding: 24px 28px 28px;
|
||||
}
|
||||
.lj-recent {
|
||||
margin-top: 0;
|
||||
position: sticky;
|
||||
top: 24px;
|
||||
}
|
||||
.lj-recent-list {
|
||||
max-height: calc(100dvh - 220px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- 非 scoped：避免继承页面浅色导致输入字看不见 -->
|
||||
<style>
|
||||
.lj-root input.lj-input {
|
||||
color: #4a2018 !important;
|
||||
-webkit-text-fill-color: #4a2018 !important;
|
||||
caret-color: #9b1b1b !important;
|
||||
background-color: #c9ad7a !important;
|
||||
font-family: var(--font-calligraphy) !important;
|
||||
}
|
||||
.lj-root input.lj-input::placeholder {
|
||||
color: #9a7464 !important;
|
||||
-webkit-text-fill-color: #9a7464 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.lj-root input.lj-input:focus {
|
||||
border-color: #ffd76a !important;
|
||||
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.28), inset 0 1px 2px rgba(90, 30, 20, 0.04) !important;
|
||||
}
|
||||
</style>
|
||||
697
vite-tailwindcss/src/views/lijin/list.vue
Normal file
697
vite-tailwindcss/src/views/lijin/list.vue
Normal file
@@ -0,0 +1,697 @@
|
||||
<template>
|
||||
<div class="lj-root">
|
||||
<div class="lj-bg" aria-hidden="true">
|
||||
<span class="lj-xi lj-xi-1">囍</span>
|
||||
<span class="lj-xi lj-xi-2">囍</span>
|
||||
<span class="lj-xi lj-xi-3">囍</span>
|
||||
<span class="lj-xi lj-xi-4">囍</span>
|
||||
<i class="lj-spark lj-spark-1"></i>
|
||||
<i class="lj-spark lj-spark-2"></i>
|
||||
<i class="lj-spark lj-spark-3"></i>
|
||||
</div>
|
||||
|
||||
<main class="lj-main lj-main--wide">
|
||||
<header class="lj-hero">
|
||||
<div class="lj-hero-top">
|
||||
<router-link to="/lijin" class="lj-back">← 返回登记</router-link>
|
||||
</div>
|
||||
<div class="lj-seal">囍</div>
|
||||
<h1 class="lj-title calligraphy">礼金明细</h1>
|
||||
<p class="lj-sub">喜结良缘 · 礼尚往来</p>
|
||||
<div class="lj-divider">
|
||||
<span></span><i>✦</i><span></span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 口令解锁 -->
|
||||
<section v-if="!unlocked" class="lj-form-block lj-unlock">
|
||||
<label class="lj-label">查看口令</label>
|
||||
<input
|
||||
v-model="passInput"
|
||||
class="lj-input"
|
||||
type="password"
|
||||
maxlength="64"
|
||||
placeholder="请输入口令"
|
||||
:style="inputStyle"
|
||||
@keyup.enter="onUnlock"
|
||||
/>
|
||||
<p v-if="tip" class="lj-tip" :class="tipType">{{ tip }}</p>
|
||||
<button type="button" class="lj-submit" :disabled="busy" @click="onUnlock">
|
||||
{{ busy ? '验证中…' : '进入列表' }}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<template v-else>
|
||||
<section class="lj-stats">
|
||||
<div class="lj-stat">
|
||||
<span class="lj-stat-label">笔数</span>
|
||||
<span class="lj-stat-value">{{ count }}</span>
|
||||
</div>
|
||||
<div class="lj-stat">
|
||||
<span class="lj-stat-label">合计</span>
|
||||
<span class="lj-stat-value">¥{{ total }}</span>
|
||||
</div>
|
||||
<button type="button" class="lj-lock-btn" @click="onLock">退出</button>
|
||||
</section>
|
||||
|
||||
<section class="lj-filters">
|
||||
<div class="lj-filter-bar">
|
||||
<input
|
||||
v-model="filters.q"
|
||||
class="lj-input lj-search"
|
||||
type="search"
|
||||
placeholder="搜索姓名 / 备注"
|
||||
:style="inputStyle"
|
||||
@keyup.enter="loadList"
|
||||
/>
|
||||
<input
|
||||
v-model="filters.min"
|
||||
class="lj-input lj-amt"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
placeholder="最低¥"
|
||||
:style="inputStyle"
|
||||
@keyup.enter="loadList"
|
||||
/>
|
||||
<input
|
||||
v-model="filters.max"
|
||||
class="lj-input lj-amt"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
placeholder="最高¥"
|
||||
:style="inputStyle"
|
||||
@keyup.enter="loadList"
|
||||
/>
|
||||
<button type="button" class="lj-filter-go" @click="loadList">筛</button>
|
||||
</div>
|
||||
|
||||
<div class="lj-filter-line">
|
||||
<div class="lj-chips">
|
||||
<button
|
||||
v-for="s in sideOptions"
|
||||
:key="'side-' + s.value"
|
||||
type="button"
|
||||
class="lj-chip"
|
||||
:class="{ active: filters.side === s.value }"
|
||||
@click="setSide(s.value)"
|
||||
>{{ s.label === '全部' ? '归属·全部' : s.label }}</button>
|
||||
</div>
|
||||
<div class="lj-chips lj-chips-sort">
|
||||
<button
|
||||
v-for="s in sortOptions"
|
||||
:key="'sort-' + s.value"
|
||||
type="button"
|
||||
class="lj-chip"
|
||||
:class="{ active: filters.sort === s.value }"
|
||||
@click="setSort(s.value)"
|
||||
>{{ s.label }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="notePresets.length" class="lj-notes-scroll">
|
||||
<button
|
||||
type="button"
|
||||
class="lj-chip"
|
||||
:class="{ active: !filters.note }"
|
||||
@click="setNote('')"
|
||||
>备注·全部</button>
|
||||
<button
|
||||
v-for="n in notePresets"
|
||||
:key="n"
|
||||
type="button"
|
||||
class="lj-chip"
|
||||
:class="{ active: filters.note === n }"
|
||||
@click="setNote(n)"
|
||||
>{{ n }}</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p v-if="tip" class="lj-tip" :class="tipType">{{ tip }}</p>
|
||||
|
||||
<section class="lj-cards" :class="{ loading: loading }">
|
||||
<article v-for="item in list" :key="item.id" class="lj-card">
|
||||
<div class="lj-card-top">
|
||||
<span class="lj-card-name calligraphy">{{ item.name }}</span>
|
||||
<span class="lj-card-amount">¥{{ item.amount }}</span>
|
||||
</div>
|
||||
<div class="lj-card-bottom">
|
||||
<span v-if="item.note" class="lj-card-note">{{ item.note }}</span>
|
||||
<span v-else class="lj-card-note muted">无备注</span>
|
||||
<span class="lj-card-time">{{ formatDateTime(item.created_at) }}</span>
|
||||
</div>
|
||||
</article>
|
||||
<div v-if="!loading && !list.length" class="lj-empty">暂无匹配记录</div>
|
||||
</section>
|
||||
</template>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { unlockCashGiftView, getCashGiftViewList } from '@/api/wedding'
|
||||
|
||||
const TOKEN_KEY = 'cash_gift_view_token'
|
||||
const inputStyle = {
|
||||
color: '#4a2018',
|
||||
WebkitTextFillColor: '#4a2018',
|
||||
caretColor: '#9b1b1b',
|
||||
backgroundColor: '#c9ad7a',
|
||||
borderColor: 'rgba(212, 175, 55, 0.55)',
|
||||
fontFamily: 'var(--font-calligraphy)',
|
||||
}
|
||||
|
||||
const sideOptions = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'male', label: '男方' },
|
||||
{ value: 'female', label: '女方' },
|
||||
{ value: 'other', label: '其他' },
|
||||
]
|
||||
const sortOptions = [
|
||||
{ value: 'time_desc', label: '最新' },
|
||||
{ value: 'time_asc', label: '最早' },
|
||||
{ value: 'amount_desc', label: '金额↓' },
|
||||
{ value: 'amount_asc', label: '金额↑' },
|
||||
{ value: 'name_asc', label: '姓名' },
|
||||
]
|
||||
|
||||
const unlocked = ref(false)
|
||||
const passInput = ref('')
|
||||
const busy = ref(false)
|
||||
const loading = ref(false)
|
||||
const tip = ref('')
|
||||
const tipType = ref('ok')
|
||||
const list = ref([])
|
||||
const total = ref(0)
|
||||
const count = ref(0)
|
||||
const notePresets = ref([])
|
||||
const viewToken = ref('')
|
||||
|
||||
const filters = reactive({
|
||||
q: '',
|
||||
note: '',
|
||||
side: '',
|
||||
min: '',
|
||||
max: '',
|
||||
sort: 'time_desc',
|
||||
})
|
||||
|
||||
const showTip = (text, type = 'ok') => {
|
||||
tip.value = text
|
||||
tipType.value = type
|
||||
clearTimeout(showTip._t)
|
||||
showTip._t = setTimeout(() => { tip.value = '' }, 2800)
|
||||
}
|
||||
|
||||
const formatDateTime = (t) => {
|
||||
if (!t) return ''
|
||||
const d = new Date(t)
|
||||
if (Number.isNaN(d.getTime())) return ''
|
||||
const pad = (n) => String(n).padStart(2, '0')
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`
|
||||
}
|
||||
|
||||
const loadList = async () => {
|
||||
if (!viewToken.value) return
|
||||
loading.value = true
|
||||
tip.value = ''
|
||||
try {
|
||||
const params = {
|
||||
sort: filters.sort || 'time_desc',
|
||||
}
|
||||
const q = String(filters.q || '').trim()
|
||||
if (q) params.q = q
|
||||
if (filters.note) params.note = filters.note
|
||||
if (filters.side) params.side = filters.side
|
||||
const min = String(filters.min || '').replace(/[^\d]/g, '')
|
||||
const max = String(filters.max || '').replace(/[^\d]/g, '')
|
||||
if (min) params.min = min
|
||||
if (max) params.max = max
|
||||
|
||||
const res = await getCashGiftViewList(params, viewToken.value)
|
||||
const data = res.data || {}
|
||||
list.value = Array.isArray(data.list) ? data.list : []
|
||||
total.value = Number(data.total) || 0
|
||||
count.value = Number(data.count) || list.value.length
|
||||
if (Array.isArray(data.notes) && data.notes.length) {
|
||||
notePresets.value = data.notes
|
||||
}
|
||||
} catch (e) {
|
||||
const msg = e?.message || '加载失败'
|
||||
if (/口令|未授权|解锁/.test(msg)) {
|
||||
onLock()
|
||||
showTip(msg, 'err')
|
||||
} else {
|
||||
showTip(msg, 'err')
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const setSide = (v) => {
|
||||
filters.side = v
|
||||
loadList()
|
||||
}
|
||||
const setNote = (v) => {
|
||||
filters.note = v
|
||||
loadList()
|
||||
}
|
||||
const setSort = (v) => {
|
||||
filters.sort = v
|
||||
loadList()
|
||||
}
|
||||
|
||||
const onUnlock = async () => {
|
||||
const password = String(passInput.value || '').trim()
|
||||
if (!password) return showTip('请输入口令', 'err')
|
||||
busy.value = true
|
||||
tip.value = ''
|
||||
try {
|
||||
const res = await unlockCashGiftView(password)
|
||||
const token = res.data?.token
|
||||
if (!token) throw new Error('解锁失败')
|
||||
viewToken.value = token
|
||||
sessionStorage.setItem(TOKEN_KEY, token)
|
||||
unlocked.value = true
|
||||
passInput.value = ''
|
||||
await loadList()
|
||||
} catch (e) {
|
||||
showTip(e?.message || '口令错误', 'err')
|
||||
} finally {
|
||||
busy.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const onLock = () => {
|
||||
unlocked.value = false
|
||||
viewToken.value = ''
|
||||
sessionStorage.removeItem(TOKEN_KEY)
|
||||
list.value = []
|
||||
total.value = 0
|
||||
count.value = 0
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const cached = sessionStorage.getItem(TOKEN_KEY) || ''
|
||||
if (!cached) return
|
||||
viewToken.value = cached
|
||||
unlocked.value = true
|
||||
await loadList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.lj-root {
|
||||
--lj-red: #9b1b1b;
|
||||
--lj-deep: #7a0000;
|
||||
--lj-gold: #d4af37;
|
||||
--lj-cream: #f7efe0;
|
||||
--lj-ink: #4a2018;
|
||||
position: relative;
|
||||
min-height: 100dvh;
|
||||
overflow-x: hidden;
|
||||
color: var(--lj-cream);
|
||||
background:
|
||||
radial-gradient(ellipse at 50% -10%, rgba(196, 30, 58, 0.35), transparent 55%),
|
||||
linear-gradient(165deg, #5c0000 0%, #8b0000 42%, #6a0a0a 100%);
|
||||
font-family: var(--font-sans, "PingFang SC", "Microsoft YaHei", sans-serif);
|
||||
color-scheme: light;
|
||||
}
|
||||
.lj-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
.lj-xi {
|
||||
position: absolute;
|
||||
font-size: 64px;
|
||||
font-weight: 700;
|
||||
color: rgba(212, 175, 55, 0.08);
|
||||
line-height: 1;
|
||||
}
|
||||
.lj-xi-1 { top: 8%; left: 6%; transform: rotate(-12deg); }
|
||||
.lj-xi-2 { top: 18%; right: 8%; transform: rotate(10deg); font-size: 88px; }
|
||||
.lj-xi-3 { bottom: 22%; left: 10%; transform: rotate(8deg); font-size: 72px; }
|
||||
.lj-xi-4 { bottom: 8%; right: 6%; transform: rotate(-6deg); font-size: 56px; }
|
||||
.lj-spark {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--lj-gold);
|
||||
opacity: 0.45;
|
||||
box-shadow: 0 0 10px rgba(212, 175, 55, 0.6);
|
||||
}
|
||||
.lj-spark-1 { top: 12%; left: 48%; }
|
||||
.lj-spark-2 { top: 42%; right: 18%; }
|
||||
.lj-spark-3 { bottom: 30%; left: 40%; }
|
||||
|
||||
.lj-main {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(100%, 460px);
|
||||
margin: 0 auto;
|
||||
padding: 28px 18px calc(28px + env(safe-area-inset-bottom));
|
||||
}
|
||||
.lj-main--wide {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
padding-left: max(18px, 3vw);
|
||||
padding-right: max(18px, 3vw);
|
||||
}
|
||||
|
||||
.lj-hero { text-align: center; margin-bottom: 22px; }
|
||||
.lj-hero-top {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.lj-back {
|
||||
color: rgba(255, 233, 176, 0.85);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.12em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.lj-back:hover { color: #ffd76a; }
|
||||
.lj-seal {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--lj-gold);
|
||||
color: #ffd76a;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
box-shadow: inset 0 0 0 4px rgba(155, 27, 27, 0.35), 0 8px 24px rgba(0, 0, 0, 0.25);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.lj-title {
|
||||
margin: 0;
|
||||
font-size: clamp(32px, 6vw, 44px);
|
||||
color: #ffd76a;
|
||||
letter-spacing: 0.12em;
|
||||
font-weight: 400;
|
||||
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
.lj-sub {
|
||||
margin: 8px 0 0;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.28em;
|
||||
color: rgba(247, 239, 224, 0.72);
|
||||
}
|
||||
.lj-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
color: var(--lj-gold);
|
||||
}
|
||||
.lj-divider span {
|
||||
display: block;
|
||||
width: 48px;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--lj-gold), transparent);
|
||||
}
|
||||
.lj-divider i { font-style: normal; font-size: 11px; }
|
||||
|
||||
.lj-form-block {
|
||||
border: 1.5px solid rgba(212, 175, 55, 0.45);
|
||||
background: rgba(90, 0, 0, 0.28);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 215, 120, 0.12), 0 16px 40px rgba(0, 0, 0, 0.22);
|
||||
border-radius: 18px;
|
||||
padding: 18px 16px 20px;
|
||||
}
|
||||
.lj-unlock { max-width: 420px; margin: 0 auto; }
|
||||
|
||||
.lj-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.2em;
|
||||
color: #f0d78a;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.lj-input {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
border: 1.5px solid rgba(212, 175, 55, 0.55);
|
||||
background: #c9ad7a;
|
||||
color: #4a2018;
|
||||
-webkit-text-fill-color: #4a2018;
|
||||
caret-color: #9b1b1b;
|
||||
border-radius: 12px;
|
||||
padding: 12px 14px;
|
||||
font-size: 15px;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
font-family: var(--font-calligraphy);
|
||||
outline: none;
|
||||
}
|
||||
.lj-input::placeholder {
|
||||
color: #9a7464;
|
||||
-webkit-text-fill-color: #9a7464;
|
||||
opacity: 1;
|
||||
}
|
||||
.lj-input:focus {
|
||||
border-color: #ffd76a;
|
||||
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.28);
|
||||
}
|
||||
|
||||
.lj-tip {
|
||||
margin: 12px 0 0;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.lj-tip.ok { color: #ffe9b0; }
|
||||
.lj-tip.err { color: #ffb4b4; }
|
||||
|
||||
.lj-submit {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
border: 1px solid rgba(255, 215, 106, 0.65);
|
||||
background: linear-gradient(135deg, #c41e3a 0%, #9b1b1b 55%, #7a0000 100%);
|
||||
color: #ffe9b0;
|
||||
border-radius: 999px;
|
||||
padding: 14px 16px;
|
||||
letter-spacing: 0.32em;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
.lj-submit:disabled { opacity: 0.6; cursor: not-allowed; }
|
||||
|
||||
.lj-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid rgba(212, 175, 55, 0.35);
|
||||
border-radius: 12px;
|
||||
background: rgba(90, 0, 0, 0.22);
|
||||
}
|
||||
.lj-stat {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
}
|
||||
.lj-stat-label {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.12em;
|
||||
color: rgba(255, 233, 176, 0.65);
|
||||
}
|
||||
.lj-stat-value {
|
||||
font-size: 16px;
|
||||
color: #ffd76a;
|
||||
font-weight: 600;
|
||||
}
|
||||
.lj-lock-btn {
|
||||
margin-left: auto;
|
||||
border: 1px solid rgba(212, 175, 55, 0.35);
|
||||
background: transparent;
|
||||
color: #ffe9b0;
|
||||
border-radius: 999px;
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.08em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lj-filters {
|
||||
border: 1px solid rgba(212, 175, 55, 0.3);
|
||||
background: rgba(90, 0, 0, 0.18);
|
||||
border-radius: 12px;
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.lj-filter-bar {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: stretch;
|
||||
}
|
||||
.lj-search { flex: 1; min-width: 0; }
|
||||
.lj-amt {
|
||||
width: 72px;
|
||||
flex-shrink: 0;
|
||||
padding-left: 8px !important;
|
||||
padding-right: 8px !important;
|
||||
text-align: center;
|
||||
}
|
||||
.lj-filters .lj-input {
|
||||
padding: 8px 10px;
|
||||
font-size: 13px;
|
||||
border-radius: 8px;
|
||||
border-width: 1px;
|
||||
}
|
||||
.lj-filter-go {
|
||||
flex-shrink: 0;
|
||||
border: 1px solid rgba(255, 215, 106, 0.5);
|
||||
background: linear-gradient(135deg, #c41e3a, #7a0000);
|
||||
color: #ffe9b0;
|
||||
border-radius: 8px;
|
||||
padding: 0 12px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.08em;
|
||||
cursor: pointer;
|
||||
}
|
||||
.lj-filter-line {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 10px;
|
||||
align-items: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.lj-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
.lj-chips-sort {
|
||||
margin-left: auto;
|
||||
}
|
||||
.lj-chip {
|
||||
border: 1px solid rgba(212, 175, 55, 0.35);
|
||||
background: rgba(255, 248, 235, 0.1);
|
||||
color: #ffe9b0;
|
||||
border-radius: 999px;
|
||||
padding: 3px 8px;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.lj-chip.active {
|
||||
background: linear-gradient(135deg, #d4af37, #b8860b);
|
||||
border-color: #ffd76a;
|
||||
color: #5c0000;
|
||||
font-weight: 600;
|
||||
}
|
||||
.lj-notes-scroll {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-top: 8px;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: thin;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.lj-notes-scroll::-webkit-scrollbar { height: 3px; }
|
||||
.lj-notes-scroll::-webkit-scrollbar-thumb {
|
||||
background: rgba(212, 175, 55, 0.35);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.lj-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.lj-cards.loading { opacity: 0.7; }
|
||||
.lj-card {
|
||||
border: 1.5px solid rgba(212, 175, 55, 0.4);
|
||||
background: rgba(90, 0, 0, 0.32);
|
||||
border-radius: 16px;
|
||||
padding: 14px 16px;
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 215, 120, 0.08), 0 10px 24px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
.lj-card-top {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
.lj-card-name {
|
||||
font-size: 22px;
|
||||
color: #ffe9b0;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.lj-card-amount {
|
||||
font-size: 18px;
|
||||
color: #ffd76a;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.lj-card-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.lj-card-note {
|
||||
font-size: 12px;
|
||||
color: rgba(247, 239, 224, 0.72);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.lj-card-note.muted { opacity: 0.45; }
|
||||
.lj-card-time {
|
||||
font-size: 11px;
|
||||
color: rgba(247, 239, 224, 0.48);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.lj-empty {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: 36px 12px;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.16em;
|
||||
color: rgba(247, 239, 224, 0.55);
|
||||
border: 1px dashed rgba(212, 175, 55, 0.28);
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.lj-filter-bar { flex-wrap: wrap; }
|
||||
.lj-search { flex: 1 1 100%; }
|
||||
.lj-amt { flex: 1; width: auto; min-width: 0; }
|
||||
.lj-chips-sort { margin-left: 0; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.lj-root input.lj-input {
|
||||
color: #4a2018 !important;
|
||||
-webkit-text-fill-color: #4a2018 !important;
|
||||
caret-color: #9b1b1b !important;
|
||||
background-color: #c9ad7a !important;
|
||||
font-family: var(--font-calligraphy) !important;
|
||||
}
|
||||
.lj-root input.lj-input::placeholder {
|
||||
color: #9a7464 !important;
|
||||
-webkit-text-fill-color: #9a7464 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user