feat: major update - MySQL, chat, wishlist, PWA, admin overhaul
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,605 @@
|
||||
<template>
|
||||
<div class="chat-panel-section">
|
||||
<div class="chat-panel-header">
|
||||
<h3>用户消息</h3>
|
||||
<button class="refresh-btn" @click="load" :disabled="loading">刷新</button>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="chat-empty">加载中…</div>
|
||||
<div v-else-if="Object.keys(conversations).length === 0" class="chat-empty">暂无用户消息</div>
|
||||
|
||||
<div v-else class="chat-layout">
|
||||
<!-- Left: conversation list -->
|
||||
<div class="conv-list">
|
||||
<div class="conv-list-title">对话列表</div>
|
||||
<div
|
||||
v-for="(msgs, account) in conversations"
|
||||
:key="account"
|
||||
:class="['conv-item', selectedAccount === account ? 'conv-item--active' : '']"
|
||||
@click="selectConv(account, msgs)"
|
||||
>
|
||||
<div class="conv-avatar">{{ (getDisplayName(msgs) || account).slice(0, 1).toUpperCase() }}</div>
|
||||
<div class="conv-info">
|
||||
<div class="conv-name">{{ getDisplayName(msgs) || account }}</div>
|
||||
<div class="conv-preview">{{ latestMsg(msgs) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: message thread -->
|
||||
<div class="conv-thread" v-if="selectedAccount">
|
||||
<div class="thread-top">
|
||||
<div class="thread-user">
|
||||
<div class="thread-avatar">{{ (displayName || selectedAccount).slice(0, 1).toUpperCase() }}</div>
|
||||
<div class="thread-user-info">
|
||||
<span class="thread-name">{{ displayName || selectedAccount }}</span>
|
||||
<span class="thread-account">{{ selectedAccount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="clear-btn" @click="clearConv" :disabled="clearing">清除记录</button>
|
||||
</div>
|
||||
|
||||
<div class="thread-messages" ref="threadEl">
|
||||
<div
|
||||
v-for="msg in currentMessages"
|
||||
:key="msg.id"
|
||||
:class="['msg-row', msg.fromAdmin ? 'msg-row--admin' : 'msg-row--user']"
|
||||
>
|
||||
<div class="msg-bubble">
|
||||
<div class="msg-meta">
|
||||
<span class="msg-from">{{ msg.fromAdmin ? '客服' : (msg.accountName || msg.accountId) }}</span>
|
||||
<span class="msg-time">{{ formatTime(msg.sentAt) }}</span>
|
||||
</div>
|
||||
<div class="msg-content">{{ msg.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="reply-row" @submit.prevent="sendReply">
|
||||
<input
|
||||
v-model="replyText"
|
||||
class="reply-input"
|
||||
placeholder="输入回复内容…"
|
||||
maxlength="500"
|
||||
:disabled="replying"
|
||||
/>
|
||||
<button class="reply-send-btn" type="submit" :disabled="replying || !replyText.trim()">发送</button>
|
||||
</form>
|
||||
<p v-if="replyError" class="reply-error">{{ replyError }}</p>
|
||||
</div>
|
||||
|
||||
<div class="conv-thread conv-thread--empty" v-else>
|
||||
<div class="empty-hint">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.3"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||
<p>选择左侧对话</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, nextTick, onMounted, onUnmounted } from 'vue'
|
||||
import {
|
||||
fetchAdminAllConversations,
|
||||
fetchAdminConversation,
|
||||
adminSendChatReply,
|
||||
adminClearConversation
|
||||
} from '../../shared/api.js'
|
||||
|
||||
const props = defineProps({
|
||||
adminToken: { type: String, default: '' }
|
||||
})
|
||||
|
||||
const conversations = ref({})
|
||||
const loading = ref(false)
|
||||
const selectedAccount = ref('')
|
||||
const currentMessages = ref([])
|
||||
const displayName = ref('')
|
||||
const replyText = ref('')
|
||||
const replying = ref(false)
|
||||
const replyError = ref('')
|
||||
const clearing = ref(false)
|
||||
const threadEl = ref(null)
|
||||
|
||||
let pollTimer = null
|
||||
|
||||
const formatTime = (iso) => {
|
||||
if (!iso) return ''
|
||||
const d = new Date(iso)
|
||||
return d.toLocaleString('zh-CN', { hour12: false })
|
||||
}
|
||||
|
||||
const getDisplayName = (msgs) => {
|
||||
if (!msgs || msgs.length === 0) return '未知用户'
|
||||
const userMsg = msgs.find((m) => !m.fromAdmin)
|
||||
return userMsg?.accountName || userMsg?.accountId || '未知用户'
|
||||
}
|
||||
|
||||
const latestMsg = (msgs) => {
|
||||
if (!msgs || msgs.length === 0) return ''
|
||||
const last = msgs[msgs.length - 1]
|
||||
const prefix = last.fromAdmin ? '[客服] ' : ''
|
||||
return prefix + (last.content.length > 20 ? last.content.slice(0, 20) + '…' : last.content)
|
||||
}
|
||||
|
||||
const scrollThreadBottom = async () => {
|
||||
await nextTick()
|
||||
if (threadEl.value) {
|
||||
threadEl.value.scrollTop = threadEl.value.scrollHeight
|
||||
}
|
||||
}
|
||||
|
||||
const load = async () => {
|
||||
if (!props.adminToken) return
|
||||
loading.value = true
|
||||
try {
|
||||
conversations.value = await fetchAdminAllConversations(props.adminToken)
|
||||
// Refresh current conversation messages if one is selected
|
||||
if (selectedAccount.value) {
|
||||
currentMessages.value = conversations.value[selectedAccount.value] || []
|
||||
await scrollThreadBottom()
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const selectConv = async (account, msgs) => {
|
||||
selectedAccount.value = account
|
||||
currentMessages.value = msgs || []
|
||||
displayName.value = getDisplayName(msgs)
|
||||
replyError.value = ''
|
||||
replyText.value = ''
|
||||
await scrollThreadBottom()
|
||||
}
|
||||
|
||||
const sendReply = async () => {
|
||||
const content = replyText.value.trim()
|
||||
if (!content || replying.value) return
|
||||
replying.value = true
|
||||
replyError.value = ''
|
||||
try {
|
||||
const msg = await adminSendChatReply(props.adminToken, selectedAccount.value, content)
|
||||
if (msg) {
|
||||
currentMessages.value.push(msg)
|
||||
conversations.value[selectedAccount.value] = [...currentMessages.value]
|
||||
replyText.value = ''
|
||||
await scrollThreadBottom()
|
||||
}
|
||||
} catch (err) {
|
||||
replyError.value = err?.response?.data?.error || '发送失败'
|
||||
} finally {
|
||||
replying.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const clearConv = async () => {
|
||||
if (!selectedAccount.value || clearing.value) return
|
||||
if (!confirm(`确认清除与 ${selectedAccount.value} 的全部对话？`)) return
|
||||
clearing.value = true
|
||||
try {
|
||||
await adminClearConversation(props.adminToken, selectedAccount.value)
|
||||
delete conversations.value[selectedAccount.value]
|
||||
selectedAccount.value = ''
|
||||
currentMessages.value = []
|
||||
} catch {
|
||||
alert('清除失败，请重试')
|
||||
} finally {
|
||||
clearing.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
load()
|
||||
pollTimer = setInterval(load, 8000)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (pollTimer) clearInterval(pollTimer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chat-panel-section {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.chat-panel-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.chat-panel-header h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.refresh-btn {
|
||||
padding: 5px 14px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255,255,255,0.7);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.chat-empty {
|
||||
padding: 24px 0;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.chat-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr;
|
||||
height: 520px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--line);
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
box-shadow: 0 8px 24px rgba(33, 33, 40, 0.08);
|
||||
}
|
||||
|
||||
/* Conversation list */
|
||||
.conv-list {
|
||||
border-right: 1px solid var(--line);
|
||||
overflow-y: auto;
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.conv-list-title {
|
||||
padding: 12px 14px 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.8px;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
border-bottom: 1px solid var(--line);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.conv-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.5);
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.conv-item:hover {
|
||||
background: rgba(180, 154, 203, 0.08);
|
||||
}
|
||||
|
||||
.conv-item--active {
|
||||
background: rgba(180, 154, 203, 0.14);
|
||||
border-left: 3px solid var(--accent);
|
||||
padding-left: 9px;
|
||||
}
|
||||
|
||||
.conv-avatar {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 50%;
|
||||
background: #e8e8e8;
|
||||
color: #444;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.conv-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.conv-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.conv-preview {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
margin-top: 2px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Message thread */
|
||||
.conv-thread {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.conv-thread--empty {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.thread-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.thread-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.thread-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #e8e8e8;
|
||||
color: #444;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.thread-user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.thread-name {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.thread-account {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
padding: 5px 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(210, 70, 70, 0.3);
|
||||
background: rgba(210, 70, 70, 0.06);
|
||||
color: #c04040;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: background 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.clear-btn:hover:not(:disabled) {
|
||||
background: rgba(210, 70, 70, 0.14);
|
||||
}
|
||||
|
||||
.thread-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.msg-row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.msg-row--user {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.msg-row--admin {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.msg-bubble {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
max-width: 72%;
|
||||
}
|
||||
|
||||
.msg-row--admin .msg-bubble {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.msg-meta {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: baseline;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.msg-from {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.msg-time {
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.msg-content {
|
||||
padding: 9px 13px;
|
||||
border-radius: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.msg-row--user .msg-content {
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--line);
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.msg-row--admin .msg-content {
|
||||
background: #2c2b2d;
|
||||
color: #fff;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.reply-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
border-top: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.reply-input {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
border-radius: 7px;
|
||||
border: 1px solid var(--line);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: var(--text);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.reply-input:focus {
|
||||
border-color: var(--accent, #7c6af0);
|
||||
}
|
||||
|
||||
.reply-send-btn {
|
||||
padding: 8px 18px;
|
||||
border-radius: 7px;
|
||||
background: #2c2b2d;
|
||||
color: #fff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
font-weight: 600;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.reply-send-btn:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.reply-send-btn:not(:disabled):hover {
|
||||
opacity: 0.82;
|
||||
}
|
||||
|
||||
.reply-error {
|
||||
font-size: 12px;
|
||||
color: #d64848;
|
||||
padding: 0 14px 8px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.chat-panel-section {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.chat-layout {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
height: 520px;
|
||||
}
|
||||
|
||||
.conv-list {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--line);
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
flex-direction: row;
|
||||
max-height: 72px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.conv-list::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.conv-list-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.conv-item {
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 70px;
|
||||
max-width: 80px;
|
||||
padding: 8px 6px;
|
||||
border-bottom: none;
|
||||
border-right: 1px solid var(--line);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.conv-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.conv-name {
|
||||
font-size: 11px;
|
||||
max-width: 64px;
|
||||
}
|
||||
|
||||
.conv-preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.conv-avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div class="maintenance-row">
|
||||
<div class="maintenance-left">
|
||||
<span class="maintenance-label">站点维护模式</span>
|
||||
<button
|
||||
:class="['maintenance-toggle', enabled ? 'toggle-on' : 'toggle-off']"
|
||||
type="button"
|
||||
@click="$emit('update:enabled', !enabled)"
|
||||
>
|
||||
{{ enabled ? '维护中' : '正常运行' }}
|
||||
</button>
|
||||
<span
|
||||
v-if="message"
|
||||
class="msg-tag"
|
||||
:class="{ error: message.includes('失败') }"
|
||||
>{{ message }}</span>
|
||||
</div>
|
||||
<div class="maintenance-right">
|
||||
<input
|
||||
:value="reason"
|
||||
@input="$emit('update:reason', $event.target.value)"
|
||||
class="maintenance-reason-input"
|
||||
placeholder="维护原因（选填）"
|
||||
/>
|
||||
<button class="ghost" type="button" @click="$emit('save')">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
enabled: { type: Boolean, default: false },
|
||||
reason: { type: String, default: '' },
|
||||
message: { type: String, default: '' }
|
||||
})
|
||||
|
||||
defineEmits(['update:enabled', 'update:reason', 'save'])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.maintenance-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 16px;
|
||||
padding: 14px 18px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.maintenance-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.maintenance-label {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.maintenance-toggle {
|
||||
padding: 6px 16px;
|
||||
border-radius: 999px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s ease, transform 0.15s ease;
|
||||
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
|
||||
}
|
||||
|
||||
.toggle-on {
|
||||
background: rgba(201, 90, 106, 0.15);
|
||||
color: #c95a6a;
|
||||
}
|
||||
|
||||
.toggle-on:hover {
|
||||
background: rgba(201, 90, 106, 0.25);
|
||||
}
|
||||
|
||||
.toggle-off {
|
||||
background: rgba(100, 185, 140, 0.15);
|
||||
color: #3a9a68;
|
||||
}
|
||||
|
||||
.toggle-off:hover {
|
||||
background: rgba(100, 185, 140, 0.25);
|
||||
}
|
||||
|
||||
.maintenance-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.maintenance-reason-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.maintenance-reason-input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.msg-tag {
|
||||
font-size: 15px;
|
||||
color: var(--accent-2);
|
||||
padding: 4px 10px;
|
||||
border-radius: 5px;
|
||||
background: rgba(145, 168, 208, 0.1);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.msg-tag.error {
|
||||
color: #c95a6a;
|
||||
background: rgba(201, 90, 106, 0.08);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.maintenance-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 10px 12px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.maintenance-right {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.maintenance-reason-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 14px;
|
||||
padding: 7px 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,404 @@
|
||||
<template>
|
||||
<div class="orders-section">
|
||||
<div class="orders-header">
|
||||
<h3>下单记录</h3>
|
||||
<p class="tag">共 {{ orders.length }} 条订单（含未登录用户）</p>
|
||||
</div>
|
||||
|
||||
<div v-if="orders.length === 0" class="empty-tip tag">暂无订单记录</div>
|
||||
|
||||
<div v-else class="table-wrap">
|
||||
<!-- Pagination toolbar (top) -->
|
||||
<div class="pagination-bar" v-if="totalPages > 1">
|
||||
<button class="page-btn" :disabled="currentPage === 1" @click="currentPage--">‹</button>
|
||||
<span class="page-info">第 {{ currentPage }} / {{ totalPages }} 页（共 {{ orders.length }} 条）</span>
|
||||
<button class="page-btn" :disabled="currentPage === totalPages" @click="currentPage++">›</button>
|
||||
</div>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>商品</th>
|
||||
<th>用户</th>
|
||||
<th class="col-num">数量</th>
|
||||
<th>发货</th>
|
||||
<th>状态</th>
|
||||
<th>下单时间</th>
|
||||
<th class="col-action"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template v-for="order in pagedOrders" :key="order.id">
|
||||
<tr :class="{ 'row-pending': order.status === 'pending' }">
|
||||
<td>
|
||||
<div class="order-product">
|
||||
<span class="order-product-name">{{ order.productName }}</span>
|
||||
<span class="order-id">{{ order.id }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="order.userAccount" class="user-info">
|
||||
<span class="user-name">{{ order.userName || order.userAccount }}</span>
|
||||
<span class="user-account">{{ order.userAccount }}</span>
|
||||
</div>
|
||||
<span v-else class="anon-badge">匿名</span>
|
||||
</td>
|
||||
<td class="col-num">{{ order.quantity }}</td>
|
||||
<td>
|
||||
<span :class="['delivery-badge', order.deliveryMode === 'manual' ? 'delivery-manual' : 'delivery-auto']">
|
||||
{{ order.deliveryMode === 'manual' ? '手动' : '自动' }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<span :class="['status-badge', order.status === 'completed' ? 'status-done' : 'status-wait']">
|
||||
{{ order.status === 'completed' ? '已完成' : '待付款' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="col-time">{{ formatTime(order.createdAt) }}</td>
|
||||
<td class="col-action">
|
||||
<button class="del-btn" @click="remove(order.id)" title="删除此订单">✕</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="order.note || order.contactPhone || order.contactEmail" class="extra-row">
|
||||
<td colspan="7">
|
||||
<div class="extra-info">
|
||||
<span v-if="order.note" class="extra-item">
|
||||
<span class="extra-label">备注：</span>{{ order.note }}
|
||||
</span>
|
||||
<span v-if="order.contactPhone" class="extra-item">
|
||||
<span class="extra-label">手机：</span>{{ order.contactPhone }}
|
||||
</span>
|
||||
<span v-if="order.contactEmail" class="extra-item">
|
||||
<span class="extra-label">邮箱：</span>{{ order.contactEmail }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
orders: { type: Array, default: () => [] }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['remove'])
|
||||
|
||||
const PAGE_SIZE = 10
|
||||
const currentPage = ref(1)
|
||||
|
||||
const totalPages = computed(() => Math.max(1, Math.ceil(props.orders.length / PAGE_SIZE)))
|
||||
const pagedOrders = computed(() => {
|
||||
const start = (currentPage.value - 1) * PAGE_SIZE
|
||||
return props.orders.slice(start, start + PAGE_SIZE)
|
||||
})
|
||||
|
||||
// Reset to page 1 when orders list changes
|
||||
watch(() => props.orders.length, () => { currentPage.value = 1 })
|
||||
|
||||
const remove = (id) => {
|
||||
if (confirm('确认删除此订单记录？此操作不可撤销。')) {
|
||||
emit('remove', id)
|
||||
}
|
||||
}
|
||||
|
||||
const formatTime = (iso) => {
|
||||
if (!iso) return '-'
|
||||
const d = new Date(iso)
|
||||
return d.toLocaleString('zh-CN', { hour12: false })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.orders-section {
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.orders-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.orders-header h3 {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.table thead tr {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border-bottom: 2px solid var(--line);
|
||||
}
|
||||
|
||||
.table th {
|
||||
padding: 11px 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.table td {
|
||||
padding: 12px 14px;
|
||||
font-size: 15px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table tbody tr {
|
||||
border-bottom: 1px solid var(--line);
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.table tbody tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.table tbody tr.row-pending {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.col-num {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.col-time {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.order-product {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.order-product-name {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.order-id {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.user-account {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.anon-badge {
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(140, 140, 145, 0.12);
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-done {
|
||||
background: rgba(100, 185, 140, 0.15);
|
||||
color: #3a9a68;
|
||||
}
|
||||
|
||||
.status-wait {
|
||||
background: rgba(220, 178, 90, 0.15);
|
||||
color: #b87e20;
|
||||
}
|
||||
|
||||
.delivery-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.delivery-auto {
|
||||
background: rgba(100, 185, 140, 0.12);
|
||||
color: #3a9a68;
|
||||
}
|
||||
|
||||
.delivery-manual {
|
||||
background: rgba(90, 120, 200, 0.12);
|
||||
color: #5a78c8;
|
||||
}
|
||||
|
||||
.extra-row td {
|
||||
padding: 6px 14px 10px;
|
||||
background: rgba(250, 250, 255, 0.5);
|
||||
}
|
||||
|
||||
.extra-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px 20px;
|
||||
font-size: 13px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.extra-item {
|
||||
display: inline-flex;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.extra-label {
|
||||
color: var(--muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.col-action {
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.del-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
padding: 3px 6px;
|
||||
border-radius: 4px;
|
||||
line-height: 1;
|
||||
transition: color 0.15s, background 0.15s;
|
||||
}
|
||||
|
||||
.del-btn:hover {
|
||||
color: #d64848;
|
||||
background: rgba(214, 72, 72, 0.1);
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 14px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.pagination-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
padding: 4px 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: var(--text);
|
||||
font-family: inherit;
|
||||
transition: background 0.15s;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.page-btn:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.page-btn:not(:disabled):hover {
|
||||
background: rgba(124, 106, 240, 0.1);
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.orders-section {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.table {
|
||||
min-width: 560px;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 7px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.col-time {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pagination-bar {
|
||||
padding: 6px 10px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.page-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,431 @@
|
||||
<template>
|
||||
<div v-if="open" class="modal-mask" @click.self="$emit('close')">
|
||||
<section class="modal-card">
|
||||
<div class="modal-header">
|
||||
<div>
|
||||
<h3>{{ form.id ? '编辑商品' : '添加新商品' }}</h3>
|
||||
<p class="tag">封面图和最多 5 张商品截图共用这一套编辑表单。</p>
|
||||
</div>
|
||||
<button class="ghost" @click="$emit('close')">关闭</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="form-field">
|
||||
<label>商品名称</label>
|
||||
<input v-model="form.name" placeholder="商品名称" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-field">
|
||||
<label>原价（元）</label>
|
||||
<input v-model.number="form.price" type="number" step="0.01" />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>折扣价（元，可选）</label>
|
||||
<input v-model.number="form.discountPrice" type="number" step="0.01" />
|
||||
<p class="tag">留空或不小于原价时，将不启用折扣。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>封面链接（http）</label>
|
||||
<input v-model="form.coverUrl" placeholder="http://..." />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<div class="field-head">
|
||||
<label>商品库存</label>
|
||||
<span class="tag">共 {{ form.inventoryItems.length }} 条</span>
|
||||
<button class="ghost small" type="button" @click="addInventoryItem">添加商品库存</button>
|
||||
</div>
|
||||
<p class="tag">每个输入框保存一条可发放内容，购买后会直接展示给用户。</p>
|
||||
<div class="inventory-list">
|
||||
<div v-for="(_, index) in form.inventoryItems" :key="index" class="inventory-row">
|
||||
<input
|
||||
:ref="(el) => setInventoryInputRef(el, index)"
|
||||
v-model="form.inventoryItems[index]"
|
||||
placeholder="库存内容，可填卡密、下载链接等"
|
||||
/>
|
||||
<button
|
||||
v-if="form.inventoryItems.length > 1"
|
||||
class="ghost small"
|
||||
type="button"
|
||||
@click="removeInventoryItem(index)"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>商品截图链接（最多 5 个）</label>
|
||||
<div class="screenshot-grid">
|
||||
<input
|
||||
v-for="(_, index) in screenshotInputSlots"
|
||||
:key="index"
|
||||
v-model="form.screenshotUrls[index]"
|
||||
:placeholder="`截图链接 ${index + 1}（http://...）`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>商品介绍（Markdown）</label>
|
||||
<textarea v-model="form.description"></textarea>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>商品标签（英文逗号分隔）</label>
|
||||
<input v-model="form.tagsText" placeholder="例如: chatgpt, linux, 域名" />
|
||||
<p class="tag">用于前端搜索与筛选，多个标签用英文逗号分开</p>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>是否上架</label>
|
||||
<select v-model="form.active">
|
||||
<option :value="true">上架</option>
|
||||
<option :value="false">下架</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-field">
|
||||
<label>
|
||||
<input type="checkbox" v-model="form.requireLogin" class="inline-checkbox" />
|
||||
需要登录才能购买
|
||||
</label>
|
||||
<p class="tag">开启后未登录用户将无法完成购买</p>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>每账户最多购买数量（0 = 不限）</label>
|
||||
<input v-model.number="form.maxPerAccount" type="number" min="0" step="1" placeholder="0 表示不限制" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-field">
|
||||
<label>发货模式</label>
|
||||
<select v-model="form.deliveryMode">
|
||||
<option value="auto">自动发货（下单后自动提取内容）</option>
|
||||
<option value="manual">手动发货（管理员手动处理）</option>
|
||||
</select>
|
||||
<p class="tag">手动发货不会自动提取库存内容</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-field">
|
||||
<label>
|
||||
<input type="checkbox" v-model="form.showNote" class="inline-checkbox" />
|
||||
下单时显示备注输入框
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>
|
||||
<input type="checkbox" v-model="form.showContact" class="inline-checkbox" />
|
||||
下单时显示联系方式输入框
|
||||
</label>
|
||||
<p class="tag">包含手机号和邮箱两个输入框</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button class="primary" @click="handleSubmit">{{ form.id ? '更新商品' : '新增商品' }}</button>
|
||||
<button class="ghost" @click="resetForm">重置表单</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { nextTick, reactive, ref, watch } from 'vue'
|
||||
|
||||
const MAX_SCREENSHOT_URLS = 5
|
||||
const MAX_INVENTORY_ITEMS = 500
|
||||
const screenshotInputSlots = Array.from({ length: MAX_SCREENSHOT_URLS })
|
||||
const inventoryInputRefs = ref([])
|
||||
|
||||
const props = defineProps({
|
||||
open: { type: Boolean, default: false },
|
||||
editItem: { type: Object, default: null }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['close', 'submit'])
|
||||
|
||||
const createScreenshotSlots = (values = []) =>
|
||||
Array.from({ length: MAX_SCREENSHOT_URLS }, (_, i) => values[i] || '')
|
||||
|
||||
const createInventoryItems = (values = []) => {
|
||||
const items = values
|
||||
.map((v) => (v || '').trim())
|
||||
.filter((v) => v)
|
||||
.slice(0, MAX_INVENTORY_ITEMS)
|
||||
return items.length ? items : ['']
|
||||
}
|
||||
|
||||
const normalizeInventoryItems = (values = []) =>
|
||||
values
|
||||
.map((item) => (item || '').trim())
|
||||
.filter((item) => item)
|
||||
.slice(0, MAX_INVENTORY_ITEMS)
|
||||
|
||||
const normalizeScreenshotUrls = (values = []) =>
|
||||
values.map((item) => item.trim()).filter(Boolean).slice(0, MAX_SCREENSHOT_URLS)
|
||||
|
||||
const makeEmptyForm = () => ({
|
||||
id: '',
|
||||
name: '',
|
||||
price: 0,
|
||||
discountPrice: 0,
|
||||
tagsText: '',
|
||||
coverUrl: '',
|
||||
screenshotUrls: createScreenshotSlots(),
|
||||
inventoryItems: createInventoryItems(),
|
||||
description: '',
|
||||
active: true,
|
||||
requireLogin: false,
|
||||
maxPerAccount: 0,
|
||||
deliveryMode: 'auto',
|
||||
showNote: false,
|
||||
showContact: false
|
||||
})
|
||||
|
||||
const form = reactive(makeEmptyForm())
|
||||
|
||||
const fillForm = (item) => {
|
||||
Object.assign(form, {
|
||||
id: item?.id || '',
|
||||
name: item?.name || '',
|
||||
price: item?.price || 0,
|
||||
discountPrice: item?.discountPrice || 0,
|
||||
tagsText: (item?.tags || []).join(','),
|
||||
coverUrl: item?.coverUrl || '',
|
||||
screenshotUrls: createScreenshotSlots(item?.screenshotUrls || []),
|
||||
inventoryItems: createInventoryItems(item?.codes || []),
|
||||
description: item?.description || '',
|
||||
active: item?.active ?? true,
|
||||
requireLogin: item?.requireLogin ?? false,
|
||||
maxPerAccount: item?.maxPerAccount ?? 0,
|
||||
deliveryMode: item?.deliveryMode || 'auto',
|
||||
showNote: item?.showNote ?? false,
|
||||
showContact: item?.showContact ?? false
|
||||
})
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
Object.assign(form, makeEmptyForm())
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.editItem,
|
||||
(item) => {
|
||||
if (item) {
|
||||
fillForm(item)
|
||||
} else {
|
||||
resetForm()
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
const setInventoryInputRef = (el, index) => {
|
||||
if (!el) return
|
||||
inventoryInputRefs.value[index] = el
|
||||
}
|
||||
|
||||
const addInventoryItem = async () => {
|
||||
form.inventoryItems.push('')
|
||||
await nextTick()
|
||||
const lastIndex = form.inventoryItems.length - 1
|
||||
const input = inventoryInputRefs.value[lastIndex]
|
||||
if (input?.focus) input.focus()
|
||||
if (input?.scrollIntoView) input.scrollIntoView({ block: 'center', behavior: 'smooth' })
|
||||
}
|
||||
|
||||
const removeInventoryItem = async (index) => {
|
||||
if (form.inventoryItems.length <= 1) {
|
||||
form.inventoryItems[0] = ''
|
||||
return
|
||||
}
|
||||
form.inventoryItems.splice(index, 1)
|
||||
inventoryInputRefs.value.splice(index, 1)
|
||||
await nextTick()
|
||||
const targetIndex = Math.min(index, form.inventoryItems.length - 1)
|
||||
const input = inventoryInputRefs.value[targetIndex]
|
||||
if (input?.focus) input.focus()
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
emit('submit', {
|
||||
id: form.id,
|
||||
name: form.name,
|
||||
price: form.price,
|
||||
discountPrice: form.discountPrice || 0,
|
||||
tags: form.tagsText,
|
||||
coverUrl: form.coverUrl,
|
||||
codes: normalizeInventoryItems(form.inventoryItems),
|
||||
screenshotUrls: normalizeScreenshotUrls(form.screenshotUrls),
|
||||
description: form.description,
|
||||
active: form.active,
|
||||
requireLogin: form.requireLogin,
|
||||
maxPerAccount: form.maxPerAccount || 0,
|
||||
deliveryMode: form.deliveryMode || 'auto',
|
||||
showNote: form.showNote,
|
||||
showContact: form.showContact
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 40;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
background: rgba(30, 28, 32, 0.35);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
width: min(920px, 100%);
|
||||
max-height: calc(100vh - 48px);
|
||||
overflow: auto;
|
||||
padding: 28px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: 0 24px 60px rgba(33, 33, 40, 0.2);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.form-field input,
|
||||
.form-field textarea {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
padding: 10px 12px;
|
||||
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
|
||||
}
|
||||
|
||||
.form-field textarea {
|
||||
min-height: 120px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
select {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
padding: 10px 12px;
|
||||
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.field-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.inventory-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.inventory-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.inventory-row input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.screenshot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.small {
|
||||
padding: 7px 13px;
|
||||
font-size: 13px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 14px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.inline-checkbox {
|
||||
width: auto;
|
||||
margin-right: 6px;
|
||||
accent-color: var(--accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-field label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.modal-mask {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
padding: 18px;
|
||||
max-height: calc(100vh - 24px);
|
||||
}
|
||||
|
||||
.form-row,
|
||||
.screenshot-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.field-head {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.inventory-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,317 @@
|
||||
<template>
|
||||
<div class="table-wrap">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>商品</th>
|
||||
<th>价格</th>
|
||||
<th class="col-num">库存</th>
|
||||
<th class="col-num">浏览量</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in products" :key="item.id" :class="{ 'row-inactive': !item.active }">
|
||||
<td>
|
||||
<div class="admin-product-cell">
|
||||
<img class="admin-product-thumb" :src="item.coverUrl" :alt="item.name" />
|
||||
<div class="admin-product-info">
|
||||
<span class="product-name">{{ item.name }}</span>
|
||||
<span class="product-id">{{ item.id }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div v-if="item.price === 0" class="price-cell">
|
||||
<span class="price-free">免费</span>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="item.discountPrice > 0 && item.discountPrice < item.price"
|
||||
class="price-cell"
|
||||
>
|
||||
<span class="price-original">¥{{ item.price.toFixed(2) }}</span>
|
||||
<span class="price-discount">¥{{ item.discountPrice.toFixed(2) }}</span>
|
||||
</div>
|
||||
<span v-else class="price-normal">¥{{ item.price.toFixed(2) }}</span>
|
||||
</td>
|
||||
<td class="col-num">
|
||||
<span :class="['stock-badge', item.quantity === 0 ? 'stock-empty' : 'stock-ok']">
|
||||
{{ item.quantity }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="col-num">
|
||||
<span class="view-count">{{ item.viewCount || 0 }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span :class="['status-badge', item.active ? 'status-on' : 'status-off']">
|
||||
{{ item.active ? '上架' : '下架' }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="row-actions">
|
||||
<button class="act-edit" @click="$emit('edit', item)">编辑</button>
|
||||
<button class="act-toggle" @click="$emit('toggle', item)">
|
||||
{{ item.active ? '下架' : '上架' }}
|
||||
</button>
|
||||
<button class="act-delete" @click="$emit('remove', item)">删除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
products: { type: Array, default: () => [] }
|
||||
})
|
||||
|
||||
defineEmits(['edit', 'toggle', 'remove'])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-wrap {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.table thead tr {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border-bottom: 2px solid var(--line);
|
||||
}
|
||||
|
||||
.table th {
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.table td {
|
||||
padding: 14px 16px;
|
||||
font-size: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table tbody tr {
|
||||
border-bottom: 1px solid var(--line);
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.table tbody tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.table tbody tr.row-inactive {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.col-num {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.admin-product-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.admin-product-thumb {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 6px;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--line);
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 10px rgba(33, 33, 40, 0.1);
|
||||
}
|
||||
|
||||
.admin-product-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.product-id {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.price-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.price-original {
|
||||
text-decoration: line-through;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.price-discount {
|
||||
font-weight: 700;
|
||||
color: #e8826a;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.price-free {
|
||||
font-weight: 900;
|
||||
color: #3a9a68;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.price-normal {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.stock-badge {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stock-ok {
|
||||
background: rgba(100, 185, 140, 0.15);
|
||||
color: #3a9a68;
|
||||
}
|
||||
|
||||
.stock-empty {
|
||||
background: rgba(201, 90, 106, 0.12);
|
||||
color: #c95a6a;
|
||||
}
|
||||
|
||||
.view-count {
|
||||
color: var(--muted);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.status-on {
|
||||
background: rgba(100, 185, 140, 0.15);
|
||||
color: #3a9a68;
|
||||
}
|
||||
|
||||
.status-off {
|
||||
background: rgba(140, 140, 145, 0.12);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.row-actions {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.act-edit,
|
||||
.act-toggle,
|
||||
.act-delete {
|
||||
padding: 6px 12px;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||||
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
|
||||
}
|
||||
|
||||
.act-edit {
|
||||
background: rgba(145, 168, 208, 0.15);
|
||||
color: var(--accent-2);
|
||||
}
|
||||
|
||||
.act-edit:hover {
|
||||
background: rgba(145, 168, 208, 0.28);
|
||||
}
|
||||
|
||||
.act-toggle {
|
||||
background: rgba(180, 154, 203, 0.12);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.act-toggle:hover {
|
||||
background: rgba(180, 154, 203, 0.24);
|
||||
}
|
||||
|
||||
.act-delete {
|
||||
background: rgba(201, 90, 106, 0.1);
|
||||
color: #c95a6a;
|
||||
}
|
||||
|
||||
.act-delete:hover {
|
||||
background: rgba(201, 90, 106, 0.2);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.table {
|
||||
min-width: 580px;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 8px 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.admin-product-thumb {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.product-id {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.act-edit,
|
||||
.act-toggle,
|
||||
.act-delete {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<div class="smtp-row">
|
||||
<div class="smtp-header">
|
||||
<span class="smtp-label">邮件通知配置</span>
|
||||
<span class="smtp-desc tag">下单/发货时自动给用户发送通知邮件（支持 QQ / 163 / Gmail / 自定义域名邮箱）</span>
|
||||
<span v-if="message" class="msg-tag" :class="{ error: message.includes('失败') }">{{ message }}</span>
|
||||
</div>
|
||||
<div class="smtp-fields">
|
||||
<label class="smtp-field">
|
||||
<span>发件邮箱</span>
|
||||
<input v-model="form.email" type="email" placeholder="noreply@yourdomain.com" />
|
||||
</label>
|
||||
<label class="smtp-field">
|
||||
<span>SMTP 密码 / 授权码</span>
|
||||
<input v-model="form.password" type="password" placeholder="QQ/163 填授权码；其他填密码" autocomplete="new-password" />
|
||||
</label>
|
||||
<label class="smtp-field">
|
||||
<span>发件人名称</span>
|
||||
<input v-model="form.fromName" type="text" placeholder="萌芽小店" />
|
||||
</label>
|
||||
<label class="smtp-field">
|
||||
<span>SMTP 主机</span>
|
||||
<input v-model="form.host" type="text" placeholder="smtp.qq.com" />
|
||||
</label>
|
||||
<label class="smtp-field smtp-field-port">
|
||||
<span>端口</span>
|
||||
<input v-model="form.port" type="text" placeholder="465" />
|
||||
</label>
|
||||
<button class="primary smtp-save-btn" type="button" :disabled="saving" @click="save">
|
||||
{{ saving ? '保存中...' : '保存配置' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
config: { type: Object, default: () => ({}) },
|
||||
message: { type: String, default: '' }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['save'])
|
||||
|
||||
const saving = ref(false)
|
||||
|
||||
const form = reactive({
|
||||
email: '',
|
||||
password: '',
|
||||
fromName: '',
|
||||
host: 'smtp.qq.com',
|
||||
port: '465'
|
||||
})
|
||||
|
||||
watch(() => props.config, (cfg) => {
|
||||
if (!cfg) return
|
||||
form.email = cfg.email || ''
|
||||
form.password = cfg.password || ''
|
||||
form.fromName = cfg.fromName || ''
|
||||
form.host = cfg.host || 'smtp.qq.com'
|
||||
form.port = cfg.port || '465'
|
||||
}, { immediate: true })
|
||||
|
||||
const save = async () => {
|
||||
saving.value = true
|
||||
try {
|
||||
await emit('save', { ...form })
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.smtp-row {
|
||||
padding: 14px 18px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.smtp-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.smtp-label {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.smtp-desc {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.smtp-fields {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.smtp-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.smtp-field-port {
|
||||
max-width: 90px;
|
||||
flex: 0 0 90px;
|
||||
}
|
||||
|
||||
.smtp-field span {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.smtp-field input {
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.smtp-field input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.smtp-save-btn {
|
||||
align-self: flex-end;
|
||||
padding: 8px 18px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.msg-tag {
|
||||
font-size: 14px;
|
||||
color: var(--accent-2);
|
||||
padding: 3px 8px;
|
||||
border-radius: 5px;
|
||||
background: rgba(145, 168, 208, 0.1);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.msg-tag.error {
|
||||
color: #c95a6a;
|
||||
background: rgba(201, 90, 106, 0.08);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.smtp-fields {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.smtp-field {
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.smtp-field-port {
|
||||
max-width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div v-if="show" class="token-row">
|
||||
<div class="form-field token-field">
|
||||
<label>管理 Token</label>
|
||||
<div class="token-input-wrap">
|
||||
<input :value="token" @input="$emit('update:token', $event.target.value)" placeholder="粘贴 token 后自动加载…" />
|
||||
<button class="ghost small" type="button" @click="$emit('auto-get')">自动获取</button>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
v-if="message"
|
||||
class="msg-tag"
|
||||
:class="{ error: message.includes('失败') || message.includes('错误') }"
|
||||
>{{ message }}</p>
|
||||
</div>
|
||||
<p
|
||||
v-if="inlineMessage"
|
||||
class="msg-inline"
|
||||
:class="{ error: inlineMessage.includes('失败') || inlineMessage.includes('错误') }"
|
||||
>{{ inlineMessage }}</p>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
show: { type: Boolean, default: true },
|
||||
token: { type: String, default: '' },
|
||||
message: { type: String, default: '' },
|
||||
inlineMessage: { type: String, default: '' }
|
||||
})
|
||||
|
||||
defineEmits(['update:token', 'auto-get'])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.token-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 14px;
|
||||
margin-bottom: 16px;
|
||||
padding: 16px 18px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.token-field {
|
||||
flex: 1;
|
||||
max-width: 460px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.token-input-wrap {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.token-input-wrap input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.msg-tag {
|
||||
font-size: 15px;
|
||||
color: var(--accent-2);
|
||||
padding: 4px 10px;
|
||||
border-radius: 5px;
|
||||
background: rgba(145, 168, 208, 0.1);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.msg-tag.error {
|
||||
color: #c95a6a;
|
||||
background: rgba(201, 90, 106, 0.08);
|
||||
}
|
||||
|
||||
.msg-inline {
|
||||
font-size: 15px;
|
||||
color: var(--accent-2);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.msg-inline.error {
|
||||
color: #c95a6a;
|
||||
}
|
||||
|
||||
.small {
|
||||
padding: 7px 13px;
|
||||
font-size: 13px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.token-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 12px 12px;
|
||||
}
|
||||
|
||||
.token-field {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -22,7 +22,7 @@
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { setAuth } from '../shared/auth'
|
||||
import { verifySproutGateToken, fetchSproutGateUser } from '../shared/api'
|
||||
import { verifySproutGateToken } from '../shared/api'
|
||||
|
||||
const router = useRouter()
|
||||
const status = ref('loading')
|
||||
@@ -35,14 +35,15 @@ const parseFragment = () => {
|
||||
const hash = window.location.hash.slice(1)
|
||||
const params = new URLSearchParams(hash)
|
||||
return {
|
||||
token: params.get('token') || '',
|
||||
account: params.get('account') || '',
|
||||
username: params.get('username') || ''
|
||||
token: params.get('token') || '',
|
||||
account: params.get('account') || '',
|
||||
username: params.get('username') || '',
|
||||
avatarUrl: params.get('avatarUrl') || ''
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const { token, account, username } = parseFragment()
|
||||
const { token, account, username, avatarUrl: fragmentAvatar } = parseFragment()
|
||||
|
||||
if (!token) {
|
||||
status.value = 'error'
|
||||
@@ -51,6 +52,7 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
try {
|
||||
// Verify token and get up-to-date user info from SproutGate
|
||||
const verifyData = await verifySproutGateToken(token)
|
||||
if (!verifyData.valid) {
|
||||
status.value = 'error'
|
||||
@@ -58,33 +60,19 @@ onMounted(async () => {
|
||||
return
|
||||
}
|
||||
|
||||
let avatarUrl = verifyData.user?.avatarUrl || ''
|
||||
let finalAccount = verifyData.user?.account || account
|
||||
let finalUsername = verifyData.user?.username || username
|
||||
|
||||
if (!avatarUrl) {
|
||||
try {
|
||||
const meData = await fetchSproutGateUser(token)
|
||||
avatarUrl = meData.user?.avatarUrl || ''
|
||||
finalAccount = meData.user?.account || finalAccount
|
||||
finalUsername = meData.user?.username || finalUsername
|
||||
} catch {
|
||||
// /me failed, proceed with what we have
|
||||
}
|
||||
}
|
||||
|
||||
setAuth({
|
||||
token,
|
||||
account: finalAccount,
|
||||
username: finalUsername,
|
||||
avatarUrl
|
||||
})
|
||||
const user = verifyData.user || {}
|
||||
const finalAccount = user.account || account
|
||||
const finalUsername = user.username || username
|
||||
const finalAvatarUrl = user.avatarUrl || fragmentAvatar
|
||||
const finalEmail = user.email || ''
|
||||
|
||||
setAuth({ token, account: finalAccount, username: finalUsername, avatarUrl: finalAvatarUrl, email: finalEmail })
|
||||
displayName.value = finalUsername || finalAccount
|
||||
status.value = 'success'
|
||||
setTimeout(() => router.push('/'), 1000)
|
||||
} catch {
|
||||
setAuth({ token, account, username, avatarUrl: '' })
|
||||
// If verify fails (network issue), fall back to fragment data
|
||||
setAuth({ token, account, username, avatarUrl: fragmentAvatar })
|
||||
displayName.value = username || account
|
||||
status.value = 'success'
|
||||
setTimeout(() => router.push('/'), 1000)
|
||||
|
||||
545
mengyastore-frontend/src/modules/chat/ChatWidget.vue
Normal file
545
mengyastore-frontend/src/modules/chat/ChatWidget.vue
Normal file
@@ -0,0 +1,545 @@
|
||||
<template>
|
||||
<!-- Floating toggle button -->
|
||||
<button class="chat-fab" @click="toggleOpen" :title="open ? '关闭' : '联系客服'" aria-label="联系客服">
|
||||
<Transition name="icon-flip" mode="out-in">
|
||||
<svg v-if="!open" key="chat" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
<svg v-else key="close" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</Transition>
|
||||
</button>
|
||||
|
||||
<!-- Chat panel -->
|
||||
<Transition name="chat-slide">
|
||||
<div v-if="open" class="chat-panel">
|
||||
<!-- Header -->
|
||||
<div class="chat-header">
|
||||
<div class="chat-header-avatar">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
</div>
|
||||
<div class="chat-header-info">
|
||||
<span class="chat-title">在线客服</span>
|
||||
<span class="chat-subtitle">有问题随时找我们</span>
|
||||
</div>
|
||||
<button class="chat-close-btn" @click="toggleOpen" title="关闭">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Messages -->
|
||||
<div class="chat-messages" ref="messagesEl">
|
||||
<div v-if="loading" class="chat-status">
|
||||
<span class="loading-dots"><span>.</span><span>.</span><span>.</span></span>
|
||||
</div>
|
||||
<div v-else-if="messages.length === 0" class="chat-empty-state">
|
||||
<div class="chat-empty-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.4"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
|
||||
</div>
|
||||
<p class="chat-empty-text">有任何疑问，欢迎留言！</p>
|
||||
<p class="chat-empty-sub">客服在线时会尽快回复您</p>
|
||||
</div>
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="msg in messages"
|
||||
:key="msg.id"
|
||||
:class="['msg-row', msg.fromAdmin ? 'msg-row--admin' : 'msg-row--me']"
|
||||
>
|
||||
<div v-if="msg.fromAdmin" class="msg-avatar msg-avatar--admin">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
||||
</div>
|
||||
<div class="msg-body">
|
||||
<div class="msg-meta">
|
||||
<span class="msg-name">{{ msg.fromAdmin ? '客服' : '我' }}</span>
|
||||
<span class="msg-time">{{ formatTime(msg.sentAt) }}</span>
|
||||
</div>
|
||||
<div class="msg-content">{{ msg.content }}</div>
|
||||
</div>
|
||||
<div v-if="!msg.fromAdmin" class="msg-avatar msg-avatar--me">
|
||||
<img v-if="props.userAvatar" :src="props.userAvatar" class="avatar-img" />
|
||||
<span v-else>{{ (props.userName || '我').charAt(0) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Input -->
|
||||
<form class="chat-input-row" @submit.prevent="send">
|
||||
<input
|
||||
v-model="inputText"
|
||||
class="chat-input"
|
||||
placeholder="输入消息，Enter 发送…"
|
||||
maxlength="500"
|
||||
:disabled="sending"
|
||||
@keydown.enter.exact.prevent="send"
|
||||
/>
|
||||
<button class="chat-send-btn" type="submit" :disabled="sending || !inputText.trim()">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2" fill="currentColor" stroke="none"/></svg>
|
||||
</button>
|
||||
</form>
|
||||
<p class="chat-error" v-if="error">{{ error }}</p>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, nextTick, onUnmounted } from 'vue'
|
||||
import { fetchMyChatMessages, sendChatMessage } from '../shared/api.js'
|
||||
|
||||
const props = defineProps({
|
||||
userToken: { type: String, required: true },
|
||||
userName: { type: String, default: '我' },
|
||||
userAvatar: { type: String, default: '' }
|
||||
})
|
||||
|
||||
const open = ref(false)
|
||||
const messages = ref([])
|
||||
const loading = ref(false)
|
||||
const inputText = ref('')
|
||||
const sending = ref(false)
|
||||
const error = ref('')
|
||||
const messagesEl = ref(null)
|
||||
|
||||
let pollTimer = null
|
||||
|
||||
const formatTime = (iso) => {
|
||||
if (!iso) return ''
|
||||
const d = new Date(iso)
|
||||
return d.toLocaleString('zh-CN', { hour12: false, month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
|
||||
}
|
||||
|
||||
const scrollBottom = async () => {
|
||||
await nextTick()
|
||||
if (messagesEl.value) {
|
||||
messagesEl.value.scrollTop = messagesEl.value.scrollHeight
|
||||
}
|
||||
}
|
||||
|
||||
const loadMessages = async () => {
|
||||
try {
|
||||
messages.value = await fetchMyChatMessages(props.userToken)
|
||||
await scrollBottom()
|
||||
} catch {
|
||||
// silently ignore polling errors
|
||||
}
|
||||
}
|
||||
|
||||
const startPolling = () => {
|
||||
pollTimer = setInterval(loadMessages, 5000)
|
||||
}
|
||||
|
||||
const stopPolling = () => {
|
||||
if (pollTimer) {
|
||||
clearInterval(pollTimer)
|
||||
pollTimer = null
|
||||
}
|
||||
}
|
||||
|
||||
const toggleOpen = async () => {
|
||||
open.value = !open.value
|
||||
if (open.value) {
|
||||
loading.value = true
|
||||
await loadMessages()
|
||||
loading.value = false
|
||||
startPolling()
|
||||
} else {
|
||||
stopPolling()
|
||||
}
|
||||
}
|
||||
|
||||
const send = async () => {
|
||||
const content = inputText.value.trim()
|
||||
if (!content || sending.value) return
|
||||
sending.value = true
|
||||
error.value = ''
|
||||
try {
|
||||
const msg = await sendChatMessage(props.userToken, content)
|
||||
if (msg) {
|
||||
messages.value.push(msg)
|
||||
inputText.value = ''
|
||||
await scrollBottom()
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err?.response?.data?.error || '发送失败，请稍后重试'
|
||||
} finally {
|
||||
sending.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(stopPolling)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ── FAB button ── */
|
||||
.chat-fab {
|
||||
position: fixed;
|
||||
right: 24px;
|
||||
bottom: 28px;
|
||||
z-index: 1200;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
background: #2c2b2d;
|
||||
color: #fff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.chat-fab:hover {
|
||||
transform: scale(1.08);
|
||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.38);
|
||||
}
|
||||
|
||||
/* ── Panel ── */
|
||||
.chat-panel {
|
||||
position: fixed;
|
||||
right: 24px;
|
||||
bottom: 94px;
|
||||
z-index: 1200;
|
||||
width: 340px;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.97);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
box-shadow: 0 16px 56px rgba(0, 0, 0, 0.16);
|
||||
border: 1px solid rgba(255, 255, 255, 0.6);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
.chat-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 13px 16px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-header-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: #f0f0f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.chat-header-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.chat-title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.chat-subtitle {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.chat-close-btn {
|
||||
background: rgba(0,0,0,0.1);
|
||||
border: none;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-close-btn:hover {
|
||||
background: rgba(0,0,0,0.18);
|
||||
}
|
||||
|
||||
/* ── Messages area ── */
|
||||
.chat-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 14px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
scrollbar-width: none;
|
||||
background: #f8f6fb;
|
||||
}
|
||||
|
||||
.chat-messages::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Loading dots */
|
||||
.chat-status {
|
||||
text-align: center;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.loading-dots {
|
||||
font-size: 26px;
|
||||
color: var(--muted);
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
|
||||
.loading-dots span {
|
||||
animation: blink 1.2s infinite;
|
||||
}
|
||||
|
||||
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
|
||||
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes blink {
|
||||
0%, 80%, 100% { opacity: 0.2; }
|
||||
40% { opacity: 1; }
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.chat-empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.chat-empty-icon {
|
||||
color: var(--muted);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.chat-empty-text {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.chat-empty-sub {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Message rows */
|
||||
.msg-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.msg-row--me {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.msg-avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.msg-avatar--admin {
|
||||
background: #2c2b2d;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.msg-avatar--me {
|
||||
background: #e8e8e8;
|
||||
color: #444;
|
||||
overflow: hidden;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.msg-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
max-width: 76%;
|
||||
}
|
||||
|
||||
.msg-row--me .msg-body {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.msg-meta {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: baseline;
|
||||
padding: 0 3px;
|
||||
}
|
||||
|
||||
.msg-name {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.msg-time {
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.msg-content {
|
||||
padding: 9px 13px;
|
||||
border-radius: 14px;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.msg-row--admin .msg-content {
|
||||
background: #fff;
|
||||
color: #1a1a1a;
|
||||
border-bottom-left-radius: 4px;
|
||||
border: 1px solid rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.msg-row--me .msg-content {
|
||||
background: #2c2b2d;
|
||||
color: #fff;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
/* ── Input row ── */
|
||||
.chat-input-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border-top: 1px solid rgba(0,0,0,0.06);
|
||||
background: #fff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
flex: 1;
|
||||
padding: 9px 13px;
|
||||
border-radius: 999px;
|
||||
border: 1.5px solid rgba(180, 154, 203, 0.3);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
background: #f8f6fb;
|
||||
color: var(--text);
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.chat-input:focus {
|
||||
border-color: #aaa;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.chat-send-btn {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
background: #2c2b2d;
|
||||
color: #fff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.15s, opacity 0.15s;
|
||||
}
|
||||
|
||||
.chat-send-btn:disabled {
|
||||
opacity: 0.55;
|
||||
cursor: default;
|
||||
background: #888;
|
||||
}
|
||||
|
||||
.chat-send-btn:not(:disabled):hover {
|
||||
transform: scale(1.08);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.chat-error {
|
||||
font-size: 12px;
|
||||
color: #d64848;
|
||||
padding: 0 14px 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── Animations ── */
|
||||
.chat-slide-enter-active,
|
||||
.chat-slide-leave-active {
|
||||
transition: opacity 0.22s ease, transform 0.22s ease;
|
||||
}
|
||||
|
||||
.chat-slide-enter-from,
|
||||
.chat-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(20px) scale(0.96);
|
||||
}
|
||||
|
||||
.icon-flip-enter-active,
|
||||
.icon-flip-leave-active {
|
||||
transition: opacity 0.15s, transform 0.15s;
|
||||
}
|
||||
|
||||
.icon-flip-enter-from,
|
||||
.icon-flip-leave-to {
|
||||
opacity: 0;
|
||||
transform: rotate(90deg) scale(0.7);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.chat-panel {
|
||||
right: 8px;
|
||||
bottom: 80px;
|
||||
width: calc(100vw - 16px);
|
||||
height: 440px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.chat-fab {
|
||||
right: 16px;
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="maintenance-wrap">
|
||||
<div class="maintenance-card">
|
||||
<div class="maintenance-icon">
|
||||
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1>站点维护中</h1>
|
||||
<p class="divider-line"></p>
|
||||
<p class="reason" v-if="reason">{{ reason }}</p>
|
||||
<p class="reason muted" v-else>暂无维护说明，请稍后再试。</p>
|
||||
<p class="tip">如有紧急需求，请联系管理员。</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
reason: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.maintenance-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 60vh;
|
||||
padding: 40px 5vw;
|
||||
}
|
||||
|
||||
.maintenance-card {
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
background: var(--glass-strong);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 48px 40px;
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
.maintenance-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
||||
color: white;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.maintenance-card h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
margin-bottom: 16px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.divider-line {
|
||||
width: 48px;
|
||||
height: 3px;
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(90deg, var(--accent), var(--accent-2));
|
||||
margin: 0 auto 20px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.reason {
|
||||
font-size: 17px;
|
||||
color: var(--text);
|
||||
line-height: 1.7;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.reason.muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.tip {
|
||||
font-size: 15px;
|
||||
color: var(--muted);
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
194
mengyastore-frontend/src/modules/shared/SplashScreen.vue
Normal file
194
mengyastore-frontend/src/modules/shared/SplashScreen.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<Transition name="splash-fade" appear>
|
||||
<div v-if="visible" class="splash-screen">
|
||||
<!-- Ambient glow -->
|
||||
<div class="splash-glow splash-glow-1"></div>
|
||||
<div class="splash-glow splash-glow-2"></div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="splash-center">
|
||||
<!-- Ripple rings -->
|
||||
<div class="splash-rings">
|
||||
<div class="ring ring-1"></div>
|
||||
<div class="ring ring-2"></div>
|
||||
<div class="ring ring-3"></div>
|
||||
|
||||
<!-- Logo -->
|
||||
<div class="splash-logo-wrap">
|
||||
<img src="/pwa-192x192.png" alt="萌芽小店" class="splash-logo" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<h1 class="splash-title">萌芽小店</h1>
|
||||
<p class="splash-subtitle">加载中</p>
|
||||
|
||||
<!-- Dots loader -->
|
||||
<div class="splash-dots">
|
||||
<span class="dot dot-1"></span>
|
||||
<span class="dot dot-2"></span>
|
||||
<span class="dot dot-3"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
visible: { type: Boolean, default: true }
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.splash-screen {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 99999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(145deg, #f8f5f2 0%, #e9f0f7 45%, #f4eaf1 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Ambient glow blobs */
|
||||
.splash-glow {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
pointer-events: none;
|
||||
animation: glow-pulse 3s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.splash-glow-1 {
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
top: -80px;
|
||||
left: -100px;
|
||||
background: radial-gradient(circle, rgba(180, 154, 203, 0.35) 0%, transparent 70%);
|
||||
}
|
||||
|
||||
.splash-glow-2 {
|
||||
width: 380px;
|
||||
height: 380px;
|
||||
bottom: -60px;
|
||||
right: -80px;
|
||||
background: radial-gradient(circle, rgba(145, 168, 208, 0.3) 0%, transparent 70%);
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
@keyframes glow-pulse {
|
||||
from { opacity: 0.6; transform: scale(1); }
|
||||
to { opacity: 1; transform: scale(1.12); }
|
||||
}
|
||||
|
||||
/* Center content */
|
||||
.splash-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Rings + logo */
|
||||
.splash-rings {
|
||||
position: relative;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.ring {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(180, 154, 203, 0.4);
|
||||
animation: ring-expand 2.4s ease-out infinite;
|
||||
}
|
||||
|
||||
.ring-1 { width: 100px; height: 100px; animation-delay: 0s; }
|
||||
.ring-2 { width: 100px; height: 100px; animation-delay: 0.8s; }
|
||||
.ring-3 { width: 100px; height: 100px; animation-delay: 1.6s; }
|
||||
|
||||
@keyframes ring-expand {
|
||||
0% { width: 88px; height: 88px; opacity: 0.8; border-color: rgba(180, 154, 203, 0.5); }
|
||||
100% { width: 200px; height: 200px; opacity: 0; border-color: rgba(180, 154, 203, 0); }
|
||||
}
|
||||
|
||||
/* Logo */
|
||||
.splash-logo-wrap {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
animation: logo-float 2.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.splash-logo {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
border-radius: 22px;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 12px 40px rgba(33, 33, 40, 0.18), 0 2px 8px rgba(180, 154, 203, 0.25);
|
||||
}
|
||||
|
||||
@keyframes logo-float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-8px); }
|
||||
}
|
||||
|
||||
/* Title */
|
||||
.splash-title {
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: #2c2b2d;
|
||||
letter-spacing: 2px;
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.splash-subtitle {
|
||||
font-size: 13px;
|
||||
color: #8a8690;
|
||||
letter-spacing: 3px;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
||||
/* Dots */
|
||||
.splash-dots {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.dot {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #4ade80;
|
||||
animation: dot-bounce 1.2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.dot-1 { animation-delay: 0s; }
|
||||
.dot-2 { animation-delay: 0.2s; }
|
||||
.dot-3 { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes dot-bounce {
|
||||
0%, 60%, 100% { transform: scale(0.7); opacity: 0.5; }
|
||||
30% { transform: scale(1.2); opacity: 1; }
|
||||
}
|
||||
|
||||
/* Exit transition */
|
||||
.splash-fade-leave-active {
|
||||
transition: opacity 0.45s ease, transform 0.45s ease;
|
||||
}
|
||||
|
||||
.splash-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(1.04);
|
||||
}
|
||||
</style>
|
||||
@@ -97,3 +97,99 @@ export const deleteProduct = async (token, id) => {
|
||||
})
|
||||
return data
|
||||
}
|
||||
|
||||
export const fetchWishlist = async (token) => {
|
||||
const { data } = await api.get('/api/wishlist', {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
})
|
||||
return data.data?.items || []
|
||||
}
|
||||
|
||||
export const addToWishlist = async (token, productId) => {
|
||||
const { data } = await api.post('/api/wishlist', { productId }, {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
})
|
||||
return data.data?.items || []
|
||||
}
|
||||
|
||||
export const removeFromWishlist = async (token, productId) => {
|
||||
const { data } = await api.delete(`/api/wishlist/${productId}`, {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
})
|
||||
return data.data?.items || []
|
||||
}
|
||||
|
||||
export const fetchAdminOrders = async (token) => {
|
||||
const { data } = await api.get('/api/admin/orders', { params: { token } })
|
||||
return data.data || []
|
||||
}
|
||||
|
||||
export const deleteAdminOrder = async (token, orderId) => {
|
||||
await api.delete(`/api/admin/orders/${orderId}`, { params: { token } })
|
||||
}
|
||||
|
||||
export const fetchSiteMaintenance = async () => {
|
||||
const { data } = await api.get('/api/site/maintenance')
|
||||
return data.data || { maintenance: false, reason: '' }
|
||||
}
|
||||
|
||||
export const setSiteMaintenance = async (token, maintenance, reason) => {
|
||||
const { data } = await api.post('/api/admin/site/maintenance', { maintenance, reason }, {
|
||||
params: { token }
|
||||
})
|
||||
return data.data || {}
|
||||
}
|
||||
|
||||
// ---- SMTP Config ----
|
||||
export const fetchSMTPConfig = async (token) => {
|
||||
const { data } = await api.get('/api/admin/site/smtp', { params: { token } })
|
||||
return data.data || {}
|
||||
}
|
||||
|
||||
export const setSMTPConfig = async (token, cfg) => {
|
||||
const { data } = await api.post('/api/admin/site/smtp', cfg, { params: { token } })
|
||||
return data.data
|
||||
}
|
||||
|
||||
// ---- Chat (user) ----
|
||||
export const fetchMyChatMessages = async (userToken) => {
|
||||
const { data } = await api.get('/api/chat/messages', {
|
||||
headers: { Authorization: `Bearer ${userToken}` }
|
||||
})
|
||||
return data.data?.messages || []
|
||||
}
|
||||
|
||||
export const sendChatMessage = async (userToken, content) => {
|
||||
const { data } = await api.post('/api/chat/messages', { content }, {
|
||||
headers: { Authorization: `Bearer ${userToken}` }
|
||||
})
|
||||
return data.data?.message || null
|
||||
}
|
||||
|
||||
// ---- Chat (admin) ----
|
||||
export const fetchAdminAllConversations = async (adminToken) => {
|
||||
const { data } = await api.get('/api/admin/chat', { params: { token: adminToken } })
|
||||
return data.data?.conversations || {}
|
||||
}
|
||||
|
||||
export const fetchAdminConversation = async (adminToken, account) => {
|
||||
const { data } = await api.get(`/api/admin/chat/${encodeURIComponent(account)}`, {
|
||||
params: { token: adminToken }
|
||||
})
|
||||
return data.data?.messages || []
|
||||
}
|
||||
|
||||
export const adminSendChatReply = async (adminToken, account, content) => {
|
||||
const { data } = await api.post(
|
||||
`/api/admin/chat/${encodeURIComponent(account)}`,
|
||||
{ content },
|
||||
{ params: { token: adminToken } }
|
||||
)
|
||||
return data.data?.message || null
|
||||
}
|
||||
|
||||
export const adminClearConversation = async (adminToken, account) => {
|
||||
await api.delete(`/api/admin/chat/${encodeURIComponent(account)}`, {
|
||||
params: { token: adminToken }
|
||||
})
|
||||
}
|
||||
|
||||
@@ -15,35 +15,39 @@ const loadAuth = () => {
|
||||
const saved = loadAuth()
|
||||
|
||||
export const authState = reactive({
|
||||
token: saved?.token || '',
|
||||
account: saved?.account || '',
|
||||
username: saved?.username || '',
|
||||
avatarUrl: saved?.avatarUrl || ''
|
||||
token: saved?.token || '',
|
||||
account: saved?.account || '',
|
||||
username: saved?.username || '',
|
||||
avatarUrl: saved?.avatarUrl || '',
|
||||
email: saved?.email || ''
|
||||
})
|
||||
|
||||
export const isLoggedIn = () => !!authState.token
|
||||
|
||||
export const setAuth = (info) => {
|
||||
authState.token = info.token || ''
|
||||
authState.account = info.account || ''
|
||||
authState.username = info.username || ''
|
||||
authState.token = info.token || ''
|
||||
authState.account = info.account || ''
|
||||
authState.username = info.username || ''
|
||||
authState.avatarUrl = info.avatarUrl || ''
|
||||
authState.email = info.email || ''
|
||||
localStorage.setItem(
|
||||
AUTH_KEY,
|
||||
JSON.stringify({
|
||||
token: authState.token,
|
||||
account: authState.account,
|
||||
username: authState.username,
|
||||
avatarUrl: authState.avatarUrl
|
||||
token: authState.token,
|
||||
account: authState.account,
|
||||
username: authState.username,
|
||||
avatarUrl: authState.avatarUrl,
|
||||
email: authState.email
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
export const clearAuth = () => {
|
||||
authState.token = ''
|
||||
authState.account = ''
|
||||
authState.username = ''
|
||||
authState.token = ''
|
||||
authState.account = ''
|
||||
authState.username = ''
|
||||
authState.avatarUrl = ''
|
||||
authState.email = ''
|
||||
localStorage.removeItem(AUTH_KEY)
|
||||
}
|
||||
|
||||
|
||||
66
mengyastore-frontend/src/modules/shared/useWishlist.js
Normal file
66
mengyastore-frontend/src/modules/shared/useWishlist.js
Normal file
@@ -0,0 +1,66 @@
|
||||
import { computed, ref } from 'vue'
|
||||
import { authState, isLoggedIn } from './auth'
|
||||
import {
|
||||
fetchWishlist as apiFetchWishlist,
|
||||
addToWishlist as apiAddToWishlist,
|
||||
removeFromWishlist as apiRemoveFromWishlist
|
||||
} from './api'
|
||||
|
||||
const wishlistIds = ref([])
|
||||
const wishlistSet = computed(() => new Set(wishlistIds.value))
|
||||
const wishlistCount = computed(() => wishlistIds.value.length)
|
||||
|
||||
const loadWishlist = async () => {
|
||||
if (!isLoggedIn()) {
|
||||
wishlistIds.value = []
|
||||
return
|
||||
}
|
||||
try {
|
||||
wishlistIds.value = await apiFetchWishlist(authState.token)
|
||||
} catch {
|
||||
wishlistIds.value = []
|
||||
}
|
||||
}
|
||||
|
||||
const isInWishlist = (productId) => wishlistSet.value.has(productId)
|
||||
|
||||
const addToWishlist = async (productId) => {
|
||||
if (!isLoggedIn()) return
|
||||
try {
|
||||
wishlistIds.value = await apiAddToWishlist(authState.token, productId)
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
const removeFromWishlist = async (productId) => {
|
||||
if (!isLoggedIn()) return
|
||||
try {
|
||||
wishlistIds.value = await apiRemoveFromWishlist(authState.token, productId)
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
const toggleWishlist = async (productId) => {
|
||||
if (isInWishlist(productId)) {
|
||||
await removeFromWishlist(productId)
|
||||
} else {
|
||||
await addToWishlist(productId)
|
||||
}
|
||||
}
|
||||
|
||||
const getWishlistProducts = (allProducts) => {
|
||||
const idSet = wishlistSet.value
|
||||
return allProducts.filter((p) => idSet.has(p.id))
|
||||
}
|
||||
|
||||
export {
|
||||
wishlistCount,
|
||||
isInWishlist,
|
||||
addToWishlist,
|
||||
removeFromWishlist,
|
||||
toggleWishlist,
|
||||
getWishlistProducts,
|
||||
loadWishlist
|
||||
}
|
||||
@@ -29,15 +29,53 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="checkout-form" @submit.prevent="submitOrder" v-if="!orderResult">
|
||||
<div class="checkout-form" v-if="!orderResult && product.requireLogin && !loggedIn">
|
||||
<div class="require-login-block">
|
||||
<p class="require-login-title">该商品需要登录后才能购买</p>
|
||||
<a class="primary btn-inline" :href="loginUrl">立即登录</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="checkout-form" @submit.prevent="submitOrder" v-else-if="!orderResult">
|
||||
<div class="form-field">
|
||||
<label>下单数量</label>
|
||||
<input v-model.number="form.quantity" min="1" type="number" />
|
||||
<input
|
||||
v-model.number="form.quantity"
|
||||
min="1"
|
||||
:max="product.maxPerAccount > 0 ? product.maxPerAccount : undefined"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
<p class="tag">预计总价：¥ {{ totalPrice.toFixed(2) }}</p>
|
||||
<p class="tag login-hint" v-if="!loggedIn">
|
||||
提示：<a :href="loginUrl">登录萌芽账号</a> 后下单可查看历史订单记录
|
||||
<p class="tag limit-hint" v-if="product.maxPerAccount > 0">
|
||||
该商品每个账户最多可购买 {{ product.maxPerAccount }} 个
|
||||
</p>
|
||||
|
||||
<div class="form-field" v-if="product.showNote">
|
||||
<label>备注（选填）</label>
|
||||
<textarea v-model="form.note" placeholder="填写您的备注信息…" rows="3"></textarea>
|
||||
</div>
|
||||
|
||||
<template v-if="product.showContact">
|
||||
<div class="form-row contact-row">
|
||||
<div class="form-field">
|
||||
<label>手机号（选填）</label>
|
||||
<input v-model="form.contactPhone" type="tel" placeholder="138xxxx0000" />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>邮箱（选填）</label>
|
||||
<input v-model="form.contactEmail" type="email" placeholder="you@example.com" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<p class="tag login-hint" v-if="!loggedIn">
|
||||
<a :href="loginUrl">登录萌芽账号</a> 后购买可享受：历史订单记录、专属优惠商品及更多购买权益
|
||||
</p>
|
||||
<div class="delivery-tip" v-if="product.deliveryMode === 'manual'">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||
该商品为手动发货，付款后管理员将核验并处理您的订单
|
||||
</div>
|
||||
<button class="primary" type="submit" :disabled="submitting">
|
||||
{{ submitting ? '生成中...' : '生成二维码下单' }}
|
||||
</button>
|
||||
@@ -66,6 +104,13 @@
|
||||
<p class="tag">购买后内容</p>
|
||||
<textarea class="delivery-box" readonly :value="deliveredCodes.join('\n')"></textarea>
|
||||
</div>
|
||||
<div v-else-if="isManualDelivery" class="manual-delivery-notice">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
||||
<div>
|
||||
<p class="manual-delivery-title">等待发货中</p>
|
||||
<p class="tag">管理员将尽快处理您的订单并进行发货，请关注您的邮箱或联系方式。</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="tag">感谢购买！如有问题请联系售后邮箱。</p>
|
||||
</template>
|
||||
</section>
|
||||
@@ -108,8 +153,12 @@ const loggedIn = computed(() => isLoggedIn())
|
||||
const loginUrl = computed(() => getLoginUrl())
|
||||
|
||||
const form = reactive({
|
||||
quantity: 1
|
||||
quantity: 1,
|
||||
note: '',
|
||||
contactPhone: '',
|
||||
contactEmail: ''
|
||||
})
|
||||
const isManualDelivery = ref(false)
|
||||
|
||||
const renderMarkdown = (content) => md.render(content || '')
|
||||
|
||||
@@ -145,7 +194,11 @@ const submitOrder = async () => {
|
||||
try {
|
||||
const payload = {
|
||||
productId: product.value.id,
|
||||
quantity: form.quantity
|
||||
quantity: form.quantity,
|
||||
note: form.note || '',
|
||||
contactPhone: form.contactPhone || '',
|
||||
contactEmail: form.contactEmail || '',
|
||||
notifyEmail: authState.email || ''
|
||||
}
|
||||
const token = isLoggedIn() ? authState.token : null
|
||||
const response = await createOrder(payload, token)
|
||||
@@ -166,6 +219,7 @@ const doConfirm = async () => {
|
||||
try {
|
||||
const result = await confirmOrder(orderResult.value.orderId)
|
||||
deliveredCodes.value = result.deliveredCodes || []
|
||||
isManualDelivery.value = result.isManual || result.deliveryMode === 'manual'
|
||||
confirmed.value = true
|
||||
} catch (err) {
|
||||
confirmError.value = err?.response?.data?.error || '确认失败，请重试'
|
||||
@@ -213,7 +267,7 @@ onMounted(async () => {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.summary-content {
|
||||
@@ -248,7 +302,7 @@ onMounted(async () => {
|
||||
max-width: 320px;
|
||||
margin: 12px auto;
|
||||
width: 100%;
|
||||
border-radius: 14px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
@@ -266,7 +320,7 @@ onMounted(async () => {
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(135deg, var(--accent), var(--accent-2));
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
@@ -283,18 +337,18 @@ onMounted(async () => {
|
||||
width: min(520px, 100%);
|
||||
min-height: 120px;
|
||||
padding: 14px 16px;
|
||||
border-radius: 14px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
line-height: 1.7;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #d64848;
|
||||
font-size: 13px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.status {
|
||||
@@ -307,6 +361,87 @@ onMounted(async () => {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.require-login-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 32px 24px;
|
||||
text-align: center;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.require-login-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.btn-inline {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
padding: 10px 28px;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.limit-hint {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--line);
|
||||
font-size: 15px;
|
||||
font-family: inherit;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: var(--text);
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.contact-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.delivery-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 14px;
|
||||
background: rgba(90, 120, 200, 0.08);
|
||||
border: 1px solid rgba(90, 120, 200, 0.2);
|
||||
border-radius: 8px;
|
||||
color: #5a78c8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.manual-delivery-notice {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: rgba(90, 180, 120, 0.08);
|
||||
border: 1px solid rgba(90, 180, 120, 0.25);
|
||||
border-radius: 8px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.manual-delivery-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #3a9a68;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.checkout-grid {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -321,5 +456,9 @@ onMounted(async () => {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.contact-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -68,6 +68,15 @@
|
||||
|
||||
<div class="detail-actions">
|
||||
<button class="buy-button" @click="goCheckout">立即下单</button>
|
||||
<button
|
||||
v-if="loggedIn"
|
||||
class="ghost wishlist-action"
|
||||
:class="{ 'wishlist-active': inWishlist }"
|
||||
type="button"
|
||||
@click="onToggleWishlist"
|
||||
>
|
||||
{{ inWishlist ? '★ 已收藏' : '☆ 加入收藏夹' }}
|
||||
</button>
|
||||
<button class="ghost" @click="goBack">返回商店首页</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -91,6 +100,8 @@ import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import { fetchProducts, recordProductView } from '../shared/api'
|
||||
import { isLoggedIn } from '../shared/auth'
|
||||
import { isInWishlist, toggleWishlist } from '../shared/useWishlist'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
@@ -140,6 +151,12 @@ const galleryImages = computed(() => {
|
||||
return images
|
||||
})
|
||||
|
||||
const loggedIn = computed(() => isLoggedIn())
|
||||
const inWishlist = computed(() => product.value ? isInWishlist(product.value.id) : false)
|
||||
const onToggleWishlist = () => {
|
||||
if (product.value) toggleWishlist(product.value.id)
|
||||
}
|
||||
|
||||
const goBack = () => {
|
||||
router.push('/')
|
||||
}
|
||||
@@ -215,7 +232,7 @@ onMounted(async () => {
|
||||
.detail-description {
|
||||
display: block;
|
||||
color: var(--text);
|
||||
font-size: 15px;
|
||||
font-size: 17px;
|
||||
line-height: 1.8;
|
||||
-webkit-line-clamp: initial;
|
||||
-webkit-box-orient: initial;
|
||||
@@ -231,7 +248,7 @@ onMounted(async () => {
|
||||
.detail-gallery-main {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 18px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
@@ -292,11 +309,11 @@ onMounted(async () => {
|
||||
width: 100%;
|
||||
height: 76px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.detail-thumb span {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@@ -310,6 +327,16 @@ onMounted(async () => {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.wishlist-action {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.wishlist-action.wishlist-active {
|
||||
color: #e8826a;
|
||||
border-color: rgba(232, 130, 106, 0.35);
|
||||
background: rgba(255, 240, 235, 0.6);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.detail-thumb {
|
||||
padding: 6px;
|
||||
|
||||
@@ -1,91 +1,44 @@
|
||||
<template>
|
||||
<section class="page-card">
|
||||
<div class="hero">
|
||||
<div>
|
||||
<h2>所有商品</h2>
|
||||
<div class="filter-search-row">
|
||||
<div class="filters">
|
||||
<button
|
||||
class="filter-btn"
|
||||
:class="{ active: filter === 'all' }"
|
||||
type="button"
|
||||
@click="setFilter('all')"
|
||||
>
|
||||
全部
|
||||
</button>
|
||||
<button
|
||||
class="filter-btn"
|
||||
:class="{ active: filter === 'free' }"
|
||||
type="button"
|
||||
@click="setFilter('free')"
|
||||
>
|
||||
免费
|
||||
</button>
|
||||
</div>
|
||||
<div class="search-row">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
class="search-input"
|
||||
type="text"
|
||||
placeholder="搜索商品/标签"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<h2>所有商品</h2>
|
||||
<div class="filters">
|
||||
<button
|
||||
v-for="opt in VIEW_OPTIONS"
|
||||
:key="opt.value"
|
||||
class="filter-btn"
|
||||
:class="{ active: viewMode === opt.value }"
|
||||
type="button"
|
||||
@click="setViewMode(opt.value)"
|
||||
>
|
||||
{{ opt.label }}
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
class="search-input"
|
||||
type="text"
|
||||
placeholder="搜索商品/标签"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="status">加载中...</div>
|
||||
<div v-else>
|
||||
<div class="grid">
|
||||
<div
|
||||
<ProductCard
|
||||
v-for="item in pagedProducts"
|
||||
:key="item.id"
|
||||
:class="['product-link', { 'is-disabled': isSoldOut(item) }]"
|
||||
@click="handleCardClick(item)"
|
||||
>
|
||||
<article class="product-card">
|
||||
<div class="cover-wrap">
|
||||
<img :src="item.coverUrl" :alt="item.name" />
|
||||
<div v-if="isSoldOut(item)" class="soldout-badge">已售空</div>
|
||||
</div>
|
||||
<div class="card-top">
|
||||
<h3 class="card-name">{{ item.name }}</h3>
|
||||
<div class="card-price">
|
||||
<span v-if="isFree(item)" class="product-price free-price">免费</span>
|
||||
<span
|
||||
v-else-if="item.discountPrice > 0 && item.discountPrice < item.price"
|
||||
class="product-price"
|
||||
>
|
||||
<span class="price-original">¥ {{ item.price.toFixed(2) }}</span>
|
||||
<span class="price-discount">¥ {{ item.discountPrice.toFixed(2) }}</span>
|
||||
</span>
|
||||
<span v-else class="product-price">¥ {{ item.price.toFixed(2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-mid">
|
||||
<div class="markdown" v-html="renderMarkdown(item.description)"></div>
|
||||
</div>
|
||||
|
||||
<div class="card-bottom">
|
||||
<div class="meta-row">
|
||||
<div class="tag">库存：{{ item.quantity }}</div>
|
||||
<div class="tag">浏览量：{{ item.viewCount || 0 }}</div>
|
||||
</div>
|
||||
<div v-if="item.tags && item.tags.length" class="tag-row">
|
||||
<span v-for="tag in item.tags" :key="tag" class="tag-chip">
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
:item="item"
|
||||
@click="handleCardClick"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="pagination" v-if="totalPages > 1">
|
||||
<button class="ghost" :disabled="page === 1" @click="page--">上一页</button>
|
||||
<span class="tag">第 {{ page }} / {{ totalPages }} 页</span>
|
||||
<button class="ghost" :disabled="page === totalPages" @click="page++">下一页</button>
|
||||
<button class="ghost pg-btn" :disabled="page === 1" @click="page = 1">首页</button>
|
||||
<button class="ghost pg-btn" :disabled="page === 1" @click="page--">上一页</button>
|
||||
<span class="pg-info">第 {{ page }} / {{ totalPages }} 页</span>
|
||||
<button class="ghost pg-btn" :disabled="page === totalPages" @click="page++">下一页</button>
|
||||
<button class="ghost pg-btn" :disabled="page === totalPages" @click="page = totalPages">末页</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -94,38 +47,43 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import { fetchProducts } from '../shared/api'
|
||||
import ProductCard from './components/ProductCard.vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const VIEW_OPTIONS = [
|
||||
{ value: 'all', label: '全部' },
|
||||
{ value: 'free', label: '免费' },
|
||||
{ value: 'newest', label: '新上架' },
|
||||
{ value: 'most-sold', label: '最多购买' },
|
||||
{ value: 'most-viewed', label: '最多浏览' },
|
||||
{ value: 'price-high', label: '价格最高' },
|
||||
{ value: 'price-low', label: '价格最低' }
|
||||
]
|
||||
|
||||
const products = ref([])
|
||||
const loading = ref(true)
|
||||
const md = new MarkdownIt()
|
||||
const page = ref(1)
|
||||
const perPage = ref(20)
|
||||
const filter = ref('all')
|
||||
const viewMode = ref('all')
|
||||
const searchQuery = ref('')
|
||||
|
||||
const renderMarkdown = (content) => md.render(content || '')
|
||||
|
||||
const updatePerPage = () => {
|
||||
perPage.value = window.innerWidth <= 900 ? 6 : 20
|
||||
perPage.value = window.innerWidth <= 900 ? 10 : 20
|
||||
page.value = 1
|
||||
}
|
||||
|
||||
const getPayPrice = (item) => {
|
||||
if (!item) return 0
|
||||
// 折扣规则：
|
||||
// - 未填/无效折扣：discountPrice <= 0 或 >= price => 不启用折扣
|
||||
// - 只有当 discountPrice > 0 且小于原价，才用折扣价
|
||||
// - 只有 price = 0（实付价为 0）才显示“免费”
|
||||
// 折扣规则：discountPrice > 0 且小于原价时启用，price = 0 时显示"免费"
|
||||
if (item.price === 0) return 0
|
||||
if (item.discountPrice > 0 && item.discountPrice < item.price) return item.discountPrice
|
||||
return item.price
|
||||
}
|
||||
|
||||
const isFree = (item) => getPayPrice(item) === 0
|
||||
const isSoldOut = (item) => item && item.quantity === 0
|
||||
|
||||
const matchesSearch = (item) => {
|
||||
const q = (searchQuery.value || '').trim().toLowerCase()
|
||||
@@ -136,9 +94,32 @@ const matchesSearch = (item) => {
|
||||
}
|
||||
|
||||
const filteredProducts = computed(() => {
|
||||
let list = products.value
|
||||
if (filter.value === 'free') list = list.filter((p) => isFree(p))
|
||||
let list = [...products.value]
|
||||
|
||||
if (viewMode.value === 'free') list = list.filter((p) => isFree(p))
|
||||
|
||||
if ((searchQuery.value || '').trim()) list = list.filter((p) => matchesSearch(p))
|
||||
|
||||
switch (viewMode.value) {
|
||||
case 'newest':
|
||||
list.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
|
||||
break
|
||||
case 'most-sold':
|
||||
list.sort((a, b) => (b.totalSold || 0) - (a.totalSold || 0))
|
||||
break
|
||||
case 'most-viewed':
|
||||
list.sort((a, b) => (b.viewCount || 0) - (a.viewCount || 0))
|
||||
break
|
||||
case 'price-high':
|
||||
list.sort((a, b) => getPayPrice(b) - getPayPrice(a))
|
||||
break
|
||||
case 'price-low':
|
||||
list.sort((a, b) => getPayPrice(a) - getPayPrice(b))
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
|
||||
return list
|
||||
})
|
||||
|
||||
@@ -151,17 +132,13 @@ const pagedProducts = computed(() => {
|
||||
return filteredProducts.value.slice(start, start + perPage.value)
|
||||
})
|
||||
|
||||
const isSoldOut = (item) => item && item.quantity === 0
|
||||
|
||||
const handleCardClick = (item) => {
|
||||
if (!item || isSoldOut(item)) {
|
||||
return
|
||||
}
|
||||
if (!item || isSoldOut(item)) return
|
||||
router.push(`/product/${item.id}`)
|
||||
}
|
||||
|
||||
const setFilter = (next) => {
|
||||
filter.value = next
|
||||
const setViewMode = (next) => {
|
||||
viewMode.value = next
|
||||
page.value = 1
|
||||
}
|
||||
|
||||
@@ -175,13 +152,8 @@ onMounted(async () => {
|
||||
}
|
||||
})
|
||||
|
||||
watch(filter, () => {
|
||||
page.value = 1
|
||||
})
|
||||
|
||||
watch(searchQuery, () => {
|
||||
page.value = 1
|
||||
})
|
||||
watch(viewMode, () => { page.value = 1 })
|
||||
watch(searchQuery, () => { page.value = 1 })
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', updatePerPage)
|
||||
@@ -192,30 +164,17 @@ onUnmounted(() => {
|
||||
.hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-search-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 320px;
|
||||
max-width: 100%;
|
||||
@@ -223,8 +182,8 @@ onUnmounted(() => {
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
padding: 10px 14px;
|
||||
font-family: 'Source Sans 3', sans-serif;
|
||||
font-size: 14px;
|
||||
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@@ -233,30 +192,13 @@ onUnmounted(() => {
|
||||
box-shadow: 0 0 0 3px rgba(180, 154, 203, 0.18);
|
||||
}
|
||||
|
||||
.tag-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--accent-2);
|
||||
background: rgba(145, 168, 208, 0.08);
|
||||
border: 1px solid rgba(145, 168, 208, 0.18);
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
padding: 8px 14px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
|
||||
}
|
||||
@@ -272,140 +214,79 @@ onUnmounted(() => {
|
||||
box-shadow: 0 10px 30px rgba(145, 168, 208, 0.35);
|
||||
}
|
||||
|
||||
.free-price {
|
||||
color: #3a9a68;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.product-link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.product-link.is-disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
gap: 12px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-top {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.card-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.card-mid {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-mid .markdown {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cover-wrap {
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cover-wrap img {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.soldout-badge {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(20, 18, 22, 0.52);
|
||||
backdrop-filter: blur(3px);
|
||||
color: #fff;
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.price-original {
|
||||
text-decoration: line-through;
|
||||
color: var(--muted);
|
||||
margin-right: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.price-discount {
|
||||
color: var(--accent-2);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 24px 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 14px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
margin-top: 22px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pg-btn {
|
||||
padding: 6px 14px;
|
||||
font-size: 14px;
|
||||
border-radius: 999px;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.pg-btn:disabled {
|
||||
opacity: 0.38;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.pg-info {
|
||||
font-size: 14px;
|
||||
color: var(--muted);
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.filter-search-row {
|
||||
.hero {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.hero h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Filter buttons: scrollable horizontal row, no wrap */
|
||||
.filters {
|
||||
flex-wrap: nowrap;
|
||||
overflow-x: auto;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding-bottom: 4px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.filters::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
flex-shrink: 0;
|
||||
padding: 6px 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,342 @@
|
||||
<template>
|
||||
<div
|
||||
:class="['product-link', { 'is-disabled': isSoldOut }]"
|
||||
@click="$emit('click', item)"
|
||||
>
|
||||
<article class="product-card">
|
||||
<div class="cover-wrap">
|
||||
<img :src="item.coverUrl" :alt="item.name" />
|
||||
<div v-if="isSoldOut" class="soldout-badge">已售空</div>
|
||||
<div v-else-if="item.requireLogin" class="require-login-badge">需登录</div>
|
||||
<button
|
||||
v-if="loggedIn"
|
||||
class="wishlist-btn"
|
||||
:class="{ 'in-wishlist': inWishlist }"
|
||||
type="button"
|
||||
@click="onWishlistClick"
|
||||
:title="inWishlist ? '取消收藏' : '加入收藏'"
|
||||
>
|
||||
{{ inWishlist ? '★' : '☆' }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-top">
|
||||
<h3 class="card-name">{{ item.name }}</h3>
|
||||
<div class="card-price">
|
||||
<span v-if="isFree" class="product-price free-price">免费</span>
|
||||
<span
|
||||
v-else-if="item.discountPrice > 0 && item.discountPrice < item.price"
|
||||
class="product-price"
|
||||
>
|
||||
<span class="price-original">¥ {{ item.price.toFixed(2) }}</span>
|
||||
<span class="price-discount">¥ {{ item.discountPrice.toFixed(2) }}</span>
|
||||
</span>
|
||||
<span v-else class="product-price">¥ {{ item.price.toFixed(2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-mid">
|
||||
<div class="markdown" v-html="renderedDescription"></div>
|
||||
</div>
|
||||
|
||||
<div class="card-bottom">
|
||||
<div v-if="item.tags && item.tags.length" class="tag-row">
|
||||
<span v-for="tag in item.tags" :key="tag" class="tag-chip">{{ tag }}</span>
|
||||
</div>
|
||||
<div class="meta-row">
|
||||
<div class="tag">库存：{{ item.quantity }}</div>
|
||||
<div class="tag">浏览量：{{ item.viewCount || 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import { isLoggedIn } from '../../shared/auth'
|
||||
import { isInWishlist, toggleWishlist } from '../../shared/useWishlist'
|
||||
|
||||
const md = new MarkdownIt()
|
||||
|
||||
const props = defineProps({
|
||||
item: { type: Object, required: true }
|
||||
})
|
||||
|
||||
const emit = defineEmits(['click'])
|
||||
|
||||
const inWishlist = computed(() => isInWishlist(props.item.id))
|
||||
const loggedIn = computed(() => isLoggedIn())
|
||||
|
||||
const onWishlistClick = (e) => {
|
||||
e.stopPropagation()
|
||||
toggleWishlist(props.item.id)
|
||||
}
|
||||
|
||||
const payPrice = computed(() => {
|
||||
if (!props.item) return 0
|
||||
if (props.item.price === 0) return 0
|
||||
if (props.item.discountPrice > 0 && props.item.discountPrice < props.item.price) {
|
||||
return props.item.discountPrice
|
||||
}
|
||||
return props.item.price
|
||||
})
|
||||
|
||||
const isFree = computed(() => payPrice.value === 0)
|
||||
const isSoldOut = computed(() => props.item && props.item.quantity === 0)
|
||||
const renderedDescription = computed(() => md.render(props.item.description || ''))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.product-link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.product-link.is-disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
gap: 12px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-top {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.card-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.card-mid {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-mid .markdown {
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
color: var(--muted);
|
||||
line-height: 1.6;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cover-wrap {
|
||||
position: relative;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cover-wrap img {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.soldout-badge {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(20, 18, 22, 0.52);
|
||||
backdrop-filter: blur(3px);
|
||||
color: #fff;
|
||||
font-family: 'KaiTi', 'STKaiti', '楷体', '楷体_GB2312', serif;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.require-login-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(180, 154, 203, 0.85);
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
pointer-events: none;
|
||||
backdrop-filter: blur(4px);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.wishlist-btn {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
backdrop-filter: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
|
||||
transition: color 0.2s ease, transform 0.15s ease;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wishlist-btn:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.wishlist-btn.in-wishlist {
|
||||
color: #ffb347;
|
||||
text-shadow: 0 1px 6px rgba(255, 140, 0, 0.6);
|
||||
}
|
||||
|
||||
.tag-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--accent-2);
|
||||
background: rgba(145, 168, 208, 0.08);
|
||||
border: 1px solid rgba(145, 168, 208, 0.18);
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 14px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.free-price {
|
||||
color: #3a9a68;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.price-original {
|
||||
text-decoration: line-through;
|
||||
color: var(--muted);
|
||||
margin-right: 6px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.price-discount {
|
||||
color: var(--accent-2);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.cover-wrap img {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
/* Name + price on one line, compressed */
|
||||
.card-top {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.card-price {
|
||||
flex-shrink: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.price-original {
|
||||
font-size: 11px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.free-price {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card-mid {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card-mid .markdown {
|
||||
font-size: 12px;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.card-bottom {
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tag-row {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.tag-chip {
|
||||
font-size: 11px;
|
||||
padding: 2px 7px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -9,43 +9,70 @@
|
||||
|
||||
<section class="page-card" v-else>
|
||||
<div class="orders-header">
|
||||
<div>
|
||||
<div class="header-info">
|
||||
<h2>我的订单</h2>
|
||||
<p class="tag">
|
||||
已登录：{{ authState.username || authState.account }}
|
||||
<span v-if="orders.length">· 共 {{ orders.length }} 笔订单</span>
|
||||
{{ authState.username || authState.account }}
|
||||
<span v-if="orders.length" class="order-count">共 {{ orders.length }} 笔</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="orders-actions">
|
||||
<button class="ghost" @click="refresh">刷新</button>
|
||||
<button class="ghost" @click="goHome">返回商店</button>
|
||||
<button class="ghost small-act" @click="refresh">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>
|
||||
刷新
|
||||
</button>
|
||||
<button class="ghost small-act" @click="goHome">← 返回商店</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="status">加载中...</div>
|
||||
<div v-if="loading" class="status">加载中…</div>
|
||||
|
||||
<div v-else-if="orders.length === 0" class="status">暂无订单记录</div>
|
||||
<div v-else-if="orders.length === 0" class="empty-state">
|
||||
<svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.3"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
|
||||
<p>暂无订单记录</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="orders-list">
|
||||
<div v-for="order in orders" :key="order.id" class="order-card">
|
||||
<div class="order-head">
|
||||
<div>
|
||||
<h4>{{ order.productName }}</h4>
|
||||
<span class="tag">订单号：{{ order.id }}</span>
|
||||
</div>
|
||||
<div class="order-meta">
|
||||
<span class="badge">数量 {{ order.quantity }}</span>
|
||||
<span class="tag">{{ formatTime(order.createdAt) }}</span>
|
||||
<!-- Card header -->
|
||||
<div class="order-card-header">
|
||||
<div class="order-product-name">{{ order.productName }}</div>
|
||||
<div class="order-status-badge" :class="order.deliveryMode === 'manual' && !order.deliveredCodes?.length ? 'badge-pending' : 'badge-done'">
|
||||
{{ order.deliveryMode === 'manual' && !order.deliveredCodes?.length ? '等待发货' : '已完成' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Meta row -->
|
||||
<div class="order-meta-row">
|
||||
<span class="meta-item">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||
{{ formatTime(order.createdAt) }}
|
||||
</span>
|
||||
<span class="meta-item">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12V22H4V12"/><path d="M22 7H2v5h20V7z"/><path d="M12 22V7"/><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/></svg>
|
||||
× {{ order.quantity }} 件
|
||||
</span>
|
||||
<span class="order-id-tag">{{ order.id.slice(0, 8) }}…</span>
|
||||
</div>
|
||||
|
||||
<!-- Delivered codes -->
|
||||
<div class="order-codes" v-if="order.deliveredCodes?.length">
|
||||
<p class="tag">购买内容</p>
|
||||
<textarea
|
||||
class="codes-box"
|
||||
readonly
|
||||
:value="order.deliveredCodes.join('\n')"
|
||||
:rows="Math.min(order.deliveredCodes.length, 5)"
|
||||
></textarea>
|
||||
<div class="codes-label">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
||||
发货内容
|
||||
</div>
|
||||
<div class="codes-list">
|
||||
<div v-for="(code, i) in order.deliveredCodes" :key="i" class="code-item">
|
||||
<span class="code-index">{{ i + 1 }}</span>
|
||||
<span class="code-text">{{ code }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Manual delivery pending -->
|
||||
<div class="pending-notice" v-else-if="order.deliveryMode === 'manual'">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||
订单已提交，等待人工发货，请耐心等候
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -105,6 +132,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ── Auth prompt ── */
|
||||
.auth-prompt {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -114,86 +142,223 @@ onMounted(() => {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
.orders-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
gap: 14px;
|
||||
margin-bottom: 22px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.header-info h2 {
|
||||
margin: 0 0 4px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.order-count {
|
||||
margin-left: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
background: rgba(180, 154, 203, 0.12);
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.orders-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.small-act {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 13px;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
/* ── Empty & loading ── */
|
||||
.status {
|
||||
padding: 24px 0;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 48px 0;
|
||||
color: var(--muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* ── Order list ── */
|
||||
.orders-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
/* ── Order card ── */
|
||||
.order-card {
|
||||
padding: 18px;
|
||||
border-radius: var(--radius);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
padding: 0;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border: 1px solid var(--line);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.order-head {
|
||||
.order-card:hover {
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.order-card-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 14px 16px 10px;
|
||||
}
|
||||
|
||||
.order-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 4px;
|
||||
.order-product-name {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.order-status-badge {
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.badge-done {
|
||||
background: rgba(100, 185, 140, 0.15);
|
||||
color: #3a9a68;
|
||||
}
|
||||
|
||||
.badge-pending {
|
||||
background: rgba(145, 168, 208, 0.15);
|
||||
color: #5a7db0;
|
||||
}
|
||||
|
||||
/* Meta row */
|
||||
.order-meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 0 16px 12px;
|
||||
flex-wrap: wrap;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.order-id-tag {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
font-family: monospace;
|
||||
background: rgba(0,0,0,0.04);
|
||||
padding: 2px 7px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Codes */
|
||||
.order-codes {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.codes-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.codes-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.codes-box {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--line);
|
||||
.code-item {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
resize: none;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 24px 0;
|
||||
.code-index {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
font-weight: 700;
|
||||
min-width: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.code-text {
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
word-break: break-all;
|
||||
font-family: monospace;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Pending notice */
|
||||
.pending-notice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin: 12px 16px;
|
||||
padding: 10px 14px;
|
||||
background: rgba(145, 168, 208, 0.1);
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid var(--accent-2);
|
||||
font-size: 13px;
|
||||
color: #5a7db0;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.orders-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.order-head {
|
||||
flex-direction: column;
|
||||
.header-info h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.order-meta {
|
||||
align-items: flex-start;
|
||||
flex-direction: row;
|
||||
.order-product-name {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.order-meta-row {
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
108
mengyastore-frontend/src/modules/wishlist/WishlistPage.vue
Normal file
108
mengyastore-frontend/src/modules/wishlist/WishlistPage.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<section class="page-card">
|
||||
<div class="hero">
|
||||
<h2>我的收藏夹</h2>
|
||||
<p class="tag">共 {{ wishlistItems.length }} 件商品</p>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="status">加载中...</div>
|
||||
|
||||
<div v-else-if="wishlistItems.length === 0" class="empty">
|
||||
<div class="empty-icon">☆</div>
|
||||
<p class="empty-title">收藏夹是空的</p>
|
||||
<p class="tag">在商品卡片上点击 ☆ 即可加入收藏</p>
|
||||
<button class="ghost" @click="$router.push('/')">去逛逛</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid">
|
||||
<ProductCard
|
||||
v-for="item in wishlistItems"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
:class="{ 'card-dimmed': !item.active || item.quantity === 0 }"
|
||||
@click="handleClick"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { fetchProducts } from '../shared/api'
|
||||
import { getWishlistProducts, loadWishlist } from '../shared/useWishlist'
|
||||
import ProductCard from '../store/components/ProductCard.vue'
|
||||
|
||||
const router = useRouter()
|
||||
const allProducts = ref([])
|
||||
const loading = ref(true)
|
||||
|
||||
const wishlistItems = computed(() => {
|
||||
const items = getWishlistProducts(allProducts.value)
|
||||
return items.sort((a, b) => {
|
||||
const aOk = a.active && a.quantity > 0 ? 0 : 1
|
||||
const bOk = b.active && b.quantity > 0 ? 0 : 1
|
||||
return aOk - bOk
|
||||
})
|
||||
})
|
||||
|
||||
const handleClick = (item) => {
|
||||
if (!item) return
|
||||
if (!item.active || item.quantity === 0) return
|
||||
router.push(`/product/${item.id}`)
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const [prods] = await Promise.all([fetchProducts(), loadWishlist()])
|
||||
allProducts.value = prods
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hero {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 24px 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 14px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 60px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 52px;
|
||||
color: var(--muted);
|
||||
opacity: 0.4;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.card-dimmed {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user