新建广告活动界面

src/views/adManage/sp/campaigns/CreateCampaigns/index.vue

@@ -483,10 +483,10 @@
           <div style="font-size: 20px; font-weight: bold; margin-top: 30px" v-if="ruleForm.targetType == 'Goods'">商品定向</div>
           <hr v-if="ruleForm.targetType == 'Goods'" />
           <el-form-item style="width: 100%; margin-top: 20px" v-if="ruleForm.targetType == 'Goods'">
-            <div style="width: 100%; height: 520px; display: flex; border: 1px solid #c2c7cf; border-radius: 6px">
+            <div style="width: 100%; height: 520px; display: flex; border: 1px solid #c2c7cf; border-radius: 6px" v-loading="productOrientationLoading">
               <div style="width: 50%; border-right: 1px solid #c2c7cf">
-                <el-tabs type="border-card" stretch class="goods-orientation-tabs">
-                  <el-tab-pane label="品类">
+                <el-tabs type="border-card" stretch class="goods-orientation-tabs" style="border-bottom-left-radius: 6px;">
+                  <el-tab-pane label="品类" style="border-top-left-radius: 6px;">
                     <div style="display: flex; align-items: center">
                       <span style="width: 40px">竞价:</span>
                       <el-select v-model="categoryBiddingType" class="m-2" placeholder="Select">
@@ -497,8 +497,32 @@
                       </el-input>
                     </div>
                     <el-tabs v-model="categoryTabs" class="category-tabs">
-                      <el-tab-pane label="建议" name="first">User</el-tab-pane>
-                      <el-tab-pane label="搜索" name="second">Config</el-tab-pane>
+                      <el-tab-pane label="建议" name="first">
+                        <el-table :data="proposalTableData" style="width: 100%" height="342">
+                          <el-table-column prop="proposal" label="建议" width="520">
+                            <template #header>
+                              0建议
+                            </template>
+                          </el-table-column>
+                          <el-table-column prop="address" label="Address">
+                            <template #header>
+                              <el-button type="primary" size="normal" link @click="handleGoodsAdd">全部添加</el-button>
+                            </template>
+                            <template #default="scope">
+                              <el-button type="primary" size="small" @click="addSingleGoods(scope)" text>添加</el-button>
+                            </template>
+                          </el-table-column>
+                        </el-table>
+                      </el-tab-pane>
+                      <el-tab-pane label="搜索" name="second">
+                        <el-input placeholder="请输入关键词过滤"  />
+                        <el-table :data="searchClassifyTableData" style="width: 100%" height="309">
+                          <el-table-column prop="categorie_name" label="亚马逊分类">
+                            
+                          </el-table-column>
+                          
+                        </el-table>
+                      </el-tab-pane>
                     </el-tabs>
                   </el-tab-pane>
                   <el-tab-pane label="单个商品">
@@ -517,9 +541,23 @@
                       </div>
                     </div>
                     <el-tabs v-model="singleGoodsTabs" class="category-tabs">
-                      <el-tab-pane label="建议" name="first">User</el-tab-pane>
-                      <el-tab-pane label="搜索" name="second">Config</el-tab-pane>
-                      <el-tab-pane label="输入" name="third">Third</el-tab-pane>
+                      <el-tab-pane label="建议" name="first">
+                        <el-table :data="proposalTableData" style="width: 100%" height="342">
+                          <el-table-column prop="proposal" label="商品" width="520" />
+                          <el-table-column prop="address" label="类型" />
+                          <el-table-column prop="operational" label="操作" />
+                        </el-table>
+                      </el-tab-pane>
+                      <el-tab-pane label="搜索" name="second">
+                        <el-input placeholder="按ASIN搜索"></el-input>
+                        <el-table :data="proposalTableData" style="width: 100%" height="342">
+                          <el-table-column prop="proposal" label="商品" width="520" />
+                          <el-table-column prop="address" label="类型" />
+                          <el-table-column prop="operational" label="操作" />
+                        </el-table>
+                      </el-tab-pane>
+                      <!-- TODO: 商品定向TextArea -->
+                      <el-tab-pane label="输入" name="third">待完成</el-tab-pane>
                     </el-tabs>
                   </el-tab-pane>
                 </el-tabs>
@@ -806,10 +844,6 @@ function changeBid() {
   console.log(ruleForm.autoRedirect)
   showCard.value = ruleForm.autoRedirect === 'targetBid'
 }
-function changeTargetType() {
-  console.log(ruleForm.targetType)
-  showCard.value = ruleForm.targetType === 'keyWords'
-}
 // 切换投放类型
 function changeType() {}
 
@@ -825,6 +859,16 @@ function handleSizeChange(newSize) {
   currentPage.value = 1 // 重置到第一页
 }
 
+// ------------------------------------------投放类型模块------------------------------------------
+async function changeTargetType() {
+  console.log(ruleForm.targetType)
+  showCard.value = ruleForm.targetType === 'keyWords'
+  if(ruleForm.targetType === 'Goods') {
+    productOrientationLoading.value = true
+    await setProductOrientationData()
+  }
+}
+
 // ------------------------------------------商品定向模块------------------------------------------
 const categoryBiddingType = ref('customBid')
 const categoryBiddingTypeOptions = [
@@ -840,6 +884,29 @@ const categoryBiddingTypeOptions = [
 const categoryBidInput = ref('0.75')
 const expand = ref(true)
 const accurate = ref(false)
+const proposalTableData = ref([])
+const searchClassifyTableData = ref([])
+const productOrientationLoading = ref(false)
+
+async function setProductOrientationData() {
+  try {
+    const resp = await request({
+      url: '/api/ad_manage/targetable/categories/',
+      method: 'GET',
+      params: {
+        profile_id: profile.value.profile_id,
+      },
+    })
+    searchClassifyTableData.value = resp.data
+    console.log('searchClassifyTableData', searchClassifyTableData.value)
+    productOrientationLoading.value = false
+
+  } catch (error) {
+    console.error("请求失败：", error)
+  }
+}
+
+
 
 // ------------------------------------------关键词定向模块------------------------------------------
 const bidType = ref('customBid')