✨ feat: 商品中心: [商品列表] 产品线卡片请求参数添加时间且监听时间变化刷新数据

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

@@ -11,7 +11,7 @@
             <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: 200px; height: 200px; margin: 0 auto"></div>
+            <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>

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

@@ -2,12 +2,27 @@
 import { Delete, Edit } from '@element-plus/icons-vue'
 import * as echarts from 'echarts'
 import { ElMessage } from 'element-plus'
-import { inject, onBeforeUnmount, onMounted, ref } from 'vue'
+import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import emitter from '/@/utils/emitter'
 import { getProductCardData, postDeleteProductLine } from '/@/views/productCenter/productList/api'
 
-const profile = <any>inject('profile')
+emitter.on('ProductList-updateCardData', (value: any) => {
+  if (value.isUpdate) {
+    cardData.value.splice(0)
+    fetchProductCardData()
+  }
+})
+
+emitter.on('TopFilters-selectValue', (value: any) => {
+  const newIndex = cardData.value.findIndex((item) => item.productlineId === value.selectValue)
+  if (newIndex !== -1) {
+    selectedCardIndex.value = newIndex
+  }
+})
 
+const profile = <any>inject('profile')
+const dateRange = <any>inject('dateRange')
+const loading = ref(false)
 const cardData = ref([])
 const pieChartRefs = ref<HTMLDivElement[]>([])
 
@@ -15,7 +30,11 @@ const selectedCardIndex = ref(0)
 
 async function fetchProductCardData() {
   try {
-    const { data } = await getProductCardData({ profileId: profile.value.profile_id })
+    const { data } = await getProductCardData({
+      profileId: profile.value.profile_id,
+      startDate: dateRange.value[0],
+      endDate: dateRange.value[1]
+    })
     cardData.value = data
   } catch (error) {
     console.log('error:', error)
@@ -107,18 +126,11 @@ async function deleteProductLine(item) {
   }
 }
 
-emitter.on('ProductList-updateCardData', (value: any) => {
-  if (value.isUpdate) {
-    cardData.value.splice(0)
-    fetchProductCardData()
-  }
-})
-
-emitter.on('TopFilters-selectValue', (value: any) => {
-  const newIndex = cardData.value.findIndex((item) => item.productlineId === value.selectValue)
-  if (newIndex !== -1) {
-    selectedCardIndex.value = newIndex
-  }
+watch(dateRange, async() => {
+  loading.value = true
+  console.log(123)
+  await fetchProductCardData()
+  loading.value = false
 })
 
 onMounted(async () => {
@@ -132,7 +144,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="out-container">
+  <div class="out-container" v-loading="loading">
     <el-scrollbar>
       <div class="scrollbar-flex-content">
         <el-card