代码优化

src/api/comment.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getCommentList(data) {
+  return request.formDataPost('/comment/list', data)
+}
+
+export function getCommentTagNum(data) {
+  return request.formDataPost('/comment/tagNum', data)
+}

src/components/CommentItem/index.vue

@@ -49,8 +49,8 @@ export default {
       default: ''
     },
     time: {
-      type: Number,
+      type: String,
-      default: 0
+      default: ''
     },
     name: {
       type: String,

src/styles/variables.scss

@@ -5,6 +5,7 @@ $black: #333;
 $gray: #0000008a;
 $gray-deep: #999;
 $red: #ea625b;
+$pink: #e7b7b5;
 $green: #38ca73;
 
 // font-size

src/views/detail/index.vue

@@ -15,13 +15,32 @@
       :discount="info.counterPrice"
     />
 
-    <Section :stock-num="stockNum" :name="name" :attr="attributes" @input="isSkuShow = $event" />
+    <Section
+      :stock-num="stockNum"
+      :name="name"
+      :attr="attributes"
+      @input="isSkuShow = $event"
+    />
 
-    <Comment :rate="comment.rate" :num="comment.num" :tags="comment.tags" :list="comment.list" />
+    <Comment
+      :rate="comment.rate"
+      :num="comment.num"
+      :tags="comment.tags"
+      :list="comment.list"
+    />
 
     <Description :description="description" />
 
-    <Sku v-if="isSkuShow" v-model="isSkuShow" :sku-data="skuData" :goods="skuGoods" :initial-sku="initialSku" @initSku="initSku($event)" @getNum="getNum" @initSkuNum="initSkuNum($event)" />
+    <Sku
+      v-if="isSkuShow"
+      v-model="isSkuShow"
+      :sku-data="skuData"
+      :goods="skuGoods"
+      :initial-sku="initialSku"
+      @initSku="initSku($event)"
+      @getNum="getNum"
+      @initSkuNum="initSkuNum($event)"
+    />
 
     <Tabbar ref="tabbar" @input="isSkuShow = $event" />
     <back-top />
@@ -31,6 +50,7 @@
 
 <script>
 import { getDetail } from '@/api/detail'
+import { getCommentList, getCommentTagNum } from '@/api/comment'
 import Swiper from './modules/Swiper'
 import Overview from './modules/Overview'
 import Section from './modules/Section'
@@ -79,6 +99,7 @@ export default {
   },
   mounted() {
     this.getGoodsDetail()
+    this.getCommentInfo()
   },
   methods: {
     getGoodsDetail() {
@@ -91,48 +112,26 @@ export default {
         this.description = goods.info.picUrl
         this.skuAdapter()
         this.isSkeletonShow = false
+      })
+    },
+    async getCommentInfo() {
+      const res = await getCommentTagNum({ goodsId: this.goodsId })
+      const res1 = await getCommentList({ tagType: 0, goodsId: this.goodsId })
+      const commentTagNum = res.map.commentTagNum
+      let goodsRate = Math.ceil(commentTagNum.goodsNum / commentTagNum.totalNum * 100)
+      goodsRate = isNaN(goodsRate) ? 0 : goodsRate
       this.comment = {
-          rate: '99%',
+        rate: goodsRate,
-          num: '10万+',
+        num: `${commentTagNum.totalNum}`,
         tags: [
-            '品质一流',
+          `全部(${commentTagNum.totalNum})`,
-            '图文清晰',
+          `好评(${commentTagNum.goodsNum})`,
-            '印刷上乘',
+          `中评(${commentTagNum.middleNum})`,
-            '质地上乘',
+          `差评(${commentTagNum.badNum})`,
-            '优美详细'
+          `有图(${commentTagNum.hasPictureNum})`
-          ],
-          list: [
-            {
-              avatar:
-                    'http://storage.360buyimg.com/i.imageUpload/6a645f3437323632613465313233613831353834393333353237363232_sma.jpg',
-              time: 1585537881825,
-              score: 5,
-              name: 'Ewall&熊猫',
-              desc:
-                    '收到货就赶紧打开看起来了，之前看过电子版的看完之后感到意犹未尽，前两天突然想再看一遍于是决定买实体书认真读一遍。',
-              imgs: [
-                'http://img30.360buyimg.com/shaidan/s128x96_jfs/t1/91400/14/15534/116833/5e723705E6e97e5a3/012d7444f8ccbcea.jpg',
-                'http://img30.360buyimg.com/shaidan/s128x96_jfs/t1/91314/13/15486/245367/5e723706E663c43aa/abb31350cdadf56d.jpg',
-                'http://img30.360buyimg.com/shaidan/s128x96_jfs/t1/103902/15/15108/267864/5e703d09E6603898f/4d91ad6fab4f76e0.jpg'
-              ]
-            },
-            {
-              avatar:
-                    'http://img11.360buyimg.com/jdphoto/s40x40_jfs/t1/25255/18/10701/1678/5c89f892E78c04688/684d63c0d68e39b1.png',
-              time: 1585537881825,
-              score: 2,
-              name: '张三',
-              desc:
-                    '很好很好很好！久仰大名，如雷贯耳的刘慈欣的大作，终于在京东上买到了，用了3000京豆后，才39元到手，高兴😃。包装很好很好很好很好！纸张很好，印刷清晰，岁数大了看着也不累，很好。一直都在京东买东西，十几年了，京东的服务一直很好！快递更是给力，小哥很棒！',
-              imgs: [
-                'http://img30.360buyimg.com/shaidan/s128x96_jfs/t1/110454/9/7862/139882/5e61d739E6a4360d2/a2dc1ac0d8f680a9.jpg',
-                'http://img30.360buyimg.com/shaidan/s128x96_jfs/t1/98014/37/12422/125922/5e478009E5acab40d/dbf006d20d040c8b.jpg',
-                'http://img30.360buyimg.com/shaidan/s128x96_jfs/t1/93964/32/13999/287674/5e61d73bE7e2430bd/de2bcdb6ab83f037.jpg'
-              ]
-            }
         ]
       }
-      })
+      this.comment.list = res1.map.page.records.slice(0, 3)
     },
     skuAdapter() {
       const tree = this.setSkuTree()
@@ -156,7 +155,6 @@ export default {
         picture: this.goods.info.picUrl,
         specificationList: this.goods.specificationList,
         productList: this.goods.productList
-
       }
     },
     getNum() {

src/views/detail/modules/Comment.vue

@@ -16,7 +16,7 @@
       <div class="comment__line" />
     </div> -->
     <div class="item_cell_group">
-      <van-cell :value="'好评率' + rate" is-link>
+      <van-cell :value="rate != 0? '好评率' + rate + '%' : ''" is-link>
         <!-- 使用 title 插槽来自定义标题 -->
         <template #title>
           <span>评论</span>
@@ -31,7 +31,6 @@
         :key="idx"
         class="tags__item"
         :color="variables.red"
-        plain
       >{{ item }}</van-tag>
     </div>
 
@@ -40,11 +39,11 @@
         v-for="(item, idx) in list"
         :key="idx"
         :avatar="item.avatar"
-        :name="item.name"
+        :name="item.username"
-        :time="item.time"
+        :time="item.createTime"
-        :score="item.score"
+        :score="item.star"
-        :desc="item.desc"
+        :desc="item.content"
-        :imgs="item.imgs"
+        :imgs="item.picUrls"
         style="margin-top:12px"
       />
       <div class="main__btn">
@@ -116,9 +115,11 @@ export default {
   .tags {
     display: flex;
     flex-wrap: wrap;
-    padding: 10px 24px;
+    padding: 12px 24px;
     .tags__item {
-      margin: 14px 8px 0 0;
+      margin: 0 24px 0 0;
+      padding: 6px 12px;
+      border-radius: 20px;
     }
   }
   .custom-num {