H5：商品详情

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

@@ -1,85 +1,81 @@
 <template>
-  <transition name="move">
-    <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"/>
-          </div>
+  <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"/>
         </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>
+      <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>
+          </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>
           </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>
-            </div>
-            <p class="options">
+          <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>
-            </div>
-            <div class="des" v-html="food.product_desc"></div>
+          </p>
+        </div>
+        <!--商品详情传过来的是富文本，值有可能为空-->
+        <div v-if="food.product_desc && food.product_desc.length"
+             class="detail">
+          <div class="subtitle-wrap">
+            <h1 class="title">商品详情</h1>
           </div>
-          <div class="detail cartcontrol-wrapper">
-            <div class="subtitle-wrap">
-              <h1 class="title">购买数量</h1>
-            </div>
-            <cartcontrol :food="food" @add="addFood"/>
+          <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>
       </div>
-      <div class="footer">
-        <div
-          :class="{'highlight':price * food.product_num > 0}"
-          class="price">
-          <span class="now">￥{{ price * food.product_num | fen2Yuan }}</span>
-        </div>
-        <transition name="fade">
-          <div
-            class="buy"
-            :class="payClass"
-            @click.stop.prevent="addFirst">{{ food.is_sell_out === 1 ? '售罄' : '加入购物车'}}
-          </div>
-        </transition>
+    </div>
+    <div class="footer">
+      <div
+        :class="{'highlight':price * food.product_num > 0}"
+        class="price">
+        <span class="now">￥{{ price * food.product_num | fen2Yuan }}</span>
+      </div>
+      <div
+        :class="payClass"
+        class="buy"
+        @click.stop.prevent="addFirst">{{ food.is_sell_out === 1 ? '售罄' : '加入购物车'}}
       </div>
     </div>
-  </transition>
+  </div>
 </template>
 
 <script type="text/ecmascript-6">
@@ -229,15 +225,6 @@ export default {
   bottom: 0;
   z-index: 60;
   width: 100%;
-  transform: translate3d(0, 0, 0);
-
-  &.move-enter-active, &.move-leave-active {
-    transition: all 0.2s linear;
-  }
-
-  &.move-enter, &.move-leave-active {
-    transform: translate3d(0, 100%, 0);
-  }
 
   .food-content {
     min-height: 90%;