✨ feat: 广告管理: [品牌推广SB] 新增广告格式图片以及样式修改

src/views/adManage/sb/campaigns/CreateCampaigns/component/AdFormat.vue

@@ -1,136 +1,3 @@
-<template>
-  <div class="customize-container">
-    <el-card body-style="padding: 20px 80px 20px 80px;">
-      <div style="font-weight: 700; padding-bottom: 18px">
-        <span style="color: #306cd7; font-size: 26px">|</span>
-        <span style="font-size: 18px; padding-left: 5px">广告格式</span>
-      </div>
-      <div class="ad-format-radios">
-        <el-radio-group v-model="adFormatRadio" style="display: flex; justify-content: space-between">
-          <el-radio class="ad-format-radio" label="productSet" border>
-            <div style="text-align: center; color: #333333">商品集</div>
-            <!-- TODO: 待添加图片 -->
-            <!-- <img src="src/views/adManage/sb/campaigns/CreateCampaigns/img/img_1.jpg" class="img-style"> -->
-            <div style="background-color: #1e2128; width: 300px; height: 200px; margin: 0 auto"></div>
-            <div style="padding: 5px 0 10px 0; color: #333333; font-weight: 400">使用图片将流量引导至商品详情页面, 以推广多件商品</div>
-          </el-radio>
-          <el-radio class="ad-format-radio" label="focus" border>
-            <div style="text-align: center; color: #333333">品牌旗舰店焦点</div>
-            <div style="background-color: #4c649d; width: 200px; height: 200px; margin: 0 auto"></div>
-            <div style="padding: 5px 0 10px 0; color: #333333; font-weight: 400">将流量引流到品牌旗舰店, 包括子页面</div>
-          </el-radio>
-          <el-radio class="ad-format-radio" label="video" border>
-            <div style="text-align: center; color: #333333">视频</div>
-            <div style="background-color: #43abc3; width: 200px; height: 200px; margin: 0 auto"></div>
-            <div style="padding: 5px 0 10px 0; color: #333333; font-weight: 400">
-              使用视频宣传您的品牌或产品, 将流量吸引至您的品牌旗舰店或商品详情页
-            </div>
-          </el-radio>
-        </el-radio-group>
-      </div>
-      <div class="customize-font" v-if="adFormatRadio === 'productSet'">需要帮助创建图片或品牌旗舰店？</div>
-      <div class="customize-font" v-if="adFormatRadio === 'focus'">在创建或编辑品牌旗舰店时需要帮助？</div>
-      <div class="customize-font" v-if="adFormatRadio === 'video'">在创建或编辑视频时需要帮助？</div>
-
-      <div style="display: flex; align-items: center; margin: 20px 0 5px 0">
-        <div style="color: #616266; font-weight: 450">着陆页</div>
-        <el-tooltip content="顾客在与您的广告互动后将被引导至着陆页" placement="top">
-          <el-icon color="#616266"><InfoFilled /></el-icon>
-        </el-tooltip>
-      </div>
-
-      <div class="land-Page" v-if="adFormatRadio === 'productSet' || adFormatRadio === 'video'">
-        <el-radio-group v-model="arrivalsRadio" style="display: flex; justify-content: space-between">
-          <el-radio label="flagshipStore" border style="height: auto; width: 100%; flex: 2; align-items: flex-start; padding: 15px 10px 0 10px">
-            <div>亚马逊品牌旗舰店(包括子页面)</div>
-            <div>
-              <el-form
-                ref="ruleFormRef"
-                :model="ruleForm"
-                :rules="rules"
-                label-position="top"
-                label-width="120px"
-                class="demo-ruleForm"
-                size="default"
-                status-icon>
-                <div style="display: flex; margin-top: 10px">
-                  <el-form-item label="选择一个店铺" prop="shop" style="width: 48%; margin-right: 10px">
-                    <el-select
-                      v-model="ruleForm.shop"
-                      clearable
-                      style="width: 100%"
-                      @change="shopChanged"
-                      @blur="validateField('shop')"
-                      :disabled="arrivalsRadio == 'newArrivals' || arrivalsRadio == 'productDetailsPage'">
-                      <el-option v-for="item in shopOptions" :key="item.value" :label="item.label" :value="item.value" />
-                    </el-select>
-                  </el-form-item>
-                  <el-form-item label="选择一个页面" prop="page" style="width: 48%">
-                    <el-select
-                      v-model="ruleForm.page"
-                      clearable
-                      style="width: 100%"
-                      @blur="validateField('page')"
-                      :disabled="arrivalsRadio == 'newArrivals' || arrivalsRadio == 'productDetailsPage'">
-                      <el-option v-for="item in pageOptions" :key="item.storePageId" :label="item.storePageName" :value="item.storePageUrl" />
-                    </el-select>
-                  </el-form-item>
-                </div>
-              </el-form>
-            </div>
-          </el-radio>
-          <el-radio class="land-page-radio" label="newArrivals" border v-if="adFormatRadio === 'productSet'">
-            <div>新着陆页</div>
-            <div>选择要推广的商品, 我们将为您创建一个落地页</div>
-          </el-radio>
-          <el-radio class="land-page-radio" label="productDetailsPage" border v-if="adFormatRadio === 'video'">
-            <div>商品详情页</div>
-          </el-radio>
-        </el-radio-group>
-      </div>
-
-      <div v-if="adFormatRadio === 'focus'">
-        <p style="padding: 10px 0 15px 0">亚马逊上的品牌旗舰店(必须有4个或更多页面, 每个页面有1个或更多独特的商品)</p>
-        <el-form
-          ref="flagshipStoreRuleFormRef2"
-          :model="flagshipStoreRuleForm2"
-          :rules="flagshipStoreRules2"
-          label-position="top"
-          label-width="120px"
-          class="demo-ruleForm"
-          size="default"
-          status-icon>
-          <el-form-item label="选择一个店铺" prop="focusShop">
-            <el-select
-              v-model="flagshipStoreRuleForm2.focusShop"
-              clearable
-              @blur="validateField2('focusShop')"
-              style="padding-top: 10px; margin-top: -15px; width: 500px">
-              <el-option v-for="item in focusShopOptions" :key="item.brandId" :label="item.brandRegistryName" :value="item.brandEntityId" />
-            </el-select>
-          </el-form-item>
-        </el-form>
-      </div>
-
-      <div>
-        <div
-          style="font-weight: 700; padding: 20px 0 10px 0"
-          v-if="
-            (adFormatRadio === 'productSet' && arrivalsRadio === 'newArrivals') ||
-            (adFormatRadio === 'video' && arrivalsRadio === 'productDetailsPage')
-          ">
-          <span style="color: #306cd7; font-size: 26px">|</span>
-          <span style="font-size: 18px; padding-left: 5px">商品</span>
-        </div>
-        <ProductSetCommodity v-if="adFormatRadio === 'productSet' && arrivalsRadio === 'newArrivals'"></ProductSetCommodity>
-        <VideoCommodity
-          @update-added-data="handleUpdateAddedData"
-          v-if="adFormatRadio === 'video' && arrivalsRadio === 'productDetailsPage'"></VideoCommodity>
-      </div>
-    </el-card>
-  </div>
-</template>
-
 <script setup lang="ts">
 import type { FormInstance, FormRules } from 'element-plus'
 import { storeToRefs } from 'pinia'
@@ -140,6 +7,9 @@ import ProductSetCommodity from '../component/ProductSetCommodity.vue'
 import VideoCommodity from '../component/VideoCommodity.vue'
 import { useShopInfo } from '/@/stores/shopInfo'
 import emitter from '/@/utils/emitter'
+import Product from '/@/assets/product.png'
+import Shop from '/@/assets/Shop.png'
+import Video from '/@/assets/video.png'
 
 const shopInfo = useShopInfo()
 const { profile } = storeToRefs(shopInfo)
@@ -319,7 +189,150 @@ onMounted(() => {
 })
 </script>
 
+<template>
+  <div class="customize-container">
+    <el-card body-style="padding: 20px 80px 20px 80px;">
+      <div class="custom-card-title-content">
+        <span class="custom-fake-icon">|</span>
+        <span class="custom-card-title">广告格式</span>
+      </div>
+      <div class="ad-format-radios">
+        <el-radio-group v-model="adFormatRadio" class="ad-format-radio-group">
+          <el-radio class="ad-format-radio" label="productSet" border>
+            <div class="ad-format-radio-content">
+              <div class="ad-format-radio-title">商品集</div>
+              <img :src="Product" class="ad-format-radio-img" />
+              <!-- <div style="background-color: #1e2128; width: 300px; height: 200px; margin: 0 auto"></div> -->
+              <div class="ad-format-radio-desc">使用图片将流量引导至商品详情页面, 以推广多件商品</div>
+            </div>
+          </el-radio>
+          <el-radio class="ad-format-radio" label="focus" border>
+            <div class="ad-format-radio-content">
+              <div class="ad-format-radio-title">品牌旗舰店焦点</div>
+              <img :src="Shop" class="ad-format-radio-img" />
+              <!-- <div style="background-color: #4c649d; width: 200px; height: 200px; margin: 0 auto"></div> -->
+              <div class="ad-format-radio-desc">将流量引流到品牌旗舰店, 包括子页</div>
+            </div>
+          </el-radio>
+          <el-radio class="ad-format-radio" label="video" border>
+            <div class="ad-format-radio-content">
+              <div class="ad-format-radio-title">视频</div>
+              <img :src="Video" class="ad-format-radio-img" />
+              <!-- <div style="background-color: #43abc3; width: 200px; height: 200px; margin: 0 auto"></div> -->
+              <div class="ad-format-radio-desc">使用视频宣传您的品牌或产品, 将流量吸引至您的品牌旗舰店或商品详情页</div>
+            </div>
+          </el-radio>
+        </el-radio-group>
+      </div>
+      <div class="customize-font" v-if="adFormatRadio === 'productSet'">需要帮助创建图片或品牌旗舰店？</div>
+      <div class="customize-font" v-if="adFormatRadio === 'focus'">在创建或编辑品牌旗舰店时需要帮助？</div>
+      <div class="customize-font" v-if="adFormatRadio === 'video'">在创建或编辑视频时需要帮助？</div>
+
+      <div class="custom-hint">
+        <div class="custom-hint-title">着陆页</div>
+        <el-tooltip content="顾客在与您的广告互动后将被引导至着陆页" placement="top">
+          <el-icon color="#616266"><InfoFilled /></el-icon>
+        </el-tooltip>
+      </div>
+
+      <div class="land-Page" v-if="adFormatRadio === 'productSet' || adFormatRadio === 'video'">
+        <el-radio-group v-model="arrivalsRadio" class="ad-format-radio-group">
+          <el-radio label="flagshipStore" border class="flagshipStore-radio">
+            <div>亚马逊品牌旗舰店(包括子页面)</div>
+            <div>
+              <el-form
+                ref="ruleFormRef"
+                :model="ruleForm"
+                :rules="rules"
+                label-position="top"
+                label-width="120px"
+                class="demo-ruleForm"
+                size="default"
+                status-icon>
+                <div style="display: flex; margin-top: 10px">
+                  <el-form-item label="选择一个店铺" prop="shop" style="width: 48%; margin-right: 10px">
+                    <el-select
+                      v-model="ruleForm.shop"
+                      clearable
+                      style="width: 100%"
+                      @change="shopChanged"
+                      @blur="validateField('shop')"
+                      :disabled="arrivalsRadio == 'newArrivals' || arrivalsRadio == 'productDetailsPage'">
+                      <el-option v-for="item in shopOptions" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="选择一个页面" prop="page" style="width: 48%">
+                    <el-select
+                      v-model="ruleForm.page"
+                      clearable
+                      style="width: 100%"
+                      @blur="validateField('page')"
+                      :disabled="arrivalsRadio == 'newArrivals' || arrivalsRadio == 'productDetailsPage'">
+                      <el-option v-for="item in pageOptions" :key="item.storePageId" :label="item.storePageName" :value="item.storePageUrl" />
+                    </el-select>
+                  </el-form-item>
+                </div>
+              </el-form>
+            </div>
+          </el-radio>
+          <el-radio class="land-page-radio" label="newArrivals" border v-if="adFormatRadio === 'productSet'">
+            <div>新着陆页</div>
+            <div>选择要推广的商品, 我们将为您创建一个落地页</div>
+          </el-radio>
+          <el-radio class="land-page-radio" label="productDetailsPage" border v-if="adFormatRadio === 'video'">
+            <div>商品详情页</div>
+          </el-radio>
+        </el-radio-group>
+      </div>
+
+      <div v-if="adFormatRadio === 'focus'">
+        <p class="custom-flagshipStore-hint">亚马逊上的品牌旗舰店(必须有4个或更多页面, 每个页面有1个或更多独特的商品)</p>
+        <el-form
+          ref="flagshipStoreRuleFormRef2"
+          :model="flagshipStoreRuleForm2"
+          :rules="flagshipStoreRules2"
+          label-position="top"
+          label-width="120px"
+          class="demo-ruleForm"
+          size="default"
+          status-icon>
+          <el-form-item label="选择一个店铺" prop="focusShop">
+            <el-select
+              v-model="flagshipStoreRuleForm2.focusShop"
+              clearable
+              @blur="validateField2('focusShop')"
+              style="padding-top: 10px; margin-top: -15px; width: 500px">
+              <el-option v-for="item in focusShopOptions" :key="item.brandId" :label="item.brandRegistryName" :value="item.brandEntityId" />
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div
+        class="custom-product-title"
+        v-if="(adFormatRadio === 'productSet' && arrivalsRadio === 'newArrivals') || (adFormatRadio === 'video' && arrivalsRadio === 'productDetailsPage')">
+        <span class="custom-fake-icon">|</span>
+        <span class="custom-card-title">商品</span>
+      </div>
+      <ProductSetCommodity v-if="adFormatRadio === 'productSet' && arrivalsRadio === 'newArrivals'"></ProductSetCommodity>
+      <VideoCommodity @update-added-data="handleUpdateAddedData" v-if="adFormatRadio === 'video' && arrivalsRadio === 'productDetailsPage'"></VideoCommodity>
+    </el-card>
+  </div>
+</template>
+
 <style scoped>
+.custom-card-title-content {
+  font-weight: 700;
+  padding-bottom: 18px;
+}
+.custom-fake-icon {
+  color: #306cd7;
+  font-size: 26px;
+}
+.custom-card-title {
+  font-size: 18px;
+  padding-left: 5px;
+}
 .customize-font {
   color: #1e2128;
   font-weight: 600;
@@ -345,7 +358,6 @@ onMounted(() => {
   /* 广告格式单选按钮 */
   margin-bottom: 3px;
 }
-
 ::v-deep(.land-Page .el-radio-group .el-radio__inner) {
   /* 着陆页单选按钮 */
   margin-top: 3px;
@@ -353,7 +365,6 @@ onMounted(() => {
 ::v-deep(.land-Page .el-radio__label) {
   width: 100%;
 }
-
 ::v-deep(.ad-format-radios label.el-radio.is-bordered.is-checked.el-radio--default) {
   background: #f5f7fe;
 }
@@ -365,4 +376,54 @@ onMounted(() => {
   height: 200px;
   margin: 0 auto;
 }
+
+.ad-format-radio-group {
+  display: flex;
+  justify-content: space-between;
+}
+.ad-format-radio-content {
+  padding: 10px 0;
+}
+.ad-format-radio-title {
+  padding-bottom: 5px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: 700;
+  color: #333;
+}
+.ad-format-radio-img {
+  width: 330px;
+  height: 260px;
+  margin: 0 auto;
+  object-fit: cover;
+}
+.ad-format-radio-desc {
+  padding-top: 5px;
+  color: #333;
+  font-weight: 400;
+  text-align: center;
+}
+.custom-hint {
+  display: flex;
+  align-items: center;
+  margin: 20px 0 5px 0;
+}
+.custom-hint-title {
+  color: #616266;
+  font-weight: 450;
+}
+.flagshipStore-radio {
+  height: auto;
+  width: 100%;
+  flex: 2;
+  align-items: flex-start;
+  padding: 15px 10px 0 10px;
+}
+.custom-flagshipStore-hint {
+  padding: 10px 0 15px 0;
+}
+.custom-product-title {
+  font-weight: 700;
+  padding: 20px 0 10px 0;
+}
 </style>

src/views/adManage/sb/campaigns/CreateCampaigns/component/NegativeWord.vue

@@ -1,54 +1,3 @@
-<template>
-  <div style="width: 100%; margin-top: 20px">
-    <el-divider content-position="left">
-      <span style="font-size: 18px;font-weight: 700;">否定词</span>
-    </el-divider>
-    <div style="width: 100%; height: 520px; display: flex; border: 1px solid #e5e7ec; border-radius: 6px">
-      <div style="width: 50%; border-right: 1px solid #e5e7ec">
-        <div style="margin: 10px 0">
-          <span style="margin-left: 25px; color: #e47470">*</span>
-          <span style="color: #666666; margin-right: 10px">匹配类型: </span>
-          <el-checkbox v-model="NEGATIVE_PHRASE" label="词组否定" />
-          <el-checkbox v-model="NEGATIVE_EXACT" label="精确否定" />
-        </div>
-        <el-input
-          v-model="negativeWordsTextarea"
-          :rows="17"
-          type="textarea"
-          placeholder="请输入关键词，多个关键词使用逗号或者换行符分隔。(最多添加1000个关键词)"
-          maxlength="11000"
-          style="padding: 0 20px" />
-        <div style="display: flex; flex-direction: row-reverse; margin-top: 10px">
-          <el-button style="margin-right: 18px" type="primary" text bg @click="addNegative">添加</el-button>
-        </div>
-      </div>
-      <div style="width: 50%">
-        <el-card class="box-card" shadow="never" style="border: none">
-          <template #header>
-            <div class="card-header">
-              <span style="font-weight: 550; font-size: 15px; color: #1f2128">已添加: {{ negativeList.length }}</span>
-              <el-button class="button" type="danger" text bg @click="delAllNegative">全部删除</el-button>
-            </div>
-          </template>
-          <div class="card-body">
-            <el-table :data="negativeList" style="width: 100%; height: 370px; padding-bottom: 0" :header-row-style="changeNegTableHeader">
-              <el-table-column prop="negativeWords" label="否定词" width="auto" />
-              <el-table-column prop="operate" label="操作" width="60" align="right">
-                <template #default="scope">
-                  <el-button type="primary" size="small" @click="delSingleNegative(scope)" text>删除</el-button>
-                </template>
-              </el-table-column>
-            </el-table>
-          </div>
-        </el-card>
-        <div style="display: flex; justify-content: space-around">
-          <el-button type="primary" plain @click="negativeWordsSave" :disabled="!negativeList.length">保存</el-button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { ElMessage } from 'element-plus'
 import { Ref, inject, reactive, ref } from 'vue'
@@ -207,6 +156,57 @@ function changeNegTableHeader(args) {
 }
 </script>
 
+<template>
+  <div style="width: 100%; margin-top: 20px">
+    <el-divider content-position="left">
+      <span style="font-size: 18px;font-weight: 700;">否定词</span>
+    </el-divider>
+    <div style="width: 100%; height: 520px; display: flex; border: 1px solid #e5e7ec; border-radius: 6px">
+      <div style="width: 50%; border-right: 1px solid #e5e7ec">
+        <div style="margin: 10px 0">
+          <span style="margin-left: 25px; color: #e47470">*</span>
+          <span style="color: #666666; margin-right: 10px">匹配类型: </span>
+          <el-checkbox v-model="NEGATIVE_PHRASE" label="词组否定" />
+          <el-checkbox v-model="NEGATIVE_EXACT" label="精确否定" />
+        </div>
+        <el-input
+          v-model="negativeWordsTextarea"
+          :rows="17"
+          type="textarea"
+          placeholder="请输入关键词，多个关键词使用逗号或者换行符分隔。(最多添加1000个关键词)"
+          maxlength="11000"
+          style="padding: 0 20px" />
+        <div style="display: flex; flex-direction: row-reverse; margin-top: 10px">
+          <el-button style="margin-right: 18px" type="primary" text bg :disabled="!negativeWordsTextarea" @click="addNegative">添加</el-button>
+        </div>
+      </div>
+      <div style="width: 50%">
+        <el-card class="box-card" shadow="never" style="border: none">
+          <template #header>
+            <div class="card-header">
+              <span style="font-weight: 550; font-size: 15px; color: #1f2128">已添加: {{ negativeList.length }}</span>
+              <el-button class="button" type="danger" text bg @click="delAllNegative">全部删除</el-button>
+            </div>
+          </template>
+          <div class="card-body">
+            <el-table :data="negativeList" style="width: 100%; height: 370px; padding-bottom: 0" :header-row-style="changeNegTableHeader">
+              <el-table-column prop="negativeWords" label="否定词" width="auto" />
+              <el-table-column prop="operate" label="操作" width="60" align="right">
+                <template #default="scope">
+                  <el-button type="primary" size="small" @click="delSingleNegative(scope)" text>删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </el-card>
+        <div style="display: flex; justify-content: space-around">
+          <el-button type="primary" plain @click="negativeWordsSave" :disabled="!negativeList.length">保存</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
 <style lang="scss" scoped>
 ::v-deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {
   font-weight: 500;

src/views/productCenter/productList/components/ProductSelectCard/index.vue

@@ -128,7 +128,6 @@ async function deleteProductLine(item) {
 
 watch(dateRange, async() => {
   loading.value = true
-  console.log(123)
   await fetchProductCardData()
   loading.value = false
 })