From a019ac275d4e229fc37a29ddb0b666fbb5bb52c1 Mon Sep 17 00:00:00 2001
From: YunaiV <>
Date: Wed, 27 Mar 2019 00:24:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=20mobile=20=EF=BC=9A?=
 =?UTF-8?q?=E5=95=86=E5=93=81=20H5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mobile-web/src/api/product.js          |  10 +
 mobile-web/src/page/product/detail.vue | 378 +++++++++++++++----------
 2 files changed, 238 insertions(+), 150 deletions(-)

diff --git a/mobile-web/src/api/product.js b/mobile-web/src/api/product.js
index 22e77135e..cc9146a60 100644
--- a/mobile-web/src/api/product.js
+++ b/mobile-web/src/api/product.js
@@ -20,4 +20,14 @@ export function getProductSpuPage(cid, pageNo, pageSize) {
       pageSize: pageSize || 10,
     }
   });
+}
+
+export function getProductSpuInfo(id) {
+  return request({
+    url: 'product-api/users/spu/info',
+    method: 'get',
+    params: {
+      id,
+    }
+  });
 }
\ No newline at end of file
diff --git a/mobile-web/src/page/product/detail.vue b/mobile-web/src/page/product/detail.vue
index 0c43305a1..7807772c3 100644
--- a/mobile-web/src/page/product/detail.vue
+++ b/mobile-web/src/page/product/detail.vue
@@ -2,63 +2,64 @@
   <div class="goods">
      <headerNav title="商品详情"/>
     <van-swipe class="goods-swipe" :autoplay="3000">
-      <van-swipe-item v-for="thumb in goods.thumb" :key="thumb">
+      <van-swipe-item v-for="thumb in spu.picUrls" :key="thumb">
         <img :src="thumb" >
       </van-swipe-item>
     </van-swipe>
 
     <van-cell-group>
       <van-cell>
-        <span class="goods-price">{{ formatPrice(goods.price) }}</span>
-        <span class="goods-market-price">{{ formatPrice(goods.market_price) }}</span>
-        <div class="goods-title">{{ goods.title }}</div>
-        <div class="goods-subtit">{{goods.subtitle}}</div>
+        <span class="goods-price">{{ formatPrice(initialSku.price) }}</span>
+        <!--<span class="goods-market-price">{{ formatPrice(goods.market_price) }}</span>-->
+        <div class="goods-title">{{ spu.name }}</div>
+        <div class="goods-subtit">{{spu.sellPoint}}</div>
       </van-cell>
       
-      <van-cell   @click="onClickShowTag" class="goods-tag" >
-        <template slot="title" style="font-size:10px;">
-            <img src="https://haitao.nos.netease.com/ba8a4c2fdaa54f82a45261293c116af61419663676663i46n3jlh10028.png"/>
-            <span >挪威品牌</span>
-            <img src="https://haitao.nosdn2.127.net/13bd59e6e29a4f06b278c586629e690d.png" />
-            <span >跨境商品</span>
-            <van-icon name="passed" color="red" />
-            <span >次日达</span>
-            <van-icon name="passed" color="red" />
-            <span >自提</span>
-            <van-icon name="passed" color="red" />
-            <span >闪电退款</span>
-            <van-icon name="passed" color="red" />
-            <span >前海保税仓</span>
-            <van-icon name="passed" color="red" />
-            <span >七天无理由退货（拆封后不支持）</span>
-        </template>
-      </van-cell>   
+      <!--<van-cell   @click="onClickShowTag" class="goods-tag" >-->
+        <!--<template slot="title" style="font-size:10px;">-->
+            <!--<img src="https://haitao.nos.netease.com/ba8a4c2fdaa54f82a45261293c116af61419663676663i46n3jlh10028.png"/>-->
+            <!--<span >挪威品牌</span>-->
+            <!--<img src="https://haitao.nosdn2.127.net/13bd59e6e29a4f06b278c586629e690d.png" />-->
+            <!--<span >跨境商品</span>-->
+            <!--<van-icon name="passed" color="red" />-->
+            <!--<span >次日达</span>-->
+            <!--<van-icon name="passed" color="red" />-->
+            <!--<span >自提</span>-->
+            <!--<van-icon name="passed" color="red" />-->
+            <!--<span >闪电退款</span>-->
+            <!--<van-icon name="passed" color="red" />-->
+            <!--<span >前海保税仓</span>-->
+            <!--<van-icon name="passed" color="red" />-->
+            <!--<span >七天无理由退货（拆封后不支持）</span>-->
+        <!--</template>-->
+      <!--</van-cell>   -->
     </van-cell-group>
 
-    <van-cell-group class="goods-cell-group">
-      <van-cell is-link  @click="showPromotion" >
-        <template slot="title">
-            <span style="margin-right: 10px;">领券</span>
-            <van-tag type="danger" mark  style="margin-right: 5px;">满180减30</van-tag>
-            <van-tag type="danger" mark  style="margin-right: 5px;">满300减100</van-tag>
-        </template>
-      </van-cell>
-      
-      <van-cell  is-link @click="showPromotion" >
-        <template slot="title">
-            <span style="margin-right: 10px;">促销</span>
-            <van-tag type="danger" style="margin-right: 5px;">多买优惠</van-tag>
-            <van-tag type="danger" style="margin-right: 5px;">满减</van-tag>
-            <van-tag type="danger" style="margin-right: 5px;">限购</van-tag>
-        </template>
-      </van-cell>
-    </van-cell-group>
+
+    <!--<van-cell-group class="goods-cell-group">-->
+      <!--<van-cell is-link  @click="showPromotion" >-->
+        <!--<template slot="title">-->
+            <!--<span style="margin-right: 10px;">领券</span>-->
+            <!--<van-tag type="danger" mark  style="margin-right: 5px;">满180减30</van-tag>-->
+            <!--<van-tag type="danger" mark  style="margin-right: 5px;">满300减100</van-tag>-->
+        <!--</template>-->
+      <!--</van-cell>-->
+      <!---->
+      <!--<van-cell  is-link @click="showPromotion" >-->
+        <!--<template slot="title">-->
+            <!--<span style="margin-right: 10px;">促销</span>-->
+            <!--<van-tag type="danger" style="margin-right: 5px;">多买优惠</van-tag>-->
+            <!--<van-tag type="danger" style="margin-right: 5px;">满减</van-tag>-->
+            <!--<van-tag type="danger" style="margin-right: 5px;">限购</van-tag>-->
+        <!--</template>-->
+      <!--</van-cell>-->
+    <!--</van-cell-group>-->
     
     <van-cell-group class="goods-cell-group">
       <van-cell  is-link @click="showSku" >
         <template slot="title">
             <span style="margin-right: 10px;">已选</span>
-            <span >10件装</span>
+            <span>{{ formatSkuText(initialSku) }}</span>
         </template>
       </van-cell>
       
@@ -66,7 +67,7 @@
     
     <div class="goods-info">
         <p class="goods-info-title" >图文详情</p>
-        <div v-html="goods.info"></div>
+        <div v-html="spu.description"></div>
     </div>
     <van-goods-action>
         
@@ -83,88 +84,89 @@
         立即购买
       </van-goods-action-big-btn>
     </van-goods-action>
-    <van-actionsheet v-model="show" title="促销" style="font-size:14px;">
-        
-            <van-cell  is-link @click="sorry" >
-                <template slot="title">
-                    <van-tag type="danger">多买优惠</van-tag>
-                    <span> 满2件，总价打9折</span>
-                </template>
-            </van-cell>
-            <van-cell  is-link @click="sorry" >
-                <template slot="title">
-                    <van-tag type="danger">满减</van-tag>
-                    <span> 满100元减50元</span>
-                </template>
-            </van-cell>
-            <van-cell  is-link @click="sorry" >
-                <template slot="title">
-                    <van-tag type="danger">限购</van-tag>
-                    <span> 购买不超过5件时享受单件价￥8.00，超出数量以结算价为准</span>
-                </template>
-            </van-cell>
-    </van-actionsheet>
+
+    <!--<van-actionsheet v-model="show" title="促销" style="font-size:14px;">-->
+        <!---->
+            <!--<van-cell  is-link @click="sorry" >-->
+                <!--<template slot="title">-->
+                    <!--<van-tag type="danger">多买优惠</van-tag>-->
+                    <!--<span> 满2件，总价打9折</span>-->
+                <!--</template>-->
+            <!--</van-cell>-->
+            <!--<van-cell  is-link @click="sorry" >-->
+                <!--<template slot="title">-->
+                    <!--<van-tag type="danger">满减</van-tag>-->
+                    <!--<span> 满100元减50元</span>-->
+                <!--</template>-->
+            <!--</van-cell>-->
+            <!--<van-cell  is-link @click="sorry" >-->
+                <!--<template slot="title">-->
+                    <!--<van-tag type="danger">限购</van-tag>-->
+                    <!--<span> 购买不超过5件时享受单件价￥8.00，超出数量以结算价为准</span>-->
+                <!--</template>-->
+            <!--</van-cell>-->
+    <!--</van-actionsheet>-->
     
-    <van-actionsheet v-model="showTag" title="服务说明" style="font-size:14px;">
-        
-            <van-cell>
-                <template slot="title">
-                    <van-icon name="passed" color="red" style="margin-right: 10px;" />
-                    <span >次日达</span>
-                    <div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">指定时间前下单，次日送达</div>
-                </template>
-            </van-cell>
-            <van-cell>
-                <template slot="title">
-                    <van-icon name="passed" color="red" style="margin-right: 10px;" />
-                    <span >自提</span>
-                    <div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">我们提供多种自提服务，包括自提点、自助提货柜、移动自提车等服务</div>
-                </template>
-            </van-cell>
-            <van-cell>
-                <template slot="title">
-                    <van-icon name="passed" color="red" style="margin-right: 10px;" />
-                    <span >闪电退款</span>
-                    <div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">签收7天内退货的，提供先退款后退货服务。</div>
-                </template>
-            </van-cell>
-            <van-cell>
-                <template slot="title">
-                    <van-icon name="passed" color="red" style="margin-right: 10px;" />
-                    <span >七天无理由退货（拆封后不支持）</span>
-                    <div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">七天无理由退货（拆封后不支持）</div>
-                </template>
-            </van-cell>
-            <van-cell>
-                <template slot="title">
-                    <van-icon name="passed" color="red" style="margin-right: 10px;" />
-                    <span >前海保税仓</span>
-                    <div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">本商品由前海保税仓发货</div>
-                </template>
-            </van-cell>
-    </van-actionsheet>
+    <!--<van-actionsheet v-model="showTag" title="服务说明" style="font-size:14px;">-->
+        <!---->
+            <!--<van-cell>-->
+                <!--<template slot="title">-->
+                    <!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
+                    <!--<span >次日达</span>-->
+                    <!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">指定时间前下单，次日送达</div>-->
+                <!--</template>-->
+            <!--</van-cell>-->
+            <!--<van-cell>-->
+                <!--<template slot="title">-->
+                    <!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
+                    <!--<span >自提</span>-->
+                    <!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">我们提供多种自提服务，包括自提点、自助提货柜、移动自提车等服务</div>-->
+                <!--</template>-->
+            <!--</van-cell>-->
+            <!--<van-cell>-->
+                <!--<template slot="title">-->
+                    <!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
+                    <!--<span >闪电退款</span>-->
+                    <!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">签收7天内退货的，提供先退款后退货服务。</div>-->
+                <!--</template>-->
+            <!--</van-cell>-->
+            <!--<van-cell>-->
+                <!--<template slot="title">-->
+                    <!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
+                    <!--<span >七天无理由退货（拆封后不支持）</span>-->
+                    <!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">七天无理由退货（拆封后不支持）</div>-->
+                <!--</template>-->
+            <!--</van-cell>-->
+            <!--<van-cell>-->
+                <!--<template slot="title">-->
+                    <!--<van-icon name="passed" color="red" style="margin-right: 10px;" />-->
+                    <!--<span >前海保税仓</span>-->
+                    <!--<div style="margin-left: 24px;font-size:10px;color:#7d7d7d;">本商品由前海保税仓发货</div>-->
+                <!--</template>-->
+            <!--</van-cell>-->
+    <!--</van-actionsheet>-->
+
     <van-sku
           v-model="showBase"
-          :sku="skuData.sku"
-          :goods="skuData.goods_info"
-          :goods-id="skuData.goods_id"
-          :hide-stock="skuData.sku.hide_stock"
-          :quota="skuData.quota"
-          :quota-used="skuData.quota_used"
-          reset-stepper-on-hide
-          reset-selected-sku-on-hide
-          disable-stepper-input
+          :sku="vanSku"
+          :initial-sku="initialSku"
+          :goods="vanSpu"
+          :goods-id="spu.id"
+          :hide-stock="hideStock"
           :close-on-click-overlay="closeOnClickOverlay"
-          :message-config="messageConfig"
-          :custom-sku-validator="customSkuValidator"
+          @stepper-change="stepperChange"
+          @sku-selected="skuSelected"
           @buy-clicked="onBuyClicked"
           @add-cart="onAddCartClicked"
         />
+      <!--:quota="skuData.quota"-->
+
   </div>
 </template>
 
 <script>
 import skuData from '../../data/sku';
+import { getProductSpuInfo } from '../../api/product';
 
 export default {
   components: {
@@ -172,6 +174,23 @@ export default {
   data() {
     this.skuData = skuData;
     return {
+      spu: {}, // 商品信息
+      vanSku: {
+        tree: [], // 规格数组
+        list: [], // sku 数组
+      },
+      // TODO 后面，要加 sku 的 title 和 picture
+      vanSpu: {
+        title: '',
+        picture: '',
+      },
+      initialSku: { // 选中的 sku
+        // 具体规格
+        // price 价格
+        // quantity 选中的数量
+      },
+      attrValueMap: new Map(), // 规格值的映射
+
       show:false,
       showTag:false,
       goods: {
@@ -187,47 +206,40 @@ export default {
         ],
         info:'<p style="text-align:center;"><img src="https://haitao.nosdn2.127.net/ac19460151ee4d95a6657202bcfc653c1531470912089jjjq8ml410763.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/2a91cfad22404e5498d347672b1440301531470912182jjjq8mnq10764.jpg" ></p><p style="text-align:center;"><img src="https://haitao.nos.netease.com/caddd5a213de4c1cb1347c267e8275731531470912412jjjq8mu410765.jpg" ></p>',
       },
-      showBase: false,
-      showCustom: false,
-      showStepper: false,
-      closeOnClickOverlay: true,
-      initialSku: {
-        s1: '30349',
-        s2: '1193'
-      },
-      customSkuValidator: (component) => {
-        return '请选择xxx';
-      },
-      customStepperConfig: {
-        quotaText: '单次限购100件',
-        stockFormatter: (stock) => `剩余${stock}间`,
-        handleOverLimit: (data) => {
-          const { action, limitType, quota } = data;
-          if (action === 'minus') {
-            this.$toast('至少选择一件商品');
-          } else if (action === 'plus') {
-            if (limitType === LIMIT_TYPE.QUOTA_LIMIT) {
-              this.$toast(`限购${quota}件`);
-            } else {
-              this.$toast('库存不够了~~');
-            }
-          }
-        }
-      },
-      messageConfig: {
-        uploadImg: (file, img) => {
-          return new Promise(resolve => {
-            setTimeout(() => resolve(img), 1000);
-          });
-        },
-        uploadMaxSize: 3
-      }
+      showBase: false, // 是否显示 sku 坦诚
+      closeOnClickOverlay: true, // 是否在点击蒙层后关闭
+      hideStock: true, // 是否显示商品剩余库存
+
     };
   },
   methods: {
     formatPrice(data) {
       return '¥' + (data / 100).toFixed(2);
     },
+    formatSkuText(data) { // 渲染已选择的 sku 的文本
+      let text = '';
+      for (let prop in data) {
+        if (prop.indexOf('attr_') === 0) {
+          text = text + this.attrValueMap.get(data[prop]) + ' ';
+        }
+      }
+      text = text + 'x ' + data.quantity + ' 件';
+      return text;
+    },
+
+    stepperChange(value) { // 选择 sku 数量时
+      this.initialSku.quantity = value;
+    },
+    skuSelected({skuValue, selectedSku, selectedSkuComb}) { // 选择 sku
+      console.log(skuValue);
+      console.log(selectedSku);
+      console.log(selectedSkuComb);
+      this.initialSku = {
+        ...selectedSkuComb,
+        quantity: 1,
+      };
+    },
+
     onClickCart() {
       this.$router.push('/cart');
     },
@@ -237,7 +249,7 @@ export default {
     showPromotion() {
         this.show=true;
     },
-    showSku(){
+    showSku() { // 展示 sku 选择
         this.showBase=true;
     },
     onClickShowTag(){
@@ -249,7 +261,73 @@ export default {
     onAddCartClicked(data) {
       this.$toast(JSON.stringify(data));
     },
-
+  },
+  mounted() {
+    let id = this.$route.params.id; // 商品编号
+    let response = getProductSpuInfo(id);
+    response.then(data => {
+      // 设置 spu
+      this.spu = data;
+      // 初始化 vanSku
+      let vanSku = {
+        tree: [],
+        list: [],
+      };
+      for (let i = 0; i < data.skus.length; i++) {
+        let sku = data.skus[i];
+        // list 商品 sku 信息
+        let skuVO = {
+          id: sku.id, // skuId，下单时后端需要
+          price: sku.price, // 价格（单位分）
+          stock_num: sku.quantity // 当前 sku 组合对应的库存
+        };
+        for (let j = 0; j < sku.attrs.length; j++) {
+          let attr = sku.attrs[j];
+          skuVO['attr_' + attr.attrId] =attr.attrValueId;
+        }
+        vanSku.list.push(skuVO);
+        // tree 规格
+        for (let j = 0; j < sku.attrs.length; j++) {
+          let attr = sku.attrs[j];
+          let attrVO;
+          for (let k = 0; k < vanSku.tree.length; k++) {
+            if (attr.attrName === vanSku.tree[k].k) {
+              attrVO = vanSku.tree[k];
+              break;
+            }
+          }
+          if (!attrVO) { // 未找到，则初始化该规格
+            attrVO = {
+              k: attr.attrName, // skuKeyName：规格类目名称
+              v: [],
+              k_s: 'attr_' + attr.attrId,
+            };
+            vanSku.tree.push(attrVO);
+          }
+          let attrValueFound = false; // 如果规格值已经存在，则不再添加
+          for (let k = 0; k < attrVO.v.length; k++) {
+            if (attr.attrValueId === attrVO.v[k].id) {
+              attrValueFound = true;
+              break;
+            }
+          }
+          if (!attrValueFound) {
+            attrVO.v.push({
+              id: attr.attrValueId, // skuValueId：规格值 id
+              name: attr.attrValueName, // skuValueName：规格值名称
+            });
+          }
+          // 初始化 attrValueMap
+          this.attrValueMap.set(attr.attrValueId, attr.attrValueName);
+        }
+      }
+      // debugger;
+      this.vanSku = vanSku;
+      // 初始化
+      // TODO 芋艿，需要处理下第一个有效的 sku
+      this.initialSku = vanSku.list[0];
+      this.initialSku.quantity = 1;
+    });
   }
 };
 </script>