<template>
|
<div class="bookListBox">
|
<div class="searchForm">
|
<div class="searchBox">
|
<div @click="onClickLeft">
|
<van-icon name="arrow-left" color="#2b68cd" />
|
</div>
|
<van-search
|
v-model="searchAllWords"
|
placeholder="请输入搜索关键词"
|
class="search"
|
@search="onSearch"
|
/>
|
</div>
|
<div class="selectBox">
|
<van-dropdown-menu class="classifySortBox">
|
<van-dropdown-item
|
:title="teachingLevelTitle"
|
v-model="teachingLevelType"
|
:options="teachingLevel"
|
@change="searchSort()"
|
/>
|
<van-dropdown-item
|
:title="professionalCategoryTitle"
|
v-model="professionalCategoryType"
|
:options="professionalCategory"
|
@change="searchSort()"
|
/>
|
<van-dropdown-item
|
:title="zoneTitle"
|
v-model="zoneType"
|
:options="zone"
|
@change="searchSort()"
|
/>
|
</van-dropdown-menu>
|
<div class="reset" @click="resetClick()">
|
<span>重置</span>
|
<img src="@/assets/images/textBook/chongzhi.png" alt />
|
</div>
|
</div>
|
</div>
|
<div class="listBox">
|
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
<van-list
|
v-model="loading"
|
:finished="finished"
|
:finished-text="finishedtext"
|
@load="onLoad"
|
>
|
<template slot="finished" name="finished">
|
<div v-if="listData.length == 0">
|
<van-empty description="暂无数据" />
|
</div>
|
<div v-else>
|
没有更多了
|
</div>
|
</template>
|
<div class="flexWrap" v-if="listData.length > 0">
|
<div
|
class="displayColumn"
|
v-for="(item, index) in listData"
|
:key="index"
|
@click="goBookDetail(item)"
|
>
|
<div class="imgBox">
|
<img :src="item.icon" alt class="autoImg" />
|
</div>
|
<div class="bookInfo">
|
<div class="title" :title="item.name">
|
{{ item.name }}
|
</div>
|
<div class="author" :title="item.tourism_author">
|
{{ item.tourism_author }}
|
</div>
|
<div class="priceBox">
|
<span v-if="item.price > 0" class="price">{{
|
"¥" + tool.toDecimal2(item.price)
|
}}</span>
|
<span class="freePrice" v-if="item.price == 0">免费</span>
|
<span class="oldPrice" v-if="item.oldPrice">{{
|
"¥" + tool.toDecimal2(item.oldPrice)
|
}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</van-list>
|
</van-pull-refresh>
|
</div>
|
<!-- <Footer /> -->
|
</div>
|
</template>
|
<script>
|
import Vue from "vue";
|
// import Footer from "@/components/footer/footer";
|
import { Toast, Lazyload } from "vant";
|
Vue.use(Lazyload);
|
Vue.use(Toast);
|
export default {
|
props: {
|
keyWords: {
|
type: String,
|
default: ""
|
}
|
},
|
components: {
|
// Footer
|
// backHeader
|
},
|
data() {
|
return {
|
listData: [],
|
btnFlag: false,
|
circleList: "circleList",
|
changeClass: "changeClass",
|
searchBarFixed: false,
|
searchAllWords: "",
|
teachingLevelTitle: "",
|
professionalCategoryTitle: "",
|
zoneTitle: "",
|
teachingLevel: [
|
{
|
text: "全部",
|
value: "all"
|
}
|
],
|
professionalCategory: [
|
{
|
text: "全部",
|
value: "all"
|
}
|
],
|
zone: [
|
{
|
text: "全部",
|
value: "all"
|
}
|
],
|
teachingLevelType: "",
|
professionalCategoryType: "",
|
zoneType: "",
|
finishedtext: "",
|
loading: false,
|
finished: false,
|
refreshing: false,
|
sum: "",
|
//分页
|
paginationData: {
|
page: 1,
|
limit: 10,
|
totalCount: 0,
|
totalPage: 0
|
}
|
};
|
},
|
created() {
|
this.searchAllWords = this.$route.query.searchAllWords || "";
|
this.getProductType();
|
},
|
mounted() {
|
window.addEventListener("scroll", this.scrollToTop);
|
window.addEventListener("scroll", this.handleScroll);
|
},
|
destroyed() {
|
window.removeEventListener("scroll", this.scrollToTop);
|
},
|
|
methods: {
|
getProductType() {
|
this.MG.store
|
.getProductTypeField({
|
refCodes: [
|
"tourism_teachingLevel",
|
"tourism_professionalCategory",
|
"tourism_zone"
|
]
|
})
|
.then(res => {
|
if (res.length > 0) {
|
res.forEach(element => {
|
let optionList = JSON.parse(element.config).option;
|
if (element.refCode == "tourism_teachingLevel") {
|
this.teachingLevelTitle = element.name;
|
let list = [];
|
optionList.forEach(item => {
|
list.push({
|
text: item.name,
|
value: item.value,
|
checked: false
|
});
|
});
|
this.teachingLevel = [...this.teachingLevel, ...list];
|
console.log(this.teachingLevel, 222);
|
}
|
if (element.refCode == "tourism_professionalCategory") {
|
this.professionalCategoryTitle = element.name;
|
let list = [];
|
optionList.forEach(item => {
|
list.push({
|
text: item.name,
|
value: item.value,
|
checked: false
|
});
|
});
|
this.professionalCategory = [
|
...this.professionalCategory,
|
...list
|
];
|
}
|
if (element.refCode == "tourism_zone") {
|
this.zoneTitle = element.name;
|
let list = [];
|
optionList.forEach(item => {
|
list.push({
|
text: item.name,
|
value: item.value,
|
checked: false
|
});
|
});
|
this.zone = [...this.zone, ...list];
|
}
|
});
|
}
|
});
|
},
|
onLoad() {
|
var that = this;
|
that.getList();
|
},
|
//获取列表
|
getList() {
|
var that = this;
|
this.finished = false;
|
this.loading = true;
|
this.finishedtext = "加载中";
|
let searchData = {};
|
if (that.searchAllWords) {
|
searchData = {
|
"Name*": that.searchAllWords,
|
"||tourism_author*": that.searchAllWords
|
};
|
}
|
const obj = {
|
path:
|
this.config.digitalTextBooksGoodsStore +
|
"\\" +
|
this.config.refCodes.textBooksStore.textBookCategory,
|
storeInfo: this.config.digitalTextBooksGoodsStore,
|
queryType: "*",
|
coverSize: {
|
height: 540
|
},
|
sort: {
|
type: "Desc",
|
field: "CreateDate"
|
},
|
|
paging: {
|
start: (this.paginationData.page - 1) * this.paginationData.limit,
|
size: this.paginationData.limit
|
},
|
fields: {
|
tourism_author: [],
|
tourism_publicationDate: [],
|
"tourism_teachingLevel*":
|
this.teachingLevelType == "all" ? "" : this.teachingLevelType,
|
"tourism_professionalCategory*":
|
this.professionalCategoryType == "all"
|
? ""
|
: this.professionalCategoryType,
|
"tourism_zone*": this.zoneType == "all" ? "" : this.zoneType,
|
...searchData,
|
viewCount: []
|
}
|
};
|
this.MG.store.getProductList(obj).then(res => {
|
that.listData = [...that.listData, ...res.datas];
|
//分页
|
that.paginationData.totalCount = res.total;
|
if (res.total > that.paginationData.limit) {
|
that.paginationData.totalPage = parseInt(
|
res.total / that.paginationData.limit
|
);
|
if (res.total % that.paginationData.limit > 0) {
|
that.paginationData.totalPage++;
|
}
|
} else {
|
that.paginationData.totalPage = 1;
|
}
|
that.sum = Number(Math.ceil(res.total / this.paginationData.limit));
|
// 加载状态结束
|
that.loading = false;
|
that.refreshing = false;
|
if (that.paginationData.page == this.sum) {
|
that.finished = true;
|
that.finishedtext = "没有更多了";
|
return false;
|
}
|
if (that.listData.length < 1) {
|
that.loading = false;
|
that.finished = true;
|
that.finishedtext = "暂无数据";
|
}
|
console.log(that.listData);
|
that.paginationData.page++;
|
});
|
},
|
|
//选中分类
|
searchSort() {
|
this.listData = [];
|
this.paginationData.page = 1;
|
this.finished = false;
|
this.loading = true;
|
this.getList();
|
},
|
resetClick() {
|
this.listData = [];
|
this.teachingLevelType = "all";
|
this.professionalCategoryType = "all";
|
this.zoneType = "all";
|
this.searchAllWords = "";
|
this.paginationData.page = 1;
|
this.finished = false;
|
this.loading = true;
|
this.getList();
|
},
|
onSearch() {
|
this.listData = [];
|
this.paginationData.page = 1;
|
this.finished = false;
|
this.loading = true;
|
this.getList();
|
},
|
onRefresh() {
|
this.listData = [];
|
this.paginationData.page = 1;
|
this.finished = false;
|
this.loading = true;
|
this.onLoad();
|
},
|
goBookDetail(data) {
|
if (data.refCode) {
|
this.$router.push({
|
path: "/bookDetail",
|
query: {
|
id: data.id
|
}
|
});
|
} else {
|
Toast.fail("正在建设中，敬请期待");
|
}
|
},
|
// 点击图片回到顶部方法，加计时器是为了过渡顺滑
|
backTop() {
|
const that = this;
|
const timer = setInterval(() => {
|
const ispeed = Math.floor(-that.scrollTop / 5);
|
document.documentElement.scrollTop = document.body.scrollTop =
|
that.scrollTop + ispeed;
|
if (that.scrollTop === 0) {
|
clearInterval(timer);
|
}
|
}, 16);
|
},
|
// 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
|
scrollToTop() {
|
const that = this;
|
const scrollTop =
|
window.pageYOffset ||
|
document.documentElement.scrollTop ||
|
document.body.scrollTop;
|
that.scrollTop = scrollTop;
|
if (that.scrollTop > 60) {
|
that.btnFlag = true;
|
} else {
|
that.btnFlag = false;
|
}
|
},
|
handleScroll() {
|
var scrollTop =
|
window.pageYOffset ||
|
document.documentElement.scrollTop ||
|
document.body.scrollTop;
|
if (scrollTop > 100) {
|
this.searchBarFixed = true;
|
} else {
|
this.searchBarFixed = false;
|
}
|
},
|
onClickLeft() {
|
this.$router.go(-1);
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.searchForm {
|
width: 100%;
|
height: 105px;
|
position: fixed;
|
top: 0px;
|
z-index: 999;
|
background-color: #e2f1fe;
|
border-bottom: 3px solid #fff;
|
}
|
.searchBox {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 15px !important;
|
}
|
.search {
|
background: none !important;
|
width: 90%;
|
padding: 0 !important;
|
}
|
.selectBox {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 36px;
|
padding: 0 15px;
|
}
|
.classifySortBox {
|
height: 36px;
|
display: flex;
|
align-items: center;
|
flex: 1 1;
|
}
|
.reset {
|
height: 36px;
|
width: 45px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
color: #2b68cd;
|
}
|
|
.listBox {
|
margin-top: 105px;
|
width: 100%;
|
padding: 15px;
|
padding-bottom: 50px;
|
background: linear-gradient(180deg, #e2f1fe 0%, #ffffff 100%);
|
}
|
|
.listBox >>> .van-list {
|
min-height: calc(100vh - 220px);
|
}
|
.flexWrap {
|
display: flex;
|
flex-wrap: wrap;
|
min-height: 147px;
|
}
|
|
.displayColumn {
|
width: calc(100% / 3 - 14px);
|
margin: 7px;
|
}
|
|
.displayColumn .imgBox {
|
width: 100%;
|
height: 135px;
|
margin: 0 auto;
|
border-radius: 5px;
|
transition: transform 0.3s ease;
|
transform: scale(1);
|
overflow: hidden;
|
box-shadow: 0 3px 6px 1px #00000029;
|
}
|
|
.displayColumn .bookInfo {
|
margin: 0;
|
overflow: hidden;
|
}
|
|
.displayColumn .bookInfo .title {
|
color: #333;
|
font-weight: 600;
|
margin-top: 10px;
|
margin-bottom: 8px;
|
font-size: 14px;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
}
|
.displayColumn .bookInfo .author {
|
font-size: 14px;
|
color: #999;
|
margin: 5px 0;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
}
|
|
.price {
|
color: #ef1b3a;
|
font-size: 15px;
|
font-weight: bold;
|
}
|
.freePrice {
|
color: #0bc266;
|
font-size: 15px;
|
font-weight: bold;
|
}
|
.oldPrice {
|
text-decoration: line-through;
|
color: #999 !important;
|
margin-left: 5px;
|
font-size: 13px;
|
}
|
</style>
|
<style>
|
.van-search__content {
|
background-color: #fff;
|
border-radius: 4px;
|
}
|
|
.van-dropdown-menu__bar {
|
background: none !important;
|
height: 36px !important;
|
flex: 1;
|
box-shadow: none !important;
|
}
|
.van-dropdown-menu__item {
|
justify-content: space-between !important;
|
}
|
.van-dropdown-menu__title {
|
font-size: 14px;
|
}
|
.van-dropdown-menu__title::after {
|
border-color: transparent transparent #999 #999;
|
}
|
|
.van-dropdown-menu__title--active {
|
color: #2b68cd;
|
}
|
.van-dropdown-item__option--active {
|
color: #2b68cd;
|
}
|
.van-dropdown-item__option--active .van-dropdown-item__icon {
|
color: #2b68cd;
|
}
|
.van-popup {
|
border-radius: 0 0 10px 10px;
|
}
|
.van-pull-refresh {
|
border-radius: 10px;
|
background: #fff;
|
padding: 5px;
|
}
|
</style>
|
