|
|
@@ -5,82 +5,115 @@
|
|
|
: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.value===3?(itemo.number+orderPeruseNumber):itemo.number}}</b>
|
|
|
- </li>
|
|
|
+ <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">
|
|
|
<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
|
|
|
+ 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
|
|
|
+ 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].number}}</b></h5>
|
|
|
- <div class="list" v-if="BookList.length>0">
|
|
|
+ <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-for="(item, index) in BookList"
|
|
|
+ :key="index + 'todayNew'"
|
|
|
v-infinite-scroll="load"
|
|
|
infinite-scroll-disabled="disabled"
|
|
|
- :class="[item.type===3?'book-item-peruse':'']"
|
|
|
+ :class="[item.type === 3 ? 'book-item-peruse' : '']"
|
|
|
>
|
|
|
- <template v-if="item.type===3">
|
|
|
- <BookPeruseCard
|
|
|
- :item="item"
|
|
|
- type='bookShelf'
|
|
|
- :headerBg="'#1F1F1F'"
|
|
|
- :headerBorder="'#5C5C5C'"
|
|
|
- :userBg="'rgba(0, 0, 0, 0.24)'"
|
|
|
- :LoginNavIndex="1"
|
|
|
- :previousPage="'书架'"
|
|
|
- />
|
|
|
- </template>
|
|
|
- <template v-if="item.type===30">
|
|
|
- <BookPeruseListCard
|
|
|
- :item="item"
|
|
|
- type='bookShelf'
|
|
|
- :headerBg="'#1F1F1F'"
|
|
|
- :headerBorder="'#5C5C5C'"
|
|
|
- :userBg="'rgba(0, 0, 0, 0.24)'"
|
|
|
- :LoginNavIndex="1"
|
|
|
- :previousPage="'书架'"
|
|
|
- />
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <BookCard
|
|
|
- :item="item"
|
|
|
- type='bookShelf'
|
|
|
- :headerBg="'#1F1F1F'"
|
|
|
- :headerBorder="'#5C5C5C'"
|
|
|
- :userBg="'rgba(0, 0, 0, 0.24)'"
|
|
|
- :LoginNavIndex="1"
|
|
|
- :previousPage="'书架'"
|
|
|
- :cardType="item.course_type"
|
|
|
- />
|
|
|
- </template>
|
|
|
+ <template v-if="item.type === 3">
|
|
|
+ <BookPeruseCard
|
|
|
+ :item="item"
|
|
|
+ type="bookShelf"
|
|
|
+ :headerBg="'#1F1F1F'"
|
|
|
+ :headerBorder="'#5C5C5C'"
|
|
|
+ :userBg="'rgba(0, 0, 0, 0.24)'"
|
|
|
+ :LoginNavIndex="1"
|
|
|
+ :previousPage="'书架'"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-if="item.type === 30">
|
|
|
+ <BookPeruseListCard
|
|
|
+ :item="item"
|
|
|
+ type="bookShelf"
|
|
|
+ :headerBg="'#1F1F1F'"
|
|
|
+ :headerBorder="'#5C5C5C'"
|
|
|
+ :userBg="'rgba(0, 0, 0, 0.24)'"
|
|
|
+ :LoginNavIndex="1"
|
|
|
+ :previousPage="'书架'"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <BookCard
|
|
|
+ :item="item"
|
|
|
+ type="bookShelf"
|
|
|
+ :headerBg="'#1F1F1F'"
|
|
|
+ :headerBorder="'#5C5C5C'"
|
|
|
+ :userBg="'rgba(0, 0, 0, 0.24)'"
|
|
|
+ :LoginNavIndex="1"
|
|
|
+ :previousPage="'书架'"
|
|
|
+ :cardType="item.course_type"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
</div>
|
|
|
<p v-if="loading" class="tips">加载中...</p>
|
|
|
<p v-if="noMore" class="tips">没有更多了</p>
|
|
|
@@ -97,9 +130,9 @@
|
|
|
//这里可以导入其它文件（比如：组件，工具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 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";
|
|
|
|
|
|
export default {
|
|
|
@@ -111,55 +144,55 @@ export default {
|
|
|
return {
|
|
|
BookList: [
|
|
|
{
|
|
|
- skeleton: true
|
|
|
+ skeleton: true,
|
|
|
},
|
|
|
{
|
|
|
- skeleton: true
|
|
|
+ skeleton: true,
|
|
|
},
|
|
|
{
|
|
|
- skeleton: true
|
|
|
+ skeleton: true,
|
|
|
},
|
|
|
{
|
|
|
- skeleton: true
|
|
|
+ skeleton: true,
|
|
|
},
|
|
|
{
|
|
|
- skeleton: true
|
|
|
- }
|
|
|
+ skeleton: true,
|
|
|
+ },
|
|
|
],
|
|
|
optionList: [
|
|
|
{
|
|
|
- label: '全部',
|
|
|
- img: 'quanbu',
|
|
|
- number: 0,
|
|
|
- value: -1
|
|
|
+ label: "全部",
|
|
|
+ img: "quanbu",
|
|
|
+ number: 0,
|
|
|
+ value: -1,
|
|
|
},
|
|
|
{
|
|
|
- label: '画刊',
|
|
|
- img: 'huakan',
|
|
|
- number: 0,
|
|
|
+ label: "画刊",
|
|
|
+ img: "huakan",
|
|
|
+ number: 0,
|
|
|
},
|
|
|
{
|
|
|
- label: '报纸',
|
|
|
- img: 'baozhi',
|
|
|
- number: 0,
|
|
|
- value: 2
|
|
|
+ label: "报纸",
|
|
|
+ img: "baozhi",
|
|
|
+ number: 0,
|
|
|
+ value: 2,
|
|
|
},
|
|
|
{
|
|
|
- label: '练习册',
|
|
|
- img: 'xiti',
|
|
|
- number: 0
|
|
|
+ label: "练习册",
|
|
|
+ img: "xiti",
|
|
|
+ number: 0,
|
|
|
},
|
|
|
{
|
|
|
- label: '课程',
|
|
|
- img: 'kecheng',
|
|
|
- number: 0,
|
|
|
- value: 10
|
|
|
+ label: "课程",
|
|
|
+ img: "kecheng",
|
|
|
+ number: 0,
|
|
|
+ value: 10,
|
|
|
},
|
|
|
{
|
|
|
- label: '精读',
|
|
|
- img: 'jingdu',
|
|
|
- number: 0,
|
|
|
- value: 3
|
|
|
+ label: "精读",
|
|
|
+ img: "jingdu",
|
|
|
+ number: 0,
|
|
|
+ value: 3,
|
|
|
},
|
|
|
// ,
|
|
|
// {
|
|
|
@@ -187,98 +220,104 @@ export default {
|
|
|
},
|
|
|
],
|
|
|
sortField: "",
|
|
|
- searchNameValue: '', // 搜索名称值
|
|
|
+ searchNameValue: "", // 搜索名称值
|
|
|
loading: false,
|
|
|
noMore: false,
|
|
|
pageNumber: 1,
|
|
|
pageSize: 30,
|
|
|
typeIndex: 0,
|
|
|
orderPeruseNumber: 0, // 精读订阅个数
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
//计算属性 类似于data概念
|
|
|
computed: {
|
|
|
- disabled () {
|
|
|
- return this.loading || this.noMore
|
|
|
- }
|
|
|
+ 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 = [
|
|
|
+ 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
|
|
|
+ skeleton: true,
|
|
|
},
|
|
|
{
|
|
|
- skeleton: true
|
|
|
+ skeleton: true,
|
|
|
},
|
|
|
{
|
|
|
- skeleton: true
|
|
|
- }
|
|
|
- ]
|
|
|
- $(".list").animate({
|
|
|
- scrollTop: 0
|
|
|
- }, 200);
|
|
|
- this.getList()
|
|
|
+ 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;
|
|
|
+ // 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 = "";
|
|
|
}
|
|
|
@@ -289,344 +328,353 @@ export default {
|
|
|
this.sortType = 0;
|
|
|
}
|
|
|
this.sortField = sortName;
|
|
|
- $(".list").animate({
|
|
|
- scrollTop: 0
|
|
|
- }, 200);
|
|
|
- this.pageNumber = 1
|
|
|
- this.getList()
|
|
|
+ $(".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]
|
|
|
- }
|
|
|
+ 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)
|
|
|
+ }
|
|
|
+ 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
|
|
|
- }
|
|
|
+ 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
|
|
|
+ this.loading = false;
|
|
|
});
|
|
|
-
|
|
|
},
|
|
|
- load () {
|
|
|
- this.pageNumber++
|
|
|
- this.getList()
|
|
|
+ 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: 'jingdu',
|
|
|
- number: res.count_iread,
|
|
|
- value: 3
|
|
|
- }
|
|
|
- // ,
|
|
|
- // {
|
|
|
- // label: '合刊',
|
|
|
- // img: 'hekan',
|
|
|
- // number: '6'
|
|
|
- // }
|
|
|
- ]
|
|
|
- }
|
|
|
+ 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,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 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: 'hekan',
|
|
|
+ // number: '6'
|
|
|
+ // }
|
|
|
+ ];
|
|
|
+ }
|
|
|
})
|
|
|
.catch(() => {
|
|
|
- this.loading = false
|
|
|
+ this.loading = false;
|
|
|
});
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
- this.getNumber()
|
|
|
- this.getList()
|
|
|
+ this.getNumber();
|
|
|
+ this.getList();
|
|
|
},
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {
|
|
|
- let _this = this
|
|
|
- let input = document.querySelector('input');
|
|
|
- input.addEventListener('keyup', function(event) {
|
|
|
- // 判断是否按下回车键
|
|
|
- if (event.keyCode === 13) {
|
|
|
- // 回车键被按下，执行你想要的操作
|
|
|
- _this.getList(1)
|
|
|
- }
|
|
|
+ let _this = this;
|
|
|
+ let input = document.querySelector("input");
|
|
|
+ input.addEventListener("keyup", function (event) {
|
|
|
+ // 判断是否按下回车键
|
|
|
+ if (event.keyCode === 13) {
|
|
|
+ // 回车键被按下，执行你想要的操作
|
|
|
+ _this.getList(1);
|
|
|
+ }
|
|
|
});
|
|
|
},
|
|
|
//生命周期-创建之前
|
|
|
- beforeCreated() { },
|
|
|
+ beforeCreated() {},
|
|
|
//生命周期-挂载之前
|
|
|
- beforeMount() { },
|
|
|
+ beforeMount() {},
|
|
|
//生命周期-更新之前
|
|
|
- beforUpdate() { },
|
|
|
+ beforUpdate() {},
|
|
|
//生命周期-更新之后
|
|
|
- updated() { },
|
|
|
+ updated() {},
|
|
|
//生命周期-销毁之前
|
|
|
- beforeDestory() { },
|
|
|
+ beforeDestory() {},
|
|
|
//生命周期-销毁完成
|
|
|
- destoryed() { },
|
|
|
+ destoryed() {},
|
|
|
//如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
- activated() { }
|
|
|
-}
|
|
|
+ activated() {},
|
|
|
+};
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
/* @import url(); 引入css类 */
|
|
|
.bookShelf {
|
|
|
- background: #F7F8FA;
|
|
|
+ background: #f7f8fa;
|
|
|
height: calc(100vh - 64px);
|
|
|
- .option{
|
|
|
+ .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;
|
|
|
+ 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{
|
|
|
+ .searchChangebox {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .searchChange-box {
|
|
|
display: flex;
|
|
|
+ }
|
|
|
+ .searchChange {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
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;
|
|
|
- }
|
|
|
- }
|
|
|
+ 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;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
- .input-search{
|
|
|
- width: 220px;
|
|
|
+ > span {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #000;
|
|
|
+ margin-right: 4px;
|
|
|
}
|
|
|
- }
|
|
|
- .show-title{
|
|
|
- color: #1F2C5C;
|
|
|
- margin: 24px 0 0 0;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 24px;
|
|
|
- line-height: 32px;
|
|
|
- b{
|
|
|
- margin-left: 16px;
|
|
|
- color: #ED5F00;
|
|
|
+ .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;
|
|
|
+ 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;
|
|
|
- }
|
|
|
+.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>
|
|
|
+</style>
|
natasha