chore: sync
This commit is contained in:
388
mengyastore-frontend/src/modules/admin/AdminPage.vue
Normal file
388
mengyastore-frontend/src/modules/admin/AdminPage.vue
Normal file
@@ -0,0 +1,388 @@
|
||||
<template>
|
||||
<section class="page-card">
|
||||
<div class="hero">
|
||||
<div>
|
||||
<h2>管理员后台</h2>
|
||||
<p class="tag">默认地址：/admin?token=shumengya520</p>
|
||||
</div>
|
||||
<div class="admin-actions">
|
||||
<button class="primary" @click="openCreate">添加新商品</button>
|
||||
<button class="ghost" @click="refresh">刷新列表</button>
|
||||
<button class="primary" @click="autoGetToken">自动获取 Token</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="token-row">
|
||||
<div class="form-field token-field">
|
||||
<label>管理 Token</label>
|
||||
<input v-model="token" placeholder="请输入 token" />
|
||||
</div>
|
||||
<p class="tag" v-if="message">{{ message }}</p>
|
||||
</div>
|
||||
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>商品</th>
|
||||
<th>价格</th>
|
||||
<th>库存</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="item in products" :key="item.id">
|
||||
<td>
|
||||
<div>{{ item.name }}</div>
|
||||
<div class="tag">{{ item.id }}</div>
|
||||
</td>
|
||||
<td>¥ {{ item.price.toFixed(2) }}</td>
|
||||
<td>{{ item.quantity }}</td>
|
||||
<td>
|
||||
<span class="badge">{{ item.active ? '上架' : '下架' }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="admin-actions">
|
||||
<button class="ghost" @click="openEdit(item)">编辑</button>
|
||||
<button class="ghost" @click="toggle(item)">
|
||||
{{ item.active ? '下架' : '上架' }}
|
||||
</button>
|
||||
<button class="ghost" @click="remove(item)">删除</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<div v-if="editorOpen" class="modal-mask" @click.self="closeEditor">
|
||||
<section class="modal-card">
|
||||
<div class="modal-header">
|
||||
<div>
|
||||
<h3>{{ form.id ? '编辑商品' : '添加新商品' }}</h3>
|
||||
<p class="tag">封面图和最多 10 张商品截图共用这一套编辑表单。</p>
|
||||
</div>
|
||||
<button class="ghost" @click="closeEditor">关闭</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.quantity" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>封面链接（http）</label>
|
||||
<input v-model="form.coverUrl" placeholder="http://..." />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>商品截图链接（最多 10 个）</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>
|
||||
<select v-model="form.active">
|
||||
<option :value="true">上架</option>
|
||||
<option :value="false">下架</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button class="primary" @click="submit">{{ form.id ? '更新商品' : '新增商品' }}</button>
|
||||
<button class="ghost" @click="reset">重置表单</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import {
|
||||
fetchAdminProducts,
|
||||
fetchAdminToken,
|
||||
createProduct,
|
||||
updateProduct,
|
||||
toggleProduct,
|
||||
deleteProduct
|
||||
} from '../shared/api'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const token = ref(route.query.token || '')
|
||||
const products = ref([])
|
||||
const message = ref('')
|
||||
const editorOpen = ref(false)
|
||||
const MAX_SCREENSHOT_URLS = 10
|
||||
const screenshotInputSlots = Array.from({ length: MAX_SCREENSHOT_URLS })
|
||||
|
||||
const createScreenshotSlots = (values = []) =>
|
||||
Array.from({ length: MAX_SCREENSHOT_URLS }, (_, index) => values[index] || '')
|
||||
|
||||
const normalizeScreenshotUrls = (values = []) =>
|
||||
values.map((item) => item.trim()).filter(Boolean).slice(0, MAX_SCREENSHOT_URLS)
|
||||
|
||||
const emptyForm = () => ({
|
||||
id: '',
|
||||
name: '',
|
||||
price: 0,
|
||||
quantity: 0,
|
||||
coverUrl: '',
|
||||
screenshotUrls: createScreenshotSlots(),
|
||||
description: '',
|
||||
active: true
|
||||
})
|
||||
|
||||
const form = reactive(emptyForm())
|
||||
|
||||
const syncQuery = () => {
|
||||
if (token.value) {
|
||||
router.replace({ query: { token: token.value } })
|
||||
}
|
||||
}
|
||||
|
||||
const refresh = async () => {
|
||||
if (!token.value) {
|
||||
message.value = '请先输入 token'
|
||||
return
|
||||
}
|
||||
try {
|
||||
products.value = await fetchAdminProducts(token.value)
|
||||
message.value = '数据已更新'
|
||||
} catch (error) {
|
||||
message.value = '获取失败，请检查 token'
|
||||
}
|
||||
}
|
||||
|
||||
const autoGetToken = async () => {
|
||||
const fetched = await fetchAdminToken()
|
||||
token.value = fetched
|
||||
syncQuery()
|
||||
await refresh()
|
||||
}
|
||||
|
||||
const submit = async () => {
|
||||
if (!token.value) {
|
||||
message.value = '请先输入 token'
|
||||
return
|
||||
}
|
||||
try {
|
||||
if (form.id) {
|
||||
await updateProduct(token.value, form.id, {
|
||||
name: form.name,
|
||||
price: form.price,
|
||||
quantity: form.quantity,
|
||||
coverUrl: form.coverUrl,
|
||||
screenshotUrls: normalizeScreenshotUrls(form.screenshotUrls),
|
||||
description: form.description,
|
||||
active: form.active
|
||||
})
|
||||
message.value = '已更新商品'
|
||||
} else {
|
||||
await createProduct(token.value, {
|
||||
name: form.name,
|
||||
price: form.price,
|
||||
quantity: form.quantity,
|
||||
coverUrl: form.coverUrl,
|
||||
screenshotUrls: normalizeScreenshotUrls(form.screenshotUrls),
|
||||
description: form.description,
|
||||
active: form.active
|
||||
})
|
||||
message.value = '已新增商品'
|
||||
}
|
||||
reset()
|
||||
closeEditor()
|
||||
await refresh()
|
||||
} catch (error) {
|
||||
message.value = '操作失败，请检查输入'
|
||||
}
|
||||
}
|
||||
|
||||
const fillForm = (item) => {
|
||||
Object.assign(form, {
|
||||
id: item?.id || '',
|
||||
name: item?.name || '',
|
||||
price: item?.price || 0,
|
||||
quantity: item?.quantity || 0,
|
||||
coverUrl: item?.coverUrl || '',
|
||||
screenshotUrls: createScreenshotSlots(item?.screenshotUrls || []),
|
||||
description: item?.description || '',
|
||||
active: item?.active ?? true
|
||||
})
|
||||
}
|
||||
|
||||
const openCreate = () => {
|
||||
reset()
|
||||
editorOpen.value = true
|
||||
}
|
||||
|
||||
const openEdit = (item) => {
|
||||
fillForm(item)
|
||||
editorOpen.value = true
|
||||
}
|
||||
|
||||
const closeEditor = () => {
|
||||
editorOpen.value = false
|
||||
}
|
||||
|
||||
const toggle = async (item) => {
|
||||
if (!token.value) {
|
||||
message.value = '请先输入 token'
|
||||
return
|
||||
}
|
||||
await toggleProduct(token.value, item.id, !item.active)
|
||||
await refresh()
|
||||
}
|
||||
|
||||
const remove = async (item) => {
|
||||
if (!token.value) {
|
||||
message.value = '请先输入 token'
|
||||
return
|
||||
}
|
||||
await deleteProduct(token.value, item.id)
|
||||
await refresh()
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
fillForm()
|
||||
}
|
||||
|
||||
watch(token, () => {
|
||||
syncQuery()
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
if (token.value) {
|
||||
await refresh()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.token-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.token-field {
|
||||
width: min(420px, 100%);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
border-radius: 14px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.screenshot-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.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: 24px;
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: 0 24px 60px rgba(33, 33, 40, 0.18);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero,
|
||||
.token-row,
|
||||
.modal-header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.form-row,
|
||||
.screenshot-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.modal-mask {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.modal-card {
|
||||
padding: 18px;
|
||||
max-height: calc(100vh - 24px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
48
mengyastore-frontend/src/modules/shared/api.js
Normal file
48
mengyastore-frontend/src/modules/shared/api.js
Normal file
@@ -0,0 +1,48 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: 'http://localhost:8080'
|
||||
})
|
||||
|
||||
export const fetchProducts = async () => {
|
||||
const { data } = await api.get('/api/products')
|
||||
return data.data || []
|
||||
}
|
||||
|
||||
export const fetchAdminToken = async () => {
|
||||
const { data } = await api.get('/api/admin/token')
|
||||
return data.token || ''
|
||||
}
|
||||
|
||||
export const fetchAdminProducts = async (token) => {
|
||||
const { data } = await api.get('/api/admin/products', { params: { token } })
|
||||
return data.data || []
|
||||
}
|
||||
|
||||
export const createProduct = async (token, payload) => {
|
||||
const { data } = await api.post('/api/admin/products', payload, {
|
||||
params: { token }
|
||||
})
|
||||
return data.data
|
||||
}
|
||||
|
||||
export const updateProduct = async (token, id, payload) => {
|
||||
const { data } = await api.put(`/api/admin/products/${id}`, payload, {
|
||||
params: { token }
|
||||
})
|
||||
return data.data
|
||||
}
|
||||
|
||||
export const toggleProduct = async (token, id, active) => {
|
||||
const { data } = await api.patch(`/api/admin/products/${id}/status`, { active }, {
|
||||
params: { token }
|
||||
})
|
||||
return data.data
|
||||
}
|
||||
|
||||
export const deleteProduct = async (token, id) => {
|
||||
const { data } = await api.delete(`/api/admin/products/${id}`, {
|
||||
params: { token }
|
||||
})
|
||||
return data
|
||||
}
|
||||
277
mengyastore-frontend/src/modules/store/ProductDetail.vue
Normal file
277
mengyastore-frontend/src/modules/store/ProductDetail.vue
Normal file
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<section class="page-card" v-if="!loading && product">
|
||||
<div class="detail-body">
|
||||
<div class="detail-summary">
|
||||
<h2>{{ product.name }}</h2>
|
||||
<p class="tag">库存：{{ product.quantity }}</p>
|
||||
<p class="product-price">¥ {{ product.price.toFixed(2) }}</p>
|
||||
</div>
|
||||
|
||||
<div class="markdown detail-description" v-html="renderMarkdown(product.description)"></div>
|
||||
|
||||
<div class="detail-gallery" v-if="galleryImages.length">
|
||||
<div class="detail-gallery-main">
|
||||
<button
|
||||
v-if="galleryImages.length > 1"
|
||||
class="gallery-nav prev"
|
||||
type="button"
|
||||
aria-label="上一张"
|
||||
@click="prevImage"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<img
|
||||
class="detail-image"
|
||||
:src="galleryImages[currentImageIndex].url"
|
||||
:alt="galleryImages[currentImageIndex].label"
|
||||
/>
|
||||
<button
|
||||
v-if="galleryImages.length > 1"
|
||||
class="gallery-nav next"
|
||||
type="button"
|
||||
aria-label="下一张"
|
||||
@click="nextImage"
|
||||
>
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="detail-gallery-meta">
|
||||
<span class="badge">{{ galleryImages[currentImageIndex].label }}</span>
|
||||
<span class="tag">{{ currentImageIndex + 1 }} / {{ galleryImages.length }}</span>
|
||||
</div>
|
||||
|
||||
<div class="detail-thumbs" v-if="galleryImages.length > 1">
|
||||
<button
|
||||
v-for="(image, index) in galleryImages"
|
||||
:key="`${image.url}-${index}`"
|
||||
class="detail-thumb"
|
||||
:class="{ active: index === currentImageIndex }"
|
||||
type="button"
|
||||
@click="currentImageIndex = index"
|
||||
>
|
||||
<img :src="image.url" :alt="image.label" />
|
||||
<span>{{ image.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-actions">
|
||||
<button class="buy-button" @click="buy">立即购买</button>
|
||||
<button class="ghost" @click="goBack">返回商店首页</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="page-card" v-else-if="!loading && !product">
|
||||
<h2>未找到该商品</h2>
|
||||
<p class="tag">请返回商店查看其他商品。</p>
|
||||
<div class="detail-actions">
|
||||
<button class="ghost" @click="goBack">返回商店首页</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="page-card" v-else>
|
||||
<div class="status">加载中...</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import { fetchProducts } from '../shared/api'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const md = new MarkdownIt()
|
||||
const loading = ref(true)
|
||||
const product = ref(null)
|
||||
const currentImageIndex = ref(0)
|
||||
|
||||
const renderMarkdown = (content) => md.render(content || '')
|
||||
|
||||
const galleryImages = computed(() => {
|
||||
if (!product.value) {
|
||||
return []
|
||||
}
|
||||
|
||||
const images = []
|
||||
const seen = new Set()
|
||||
const appendImage = (url, label) => {
|
||||
const trimmed = (url || '').trim()
|
||||
if (!trimmed || seen.has(trimmed)) {
|
||||
return
|
||||
}
|
||||
seen.add(trimmed)
|
||||
images.push({ url: trimmed, label })
|
||||
}
|
||||
|
||||
appendImage(product.value.coverUrl, '商品封面')
|
||||
|
||||
const screenshots = Array.isArray(product.value.screenshotUrls)
|
||||
? product.value.screenshotUrls
|
||||
: []
|
||||
|
||||
screenshots.forEach((url, index) => {
|
||||
appendImage(url, `商品截图 ${index + 1}`)
|
||||
})
|
||||
|
||||
return images
|
||||
})
|
||||
|
||||
const goBack = () => {
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
const buy = () => {
|
||||
alert('已加入购买清单（示例）')
|
||||
}
|
||||
|
||||
const prevImage = () => {
|
||||
if (!galleryImages.value.length) {
|
||||
return
|
||||
}
|
||||
currentImageIndex.value =
|
||||
(currentImageIndex.value - 1 + galleryImages.value.length) % galleryImages.value.length
|
||||
}
|
||||
|
||||
const nextImage = () => {
|
||||
if (!galleryImages.value.length) {
|
||||
return
|
||||
}
|
||||
currentImageIndex.value = (currentImageIndex.value + 1) % galleryImages.value.length
|
||||
}
|
||||
|
||||
watch(
|
||||
galleryImages,
|
||||
(images) => {
|
||||
if (!images.length || currentImageIndex.value >= images.length) {
|
||||
currentImageIndex.value = 0
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const list = await fetchProducts()
|
||||
product.value = list.find((item) => item.id === route.params.id) || null
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.detail-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.detail-summary {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detail-description {
|
||||
display: block;
|
||||
color: var(--text);
|
||||
font-size: 15px;
|
||||
line-height: 1.8;
|
||||
-webkit-line-clamp: initial;
|
||||
-webkit-box-orient: initial;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.detail-gallery {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.detail-gallery-main {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 18px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
|
||||
.gallery-nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 999px;
|
||||
padding: 0;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
color: var(--text);
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
transform: translateY(-50%);
|
||||
box-shadow: 0 10px 20px rgba(33, 33, 40, 0.12);
|
||||
}
|
||||
|
||||
.gallery-nav.prev {
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.gallery-nav.next {
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
.detail-gallery-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.detail-thumbs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.detail-thumb {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
background: rgba(255, 255, 255, 0.58);
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.detail-thumb.active {
|
||||
border-color: var(--accent-2);
|
||||
box-shadow: 0 10px 24px rgba(145, 168, 208, 0.16);
|
||||
}
|
||||
|
||||
.detail-thumb img {
|
||||
width: 100%;
|
||||
height: 76px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.detail-thumb span {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 24px 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.detail-thumb {
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
108
mengyastore-frontend/src/modules/store/StorePage.vue
Normal file
108
mengyastore-frontend/src/modules/store/StorePage.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<section class="page-card">
|
||||
<div class="hero">
|
||||
<div>
|
||||
<h2>所有商品</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="status">加载中...</div>
|
||||
<div v-else>
|
||||
<div class="grid">
|
||||
<router-link
|
||||
v-for="item in pagedProducts"
|
||||
:key="item.id"
|
||||
:to="`/product/${item.id}`"
|
||||
class="product-link"
|
||||
>
|
||||
<article class="product-card">
|
||||
<img :src="item.coverUrl" :alt="item.name" />
|
||||
<div class="product-meta">
|
||||
<h3>{{ item.name }}</h3>
|
||||
<span class="product-price">¥ {{ item.price.toFixed(2) }}</span>
|
||||
</div>
|
||||
<div class="tag">库存：{{ item.quantity }}</div>
|
||||
<div class="markdown" v-html="renderMarkdown(item.description)"></div>
|
||||
</article>
|
||||
</router-link>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import { fetchProducts } from '../shared/api'
|
||||
|
||||
const products = ref([])
|
||||
const loading = ref(true)
|
||||
const md = new MarkdownIt()
|
||||
const page = ref(1)
|
||||
const perPage = ref(20)
|
||||
|
||||
const renderMarkdown = (content) => md.render(content || '')
|
||||
|
||||
const updatePerPage = () => {
|
||||
perPage.value = window.innerWidth <= 900 ? 6 : 20
|
||||
page.value = 1
|
||||
}
|
||||
|
||||
const totalPages = computed(() =>
|
||||
Math.max(1, Math.ceil(products.value.length / perPage.value))
|
||||
)
|
||||
|
||||
const pagedProducts = computed(() => {
|
||||
const start = (page.value - 1) * perPage.value
|
||||
return products.value.slice(start, start + perPage.value)
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
updatePerPage()
|
||||
window.addEventListener('resize', updatePerPage)
|
||||
try {
|
||||
products.value = await fetchProducts()
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', updatePerPage)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.product-link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 24px 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user