H5：商品详情

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

@@ -1,65 +1,64 @@
 <template>
-  <div
-    v-show="showFlag"
-    ref="food"
-    class="food">
-    <div class="food-content">
-      <div class="image-header">
-        <img
-          :src="food.product_img_url"
-          alt="">
-        <div
-          class="back"
-          @click="hide">
-          <van-icon
-            color="#fff"
-            name="close"
-            size="30px"/>
+  <van-popup
+    v-model="showFlag"
+    :lock-scroll="false"
+    closeable
+    position="bottom"
+    round
+    style="height: 95%;">
+    <div
+      ref="food"
+      class="food">
+      <div class="food-content">
+        <div class="image-header">
+          <img
+            :src="food.product_img_url"
+            alt="">
         </div>
-      </div>
-      <div class="content">
-        <div class="title-wrap">
-          <h1 class="title">{{ food.product_name }}</h1>
-          <p v-if="false">{{ food.product_sale_num }}人推荐</p>
-        </div>
-        <div class="detail">
-          <p class="options">
+        <div class="content">
+          <div class="title-wrap">
+            <h1 class="title">{{ food.product_name }}</h1>
+            <p v-if="false">{{ food.product_sale_num }}人推荐</p>
+          </div>
+          <div class="detail">
+            <p class="options">
               <span
                 v-for="(item, index) in food.product_skus"
                 :key="index"
                 :class="{'active': SKUId === item.id}"
                 @click="selectSKU(item)">{{ item.product_sku }}</span>
-          </p>
-        </div>
-        <div
-          v-for="(item, index) in food.product_attachs"
-          :key="index"
-          class="detail">
-          <div class="subtitle-wrap">
-            <h1 class="title">{{ item.attach_name }}</h1>
-            <p>（最多可选{{ item.attach_max_num }}个）</p>
+            </p>
           </div>
-          <p class="options">
+          <div
+            v-for="(item, index) in food.product_attachs"
+            :key="index"
+            class="detail">
+            <div class="subtitle-wrap">
+              <h1 class="title">{{ item.attach_name }}</h1>
+              <p>（最多可选{{ item.attach_max_num }}个）</p>
+            </div>
+            <p class="options">
               <span
                 :key="idx"
                 v-for="(attr, idx) in item.attach_content"
                 :class="{'active': Array.isArray(objProductAttachs[SKUId]) && Array.isArray(objProductAttachs[SKUId][index]) && objProductAttachs[SKUId][index].findIndex(attachName => attachName === attr) > -1}"
                 @click="selectAttach(SKUId, index, attr, item.attach_max_num)">{{ attr }}</span>
-          </p>
-        </div>
-        <!--商品详情传过来的是富文本，值有可能为空-->
-        <div v-if="food.product_desc && food.product_desc.length"
-             class="detail">
-          <div class="subtitle-wrap">
-            <h1 class="title">商品详情</h1>
+            </p>
           </div>
-          <div class="des" v-html="food.product_desc"></div>
-        </div>
-        <div class="detail cartcontrol-wrapper">
-          <div class="subtitle-wrap">
-            <h1 class="title">购买数量</h1>
+          <!--商品详情传过来的是富文本，值有可能为空-->
+          <div v-if="food.product_desc && food.product_desc.length"
+               class="detail">
+            <div class="subtitle-wrap">
+              <h1 class="title">商品详情</h1>
+            </div>
+            <div class="des" v-html="food.product_desc"></div>
+          </div>
+          <div class="detail cartcontrol-wrapper">
+            <div class="subtitle-wrap">
+              <h1 class="title">购买数量</h1>
+            </div>
+            <cartcontrol :food="food" @add="addFood"/>
           </div>
-          <cartcontrol :food="food" @add="addFood"/>
         </div>
       </div>
     </div>
@@ -75,14 +74,14 @@
         @click.stop.prevent="addFirst">{{ food.is_sell_out === 1 ? '售罄' : '加入购物车'}}
       </div>
     </div>
-  </div>
+  </van-popup>
 </template>
 
 <script type="text/ecmascript-6">
 import BScroll from 'better-scroll'
 import Vue from 'vue'
 import cartcontrol from '../cartcontrol/cartcontrol'
-import { Icon, Toast } from 'vant'
+import { Toast, Popup } from 'vant'
 import { mapGetters } from 'vuex'
 import { apiCartAdd } from '../goods/api'
 import { formatArray } from '../../../utils'
@@ -115,19 +114,15 @@ export default {
   },
   methods: {
     show () {
-      this.SKUId = ''
-      this.price = ''
-      this.objProductAttachs = {}
+      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(() => [])
+      })
       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(() => [])
-        })
-
+      setTimeout(() => {
         if (!this.scroll) {
           this.scroll = new BScroll(this.$refs.food, {
             click: true
@@ -135,7 +130,7 @@ export default {
         } else {
           this.scroll.refresh()
         }
-      })
+      }, 500)
     },
     hide () {
       this.showFlag = false
@@ -155,12 +150,11 @@ export default {
         num: count, // 商品数量
         product_attach: formatArray(allAttach).join(',') // 商品附加
       }
-      if (!event._constructed) {
-        return
-      }
+
       if (isSellOut === 1 || count < 1) {
         return
       }
+
       try {
         const { status, msg } = await apiCartAdd(postData)
         if (status) {
@@ -212,27 +206,16 @@ export default {
   },
   components: {
     cartcontrol,
-    'van-icon': Icon
+    'van-popup': Popup
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .food {
-  position: fixed;
-  left: 0;
-  top: 16px;
-  bottom: 0;
-  z-index: 60;
   width: 100%;
-
-  .food-content {
-    min-height: 90%;
-    padding-bottom: 100px;
-    border-radius: 16px 16px 0 0;
-    overflow: hidden;
-    background: #fff;
-  }
+  height: calc(100% - 68px);
+  overflow: hidden;
 
   .image-header {
     position: relative;
@@ -259,8 +242,6 @@ export default {
   }
 
   .content {
-    padding-bottom: 68px;
-
     .title {
       font-size: 18px;
       font-family: PingFangSC-Semibold, PingFang SC;
@@ -353,10 +334,9 @@ export default {
 }
 
 .footer {
-  position: absolute;
+  position: relative;
   left: 0;
-  bottom: 0;
-  right: 0;
+  top: 0;
   z-index: 1;
   display: flex;
   justify-content: space-between;

htmldev/dashboard/src/views/sell/goods/api/index.js

@@ -74,5 +74,6 @@ export const apiCartUpdate = (id, type) => request({
 export const apiCartAdd = (postData) => request({
   method: 'POST',
   url: '/api/v1/user/cart/add',
-  data: JSON.stringify(postData)
+  data: JSON.stringify(postData),
+  showLoading: true
 })

htmldev/dashboard/src/views/sell/goods/index.vue

@@ -164,7 +164,9 @@ export default {
         } else {
           Toast(msg)
         }
-        this.$refs.food.show()
+        this.$nextTick(() => {
+          this.$refs.food.show()
+        })
       } catch (err) {}
     },
     addFood (target) {