完善商品详情显示

src/components/GoodsItem/index.vue

@@ -17,14 +17,11 @@
 
 <script>
 export default {
-  props: ['img', 'title', 'desc', 'price', 'discount'],
+  props: ['goodsId', 'img', 'title', 'desc', 'price', 'discount'],
   methods: {
     onNavigate() {
       this.$router.push({
-        path: '/detail',
-        query: {
-          t: +new Date()
-        }
+        path: `/detail/${this.goodsId}`
       })
     }
   }

src/router/index.js

@@ -69,8 +69,9 @@ const routes = [
   },
   // 商品详情
   {
-    path: '/detail',
+    path: '/detail/:goodsId',
     name: 'Detail',
+    props: true,
     component: () => import('@/views/detail'),
     meta: {
       title: '商品详情',

src/views/detail/index.vue

@@ -9,19 +9,19 @@
     <Swiper :banner="banner" />
 
     <Overview
-      :title="overview.title"
-      :desc="overview.desc"
-      :price="overview.price"
-      :discount="overview.discount"
+      :title="overview.name"
+      :desc="overview.brief"
+      :price="overview.retailPrice"
+      :discount="overview.counterPrice"
     />
 
     <Section @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 :skudata="skudata" :goods="goods" v-model="isSkuShow" />
+    <!-- <Sku :skudata="skudata" :goods="goods" v-model="isSkuShow" /> -->
 
     <Tabbar @input="isSkuShow = $event" />
     <back-top />
@@ -43,6 +43,7 @@ import Skeleton from './modules/Skeleton'
 
 export default {
   name: 'Detail',
+  props: ['goodsId'],
   components: {
     NavBar,
     Swiper,
@@ -72,22 +73,12 @@ export default {
   methods: {
     getDetail() {
       getDetail({
-        goodsId: '1234'
+        goodsId: this.goodsId
       }).then(res => {
-        const {
-          banner,
-          overview,
-          comment,
-          description,
-          sku,
-          goods
-        } = res.entry
-        this.banner = banner
+        const { data: overview } = res.map
         this.overview = overview
-        this.comment = comment
-        this.description = description
-        this.skudata = sku
-        this.goods = goods
+        this.banner = overview.gallery
+        this.description = overview.picUrl
         this.isSkeletonShow = false
       })
     }

src/views/home/modules/Goods.vue

@@ -13,9 +13,10 @@
         <goods-item
           v-for="(item,idx) in goodsList"
           :key="idx"
+          :goodsId="item.id"
           :img="item.picUrl"
           :title="item.name"
-          :desc="item.desc"
+          :desc="item.brief"
           :price="item.retailPrice"
           :discount="item.counterPrice"
         />

src/views/home/modules/GoodsLimit.vue

@@ -12,9 +12,10 @@
         <goods-item
           v-for="(item,idx) in goodsList"
           :key="idx"
+          :goodsId="item.id"
           :img="item.picUrl"
           :title="item.name"
-          :desc="item.desc"
+          :desc="item.brief"
           :price="item.retailPrice"
           :discount="item.counterPrice"
         />