H5-商品列表接口对接

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

@@ -0,0 +1,25 @@
+import request from '@/api/request'
+
+/**
+ * 商品列表接口
+ * @param id 酒吧ID
+ */
+export const apiProductList = (id) => request({
+  method: 'GET',
+  url: '/api/v1/bar/product/list/all',
+  params: {
+    bar_id: id
+  }
+})
+
+/**
+ * 商品详情
+ * @param id 商品ID
+ */
+export const apiProductDetail = (id) => request({
+  method: 'GET',
+  url: '/api/v1/bar/product/detail',
+  params: {
+    id
+  }
+})

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

@@ -2,32 +2,53 @@
   <div>
     <aflogo/>
     <div class="goods">
-      <div class="menu-wrapper" ref="menuWrapper">
+      <div
+        ref="menuWrapper"
+        class="menu-wrapper">
         <ul>
-          <li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex===index}"
-              @click="selectMenu(index,$event)" ref="menuList">
+          <li
+            v-for="(item, index) in goods"
+            ref="menuList"
+            :class="{'current':currentIndex === index}"
+            class="menu-item"
+            @click="selectMenu(index, $event)">
           <span class="text border-1px">
-            <span v-show="false" class="icon"></span>{{item.name}}
+            <span
+              v-show="false"
+              class="icon"></span>
+            {{ item.category_name }}
           </span>
           </li>
         </ul>
       </div>
-      <div class="foods-wrapper" ref="foodsWrapper">
+      <div
+        ref="foodsWrapper"
+        class="foods-wrapper">
         <ul>
-          <li v-for="item in goods" class="food-list" ref="foodList">
-            <h1 class="title">{{item.name}}</h1>
+          <li
+            v-for="item in goods"
+            ref="foodList"
+            class="food-list">
+            <h1 class="title">{{ item.category_name }}</h1>
             <ul>
-              <li @click="selectFood(food,$event)" v-for="food in item.foods" class="food-item border-1px">
+              <li
+                v-for="food in item.products"
+                class="food-item border-1px"
+                @click="selectFood(food, $event)">
                 <div class="icon">
-                  <img width="88" height="88" :src="food.icon" alt="">
+                  <img
+                    :src="food.product_img_url"
+                    alt=""
+                    height="88"
+                    width="88">
                 </div>
                 <div class="content">
                   <div>
-                    <h2 class="name">{{food.name}}</h2>
-                    <p class="desc">{{food.description}}</p>
+                    <h2 class="name">{{ food.product_name }}</h2>
+                    <p class="desc">{{ food.product_sale_num }}人推荐</p>
                   </div>
                   <div class="price">
-                    <span class="now">￥{{food.price}}</span>
+                    <span class="now">￥{{ food.product_price | fen2Yuan }}</span>
                   </div>
                   <div class="cartcontrol-wrapper">
                     <cartcontrol @add="addFood" :food="food"></cartcontrol>
@@ -57,6 +78,9 @@ import shopcart from '../shopcart/shopcart'
 import cartcontrol from '../cartcontrol/cartcontrol'
 import food from '../food/food'
 import editTableNum from '../editTableNum/index'
+import { apiProductList, apiProductDetail } from './api'
+import { mapGetters } from 'vuex'
+import { Toast } from 'vant'
 
 const mockDataJson = require('../../../mock/data.json')
 
@@ -67,10 +91,14 @@ export default {
       listHeight: [],
       scrollY: 0,
       selectedFood: {},
-      seller: {}
+      seller: {},
+      objCurrentProductDetail: {}
     }
   },
   computed: {
+    ...mapGetters({
+      objCurrentBarInfo: 'common/objCurrentBarInfo'
+    }),
     currentIndex () {
       for (let i = 0; i < this.listHeight.length; i++) {
         let height1 = this.listHeight[i]
@@ -85,7 +113,7 @@ export default {
     selectFoods () {
       let foods = []
       this.goods.forEach((good) => {
-        good.foods.forEach((food) => {
+        good.products.forEach((food) => {
           if (food.count) {
             foods.push(food)
           }
@@ -94,14 +122,16 @@ export default {
       return foods
     }
   },
+  watch: {
+    'objCurrentBarInfo.id': {
+      immediate: true,
+      handler: function () {
+        this.fetchProductList()
+      }
+    }
+  },
   async activated () {
-    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
     this.seller = mockDataJson.seller
-    this.goods = mockDataJson.goods
-    setTimeout(() => {
-      this._initScroll()
-      this._calculateHeight()
-    }, 1000)
   },
   methods: {
     selectMenu (index, event) {
@@ -113,10 +143,18 @@ export default {
       // offsetY的值改为3，是因为px转rem有误差，iOS12.4.1点击左侧导航时，当前点击的菜单无法被选中，类似一个修正值
       this.foodsScroll.scrollToElement(el, 300, true, 3)
     },
-    selectFood (food, event) {
+    async selectFood (food, event) {
       if (!event._constructed) {
         return
       }
+      try {
+        const { data, status, msg } = await apiProductDetail(food.id)
+        if (status) {
+          this.objCurrentProductDetail = data
+        } else {
+          Toast(msg)
+        }
+      } catch (err) {}
       this.selectedFood = food
       this.$refs.food.show()
     },
@@ -163,6 +201,27 @@ export default {
     },
     handleJumpPay () {
       this.$refs.editTableNum.init()
+    },
+    // 获取商品列表
+    async fetchProductList () {
+      const { id } = this.objCurrentBarInfo
+      if (!id) {
+        return
+      }
+      try {
+        const { data, status, msg } = await apiProductList(id)
+        if (status) {
+          if (Array.isArray(data) && data.length) {
+            this.goods = data
+            setTimeout(() => {
+              this._initScroll()
+              this._calculateHeight()
+            }, 1000)
+          }
+        } else {
+          Toast(msg)
+        }
+      } catch (err) {}
     }
   },
   components: {