179 lines
4.8 KiB
Vue
179 lines
4.8 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 搜索 -->
|
|
<u-sticky>
|
|
<view class="header ios-top">
|
|
<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()">取消</view>
|
|
</view>
|
|
</view>
|
|
</u-sticky>
|
|
|
|
<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>
|
|
// 搜索
|
|
.header{
|
|
background-color: white;
|
|
.search {
|
|
position: relative;
|
|
padding: $padding/2 $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/2;
|
|
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>
|