美食杰-菜谱

美食杰–菜谱

一级菜谱和二级菜谱

图片效果

template代码
//一级菜谱和二级菜谱
<el-tabs 
	v-model="classifyName"
	@tab-click="tabClick"
	type="border-card"
>
	//一级菜谱遍历渲染
    <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>

菜单列表

图片效果

<!-- 容器 -->
<el-container>
    <!-- 左侧列表 -->
    <el-aside width="220px" class="recipe-aside">
        <div class="filter-box">
            <h4>筛选</h4>
            <!-- v-model="activeName" -->
            <!-- 筛选 start -->
            <el-collapse v-model="propertiesActiveName">
            	//菜单列表(一级遍历渲染)	(如:工艺,口味,难度,人数)
                <el-collapse-item
                        v-for="item in 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[item.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" 
            v-show="!list.length && !loading"
        >
           暂时没有过滤出菜谱信息，请选择其他的筛选条件
        </div>
        <!-- 作品展示 -->
        <menu-card style="min-height: 75%;" :info="list"></menu-card>
        <!-- 分页展示 -->
        <div style="text-align: right;" v-show="!loading">
            <el-pagination
                    style="display: inline-block;"
                    :page-size="5"
                    layout="total, prev, pager, next"
                    :total="total"
                    :current-page.sync="page"
                    @current-change="handlerSelect"
            >
            </el-pagination>
        </div>
    </el-main>
</el-container>

下面是以上两个效果图片的script

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

 export default {
     components: {MenuCard},
     data() {
         return {
             classify:[],    //存储tab切换的所有数据
             classifyType:"1-1", //tab切换的选中项(二级路由)
             classifyName:"1",   //定义刷新tab时的值
             properties:[],   // 存储属性中的所有数据
             propertyType:{}, // 存储属性的分类，有多个  {craft: 1-4, flavor=2-1}
             propertiesActiveName:[],  //记录所有的属性分类
             list:[], //存储有猜测主体
             total:0,    //总页数
             loading:false,  //是否显示遮罩层
             page:1,
         }
     },
     watch: {
         $route: {
             handler(){
                 const {classify,page} = this.$route.query;
                 if(classify){
                     this.classifyType = classify;   //1-1
                     this.classifyName = classify[0];
                     //page应该属于number类型. 由于page在路由中属于string类型,所以需要在这里转换为number类型
                     this.page = Number(page);	
                 }
                 this.ThisgeMenus();
             },
             immediate:true //立即执行
         }
     },
     mounted() {
         getClassify().then(({data})=>{
             // console.log(data);
             this.classify = data;
             console.log(this.$route.query);
             if(!this.$route.query.classify){
                 this.classifyType = this.classify[0].list[0].parent_type;   //1-1
                 this.classifyName = 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)=>{
                 o[item.title] = query[item.title] ? query[item.title] : "";
                 
                 return o;
             },{});
             // console.log(this.propertyType);
         })

     },
     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
             })
         },
         //右侧作品的显示
         ThisgeMenus(){
             const query = {...this.$route.query};
             const params = {
                 page:query.page || 1,
                 classify:query.classify,
             }
             delete query.page
             delete query.classify
             if(Object.keys(query).length){
                 params.property = {
                     ...query
                 }
             }
             this.loading = true;
             let loading = null;
             this.$nextTick(()=>{
                 loading = this.$loading({
                     target: '.filter-menus-box',
                     text: 'Loading...',
                     spinner: 'el-icon-loading',
                     background: 'rgba(0,0,0,0.7)'
                 })
             })
             this.list = [];
             //请求右侧的数据
             getMenus(params).then(({data})=>{
                 // console.log(data);
                 if(this.loading) loading.close();
                 this.loading = false;
                 this.list = data.list;
                 this.total = data.total;
                 this.page = data.current_page;
             })
         },
         // 点击改变当前页
         handlerSelect(){
             console.log("改变页码")
             this.$router.push({
                 query:{
                     ...this.$route.query,
                     page:this.page
                 }
             })
         },
         
         tabClick(){
             const classifName = this.classifyName;
             const item =  this.classify.find(item => item.parent_type === classifName);
             // item 是当前被点击到的 一级路由(整体数据)
             if(item){
                 item.classifyName = item.parent_type;   //一级路由的type
                 item.classifyType = item.list[0].type;
                 this.$router.push({
                     query:{
                         ...this.$route.query,
                         classify: this.classifyType
                     }
                 })
             }
         }
     }
 }