kitchendDevice/pages/search/search.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>