H5-商品购买:商品详情

htmldev/dashboard/src/views/sell/food/food.vue

@@ -29,7 +29,7 @@
                 v-for="(item, index) in food.product_skus"
                 :key="index"
                 :class="{'active': SKUId === item.id}"
-                @click="selectSKU(item.id)">{{ item.product_sku }}</span>
+                @click="selectSKU(item)">{{ item.product_sku }}</span>
             </p>
           </div>
           <div
@@ -48,7 +48,9 @@
                 @click="selectAttach(SKUId, index, attr, item.attach_max_num)">{{ attr }}</span>
             </p>
           </div>
-          <div class="detail">
+          <!--商品详情传过来的是富文本，值有可能为空-->
+          <div v-if="food.product_desc && food.product_desc.length"
+               class="detail">
             <div class="subtitle-wrap">
               <h1 class="title">商品详情</h1>
             </div>
@@ -58,14 +60,12 @@
       </div>
       <div class="footer">
         <div class="price">
-          <span class="now">￥{{food.price}}</span><span v-show="food.oldPrice" class="old">￥{{food.oldPrice}}</span>
-        </div>
-        <div class="cartcontrol-wrapper">
-          <cartcontrol :food="food" @add="addFood"></cartcontrol>
+          <span class="now">￥{{ price | fen2Yuan }}</span>
         </div>
         <transition name="fade">
-          <div v-show="!food.count || food.count===0" class="buy" @click.stop.prevent="addFirst">
-            加入购物车
+          <div
+            class="buy"
+            @click.stop.prevent="addFirst">加入购物车
           </div>
         </transition>
       </div>
@@ -76,7 +76,6 @@
 <script type="text/ecmascript-6">
 import BScroll from 'better-scroll'
 import Vue from 'vue'
-import cartcontrol from '../cartcontrol/cartcontrol'
 import { Icon } from 'vant'
 
 export default {
@@ -89,18 +88,21 @@ export default {
     return {
       showFlag: false,
       SKUId: '', // 商品skuID
+      price: '', // 商品价格
       objProductAttachs: {} // 商品附加
     }
   },
   methods: {
     show () {
       this.SKUId = ''
+      this.price = ''
       this.objProductAttachs = {}
       this.showFlag = true
       this.$nextTick(() => {
         const skus = this.food.product_skus
         const attachs = this.food.product_attachs
         this.SKUId = skus[0].id
+        this.price = skus[0].product_price
         skus.forEach(SKU => {
           this.objProductAttachs[SKU.id] = attachs.map(() => [])
         })
@@ -121,18 +123,15 @@ export default {
       if (!event._constructed) {
         return
       }
-      this.$emit('add', event.target)
-      Vue.set(this.food, 'count', 1)
-    },
-    addFood (target) {
-      this.$emit('add', target)
+      console.log(111)
     },
     /**
      * 选择SKU
      * @param id SKU ID
      */
-    selectSKU (id) {
-      this.SKUId = id
+    selectSKU (item) {
+      this.SKUId = item.id
+      this.price = item.product_price
     },
     /**
      * 选择商品附加
@@ -164,7 +163,6 @@ export default {
     }
   },
   components: {
-    cartcontrol,
     'van-icon': Icon
   }
 }