nepiedg
d62c51f140
- Create reusable ImageUpload.vue component (drag-drop, preview, progress) - Replace URL input fields with ImageUpload in category and template dialogs - Upload via backend proxy to avoid OSS CORS issues - Auto-fill thumbnail_url and image dimensions on template image upload Made-with: Cursor
584 lines
17 KiB
Vue
584 lines
17 KiB
Vue
<template>
|
|
<div class="marketing-page">
|
|
<el-alert
|
|
v-if="errorMessage"
|
|
:title="errorMessage"
|
|
type="error"
|
|
show-icon
|
|
closable
|
|
@close="errorMessage = ''"
|
|
/>
|
|
|
|
<el-row :gutter="16" class="cards" v-loading="statsLoading">
|
|
<el-col :xs="12" :sm="12" :md="6">
|
|
<el-card shadow="hover">
|
|
<div class="card-value">{{ stats.categoryCount }}</div>
|
|
<div class="card-label">分类总数</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :xs="12" :sm="12" :md="6">
|
|
<el-card shadow="hover">
|
|
<div class="card-value">{{ stats.templateCount }}</div>
|
|
<div class="card-label">模板总数</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :xs="12" :sm="12" :md="6">
|
|
<el-card shadow="hover">
|
|
<div class="card-value">{{ stats.totalDownloads }}</div>
|
|
<div class="card-label">总下载次数</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :xs="12" :sm="12" :md="6">
|
|
<el-card shadow="hover">
|
|
<div class="card-value">{{ stats.todayDownloads }}</div>
|
|
<div class="card-label">今日下载</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-card class="section-card">
|
|
<template #header>
|
|
<div class="header-row">
|
|
<span>分类管理</span>
|
|
<el-button type="primary" @click="openCategoryDialog()">新增分类</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
<el-table v-loading="categoriesLoading" :data="categories" stripe>
|
|
<el-table-column prop="id" label="ID" width="80" />
|
|
<el-table-column label="图标" width="80">
|
|
<template #default="{ row }">
|
|
<el-image v-if="row.icon" :src="row.icon" fit="contain" style="width: 32px; height: 32px" />
|
|
<span v-else>-</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="名称" min-width="160" />
|
|
<el-table-column prop="sort_order" label="排序" width="90" />
|
|
<el-table-column label="状态" width="100">
|
|
<template #default="{ row }">
|
|
<el-tag :type="row.status === 1 ? 'success' : 'info'" size="small">
|
|
{{ row.status === 1 ? '启用' : '禁用' }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="180" fixed="right">
|
|
<template #default="{ row }">
|
|
<el-button link type="primary" @click="openCategoryDialog(row)">编辑</el-button>
|
|
<el-popconfirm title="确认删除该分类？" @confirm="handleDeleteCategory(row.id)">
|
|
<template #reference>
|
|
<el-button link type="danger">删除</el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
|
|
<el-card class="section-card">
|
|
<template #header>
|
|
<div class="header-row">
|
|
<div class="left-tools">
|
|
<span>模板管理</span>
|
|
<el-select
|
|
v-model="templateQuery.category_id"
|
|
clearable
|
|
placeholder="按分类筛选"
|
|
style="width: 180px"
|
|
@change="handleTemplateFilterChange"
|
|
>
|
|
<el-option v-for="item in categories" :key="item.id" :label="item.name" :value="item.id" />
|
|
</el-select>
|
|
</div>
|
|
<el-button type="primary" @click="openTemplateDialog()">新增模板</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
<el-table v-loading="templatesLoading" :data="templateList" stripe>
|
|
<el-table-column prop="id" label="ID" width="80" />
|
|
<el-table-column label="预览" width="90">
|
|
<template #default="{ row }">
|
|
<el-image
|
|
v-if="row.thumbnail_url || row.image_url"
|
|
:src="row.thumbnail_url || row.image_url"
|
|
fit="cover"
|
|
style="width: 56px; height: 56px; border-radius: 4px"
|
|
:preview-src-list="[row.image_url]"
|
|
/>
|
|
<span v-else>-</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="title" label="模板名称" min-width="180" />
|
|
<el-table-column label="分类" min-width="130">
|
|
<template #default="{ row }">
|
|
{{ row.category?.name || '-' }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="尺寸" width="120">
|
|
<template #default="{ row }">
|
|
{{ row.width || 0 }} x {{ row.height || 0 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="sort_order" label="排序" width="90" />
|
|
<el-table-column prop="download_count" label="下载次数" width="100" />
|
|
<el-table-column label="状态" width="90">
|
|
<template #default="{ row }">
|
|
<el-tag :type="row.status === 1 ? 'success' : 'info'" size="small">
|
|
{{ row.status === 1 ? '启用' : '禁用' }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="180" fixed="right">
|
|
<template #default="{ row }">
|
|
<el-button link type="primary" @click="openTemplateDialog(row)">编辑</el-button>
|
|
<el-popconfirm title="确认删除该模板？" @confirm="handleDeleteTemplate(row.id)">
|
|
<template #reference>
|
|
<el-button link type="danger">删除</el-button>
|
|
</template>
|
|
</el-popconfirm>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<div class="pagination">
|
|
<el-pagination
|
|
v-model:current-page="templateQuery.page"
|
|
v-model:page-size="templateQuery.page_size"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:page-sizes="[10, 20, 50]"
|
|
:total="templateTotal"
|
|
@current-change="loadTemplates"
|
|
@size-change="handleTemplatePageSizeChange"
|
|
/>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-dialog
|
|
v-model="categoryDialogVisible"
|
|
:title="categoryForm.id ? '编辑分类' : '新增分类'"
|
|
width="520px"
|
|
>
|
|
<el-form label-width="90px">
|
|
<el-form-item label="名称" required>
|
|
<el-input v-model="categoryForm.name" maxlength="50" show-word-limit />
|
|
</el-form-item>
|
|
<el-form-item label="图标">
|
|
<ImageUpload
|
|
v-model="categoryForm.icon"
|
|
placeholder="上传图标"
|
|
preview-width="64px"
|
|
preview-height="64px"
|
|
:max-size="2"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="排序">
|
|
<el-input-number v-model="categoryForm.sort_order" :min="0" :max="9999" />
|
|
</el-form-item>
|
|
<el-form-item label="启用">
|
|
<el-switch v-model="categoryForm.statusBool" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="categoryDialogVisible = false">取消</el-button>
|
|
<el-button type="primary" :loading="categorySaving" @click="saveCategory">保存</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
|
|
<el-dialog
|
|
v-model="templateDialogVisible"
|
|
:title="templateForm.id ? '编辑模板' : '新增模板'"
|
|
width="620px"
|
|
>
|
|
<el-form label-width="100px">
|
|
<el-form-item label="模板名称" required>
|
|
<el-input v-model="templateForm.title" maxlength="100" show-word-limit />
|
|
</el-form-item>
|
|
<el-form-item label="所属分类" required>
|
|
<el-select v-model="templateForm.category_id" placeholder="请选择分类" style="width: 100%">
|
|
<el-option v-for="item in categories" :key="item.id" :label="item.name" :value="item.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="模板图片" required>
|
|
<ImageUpload
|
|
v-model="templateForm.image_url"
|
|
placeholder="上传模板原图"
|
|
preview-width="160px"
|
|
preview-height="200px"
|
|
:max-size="10"
|
|
:on-uploaded="onTemplateImageUploaded"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="缩略图">
|
|
<ImageUpload
|
|
v-model="templateForm.thumbnail_url"
|
|
placeholder="上传缩略图（可选）"
|
|
preview-width="100px"
|
|
preview-height="100px"
|
|
:max-size="5"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="宽度(px)">
|
|
<el-input-number v-model="templateForm.width" :min="0" :max="10000" />
|
|
</el-form-item>
|
|
<el-form-item label="高度(px)">
|
|
<el-input-number v-model="templateForm.height" :min="0" :max="10000" />
|
|
</el-form-item>
|
|
<el-form-item label="排序">
|
|
<el-input-number v-model="templateForm.sort_order" :min="0" :max="9999" />
|
|
</el-form-item>
|
|
<el-form-item label="启用">
|
|
<el-switch v-model="templateForm.statusBool" />
|
|
</el-form-item>
|
|
</el-form>
|
|
<template #footer>
|
|
<el-button @click="templateDialogVisible = false">取消</el-button>
|
|
<el-button type="primary" :loading="templateSaving" @click="saveTemplate">保存</el-button>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, reactive, ref } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import ImageUpload from '../../components/ImageUpload.vue'
|
|
import {
|
|
createMarketingCategory,
|
|
createMarketingTemplate,
|
|
deleteMarketingCategory,
|
|
deleteMarketingTemplate,
|
|
getMarketingCategories,
|
|
getMarketingStats,
|
|
getMarketingTemplates,
|
|
updateMarketingCategory,
|
|
updateMarketingTemplate
|
|
} from '../../api/marketing'
|
|
|
|
const errorMessage = ref('')
|
|
|
|
const statsLoading = ref(false)
|
|
const categoriesLoading = ref(false)
|
|
const templatesLoading = ref(false)
|
|
|
|
const stats = reactive({
|
|
categoryCount: 0,
|
|
templateCount: 0,
|
|
totalDownloads: 0,
|
|
todayDownloads: 0
|
|
})
|
|
|
|
const categories = ref([])
|
|
|
|
const templateQuery = reactive({
|
|
category_id: undefined,
|
|
page: 1,
|
|
page_size: 20
|
|
})
|
|
const templateList = ref([])
|
|
const templateTotal = ref(0)
|
|
|
|
const categoryDialogVisible = ref(false)
|
|
const categorySaving = ref(false)
|
|
const categoryForm = reactive({
|
|
id: null,
|
|
name: '',
|
|
icon: '',
|
|
sort_order: 0,
|
|
statusBool: true
|
|
})
|
|
|
|
const templateDialogVisible = ref(false)
|
|
const templateSaving = ref(false)
|
|
const templateForm = reactive({
|
|
id: null,
|
|
title: '',
|
|
category_id: null,
|
|
image_url: '',
|
|
thumbnail_url: '',
|
|
width: 0,
|
|
height: 0,
|
|
sort_order: 0,
|
|
statusBool: true
|
|
})
|
|
|
|
const parseDownloads = (data, key) => {
|
|
const candidates = [
|
|
data?.[key],
|
|
data?.[key.charAt(0).toUpperCase() + key.slice(1)],
|
|
data?.[key.replace(/[A-Z]/g, (match) => `_${match.toLowerCase()}`)]
|
|
]
|
|
const value = candidates.find((item) => typeof item === 'number')
|
|
return value || 0
|
|
}
|
|
|
|
const loadCategories = async () => {
|
|
categoriesLoading.value = true
|
|
try {
|
|
const res = await getMarketingCategories()
|
|
categories.value = res.data || []
|
|
stats.categoryCount = categories.value.length
|
|
} catch (error) {
|
|
errorMessage.value = '加载分类失败，请稍后重试'
|
|
} finally {
|
|
categoriesLoading.value = false
|
|
}
|
|
}
|
|
|
|
const loadTemplates = async () => {
|
|
templatesLoading.value = true
|
|
try {
|
|
const params = {
|
|
page: templateQuery.page,
|
|
page_size: templateQuery.page_size
|
|
}
|
|
if (templateQuery.category_id) {
|
|
params.category_id = templateQuery.category_id
|
|
}
|
|
|
|
const res = await getMarketingTemplates(params)
|
|
const payload = res.data || {}
|
|
templateList.value = payload.templates || []
|
|
templateTotal.value = payload.total || 0
|
|
} catch (error) {
|
|
errorMessage.value = '加载模板失败，请稍后重试'
|
|
} finally {
|
|
templatesLoading.value = false
|
|
}
|
|
}
|
|
|
|
const loadTemplateCount = async () => {
|
|
try {
|
|
const res = await getMarketingTemplates({ page: 1, page_size: 1 })
|
|
const payload = res.data || {}
|
|
stats.templateCount = payload.total || 0
|
|
} catch (error) {
|
|
stats.templateCount = 0
|
|
}
|
|
}
|
|
|
|
const loadStats = async () => {
|
|
statsLoading.value = true
|
|
try {
|
|
const res = await getMarketingStats()
|
|
const payload = res.data || {}
|
|
stats.totalDownloads = parseDownloads(payload, 'totalDownloads')
|
|
stats.todayDownloads = parseDownloads(payload, 'todayDownloads')
|
|
} catch (error) {
|
|
errorMessage.value = '加载营销统计失败，请稍后重试'
|
|
} finally {
|
|
statsLoading.value = false
|
|
}
|
|
}
|
|
|
|
const loadAll = async () => {
|
|
errorMessage.value = ''
|
|
await Promise.all([loadCategories(), loadTemplates(), loadTemplateCount(), loadStats()])
|
|
}
|
|
|
|
const resetCategoryForm = () => {
|
|
categoryForm.id = null
|
|
categoryForm.name = ''
|
|
categoryForm.icon = ''
|
|
categoryForm.sort_order = 0
|
|
categoryForm.statusBool = true
|
|
}
|
|
|
|
const openCategoryDialog = (row) => {
|
|
if (!row) {
|
|
resetCategoryForm()
|
|
} else {
|
|
categoryForm.id = row.id
|
|
categoryForm.name = row.name || ''
|
|
categoryForm.icon = row.icon || ''
|
|
categoryForm.sort_order = row.sort_order || 0
|
|
categoryForm.statusBool = row.status === 1
|
|
}
|
|
categoryDialogVisible.value = true
|
|
}
|
|
|
|
const saveCategory = async () => {
|
|
const name = (categoryForm.name || '').trim()
|
|
if (!name) {
|
|
ElMessage.warning('请先填写分类名称')
|
|
return
|
|
}
|
|
|
|
categorySaving.value = true
|
|
try {
|
|
const payload = {
|
|
name,
|
|
icon: (categoryForm.icon || '').trim(),
|
|
sort_order: Number(categoryForm.sort_order || 0),
|
|
status: categoryForm.statusBool ? 1 : 0
|
|
}
|
|
if (categoryForm.id) {
|
|
await updateMarketingCategory(categoryForm.id, payload)
|
|
ElMessage.success('分类更新成功')
|
|
} else {
|
|
await createMarketingCategory(payload)
|
|
ElMessage.success('分类创建成功')
|
|
}
|
|
categoryDialogVisible.value = false
|
|
await Promise.all([loadCategories(), loadTemplateCount()])
|
|
} finally {
|
|
categorySaving.value = false
|
|
}
|
|
}
|
|
|
|
const handleDeleteCategory = async (id) => {
|
|
await deleteMarketingCategory(id)
|
|
ElMessage.success('分类删除成功')
|
|
await Promise.all([loadCategories(), loadTemplates(), loadTemplateCount()])
|
|
}
|
|
|
|
const resetTemplateForm = () => {
|
|
templateForm.id = null
|
|
templateForm.title = ''
|
|
templateForm.category_id = null
|
|
templateForm.image_url = ''
|
|
templateForm.thumbnail_url = ''
|
|
templateForm.width = 0
|
|
templateForm.height = 0
|
|
templateForm.sort_order = 0
|
|
templateForm.statusBool = true
|
|
}
|
|
|
|
const openTemplateDialog = (row) => {
|
|
if (!row) {
|
|
resetTemplateForm()
|
|
} else {
|
|
templateForm.id = row.id
|
|
templateForm.title = row.title || ''
|
|
templateForm.category_id = row.category_id || null
|
|
templateForm.image_url = row.image_url || ''
|
|
templateForm.thumbnail_url = row.thumbnail_url || ''
|
|
templateForm.width = row.width || 0
|
|
templateForm.height = row.height || 0
|
|
templateForm.sort_order = row.sort_order || 0
|
|
templateForm.statusBool = row.status === 1
|
|
}
|
|
templateDialogVisible.value = true
|
|
}
|
|
|
|
const onTemplateImageUploaded = (result) => {
|
|
if (result.thumbnailUrl && !templateForm.thumbnail_url) {
|
|
templateForm.thumbnail_url = result.thumbnailUrl
|
|
}
|
|
const img = new Image()
|
|
img.onload = () => {
|
|
templateForm.width = img.naturalWidth
|
|
templateForm.height = img.naturalHeight
|
|
}
|
|
img.src = result.url
|
|
}
|
|
|
|
const saveTemplate = async () => {
|
|
if (!(templateForm.title || '').trim()) {
|
|
ElMessage.warning('请先填写模板名称')
|
|
return
|
|
}
|
|
if (!templateForm.category_id) {
|
|
ElMessage.warning('请选择所属分类')
|
|
return
|
|
}
|
|
if (!(templateForm.image_url || '').trim()) {
|
|
ElMessage.warning('请先上传模板图片')
|
|
return
|
|
}
|
|
|
|
templateSaving.value = true
|
|
try {
|
|
const payload = {
|
|
title: (templateForm.title || '').trim(),
|
|
category_id: Number(templateForm.category_id),
|
|
image_url: (templateForm.image_url || '').trim(),
|
|
thumbnail_url: (templateForm.thumbnail_url || '').trim(),
|
|
width: Number(templateForm.width || 0),
|
|
height: Number(templateForm.height || 0),
|
|
sort_order: Number(templateForm.sort_order || 0),
|
|
status: templateForm.statusBool ? 1 : 0
|
|
}
|
|
|
|
if (templateForm.id) {
|
|
await updateMarketingTemplate(templateForm.id, payload)
|
|
ElMessage.success('模板更新成功')
|
|
} else {
|
|
await createMarketingTemplate(payload)
|
|
ElMessage.success('模板创建成功')
|
|
}
|
|
|
|
templateDialogVisible.value = false
|
|
await Promise.all([loadTemplates(), loadTemplateCount()])
|
|
} finally {
|
|
templateSaving.value = false
|
|
}
|
|
}
|
|
|
|
const handleDeleteTemplate = async (id) => {
|
|
await deleteMarketingTemplate(id)
|
|
ElMessage.success('模板删除成功')
|
|
await Promise.all([loadTemplates(), loadTemplateCount()])
|
|
}
|
|
|
|
const handleTemplateFilterChange = () => {
|
|
templateQuery.page = 1
|
|
loadTemplates()
|
|
}
|
|
|
|
const handleTemplatePageSizeChange = () => {
|
|
templateQuery.page = 1
|
|
loadTemplates()
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadAll()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.marketing-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.cards {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.card-value {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: #303133;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.card-label {
|
|
margin-top: 8px;
|
|
color: #909399;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.section-card {
|
|
width: 100%;
|
|
}
|
|
|
|
.header-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.left-tools {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.pagination {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 16px;
|
|
}
|
|
</style>
|