|
@@ -5,13 +5,8 @@
|
|
|
<div class="headBox" v-if="refTYpe == 1">
|
|
|
<div class="name">图书分类</div>
|
|
|
<div class="navBox">
|
|
|
- <div
|
|
|
- v-for="item in subTypeList"
|
|
|
- :key="item.id"
|
|
|
- @click="selectType(item.id)"
|
|
|
- class="onwLevel"
|
|
|
- >
|
|
|
- {{ item.name }}
|
|
|
+ <div v-for="item in subTypeList" :key="item.id" class="onwLevel">
|
|
|
+ <span @click="selectType(item)">{{ item.name }}</span>
|
|
|
|
|
|
<div v-if="item?.cateRelationPoList" class="twoLevel">
|
|
|
<span
|
|
@@ -19,7 +14,7 @@
|
|
|
v-for="it in item.cateRelationPoList"
|
|
|
:key="it.id"
|
|
|
:class="{ booke_type_color: it.id === selctType }"
|
|
|
- @click="selectType(it.id)"
|
|
|
+ @click="selectType(it)"
|
|
|
>
|
|
|
{{ it.name }}
|
|
|
</span>
|
|
@@ -29,18 +24,23 @@
|
|
|
</div>
|
|
|
<div class="rightBox">
|
|
|
<div v-if="refTYpe == 1">
|
|
|
- <div class="classification">中图分类法:>>马克思主义、列宁主义、毛</div>
|
|
|
- <div class="threeLevel">
|
|
|
+ <div class="classification"
|
|
|
+ >中图分类法:<span v-for="item in anchorList" :key="item.id"
|
|
|
+ >>>> <span @click="selectClass(item)" class="anchor">{{ item.name }} </span>
|
|
|
+ </span></div
|
|
|
+ >
|
|
|
+ <div class="threeLevel" v-if="listChildCategory && listChildCategory.length">
|
|
|
<span
|
|
|
class="booke_type"
|
|
|
v-for="it in listChildCategory"
|
|
|
:key="it.id"
|
|
|
:class="{ booke_type_color: it.id === selctType }"
|
|
|
- @click="selectType(it.id)"
|
|
|
+ @click="selectTwoType(it)"
|
|
|
>
|
|
|
{{ it.name }}(全部:{{ it.bookNum }})
|
|
|
</span>
|
|
|
</div>
|
|
|
+ <div v-else style="height: 30px"></div>
|
|
|
</div>
|
|
|
<div class="no-data" v-if="!total">
|
|
|
<img src="@/assets/images/kongdata.svg" />
|
|
@@ -187,6 +187,7 @@
|
|
|
};
|
|
|
const subTypeList = ref([]);
|
|
|
const listChildCategory = ref([]);
|
|
|
+ const anchorList = ref([]);
|
|
|
const getSubType = () => {
|
|
|
if (refTYpe.value) {
|
|
|
book.listCategory({ pid: refTYpe.value }).then((res) => {
|
|
@@ -197,6 +198,8 @@
|
|
|
}
|
|
|
console.log(subTypeList.value);
|
|
|
getListChildCategory(refTYpe.value);
|
|
|
+ anchorList.value = [];
|
|
|
+ anchorList.value.push({ id: refTYpe.value, name: '全部' });
|
|
|
getbookList();
|
|
|
});
|
|
|
}
|
|
@@ -213,9 +216,11 @@
|
|
|
onMounted(() => {
|
|
|
getSubType();
|
|
|
});
|
|
|
- const selectType = (id) => {
|
|
|
- selctType.value = id;
|
|
|
- getListChildCategory(id);
|
|
|
+ const selectType = (val) => {
|
|
|
+ selctType.value = val.id;
|
|
|
+ getListChildCategory(val.id);
|
|
|
+ anchorList.value = [];
|
|
|
+ anchorList.value.push(val);
|
|
|
getbookList();
|
|
|
// let arry = data.filter((item) => item.id == id);
|
|
|
// console.log(arry, 'aaa');
|
|
@@ -223,7 +228,22 @@
|
|
|
// total.value = pkglist.value.length;
|
|
|
// showBookList.value = true;
|
|
|
};
|
|
|
+ const selectTwoType = (val) => {
|
|
|
+ selctType.value = val.id;
|
|
|
+ getListChildCategory(val.id);
|
|
|
|
|
|
+ anchorList.value.push(val);
|
|
|
+ getbookList();
|
|
|
+ };
|
|
|
+ const selectClass = (val) => {
|
|
|
+ selctType.value = val.id;
|
|
|
+ getListChildCategory(val.id);
|
|
|
+ const ind = anchorList.value.findIndex((item) => item == val);
|
|
|
+ console.log(ind);
|
|
|
+ const arr = anchorList.value.slice(0, ind + 1);
|
|
|
+ anchorList.value = arr;
|
|
|
+ getbookList();
|
|
|
+ };
|
|
|
// 分页
|
|
|
const cuerrchange = (num) => {
|
|
|
current.value = num;
|
|
@@ -348,7 +368,7 @@
|
|
|
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
+ justify-content: start;
|
|
|
.item {
|
|
|
width: 304px;
|
|
|
height: 200px;
|
|
@@ -617,7 +637,7 @@
|
|
|
.minBox {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
- width: 1200px;
|
|
|
+ width: 1248px;
|
|
|
margin: 0 auto;
|
|
|
.headBox {
|
|
|
width: 250px;
|
|
@@ -633,6 +653,8 @@
|
|
|
background: #ffffff;
|
|
|
border-radius: 4px;
|
|
|
padding: 10px 20px;
|
|
|
+ height: 800px;
|
|
|
+ overflow-y: auto;
|
|
|
.onwLevel {
|
|
|
font-size: 14px;
|
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
@@ -659,11 +681,21 @@
|
|
|
}
|
|
|
.rightBox {
|
|
|
flex: 1;
|
|
|
+ .classification {
|
|
|
+ .anchor {
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ color: #1677ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.threeLevel {
|
|
|
background: #fff;
|
|
|
border-radius: 4px;
|
|
|
padding: 16px 20px;
|
|
|
margin: 16px 0;
|
|
|
+ width: 94%;
|
|
|
+
|
|
|
span {
|
|
|
font-size: 12px;
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|