68 lines
1.3 KiB
Vue
68 lines
1.3 KiB
Vue
<template>
|
|
<view>
|
|
<view class="hader">
|
|
<i class="iconfont" @click="goback()"></i>
|
|
<input type="text" placeholder="菜谱名,食材名" v-model="datalist" class="caipu">
|
|
<button class="ser" @click="getdata()">搜索</button>
|
|
</view>
|
|
<view class="list" v-if="Showhideo">
|
|
<view class="list_content" v-for="(v,i) in content" :key="i">
|
|
<img :src="v.img" alt="">
|
|
<view class="li_left">
|
|
<p class="top">{{v.title}}</p>
|
|
<p class="top_2">{{v.des}}</p>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="neir" v-else>请输入搜索的内容</view>
|
|
<!--这里判断出问题了-->
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
|
|
data() {
|
|
return {
|
|
page: 1,
|
|
content: [],
|
|
datalist: null,
|
|
Showhideo: false, //文字显示隐藏 默认显示文字
|
|
}
|
|
},
|
|
onLoad() {},
|
|
onReachBottom() {
|
|
this.page = this.page + 1
|
|
this.getsearch()
|
|
},
|
|
methods: {
|
|
|
|
async getsearch() {
|
|
let res = await this.$http.index.search({
|
|
q: this.datalist,
|
|
page: this.page
|
|
})
|
|
this.content = [
|
|
...this.content,
|
|
...res
|
|
]
|
|
console.log(this.content)
|
|
},
|
|
getdata() {
|
|
|
|
this.content = []
|
|
this.getsearch()
|
|
this.Showhideo = true
|
|
},
|
|
goback() {
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import "../../common/less/page/search.less";
|
|
</style>
|