[更新发现]

pages/index/search.vue

@@ -0,0 +1,186 @@
+<template>
+    <view class="content">
+        <!-- 搜索 -->
+        <view class="search">
+        	<view class="search-nav">
+                <u-search
+                    v-model="keyword"
+                    placeholder="请输入食物名称"
+                    focus
+                    :clearabled="true"
+                    :showAction="false"
+                    @change="change"
+                    @search="search"
+                    @clear="clear"
+                    color="#000000"
+                    bgColor="#F3F6FB"
+                    searchIconColor="#34CE98"
+                />
+        	</view>
+            <view class="search-cancel" @click="$router.back(-1)">
+                取消
+            </view>
+        </view>
+        
+        <view class="recommend" v-if="listArr == ''">
+            <view class="recommend-title">
+                大家都在搜
+            </view>
+            <view class="recommend-list">
+                <view class="label" v-for="(item, index) in recommendArr" :key="index" @click="$Router.push({ name: 'rankingDetails', params: {id: item.food_id, title: item.name }})" >
+                    {{ item.name }}
+                </view>
+            </view>
+        </view>
+        
+        <view class="recommend" v-if="listArr != ''">
+            <view class="recommend-title">
+                搜索结果
+            </view>
+            <block v-if="listArr.length > 0">
+                <oct-menu
+                    :lists="listArr"
+                    :btnStyle="{'margin-top': '30rpx'}"
+                    isType="rank"
+                    @onMenu="$Router.push({ name: 'rankingDetails', params: {id: $event.food_id, title: $event.name }})" 
+                />
+                <block v-if="page.total_page > 1">
+                    <u-loadmore :status="status" />
+                </block>
+            </block>
+            <u-empty
+                v-else
+                mode="search"
+            />
+        </view>
+    </view>
+</template>
+
+<script>
+    import { search } from '@/apis/interfaces/menu'
+    import { foods } from '@/apis/interfaces/ranking'
+    export default {
+        data() {
+            return {
+                keyword     : '',
+                listArr     : [],
+                recommendArr: [],
+                status      : 'loadmore',
+                page        : ''
+            };
+        },
+        mounted() {
+            // 获取首页
+            this.getSearch()
+        },
+        methods: {
+            // 引导图片
+            getSearch(){
+            	search().then(res => {
+                    this.recommendArr = res
+            	})
+            },
+            
+            // 分类-食物
+            getRank(val, pages){
+            	foods({
+                    name: val,
+                    page: pages
+                }).then(res => {
+                    if(res.page.current == 1){
+                        this.listArr = []
+                    }
+                    this.listArr  = this.listArr.concat(res.data)
+                    this.status   = this.page.has_more ? 'loadmore': 'nomore'
+                    this.page     = res.page
+            	})
+            },
+            
+            change(val) {
+                this.keyword = val
+                this.getRank(val)
+            },
+            
+            // 搜索
+            search() {},
+            
+            // 清除输入框
+            clear() {}
+        },
+        
+        // 下拉加载
+        onReachBottom() {
+            if(this.page.has_more){
+                this.status = 'loading'
+                let pages = this.page.current + 1
+                // 获取列表
+                this.getRank(this.keyword, pages)
+                return
+            }
+            this.status = 'nomore'
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    .content {
+    	padding-top: calc(var(--status-bar-height) + 120rpx);
+    	overflow: hidden;
+    }
+    
+    // 搜索
+    .search {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 99;
+        height: 120rpx;
+        background-color: white;
+        @extend .ios-top;
+    	padding: $padding;
+        box-sizing: border-box;
+    	.search-nav {
+            width: calc(100% - 100rpx);
+    		background: $window-color;
+    		height: 80rpx;
+    		line-height: 80rpx;
+    		border-radius: 40rpx;
+    		color: $text-gray;
+    		font-size: $title-size-lg;
+            display: flex;
+    	}
+        .search-cancel {
+            color: $main-color;
+            position: absolute;
+            right: $padding;
+            top: $padding;
+            line-height: 80rpx;
+            width: 100rpx;
+            text-align: right;
+        }
+    }
+    
+    .recommend {
+        padding: $padding;
+        box-sizing: border-box;
+        .recommend-title {
+            font-weight: bold;
+            margin-bottom: $margin;
+        }
+        .recommend-list {
+            flex-wrap: wrap;
+            display: flex;
+            .label {
+                display: inline-block;
+                color: $text-color;
+                background-color: #f3f3f3;
+                border-radius: $radius * 2;
+                padding: 0 $padding - 5;
+                line-height: 54rpx;
+                margin: $margin - 20;
+                font-size: $title-size-sm;
+            }
+        }
+    }
+</style>