✨ feat: 切换商品选择后卡片和图刷新

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

@@ -185,7 +185,6 @@ watch([respCampaignId, respCampaignName], () => {
 function changeTargetType(value: string) {    // 发送新的 targetType 值给父组件
   targetType.value = value
   emit('send-targetType', { type: targetType.value })
-  // emitter.emit('xxx', { type: targetType.value })
 }
 
 onMounted(() => {

src/views/productCenter/productAnalysis/api.ts

@@ -3,11 +3,11 @@ import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast
 import emitter from '/@/utils/emitter'
 
 
-export const apiPrefix = '/api/sellers/home/daily/'
+export const apiPrefix = '/api/sellers/product/trend/daily/'
 export function getCardData(query: UserPageQuery) {
 
   return request({
-    url: '/api/sellers/home/total/',
+    url: '/api/sellers/product/trend/total/',
     method: 'GET',
     params: query,
   })

src/views/productCenter/productAnalysis/components/DateTendency/index.vue

@@ -288,7 +288,7 @@ const changeStatDim = async () => {
 }
 
 watch(props.query, async () => {
-  // console.log("------watch-----queryParams", props.query)
+  console.log("------watch-----queryParams", props.query)
   loading.value = true
   await getMetricsItems()
   const items = await getDataset()

src/views/productCenter/productAnalysis/components/TopParentAsin/ExchangeProduct.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-popover placement="bottom-start" :width="1000" :visible="visible">
+  <el-popover placement="bottom-start" :width="1000" :visible="visible" persistent="false">
     <template #reference>
       <span class="exchange-btn" @click="visible = true">
         <el-icon><Switch /></el-icon>
@@ -31,7 +31,7 @@
         <div class="part-title">父ASIN</div>
         <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
           <li v-for="(item, index) in allData" :key="index" class="infinite-list-item" @click="selectPaAsin(index)" :class="{ selected: index === selectedIndex }">
-            <el-button color="#3c58af" size="small" class="view-btn" @click.stop="clickParentAsinBtn">查看</el-button>
+            <el-button color="#3c58af" size="small" class="view-btn" @click.stop="clickParentAsinBtn(index)">查看</el-button>
             <div class="list-content">
               <img :src="item.Image" class="list-item-image" />
               <div>
@@ -85,7 +85,7 @@
                 </div>
               </div>
               <div>
-                <el-button color="#3c58af" size="small" class="view-btn" @click.stop="clickAsinBtn">查看</el-button>
+                <el-button color="#3c58af" size="small" class="view-btn" @click.stop="clickAsinBtn(index)">查看</el-button>
               </div>
               <div style="position: relative">
                 <el-icon><ArrowRight /></el-icon>
@@ -116,9 +116,9 @@ import useInfiniteScroll from '../../hooks/useInfiniteScroll'
 
 const profile = <any>inject('profile')
 const { allData, parentloading, currentPage, load, fetchProduct } = useInfiniteScroll()
-const { skuData, asinData, selectedIndex, selectedAsinIndex, selectedSkuIndex, selectPaAsin, selectAsin, selectSku, clickParentAsinBtn, clickAsinBtn } = useSelectItem()
+const { visible, skuData, asinData, selectedIndex, selectedAsinIndex, selectedSkuIndex, selectPaAsin, selectAsin, selectSku, clickParentAsinBtn, clickAsinBtn } = useSelectItem()
 
-const visible = ref(false)
+// const visible = ref(false)
 
 const searchInp = ref('')
 const filterSelect = ref('vague')
@@ -126,18 +126,6 @@ const filterSelect = ref('vague')
 const productSelect = ref('ALL')
 const options = ref([])
 
-emitter.on('useSelectItem-clickParentAsinBtn', () => {
-  visible.value = false
-})
-
-emitter.on('useSelectItem-clickAsinBtn', () => {
-  visible.value = false
-})
-
-emitter.on('useSelectItem-clickSkuItem', () => {
-  visible.value = false
-})
-
 async function fetchProductLine() {
   try {
     const resp = await getProductLineSelect({ profileId: profile.value.profile_id })
@@ -169,6 +157,7 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   emitter.all.clear()
+  console.log('cleared')
 })
 </script>
 

src/views/productCenter/productAnalysis/components/TopParentAsin/index.vue

@@ -14,11 +14,11 @@
             Recording131232321321313123123213213
           </div>
           <div class="product-detail">
-            <span class="product-detail__label">父ASIN: </span>
+            <span class="product-detail__label"> 父ASIN: </span>
             <span>B09VHLFYTP</span>
-            <span class="product-detail__label">SKU: </span>
+            <span class="product-detail__label ml-6"> SKU: </span>
             <span>18</span>
-            <span class="product-detail__label">FBA库存: </span>
+            <span class="product-detail__label ml-6"> FBA库存: </span>
             <span>171</span>
           </div>
           <div class="product-brand">
@@ -112,6 +112,7 @@ import ExchangeProduct from './ExchangeProduct.vue'
   color: #1d2129;
   height: 16px;
   line-height: 16px;
+  font-weight: 500;
 }
 
 </style>

src/views/productCenter/productAnalysis/components/TrendOverview/index.vue

@@ -1,5 +1,6 @@
 <template>
   <el-card>
+    <p>{{ queryParams }}</p>
     <DataTendencyChart :metricEnum="productListMetricsEnum" 
       :query="queryParams" 
       :fetchCard="getCardData"
@@ -17,16 +18,43 @@ import { getCardData, getLineData, getLineMonthData, getLineWeekData } from '../
 import DataTendencyChart from '/@/views/productCenter/productAnalysis/components/DateTendency/index.vue'
 import { productListMetricsEnum } from '../../utils/enum'
 import { usePublicData } from '/@/stores/publicData'
+import emitter from '/@/utils/emitter'
 
 const profile = <any>inject('profile')
 
 // 公共数据
 const publicData = usePublicData()
 const { dateRange } = storeToRefs(publicData)
+
+const parentAsin = ref('')
+const childAsin = ref('')
+const sku = ref('')
+
+emitter.on('useSelectItem-clickParentAsinBtn', (value: any) => {
+  parentAsin.value = value.selectedParentAsin
+})
+
+emitter.on('useSelectItem-clickAsinBtn', (value: any) => {
+  parentAsin.value = value.selectedParentAsin
+  childAsin.value = value.selectedAsin
+})
+
+emitter.on('useSelectItem-clickSkuItem', (value: any) => {
+  parentAsin.value = value.selectedParentAsin
+  childAsin.value = value.selectedAsin
+  sku.value = value.selectedSku
+})
+
 const queryParams = ref({
   profileId: profile.value.profile_id,
   dateRange,
-  // productlineId,
+  parentAsin,
+  childAsin,
+  sku,
+})
+
+onBeforeUnmount(() => {
+  emitter.all.clear()
 })
 </script>
 

src/views/productCenter/productAnalysis/hooks/useSelectItem.ts

@@ -5,6 +5,8 @@ import { getProduct } from '../api'
 export default function useSelectItem() {
   const profile = <any>inject('profile')
 
+  const visible = ref(false)
+
   const productSelect = ref('')
   emitter.on('ExchangeProduct-productSelect', (value: any) => {
     productSelect.value = value
@@ -26,13 +28,16 @@ export default function useSelectItem() {
   const selectedSkuIndex = ref(-1)
   const selectedSku = ref('')
 
-  function selectPaAsin(index) {
+  function handlePaAsinSelection(index) {
     selectedIndex.value = index
     const selectedItem = allData.value[index]
     selectedParentAsin.value = selectedItem.parentAsin
+  }
+
+  // 点击父AsinItem
+  function selectPaAsin(index) {
+    handlePaAsinSelection(index)
     fetchAsin()
-    selectedAsinIndex.value = -1
-    skuData.value = []
   }
 
   async function fetchAsin() {
@@ -49,10 +54,21 @@ export default function useSelectItem() {
     }
   }
 
-  function selectAsin(index) {
+  // 点击父AsinItem 按钮
+  function clickParentAsinBtn(index) {
+    handlePaAsinSelection(index)
+    emitter.emit('useSelectItem-clickParentAsinBtn', { selectedParentAsin: selectedParentAsin.value })
+    resetPopover()
+  }
+
+  function handleAsinSelection(index) {
     selectedAsinIndex.value = index
     const selectedItem = asinData.value[index]
     selectedAsin.value = selectedItem.Asin
+  }
+
+  function selectAsin(index) {
+    handleAsinSelection(index)
     fetchSku()
   }
 
@@ -71,24 +87,32 @@ export default function useSelectItem() {
     }
   }
 
+  function clickAsinBtn(index) {
+    handleAsinSelection(index)
+    emitter.emit('useSelectItem-clickAsinBtn', { selectedParentAsin: selectedParentAsin.value, selectedAsin: selectedAsin.value })
+    resetPopover()
+  }
+
   function selectSku(index) {
-    emitter.emit('useSelectItem-clickSkuItem')
     selectedSkuIndex.value = index
     const selectedItem = skuData.value[index]
     selectedSku.value = selectedItem.sku
+    emitter.emit('useSelectItem-clickSkuItem', { selectedParentAsin: selectedParentAsin.value, selectedAsin: selectedAsin.value, selectedSku: selectedSku.value })
+    resetPopover()
   }
 
-  function clickParentAsinBtn() {
-    emitter.emit('useSelectItem-clickParentAsinBtn')
-  }
-
-  function clickAsinBtn() {
-    emitter.emit('useSelectItem-clickAsinBtn')
+  function resetPopover() {
+    selectedIndex.value = -1
+    asinData.value = []
+    selectedAsinIndex.value = -1
+    selectedSkuIndex.value = -1
+    skuData.value = []
+    visible.value = false
   }
 
   onBeforeUnmount(() => {
     emitter.all.clear()
   })
 
-  return { asinData, skuData, selectedIndex, selectedAsinIndex, selectedSkuIndex, selectPaAsin, selectAsin, selectSku, clickParentAsinBtn, clickAsinBtn }
+  return { visible, asinData, skuData, selectedIndex, selectedAsinIndex, selectedSkuIndex, selectPaAsin, selectAsin, selectSku, clickParentAsinBtn, clickAsinBtn }
 }