H5-商品详情接口对接

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

@@ -1,43 +1,55 @@
 <template>
   <transition name="move">
-    <div v-show="showFlag" class="food" ref="food">
+    <div
+      v-show="showFlag"
+      ref="food"
+      class="food">
       <div class="food-content">
         <div class="image-header">
-          <img :src="food.image" alt="">
-          <div class="back" @click="hide">
-            <van-icon name="close" size="30px" color="#fff"/>
+          <img
+            :src="food.product_img_url"
+            alt="">
+          <div
+            class="back"
+            @click="hide">
+            <van-icon
+              color="#fff"
+              name="close"
+              size="30px"/>
           </div>
         </div>
         <div class="content">
           <div class="title-wrap">
-            <h1 class="title">曼哈顿</h1>
-            <p>2人推荐</p>
+            <h1 class="title">{{ food.product_name }}</h1>
+            <p>{{ food.product_sale_num }}人推荐</p>
           </div>
           <div class="detail">
-            <div class="subtitle-wrap">
-              <h1 class="title">选配</h1>
-              <p>（最多选4个）</p>
-            </div>
             <p class="options">
-              <span v-for="(item, index) in ['可口可乐', '雪碧', '汤力水', '苏打水']" :class="{'active': index === 1}">{{
-                  item
-                }}</span>
+              <span
+                v-for="(item, index) in food.product_skus"
+                :key="index"
+                :class="{'active': index === 0}">{{ item.product_sku }}</span>
             </p>
           </div>
-          <div class="detail">
+          <div
+            v-for="(item, index) in food.product_attachs"
+            :key="index"
+            class="detail">
             <div class="subtitle-wrap">
-              <h1 class="title">附加选项</h1>
-              <p>（单选）</p>
+              <h1 class="title">{{ item.attach_name }}</h1>
+              <p>（最多可选{{ item.attach_max_num }}个）</p>
             </div>
             <p class="options">
-              <span v-for="(item, index) in ['可口可乐', '雪碧', '汤力水', '苏打水']">{{ item }}</span>
+              <span
+                v-for="(attr, idx) in item.attach_content"
+                :key="idx">{{ attr }}</span>
             </p>
           </div>
           <div class="detail">
             <div class="subtitle-wrap">
               <h1 class="title">商品详情</h1>
             </div>
-            <div class=""></div>
+            <div class="des" v-html="food.product_desc"></div>
           </div>
         </div>
       </div>
@@ -150,8 +162,6 @@ export default {
   bottom: 0;
   z-index: 60;
   width: 100%;
-  background: #fff;
-  border-radius: 16px 16px 0 0;
   transform: translate3d(0, 0, 0);
 
   &.move-enter-active, &.move-leave-active {
@@ -162,6 +172,12 @@ export default {
     transform: translate3d(0, 100%, 0);
   }
 
+  .food-content {
+    min-height: 90%;
+    border-radius: 16px 16px 0 0;
+    background: #fff;
+  }
+
   .image-header {
     position: relative;
     width: 100%;
@@ -214,11 +230,12 @@ export default {
 }
 
 .detail {
-  padding: 20px 0 0 20px;
+  padding-left: 20px;
 
   .subtitle-wrap {
     display: flex;
     align-items: center;
+    margin-top: 20px;
 
     p {
       margin-left: 4px;
@@ -256,6 +273,18 @@ export default {
       }
     }
   }
+
+  .des {
+    margin-top: 16px;
+
+    ::v-deep p {
+      font-size: 12px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1F1E1E;
+      line-height: 17px;
+    }
+  }
 }
 
 .footer {

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

@@ -8,6 +8,7 @@
         <ul>
           <li
             v-for="(item, index) in goods"
+            :key="index"
             ref="menuList"
             :class="{'current':currentIndex === index}"
             class="menu-item"
@@ -32,7 +33,8 @@
             <h1 class="title">{{ item.category_name }}</h1>
             <ul>
               <li
-                v-for="food in item.products"
+                v-for="(food, idx) in item.products"
+                :key="idx"
                 class="food-item border-1px"
                 @click="selectFood(food, $event)">
                 <div class="icon">
@@ -50,9 +52,18 @@
                   <div class="price">
                     <span class="now">￥{{ food.product_price | fen2Yuan }}</span>
                   </div>
-                  <div class="cartcontrol-wrapper">
-                    <cartcontrol @add="addFood" :food="food"></cartcontrol>
+                  <div
+                    v-if="food.is_sell_out === 0"
+                    class="cartcontrol-wrapper">
+                    <cartcontrol
+                      :food="food"
+                      @add="addFood"/>
                   </div>
+                  <!--售罄图标-->
+                  <img
+                    v-if="food.is_sell_out === 1"
+                    alt=""
+                    class="sell-out" src="./image/ic_sold_out@2x.png">
                 </div>
               </li>
             </ul>
@@ -66,7 +77,10 @@
         :selectFoods="selectFoods"
         @handleJumpPay="handleJumpPay"/>
     </div>
-    <food @add="addFood" :food="selectedFood" ref="food"></food>
+    <food
+      ref="food"
+      :food="selectedFood"
+      @add="addFood"></food>
     <editTableNum ref="editTableNum"/>
   </div>
 </template>
@@ -91,8 +105,7 @@ export default {
       listHeight: [],
       scrollY: 0,
       selectedFood: {},
-      seller: {},
-      objCurrentProductDetail: {}
+      seller: {}
     }
   },
   computed: {
@@ -150,12 +163,11 @@ export default {
       try {
         const { data, status, msg } = await apiProductDetail(food.id)
         if (status) {
-          this.objCurrentProductDetail = data
+          this.selectedFood = data
         } else {
           Toast(msg)
         }
       } catch (err) {}
-      this.selectedFood = food
       this.$refs.food.show()
     },
     addFood (target) {
@@ -367,6 +379,15 @@ export default {
       right: 0;
       bottom: 1px;
     }
+
+    .sell-out {
+      position: absolute;
+      right: 0;
+      bottom: 9px;
+      display: block;
+      width: 46px;
+      height: 32px;
+    }
   }
 }
 </style>