update: 2026-03-28 21:00
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -1,155 +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>
|
||||
<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>
|
||||
|
||||
@@ -1,404 +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)
|
||||
})
|
||||
|
||||
// 订单列表变化时重置到第一页
|
||||
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>
|
||||
<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)
|
||||
})
|
||||
|
||||
// 订单列表变化时重置到第一页
|
||||
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>
|
||||
|
||||
@@ -1,431 +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>
|
||||
<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>
|
||||
|
||||
@@ -1,317 +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>
|
||||
<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>
|
||||
|
||||
@@ -1,239 +1,239 @@
|
||||
<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-enable-row">
|
||||
<label class="smtp-toggle">
|
||||
<input type="checkbox" v-model="form.enabled" />
|
||||
<span>启用邮件通知</span>
|
||||
</label>
|
||||
<span class="smtp-status-tag" :class="form.enabled ? 'tag-on' : 'tag-off'">
|
||||
{{ form.enabled ? '已启用' : '已关闭' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="smtp-fields" :class="{ 'smtp-fields-disabled': !form.enabled }">
|
||||
<label class="smtp-field">
|
||||
<span>发件邮箱</span>
|
||||
<input v-model="form.email" type="email" placeholder="noreply@yourdomain.com" :disabled="!form.enabled" />
|
||||
</label>
|
||||
<label class="smtp-field">
|
||||
<span>SMTP 密码 / 授权码</span>
|
||||
<input v-model="form.password" type="password" placeholder="QQ/163 填授权码；其他填密码" autocomplete="new-password" :disabled="!form.enabled" />
|
||||
</label>
|
||||
<label class="smtp-field">
|
||||
<span>发件人名称</span>
|
||||
<input v-model="form.fromName" type="text" placeholder="萌芽小店" :disabled="!form.enabled" />
|
||||
</label>
|
||||
<label class="smtp-field">
|
||||
<span>SMTP 主机</span>
|
||||
<input v-model="form.host" type="text" placeholder="smtp.qq.com" :disabled="!form.enabled" />
|
||||
</label>
|
||||
<label class="smtp-field smtp-field-port">
|
||||
<span>端口</span>
|
||||
<input v-model="form.port" type="text" placeholder="465" :disabled="!form.enabled" />
|
||||
</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({
|
||||
enabled: true,
|
||||
email: '',
|
||||
password: '',
|
||||
fromName: '',
|
||||
host: 'smtp.qq.com',
|
||||
port: '465'
|
||||
})
|
||||
|
||||
watch(() => props.config, (cfg) => {
|
||||
if (!cfg) return
|
||||
form.enabled = cfg.enabled !== false
|
||||
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-enable-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.smtp-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.smtp-toggle input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: var(--accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.smtp-status-tag {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.tag-on {
|
||||
background: rgba(74, 222, 128, 0.15);
|
||||
color: #2d8a4e;
|
||||
}
|
||||
|
||||
.tag-off {
|
||||
background: rgba(0,0,0,0.06);
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.smtp-fields {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.smtp-fields-disabled {
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.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>
|
||||
<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-enable-row">
|
||||
<label class="smtp-toggle">
|
||||
<input type="checkbox" v-model="form.enabled" />
|
||||
<span>启用邮件通知</span>
|
||||
</label>
|
||||
<span class="smtp-status-tag" :class="form.enabled ? 'tag-on' : 'tag-off'">
|
||||
{{ form.enabled ? '已启用' : '已关闭' }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="smtp-fields" :class="{ 'smtp-fields-disabled': !form.enabled }">
|
||||
<label class="smtp-field">
|
||||
<span>发件邮箱</span>
|
||||
<input v-model="form.email" type="email" placeholder="noreply@yourdomain.com" :disabled="!form.enabled" />
|
||||
</label>
|
||||
<label class="smtp-field">
|
||||
<span>SMTP 密码 / 授权码</span>
|
||||
<input v-model="form.password" type="password" placeholder="QQ/163 填授权码；其他填密码" autocomplete="new-password" :disabled="!form.enabled" />
|
||||
</label>
|
||||
<label class="smtp-field">
|
||||
<span>发件人名称</span>
|
||||
<input v-model="form.fromName" type="text" placeholder="萌芽小店" :disabled="!form.enabled" />
|
||||
</label>
|
||||
<label class="smtp-field">
|
||||
<span>SMTP 主机</span>
|
||||
<input v-model="form.host" type="text" placeholder="smtp.qq.com" :disabled="!form.enabled" />
|
||||
</label>
|
||||
<label class="smtp-field smtp-field-port">
|
||||
<span>端口</span>
|
||||
<input v-model="form.port" type="text" placeholder="465" :disabled="!form.enabled" />
|
||||
</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({
|
||||
enabled: true,
|
||||
email: '',
|
||||
password: '',
|
||||
fromName: '',
|
||||
host: 'smtp.qq.com',
|
||||
port: '465'
|
||||
})
|
||||
|
||||
watch(() => props.config, (cfg) => {
|
||||
if (!cfg) return
|
||||
form.enabled = cfg.enabled !== false
|
||||
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-enable-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.smtp-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.smtp-toggle input[type="checkbox"] {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: var(--accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.smtp-status-tag {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.tag-on {
|
||||
background: rgba(74, 222, 128, 0.15);
|
||||
color: #2d8a4e;
|
||||
}
|
||||
|
||||
.tag-off {
|
||||
background: rgba(0,0,0,0.06);
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.smtp-fields {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.smtp-fields-disabled {
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
@@ -1,102 +1,102 @@
|
||||
<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="粘贴管理员令牌后自动加载…" />
|
||||
</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'])
|
||||
</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>
|
||||
<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="粘贴管理员令牌后自动加载…" />
|
||||
</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'])
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user