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 2" :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'+(2+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>
            <template v-if="itemType==='kecheng'">
                <div class="filt-item">
                    <label>学段</label>
                    <ul>
                        <li :class="[items.study_phase===courseForm.studyValue?'active':'',courseForm.categoryValue==='ZB'?'not-allow':'']" v-for="(items,indexs) in studyList" :key="indexs" @click="handleClick('courseForm','studyValue',items.study_phase)">
                            <i v-if="items.study_phase===courseForm.studyValue" class="el-icon-success"></i>
                            {{items.study_phase_name}}
                        </li>
                    </ul>
                </div>
                <div class="filt-item">
                    <label>类别</label>
                    <ul>
                        <li :class="[itemt.value===courseForm.categoryValue?'active':'']" v-for="(itemt,indext) in categoryList" :key="indext" @click="handleClick('courseForm','categoryValue',itemt.value)">
                            <i v-if="itemt.value===courseForm.categoryValue" class="el-icon-success"></i>
                            {{itemt.label}}
                        </li>
                    </ul>
                </div>
            </template>
            <template v-else-if="itemType==='baozhi'">
                <div class="filt-item">
                    <label>年份</label>
                    <ul>
                        <li :class="[itemy.value===baozhiForm.yearValue?'active':'']" v-for="(itemy,indexy) in yearList" :key="indexy" @click="handleClick('baozhiForm','yearValue',itemy.value)">
                            <i v-if="itemy.value===baozhiForm.yearValue" class="el-icon-success"></i>
                            {{itemy.label}}
                        </li>
                    </ul>
                </div>
                <div class="filt-item">
                    <label>学段</label>
                    <ul>
                        <li :class="[items.study_phase===baozhiForm.studyValue?'active':'']" v-for="(items,indexs) in baozhiStudyList" :key="indexs" @click="handleClick('baozhiForm','studyValue',items.study_phase,items.study_phase_name)">
                            <i v-if="items.study_phase===baozhiForm.studyValue" class="el-icon-success"></i>
                            {{items.study_phase_name}}
                        </li>
                    </ul>
                </div>
                <div class="filt-item">
                    <label>类型</label>
                    <ul>
                        <li :class="[itemt.value===baozhiForm.typeValue?'active':'']" v-for="(itemt,indext) in typeList" :key="indext" @click="handleClick('baozhiForm','typeValue',itemt.value)">
                            <i v-if="itemt.value===baozhiForm.typeValue" class="el-icon-success"></i>
                            {{itemt.label}}
                        </li>
                    </ul>
                </div>
            </template>
            
            <div class="filt-item">
                <label>搜索</label>
                <el-input placeholder="搜索" v-model="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"
        @changeStudy="changeStudy"
        :headerBg="'#1F1F1F'"
        :headerBorder="'#5C5C5C'"
        :userBg="'rgba(0, 0, 0, 0.24)'"
        :LoginNavIndex="0"
      />
      <el-pagination
        background
        :current-page="currentPage"
        :page-size="10"
        :page-sizes="[1, 10, 20, 30, 40, 50]"
        :total="Bookinfo.number"
        layout="total, prev, pager, next, sizes, jumper"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-if="Bookinfo.number>0"
      />
    </div>
  </div>
</template>

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

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, BookListModule },
  props: {},
  data() {
    //这里存放数据
    return {
      Bookinfo:{
        BookList: [
            {
                skeleton: true
            },
            {
                skeleton: true
            },
            {
                skeleton: true
            },
            {
                skeleton: true
            },
            {
                skeleton: true
            },
            {
                skeleton: true
            },
            {
                skeleton: true
            },
            {
                skeleton: true
            },
            {
                skeleton: true
            },
            {
                skeleton: true
            }
        ],
        name: '',
        number: 0,
        numberstr: '',
      },
      nameTypeCn: this.$route.query.name?decodeURIComponent(this.$route.query.name):'画刊',
      itemType:this.$route.query.type?this.$route.query.type:'huakan',
      yearList:[
        {
            value: -1,
            label: '全部'
        }
      ],
      studyList:[
        {
            study_phase: -1,
            study_phase_name: '全部'
        }
      ],
      baozhiStudyList:[],
      categoryList:[
        {
            value: 'LB',
            label: '录播'
        },
        {
            value: 'ZB',
            label: '直播'
        },
      ],
      typeList:[
        {
            value: 0,
            label: '单本'
        },
        {
            value: 1,
            label: '专辑'
        },
      ],
      courseForm:{
        studyValue: window.localStorage.getItem("courseFormstudyValue")?window.localStorage.getItem("courseFormstudyValue")*1:-1,
        categoryValue: window.localStorage.getItem("courseFormcategoryValue")?window.localStorage.getItem("courseFormcategoryValue"):'LB'
      },
      baozhiForm:{
        yearValue: window.localStorage.getItem("baozhiFormyearValue")?window.localStorage.getItem("baozhiFormyearValue")*1:-1,
        studyValue: window.localStorage.getItem("baozhiFormstudyValue")?window.localStorage.getItem("baozhiFormstudyValue")*1:-1,
        typeValue: window.localStorage.getItem("baozhiFormtypeValue")?window.localStorage.getItem("baozhiFormtypeValue")*1:0,
      },
      currentPage: 1, // 当前页码
      page_capacity: 10, // 每页条数
      searchValue: '',
      titleName:window.localStorage.getItem("baozhiFormstudyValueName")?window.localStorage.getItem("baozhiFormstudyValueName"):''
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    handleClick(form,file,value,name){
        window.localStorage.setItem(form+file,value)
        if(form==='courseForm'&&file==='categoryValue'&&value==='ZB'){
            this.courseForm.studyValue = -1
        }else if(form==='courseForm'&&file==='categoryValue'&&value==='LB'){
            this.courseForm.studyValue = window.localStorage.getItem("courseFormstudyValue")?window.localStorage.getItem("courseFormstudyValue")*1:-1
        }
        if(form==='courseForm'&&file==='studyValue'&&this.courseForm.categoryValue==='ZB'){
            return false
        }
        if(name){
            this.titleName = name
            window.localStorage.setItem('baozhiFormstudyValueName',name)
        }
        this[form][file] = value
        this.currentPage = 1;
        this.handleData()
    },
    handleData(){
        let MethodName = "/ShopServer/Client/ShopHomeQuery/PageQueryCourseList"
        let data = {
            page_capacity: this.page_capacity,
            cur_page: this.currentPage,
            search_content: this.searchValue.trim(),
        }
        if(this.itemType==='kecheng'){
                data.course_type = this.courseForm.categoryValue,
                data.study_phase = this.courseForm.studyValue
            getLogin(MethodName, data)
            .then((res) => {
                if(res.status===1){
                    this.Bookinfo = {
                        name: this.courseForm.categoryValue==='LB'?'课程':'直播',
                        number: res.total_count,
                        numberstr: '共' + res.total_count + '期',
                        study: this.courseForm.studyValue,
                        BookList: res.course_list
                    }
                }
            })
            .catch(() => {
                
            }); 
        }else if(this.itemType==='baozhi'){
            MethodName = "/ShopServer/Client/ShopHomeQuery/PageQueryIssueList"
            data.year_label = this.baozhiForm.yearValue
            data.study_phase = this.baozhiForm.studyValue
            data.comb_flag = this.baozhiForm.typeValue
            getLogin(MethodName, data)
            .then((res) => {
                if(res.status===1){
                    this.Bookinfo = {
                        name: this.titleName,
                        number: res.total_count,
                        numberstr: '共' + res.total_count + '期',
                        study: this.baozhiForm.studyValue,
                        BookList: res.issue_list
                    }
                }
            })
            .catch(() => {
                
            }); 
        }
    },
    // 切换每页条数
    handleSizeChange(val) {
      this.currentPage = 1;
      this.page_capacity = val;
      this.handleData()
    },
    // 切换页码
    handleCurrentChange(val) {
      this.currentPage = val;
      this.handleData()
    },
    changeStudy(form,value){
        this.currentPage = 1;
        this[form].studyValue = value
        this.handleData()
    },
    // 学段列表
    getStudyList(){
        let MethodName = "/OrgServer/DictManager/GetStudyPhaseList"
        getLogin(MethodName, {})
        .then((res) => {
            if(res.status===1){
                let studyList = [
                        {
                            study_phase: -1,
                            study_phase_name: '全部'
                        }
                    ]
                this.studyList = studyList.concat(res.study_phase_list)
                this.baozhiStudyList = res.study_phase_list
                this.baozhiForm.studyValue = window.localStorage.getItem("baozhiFormstudyValue")?window.localStorage.getItem("baozhiFormstudyValue")*1:res.study_phase_list[0]?res.study_phase_list[0].study_phase:-1
                this.titleName = window.localStorage.getItem("baozhiFormstudyValueName")?window.localStorage.getItem("baozhiFormstudyValueName"):res.study_phase_list[0]?res.study_phase_list[0].study_phase_name:''
            }
        })
        .catch(() => {
            
        }); 
    },
    // 获取年份列表
    getYearList(){
        let nowYear = new Date().getFullYear()
        let yearList = []
        for(let i = 0; i < 20; i++){
            let obj = {
                value: nowYear - i,
                label: nowYear - i
            }
            yearList.push(obj)
        }
        this.yearList = this.yearList.concat(yearList)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getStudyList()
    this.getYearList()
    this.handleData()
  },
  //生命周期 - 挂载完成（可以访问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;
                    }
                    &.not-allow{
                        cursor: not-allowed;
                        background: #F2F3F5;
                        color: #C1C5CD;
                    }
                    &.active{
                        color: #165DFF;
                        border-color: #165DFF;
                        background: #FFFFFF;
                        .el-icon-success{
                            margin-right: 4px;
                            font-size: 12px;
                            margin-top: 2px;
                        }
                    }
                    &.not-allow.active{
                        color: #CEDCFE;
                        border-color: #CEDCFE;
                    }
                }
            }
            .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;
        }
    }
    .el-pagination{
        text-align: left;
    }
}
</style>