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

9 months ago · 0db7f03a55
3 changed files with 119 additions and 45 deletions
--- a/src/components/UploadFile/src/UploadImg.vue
+++ b/src/components/UploadFile/src/UploadImg.vue
@ -265,7 +265,7 @@ const uploadError = () => {

  .el-upload__tip {
    line-height: 18px;
-    text-align: center;
+    text-align: left;
  }
 }
 </style>
--- a/src/views/Banner/BannerForm.vue
+++ b/src/views/Banner/BannerForm.vue
@ -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-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>
@ -60,7 +74,7 @@ const formData = ref({
  twoScreen: undefined,
  threeScreen: undefined,
  fourScreen: undefined,
-  category: undefined,
+  category: undefined
 })
 const formRef = ref() // 表单 Ref
 const birthdayCategory = [
@ -101,7 +115,7 @@ const formItemList = computed(()=>{
        prop: 'category',
        rules: { required: true, trigger: 'change', message: '请选择类型' },
        type: 'select',
-        selectData: birthdayCategory,
+        selectData: birthdayCategory
      },
      {
        label: '祝福标题',
@ -118,7 +132,13 @@ const formItemList = computed(()=>{
      { 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: 'images',
+        type: 'image',
+        limit: 6,
+        hide: formData.value.category === 1
+      }
    ],
    4: [
      {
@ -129,10 +149,42 @@ const formItemList = computed(()=>{
        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: '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) => {
--- a/src/views/Board/components/welcome.vue
+++ b/src/views/Board/components/welcome.vue
@ -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 {