✨ feat: 商品分析: 顶部卡片功能

src/views/productCenter/productAnalysis/api.ts

@@ -67,3 +67,10 @@ export function getProduct(query) {
     params: query,
   })
 }
+export function getDetail(query) {
+  return request({
+    url: '/api/sellers/product/trend/detail/',
+    method: 'GET',
+    params: query,
+  })
+}

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

@@ -1,25 +1,27 @@
 <template>
-  <div class="top-parent-asin">
+  <div class="top-parent-asin" v-loading="topCardloading">
     <el-card body-style="padding: 10px;">
       <div class="product-card">
         <div class="product-image">
-          <div style="width: 100%; height: 100%; background: #f5f5f5"></div>
+          <img :src="dataSet.Image" class="img" />
         </div>
         <div class="product-info">
           <div>
             <ExchangeProduct></ExchangeProduct>
+            <div style="position: relative">
+              <div style="position: absolute; top: -21px; left: 100px;">父Asin</div>
+            </div>
           </div>
           <div class="product-title">
-            ZOSI 16CH 4K PoE Security Cameras System,4K 8MP 16 Channel H.265 NVR with 4TB Hard Drive and 8pcs 5MP Indoor Outdoor PoE IP Cameras,120ft Night Vision,Remote Access for Home Business 24/7
-            Recording131232321321313123123213213
+            {{ dataSet.Title }}
           </div>
           <div class="product-detail">
             <span class="product-detail__label"> 父ASIN: </span>
-            <span>B09VHLFYTP</span>
+            <span>{{ dataSet.parentAsin ? dataSet.parentAsin : '--' }}</span>
             <span class="product-detail__label ml-6"> SKU: </span>
-            <span>18</span>
+            <span>{{ dataSet.skuNumbers ? dataSet.skuNumbers : '--' }}</span>
             <span class="product-detail__label ml-6"> FBA库存: </span>
-            <span>171</span>
+            <span>{{ dataSet.FBAQuantity ? dataSet.FBAQuantity : '--' }}</span>
           </div>
           <div class="product-brand">
             <span>ZOSI</span>
@@ -28,9 +30,10 @@
         <div class="product-price">
           <div class="product-price__label">价格:</div>
           <div style="position: relative; top: 1px">
-            <div>$1234 ~ $2312</div>
+            <div>${{ dataSet.priceMin ? dataSet.priceMin : '--' }} ~ ${{ dataSet.priceMax ? dataSet.priceMax : '--' }}</div>
           </div>
         </div>
+        <!-- TODO: 星级评分未完成 -->
         <div class="product-stars">
           <div>星级评分:</div>
           <div>1231341231223213(2131)</div>
@@ -42,7 +45,57 @@
 
 <script setup lang="ts">
 import ExchangeProduct from './ExchangeProduct.vue'
+import { getDetail } from '../../api'
+import { inject, onMounted, ref } from 'vue'
+import emitter from '/@/utils/emitter'
 
+const profile = <any>inject('profile')
+const topCardloading = ref(false)
+const dataSet = <any>ref({})
+
+const parentAsin = ref('')
+const childAsin = ref('')
+const sku = ref('')
+
+emitter.on('useSelectItem-clickParentAsinBtn', (value: any) => {
+  parentAsin.value = value.selectedParentAsin
+  fetchDetail()
+})
+
+emitter.on('useSelectItem-clickAsinBtn', (value: any) => {
+  parentAsin.value = value.selectedParentAsin
+  childAsin.value = value.selectedAsin
+  fetchDetail()
+})
+
+emitter.on('useSelectItem-clickSkuItem', (value: any) => {
+  parentAsin.value = value.selectedParentAsin
+  childAsin.value = value.selectedAsin
+  sku.value = value.selectedSku
+  fetchDetail()
+})
+
+async function fetchDetail() {
+  topCardloading.value = true
+  const query = {
+    profileId: profile.value.profile_id,
+    parentAsin: parentAsin.value,
+    childAsin: childAsin.value,
+    sku: sku.value,
+  }
+  try {
+    const res = await getDetail(query)
+    dataSet.value = res.data
+  } catch (error) {
+    console.log('error:', error)
+  } finally{
+    topCardloading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchDetail()
+})
 </script>
 
 <style scoped>
@@ -56,7 +109,11 @@ import ExchangeProduct from './ExchangeProduct.vue'
   flex-shrink: 0;
   width: 126px;
   height: 126px;
-  border: 1px solid e5e6eb;
+}
+.img {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #e5e6eb;
   border-radius: 4px;
 }
 .top-parent-asin {
@@ -114,5 +171,4 @@ import ExchangeProduct from './ExchangeProduct.vue'
   line-height: 16px;
   font-weight: 500;
 }
-
 </style>