HM21St_Page_User/src/views/bookShelf/index.vue

<template>
  <div class="bookShelf">
    <Header
      :headerBg="'#1F1F1F'"
      :headerBorder="'#5C5C5C'"
      :userBg="'rgba(0, 0, 0, 0.24)'"
      :LoginNavIndex="1"
    />
    <ul class="option">
        <li class="option-item" :class="[typeIndex===indexo?'active':'']" v-for="(itemo,indexo) in optionList" :key="indexo" @click="handleClick(itemo,indexo)">
            <svg-icon :icon-class="itemo.img" className="icon-img"></svg-icon>
            <span>{{itemo.label}}</span>
            <b>{{itemo.number}}</b>
        </li>
    </ul>
    <div class="main">
      <div class="searchChangebox">
        <div class="searchChange-box">
            <div class="searchChange" :class="[item.sortName==sortField?'active':'']" v-for="(item,indexC) in changeList" :key="indexC">
                <span>
                    {{
                        item.name
                    }}
                </span>
                <div :class="['sort']">
                    <div>
                        <svg-icon icon-class="up" className="icon-up" :class="[item.sort=='up'?'active':'']" @click="SortEvent('up', item.name, item.sortName)"></svg-icon>
                    </div>
                    <div>
                        <svg-icon icon-class="down" className="icon-down" :class="[item.sort=='down'?'active':'']" @click="SortEvent('down', item.name, item.sortName)"></svg-icon>
                    </div>
                </div>
            </div>
        </div>
        
        <el-input placeholder="输入名称" v-model="searchNameValue" class="input-search">
          <el-button slot="append" icon="el-icon-search" @click="getSearch"></el-button>
        </el-input>
      </div>
      <h5 class="show-title" v-if="typeIndex!==0">{{optionList[typeIndex].label}}<b>{{optionList[typeIndex].number}}</b></h5>
      <div class="list" v-if="BookList.length>0">
        <!-- v-infinite-scroll="load" -->
        <div
          v-for="(item,index) in BookList"
          :key="index+'todayNew'"
          v-infinite-scroll="load"
          infinite-scroll-disabled="disabled"
          :style="{
              marginLeft:index==0||index%5==0?'0':'50px',
            }"
        >
          <BookCard
            :item="item"
            type='bookShelf'
            :headerBg="'#1F1F1F'"
            :headerBorder="'#5C5C5C'"
            :userBg="'rgba(0, 0, 0, 0.24)'"
            :LoginNavIndex="1"
            :previousPage="'书架'"
            :cardType="item.course_type"
            :isBuy="true"
          />
        </div>
        <p v-if="loading" class="tips">加载中...</p>
        <p v-if="noMore" class="tips">没有更多了</p>
      </div>
      <div class="nodata" v-else>
        <img src="../../assets/nodata.png" />
        <p>找不到文件</p>
      </div>
    </div>
  </div>
</template>

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

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, BookCard },
  props: {},
  data() {
    //这里存放数据
    return {
      BookList: [
        {
            skeleton: true
        },
        {
            skeleton: true
        },
        {
            skeleton: true
        },
        {
            skeleton: true
        },
        {
            skeleton: true
        }
      ],
      optionList: [
        {
            label: '全部',
            img: 'quanbu',
            number: 0,
            value: -1
        },
        {
            label: '画刊',
            img: 'huakan',
            number: 0,
        },
        {
            label: '报纸',
            img: 'baozhi',
            number: 0,
            value: 2
        },
        {
            label: '练习册',
            img: 'xiti',
            number: 0
        },
        {
            label: '课程',
            img: 'kecheng',
            number: 0,
            value: 10
        }
        // ,
        // {
        //     label: '合刊',
        //     img: 'hekan',
        //     number: '6'
        // }
      ],
      typeValue: -1,
      changeList: [
        {
          name: "按购买时间",
          sort: "down",
          sortName: "buy_time",
        },
        {
          name: "按名称",
          sort: "",
          sortName: "name",
        },
        {
          name: "最近使用",
          sort: "",
          sortName: "last_use_time",
        },
      ],
      sortField: "",
      searchNameValue: '', // 搜索名称值
      loading: false,
      noMore: false,
      pageNumber: 1,
      pageSize: 30,
      typeIndex: 0
    }
  },
  //计算属性 类似于data概念
  computed: {
    disabled () {
        return this.loading || this.noMore
    }
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    handleClick(item,index){
        this.typeIndex = index
        this.pageNumber = 1
        if(item.hasOwnProperty("value")){
            this.typeValue = item.value
            if(item.number>0){
                this.BookList = [
                    {
                        skeleton: true
                    },
                    {
                        skeleton: true
                    },
                    {
                        skeleton: true
                    },
                    {
                        skeleton: true
                    },
                    {
                        skeleton: true
                    }
                ]
                this.getList()
            }else{
                this.BookList = []
            }
        }else{
            this.BookList = []
        }
        
        $(".list").animate({
            scrollTop: 0
        }, 200);
    },
    // 搜索查询
    getSearch(){
        this.pageNumber = 1
        this.BookList = [
            {
                skeleton: true
            },
            {
                skeleton: true
            },
            {
                skeleton: true
            },
            {
                skeleton: true
            },
            {
                skeleton: true
            }
        ]
        $(".list").animate({
            scrollTop: 0
        }, 200);
        this.getList()
    },
    SortEvent(type, name, sortName) {
      let sort = "";
      this.changeList.forEach((item) => {
        if (item.name == name) {
        //   if (!item.sort || item.sort == "up") {
        //     item.sort = "down";
        //     sort = "down";
        //   } else if (item.sort == "down") {
        //     item.sort = "up";
        //     sort = "up";
        //   }
            item.sort = type;
            sort = type;
        } else {
          item.sort = "";
        }
      });
      if (sort == "down") {
        this.sortType = 1;
      } else {
        this.sortType = 0;
      }
      this.sortField = sortName;
      $(".list").animate({
        scrollTop: 0
      }, 200);
      this.pageNumber = 1
      this.getList()
    },
    // 查询列表
    getList(){
        this.loading = true
        let MethodName = "/ShopServer/Client/BookshelfQuery/PageQueryMyGoodsList";
        let order_column_list = []
        if(this.sortField !== ''){
            if(this.sortType===1){
                order_column_list = [this.sortField + ':desc']
            }else if(this.sortType===0){
                // 升序不传值
                order_column_list = [this.sortField]
            }
        }
        let data = {
            goods_name: this.searchNameValue.trim(),
            goods_type: this.typeValue,
            page_capacity:this.pageSize,
            cur_page:this.pageNumber,
            order_column_list: order_column_list
        }
        getLogin(MethodName, data)
        .then((res) => {
            this.loading = false
            if(res.status===1){
                if(this.pageNumber===1){
                    this.BookList = []
                    this.noMore = false
                }
                this.BookList = this.BookList.concat(res.goods_list)
                if(res.total_page<=this.pageNumber){
                    this.noMore = true
                }
            }
        })
        .catch(() => {
            this.loading = false
        });
        
    },
    load () {
        this.pageNumber++
        this.getList()
    },
    // 获取商品个数
    getNumber(){
        let MethodName = "/ShopServer/Client/BookshelfQuery/GetMyGoodsCount"
        getLogin(MethodName, {}).then((res) => {
            if(res.status===1){
                this.optionList= [
                    {
                        label: '全部',
                        img: 'quanbu',
                        number: res.count_all,
                        value: -1
                    },
                    {
                        label: '画刊',
                        img: 'huakan',
                        number: 0,
                    },
                    {
                        label: '报纸',
                        img: 'baozhi',
                        number: res.count_issue,
                        value: 2
                    },
                    {
                        label: '练习册',
                        img: 'xiti',
                        number: 0
                    },
                    {
                        label: '课程',
                        img: 'kecheng',
                        number: res.count_course,
                        value: 10
                    }
                    // ,
                    // {
                    //     label: '合刊',
                    //     img: 'hekan',
                    //     number: '6'
                    // }
                ]
            }
        })
        .catch(() => {
            this.loading = false
        });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getNumber()
    this.getList()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  //生命周期-创建之前
  beforeCreated() { },
  //生命周期-挂载之前
  beforeMount() { },
  //生命周期-更新之前
  beforUpdate() { },
  //生命周期-更新之后
  updated() { },
  //生命周期-销毁之前
  beforeDestory() { },
  //生命周期-销毁完成
  destoryed() { },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() { }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.bookShelf {
  background: #F7F8FA;
  height: calc(100vh - 64px);
  .option{
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    background: #17171A;
    li{
        display: flex;
        align-items: center;
        border-radius: 30px;
        height: 36px;
        padding: 7px 20px;
        margin: 8px 4px;
        cursor: pointer;
        &:hover{
            background: rgba(255, 255, 255, 0.08);
        }
        &.active{
            background: rgba(255, 255, 255, 0.08);
            .icon-img,span,b{
                color: rgba(255, 255, 255, 0.9);
            }
        }
        .icon-img{
            width: 14px;
            height: 14px;
            margin: 1px 8px 0 0;
            color: rgba(255, 255, 255, 0.5);
        }
        span{
            color: rgba(255, 255, 255, 0.5);
            font-size: 14px;
            line-height: 22px;
        }
        b{
            font-weight: 400;
            font-size: 14px;
            line-height: 22px;
            color: rgba(255, 255, 255, 0.5);
            margin-left: 5px;
        }
    }
  }
  .main {
    width: 1200px;
    margin: 0 auto;
    padding: 24px 0 0 0;
    .searchChangebox{
        display: flex;
        justify-content: space-between;
        .searchChange-box{
            display: flex;
        }
        .searchChange {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4px 12px;
            height: 32px;
            margin-right: 16px;
            border: 1px solid #E5E6EB;
            border-radius: 20px;
            &.active{
                background: #175DFF;
                > span{
                    color: #FFFFFF;
                }
                .sort {
                    > div {
                        svg{
                            color: #5E89EF;
                            &.active{
                                color: #FFFFFF;
                            }
                        }
                    }
                }
            }
            > span{
                font-weight: 400;
                font-size: 16px;
                line-height: 22px;
                color: #000;
                margin-right: 4px;
            }
            .sort {
                cursor: pointer;
                height: 20px;
                > div {
                    font-size: 0;
                    svg {
                        width: 11px;
                        height: 11px;
                        color: #C2C2C2;
                        padding: 3px 2px 2px 2px;
                        &.icon-down{
                            height: 9px;
                            padding: 0 2px 2px 2px;
                        }
                    }
                }
            }
        }
        .input-search{
            width: 220px;
        }
    }
    .show-title{
        color: #1F2C5C;
        margin: 24px 0 0 0;
        font-weight: 500;
        font-size: 24px;
        line-height: 32px;
        b{
            margin-left: 16px;
            color: #ED5F00;
        }
    }
    .list {
        margin-top: 28px;
        display: flex;
        flex-wrap: wrap;
        height: calc(100vh - 256px);
        overflow-y: scroll;
        &::-webkit-scrollbar {
            display: none;
        }
        > div {
            width: 200px;
            height: 352px;
            border-radius: 8px;
            overflow: hidden;
            background: #ffffff;
            margin-bottom: 24px;
        }
        .tips{
            width: 100%;
            text-align: center;
            font-size: 12px;
            color: #929CA8;
        }
    }
  }
  .nodata{
    text-align: center;
    img{
        width: 329px;
    }
    p{
        color: #A8A8A8;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        margin: 30px 0;
    }
  }
}
</style>
<style lang="scss">
.bookShelf{
    .searchChangebox{
        .input-search{
            .el-input__inner{
                height: 32px;
                color: #1D2129;
                background: #F2F3F5;
                border: none;
                line-height: 32px;
            }
            .el-input-group__append{
                border: none;
                width: 32px;
                height: 32px;
                background: #165DFF;
                text-align: center;
                cursor: pointer;
                &:hover{
                    background: #4080FF;
                }
                &:focus{
                    background: #0E42D2;
                }
            }
            .el-button{
                padding: 10px 12px;
                color: #ffffff;
            }
        }
    }
}
</style>