效果图:
HTML:
<template><div class="recipe"><!-- v-model="activeName" --><!-- 菜谱分类 start --><el-tabs type="border-card" v-model='classifyName'><el-tab-panev-for='item in classify':key='item.parent_type':label="item.parent_name":name='item.parent_type'><div class="recipe-link"><router-link:to="{query:{...$route.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='propertyActiveName'><el-collapse-itemv-for='item in properties':title="item.parent_name":key='item.parent_type':name='item.parent_type'><div class="filter-tags"><el-tag type="info"v-for='option in item.list':key='option.type'@click='selectTag(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%;" :info="list"></menu-card><div style="text-align: right;"><el-paginationstyle="display: inline-block;"page-size="10"layout="total, prev, pager, next":total="50"></el-pagination></div></el-main></el-container></div></template>
CSS:
<style lang="stylus">.recipe-linkfont-size 0;margin-top 5pxadisplay inline-blockfont-size 12pxpadding 0px 8pxheight 28pxline-height 28px.activebackground #ff3232color #fff.recipeh2text-align centerline-height 150px.el-mainpadding 0.filter-boxbackground #fffpadding 10pxwidth 100%float leftbox-sizing border-box.filter-tagsdisplay flexflex-wrap wrapjustify-content space-around.tag-selectedbackground-color #ff3232color #fff.menu-emptywidth 100%text-align centerfont-size 20px</style>
JS:
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:{}, //存储属性的分类 , 列如: {carft: 1-4,flavor=2-1}propertyActiveName:[], //list:[]}},watch: {$route: {handler(){const {classify} = this.$route.query;if(classify){this.classifyType = classify;this.classifyName = classify[0];}this.ThisgeMenus();},immediate:true}},mounted() {getClassify().then((data)=>{console.log(data.data);this.classify = data.data;console.log(this.$route.query);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.data);this.properties = data.data;const {query} = this.$route;this.propertyType = this.properties.reduce((o,item)=>{//item.title : 工艺 难度 口味 人数console.log(query);console.log(o);o[item.title] = query[item.title] ? query[item.title] : "";if(o[item.title]){this.propertyActiveName.push(o[item.title][0])}return o;},{})})},methods: {selectTag(option){console.log(option);console.log(option.title);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,}getMenus(params).then((data)=>{console.log(data.data.list);this.list = data.data.list;})}}}
MenuCard组件:
<template><el-row class="menu-card" type="flex" justify="start"><el-colstyle="flex:none;":style="{'margin-left':marginLeft+'px'}"v-for='items in info' :key='items._id'><el-card :body-style="{ padding: '0px' }"><!-- --><router-link :to="{name:'detail',query:{menuId:items._id}}"><img :src="items.product_pic_url" class="image" style="width: 232px;height: 232px;"><div style="padding: 14px;" class="menu-card-detail"><strong>{{items.title}}</strong><span>{{ments_len}} 评论</span><!-- --><router-link :to="{name:'space',query:{userId:items.userId}}" tag="em">{{items.name}}</router-link></div></router-link></el-card></el-col></el-row></template><script>export default {name: 'menu-card',data(){return{}},props:{marginLeft: {type: Number,default: 22},info:{type: Array,default:() => []}},}</script><style lang="stylus">.menu-cardflex-wrap wrap.el-col-24width automargin-bottom 20pxmargin-left: 22px.menu-card-detail> *display blockstrongheight 24pxline-height 24pxfont-size 14pxfont-weight boldcolor #333spanheight 26pxline-height 26pxfont-size 12pxcolor #999emheight 23pxline-height 23pxfont-size 12pxcolor #ff3232</style>
