ZhanTing
/
ZhangTing_web
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

分屏不缩放图片，提示建议分辨率

master
py 9 months ago
parent
4e67a6d983
commit
0db7f03a55
3 changed files with 119 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/components/UploadFile/src/UploadImg.vue
  2. 157
      src/views/Banner/BannerForm.vue
  3. 5
      src/views/Board/components/welcome.vue

2
src/components/UploadFile/src/UploadImg.vue
View File

@ -265,7 +265,7 @@ const uploadError = () => {
.el-upload__tip {
line-height: 18px;
text-align: center;
text-align: left;
}
}
</style>

157
src/views/Banner/BannerForm.vue
View File

@ -1,18 +1,24 @@
<template>
<Dialog v-model="dialogVisible" :title="title">
<el-form
ref="formRef"
v-loading="formLoading"
:model="formData"
label-width="80px"
>
<el-form ref="formRef" v-loading="formLoading" :model="formData" label-width="80px">
<el-form-item label="名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入名称" clearable/>
<el-input v-model="formData.name" placeholder="请输入名称" clearable />
</el-form-item>
<template v-for="item in formShowItem" :key="item.prop">
<el-form-item :label="item.label" :prop="item.prop" :rules="item.rules" v-if="!item.hide || item.show">
<el-form-item
:label="item.label"
:prop="item.prop"
:rules="item.rules"
v-if="!item.hide || item.show"
>
<div v-if="item.prop === 'barrage'" class="barrage">
<el-input v-model="formData[item.prop]" placeholder="请输入" type="textarea" clearable :rows="5"/>
<el-input
v-model="formData[item.prop]"
placeholder="请输入"
type="textarea"
clearable
:rows="5"
/>
<el-button v-loading="AILoading" type="text" @click="getAIContent">AI生成</el-button>
</div>
<el-select v-model="formData[item.prop]" v-else-if="item.type === 'select'">
@ -28,8 +34,16 @@
v-model="formData[item.prop]"
:limit="item.limit || 1"
:fileSize="item.size || 20"
>
<template #tip>
{{ item.tip }}
</template>
</UploadImgs>
<el-input
v-else
v-model="formData[item.prop]"
:placeholder="item.placeholder || '请输入'"
/>
<el-input v-else v-model="formData[item.prop]" :placeholder="item.placeholder || '请输入'" />
</el-form-item>
</template>
</el-form>
@ -42,7 +56,7 @@
<script lang="ts" setup>
import * as BannerApi from '@/api/banner'
defineOptions({name: 'BannerForm'})
defineOptions({ name: 'BannerForm' })
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：提交的按钮禁用
const AILoading = ref(false) // AI生成弹幕
@ -60,18 +74,18 @@ const formData = ref({
twoScreen: undefined,
threeScreen: undefined,
fourScreen: undefined,
category: undefined,
category: undefined
})
const formRef = ref() // 表单 Ref
const birthdayCategory = [
{label: '海报', value: 1},
{label: '模板', value: 2}
{ label: '海报', value: 1 },
{ label: '模板', value: 2 }
]
const dataCategory = [
{label: '全屏', value: 1},
{label: '二分屏', value: 2},
{label: '三分屏', value: 3},
{label: '四分屏', value: 4}
{ label: '全屏', value: 1 },
{ label: '二分屏', value: 2 },
{ label: '三分屏', value: 3 },
{ label: '四分屏', value: 4 }
]
const typeTextData = {
1: '欢迎页',
@ -79,60 +93,98 @@ const typeTextData = {
3: '生日祝福',
4: '数据展示'
}
const formItemList = computed(()=>{
const formItemList = computed(() => {
return {
1: [
{
label: '欢迎标题',
prop: 'title',
rules: {required: true, trigger: 'blur', message: '请填写欢迎标题'}
rules: { required: true, trigger: 'blur', message: '请填写欢迎标题' }
},
{
label: '欢迎内容',
prop: 'content',
rules: {required: true, trigger: 'blur', message: '请填写欢迎内容'}
rules: { required: true, trigger: 'blur', message: '请填写欢迎内容' }
},
{label: '背景图片', prop: 'backgroundImages', type: 'image'}
{ label: '背景图片', prop: 'backgroundImages', type: 'image' }
],
2: [{label: '背景图片', prop: 'backgroundImages', type: 'image', limit: 4}],
2: [{ label: '背景图片', prop: 'backgroundImages', type: 'image', limit: 4 }],
3: [
{
label: '类型',
prop: 'category',
rules: {required: true, trigger: 'change', message: '请选择类型'},
rules: { required: true, trigger: 'change', message: '请选择类型' },
type: 'select',
selectData: birthdayCategory,
selectData: birthdayCategory
},
{
label: '祝福标题',
prop: 'title',
rules: {required: true, trigger: 'blur', message: '请填写祝福标题'},
hide:formData.value.category === 1
rules: { required: true, trigger: 'blur', message: '请填写祝福标题' },
hide: formData.value.category === 1
},
{
label: '祝福语',
prop: 'content',
rules: {required: true, trigger: 'blur', message: '请填写祝福语'},
hide:formData.value.category === 1
rules: { required: true, trigger: 'blur', message: '请填写祝福语' },
hide: formData.value.category === 1
},
{label: '姓名', prop: 'fullName',placeholder:'格式：张三，李四，xx'},
{label: '祝福弹幕', prop: 'barrage', type: 'textarea'},
{label: '背景图片', prop: 'backgroundImages', type: 'image',limit: 4},
{label: '个人图片', prop: 'images', type: 'image', limit: 6, hide:formData.value.category === 1},
{ label: '姓名', prop: 'fullName', placeholder: '格式：张三，李四，xx' },
{ label: '祝福弹幕', prop: 'barrage', type: 'textarea' },
{ label: '背景图片', prop: 'backgroundImages', type: 'image', limit: 4 },
{
label: '个人图片',
prop: 'images',
type: 'image',
limit: 6,
hide: formData.value.category === 1
}
],
4: [
{
label: '类型',
prop: 'category',
rules: {required: true, trigger: 'change', message: '请选择类型'},
rules: { required: true, trigger: 'change', message: '请选择类型' },
type: 'select',
selectData: dataCategory
},
{label: '背景图片', prop: 'backgroundImages', type: 'image'},
{label: '一屏', prop: 'oneScreen', type: 'image', limit: 6,hide:true,show:true},
{label: '二屏', prop: 'twoScreen', type: 'image', limit: 6,hide:true,show:formData.value.category >= 2},
{label: '三屏', prop: 'threeScreen', type: 'image', limit: 6,hide:true,show:formData.value.category >= 3},
{label: '四屏', prop: 'fourScreen', type: 'image', limit: 6,hide:true,show:formData.value.category >= 4}
{ label: '背景图片', prop: 'backgroundImages', type: 'image' },
{
label: '一屏',
prop: 'oneScreen',
type: 'image',
limit: 6,
hide: true,
show: true,
tip: setRatioTip(1)
},
{
label: '二屏',
prop: 'twoScreen',
type: 'image',
limit: 6,
hide: true,
show: formData.value.category >= 2,
tip: setRatioTip(2)
},
{
label: '三屏',
prop: 'threeScreen',
type: 'image',
limit: 6,
hide: true,
show: formData.value.category >= 3,
tip: setRatioTip(3)
},
{
label: '四屏',
prop: 'fourScreen',
type: 'image',
limit: 6,
hide: true,
show: formData.value.category >= 4,
tip: setRatioTip(4)
}
]
}
})
@ -145,17 +197,36 @@ const formShowItem = computed(() => {
return formItemList.value[formData.value.type]
})
const setRatioTip = (type) => {
const tip = '图片分辨率建议'
let value = '1800*960'
if (type === 1) {
if (formData.value.category === 1) value = '1800*960'
else if (formData.value.category === 2) value = '1800*460'
else value = '960*460'
}else if(type === 2){
if (formData.value.category === 2) value = '1800*460'
else value = '960*460'
}else if(type === 3){
if (formData.value.category === 3) value = '1800*460'
else value = '960*460'
}else {
value = '960*460'
}
return tip + value
}
const getAIContent = async () => {
if (AILoading.value) return
try {
AILoading.value = true
const res = await BannerApi.getContentBanner(`帮我生成生日祝福语带上姓名，姓名叫${formData.value.fullName}，返回数组格式，一个大数组，嵌套2个数组存放所有祝福语，一人两条祝福，两个数组各一条，前面加个类似🎉 🌼 🎂 🎈 🌟 💐 这种小图标，其余字符全部不要。`)
const res = await BannerApi.getContentBanner(
`帮我生成生日祝福语带上姓名，姓名叫${formData.value.fullName}，返回数组格式，一个大数组，嵌套2个数组存放所有祝福语，一人两条祝福，两个数组各一条，前面加个类似🎉 🌼 🎂 🎈 🌟 💐 这种小图标，其余字符全部不要。`
)
formData.value.barrage = res
AILoading.value = false
} catch {
AILoading.value = false
}
}
/** 打开弹窗 */
const open = async (type: number, id: any) => {
@ -167,7 +238,7 @@ const open = async (type: number, id: any) => {
}
dialogVisible.value = true
}
defineExpose({open}) // 提供 open 方法，用于打开弹窗
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const submitForm = async () => {
@ -208,7 +279,7 @@ const resetForm = () => {
twoScreen: undefined,
threeScreen: undefined,
fourScreen: undefined,
category:undefined
category: undefined
}
formRef.value?.resetFields()
}

5
src/views/Board/components/welcome.vue
View File

@ -48,7 +48,7 @@
>
<swiper-slide v-for="(slide, index) in boardData[item.prop] || []" :key="index">
<div class="swiper-slide-box">
<img :src="slide" alt="图片" />
<img class="screen-swiper-img" :src="slide" alt="图片" />
</div>
</swiper-slide>
</swiper>
@ -157,6 +157,9 @@ watch(
width: 100%;
height: 100%;
}
.screen-swiper-img{
object-fit:contain;
}
}
.text-box {

Write Preview
Loading…
Cancel
Save