美食杰项目----菜谱大全

美食杰项目----菜谱大全

实现效果介绍：

1. 点击菜谱tab切换，类似于一个二级菜单
2. 当他点击家常菜切换颜色，当它刷新的时候颜色不会掉
3. 点击工艺，口味切换，也类似于一个二级菜单
4. 当点击“炒”“蒸”时切换颜色，当它刷新的时候颜色不会掉和展开

效果图1.2

效果图3.4

代码展示如下：
data中存放的数据

classify:[],//存储tab切换的所有数据
classifyType:‘1-1’,//tab切换选中项(二级路由)
classifyName:‘1’,//定义刷新tab得值（一级路由）
//属性
properties:[], //存储属性中的所有数据
propertyType:{},//存储属性的分类，例如：{cr:1-4,fc=2-1}
propertiesActivName:[] //定义刷新tab展开不会收缩

<template>
    <div class="recipe">
        <!-- v-model="activeName" -->
        <!-- 菜谱分类 start -->
        <el-tabs  type="border-card" v-model="classifyName">
            <el-tab-pane 
                v-for="item in classify" 
                :key="item.parent_type"  
                :label="item.parent_name" 
                :name="item.parent_type"
                >
                <div class="recipe-link">
                    <router-link 
                        :to="{query:{...$router.query,classify:option.type}}" 
                        v-for="option in item.list " 
                        :key="option.type"
                        :class="{active:classifyType===option.type}"
                    >
                       {{option.name}}
                    </router-link>
                </div>
            </el-tab-pane>
        </el-tabs>
        <!-- 菜谱分类 end -->
        <h2>家常好味道，给你家一般的温暖</h2>
        <el-container>
            <el-aside width="220px" class="recipe-aside">
                <div class="filter-box">
                    <h4>筛选</h4>
                    <!-- v-model="activeName" -->
                    <!-- 筛选 start -->
                    <el-collapse v-model="propertiesActivName">
                        <el-collapse-item
                            v-for="item of properties"
                            :key="item.parent_type"
                            :title="item.parent_name"
                            :name="item.parent_type"
                        >
                            <div class="filter-tags">
                                <el-tag type="info"
                                    v-for="option in item.list"
                                    :key="option.type"
                                    @click="selectedTag(option)"
                                    :class="{'tag-selected':propertyType[option.title]===option.type}"
                                >
                                {{option.name}}
                                </el-tag>
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                    <!-- 筛选 end -->
                </div>
            </el-aside>
            <el-main class="filter-menus-box">
<!--                <div class="menu-empty">暂时没有过滤出菜谱信息，请选择其他的筛选条件</div>-->
                <menu-card style="min-height: 75%;"></menu-card>
                <div style="text-align: right;">
                    <el-pagination
                            style="display: inline-block;"
                            :page-size="10"
                            layout="total, prev, pager, next"
                            :total="50">
                    </el-pagination>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import MenuCard from '@/components/menu-card.vue'
    import {getClassify, getProperty, getMenus} from '@/service/api'

    export default {
        components: {MenuCard},
        data() {
            return {
                classify:[],
                classifyType:'1-1',
                classifyName:'1',
                //属性
                properties:[],
                propertyType:{},
                propertiesActivName:[]
            }
        },
        watch: {
            $route: {
                handler(){
                    const {classify}=this.$route.query;
                    if(classify){
                       this.classifyType=classify; //1-1
                       this.classifyName=classify[0];  //1
                    }
                },
                immediate:true
            }
        },
        mounted() {
            getClassify().then(({data})=>{
                console.log(data);
                this.classify=data;
                if(!this.$route.query.classify){
                   this.classifyType=this.classify[0].list[0].type;
                   this.classifyName=this.classify[0].parent_type;
                   this.$router.push({
                       query:{
                         classify:this.classifyType,
                         page:1
                       }
                   })
                }
            });
            getProperty().then(({data})=>{
            //    console.log(data);
               this.properties=data;
              const {query} = this.$route;
                this.propertyType = this.properties.reduce((o,item)=>{
                    //  item.title :  工艺，难度，口味，人数
                    o[item.title] = query[item.title] ? query[item.title]: "";
                    if(o[item.title]){
                        this.propertiesActivName.push(o[item.title][0])
                    }
                   return o;
                },{});
            })

        },
        methods: {
           selectedTag(option){
            
            let query={...this.$route.query};
            //判断是否点击，如果点击过，取消，否则，选中
            if(this.propertyType[option.title] === option.type){
                this.propertyType[option.title] = "";
                delete query[option.title]
            }else{
                this.propertyType[option.title]=option.type;
                query[option.title]=option.type;
            }
            this.$router.push({
               query
            })
           },
        }
    }
</script>
<style lang="stylus">
    .recipe-link
        font-size 0;
        margin-top 5px

        a
            display inline-block
            font-size 12px
            padding 0px 8px
            height 28px
            line-height 28px

        .active
            background #ff3232
            color #fff

    .recipe
        h2
            text-align center
            line-height 150px

        .el-main
            padding 0

        .filter-box
            background #fff
            padding 10px
            width 100%
            float left
            box-sizing border-box

    .filter-tags
        display flex
        flex-wrap wrap
        justify-content space-around

        .tag-selected
            background-color #ff3232 !important
            color #fff !important

    .menu-empty
        width 100%
        text-align center
        font-size 20px
</style>