🐞 fix: 商品分析: 时间选择和商品类型在无数据时显示错位问题

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

@@ -7,7 +7,7 @@ import emitter from '/@/utils/emitter'
 
 const profile = <any>inject('profile')
 const dateRange = <any>inject('dateRange')
-const tableData = <any>inject('tableData')
+// const tableData = <any>inject('tableData')
 const parentAsin = ref('')
 const childAsin = ref('')
 const sku = ref('')
@@ -32,14 +32,14 @@ emitter.on('useSelectItem-clickSkuItem', (value: any) => {
 })
 
 const tableLoading = ref(false)
-const searchInp = ref('')
-const selectVal = ref('')
+// const searchInp = ref('')
+// const selectVal = ref('')
 
 const gridOptions = reactive({
   height: 'auto',
   border: false,
   round: true,
-  showFooter: true,
+  // showFooter: true,
 
   columnConfig: {
     resizable: true,
@@ -80,29 +80,29 @@ async function fetchListData() {
 //   gridOptions.data = tableData.value
 // })
 
-function handleSearch() {
-  tableLoading.value = true
-  // const query = {}
-  console.log(1213)
-  try {
-    // const res = await xxx(query)
-    // gridOptions.data = res.data
-  } catch (error) {
-    console.log('error:', error)
-  } finally {
-    tableLoading.value = true
-  }
-}
-
-function handleKeydown(event) {
-  if (event.$event.key === 'Enter') {
-    handleSearch()
-  }
-}
-
-function handleSelect() {
-  handleSearch()
-}
+// function handleSearch() {
+//   tableLoading.value = true
+//   // const query = {}
+//   console.log(1213)
+//   try {
+//     // const res = await xxx(query)
+//     // gridOptions.data = res.data
+//   } catch (error) {
+//     console.log('error:', error)
+//   } finally {
+//     tableLoading.value = true
+//   }
+// }
+
+// function handleKeydown(event) {
+//   if (event.$event.key === 'Enter') {
+//     handleSearch()
+//   }
+// }
+
+// function handleSelect() {
+//   handleSearch()
+// }
 
 onMounted(() => {
   fetchListData()
@@ -112,8 +112,8 @@ onMounted(() => {
 <template>
   <div class="outer-container" v-loading="tableLoading">
     <vxe-grid v-bind="gridOptions">
-      <!-- <template #toolbar_buttons>
-        <vxe-input
+      <template #toolbar_buttons>
+        <!-- <vxe-input
           v-model="searchInp"
           @search-click="handleSearch"
           @keydown="handleKeydown"
@@ -122,8 +122,8 @@ onMounted(() => {
           class="custom-vxe-input"></vxe-input>
         <vxe-select v-model="selectVal" @change="handleSelect" class="custom-vxe-select">
           <vxe-option v-for="num in 15" :key="num" :value="num" :label="`选项${num}`"></vxe-option>
-        </vxe-select>
-      </template> -->
+        </vxe-select> -->
+      </template>
 
       <template v-for="col in salesColumns" #[`${col.field}_default`]="{ row }">
         <div>

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

@@ -1,17 +1,20 @@
 <script setup lang="ts">
-import ExchangeProduct from './ExchangeProduct.vue'
+import { Picture as IconPicture } from '@element-plus/icons-vue'
+import { computed, inject, onMounted, ref, watch } from 'vue'
 import { getDetail } from '../../api'
-import { computed, inject, onMounted, ref } from 'vue'
+import ExchangeProduct from './ExchangeProduct.vue'
 import emitter from '/@/utils/emitter'
 
+
 const profile = <any>inject('profile')
+const dateRange = <any>inject('dateRange')
 const topCardloading = ref(false)
 const dataSet = <any>ref({})
 
 const parentAsin = ref('')
 const childAsin = ref('')
 const sku = ref('')
-const rating = ref('')
+const rating = ref('3')
 
 // 根据不同的点击事件发送请求获取数据
 emitter.on('useSelectItem-clickParentAsinBtn', (value: any) => {
@@ -71,6 +74,10 @@ const classificationStyle = computed(() => {
   }
 })
 
+watch(dateRange, () => {
+  fetchDetail()
+})
+
 onMounted(() => {
   fetchDetail()
 })
@@ -81,7 +88,17 @@ onMounted(() => {
     <el-card body-style="padding: 8px;">
       <div class="product-card">
         <div class="product-image">
-          <img :src="dataSet.Image" class="img" />
+          <!-- <img :src="dataSet.Image ? dataSet.Image : 123" class="img" /> -->
+          <img v-if="dataSet.Image" :src="dataSet.Image" class="img" />
+          <div v-else>
+            <el-image>
+              <template #error>
+                <div class="image-slot">
+                  <el-icon><icon-picture /></el-icon>
+                </div>
+              </template>
+            </el-image>
+          </div>
         </div>
         <div class="product-info">
           <div>
@@ -91,7 +108,7 @@ onMounted(() => {
             </div>
           </div>
           <div class="product-title">
-            {{ dataSet.Title }}
+            {{ dataSet.Title ? dataSet.Title : '--' }}
           </div>
           <div class="product-detail">
             <span class="product-detail__label"> 父ASIN: </span>
@@ -106,15 +123,16 @@ onMounted(() => {
           </div>
         </div>
         <div class="product-price">
-          <div class="product-price__label">价格:</div>
+          <div class="product-price__label">价格</div>
           <div class="product-price__content">
             <div>${{ dataSet.priceMin ? dataSet.priceMin : '--' }} ~ ${{ dataSet.priceMax ? dataSet.priceMax : '--' }}</div>
           </div>
         </div>
         <!-- TODO: 星级评分未完成 -->
         <div class="product-stars">
-          <div>星级评分:</div>
-          <el-rate v-model="rating" disabled show-score text-color="#ff9900" score-template="{value} ()" />
+          <!-- <div>星级评分</div> -->
+          <div class="product-price__label">星级评分</div>
+          <el-rate v-model="rating" disabled show-score text-color="#1d2129" score-template="{value} ()" />
         </div>
       </div>
     </el-card>
@@ -133,7 +151,7 @@ onMounted(() => {
   width: 126px;
   height: 126px;
 }
-.img {
+.product-image .img {
   width: 100%;
   height: 100%;
   border: 1px solid #e5e6eb;
@@ -152,7 +170,7 @@ onMounted(() => {
 }
 .product-title {
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
   color: #1d2129;
   font-size: 18px;
@@ -200,7 +218,7 @@ onMounted(() => {
 }
 .classification-title {
   position: absolute;
-  top: -29px;
+  top: -38px;
   left: -152px;
   width: 70px;
   height: 22px;
@@ -209,4 +227,16 @@ onMounted(() => {
   border-top-left-radius: 4px;
   color: white;
 }
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 126px;
+  height: 126px;
+  border: 1px solid #dde0eb;
+  border-radius: 4px;
+  background: var(--el-fill-color-light);
+  color: var(--el-text-color-secondary);
+  font-size: 30px;
+}
 </style>

src/views/productCenter/productAnalysis/index.vue

@@ -57,7 +57,7 @@ function handleUpdate(value: any) {
   <div class="outer-container">
     <TopParentAsin></TopParentAsin>
     <div class="filters">
-      <DateRangePicker v-model="dateRange" style="position: absolute; right: 25px; top: 173px; z-index: 9; border-radius: 20px"></DateRangePicker>
+      <DateRangePicker v-model="dateRange" style="position: absolute; right: 14px; top: 163px; z-index: 9; border-radius: 20px"></DateRangePicker>
       <!-- <div v-show="activeName == 'trendOverview'">
         <el-select v-model="filter1" placeholder="Select" style="width: 240px; margin-right: 8px">
           <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />