gxwebsoft/mp-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(cmsAd): 添加广告标题功能支持

Browse Source 
-为轮播、单图和视频类型广告添加独立的标题输入框
- 调整表单字段顺序，标题输入框位于链接之上
- 更新数据结构，支持每项图片/视频的标题和链接独立设置
-优化界面布局，使用条件渲染仅在有文件时显示相关表单项
- 移除有问题的 TypeScript 类型声明，保持表单验证功能
- 保持与现有数据结构的向后兼容性
- 支持多图片各自独立的标题和链接设置
- 添加初始化标题和链接为空字符串的逻辑
This commit is contained in:
赵忠林
2025-09-26 11:28:38 +08:00
parent 53932fab72
commit d3e37951c8
8 changed files with 181 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/views/cms/cmsAd/components/cmsAdEdit.vue
View File

@@ -19,15 +19,6 @@
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
"
>
<a-form-item label="名称" name="name">
<a-input
allow-clear
:maxlength="100"
style="width: 500px"
placeholder="请输入广告名称"
v-model:value="form.name"
/>
</a-form-item>
<a-form-item label="类型" name="type">
<a-radio-group
v-model:value="form.type"
@@ -40,6 +31,24 @@
<a-radio :value="4">文本</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="名称" name="name">
<a-input
allow-clear
:maxlength="100"
style="width: 500px"
placeholder="请输入广告名称"
v-model:value="form.name"
/>
</a-form-item>
<a-form-item label="唯一标识" name="code">
<a-input
allow-clear
:maxlength="100"
style="width: 500px"
placeholder="请输入广告唯一标识"
v-model:value="form.code"
/>
</a-form-item>
<template v-if="form.type == 1">
<a-form-item label="多图" name="images">
<div :class="`item-style ${form.style}`">
@@ -51,8 +60,12 @@
@del="onDeleteItem"
/>
</div>
<a-space class="flex flex-col gap-2">
<div class="w-[500px]" v-for="(_, index) in images" :key="index">
<a-space class="flex flex-col gap-2 mt-2">
<div class="w-[500px] space-y-2" v-for="(_, index) in images" :key="index">
<a-input
v-model:value="images[index].title"
placeholder="请输入图片标题"
/>
<a-input
v-model:value="images[index].path"
placeholder="https://"
@@ -72,6 +85,20 @@
/>
</div>
</a-form-item>
<a-form-item label="图片标题" name="title" v-if="images.length > 0">
<a-input
v-model:value="images[0].title"
placeholder="请输入图片标题"
style="width: 500px"
/>
</a-form-item>
<a-form-item label="图片链接" name="path" v-if="images.length > 0">
<a-input
v-model:value="images[0].path"
placeholder="https://"
style="width: 500px"
/>
</a-form-item>
</template>
<template v-if="form.type == 3">
<a-form-item
@@ -89,6 +116,20 @@
/>
</div>
</a-form-item>
<a-form-item label="视频标题" name="title" v-if="images.length > 0">
<a-input
v-model:value="images[0].title"
placeholder="请输入视频标题"
style="width: 500px"
/>
</a-form-item>
<a-form-item label="视频链接" name="path" v-if="images.length > 0">
<a-input
v-model:value="images[0].path"
placeholder="https://"
style="width: 500px"
/>
</a-form-item>
</template>
<template v-if="form.type == 4">
<a-form-item
@@ -143,24 +184,15 @@
@change="onCategoryId"
/>
</a-form-item>
<a-form-item label="唯一标识" name="code">
<a-form-item label="style" name="style">
<a-input
allow-clear
:maxlength="100"
style="width: 500px"
placeholder="请输入广告唯一标识"
v-model:value="form.code"
/>
</a-form-item>
<a-form-item label="样式" name="style">
<a-input
allow-clear
placeholder="w-full border-solid border-gray-800 p-2 shadow-lg rounded-lg my-10"
placeholder="font-bold text-red-500"
v-model:value="form.style"
/>
<div class="pt-2 none">
<a class="text-sm text-gray-400" href="https://tailwindcss.com/docs/padding" target="_blank">Tailwind
Css使用教程</a>
tailwindcss使用说明</a>
</div>
</a-form-item>
<a-form-item label="描述" name="comments" v-if="form.type != 4">
@@ -197,7 +229,7 @@ import {addCmsAd, updateCmsAd} from '@/api/cms/cmsAd';
import {CmsAd} from '@/api/cms/cmsAd/model';
import {useThemeStore} from '@/store/modules/theme';
import {storeToRefs} from 'pinia';
import {FormInstance, type Rule} from 'ant-design-vue/es/form';
import {FormInstance} from 'ant-design-vue/es/form';
import {useI18n} from 'vue-i18n';
import {FileRecord} from '@/api/system/file/model';
import {CmsNavigation} from "@/api/cms/cmsNavigation/model";
@@ -260,11 +292,10 @@ const updateVisible = (value: boolean) => {
};
// 表单验证规则
const rules = reactive({
const rules = {
name: [
{
required: true,
type: 'string',
message: '请输入标题',
trigger: 'blur'
}
@@ -272,7 +303,6 @@ const rules = reactive({
type: [
{
required: true,
type: 'number',
message: '请选择类型',
trigger: 'blur'
}
@@ -280,10 +310,9 @@ const rules = reactive({
images: [
{
required: true,
type: 'string',
message: '请上传图片或视频',
trigger: 'blur',
validator: (_rule: Rule, _: string) => {
validator: (_rule: any, _: string) => {
return new Promise<void>((resolve, reject) => {
if (images.value.length == 0) {
return reject('请上传图片或视频文件');
@@ -293,7 +322,7 @@ const rules = reactive({
}
}
]
});
};
const {resetFields} = useForm(form, rules);
@@ -301,7 +330,9 @@ const chooseFile = (data: FileRecord) => {
images.value.push({
uid: data.id,
url: data.downloadUrl + '?x-oss-process=image/resize,m_fixed,w_2000/quality,Q_90',
status: 'done'
status: 'done',
title: '', // 初始化标题为空
path: '' // 初始化链接为空
});
form.images = data.downloadUrl + '?x-oss-process=image/resize,m_fixed,w_2000/quality,Q_90';
};

5
src/views/cms/cmsAd/index.vue
View File

@@ -27,8 +27,9 @@
<a-tag v-if="record.type == 3" color="cyan">视频</a-tag>
<a-tag v-if="record.type == 4">文本</a-tag>
</template>
<template v-if="column.key === 'pageId'">
<span class="text-gray-400">{{ record.pageName }}</span>
<template v-if="column.key === 'name'">
<div>{{ record.name }}</div>
<div class="text-gray-400">{{ record.code }}</div>
</template>
<template v-if="column.key === 'categoryId'">
<span class="text-gray-400">{{ record.categoryName }}</span>

4
src/views/cms/cmsModel/components/cmsModelEdit.vue
View File

@@ -84,10 +84,10 @@
/>
</a-space>
</a-form-item>
<a-form-item label="CSS样式" name="style">
<a-form-item label="style" name="style">
<a-input
allow-clear
placeholder="CSS样式"
placeholder="style"
v-model:value="form.style"
/>
<div class="pt-2">

2
src/views/cms/cmsNavigation/components/design-edit.vue
View File

@@ -64,7 +64,7 @@
<a-textarea
:rows="4"
:maxlength="200"
placeholder="CSS样式"
placeholder="style"
v-model:value="form.style"
/>
<a class="text-sm text-gray-400" href="https://www.tailwindcss.cn/docs/installation" target="_blank">Tailwind Css使用教程</a>

4
src/views/cms/cmsWebsiteField/components/cmsWebsiteFieldEdit.vue
View File

@@ -62,10 +62,10 @@
v-model:value="form.comments"
/>
</a-form-item>
<a-form-item label="css样式" name="style">
<a-form-item label="style" name="style">
<a-input
allow-clear
placeholder="请输入css样式"
placeholder="style"
v-model:value="form.style"
/>
</a-form-item>

4
src/views/cms/cmsWebsiteField/components/edit.vue
View File

@@ -86,10 +86,10 @@
v-model:value="form.comments"
/>
</a-form-item>
<a-form-item label="CSS样式" name="style">
<a-form-item label="style" name="style">
<a-input
allow-clear
placeholder="CSS样式"
placeholder="style"
v-model:value="form.style"
/>
<div class="pt-2">

4
src/views/system/field/components/edit.vue
View File

@@ -41,11 +41,11 @@
v-model:value="form.value"
/>
</a-form-item>
<a-form-item label="css样式" name="style">
<a-form-item label="style" name="style">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="css样式"
placeholder="style"
v-model:value="form.style"
/>
</a-form-item>