H5-商品列表增加售罄按钮

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

@@ -52,18 +52,25 @@
                   <div class="price">
                     <span class="now">￥{{ food.product_price | fen2Yuan }}</span>
                   </div>
+                  <!--第一个版本暂时不用-->
                   <div
-                    v-if="food.is_sell_out === 0"
+                    v-if="false"
                     class="cartcontrol-wrapper">
                     <cartcontrol
                       :food="food"
                       @add="addFood"/>
                   </div>
+                  <van-button
+                    v-if="food.is_sell_out === 0"
+                    class="btn-show-sku"
+                    type="danger">选规格
+                  </van-button>
                   <!--售罄图标-->
                   <img
                     v-if="food.is_sell_out === 1"
                     alt=""
-                    class="sell-out" src="./image/ic_sold_out@2x.png">
+                    class="sell-out"
+                    src="./image/ic_sold_out@2x.png">
                 </div>
               </li>
             </ul>
@@ -94,7 +101,7 @@ import food from '../food/food'
 import editTableNum from '../editTableNum/index'
 import { apiProductList, apiProductDetail } from './api'
 import { mapGetters } from 'vuex'
-import { Toast } from 'vant'
+import { Toast, Button } from 'vant'
 
 const mockDataJson = require('../../../mock/data.json')
 
@@ -157,9 +164,9 @@ export default {
       this.foodsScroll.scrollToElement(el, 300, true, 3)
     },
     async selectFood (food, event) {
-      if (!event._constructed) {
-        return
-      }
+      // if (!event._constructed) {
+      //   return
+      // }
       try {
         const { data, status, msg } = await apiProductDetail(food.id)
         if (status) {
@@ -241,7 +248,8 @@ export default {
     shopcart,
     cartcontrol,
     food,
-    editTableNum
+    editTableNum,
+    'van-button': Button
   }
 }
 </script>
@@ -380,6 +388,23 @@ export default {
       bottom: 1px;
     }
 
+    .btn-show-sku {
+      position: absolute;
+      right: 0;
+      bottom: 9px;
+      width: 70px;
+      height: 24px;
+      border: none;
+      background: #D32323;
+      border-radius: 12px;
+
+      ::v-deep .van-button__text {
+        font-size: 12px;
+        color: #FFFFFF;
+        line-height: 24px;
+      }
+    }
+
     .sell-out {
       position: absolute;
       right: 0;