HM21St_Page_User/src/views/bookShelf/index.vue

<template>
  <div class="bookShelf">
    <Header
      :headerBg="'#00ADEF'"
      :headerBorder="'#5C5C5C'"
      :userBg="'rgba(0, 0, 0, 0.24)'"
      :LoginNavIndex="0"
    />
    <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.value === 3 ? itemo.number + orderPeruseNumber : itemo.number
        }}</b>
      </li>
    </ul>
    <div class="main">
      <template v-if="userMessage">
        <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"
            maxlength="20"
          >
            <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].value === 3
              ? optionList[typeIndex].number + orderPeruseNumber
              : 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"
            :class="[item.type === 3 ? 'book-item-peruse' : '']"
          >
            <template v-if="item.type === 3">
              <BookPeruseCard
                :item="item"
                type="bookShelf"
                :headerBg="'#00ADEF'"
                :headerBorder="'#5C5C5C'"
                :userBg="'rgba(0, 0, 0, 0.24)'"
                :LoginNavIndex="0"
                :previousPage="'书架'"
              />
            </template>
            <template v-if="item.type === 30">
              <BookPeruseListCard
                :item="item"
                type="bookShelf"
                :headerBg="'#00ADEF'"
                :headerBorder="'#5C5C5C'"
                :userBg="'rgba(0, 0, 0, 0.24)'"
                :LoginNavIndex="0"
                :previousPage="'书架'"
              />
            </template>
            <template v-else>
              <BookCard
                :item="item"
                type="bookShelf"
                :headerBg="'#00ADEF'"
                :headerBorder="'#5C5C5C'"
                :userBg="'rgba(0, 0, 0, 0.24)'"
                :LoginNavIndex="0"
                :previousPage="'书架'"
                :cardType="item.course_type"
              />
            </template>
          </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>
      </template>
      <template v-else>
        <p class="login-no">
          您还未登录，请先<a
            @click="
              loginFlag = true;
              toUrl = '/bookShelf';
            "
            >登录</a
          >
        </p>
      </template>
    </div>
    <el-dialog
      :visible.sync="loginFlag"
      :show-close="false"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      width="504px"
      class="login-dialog"
      v-if="loginFlag"
    >
      <login @cancelLogin="cancelLogin" :toUrl="toUrl" linkType="url"></login>
    </el-dialog>
  </div>
</template>

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

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, BookCard, BookPeruseCard, BookPeruseListCard, Login },
  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,
          value: 4,
        },
        {
          label: "报纸",
          img: "baozhi",
          number: 0,
          value: 2,
        },
        {
          label: "练习册",
          img: "xiti",
          number: 0,
        },
        {
          label: "课程",
          img: "kecheng",
          number: 0,
          value: 10,
        },
        {
          label: "精读",
          img: "jingdu",
          number: 0,
          value: 3,
        },
        {
          label: "专辑",
          img: "zhuanji",
          number: 0,
          value: 20,
        },
        // ,
        // {
        //     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,
      orderPeruseNumber: 0, // 精读订阅个数
      userMessage: getToken() ? JSON.parse(getToken()) : null,
      loginFlag: false,
      toUrl: "",
    };
  },
  //计算属性 类似于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 || item.value === 3) {
          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) {
              if (this.typeValue === -1 || this.typeValue === 3) {
                getLogin(
                  "/ShopServer/Client/BookshelfQuery/GetMyValidPeriodList_Iread",
                  {}
                ).then((ress) => {
                  if (ress.status === 1) {
                    this.orderPeruseNumber = ress.valid_period_list.length;
                    ress.valid_period_list.forEach((items) => {
                      items.type = 30;
                    });
                    this.BookList = ress.valid_period_list.concat(
                      res.goods_list
                    );
                  } else {
                    this.BookList = res.goods_list;
                  }
                });
              } else {
                this.BookList = res.goods_list;
              }
              this.noMore = false;
            } else {
              this.BookList = this.BookList.concat(res.goods_list);
            }
            if (res.total_page <= this.pageNumber) {
              this.noMore = true;
            }
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    load() {
      if (this.userMessage) {
        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: res.count_pictorial,
                value: 4,
              },
              {
                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: "jingdu",
                number: res.count_iread,
                value: 3,
              },
              {
                label: "专辑",
                img: "zhuanji",
                number: res.count_album,
                value: 20,
              },
              // ,
              // {
              //     label: '合刊',
              //     img: 'hekan',
              //     number: '6'
              // }
            ];
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 关闭登录弹窗
    cancelLogin() {
      this.loginFlag = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.userMessage) {
      this.getNumber();
      this.getList();
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (this.userMessage) {
      let _this = this;
      let input = document.querySelector("input");
      input.addEventListener("keyup", function (event) {
        // 判断是否按下回车键
        if (event.keyCode === 13) {
          // 回车键被按下，执行你想要的操作
          _this.getList(1);
        }
      });
    }
  },
  //生命周期-创建之前
  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: #00adef;
    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: 28px -25px 0 -25px;
      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: 0 25px 24px 25px;
        &.book-item-peruse {
          width: 200px;
          height: 298px;
          margin-top: 54px;
        }
      }
      .tips {
        width: 100%;
        text-align: center;
        font-size: 12px;
        color: #929ca8;
      }
    }
  }
}
</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;
      }
    }
  }
}
.login-no {
  text-align: center;
  line-height: 500px;
  a {
    color: #00adef;
  }
}
</style>