✨ feat: 广告管理<商品推广SP>: 顶部搜索popover布局

src/views/adManage/sp/TopFilter/PopoverFilter/InfinityList/index.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const gridOptions = <any>reactive({
+  // border: true,
+  height: 500,
+  align: null,
+  // columnConfig: {
+  //   resizable: true,
+  // },
+  columns: [
+    { type: 'seq', width: 50 },
+    { field: 'name', title: 'name' },
+  ],
+  data: [
+    { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
+    { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
+  ],
+})
+
+const gridOptionsRight = <any>reactive({
+  // border: true,
+  height: 500,
+  align: null,
+  // columnConfig: {
+  //   resizable: true,
+  // },
+  columns: [
+    { type: 'seq', width: 50 },
+    { field: 'name', title: 'name' },
+  ],
+  data: [
+    { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
+    { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
+  ],
+})
+</script>
+
+<template>
+  <div class="flex">
+    <vxe-grid v-bind="gridOptions" class="ml-2 mb-2 mt-0 border border-r-0 rounded-bl-md rounded-tl-md overflow-hidden" style="flex: 0 1 260px"> </vxe-grid>
+    <vxe-grid v-bind="gridOptionsRight" class="mr-2 mb-2 mt-0 border rounded-br-md rounded-tr-md overflow-hidden" style="flex: 2 1 0"> </vxe-grid>
+  </div>
+</template>
+
+<style scoped>
+:deep(.vxe-table--render-default .vxe-table--border-line) {
+  border: none;
+}
+</style>

src/views/adManage/sp/TopFilter/PopoverFilter/index.vue

@@ -1,47 +1,59 @@
-<script setup>
-import { onMounted } from 'vue'
-import { getProductSelect } from '../api'
+<script setup lang="ts">
+import { Search } from '@element-plus/icons-vue'
+import { Ref, inject, onMounted, ref } from 'vue'
+import { getProductline } from '../api'
+import InfinityList from './InfinityList/index.vue'
 
-const isVisible = ref(false)
+const profile = <Ref>inject('profile')
 
-function handlePopover() {
-  isVisible.value = !isVisible.value
-}
-
-const productFilterInput = ref('')
-const productFilterSelect = ref('')
-const productFilterOptions = ref([])
+const activeName = ref('search')
+const searchInput = ref('')
+const options = ref([])
+const textarea = ref('')
 
-async function fetchProductSelect() {
+async function fetchProductLine() {
   try {
-    const response = await getProductSelect()
-    productFilterOptions.value = response.data
-    productFilterSelect.value = response.data[0].value
+    const response = await getProductline({ profileId: profile.value.profile_id })
+    options.value = response.data
   } catch (error) {
     console.log('error:', error)
   }
 }
 
 onMounted(() => {
-  fetchProductSelect()
+  fetchProductLine()
 })
 </script>
 
 <template>
-  <div style="max-width: 350px">
-    <el-popover :visible="isVisible" placement="bottom-start" title="Title" :width="1000">
-      <template #reference>
-        <el-input v-model="productFilterInput" @click="handlePopover" style="width: 350px" placeholder="Please input">
-          <template #prepend>
-            <el-select v-model="productFilterSelect" placeholder="Select" style="width: 115px">
-              <el-option v-for="item in productFilterOptions" :key="item.value" :label="item.label" :value="item.value" />
+  <div class="flex justify-between border border-solid border-inherit rounded-md">
+    <div style="flex: 2 1 0; border-right: 1px solid #e6e6e6">
+      <el-tabs v-model="activeName" class="demo-tabs">
+        <el-tab-pane label="搜索" name="search">
+          <div class="flex gap-1 p-2">
+            <el-input v-model="searchInput" placeholder="输入产品标题/父ASIN/ASIN查询" :prefix-icon="Search" style="width: 360px" />
+            <el-select>
+              <el-option v-for="item in options" :key="item.productlineId" :label="item.productlineName" :value="item.productlineId" />
             </el-select>
-          </template>
-        </el-input>
-      </template>
-      <div class="flex"></div>
-    </el-popover>
+            <el-select></el-select>
+          </div>
+          <InfinityList></InfinityList>
+        </el-tab-pane>
+        <el-tab-pane label="输入" name="input" class="w-full p-2">
+          <el-input v-model="textarea" :autosize="{ minRows: 10, maxRows: 100 }" type="textarea" placeholder="Please input" />
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+    <div style="flex: 1 1 0">
+      <div class="h-10" style="background-color: #edf0f8">已添加:</div>
+    </div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+/* Tab栏 */
+::v-deep(.el-tabs__nav-scroll) {
+  overflow: hidden;
+  margin-left: 10px;
+}
+</style>

src/views/adManage/sp/TopFilter/api.ts

@@ -8,3 +8,10 @@ export function getProductSelect() {
     method: 'GET',
   })
 }
+export function getProductline(query) {
+  return request({
+    url: '/api/sellers/productline/',
+    method: 'GET',
+    params: query,
+  })
+}

src/views/adManage/sp/TopFilter/index.vue

@@ -1,9 +1,48 @@
-<script setup>
-import PopoverFiler from './PopoverFilter/index.vue'
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import PopoverFilter from './PopoverFilter/index.vue'
+import { getProductSelect } from './api'
+
+const isVisible = ref(false)
+
+const productFilterInput = ref('')
+const productFilterSelect = ref('')
+const productFilterOptions = ref([])
+
+async function fetchProductSelect() {
+  try {
+    const response = await getProductSelect()
+    productFilterOptions.value = response.data
+    productFilterSelect.value = response.data[0].value
+  } catch (error) {
+    console.log('error:', error)
+  }
+}
+
+onMounted(() => {
+  fetchProductSelect()
+})
 </script>
 
 <template>
-  <PopoverFiler v-model="isVisible"></PopoverFiler>
+  <div style="max-width: 350px">
+    <el-popover :visible="isVisible" placement="bottom-start" :width="1200">
+      <template #reference>
+        <el-input v-model="productFilterInput" @click="isVisible = true" style="width: 350px" placeholder="请选择推广商品">
+          <template #prepend>
+            <el-select v-model="productFilterSelect" placeholder="Select" style="width: 100px">
+              <el-option v-for="item in productFilterOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </template>
+        </el-input>
+      </template>
+      <div class="flex justify-between">
+        <div class="pb-3 font-bold text-slate-950 text-base">切换商品</div>
+        <el-icon class="cursor-pointer" @click="isVisible = false"><CloseBold /></el-icon>
+      </div>
+      <PopoverFilter></PopoverFilter>
+    </el-popover>
+  </div>
 </template>
 
 <style scoped></style>

src/views/adManage/sp/index.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia'
 import { Ref, onBeforeMount, provide, ref } from 'vue'
+import TopFilter from './TopFilter/index.vue'
 import AdvertisedProducts from './advertisedProducts/index.vue'
 import Campaigns from './campaigns/index.vue'
 import Keywords from './keywords/index.vue'
@@ -10,8 +11,8 @@ import SearchTerm from './searchTerm/index.vue'
 import Targets from './targets/index.vue'
 import DateRangePicker from '/@/components/DateRangePicker/index.vue'
 import { usePublicData } from '/@/stores/publicData'
+import { useShopInfo } from '/@/stores/shopInfo'
 import { GetAllPortfolios } from '/@/views/adManage/portfolios/api'
-import TopFilter from './TopFilter/index.vue'
 
 // const shopInfo = useShopInfo()
 const publicData = usePublicData()
@@ -19,6 +20,9 @@ const selectedPortfolios: Ref<string[]> = ref([])
 const portfolios: Ref<Portfolio[]> = ref([])
 const { dateRange } = storeToRefs(publicData)
 provide('dateRange', dateRange)
+const shopInfo = useShopInfo()
+const { profile } = storeToRefs(shopInfo)
+provide('profile', profile)
 
 const tabActiveName = ref('Campaigns')
 const tabs = [