kitchendDevice/pages/index/index.vue

<template>
  <view class="content">
    <!-- 搜索 -->
    <search></search>
    <!-- 轮播 -->
    <view class="f_banner footbox" v-if="fimages.length">
      <swiper class="swiper" circular="true" previous-margin="15px" next-margin="15px">
        <swiper-item v-for="(ite, ind) in fimages" :key="ind" @click="handleDetail(ite.id)">
          <image :src="ite.pic_url" mode="aspectFill">
            <view class="item">
              <view class="title">{{ite.title}}</view>
              <view class="name">
                <image :src="ite.create_user_head_pic"></image>
                <text>{{ite.create_user_nickname}}</text>
              </view>
              <view class="zan" @click="handleZan(ite)">
                <icon class="iconfont" :class="[ite.is_me_like_it=='yes'?'icon-icon3':'icon-icon_collect']">
                </icon>
              </view>
            </view>
          </image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 功能 -->
    <view class="tools footbox">
      <view class="list" v-for="(ite,ind) in tools" :key="ind" @tap="navTo(ite.jump_url)">
        <view>
          <image :src="ite.icon"></image>
        </view>
        <text>{{ite.name}}</text>
      </view>
    </view>
    <!-- 食谱 -->
    <view class="itemTag footbox">
      <view class="tab_list">
        <scroll-view class="scroll-menu" scroll-x="true" style="white-space: nowrap;">
          <view class="tabbar" v-for="(ite,ind) in menu" :key="ind" @click="handleToggle(ind)">
            <view :class="[index ==ind?'active':'']">{{ite.name}}</view>
          </view>
        </scroll-view>
      </view>
      <foodList :list="footlist"></foodList>
    </view>

  </view>
</template>

<script>
  import {
    mapState
  } from "vuex";
  import search from "../../components/search2.vue"
  import foodList from "../../components/list.vue"
  export default {
    data() {
      return {
        index: 0,
        fimages: [],
        list: [],
        tools: [],
        menu: [],
        footlist: [],
      }
    },
    components: {
      search,
      foodList
    },
    computed: {
      ...mapState(["menuList"]),
    },
    onLoad() {
      let that = this
      that.handleHomeConfig()
    },
    onPullDownRefresh() {
      let that = this
      that.menu = []
      that.index = 0
      that.fimages = []
      that.list = []
      that.tools = []
      that.footlist = []
      that.handleHomeConfig()
      setTimeout(function() {
        uni.stopPullDownRefresh();
      }, 500);
    },
    methods: {
      // 菜谱，食材，banner,金刚区配置
      handleHomeConfig() {
        let that = this
        that.$model.getHomeConfig({}).then(res => {
          if (res.code != 0) return
          that.menu = res.data.cook_label
          that.fimages = res.data.banner
          that.tools = res.data.jingang_region
          that.$store.commit('changeMenuList', res.data.cook_label)
          that.$store.commit('changeFoodList', res.data.food_list)
          that.handleCookListLabel()
          that.handleHomeUserInfo()
        })
      },
      // 获取账号信息
      handleHomeUserInfo() {
        let that = this
        that.$model.getHomeUserInfo({}).then(res => {
          if (res.code != 0) return
          that.$store.commit('changeUserInfo', res.data)
        })
      },
      // 菜谱列表
      handleCookListLabel() {
        let that = this
        that.$model.getCookListLabel({
          cook_label: that.menu.length ? that.menu[that.index].id : 0,
          page: 1,
        }).then(res => {
          if (res.code != 0) return
          that.footlist = res.data.content_list

        })
      },
      // 餐食切换
      handleToggle(ind) {
        let that = this
        that.index = ind
        that.footlist = []
        that.handleCookListLabel()
      },
      // 商品详情
      handleDetail(id) {
        if (!uni.getStorageSync('token')) {
          this.$tools.msg("登录后查看等多！")
          return
        }
        uni.navigateTo({
          url: "/pageTwo/me/menudetail?id=" + id
        })
      },

      // 搜索
      handleSearch(ite) {
        uni.navigateTo({
          url: '/pages/search/search'
        })
        // let that = this
        // console.log("搜索", ite)
        // that.page = 1
        // that.footlist = []
        // if (ite == '') {
        //   that.index = 0
        //   that.handleCookListLabel()
        // } else {
        //   that.$model.getHomeSearch({
        //     search_data: ite
        //   }).then(res => {
        //     if (res.code != 0) return
        //     that.index = null
        //     that.footlist = res.data
        //   })
        // }
      },
      // 功能页面跳转
      navTo(url) {
        uni.navigateTo({
          url
        })
        uni.switchTab({
          url
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .f_banner {
    width: 100% !important;
    height: 450rpx;
    margin-top: 50px;

    /deep/swiper {
      height: 450rpx;
    }

    image {
      width: calc(100% - 10px);
      height: 100%;
      background-size: 100%;
      margin: 0 5px;
      border-radius: 10px;
    }
  }

  .tools {
    width: calc(100% - 30px);
    background: #fff;
    display: flex;
    border-radius: 5px;
    margin-top: 40px !important;
    justify-content: space-between;

    .list {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 10px;
      justify-content: center;

      image,
      icon {
        width: 35px;
        height: 35px;
        margin-top: 10px;

      }

      view {
        width: 55px;
        height: 55px;
        background-color: #fff;
        margin-top: -20px;
        border-radius: 50%;
        text-align: center;
        margin-bottom: 5px;
      }

      text {
        display: block;
        width: 100%;
        text-align: center;
      }
    }
  }

  .tab_list {
    display: flex;
    justify-content: space-between;

    .scroll-menu {
      width: 100%;
      white-space: nowrap;

      view {
        display: inline-block;
        padding: 10px;

        text {
          display: block;
          width: 100%;
          text-align: center;
          margin-top: 10px;
        }
      }
    }

    .tabbar {
      padding: 0 10px;
      font-size: 16px;
      font-weight: bold;
    }

    .active {
      color: $maincolor;
      border-bottom: 2px solid $maincolor;
    }
  }

  .itemTag {
    margin-top: 0px !important;
  }

  .t-icon-shipinyinliao2-chengzi {
    width: 40px !important;
    height: 33px !important;
  }
</style>