[更新发现]

pages/menu/classify.vue

@@ -1,14 +1,23 @@
 <template>
     <view class="content">
-        <view class="tabs">
-            <u-tabs :current="tabsIndex" :list="tabArr" @change="tabsClick" lineColor="#34CE98" :activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"></u-tabs>
-        </view>
+        <u-sticky bgColor="#fff" zIndex="99">
+            <u-tabs
+                :current="tabsIndex"
+                :list="tabArr"
+                @change="tabsClick"
+                lineColor="#34CE98"
+                :activeStyle="{fontWeight: 'bold', fontSize: '30rpx'}"
+            />
+        </u-sticky>
         <view class="box">
             <oct-menu
                 :lists="menuData"
                 :btnStyle="{'padding': '30rpx'}"
-                @onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.id, title: $event.name, title: $event.index }})" 
+                @onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.recipe_id, title: $event.name, title: $event.index }})" 
             />
+            <block v-if="page.total_page > 1">
+                <u-loadmore :status="status" />
+            </block>
         </view>
     </view>
 </template>
@@ -20,31 +29,60 @@
             return {
                 tabArr      : [],
                 menuData    : [],
-                tabsIndex   : this.$Route.query.index
+                tabsIndex   : this.$Route.query.index,
+                tabsId      : this.$Route.query.id,
+                status      : 'loadmore',
+                page        : ''
             };
         },
         mounted() {
+            // 获取分类
         	this.getTab()
-            this.getMenu(this.$Route.query.id)
+            
+            // 获取列表
+            this.getMenu()
         },
         methods: {
+            // 分类
             getTab(){
             	categories().then(res => {
                     this.tabArr = res
             	})
             },
             
-            getMenu(id){
+            // 列表
+            getMenu(pages){
             	queue({
-                    category_id: id
+                    category_id: this.tabsId,
+                    page: pages
                 }).then(res => {
-                    this.menuData = res.data
+                    if(res.page.current == 1){
+                        this.menuData = []
+                    }
+                    this.menuData = this.menuData.concat(res.data)
+                    this.status   = this.page.has_more ? 'loadmore': 'nomore'
+                    this.page     = res.page
             	})
             },
+            
+            // 切换分类
             tabsClick(item) {
-                this.getMenu(item.category_id)
+                this.tabsId    = item.category_id
                 this.tabsIndex = item.index
+                this.getMenu(1)
             }
+        },
+        
+        // 下拉加载
+        onReachBottom() {
+            if(this.page.has_more){
+                this.status = 'loading'
+                let pages = this.page.current + 1
+                // 获取列表
+                this.getMenu(pages)
+                return
+            }
+            this.status = 'nomore'
         }
     };
 </script>
@@ -63,6 +101,7 @@
     .box {
         padding: 0 $padding;
         box-sizing: border-box;
+        margin-top: $margin;
     }
     // 34CE98
 </style>

pages/menu/details.vue

@@ -11,7 +11,7 @@
                 </view>
                 <oct-menu
                     :lists="menuData.foods"
-                    :isType='true'
+                    isType="det"
                     :btnStyle="{'margin-top': '30rpx'}"
                     @onMenu="$Router.push({ name: 'menuDetails', params: {id: $event.food_id, title: $event.name }})" 
                 />
@@ -25,31 +25,31 @@
                         <view class="other-name">
                             碳水化合物
                         </view>
-                        <view class="other-number">
-                            200.00g
+                        <view class="nowrap other-number">
+                            {{ menuData.carbohydrate }}g
                         </view>
                     </view>
                     <view class="other-label">
                         <view class="other-name">
                             蛋白质
                         </view>
-                        <view class="other-number">
-                            200.00g
+                        <view class="nowrap other-number">
+                            {{ menuData.protein }}g
                         </view>
                     </view>
                     <view class="other-label">
                         <view class="other-name">
                             脂肪
                         </view>
-                        <view class="other-number">
-                            200.00g
+                        <view class="nowrap other-number">
+                            {{ menuData.cellulose }}g
                         </view>
                     </view>
                     <view class="other-label">
                         <view class="other-name">
                             千卡
                         </view>
-                        <view class="other-number">
+                        <view class="nowrap other-number">
                             {{ menuData.calory }}
                         </view>
                     </view>

pages/menu/index.vue

@@ -5,7 +5,7 @@
                 <view class="name">
                     {{ item.name }}
                 </view>
-                <view class="more" @click="$Router.push({name: 'menuClassify', params: {id: item.category_id, index: index }})">
+                <view class="more" @click="$Router.push({name: 'menuClassify', params: {id: item.category_id, index: index + 1 }})">
                     查看更多<image src="/static/find/menu_more.png" mode="aspectFill"></image>
                 </view>
             </view>
@@ -26,7 +26,6 @@
     </view>
 </template>
 
-
 <script>
     import { index } from '@/apis/interfaces/menu'
     export default {