完善商品详情接口

mock/detail.js

@@ -88,30 +88,6 @@ export default [
                         'http://m.360buyimg.com/mobilecms/s843x843_jfs/t1/61801/33/670/234001/5cee2008Ea77b2f13/c193d2370dab7ff2.jpg',
                       previewImgUrl:
                         'http://m.360buyimg.com/mobilecms/s843x843_jfs/t1/61801/33/670/234001/5cee2008Ea77b2f13/c193d2370dab7ff2.jpg'
-                    },
-                    {
-                      id: '1003',
-                      name: '三体2：黑暗森林',
-                      imgUrl:
-                        'http://m.360buyimg.com/mobilecms/s843x843_jfs/t5953/39/822101194/248686/1d0b6b5e/592bf161N3c12cc3a.jpg',
-                      previewImgUrl:
-                        'http://m.360buyimg.com/mobilecms/s843x843_jfs/t5953/39/822101194/248686/1d0b6b5e/592bf161N3c12cc3a.jpg'
-                    },
-                    {
-                      id: '1004',
-                      name: '三体（纪念版）（套装共3册）',
-                      imgUrl:
-                        'http://m.360buyimg.com/mobilecms/s843x843_jfs/t7084/309/1723776720/329560/b5511e85/598d1fe1N95cad7bc.jpg',
-                      previewImgUrl:
-                        'http://m.360buyimg.com/mobilecms/s843x843_jfs/t7084/309/1723776720/329560/b5511e85/598d1fe1N95cad7bc.jpg'
-                    },
-                    {
-                      id: '1005',
-                      name: '三体2.黑暗森林（典藏版）',
-                      imgUrl:
-                        'http://m.360buyimg.com/mobilecms/s843x843_jfs/t4288/65/1458919872/394831/25fb907b/58c213a5N4bf8e476.jpg',
-                      previewImgUrl:
-                        'http://m.360buyimg.com/mobilecms/s843x843_jfs/t4288/65/1458919872/394831/25fb907b/58c213a5N4bf8e476.jpg'
                     }
                   ],
                   k_s: 's1'

package.json

@@ -14,7 +14,7 @@
     "url": "git+https://github.com/Ewall1106/mall"
   },
   "scripts": {
-    "dev": "vue-cli-service serve --mode=production",
+    "dev": "vue-cli-service serve",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
@@ -25,8 +25,9 @@
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "js-cookie": "^2.2.1",
+    "lodash": "^4.17.19",
     "normalize.css": "^8.0.1",
-    "vant": "^2.5.5",
+    "vant": "^2.9.4",
     "vue": "^2.6.11",
     "vue-clipboard2": "^0.3.1",
     "vue-content-loader": "^0.2.3",

src/views/detail/index.vue

@@ -9,10 +9,10 @@
     <Swiper :banner="banner" />
 
     <Overview
-      :title="overview.name"
+      :title="info.name"
-      :desc="overview.brief"
+      :desc="info.brief"
-      :price="overview.retailPrice"
+      :price="info.retailPrice"
-      :discount="overview.counterPrice"
+      :discount="info.counterPrice"
     />
 
     <Section @input="isSkuShow = $event" />
@@ -21,7 +21,7 @@
 
     <Description :description="description" />
 
-    <!-- <Sku :skudata="skudata" :goods="goods" v-model="isSkuShow" /> -->
+    <Sku :skuData="skuData" :goods="skuGoods" v-model="isSkuShow" />
 
     <Tabbar @input="isSkuShow = $event" />
     <back-top />
@@ -40,6 +40,7 @@ import Description from './modules/Description'
 import Tabbar from './modules/Tabbar'
 import Sku from './modules/Sku'
 import Skeleton from './modules/Skeleton'
+import _ from 'lodash'
 
 export default {
   name: 'Detail',
@@ -58,11 +59,12 @@ export default {
   data() {
     return {
       banner: [],
-      overview: {},
+      goods: {},
+      info: {},
       comment: {},
       description: '',
-      skudata: {},
+      skuData: {},
-      goods: {},
+      skuGoods: {},
       isSkuShow: false,
       isSkeletonShow: true
     }
@@ -75,12 +77,83 @@ export default {
       getDetail({
         goodsId: this.goodsId
       }).then(res => {
-        const { data: overview } = res.map
+        const goods = res.map
-        this.overview = overview
+        this.goods = goods
-        this.banner = overview.gallery
+        this.info = goods.info
-        this.description = overview.picUrl
+        this.banner = goods.info.gallery
+        this.description = goods.info.picUrl
+        this.skuAdapter()
         this.isSkeletonShow = false
       })
+    },
+    skuAdapter() {
+      const tree = this.setSkuTree()
+      const list = this.setSkuList()
+      const skuInfo = {
+        price: parseInt(this.goods.info.retailPrice), // 未选择规格时的价格
+        stock_num: 0, // TODO 总库存
+        collection_id: '', // 无规格商品skuId取collection_id，否则取所选sku组合对应的id
+        none_sku: false, // 是否无规格商品
+        hide_stock: true
+      }
+      this.skuData = {
+        tree,
+        list,
+        ...skuInfo
+      }
+      this.skuGoods = {
+        title: this.goods.info.name,
+        picture: this.goods.info.picUrl
+      }
+    },
+    setSkuTree() {
+      const specifications = []
+      _.each(this.goods.specificationList, (v, k) => {
+        const values = []
+        _.each(v.valueList, vv => {
+          vv.name = vv.value
+          values.push({
+            id: vv.id,
+            name: vv.value,
+            imUrl: vv.picUrl
+          })
+        })
+        specifications.push({
+          k: v.name,
+          v: values,
+          k_s: 's' + (~~k + 1)
+        })
+      })
+
+      return specifications
+    },
+    setSkuList() {
+      const skuList = []
+      _.each(this.goods.productList, v => {
+        var skuListObj = {}
+        _.each(v.specifications, (specificationName, index) => {
+          skuListObj['s' + (~~index + 1)] = this.findSpecValueIdByName(specificationName)
+        })
+
+        skuListObj.price = v.price * 100
+        skuListObj.stock_num = v.number
+        skuList.push(skuListObj)
+      })
+      return skuList
+    },
+    findSpecValueIdByName(name) {
+      let id = 0
+      _.each(this.goods.specificationList, specification => {
+        _.each(specification.valueList, specValue => {
+          if (specValue.value === name) {
+            id = specValue.id
+          }
+        })
+        if (id !== 0) {
+
+        }
+      })
+      return id
     }
   }
 }

src/views/detail/modules/Sku.vue

@@ -2,7 +2,7 @@
   <div class="goods-sku">
     <van-sku
       v-model="isShow"
-      :sku="skudata"
+      :sku="skuData"
       :goods="goods"
       :close-on-click-overlay="true"
       @buy-clicked="onBuy"
@@ -18,7 +18,7 @@ export default {
       type: Boolean,
       default: false
     },
-    skudata: Object,
+    skuData: Object,
     goods: Object
   },
   computed: {
@@ -31,6 +31,7 @@ export default {
       }
     }
   },
+  created() { console.log(1) },
   methods: {
     onBuy() {
       console.log('buy')