feat: 邮箱平台管理与商品购买限制 - 新增邮箱平台主控服务管理(页面/API/路由/菜单) - 商品与套餐表单新增max_per_user单用户购买限制 - 邮件主控控制台跳转改为/ui/index.html?token= #22
@@ -0,0 +1,43 @@
|
|||||||
|
import { http2 } from '@/utils/request.js'
|
||||||
|
|
||||||
|
const formHeaders = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
|
||||||
|
|
||||||
|
// ========== 邮件主控服务 ==========
|
||||||
|
|
||||||
|
export const getMailServiceList = (params) => {
|
||||||
|
return http2.get('/api/v1/admin/server/mail_service/list', { params })
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getMailServiceDetail = (params) => {
|
||||||
|
return http2.get('/api/v1/admin/server/mail_service/detail', { params })
|
||||||
|
}
|
||||||
|
|
||||||
|
export const createMailService = (data) => {
|
||||||
|
return http2.post('/api/v1/admin/server/mail_service/create', data, formHeaders)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const updateMailService = (data) => {
|
||||||
|
return http2.post('/api/v1/admin/server/mail_service/update', data, formHeaders)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const deleteMailService = (data) => {
|
||||||
|
return http2.delete('/api/v1/admin/server/mail_service/delete', { data, ...formHeaders })
|
||||||
|
}
|
||||||
|
|
||||||
|
// ========== 邮件额度商品 ==========
|
||||||
|
|
||||||
|
export const getMailGoodsList = (params) => {
|
||||||
|
return http2.get('/api/v1/admin/server/mail_service/goods/list', { params })
|
||||||
|
}
|
||||||
|
|
||||||
|
export const createMailGoods = (data) => {
|
||||||
|
return http2.post('/api/v1/admin/server/mail_service/goods/create', data, formHeaders)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const updateMailGoods = (data) => {
|
||||||
|
return http2.post('/api/v1/admin/server/mail_service/goods/update', data, formHeaders)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const deleteMailGoods = (data) => {
|
||||||
|
return http2.delete('/api/v1/admin/server/mail_service/goods/delete', { data, ...formHeaders })
|
||||||
|
}
|
||||||
@@ -172,6 +172,17 @@ export const menus = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/mail',
|
||||||
|
title: '邮箱平台管理',
|
||||||
|
icon: 'Message',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/mail/service',
|
||||||
|
title: '主控服务管理'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: '虚拟化平台管理',
|
title: '虚拟化平台管理',
|
||||||
icon: 'Platform',
|
icon: 'Platform',
|
||||||
|
|||||||
@@ -645,6 +645,24 @@ const routes = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
// 邮箱平台管理路由
|
||||||
|
{
|
||||||
|
path: 'mail',
|
||||||
|
name: 'Mail',
|
||||||
|
meta: {
|
||||||
|
title: '邮箱平台管理',
|
||||||
|
icon: 'Message'
|
||||||
|
},
|
||||||
|
redirect: '/mail/service',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'service',
|
||||||
|
name: 'MailService',
|
||||||
|
component: () => import('../views/mail/MailService.vue'),
|
||||||
|
meta: { title: '主控服务管理' }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
// 站点审计路由
|
// 站点审计路由
|
||||||
{
|
{
|
||||||
path: 'audit',
|
path: 'audit',
|
||||||
|
|||||||
@@ -0,0 +1,420 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mail-service-page">
|
||||||
|
<!-- 页面头部 -->
|
||||||
|
<div class="page-header">
|
||||||
|
<div class="header-info">
|
||||||
|
<div class="header-icon">
|
||||||
|
<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#409eff" stroke-width="1.8">
|
||||||
|
<rect x="2" y="4" width="20" height="16" rx="2"/>
|
||||||
|
<path d="M22 6L12 13 2 6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="header-title">邮件主控服务管理</h2>
|
||||||
|
<p class="header-desc">管理邮件平台的主控服务实例,每个服务对应一个 mail-server 节点</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-button type="primary" @click="handleAdd">
|
||||||
|
<el-icon><Plus /></el-icon> 新增服务
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 搜索栏 -->
|
||||||
|
<div class="filter-bar">
|
||||||
|
<el-input
|
||||||
|
v-model="queryParams.key"
|
||||||
|
placeholder="搜索名称 / 说明 / 地址"
|
||||||
|
clearable
|
||||||
|
style="width: 300px"
|
||||||
|
@keyup.enter="handleSearch"
|
||||||
|
@clear="handleSearch"
|
||||||
|
>
|
||||||
|
<template #prefix><el-icon><Search /></el-icon></template>
|
||||||
|
</el-input>
|
||||||
|
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
||||||
|
<el-button @click="handleReset">重置</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 数据表格 -->
|
||||||
|
<el-table :data="tableData" v-loading="loading" stripe border style="width: 100%">
|
||||||
|
<el-table-column prop="id" label="ID" width="70" align="center" />
|
||||||
|
<el-table-column prop="name" label="服务名称" min-width="150">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div class="service-name-cell">
|
||||||
|
<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="#67c23a" stroke-width="2">
|
||||||
|
<rect x="2" y="4" width="20" height="16" rx="2"/>
|
||||||
|
<path d="M22 6L12 13 2 6"/>
|
||||||
|
</svg>
|
||||||
|
<span class="name-text">{{ row.name }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="note" label="说明" min-width="150" show-overflow-tooltip>
|
||||||
|
<template #default="{ row }">
|
||||||
|
<span class="note-text">{{ row.note || '-' }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="host" label="服务地址" min-width="220">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-tag type="info" effect="plain" class="host-tag">{{ row.host }}</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="SMTP 配置" min-width="200">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div v-if="row.smtpHost" class="smtp-info">
|
||||||
|
<span class="smtp-host">{{ row.smtpHost }}:{{ row.smtpPort || '-' }}</span>
|
||||||
|
<el-tag v-if="row.smtpTlsEnable" type="success" size="small" effect="plain">TLS</el-tag>
|
||||||
|
<el-tag v-else type="info" size="small" effect="plain">无TLS</el-tag>
|
||||||
|
</div>
|
||||||
|
<span v-else class="note-text">-</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="serviceToken" label="Service Token" min-width="180">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<div class="token-cell">
|
||||||
|
<span v-if="!row._showToken" class="token-mask">{{ maskToken(row.serviceToken) }}</span>
|
||||||
|
<span v-else class="token-full">{{ row.serviceToken }}</span>
|
||||||
|
<el-button link size="small" @click="row._showToken = !row._showToken">
|
||||||
|
{{ row._showToken ? '隐藏' : '显示' }}
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="createdAt" label="创建时间" width="170" align="center">
|
||||||
|
<template #default="{ row }">{{ formatTime(row.createdAt || row.CreatedAt) }}</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="操作" width="200" align="center" fixed="right">
|
||||||
|
<template #default="{ row }">
|
||||||
|
<el-button link type="success" size="small" @click="openConsole(row)">控制台</el-button>
|
||||||
|
<el-button link type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
|
||||||
|
<el-popconfirm title="确认删除该邮件服务?" @confirm="handleDelete(row)">
|
||||||
|
<template #reference>
|
||||||
|
<el-button link type="danger" size="small">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="pagination-wrap">
|
||||||
|
<el-pagination
|
||||||
|
v-model:current-page="queryParams.page"
|
||||||
|
v-model:page-size="queryParams.count"
|
||||||
|
:total="total"
|
||||||
|
:page-sizes="[10, 20, 50]"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
@size-change="fetchList"
|
||||||
|
@current-change="fetchList"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 新增/编辑弹窗 -->
|
||||||
|
<el-dialog
|
||||||
|
v-model="dialogVisible"
|
||||||
|
:title="isEdit ? '编辑邮件主控服务' : '新增邮件主控服务'"
|
||||||
|
width="600px"
|
||||||
|
destroy-on-close
|
||||||
|
>
|
||||||
|
<el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
|
||||||
|
<el-form-item label="服务名称" prop="name">
|
||||||
|
<el-input v-model="form.name" placeholder="请输入服务名称" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="说明" prop="note">
|
||||||
|
<el-input v-model="form.note" type="textarea" :rows="2" placeholder="服务说明(可选)" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="服务地址" prop="host">
|
||||||
|
<el-input v-model="form.host" placeholder="https://mail.example.com" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Service Token" prop="service_token">
|
||||||
|
<el-input v-model="form.service_token" placeholder="mail-server 的 SERVICE_TOKEN" show-password />
|
||||||
|
</el-form-item>
|
||||||
|
<el-divider content-position="left">SMTP 配置(可选)</el-divider>
|
||||||
|
<el-form-item label="SMTP 地址" prop="smtp_host">
|
||||||
|
<el-input v-model="form.smtp_host" placeholder="smtp.example.com" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="SMTP 端口" prop="smtp_port">
|
||||||
|
<el-input-number v-model="form.smtp_port" :min="1" :max="65535" placeholder="465" style="width: 100%" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="启用 TLS" prop="smtp_tls_enable">
|
||||||
|
<el-switch v-model="form.smtp_tls_enable" active-text="启用" inactive-text="关闭" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
|
<el-button type="primary" :loading="submitting" @click="handleSubmit">确定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted } from 'vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { Plus, Search } from '@element-plus/icons-vue'
|
||||||
|
import {
|
||||||
|
getMailServiceList,
|
||||||
|
createMailService,
|
||||||
|
updateMailService,
|
||||||
|
deleteMailService
|
||||||
|
} from '@/api/admin/mailService.js'
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
const submitting = ref(false)
|
||||||
|
const tableData = ref([])
|
||||||
|
const total = ref(0)
|
||||||
|
const dialogVisible = ref(false)
|
||||||
|
const isEdit = ref(false)
|
||||||
|
const formRef = ref(null)
|
||||||
|
|
||||||
|
const queryParams = reactive({
|
||||||
|
page: 1,
|
||||||
|
count: 10,
|
||||||
|
key: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const form = ref({
|
||||||
|
id: null,
|
||||||
|
name: '',
|
||||||
|
note: '',
|
||||||
|
host: '',
|
||||||
|
service_token: '',
|
||||||
|
smtp_host: '',
|
||||||
|
smtp_port: null,
|
||||||
|
smtp_tls_enable: false
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
name: [{ required: true, message: '请输入服务名称', trigger: 'blur' }],
|
||||||
|
host: [{ required: true, message: '请输入服务地址', trigger: 'blur' }],
|
||||||
|
service_token: [{ required: true, message: '请输入 Service Token', trigger: 'blur' }]
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatTime = (t) => {
|
||||||
|
if (!t) return '-'
|
||||||
|
return new Date(t).toLocaleString('zh-CN', { hour12: false })
|
||||||
|
}
|
||||||
|
|
||||||
|
const maskToken = (token) => {
|
||||||
|
if (!token) return '-'
|
||||||
|
if (token.length <= 8) return '****'
|
||||||
|
return token.slice(0, 4) + '****' + token.slice(-4)
|
||||||
|
}
|
||||||
|
|
||||||
|
const fetchList = async () => {
|
||||||
|
loading.value = true
|
||||||
|
try {
|
||||||
|
const res = await getMailServiceList(queryParams)
|
||||||
|
const body = res.data
|
||||||
|
if (body.code === 200) {
|
||||||
|
const d = body.data?.data || body.data || []
|
||||||
|
tableData.value = (Array.isArray(d) ? d : []).map(item => ({ ...item, _showToken: false }))
|
||||||
|
total.value = body.data?.all_count || body.total || 0
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e)
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = () => {
|
||||||
|
queryParams.page = 1
|
||||||
|
fetchList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleReset = () => {
|
||||||
|
queryParams.key = ''
|
||||||
|
queryParams.page = 1
|
||||||
|
fetchList()
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleAdd = () => {
|
||||||
|
isEdit.value = false
|
||||||
|
form.value = { id: null, name: '', note: '', host: '', service_token: '', smtp_host: '', smtp_port: null, smtp_tls_enable: false }
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleEdit = (row) => {
|
||||||
|
isEdit.value = true
|
||||||
|
form.value = {
|
||||||
|
id: row.id,
|
||||||
|
name: row.name,
|
||||||
|
note: row.note || '',
|
||||||
|
host: row.host,
|
||||||
|
service_token: row.serviceToken || row.service_token || '',
|
||||||
|
smtp_host: row.smtpHost || row.smtp_host || '',
|
||||||
|
smtp_port: row.smtpPort || row.smtp_port || null,
|
||||||
|
smtp_tls_enable: !!(row.smtpTlsEnable ?? row.smtp_tls_enable)
|
||||||
|
}
|
||||||
|
dialogVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
await formRef.value?.validate()
|
||||||
|
submitting.value = true
|
||||||
|
try {
|
||||||
|
const params = new URLSearchParams()
|
||||||
|
if (isEdit.value) params.append('id', form.value.id)
|
||||||
|
params.append('name', form.value.name)
|
||||||
|
params.append('note', form.value.note)
|
||||||
|
params.append('host', form.value.host)
|
||||||
|
params.append('service_token', form.value.service_token)
|
||||||
|
if (form.value.smtp_host) params.append('smtp_host', form.value.smtp_host)
|
||||||
|
if (form.value.smtp_port) params.append('smtp_port', form.value.smtp_port)
|
||||||
|
params.append('smtp_tls_enable', form.value.smtp_tls_enable ? 'true' : 'false')
|
||||||
|
|
||||||
|
const fn = isEdit.value ? updateMailService : createMailService
|
||||||
|
const res = await fn(params)
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
ElMessage.success(isEdit.value ? '更新成功' : '创建成功')
|
||||||
|
dialogVisible.value = false
|
||||||
|
fetchList()
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.data.message || '操作失败')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
ElMessage.error('操作失败')
|
||||||
|
} finally {
|
||||||
|
submitting.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDelete = async (row) => {
|
||||||
|
try {
|
||||||
|
const params = new URLSearchParams()
|
||||||
|
params.append('id', row.id)
|
||||||
|
const res = await deleteMailService(params)
|
||||||
|
if (res.data.code === 200) {
|
||||||
|
ElMessage.success('删除成功')
|
||||||
|
fetchList()
|
||||||
|
} else {
|
||||||
|
ElMessage.error(res.data.message || '删除失败')
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
ElMessage.error('删除失败')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const openConsole = (row) => {
|
||||||
|
const base = (row.host || '').replace(/\/+$/, '')
|
||||||
|
if (!base) return ElMessage.warning('该服务未配置地址')
|
||||||
|
window.open(`${base}/ui/index.html?token=${encodeURIComponent(row.serviceToken || '')}`, '_blank')
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchList()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.mail-service-page {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 20px 24px;
|
||||||
|
background: linear-gradient(135deg, #f0f7ff 0%, #e8f4f8 100%);
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid #e0ecf5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-icon {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-desc {
|
||||||
|
margin: 4px 0 0;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-name-cell {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name-text {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.note-text {
|
||||||
|
color: #909399;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.host-tag {
|
||||||
|
font-family: 'Monaco', 'Menlo', monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smtp-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.smtp-host {
|
||||||
|
font-family: 'Monaco', 'Menlo', monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token-cell {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token-mask {
|
||||||
|
font-family: 'Monaco', 'Menlo', monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token-full {
|
||||||
|
font-family: 'Monaco', 'Menlo', monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #303133;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-wrap {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 16px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+169
-120
@@ -567,6 +567,9 @@
|
|||||||
<el-icon class="group-picker-arrow"><ArrowRight /></el-icon>
|
<el-icon class="group-picker-arrow"><ArrowRight /></el-icon>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item label="所属表" prop="table">
|
||||||
|
<el-input v-model="productForm.table" placeholder="请输入商品所属表(如 kvm_service)" />
|
||||||
|
</el-form-item>
|
||||||
<el-form-item label="商品介绍" prop="content">
|
<el-form-item label="商品介绍" prop="content">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="productForm.content"
|
v-model="productForm.content"
|
||||||
@@ -588,125 +591,149 @@
|
|||||||
@confirm="handleProductCoverSelect"
|
@confirm="handleProductCoverSelect"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 价格与销售 -->
|
<!-- Tab 栏管理 -->
|
||||||
<div class="form-section">
|
<el-tabs v-model="productFormTab" class="product-form-tabs">
|
||||||
<div class="form-section-title">价格与销售</div>
|
<el-tab-pane label="价格与销售" name="sales">
|
||||||
<div class="form-grid">
|
<div class="form-grid">
|
||||||
<el-form-item prop="price">
|
<el-form-item prop="price">
|
||||||
<template #label>
|
<template #label>
|
||||||
<span>商品价格<span class="unit-suffix">(元)</span></span>
|
<span>商品价格<span class="unit-suffix">(元)</span></span>
|
||||||
</template>
|
</template>
|
||||||
<el-input-number
|
<el-input-number
|
||||||
v-model="productForm.price"
|
v-model="productForm.price"
|
||||||
:min="0"
|
:min="0"
|
||||||
:precision="2"
|
:precision="2"
|
||||||
:step="0.01"
|
:step="0.01"
|
||||||
placeholder="请输入价格"
|
placeholder="请输入价格"
|
||||||
controls-position="right"
|
controls-position="right"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="单个商品数量" prop="pay_num">
|
<el-form-item label="单个商品数量" prop="pay_num">
|
||||||
<el-input-number
|
<el-input-number
|
||||||
v-model="productForm.pay_num"
|
v-model="productForm.pay_num"
|
||||||
:min="1"
|
:min="1"
|
||||||
placeholder="请输入数量"
|
placeholder="请输入数量"
|
||||||
controls-position="right"
|
controls-position="right"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="expire_time">
|
<el-form-item prop="expire_time">
|
||||||
<template #label>
|
<template #label>
|
||||||
<span>有效期<span class="unit-suffix">(天,0 为永久)</span></span>
|
<span>有效期<span class="unit-suffix">(天,0 为永久)</span></span>
|
||||||
</template>
|
</template>
|
||||||
<el-input-number
|
<el-input-number
|
||||||
v-model="productForm.expire_time"
|
v-model="productForm.expire_time"
|
||||||
:min="0"
|
:min="0"
|
||||||
placeholder="请输入有效期"
|
placeholder="请输入有效期"
|
||||||
controls-position="right"
|
controls-position="right"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="允许续费" prop="can_renew">
|
<el-form-item label="允许续费" prop="can_renew">
|
||||||
<el-switch
|
<el-switch
|
||||||
v-model="productForm.can_renew"
|
v-model="productForm.can_renew"
|
||||||
active-text="允许"
|
active-text="允许"
|
||||||
inactive-text="禁止"
|
inactive-text="禁止"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="购买类型" prop="arg_type">
|
<el-form-item label="购买类型" prop="arg_type">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="productForm.arg_type"
|
v-model="productForm.arg_type"
|
||||||
placeholder="请选择购买类型"
|
placeholder="请选择购买类型"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
>
|
>
|
||||||
<el-option label="所有类型" value="all" />
|
<el-option label="所有类型" value="all" />
|
||||||
<el-option label="仅套餐" value="plan" />
|
<el-option label="仅套餐" value="plan" />
|
||||||
<el-option label="仅自定义参数" value="customize" />
|
<el-option label="仅自定义参数" value="customize" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="需要实名" prop="require_real_name">
|
<el-form-item label="需要实名" prop="require_real_name">
|
||||||
<el-switch
|
<el-switch
|
||||||
v-model="productForm.require_real_name"
|
v-model="productForm.require_real_name"
|
||||||
active-text="需要"
|
active-text="需要"
|
||||||
inactive-text="不需要"
|
inactive-text="不需要"
|
||||||
/>
|
/>
|
||||||
<div style="font-size:12px;color:#909399;margin-top:4px">启用后,用户购买/续费/升级此商品前须完成实名认证</div>
|
<div style="font-size:12px;color:#909399;margin-top:4px">启用后,用户购买/续费/升级此商品前须完成实名认证</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</el-tab-pane>
|
||||||
|
|
||||||
<!-- 库存管理 -->
|
<el-tab-pane label="库存管理" name="inventory">
|
||||||
<div class="form-section">
|
<div class="form-grid">
|
||||||
<div class="form-section-title">库存管理</div>
|
<el-form-item label="库存控制" prop="inventory_control">
|
||||||
<div class="form-grid">
|
<el-switch
|
||||||
<el-form-item label="库存控制" prop="inventory_control">
|
v-model="productForm.inventory_control"
|
||||||
<el-switch
|
active-text="启用"
|
||||||
v-model="productForm.inventory_control"
|
inactive-text="禁用"
|
||||||
active-text="启用"
|
/>
|
||||||
inactive-text="禁用"
|
</el-form-item>
|
||||||
/>
|
<el-form-item label="库存数量" prop="inventory">
|
||||||
</el-form-item>
|
<el-input-number
|
||||||
<el-form-item label="库存数量" prop="inventory">
|
v-model="productForm.inventory"
|
||||||
<el-input-number
|
:min="0"
|
||||||
v-model="productForm.inventory"
|
:disabled="!productForm.inventory_control"
|
||||||
:min="0"
|
placeholder="请输入库存"
|
||||||
:disabled="!productForm.inventory_control"
|
controls-position="right"
|
||||||
placeholder="请输入库存"
|
style="width: 100%"
|
||||||
controls-position="right"
|
/>
|
||||||
style="width: 100%"
|
</el-form-item>
|
||||||
/>
|
<el-form-item label="售罄状态" prop="sold_out">
|
||||||
</el-form-item>
|
<el-switch
|
||||||
</div>
|
v-model="productForm.sold_out"
|
||||||
</div>
|
active-text="售罄"
|
||||||
|
inactive-text="正常"
|
||||||
|
active-color="#f56c6c"
|
||||||
|
/>
|
||||||
|
<div style="font-size:12px;color:#909399;margin-top:4px">开启后用户端将无法选购该商品</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="购买限制" prop="max_per_user">
|
||||||
|
<el-input-number
|
||||||
|
v-model="productForm.max_per_user"
|
||||||
|
:min="0"
|
||||||
|
placeholder="0 表示不限"
|
||||||
|
controls-position="right"
|
||||||
|
style="width: 100%"
|
||||||
|
/>
|
||||||
|
<div style="font-size:12px;color:#909399;margin-top:4px">限制单用户最大购买数量,0 表示不限制</div>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
<!-- 推荐与参数 -->
|
<el-tab-pane label="推荐与通知" name="promotion">
|
||||||
<div class="form-section">
|
<div class="form-grid">
|
||||||
<div class="form-section-title">推荐与参数</div>
|
<el-form-item label="推荐" prop="recommend">
|
||||||
<div class="form-grid">
|
<el-switch
|
||||||
<el-form-item label="推荐" prop="recommend">
|
v-model="productForm.recommend"
|
||||||
<el-switch
|
active-text="启用"
|
||||||
v-model="productForm.recommend"
|
inactive-text="禁用"
|
||||||
active-text="启用"
|
/>
|
||||||
inactive-text="禁用"
|
</el-form-item>
|
||||||
/>
|
<el-form-item prop="recommend_rebate">
|
||||||
</el-form-item>
|
<template #label>
|
||||||
<el-form-item prop="recommend_rebate">
|
<span>推荐返还<span class="unit-suffix">(%)</span></span>
|
||||||
<template #label>
|
</template>
|
||||||
<span>推荐返还<span class="unit-suffix">(%)</span></span>
|
<el-input-number
|
||||||
</template>
|
v-model="productForm.recommend_rebate"
|
||||||
<el-input-number
|
:min="0"
|
||||||
v-model="productForm.recommend_rebate"
|
:max="100"
|
||||||
:min="0"
|
:disabled="!productForm.recommend"
|
||||||
:max="100"
|
placeholder="返还百分比"
|
||||||
:disabled="!productForm.recommend"
|
controls-position="right"
|
||||||
placeholder="返还百分比"
|
style="width: 100%"
|
||||||
controls-position="right"
|
/>
|
||||||
style="width: 100%"
|
</el-form-item>
|
||||||
/>
|
<el-form-item label="购买通知" prop="send_notice">
|
||||||
</el-form-item>
|
<el-switch
|
||||||
</div>
|
v-model="productForm.send_notice"
|
||||||
</div>
|
active-text="发送"
|
||||||
|
inactive-text="不发送"
|
||||||
|
/>
|
||||||
|
<div style="font-size:12px;color:#909399;margin:4px">用户购买后是否发送通知给管理员</div>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</el-tab-pane>
|
||||||
|
</el-tabs>
|
||||||
</el-form>
|
</el-form>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<div class="dialog-footer">
|
<div class="dialog-footer">
|
||||||
@@ -873,7 +900,10 @@ const productForm = reactive({
|
|||||||
recommend_rebate: 0,
|
recommend_rebate: 0,
|
||||||
arg_type: 'all',
|
arg_type: 'all',
|
||||||
can_renew: true,
|
can_renew: true,
|
||||||
require_real_name: false
|
require_real_name: false,
|
||||||
|
sold_out: false,
|
||||||
|
max_per_user: 0,
|
||||||
|
send_notice: false
|
||||||
})
|
})
|
||||||
|
|
||||||
const productRules = {
|
const productRules = {
|
||||||
@@ -895,6 +925,7 @@ const productRules = {
|
|||||||
// 商品对话框状态
|
// 商品对话框状态
|
||||||
const productDialogVisible = ref(false)
|
const productDialogVisible = ref(false)
|
||||||
const productDialogType = ref('add')
|
const productDialogType = ref('add')
|
||||||
|
const productFormTab = ref('sales')
|
||||||
const productFormRef = ref(null)
|
const productFormRef = ref(null)
|
||||||
const coverSelectorVisible = ref(false)
|
const coverSelectorVisible = ref(false)
|
||||||
|
|
||||||
@@ -1557,7 +1588,10 @@ const handleEditProduct = (product, parentGroupId) => {
|
|||||||
recommend_rebate: product.recommendRebate,
|
recommend_rebate: product.recommendRebate,
|
||||||
arg_type: product.argType || 'all',
|
arg_type: product.argType || 'all',
|
||||||
can_renew: product.canRenew !== undefined ? product.canRenew : (product.can_renew !== undefined ? product.can_renew : true),
|
can_renew: product.canRenew !== undefined ? product.canRenew : (product.can_renew !== undefined ? product.can_renew : true),
|
||||||
require_real_name: product.requireRealName ?? product.require_real_name ?? false
|
require_real_name: product.requireRealName ?? product.require_real_name ?? false,
|
||||||
|
sold_out: !!product.soldOut,
|
||||||
|
max_per_user: product.maxPerUser ?? product.max_per_user ?? 0,
|
||||||
|
send_notice: !!product.sendNotice
|
||||||
})
|
})
|
||||||
|
|
||||||
productDialogVisible.value = true
|
productDialogVisible.value = true
|
||||||
@@ -1583,7 +1617,10 @@ const submitProductForm = () => {
|
|||||||
recommend_rebate: Number(productForm.recommend_rebate) || 0,
|
recommend_rebate: Number(productForm.recommend_rebate) || 0,
|
||||||
arg_type: productForm.arg_type,
|
arg_type: productForm.arg_type,
|
||||||
can_renew: productForm.can_renew,
|
can_renew: productForm.can_renew,
|
||||||
require_real_name: productForm.require_real_name
|
require_real_name: productForm.require_real_name,
|
||||||
|
sold_out: productForm.sold_out === true,
|
||||||
|
max_per_user: Number(productForm.max_per_user) || 0,
|
||||||
|
send_notice: productForm.send_notice === true
|
||||||
}
|
}
|
||||||
|
|
||||||
let res
|
let res
|
||||||
@@ -2185,6 +2222,18 @@ onMounted(() => {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.product-form-tabs {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-form-tabs :deep(.el-tabs__header) {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-form-tabs :deep(.el-tab-pane) {
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
.form-section {
|
.form-section {
|
||||||
margin-bottom: var(--section-gap);
|
margin-bottom: var(--section-gap);
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -113,6 +113,9 @@
|
|||||||
<el-tag :type="row.canUpdate || row.can_update ? 'success' : 'info'" size="small" effect="plain">
|
<el-tag :type="row.canUpdate || row.can_update ? 'success' : 'info'" size="small" effect="plain">
|
||||||
{{ row.canUpdate || row.can_update ? '允许升级' : '禁止升级' }}
|
{{ row.canUpdate || row.can_update ? '允许升级' : '禁止升级' }}
|
||||||
</el-tag>
|
</el-tag>
|
||||||
|
<el-tag v-if="(row.maxPerUser || row.max_per_user) > 0" type="warning" size="small" effect="plain">
|
||||||
|
限购{{ row.maxPerUser || row.max_per_user }}次
|
||||||
|
</el-tag>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 说明 -->
|
<!-- 说明 -->
|
||||||
@@ -288,6 +291,10 @@
|
|||||||
<el-switch v-model="planForm.can_update" active-text="允许" inactive-text="不允许" />
|
<el-switch v-model="planForm.can_update" active-text="允许" inactive-text="不允许" />
|
||||||
<div class="form-tip">控制用户是否可以升级到此套餐</div>
|
<div class="form-tip">控制用户是否可以升级到此套餐</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item label="购买限制" prop="max_per_user">
|
||||||
|
<el-input-number v-model="planForm.max_per_user" :min="0" placeholder="单用户最大购买数量" style="width: 100%" />
|
||||||
|
<div class="form-tip">限制单个用户对该套餐的最大购买数量,0 表示不限制</div>
|
||||||
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
@@ -378,7 +385,8 @@ const planForm = reactive({
|
|||||||
index: 0,
|
index: 0,
|
||||||
disable: false,
|
disable: false,
|
||||||
show_home: false,
|
show_home: false,
|
||||||
can_update: false
|
can_update: false,
|
||||||
|
max_per_user: 0
|
||||||
})
|
})
|
||||||
const planFormRules = {
|
const planFormRules = {
|
||||||
name: [{ required: true, message: '请输入套餐名称', trigger: 'blur' }]
|
name: [{ required: true, message: '请输入套餐名称', trigger: 'blur' }]
|
||||||
@@ -546,11 +554,11 @@ const findMatchingNumberAttr = (spec, numValue) => {
|
|||||||
if (!spec.attrs || spec.attrs.length === 0) return null
|
if (!spec.attrs || spec.attrs.length === 0) return null
|
||||||
const sortedAttrs = [...spec.attrs].sort((a, b) => (a.index || 0) - (b.index || 0))
|
const sortedAttrs = [...spec.attrs].sort((a, b) => (a.index || 0) - (b.index || 0))
|
||||||
for (const attr of sortedAttrs) {
|
for (const attr of sortedAttrs) {
|
||||||
const phase = attr.phase || 0
|
const rangeVal = attr.range ?? attr.phase ?? 0
|
||||||
const rangeType = attr.rangeType || 'before'
|
const rangeType = attr.rangeType || 'before'
|
||||||
if (rangeType === 'before' && numValue <= phase) return attr
|
if (rangeType === 'before' && numValue <= rangeVal) return attr
|
||||||
else if (rangeType === 'after' && numValue >= phase) return attr
|
else if (rangeType === 'after' && numValue >= rangeVal) return attr
|
||||||
else if (rangeType === 'equal' && numValue === phase) return attr
|
else if (rangeType === 'equal' && numValue === rangeVal) return attr
|
||||||
}
|
}
|
||||||
return sortedAttrs[sortedAttrs.length - 1]
|
return sortedAttrs[sortedAttrs.length - 1]
|
||||||
}
|
}
|
||||||
@@ -758,7 +766,7 @@ const handleAddPlan = async () => {
|
|||||||
displayUnits[spec.id] = getParamDefaultUnit(spec)
|
displayUnits[spec.id] = getParamDefaultUnit(spec)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Object.assign(planForm, { plan_id: undefined, name: '', note: '', args: '', extra_arg_ids: '', extra_arg_ids_array: [], inventory: 0, fixed_price: 0, enable_fixed_price: false, index: 0, disable: false, show_home: false, can_update: false })
|
Object.assign(planForm, { plan_id: undefined, name: '', note: '', args: '', extra_arg_ids: '', extra_arg_ids_array: [], inventory: 0, fixed_price: 0, enable_fixed_price: false, index: 0, disable: false, show_home: false, can_update: false, max_per_user: 0 })
|
||||||
planFormDialogVisible.value = true
|
planFormDialogVisible.value = true
|
||||||
nextTick(() => { planFormRef.value?.resetFields() })
|
nextTick(() => { planFormRef.value?.resetFields() })
|
||||||
}
|
}
|
||||||
@@ -785,7 +793,8 @@ const handleEditPlan = async (row) => {
|
|||||||
inventory: data.inventory || 0, fixed_price: ((data.fixedPrice || data.fixed_price || 0) / 100).toFixed(2) * 1,
|
inventory: data.inventory || 0, fixed_price: ((data.fixedPrice || data.fixed_price || 0) / 100).toFixed(2) * 1,
|
||||||
enable_fixed_price: !!(data.enableFixedPrice || data.enable_fixed_price),
|
enable_fixed_price: !!(data.enableFixedPrice || data.enable_fixed_price),
|
||||||
index: data.index || 0, disable: data.disable || false, show_home: !!(data.showHome || data.show_home),
|
index: data.index || 0, disable: data.disable || false, show_home: !!(data.showHome || data.show_home),
|
||||||
can_update: !!(data.canUpdate || data.can_update)
|
can_update: !!(data.canUpdate || data.can_update),
|
||||||
|
max_per_user: data.maxPerUser ?? data.max_per_user ?? 0
|
||||||
})
|
})
|
||||||
initSelectedArgsFromJson(data.args, extraArgIdsArray)
|
initSelectedArgsFromJson(data.args, extraArgIdsArray)
|
||||||
planFormDialogVisible.value = true
|
planFormDialogVisible.value = true
|
||||||
@@ -842,7 +851,8 @@ const submitPlanForm = () => {
|
|||||||
args: planForm.args || '', extra_arg_ids: extraArgIdsStr || planForm.extra_arg_ids || '',
|
args: planForm.args || '', extra_arg_ids: extraArgIdsStr || planForm.extra_arg_ids || '',
|
||||||
inventory: Number(planForm.inventory) || 0, fixed_price: Math.round(Number(planForm.fixed_price) * 100) || 0,
|
inventory: Number(planForm.inventory) || 0, fixed_price: Math.round(Number(planForm.fixed_price) * 100) || 0,
|
||||||
index: Number(planForm.index) || 0, show_home: planForm.show_home === true,
|
index: Number(planForm.index) || 0, show_home: planForm.show_home === true,
|
||||||
can_update: planForm.can_update === true
|
can_update: planForm.can_update === true,
|
||||||
|
max_per_user: Number(planForm.max_per_user) || 0
|
||||||
}
|
}
|
||||||
if (planFormType.value === 'add') submitData.enable_fixed_price = planForm.enable_fixed_price === true
|
if (planFormType.value === 'add') submitData.enable_fixed_price = planForm.enable_fixed_price === true
|
||||||
let res
|
let res
|
||||||
|
|||||||
Reference in New Issue
Block a user