334 lines
8.3 KiB
Vue
334 lines
8.3 KiB
Vue
<template>
|
|
<view class="content" :class="{'noscroll':show_food_search}">
|
|
<input type="text" class="search" v-model="search_value" :placeholder="placeholder" @focus="placeholder='输入自定义食材'"
|
|
@blur="placeholder='点击添加自定义食材'" />
|
|
<view class="picked-container">
|
|
<view class="empty" v-if="picked_food.length <= 0">
|
|
<view>看起来你还没添加任何食材!</view>
|
|
<view>你可以通过上方的<span style="color: red;">输入框</span>自定义输入食材或者通过下方的<span style="color: red;">流行食材</span>点击添加</view>
|
|
</view>
|
|
<view v-else>
|
|
<view class="top">
|
|
<view class="title">已选食材</view>
|
|
<view @click="picked_food=[]">清空</view>
|
|
</view>
|
|
<view class="picked-food">
|
|
<view class="picked-food-item" v-for="(item,index) in picked_food" :key="index">
|
|
<view class="inner">{{item.name}}</view>
|
|
<view class="close" @click="removePicked(item.id)">x</view>
|
|
</view>
|
|
</view>
|
|
<view class="tips">* 点击移除食材</view>
|
|
<view class="food-match" @click="onSearchFood">匹配菜谱</view>
|
|
</view>
|
|
</view>
|
|
<view class="popular-container">
|
|
<view class="title">{{popular_food.title}}</view>
|
|
<view class="popular-food-item" v-for="(item,index) in popular_food.list" :key="index">
|
|
<view class="food-title">{{item.title}}</view>
|
|
<view class="popular-food-inner">
|
|
<view class="popular-food-subitem" v-for="(sub_item,sub_index) in item.list"
|
|
@click="addIngredients(sub_item,item.list)" :key="sub_index">{{sub_item.name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="food-search-wrap" v-if="show_food_search">
|
|
<view class="food-search-item" v-for="(item,index) in food_search_list" :key="index">
|
|
<view>{{item.name}}</view>
|
|
<view @click="addIngredients(item)">+</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
var timerHandle = null
|
|
import {
|
|
mapState
|
|
} from "vuex";
|
|
export default {
|
|
data() {
|
|
return {
|
|
placeholder: '点击添加自定义食材',
|
|
search_value: '',
|
|
show_food_search: false,
|
|
food_search_list: [],
|
|
picked_food: [],
|
|
popular_food: {}
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(["menu_search_value"]),
|
|
},
|
|
watch: {
|
|
search_value(new_val, old, val) {
|
|
clearTimeout(timerHandle)
|
|
if (new_val != '') {
|
|
timerHandle = setTimeout(() => {
|
|
this.$model.getFoodSearch({
|
|
food_name: new_val
|
|
}).then(res => {
|
|
if (res.code != 0) return
|
|
this.food_search_list = res.data
|
|
this.show_food_search = true
|
|
})
|
|
}, 500)
|
|
} else {
|
|
this.show_food_search = false
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.$model.getSearchPopularFood({}).then(res => {
|
|
if (res.code != 0) return
|
|
this.popular_food = res.data.food
|
|
})
|
|
},
|
|
methods: {
|
|
preventTouchMove() {},
|
|
removePicked(id) {
|
|
let index = this.picked_food.findIndex(item => item.id == id)
|
|
if (index != -1) {
|
|
if (this.picked_food[index].parent) {
|
|
this.picked_food[index].parent.push(this.picked_food[index])
|
|
this.picked_food[index].parent = null
|
|
}
|
|
this.picked_food.splice(index, 1)
|
|
}
|
|
},
|
|
//添加食材
|
|
addIngredients(food,parent) {
|
|
this.picked_food.push(food)
|
|
this.show_food_search = false
|
|
|
|
if(parent) {
|
|
food.parent = parent
|
|
let index = parent.findIndex(item => item.id == food.id)
|
|
if (index != -1) {
|
|
parent.splice(index, 1)
|
|
}
|
|
}
|
|
},
|
|
//搜索菜谱
|
|
onSearchFood() {
|
|
let that = this
|
|
if (that.picked_food.length <= 0) return
|
|
|
|
let search = that.picked_food.map(item => item.id)
|
|
that.$store.state.menu_search_value = search.join(',')
|
|
|
|
uni.switchTab({
|
|
url: '/pages/menu/menu'
|
|
})
|
|
|
|
// that.$model.getMenuSearch({
|
|
// search_data:
|
|
// }).then(res => {
|
|
// if (res.code != 0) return
|
|
// that.index = null
|
|
// that.footlist = res.data
|
|
// })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 25rpx;
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
.search {
|
|
width: 94%;
|
|
padding: 20rpx;
|
|
border: 1rpx solid #e1e1e1;
|
|
border-radius: 18rpx;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.search:hover {
|
|
box-shadow: 0 1rpx 20rpx #ccc;
|
|
}
|
|
|
|
.title {
|
|
font-size: 40rpx;
|
|
color: #000;
|
|
}
|
|
|
|
.picked-container {
|
|
margin-top: 80rpx;
|
|
width: 100%;
|
|
|
|
.empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0 40rpx;
|
|
box-sizing: border-box;
|
|
|
|
view:first-child {
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
color: #909090;
|
|
}
|
|
|
|
view:last-child {
|
|
margin-top: 30rpx;
|
|
font-size: 26rpx;
|
|
color: #909090;
|
|
}
|
|
}
|
|
|
|
.top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
view:last-child {
|
|
color: #999;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
|
|
.picked-food {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 30rpx;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 20rpx;
|
|
background-color: #F6F6F6;
|
|
|
|
.picked-food-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 15rpx 20rpx;
|
|
background-color: #fff;
|
|
margin-right: 20rpx;
|
|
border-radius: 20rpx;
|
|
|
|
.close {
|
|
margin-left: 10rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tips {
|
|
margin-top: 30rpx;
|
|
font-size: 30rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.food-match {
|
|
width: 100%;
|
|
height: 86rpx;
|
|
margin-top: 30rpx;
|
|
line-height: 86rpx;
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
color: #F96679;
|
|
border-radius: 25rpx;
|
|
background-color: #FEF0EE;
|
|
}
|
|
}
|
|
|
|
.popular-container {
|
|
width: 100%;
|
|
margin-top: 60rpx;
|
|
|
|
.popular-food-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 30rpx;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
border-radius: 20rpx;
|
|
background-color: #F6F6F6;
|
|
|
|
.food-title {
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.popular-food-inner {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
margin-top: 30rpx;
|
|
|
|
.popular-food-subitem {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
padding: 15rpx 20rpx;
|
|
background-color: #fff;
|
|
margin-right: 20rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.food-search-wrap {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 130rpx;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: 0 30rpx 50rpx 30rpx;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
background-color: #fff;
|
|
|
|
.food-search-inner {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 120rpx;
|
|
bottom: 0;
|
|
padding: 30rpx;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.food-search-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx;
|
|
margin-bottom: 15rpx;
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
background-color: #F6F6F6;
|
|
|
|
view:first-child {
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
color: #000;
|
|
}
|
|
|
|
view:last-child {
|
|
font-size: 38rpx;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.noscroll {
|
|
overflow: hidden;
|
|
}
|
|
</style> |