HM21St_Page_User/src/views/bookStore/all.vue

<template>
  <div class="bookCity">
    <Header
      :headerBg="'#1F1F1F'"
      :headerBorder="'#5C5C5C'"
      :userBg="'rgba(0, 0, 0, 0.24)'"
      :LoginNavIndex="0"
    />
    <div class="banner">
        <el-carousel height="320px" trigger="click" arrow="never">
            <el-carousel-item v-for="item in 4" :key="item">
                <!-- 如果有跳转链接 则跳转 否则只展示 -->
                <!-- <a v-if="item" href="#" target="_blank">
                    <el-image
                        class="image"
                        :src="require('../../assets/banner'+item+'.png')"
                        :fit="'cover'">
                    </el-image>
                </a> -->
                <el-image
                    class="image"
                    :src="require('../../assets/banner'+item+'.png')"
                    :fit="'cover'">
                </el-image>
            </el-carousel-item>
        </el-carousel>
    </div>
    <div class="filt-box">
        <div class="filt-inner">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">商城</el-breadcrumb-item>
                <el-breadcrumb-item>全部{{nameTypeCn}}</el-breadcrumb-item>
            </el-breadcrumb>
            <h2>筛选：</h2>
            <div class="filt-item">
                <label>年份</label>
                <ul>
                    <li :class="[itemy.value===form.yearValue?'active':'']" v-for="(itemy,indexy) in yearList" :key="indexy" @click="handleClick('yearValue',itemy.value)">
                        <i v-if="itemy.value===form.yearValue" class="el-icon-success"></i>
                        {{itemy.label}}
                    </li>
                </ul>
            </div>
            <div class="filt-item">
                <label>学段</label>
                <ul>
                    <li :class="[items.value===form.studyValue?'active':'']" v-for="(items,indexs) in studyList" :key="indexs" @click="handleClick('studyValue',items.value)">
                        <i v-if="items.value===form.studyValue" class="el-icon-success"></i>
                        {{items.label}}
                    </li>
                </ul>
            </div>
            <div class="filt-item">
                <label>类型</label>
                <ul>
                    <li :class="[itemt.value===form.typeValue?'active':'']" v-for="(itemt,indext) in typeList" :key="indext" @click="handleClick('typeValue',itemt.value)">
                        <i v-if="itemt.value===form.typeValue" class="el-icon-success"></i>
                        {{itemt.label}}
                    </li>
                </ul>
            </div>
            <div class="filt-item">
                <label>搜索</label>
                <el-input placeholder="搜索" v-model="form.searchValue">
                    <el-button slot="append" icon="el-icon-search" @click="handleData"></el-button>
                </el-input>
            </div>
        </div>
    </div>
    <div class="main">
      <BookListModule
        :Bookinfo="Bookinfo"
        :showAll="false"
        :showPage="form.studyValue==Bookinfo.study"
        v-if="!form.studyValue||form.studyValue==Bookinfo.study"
        @changeStudy="changeStudy"
        :headerBg="'#1F1F1F'"
        :headerBorder="'#5C5C5C'"
        :userBg="'rgba(0, 0, 0, 0.24)'"
        :LoginNavIndex="0"
      />
      <BookListModule
        :Bookinfo="Bookinfo2"
        :showAll="false"
        v-if="false"
        :headerBg="'#1F1F1F'"
        :headerBorder="'#5C5C5C'"
        :userBg="'rgba(0, 0, 0, 0.24)'"
        :LoginNavIndex="0"
      />
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../components/Header.vue";
import BookListModule from "@/components/common/BookAllListModule.vue"

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, BookListModule },
  props: {},
  data() {
    //这里存放数据
    return {
      Bookinfo:{
        BookList: [{
            src: require('../../assets/bookcard-image.png'),
            name: "名称名称名称名称名称名称名称名称名称名称名称名称",
            price: "3.00",
            oldprice: "3.00",
            author: "作者",
            score: 3,
            progress: "90%",
            time:'2023/4/16 19:00'
        },
        {
            src: require('../../assets/bookcard-image.png'),
            name: "名称名称名称名称名称名称名称名称名称名称名称名称",
            price: "3.00",
            oldprice: "3.00",
            author: "作者",
            score: 3,
            time:'2023/4/16 19:00'
        },
        {
            src: require('../../assets/bookcard-image.png'),
            name: "名称名称名称名称名称名称名称名称名称名称名称名称",
            price: "3.00",
            oldprice: "3.00",
            author: "作者",
            score: 3,
            time:'2023/4/16 19:00'
        },
        {
            src: require('../../assets/bookcard-image.png'),
            name: "名称名称名称名称名称名称名称名称名称名称名称名称",
            price: "3.00",
            oldprice: "3.00",
            author: "作者",
            score: 3,
            time:'2023/4/16 19:00'
        },
        {
            src: require('../../assets/bookcard-image.png'),
            name: "名称名称名称名称名称名称名称名称名称名称名称名称",
            price: "3.00",
            oldprice: "3.00",
            author: "作者",
            score: 3,
            time:'2023/4/16 19:00'
        }
        ],
        name: '画刊',
        number: 96,
        numberstr: '共96期',
        study: 'value1'
      },
      Bookinfo2:{
        BookList: [{
            src: require('../../assets/bookcard-image.png'),
            name: "名称名称名称名称名称名称名称名称名称名称名称名称",
            price: "3.00",
            oldprice: "3.00",
            author: "作者",
            score: 3,
            progress: "90%",
            time:'2023/4/16 19:00'
        },
        {
            src: require('../../assets/bookcard-image.png'),
            name: "名称名称名称名称名称名称名称名称名称名称名称名称",
            price: "3.00",
            oldprice: "3.00",
            author: "作者",
            score: 3,
            time:'2023/4/16 19:00'
        },
        {
            src: require('../../assets/bookcard-image.png'),
            name: "名称名称名称名称名称名称名称名称名称名称名称名称",
            price: "3.00",
            oldprice: "3.00",
            author: "作者",
            score: 3,
            time:'2023/4/16 19:00'
        },
        {
            src: require('../../assets/bookcard-image.png'),
            name: "名称名称名称名称名称名称名称名称名称名称名称名称",
            price: "3.00",
            oldprice: "3.00",
            author: "作者",
            score: 3,
            time:'2023/4/16 19:00'
        },
        {
            src: require('../../assets/bookcard-image.png'),
            name: "名称名称名称名称名称名称名称名称名称名称名称名称",
            price: "3.00",
            oldprice: "3.00",
            author: "作者",
            score: 3,
            time:'2023/4/16 19:00'
        }
        ],
        name: '初一',
        number: 805,
        numberstr: '共805个',
        study: 'value2'
      },
      nameTypeCn: this.$route.query.name?decodeURIComponent(this.$route.query.name):'画刊',
      nameTypeList: ['画刊','报纸','练习册','课程'],
      yearList:[
        {
            value: '',
            label: '全部'
        },{
            value: '2023',
            label: '2023'
        },{
            value: '2022',
            label: '2022'
        },{
            value: '2021',
            label: '2021'
        },{
            value: '2020',
            label: '2020'
        },{
            value: '2019',
            label: '2019'
        },{
            value: '2018',
            label: '2018'
        },{
            value: '2017',
            label: '2017'
        },{
            value: '2016',
            label: '2016'
        },{
            value: '2015',
            label: '2015'
        },{
            value: '2014',
            label: '2014'
        },{
            value: '2013',
            label: '2013'
        },{
            value: '2012',
            label: '2012'
        },{
            value: '2011',
            label: '2011'
        },{
            value: '2010',
            label: '2010'
        },{
            value: '2009',
            label: '2009'
        },{
            value: '2008',
            label: '2008'
        },
      ],
      studyList:[
        {
            value: '',
            label: '全部'
        },{
            value: 'value1',
            label: '小学'
        },{
            value: 'value2',
            label: '初一'
        },{
            value: 'value3',
            label: '初二'
        },{
            value: 'value4',
            label: '初三'
        },{
            value: 'value5',
            label: '高一'
        },{
            value: 'value6',
            label: '高二'
        },
      ],
      typeList:[
        {
            value: 'value1',
            label: '单本'
        },
        {
            value: 'value2',
            label: '合刊'
        },
      ],
      form:{
        yearValue: '',
        studyValue: '',
        typeValue: 'value1',
        searchValue: ''
      }
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    handleClick(file,value){
        this.form[file] = value
        this.handleData()
    },
    handleData(){
    },
    changeStudy(value){
        this.form.studyValue = value
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  //生命周期-创建之前
  beforeCreated() { },
  //生命周期-挂载之前
  beforeMount() { },
  //生命周期-更新之前
  beforUpdate() { },
  //生命周期-更新之后
  updated() { },
  //生命周期-销毁之前
  beforeDestory() { },
  //生命周期-销毁完成
  destoryed() { },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() { }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.bookCity {
  min-height: 100%;
  padding-bottom: 50px;
  .banner{
    width: 100%;
    font-size: 0;
    img{
        max-width: 100%;
    }
    .image{
        width: 100%;
        height: 100%;
    }
  }
  .filt-box{
    border-bottom: 1px solid #E5E6EB;
    background: #FFFFFF;
    .filt-inner{
        width: 1200px;
        margin: 0 auto;
        padding: 40px 0;
        h2{
            font-weight: 600;
            font-size: 16px;
            line-height: 24px;
            color: #2F3742;
            padding: 28px 0;
            margin: 0;
        }
        .filt-item{
            display: flex;
            margin-bottom: 8px;
            label{
                width: 52px;
                font-weight: 400;
                font-size: 16px;
                line-height: 32px;
                color: #2F3742;
            }
            ul{
                list-style: none;
                display: flex;
                flex-flow: wrap;
                padding: 0;
                margin: 0;
                li{
                    margin: 0 8px 16px 0;
                    background: #F2F3F5;
                    border-radius: 2px;
                    padding: 3px 11px;
                    font-weight: 500;
                    font-size: 16px;
                    line-height: 24px;
                    color: #2F3742;
                    cursor: pointer;
                    border: 1px solid #F2F3F5;
                    height: 32px;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    &:hover{
                        color: #165DFF;
                    }
                    &.active{
                        color: #165DFF;
                        border-color: #165DFF;
                        background: #FFFFFF;
                        .el-icon-success{
                            margin-right: 4px;
                            font-size: 12px;
                            margin-top: 2px;
                        }
                    }
                }
            }
            .el-input{
                width: 240px;
                height: 32px;
                background: #F2F3F5;
                border-radius: 2px;
            }
        }
    }
  }
  .main{
    width: 1200px;
    margin: 52px auto;
  }
}
</style>
<style lang="scss">
.bookCity{
    .el-breadcrumb__inner.is-link{
        color: #4E5969;
        &:hover{
            color: #165DFF;
        }
    }
    .el-breadcrumb__separator{
        color: #C9CDD4;
    }
    .el-breadcrumb__item:last-child .el-breadcrumb__inner{
        color: #1D2129;
        font-weight: 500;
    }
    .filt-box{
        input{
            height: 32px;
            line-height: 32px;
            background: #F2F3F5;
            border: none;
        }
        .el-input__icon{
            line-height: 32px;
            cursor: pointer;
            color: #4E5969 !important;
        }
        .el-input-group__append{
            background: #F2F3F5;
            border: none;
        }
        .el-button{
            padding: 9px 12px;
        }
    }
}
</style>