更新代理套餐优化

This commit is contained in:
2026-03-26 11:26:44 +08:00
parent 8dd1cd54aa
commit 1f75a682ef
2 changed files with 270 additions and 179 deletions

View File

@@ -1,19 +1,18 @@
<template> <template>
<Dialog v-model="dialogVisible" :title="dialogTitle" width="50%"> <Dialog v-model="dialogVisible" :title="dialogTitle" width="50%" :draggable="false">
<el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="120px"> <el-form ref="formRef" v-loading="formLoading" :model="formData" :rules="formRules" label-width="120px">
<!-- ========== 1. 基础信息 ========== -->
<el-divider>基础信息</el-divider> <el-divider>基础信息</el-divider>
<el-form-item label="租户名" prop="name"> <el-form-item label="租户名" prop="name">
<el-input v-model="formData.name" placeholder="请输入租户名" /> <el-input v-model="formData.name" placeholder="请输入租户名" />
</el-form-item> </el-form-item>
<el-form-item v-if="tenantLevel <= 1" label="租户类型" prop="tenantType"> <el-form-item v-if="tenantLevel <= 1" label="租户类型" prop="tenantType">
<el-radio-group v-model="formData.tenantType"> <el-radio-group v-model="formData.tenantType" @change="handleTenantTypeChange">
<el-radio value="代理">代理</el-radio> <el-radio value="代理">代理</el-radio>
<el-radio value="用户">用户</el-radio> <el-radio value="用户">用户</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="联系人" prop="contactName"> <el-form-item label="联系人" prop="contactName">
<el-input v-model="formData.contactName" placeholder="请输入联系人" /> <el-input v-model="formData.contactName" placeholder="请输入联系人" />
</el-form-item> </el-form-item>
@@ -43,23 +42,20 @@
<el-date-picker v-model="formData.brotherExpireTime" clearable placeholder="请选择爬大哥过期时间" type="date" <el-date-picker v-model="formData.brotherExpireTime" clearable placeholder="请选择爬大哥过期时间" type="date"
value-format="x" /> value-format="x" />
</el-form-item> </el-form-item>
<el-form-item v-if="tenantLevel == 0" label="爬虫过期时间" prop="crawlExpireTime"> <el-form-item v-if="tenantLevel == 0" label="爬虫过期时间" prop="crawlExpireTime">
<el-date-picker v-model="formData.crawlExpireTime" clearable placeholder="请选择爬虫过期时间" type="date" <el-date-picker v-model="formData.crawlExpireTime" clearable placeholder="请选择爬虫过期时间" type="date"
value-format="x" /> value-format="x" />
</el-form-item> </el-form-item>
<el-form-item v-if="tenantLevel == 0" label="后台过期时间" prop="expireTime"> <el-form-item v-if="tenantLevel == 0" label="后台过期时间" prop="expireTime">
<el-date-picker v-model="formData.expireTime" clearable placeholder="请选择过期时间" type="date" value-format="x" /> <el-date-picker v-model="formData.expireTime" clearable placeholder="请选择过期时间" type="date" value-format="x" />
</el-form-item> </el-form-item>
<el-form-item v-else label="后台过期时间" prop="expireTime"> <el-form-item v-else label="后台过期时间" prop="expireTime">
<el-date-picker v-model="formData.expireTime" clearable placeholder="请选择过期时间" disabled type="date" <el-date-picker v-model="formData.expireTime" clearable placeholder="请选择过期时间" disabled type="date"
value-format="x" /> value-format="x" />
</el-form-item> </el-form-item>
<el-form-item label="绑定域名" prop="website"> <el-form-item label="绑定域名" prop="website">
<el-input v-model="formData.website" placeholder="请输入绑定域名" /> <el-input v-model="formData.website" placeholder="请输入绑定域名" />
</el-form-item> </el-form-item>
@@ -82,105 +78,110 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 爬虫不受限制 --> <template v-if="userData.id">
<el-form-item v-if="userData.id" label="爬虫" prop="status"> <el-form-item label="爬虫" prop="status">
<el-radio-group v-model="userData.crawl"> <el-radio-group v-model="userData.crawl">
<el-radio :value="1">开启</el-radio> <el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio> <el-radio :value="0">关闭</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="爬大哥" prop="status">
<el-radio-group v-model="userData.bigBrother" :disabled="!formData.brotherExpireTime">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="ios自动化" prop="status">
<el-radio-group v-model="userData.aiChat" :disabled="!formData.aiExpireTime">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="ai回复" prop="status">
<el-radio-group v-model="userData.aiReplay" :disabled="!formData.aiExpireTime">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="即时消息" prop="status">
<el-radio-group v-model="userData.webAi" :disabled="!formData.aiExpireTime">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
</template>
<!-- 爬大哥依赖爬大哥过期时间 -->
<el-form-item v-if="userData.id" label="爬大哥" prop="status">
<el-radio-group v-model="userData.bigBrother" :disabled="!formData.brotherExpireTime">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
<!-- ai自动化依赖 AI 过期时间 -->
<el-form-item v-if="userData.id" label="ai自动化" prop="status">
<el-radio-group v-model="userData.aiChat" :disabled="!formData.aiExpireTime">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
<!-- ai回复依赖 AI 过期时间 -->
<el-form-item v-if="userData.id" label="ai回复" prop="status">
<el-radio-group v-model="userData.aiReplay" :disabled="!formData.aiExpireTime">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
<!--WEB回复依赖 AI 过期时间 -->
<el-form-item v-if="userData.id" label="WEB客户端" prop="status">
<el-radio-group v-model="userData.webAi" :disabled="!formData.aiExpireTime">
<el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio>
</el-radio-group>
</el-form-item>
<!-- ========== 2. 套餐 & 权限 ========== -->
<el-divider>套餐 & 权限</el-divider> <el-divider>套餐 & 权限</el-divider>
<el-form-item label="租户套餐" prop="packageId"> <el-form-item label="租户套餐" prop="packageId">
<!-- 顶层租户或无 parentId走原来的下拉选择 -->
<el-select v-if="(formData.parentId == 1 || formData.parentId == null) && tenantLevel == 0" <el-select v-if="(formData.parentId == 1 || formData.parentId == null) && tenantLevel == 0"
v-model="formData.packageId" clearable placeholder="请选择租户套餐"> v-model="formData.packageId" clearable placeholder="请选择租户套餐" style="width: 100%;">
<el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id" /> <el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id" />
</el-select> </el-select>
<!-- 代理租户用功能勾选 + 套餐单选 --> <div v-else class="package-selection-container">
<div v-else style="display: block;"> <el-radio-group v-model="activePackageCategory" class="category-tabs">
<!-- 功能勾选1=爬大哥2=爬主播3=AI套餐 --> <el-radio-button label="normal" :disabled="formData.tenantType === '代理'">常规套餐</el-radio-button>
<el-checkbox-group v-model="selectedFeatures">
<el-checkbox :label="1">爬主播</el-checkbox>
<el-checkbox :label="2">爬大哥</el-checkbox>
<el-checkbox :label="3">AI套餐</el-checkbox>
<el-checkbox :label="9">代理</el-checkbox>
</el-checkbox-group>
<!-- 按天数过滤30 / 180 / 360 --> <el-radio-button label="agent" :disabled="formData.tenantType === '用户'">代理套餐</el-radio-button>
<div style="margin-top: 8px;">
<el-radio-group v-model="selectedDays">
<el-radio-button :label="30">30 </el-radio-button>
<el-radio-button :label="180">180 </el-radio-button>
<el-radio-button :label="365">365 </el-radio-button>
</el-radio-group>
</div>
<!-- 根据勾选结果筛选套餐用单选框选择一个套餐 -->
<div class="package-radio-wrapper">
<el-radio-group v-model="formData.packageId">
<el-radio-button v-for="item in filteredAgencyPackages" :key="item.id" :label="item.id"
class="package-radio">
{{ item.name }} <el-radio-button label="test" :disabled="formData.tenantType === '代理'">测试套餐</el-radio-button>
</el-radio-group>
</el-radio-button> <div v-show="activePackageCategory === 'normal'" class="filter-section">
</el-radio-group> <div class="filter-row">
<span class="filter-label">包含功能</span>
<div v-if="filteredAgencyPackages.length === 0" class="package-empty-tip"> <el-checkbox-group v-model="selectedFeatures">
暂无匹配套餐请调整上方功能勾选 <el-checkbox :label="1">爬主播</el-checkbox>
<el-checkbox :label="2">爬大哥</el-checkbox>
<el-checkbox :label="4">AI套餐</el-checkbox>
<el-checkbox :label="9">代理</el-checkbox>
</el-checkbox-group>
</div>
<div class="filter-row" style="margin-top: 8px;">
<span class="filter-label">套餐周期</span>
<el-radio-group v-model="selectedDays" size="small">
<el-radio-button :label="null">全部</el-radio-button>
<el-radio-button :label="30">30 </el-radio-button>
<el-radio-button :label="180">185 </el-radio-button>
<el-radio-button :label="365">365 </el-radio-button>
</el-radio-group>
</div> </div>
</div> </div>
<div class="package-card-grid">
<div v-for="item in filteredAgencyPackages" :key="item.id" class="package-card"
:class="{ 'is-active': formData.packageId === item.id }" @click="formData.packageId = item.id">
<div v-if="formData.packageId === item.id" class="active-badge">
<el-icon>
<Check />
</el-icon>
</div>
<div class="card-title">{{ item.name }}</div>
<div class="card-price">
<span class="currency">¥</span>
<span class="amount">{{ item.price }}</span>
</div>
<div class="card-desc">时长: {{ item.days === 9999 ? '永久有效' : item.days + ' 天' }}</div>
</div>
</div>
<el-empty v-if="filteredAgencyPackages.length === 0" description="暂无匹配的套餐,请调整筛选条件" :image-size="60" />
</div> </div>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm"> <el-button :disabled="formLoading" type="primary" @click="submitForm"> </el-button>
</el-button>
<el-button @click="dialogVisible = false"> </el-button> <el-button @click="dialogVisible = false"> </el-button>
</template> </template>
</Dialog> </Dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, reactive, watch, computed } from 'vue' import { ref, reactive, watch, computed } from 'vue'
import { Check } from '@element-plus/icons-vue' // 引入对号图标
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import * as TenantApi from '@/api/system/tenant' import * as TenantApi from '@/api/system/tenant'
import { getUserByTenant, updateRoleUser } from '@/api/system/user' import { getUserByTenant, updateRoleUser } from '@/api/system/user'
@@ -188,13 +189,17 @@ import { CommonStatusEnum } from '@/utils/constants'
import * as TenantPackageApi from '@/api/system/tenantPackage' import * as TenantPackageApi from '@/api/system/tenantPackage'
import * as userApi from '@/api/system/user' import * as userApi from '@/api/system/user'
import { useUserStore } from '@/store/modules/user' import { useUserStore } from '@/store/modules/user'
// 假设有 useI18n 和 useMessage 的全局引入或在此处补全引入
import { useI18n } from 'vue-i18n'
import { useMessage } from '@/hooks/web/useMessage'
defineOptions({ name: 'SystemTenantForm' }) defineOptions({ name: 'SystemTenantForm' })
const tenantLevel = ref(3) const tenantLevel = ref(3)
TenantApi.getSelfTenantLevel().then(res => { TenantApi.getSelfTenantLevel().then(res => {
tenantLevel.value = res.tenantLevel tenantLevel.value = res.tenantLevel
console.log(tenantLevel.value)
}) })
const { t } = useI18n() const { t } = useI18n()
const message = useMessage() const message = useMessage()
const dialogVisible = ref(false) const dialogVisible = ref(false)
@@ -202,6 +207,7 @@ const dialogTitle = ref('')
const formLoading = ref(false) const formLoading = ref(false)
const formType = ref<'create' | 'update'>('create') const formType = ref<'create' | 'update'>('create')
const userStore = useUserStore() const userStore = useUserStore()
const formData = ref({ const formData = ref({
id: 0, id: 0,
name: undefined as string | undefined, name: undefined as string | undefined,
@@ -218,21 +224,12 @@ const formData = ref({
aiExpireTime: undefined as number | undefined, aiExpireTime: undefined as number | undefined,
brotherExpireTime: undefined as number | undefined, brotherExpireTime: undefined as number | undefined,
crawlExpireTime: undefined as number | undefined, crawlExpireTime: undefined as number | undefined,
tenantType: undefined as number | undefined, tenantType: undefined as string | number | undefined, // 修改为兼容 string因 radio 值是'代理'
parentId: undefined as number | undefined, parentId: undefined as number | undefined,
}) })
const userData = ref({} as userApi.UserVO) const userData = ref({} as userApi.UserVO)
const userList = ref<userApi.UserVO[]>([{ id: 0, aiChat: 0, bigBrother: 0, crawl: 0 } as any])
const userList = ref<userApi.UserVO[]>([
{
id: 0,
aiChat: 0,
bigBrother: 0,
crawl: 0
} as any
])
const formRules = reactive({ const formRules = reactive({
name: [{ required: true, message: '租户名不能为空', trigger: 'blur' }], name: [{ required: true, message: '租户名不能为空', trigger: 'blur' }],
@@ -252,60 +249,73 @@ const formRules = reactive({
const formRef = ref() const formRef = ref()
const packageList = ref([] as TenantPackageApi.TenantPackageVO[]) const packageList = ref([] as TenantPackageApi.TenantPackageVO[])
const packageAgencyList = ref([] as TenantPackageApi.TenantPackageVO[]) const packageAgencyList = ref([] as TenantPackageApi.TenantPackageVO[])
// 代理套餐功能勾选1=爬大哥2=爬主播3=AI套餐
const selectedFeatures = ref<number[]>([]) // ====== 新增UI 交互状态 ======
// 套餐天数筛选30 / 180 / 360不选则不过滤 const activePackageCategory = ref('normal') // 套餐大类:'normal' | 'agent' | 'test'
const selectedDays = ref<number | null>(null) const selectedFeatures = ref<number[]>([]) // 代理套餐功能勾选
// 二级代理套餐的 ID const selectedDays = ref<number | null>(null) // 按套餐天数筛选
const SECOND_AGENT_PACKAGE_ID = 10001
// 根据 selectedFeatures + packageAgencyList 计算可选套餐 const SECOND_AGENT_PACKAGE_ID = 10001 // 二级代理套餐的 ID
const filteredAgencyPackages = computed(() => {
// 1. 根据创建/编辑确定基础套餐列表 // 当选择租户类型时,智能切换 Tab
let list: any[] = [] const handleTenantTypeChange = (val: string) => {
if (formType.value === 'create') { if (val === '代理') {
list = packageList.value || [] activePackageCategory.value = 'agent' // 自动跳到代理套餐 Tab
} else { formData.value.packageId = undefined // 清空之前选的错误套餐
list = packageAgencyList.value || [] } else if (val === '用户') {
activePackageCategory.value = 'normal' // 自动跳到常规套餐 Tab
formData.value.packageId = undefined // 清空之前选的错误套餐
} }
}
// ====== 核心:计算最终展示的套餐列表 ======
const filteredAgencyPackages = computed(() => {
let list: any[] = formType.value === 'create' ? packageList.value || [] : packageAgencyList.value || []
if (!list.length) return [] if (!list.length) return []
const selected = selectedFeatures.value
// 2. 先按功能勾选过滤(保持你原来的逻辑)
let result: any[] = [] let result: any[] = []
if (!selected.length) {
// 一个功能都没勾选时,直接返回全部套餐 // 1. 根据顶部 Tab 进行大类粗筛
result = list if (activePackageCategory.value === 'agent') {
} else { // 假设代理套餐特征:名称含'代理' 或 天数9999 或 ID是二级代理
// 有勾选时才进行过滤 result = list.filter(item => item.name.includes('代理') || item.days === 9999 || item.id === SECOND_AGENT_PACKAGE_ID)
result = list.filter((item: any) => { }
const typeStr = String(item.packageType ?? '') else if (activePackageCategory.value === 'test') {
// 要求选中的功能全部包含在 packageType 里 // 假设测试套餐特征:名称含'测试'
// 例如勾选 [1,2] -> 匹配 '12'、'123' 等 result = list.filter(item => item.name.includes('测试'))
return selected.every(flag => typeStr.includes(String(flag))) }
}) else {
// 常规套餐:排除代理和测试套餐
result = list.filter(item => !item.name.includes('代理') && !item.name.includes('测试') && item.days !== 9999)
// 2. 常规套餐继续应用「功能勾选」过滤
if (selectedFeatures.value.length > 0) {
result = result.filter(item => {
const typeStr = String(item.packageType ?? '')
return selectedFeatures.value.every(flag => typeStr.includes(String(flag)))
})
}
// 3. 常规套餐继续应用「天数过滤」
if (selectedDays.value != null) {
result = result.filter(item => item.days === selectedDays.value)
}
} }
// 3. 按天数过滤item.days === 30 / 180 / 360 // 4. 原有的租户类型强制限制逻辑 (兜底保护)
if (selectedDays.value != null) { // 4. 最终兜底:利用后端的 packageType 进行限制
result = result.filter((item: any) => item.days === selectedDays.value)
}
// 4. 再根据租户类型进行限制
const tenantType = formData.value.tenantType const tenantType = formData.value.tenantType
if (tenantType === '代理') { if (tenantType === '代理') {
// 只能选二级代理套餐10001 // 租户类型选了“代理”,强制只能看到 packageType 为 999 的套餐
result = result.filter(item => item.id === SECOND_AGENT_PACKAGE_ID) result = result.filter(item => item.packageType === 999)
} else if (tenantType === '户') { } else if (tenantType === '户') {
// 租户不能选二级代理套餐 // 租户类型选了“用户”,强制不能看到代理(999)和测试(99)的套餐
result = result.filter(item => item.id !== SECOND_AGENT_PACKAGE_ID) result = result.filter(item => item.packageType !== 999)
} }
return result return result
}) })
/** 打开弹窗 */ /** 打开弹窗 */
const open = async (type: 'create' | 'update', id?: number) => { const open = async (type: 'create' | 'update', id?: number) => {
dialogVisible.value = true dialogVisible.value = true
@@ -316,14 +326,9 @@ const open = async (type: 'create' | 'update', id?: number) => {
if (id) { if (id) {
formLoading.value = true formLoading.value = true
try { try {
// 1. 租户基础信息
formData.value = await TenantApi.getTenant(id) formData.value = await TenantApi.getTenant(id)
// 2. 拉取租户用户列表
const res = await getUserByTenant(id) const res = await getUserByTenant(id)
userList.value = res || [] userList.value = res || []
// 3. 默认选中第一个用户(有的话)
if (userList.value.length > 0) { if (userList.value.length > 0) {
userData.value = userList.value[0] userData.value = userList.value[0]
; (userData.value as any).tenantId = formData.value.id ; (userData.value as any).tenantId = formData.value.id
@@ -333,7 +338,6 @@ const open = async (type: 'create' | 'update', id?: number) => {
} }
} }
// 套餐列表
packageList.value = await TenantPackageApi.getTenantPackageList() packageList.value = await TenantPackageApi.getTenantPackageList()
if (userStore.getUser.id === 1) { if (userStore.getUser.id === 1) {
packageAgencyList.value = await TenantPackageApi.getTenantPackageListagency() packageAgencyList.value = await TenantPackageApi.getTenantPackageListagency()
@@ -382,24 +386,21 @@ const resetForm = () => {
password: undefined, password: undefined,
remark: undefined, remark: undefined,
aiExpireTime: undefined, aiExpireTime: undefined,
brotherExpireTime: undefined brotherExpireTime: undefined,
tenantType: undefined,
parentId: undefined
} }
userData.value = {} as any userData.value = {} as any
userList.value = [ userList.value = [{ id: 0, aiChat: 0, bigBrother: 0, crawl: 0 } as any]
{
id: 0, // 重置筛选条件
aiChat: 0,
bigBrother: 0,
crawl: 0
} as any
]
// ⭐ 每次打开弹窗时都清空功能选择
selectedFeatures.value = [] selectedFeatures.value = []
selectedDays.value = null
activePackageCategory.value = 'normal' // 回到默认Tab
formRef.value?.resetFields?.() formRef.value?.resetFields?.()
} }
/** 切换用户 */ /** 切换用户 */
function changeUser(val: number) { function changeUser(val: number) {
userList.value.forEach((item) => { userList.value.forEach((item) => {
@@ -410,18 +411,18 @@ function changeUser(val: number) {
}) })
} }
/** 联动AI 过期时间 -> AI 权限 */ /** 联动逻辑 */
watch( watch(
() => formData.value.aiExpireTime, () => formData.value.aiExpireTime,
(val) => { (val) => {
if (!val && userData.value) { if (!val && userData.value) {
userData.value.aiChat = 0 userData.value.aiChat = 0
userData.value.aiReplay = 0 userData.value.aiReplay = 0
userData.value.webAi = 0
} }
} }
) )
/** 联动:爬大哥过期时间 -> bigBrother 权限 */
watch( watch(
() => formData.value.brotherExpireTime, () => formData.value.brotherExpireTime,
(val) => { (val) => {
@@ -431,35 +432,125 @@ watch(
} }
) )
</script> </script>
<style scoped> <style scoped>
.package-radio-wrapper { /* ================= 卡片与筛选样式 ================= */
margin-top: 10px; .package-selection-container {
} width: 100%;
/* 让按钮自动换行,并留点间隔 */
.package-radio-wrapper :deep(.el-radio-group) {
display: flex; display: flex;
flex-wrap: wrap; flex-direction: column;
gap: 8px; gap: 16px;
} }
/* 美化每个 radio-button 的外观(胶囊 + 内边距) */ .category-tabs {
.package-radio-wrapper :deep(.el-radio-button__inner) { margin-bottom: 4px;
border-radius: 999px; }
padding: 4px 10px;
/* 过滤区域样式 */
.filter-section {
background-color: #f8f9fa;
padding: 12px 16px;
border-radius: 6px;
border: 1px solid #ebeef5;
}
.filter-row {
display: flex;
align-items: center;
}
.filter-label {
font-size: 13px;
color: #606266;
width: 80px;
flex-shrink: 0;
font-weight: 500;
}
/* 卡片网格布局:自适应排列 */
.package-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 16px;
margin-top: 8px;
}
/* 单个套餐卡片 */
.package-card {
position: relative;
background: #ffffff;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
height: 30px; border-radius: 8px;
padding: 16px;
cursor: pointer;
transition: all 0.2s ease;
overflow: hidden;
} }
/* 选中状态可以稍微加粗/加边框Element Plus 自带选中样式,这里可选 */ .package-card:hover {
.package-radio-wrapper :deep(.is-active .el-radio-button__inner) { border-color: #c0c4cc;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
transform: translateY(-2px);
}
/* 选中状态 */
.package-card.is-active {
border-color: #409eff; border-color: #409eff;
background-color: #ecf5ff;
box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.1);
} }
/* 空数据提示 */ /* 选中时的右上角角标 */
.package-empty-tip { .active-badge {
color: #999; position: absolute;
font-size: 12px; top: 0;
margin-top: 5px; right: 0;
width: 0;
height: 0;
border-top: 36px solid #409eff;
border-left: 36px solid transparent;
} }
</style>
.active-badge .el-icon {
position: absolute;
top: -32px;
right: 2px;
color: #fff;
font-size: 14px;
}
/* 卡片内部排版 */
.card-title {
font-size: 14px;
font-weight: bold;
color: #303133;
margin-bottom: 12px;
line-height: 1.4;
height: 40px;
/* 固定高度防止因名称长短不同导致卡片高度不一 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.card-price {
color: #f56c6c;
margin-bottom: 6px;
}
.card-price .currency {
font-size: 14px;
margin-right: 2px;
}
.card-price .amount {
font-size: 24px;
font-weight: bold;
}
.card-desc {
font-size: 12px;
color: #909399;
}
</style>

View File

@@ -55,21 +55,21 @@
</el-form-item> </el-form-item>
<!-- ai回复必须先选AI过期时间 --> <!-- ai回复必须先选AI过期时间 -->
<el-form-item label="AI客户端"> <!-- <el-form-item label="IOS权限>
<el-radio-group v-model="formData.aiClient"> <el-radio-group v-model="formData.aiClient">
<el-radio :value="1">开启</el-radio> <el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio> <el-radio :value="0">关闭</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item> -->
<!-- ai回复必须先选AI过期时间 --> <!-- ai回复必须先选AI过期时间 -->
<el-form-item label="AI回复"> <!-- <el-form-item label="AI回复">
<el-radio-group v-model="formData.aiReplay"> <el-radio-group v-model="formData.aiReplay">
<el-radio :value="1">开启</el-radio> <el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio> <el-radio :value="0">关闭</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item> -->
<!-- WEB回复必须先选AI过期时间 --> <!-- WEB回复必须先选AI过期时间 -->
<el-form-item label="WEB客户端"> <el-form-item label="即时消息">
<el-radio-group v-model="formData.webAi"> <el-radio-group v-model="formData.webAi">
<el-radio :value="1">开启</el-radio> <el-radio :value="1">开启</el-radio>
<el-radio :value="0">关闭</el-radio> <el-radio :value="0">关闭</el-radio>