Kaynağa Gözat

refactor(product-manage): 优化产品监控和列表的展示效果
- 调整产品列表和监控页面的列宽设置
- 优化价格信息的展示方式,合并活动售价相关字段
- 改进星级评分的展示效果,统一展示格式
- 修复产品监控页面的价格信息显示问题

WanGxC 6 ay önce
ebeveyn
işleme
c61c90c550

+ 6 - 14
src/views/product-manage/Columns.ts

@@ -49,15 +49,15 @@ export const ProductColumns = [
     slots: { default: 'category' }
   },
   {
-    field: 'status', title: '状 态', width: 'auto', align: 'center',
+    field: 'status', title: '状 态', width: 80, align: 'center',
     slots: { default: 'status' }
   },
   {
-    field: 'update_datetime', title: '更新时间', minWidth: 'auto', align: 'center', showOverflow: true,
+    field: 'update_datetime', title: '更新时间', width: 160, align: 'center', 
     slots: { default: 'update_datetime' }
   },
   {
-    field: 'create_datetime', title: '创建时间', minWidth: 'auto', align: 'center', showOverflow: true,
+    field: 'create_datetime', title: '创建时间', width: 160, align: 'center',
     slots: { default: 'create_datetime' }
   },
   {
@@ -113,21 +113,13 @@ export const ProductMonitorColumns = [
     slots: { default: 'all_stars' }
   },
   {
-    field: 'price_info', title: '价 格',  width: 'auto', headerAlign: 'center', align: 'left',
+    field: 'price_info', title: '价 格', width: 'auto', align: 'left',
     slots: { default: 'price_info' }
   },
   {
-    field: 'show_price', title: '展示价格', width: 'auto', align: 'center',
+    field: 'show_price', title: '指导价格', width: 'auto', align: 'left',
     slots: { default: 'show_price' }
   },
-  {
-    field: 'activity_price', title: '平时活动售价', width: 'auto', align: 'center',
-    slots: { default: 'activity_price' }
-  },
-  {
-    field: 'minimum_price', title: '最低活动售价', width: 'auto', align: 'center',
-    slots: { default: 'minimum_price' }
-  },
   {
     field: 'ratings', title: '子ASIN评分人数', width: 'auto', align: 'center', sortable: true,
     slots: { default: 'ratings' }
@@ -210,7 +202,7 @@ export const CompetitorMonitorColumns = [
     slots: { default: 'all_stars' }
   },
   {
-    field: 'price_info', title: '价 格',  width: 'auto', headerAlign: 'center', align: 'left',
+    field: 'price_info', title: '价 格',  width: 'auto', align: 'left',
     slots: { default: 'price_info' }
   },
   {

+ 2 - 1
src/views/product-manage/competitor-monitor/component/DataTableSlot.vue

@@ -145,7 +145,8 @@ function showDetail(detail: any) {
       </template>
     </div>
     <div v-else-if="field === 'stars'" class="flex flex-col font-normal" style="min-width: 170px">
-      <div v-for="(percent, index) in starsPercent(row.goods).reverse()" :key="index" class="w-full flex items-center">
+      <div v-for="(percent, index) in starsPercent(row.goods).reverse()" :key="index" class="w-full flex items-center"
+           style="max-height: 15px">
         <span class="w-10 text-right mr-2">{{ 5 - index }}星</span>
         <el-tooltip :content="String(row.goods[`ratings${5 - index}`])" :show-after="300" effect="dark" placement="top">
           <el-progress

+ 1 - 1
src/views/product-manage/product-list/component/NoticeDialog.vue

@@ -126,7 +126,7 @@ function cancelDialog() {
           <span class="ml-1">仅可添加已绑定邮箱的用户</span>
         </el-col>
       </el-row>
-      <div class="flex flex-wrap gap-1.5 min-h-6">
+      <div class="flex flex-wrap gap-1.5 min-h-14">
         <el-tag
             v-for="tag in staffTags"
             :key="tag.id"

+ 13 - 11
src/views/product-manage/product-monitor/component/DataTableSlot.vue

@@ -79,19 +79,21 @@ function showDetail(detail: any) {
     </div>
     <div v-else-if="field === 'show_price'">
       <div class="font-medium">
-        {{ row.goods.show_price ? row.goods.currency_code + row.goods.show_price : '-' }}
-      </div>
-    </div>
-    <div v-else-if="field === 'activity_price'">
-      <div class="font-medium">
-        {{ row.goods.activity_price ? row.goods.currency_code + row.goods.activity_price : '-' }}
-      </div>
-    </div>
-    <div v-else-if="field === 'minimum_price'">
-      <div class="font-medium">
-        {{ row.goods.minimum_price ? row.goods.currency_code + row.goods.minimum_price : '-' }}
+        <p>展示价格:{{ row.goods.show_price ? row.goods.currency_code + row.goods.show_price : '-' }}</p>
+        <p>平时活动售价:{{ row.goods.activity_price ? row.goods.currency_code + row.goods.activity_price : '-' }}</p>
+        <p>最低活动售价:{{ row.goods.minimum_price ? row.goods.currency_code + row.goods.minimum_price : '-' }}</p>
       </div>
     </div>
+    <!--<div v-else-if="field === 'activity_price'">-->
+    <!--  <div class="font-medium">-->
+    <!--    {{ row.goods.activity_price ? row.goods.currency_code + row.goods.activity_price : '-' }}-->
+    <!--  </div>-->
+    <!--</div>-->
+    <!--<div v-else-if="field === 'minimum_price'">-->
+    <!--  <div class="font-medium">-->
+    <!--    {{ row.goods.minimum_price ? row.goods.currency_code + row.goods.minimum_price : '-' }}-->
+    <!--  </div>-->
+    <!--</div>-->
     <div v-else-if="field === 'score'">
       <template v-if="row.goods.score !== null && row.goods.score !== undefined && row.goods.score !== ''">
         <el-rate

+ 2 - 2
src/views/product-manage/product-monitor/component/ProgressBar.vue

@@ -18,8 +18,8 @@ const props = defineProps({
 </script>
 
 <template>
-  <div v-for="i in [5,4,3,2,1]" :key="i" class="w-full flex items-center">
-    <span class="w-10 text-right mr-2">{{ i }}星</span>
+  <div v-for="i in [5,4,3,2,1]" :key="i" class="w-full flex items-center" style="max-height: 15px;">
+    <span class="w-10 text-right mr-2 italic">{{ i }}星</span>
     <el-progress
         striped
         striped-flow