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: '虚拟化平台管理',
|
||||
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',
|
||||
|
||||
@@ -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>
|
||||
</div>
|
||||
</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-input
|
||||
v-model="productForm.content"
|
||||
@@ -588,125 +591,149 @@
|
||||
@confirm="handleProductCoverSelect"
|
||||
/>
|
||||
|
||||
<!-- 价格与销售 -->
|
||||
<div class="form-section">
|
||||
<div class="form-section-title">价格与销售</div>
|
||||
<div class="form-grid">
|
||||
<el-form-item prop="price">
|
||||
<template #label>
|
||||
<span>商品价格<span class="unit-suffix">(元)</span></span>
|
||||
</template>
|
||||
<el-input-number
|
||||
v-model="productForm.price"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="0.01"
|
||||
placeholder="请输入价格"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单个商品数量" prop="pay_num">
|
||||
<el-input-number
|
||||
v-model="productForm.pay_num"
|
||||
:min="1"
|
||||
placeholder="请输入数量"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="expire_time">
|
||||
<template #label>
|
||||
<span>有效期<span class="unit-suffix">(天,0 为永久)</span></span>
|
||||
</template>
|
||||
<el-input-number
|
||||
v-model="productForm.expire_time"
|
||||
:min="0"
|
||||
placeholder="请输入有效期"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="允许续费" prop="can_renew">
|
||||
<el-switch
|
||||
v-model="productForm.can_renew"
|
||||
active-text="允许"
|
||||
inactive-text="禁止"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="购买类型" prop="arg_type">
|
||||
<el-select
|
||||
v-model="productForm.arg_type"
|
||||
placeholder="请选择购买类型"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="所有类型" value="all" />
|
||||
<el-option label="仅套餐" value="plan" />
|
||||
<el-option label="仅自定义参数" value="customize" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="需要实名" prop="require_real_name">
|
||||
<el-switch
|
||||
v-model="productForm.require_real_name"
|
||||
active-text="需要"
|
||||
inactive-text="不需要"
|
||||
/>
|
||||
<div style="font-size:12px;color:#909399;margin-top:4px">启用后,用户购买/续费/升级此商品前须完成实名认证</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab 栏管理 -->
|
||||
<el-tabs v-model="productFormTab" class="product-form-tabs">
|
||||
<el-tab-pane label="价格与销售" name="sales">
|
||||
<div class="form-grid">
|
||||
<el-form-item prop="price">
|
||||
<template #label>
|
||||
<span>商品价格<span class="unit-suffix">(元)</span></span>
|
||||
</template>
|
||||
<el-input-number
|
||||
v-model="productForm.price"
|
||||
:min="0"
|
||||
:precision="2"
|
||||
:step="0.01"
|
||||
placeholder="请输入价格"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="单个商品数量" prop="pay_num">
|
||||
<el-input-number
|
||||
v-model="productForm.pay_num"
|
||||
:min="1"
|
||||
placeholder="请输入数量"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="expire_time">
|
||||
<template #label>
|
||||
<span>有效期<span class="unit-suffix">(天,0 为永久)</span></span>
|
||||
</template>
|
||||
<el-input-number
|
||||
v-model="productForm.expire_time"
|
||||
:min="0"
|
||||
placeholder="请输入有效期"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="允许续费" prop="can_renew">
|
||||
<el-switch
|
||||
v-model="productForm.can_renew"
|
||||
active-text="允许"
|
||||
inactive-text="禁止"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="购买类型" prop="arg_type">
|
||||
<el-select
|
||||
v-model="productForm.arg_type"
|
||||
placeholder="请选择购买类型"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option label="所有类型" value="all" />
|
||||
<el-option label="仅套餐" value="plan" />
|
||||
<el-option label="仅自定义参数" value="customize" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="需要实名" prop="require_real_name">
|
||||
<el-switch
|
||||
v-model="productForm.require_real_name"
|
||||
active-text="需要"
|
||||
inactive-text="不需要"
|
||||
/>
|
||||
<div style="font-size:12px;color:#909399;margin-top:4px">启用后,用户购买/续费/升级此商品前须完成实名认证</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 库存管理 -->
|
||||
<div class="form-section">
|
||||
<div class="form-section-title">库存管理</div>
|
||||
<div class="form-grid">
|
||||
<el-form-item label="库存控制" prop="inventory_control">
|
||||
<el-switch
|
||||
v-model="productForm.inventory_control"
|
||||
active-text="启用"
|
||||
inactive-text="禁用"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="库存数量" prop="inventory">
|
||||
<el-input-number
|
||||
v-model="productForm.inventory"
|
||||
:min="0"
|
||||
:disabled="!productForm.inventory_control"
|
||||
placeholder="请输入库存"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<el-tab-pane label="库存管理" name="inventory">
|
||||
<div class="form-grid">
|
||||
<el-form-item label="库存控制" prop="inventory_control">
|
||||
<el-switch
|
||||
v-model="productForm.inventory_control"
|
||||
active-text="启用"
|
||||
inactive-text="禁用"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="库存数量" prop="inventory">
|
||||
<el-input-number
|
||||
v-model="productForm.inventory"
|
||||
:min="0"
|
||||
:disabled="!productForm.inventory_control"
|
||||
placeholder="请输入库存"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="售罄状态" prop="sold_out">
|
||||
<el-switch
|
||||
v-model="productForm.sold_out"
|
||||
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>
|
||||
|
||||
<!-- 推荐与参数 -->
|
||||
<div class="form-section">
|
||||
<div class="form-section-title">推荐与参数</div>
|
||||
<div class="form-grid">
|
||||
<el-form-item label="推荐" prop="recommend">
|
||||
<el-switch
|
||||
v-model="productForm.recommend"
|
||||
active-text="启用"
|
||||
inactive-text="禁用"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="recommend_rebate">
|
||||
<template #label>
|
||||
<span>推荐返还<span class="unit-suffix">(%)</span></span>
|
||||
</template>
|
||||
<el-input-number
|
||||
v-model="productForm.recommend_rebate"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:disabled="!productForm.recommend"
|
||||
placeholder="返还百分比"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
<el-tab-pane label="推荐与通知" name="promotion">
|
||||
<div class="form-grid">
|
||||
<el-form-item label="推荐" prop="recommend">
|
||||
<el-switch
|
||||
v-model="productForm.recommend"
|
||||
active-text="启用"
|
||||
inactive-text="禁用"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="recommend_rebate">
|
||||
<template #label>
|
||||
<span>推荐返还<span class="unit-suffix">(%)</span></span>
|
||||
</template>
|
||||
<el-input-number
|
||||
v-model="productForm.recommend_rebate"
|
||||
:min="0"
|
||||
:max="100"
|
||||
:disabled="!productForm.recommend"
|
||||
placeholder="返还百分比"
|
||||
controls-position="right"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="购买通知" prop="send_notice">
|
||||
<el-switch
|
||||
v-model="productForm.send_notice"
|
||||
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>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
@@ -873,7 +900,10 @@ const productForm = reactive({
|
||||
recommend_rebate: 0,
|
||||
arg_type: 'all',
|
||||
can_renew: true,
|
||||
require_real_name: false
|
||||
require_real_name: false,
|
||||
sold_out: false,
|
||||
max_per_user: 0,
|
||||
send_notice: false
|
||||
})
|
||||
|
||||
const productRules = {
|
||||
@@ -895,6 +925,7 @@ const productRules = {
|
||||
// 商品对话框状态
|
||||
const productDialogVisible = ref(false)
|
||||
const productDialogType = ref('add')
|
||||
const productFormTab = ref('sales')
|
||||
const productFormRef = ref(null)
|
||||
const coverSelectorVisible = ref(false)
|
||||
|
||||
@@ -1557,7 +1588,10 @@ const handleEditProduct = (product, parentGroupId) => {
|
||||
recommend_rebate: product.recommendRebate,
|
||||
arg_type: product.argType || 'all',
|
||||
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
|
||||
@@ -1583,7 +1617,10 @@ const submitProductForm = () => {
|
||||
recommend_rebate: Number(productForm.recommend_rebate) || 0,
|
||||
arg_type: productForm.arg_type,
|
||||
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
|
||||
@@ -2185,6 +2222,18 @@ onMounted(() => {
|
||||
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 {
|
||||
margin-bottom: var(--section-gap);
|
||||
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">
|
||||
{{ row.canUpdate || row.can_update ? '允许升级' : '禁止升级' }}
|
||||
</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>
|
||||
|
||||
<!-- 说明 -->
|
||||
@@ -288,6 +291,10 @@
|
||||
<el-switch v-model="planForm.can_update" active-text="允许" inactive-text="不允许" />
|
||||
<div class="form-tip">控制用户是否可以升级到此套餐</div>
|
||||
</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>
|
||||
</div>
|
||||
<template #footer>
|
||||
@@ -378,7 +385,8 @@ const planForm = reactive({
|
||||
index: 0,
|
||||
disable: false,
|
||||
show_home: false,
|
||||
can_update: false
|
||||
can_update: false,
|
||||
max_per_user: 0
|
||||
})
|
||||
const planFormRules = {
|
||||
name: [{ required: true, message: '请输入套餐名称', trigger: 'blur' }]
|
||||
@@ -546,11 +554,11 @@ const findMatchingNumberAttr = (spec, numValue) => {
|
||||
if (!spec.attrs || spec.attrs.length === 0) return null
|
||||
const sortedAttrs = [...spec.attrs].sort((a, b) => (a.index || 0) - (b.index || 0))
|
||||
for (const attr of sortedAttrs) {
|
||||
const phase = attr.phase || 0
|
||||
const rangeVal = attr.range ?? attr.phase ?? 0
|
||||
const rangeType = attr.rangeType || 'before'
|
||||
if (rangeType === 'before' && numValue <= phase) return attr
|
||||
else if (rangeType === 'after' && numValue >= phase) return attr
|
||||
else if (rangeType === 'equal' && numValue === phase) return attr
|
||||
if (rangeType === 'before' && numValue <= rangeVal) return attr
|
||||
else if (rangeType === 'after' && numValue >= rangeVal) return attr
|
||||
else if (rangeType === 'equal' && numValue === rangeVal) return attr
|
||||
}
|
||||
return sortedAttrs[sortedAttrs.length - 1]
|
||||
}
|
||||
@@ -758,7 +766,7 @@ const handleAddPlan = async () => {
|
||||
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
|
||||
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,
|
||||
enable_fixed_price: !!(data.enableFixedPrice || data.enable_fixed_price),
|
||||
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)
|
||||
planFormDialogVisible.value = true
|
||||
@@ -842,7 +851,8 @@ const submitPlanForm = () => {
|
||||
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,
|
||||
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
|
||||
let res
|
||||
|
||||
Reference in New Issue
Block a user