✨ feat: 更改首页; 新增上传不同规格图片;

src/utils/menu.ts

@@ -32,7 +32,7 @@ export const handleMenu = (menuData: Array<any>) => {
     })
     const menu = [
         {
-            path: '/home', name: 'home', component: '/system/home/index', meta: {
+            path: '/home', name: 'home', component: 'adManage/ad-overview/index', meta: {
                 title: 'message.router.home',
                 isLink: '',
                 isHide: false,

src/views/adManage/sd/campaigns/CreateCampaigns/component/Creativity.vue

@@ -5,22 +5,22 @@
         <span class="custom-card-icon">|</span>
         <span class="custom-card-Text">创意</span>
       </div>
-      <div class="main-container">
+      <div class="main-container" v-loading="createLoading">
         <div class="left-container">
           <p class="left-part-title">请选择您想要自定义商品广告的方式</p>
-          <el-scrollbar height="640px">
+          <el-scrollbar height="655px">
             <div class="demo-collapse">
-              <el-collapse v-model="activeNames" @change="handleCollapseChange" style="border: none">
+              <el-collapse v-model="activeNames" style="border: none">
                 <el-collapse-item title="徽标" name="logo">
                   <div style="display: flex; margin-bottom: 5px">
                     <p style="font-weight: 700; color: #1d2129; margin-right: 8px">品牌标识</p>
                     <el-switch v-model="isOpenLogo" size="small" />
                   </div>
                   <el-upload
-                    v-model:file-list="fileList"
-                    :on-change="changeFile"
-                    v-loading="upLoading"
-                    :on-remove="handleRemove"
+                    v-model:file-list="pictureFileList"
+                    :on-change="changePicture"
+                    v-loading="pictureLoading"
+                    :on-remove="handleRemovePicture"
                     action="#"
                     accept=".png, .jpg"
                     :limit="1"
@@ -34,7 +34,7 @@
                           <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                             <el-icon><zoom-in /></el-icon>
                           </span>
-                          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+                          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemovePicture(file)">
                             <el-icon><Delete /></el-icon>
                           </span>
                         </span>
@@ -46,19 +46,19 @@
                           <span style="line-height: 17px; font-weight: 600; color: #1e2128">徽标要求</span>
                           <!-- <el-button type="primary" :icon="Picture" @click="openDialog">从素材库中选择</el-button> -->
                         </div>
-                        <div class="introduce-item">1、图片大小: 至少600x100像素</div>
+                        <div class="introduce-item">1、图片大小: 600x100 像素</div>
                         <div class="introduce-item">2、文件大小: 小于1MB</div>
                         <div style="display: flex; justify-content: space-between">
                           <span class="introduce-item">3、文件格式: PNG 或 JPG</span>
                           <span style="margin-left: 25px; position: relative">
-                            <el-icon size="14" style="position: absolute; left: -14px; top: 6px"><Link /></el-icon>
+                            <el-icon size="14" style="position: absolute; left: -15px; top: 6px"><Link /></el-icon>
                             <el-link
                               type="primary"
                               :underline="false"
                               href="https://advertising.amazon.com/resources/ad-policy/sponsored-ads-policies#brandlogo"
                               target="_blank"
-                              >查看要求</el-link
-                            >
+                              >查看要求
+                            </el-link>
                           </span>
                         </div>
                       </div>
@@ -70,22 +70,19 @@
                   </el-dialog>
                 </el-collapse-item>
                 <el-collapse-item title="标题" name="title">
-                  <template #title style="position: relative">
-                    <span>标题</span>
-
-                    <el-icon size="14" style="position: absolute; right: 85px"><Link /></el-icon>
+                  <div style="display: flex">
+                    <el-switch v-model="isOpenTitle" style="margin-right: 10px" />
+                    <el-input v-model="titleInp" maxlength="50" show-word-limit placeholder="Please input" type="text" />
+                  </div>
+                  <div style="display: flex; align-items: center; flex-direction: row-reverse">
                     <el-link
                       type="primary"
                       href="https://advertising.amazon.com/resources/ad-policy/creative-acceptance#editorialguidelines"
                       target="_blank"
-                      :underline="false"
-                      style="position: absolute; right: 30px">
+                      :underline="false">
                       查看政策
                     </el-link>
-                  </template>
-                  <div style="display: flex">
-                    <el-switch v-model="isOpenTitle" style="margin-right: 10px" />
-                    <el-input v-model="titleInp" maxlength="50" show-word-limit placeholder="Please input" type="text" />
+                    <el-icon size="14" style="margin-right: 1px"><Link /></el-icon>
                   </div>
                 </el-collapse-item>
                 <el-collapse-item title="图片" name="image">
@@ -94,10 +91,10 @@
                     <el-switch v-model="isOpenPicture" size="small" />
                   </div>
                   <el-upload
-                    v-model:file-list="pictureFile"
-                    :on-change="changePicture"
-                    v-loading="pictureLoading"
-                    :on-remove="handleRemovePicture"
+                    v-model:file-list="pictureFileList2"
+                    :on-change="changePicture2"
+                    v-loading="pictureLoading2"
+                    :on-remove="handleRemovePicture2"
                     action="#"
                     accept=".png, .jpeg, .gif"
                     :limit="1"
@@ -108,10 +105,10 @@
                       <div>
                         <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                         <span class="el-upload-list__item-actions">
-                          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
+                          <span class="el-upload-list__item-preview" @click="handlePicturePreview(file)">
                             <el-icon><zoom-in /></el-icon>
                           </span>
-                          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+                          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemovePicture2()">
                             <el-icon><Delete /></el-icon>
                           </span>
                         </span>
@@ -121,18 +118,49 @@
                       <div style="margin-top: 10px">
                         <div style="display: flex; align-items: center; justify-content: space-between">
                           <span style="line-height: 17px; font-weight: 600; color: #1e2128">徽标要求</span>
-                          <!-- <el-button type="primary" :icon="Picture" @click="openDialog">从素材库中选择</el-button> -->
                         </div>
-                        <div class="introduce-item">1、图片大小: 至少 1200x628 像素</div>
+                        <div class="introduce-item">1、图片大小: 1200x628 像素</div>
                         <div class="introduce-item">2、文件大小: 小于5MB</div>
                         <div class="introduce-item">3、文件格式: PNG, JPEG 或GIF</div>
                         <div class="introduce-item">4、没有在图片上添加文字, 图形或徽标</div>
                       </div>
                     </template>
                   </el-upload>
-                  <!-- 预览弹窗 -->
-                  <el-dialog v-model="dialogVisible">
-                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
+                  <el-dialog v-model="dialogVisible2">
+                    <img w-full :src="dialogImageUrl2" alt="Preview Image" />
+                  </el-dialog>
+                  <!-- 628x628图片上传 -->
+                  <el-divider border-style="dashed" />
+                  <div style="display: flex; margin-bottom: 5px">
+                    <p style="font-weight: 700; color: #1d2129; margin-right: 8px">628x628</p>
+                  </div>
+                  <el-upload
+                    v-model:file-list="pictureFileList3"
+                    :on-change="changePicture3"
+                    v-loading="pictureLoading3"
+                    :on-remove="handleRemovePicture3"
+                    action="#"
+                    accept=".png, .jpeg, .gif"
+                    :limit="1"
+                    list-type="picture-card"
+                    :auto-upload="false">
+                    <el-icon><Plus /></el-icon>
+                    <template #file="{ file }">
+                      <div>
+                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
+                        <span class="el-upload-list__item-actions">
+                          <span class="el-upload-list__item-preview" @click="handlePicturePreview3(file)">
+                            <el-icon><zoom-in /></el-icon>
+                          </span>
+                          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemovePicture3()">
+                            <el-icon><Delete /></el-icon>
+                          </span>
+                        </span>
+                      </div>
+                    </template>
+                  </el-upload>
+                  <el-dialog v-model="dialogVisible3">
+                    <img w-full :src="dialogImageUrl3" alt="Preview Image" />
                   </el-dialog>
                 </el-collapse-item>
               </el-collapse>
@@ -143,7 +171,7 @@
           <div class="preview-title-line">
             <p class="right-part-title">广告预览</p>
             <el-select></el-select>
-            <el-button style="margin-left: 10px">保存</el-button>
+            <el-button style="margin-left: 10px" @click="createCreativity">保存</el-button>
           </div>
         </div>
       </div>
@@ -152,13 +180,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, inject, Ref, onMounted, watch } from 'vue'
-import { Delete, Picture, Plus, ZoomIn } from '@element-plus/icons-vue'
+import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue'
 import type { UploadFile } from 'element-plus'
 import { ElMessage } from 'element-plus'
-import { uploadFile, checkAsset, postCreative } from '../api/index'
-import { useShopInfo } from '/@/stores/shopInfo'
 import { storeToRefs } from 'pinia'
+import { Ref, inject, onMounted, ref } from 'vue'
+import { checkAsset, postCreative, uploadFile } from '../api/index'
+import { useShopInfo } from '/@/stores/shopInfo'
 import emitter from '/@/utils/emitter'
 
 const respAdGroupId = inject<Ref>('respAdGroupId')
@@ -168,30 +196,40 @@ const { profile } = storeToRefs(shopInfo)
 // 折叠面板相关
 const activeNames = ref([''])
 
-function handleCollapseChange(val: string[]) {
-  // console.log(val)
-}
-
 // logo相关
-const fileList = ref([])
-const upLoading = ref(false)
+const pictureFileList = ref([])
+const pictureLoading = ref(false)
 const disabled = ref(false)
 const dialogVisible = ref(false)
 const dialogImageUrl = ref('')
 const centerDialogVisible = ref(false)
 
-function changeFile(file: UploadFile) {
-  handleUpload(file)
+function changePicture(file: UploadFile) {
+  const reader = new FileReader()
+  reader.readAsDataURL(file.raw)
+  reader.onload = (imgInfo: any) => {
+    const img = new Image()
+    img.src = imgInfo.target.result
+    img.onload = () => {
+      if (img.width == 600 && img.height == 100) {
+        handleUpload(file)
+      } else {
+        pictureFileList.value = []
+        ElMessage.error('不符合尺寸要求')
+      }
+    }
+  }
 }
 
-function handleRemove(file: UploadFile) {
-  fileList.value = []
+function handleRemovePicture(file: UploadFile) {
+  pictureFileList.value = []
 }
 
 function handlePictureCardPreview(file: UploadFile) {
   dialogImageUrl.value = file.url!
   dialogVisible.value = true
 }
+
 // 文件上传相关
 const brandEntityId = ref('')
 let brandLogoAssetID = ''
@@ -206,10 +244,10 @@ async function handleUpload(file: UploadFile) {
   formData.append('brandEntityId', brandEntityId.value)
   formData.append('assetType', 'IMAGE')
   formData.append('assetSubTypeList', JSON.stringify(['LOGO']))
-  upLoading.value = true
+  pictureLoading.value = true
   try {
     const response = await uploadFile(formData)
-    brandLogoAssetVersion = response.data.versionId
+    brandLogoAssetVersion = response.data.third.versionId
     const fileName = response.data.file_name
     const obj = {
       profile_id: profile.value.profile_id,
@@ -217,7 +255,6 @@ async function handleUpload(file: UploadFile) {
     }
     const resp = await checkAsset(obj)
     brandLogoAssetID = resp.data.assetId
-
     const { width, height } = resp.data.fileMetadata
     brandLogoCrop = {
       width,
@@ -233,7 +270,7 @@ async function handleUpload(file: UploadFile) {
   } catch (error) {
     console.error('上传失败:', error)
   } finally {
-    upLoading.value = false
+    pictureLoading.value = false
   }
 }
 
@@ -242,23 +279,43 @@ function openDialog() {
   // getAssetsData()
 }
 
-// title相关
+// 标题相关
 const titleInp = ref('')
 const isOpenTitle = ref(false)
 
 // 图片相关
-const pictureFile = ref([])
-const pictureLoading = ref(false)
+const pictureFileList2 = ref([])
+const pictureLoading2 = ref(false)
 const isOpenPicture = ref(false)
-let pictureAssetVersion = ''
-let pictureAssetID = ''
+const dialogVisible2 = ref(false)
+const dialogImageUrl2 = ref('')
+let pictureAssetVersion2 = ''
+let pictureAssetID2 = ''
 
-function changePicture(file: UploadFile) {
-  handleUploadPicture(file)
+function changePicture2(file: UploadFile) {
+  const reader = new FileReader()
+  reader.readAsDataURL(file.raw)
+  reader.onload = (imgInfo: any) => {
+    const img = new Image()
+    img.src = imgInfo.target.result
+    img.onload = () => {
+      if (img.width == 1200 && img.height == 628) {
+        handleUploadPicture(file)
+      } else {
+        pictureFileList2.value = []
+        ElMessage.error('不符合尺寸要求')
+      }
+    }
+  }
 }
 
-function handleRemovePicture(file: UploadFile) {
-  fileList.value = []
+function handleRemovePicture2() {
+  pictureFileList2.value = []
+}
+
+function handlePicturePreview(file: UploadFile) {
+  dialogImageUrl2.value = file.url!
+  dialogVisible2.value = true
 }
 
 async function handleUploadPicture(file: UploadFile) {
@@ -268,25 +325,82 @@ async function handleUploadPicture(file: UploadFile) {
   formData.append('brandEntityId', brandEntityId.value)
   formData.append('assetType', 'IMAGE')
   formData.append('assetSubTypeList', JSON.stringify(['LOGO']))
-  upLoading.value = true
+  pictureLoading2.value = true
   try {
     const response = await uploadFile(formData)
-    pictureAssetVersion = response.data.versionId
+    pictureAssetVersion2 = response.data.third.versionId
     const fileName = response.data.file_name
     const obj = {
       profile_id: profile.value.profile_id,
       file_name: fileName,
     }
     const resp = await checkAsset(obj)
-    pictureAssetID = resp.data.assetId
+    pictureAssetID2 = resp.data.assetId
 
-    const { width, height } = resp.data.fileMetadata
-    brandLogoCrop = {
-      width,
-      height,
-      top: 0,
-      left: 0,
+    if (resp.data.checkresult == 'success') {
+      ElMessage({ message: '上传成功', type: 'success' })
+    } else {
+      ElMessage.error('上传失败')
     }
+  } catch (error) {
+    console.error('上传失败:', error)
+  } finally {
+    pictureLoading2.value = false
+  }
+}
+
+const pictureFileList3 = ref([])
+const pictureLoading3 = ref()
+const dialogVisible3 = ref(false)
+const dialogImageUrl3 = ref('')
+let pictureAssetVersion3 = ''
+let pictureAssetID3 = ''
+
+function changePicture3(file: UploadFile) {
+  const reader = new FileReader()
+  reader.readAsDataURL(file.raw)
+  reader.onload = (imgInfo: any) => {
+    const img = new Image()
+    img.src = imgInfo.target.result
+    img.onload = () => {
+      // console.log(img.width, img.height)
+      if (img.width == 628 && img.height == 628) {
+        handleUploadPicture3(file)
+      } else {
+        pictureFileList3.value = []
+        ElMessage.error('不符合尺寸要求')
+      }
+    }
+  }
+}
+
+function handleRemovePicture3() {
+  pictureFileList3.value = []
+}
+
+function handlePicturePreview3(file: UploadFile) {
+  dialogImageUrl3.value = file.url!
+  dialogVisible3.value = true
+}
+
+async function handleUploadPicture3(file: UploadFile) {
+  const formData = new FormData()
+  formData.append('file', file.raw)
+  formData.append('profile_id', profile.value.profile_id)
+  formData.append('brandEntityId', brandEntityId.value)
+  formData.append('assetType', 'IMAGE')
+  formData.append('assetSubTypeList', JSON.stringify(['LOGO']))
+  pictureLoading3.value = true
+  try {
+    const response = await uploadFile(formData)
+    pictureAssetVersion3 = response.data.third.versionId
+    const fileName = response.data.file_name
+    const obj = {
+      profile_id: profile.value.profile_id,
+      file_name: fileName,
+    }
+    const resp = await checkAsset(obj)
+    pictureAssetID3 = resp.data.assetId
     if (resp.data.checkresult == 'success') {
       ElMessage({ message: '上传成功', type: 'success' })
     } else {
@@ -295,10 +409,11 @@ async function handleUploadPicture(file: UploadFile) {
   } catch (error) {
     console.error('上传失败:', error)
   } finally {
-    upLoading.value = false
+    pictureLoading3.value = false
   }
 }
 
+// 创建创意相关
 const createLoading = ref(false)
 
 async function createCreativity() {
@@ -309,15 +424,15 @@ async function createCreativity() {
     properties_logo: isOpenLogo.value,
     properties_head: isOpenTitle.value,
     properties_custom: isOpenPicture.value,
-    headline: '',
-    brandLogo_assetId: '',
-    brandLogo_assetVersion: '',
+    headline: titleInp.value,
+    brandLogo_assetId: brandLogoAssetID,
+    brandLogo_assetVersion: brandLogoAssetVersion,
     brandLogo_croppingCoordinates: brandLogoCrop,
-    contentType: '',
-    rectCustomImage_assetId: '',
-    rectCustomImage_assetVersion: '',
-    squareCustomImage_assetId: '',
-    squareCustomImage_assetVersion: '',
+    // contentType: '',
+    rectCustomImage_assetId: pictureAssetID2,
+    rectCustomImage_assetVersion: pictureAssetVersion2,
+    squareCustomImage_assetId: pictureAssetID3,
+    squareCustomImage_assetVersion: pictureAssetVersion3,
   }
   try {
     const response = await postCreative(obj)