<template>
<view class="wrap">
<!-- 导航栏插件市场下载 -->
<z-nav-bar backState="3000" title="首页"></z-nav-bar>
<view class="search_con">
<view class="search_box">
<u-search
v-model="keyword"
:show-action="false"
height="50"
@clear="handleSearch"
@search="handleSearch"
:shape="'round'"
:clearabled="true"
></u-search>
</view>
</view>
<view class="tabBox">
<scroll-view class="nav-scroll" scroll-x>
<view class="nav uni-nav">
<view
class="nav-item"
v-for="(item, index) in typeList"
:key="index"
@click="taggleNav(index)"
>
{{ item.name }}
<view :class="activeIndex == index ? 'nav-item-act' : ''"></view>
</view>
</view>
</scroll-view>
<!-- 筛选 -->
<view class="shaixuan" @click="filterPopupShow" v-if="showSelect">
<text class="iconfont icon-shaixuan1"></text>
<view class="sx-txt mr30">筛选</view>
</view>
</view>
<view class="swiper">
<swiper
:current="activeIndex"
:duration="300"
class="swiper-1 table_con"
easing-function="linear"
>
<swiper-item class="swiper-item">
<scroll-view
:lower-threshold="80"
:upper-threshold="30"
:refresher-triggered="refreStatus"
@refresherrefresh="handleRefre"
:refresher-enabled="false"
class="swiper-scroll dataList"
scroll-y="true"
@scrolltolower="reachBottom"
>
<view
v-for="(item, index) in dataList"
:key="index"
class="data-item"
>
<view
class="item_l image-box"
:style="{ backgroundImage: 'url(' + item.src + ')' }"
>
</view>
<view class="item_r">
<view class="item_t">
{{ item.tableName }}
</view>
<view class="item_des">
{{ item.wecharIntroduce }}
</view>
<view class="item_op">
<view class="item_price"> ￥{{ item.originalPrice }} </view>
<view class="item_buy">
<u-button size="mini" type="error">购买</u-button>
</view>
</view>
</view>
</view>
<!-- 无数据图片 -->
<view class="noDataBox" v-if="showNoDataText">
<view class="noDataImg"></view>
<view class="noDataText"> 暂无筛选结果 </view>
</view>
<view v-if="showBottomText" class="bottomText">
--- 没有更多了 ---
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
<!-- 筛选弹窗 -->
<u-popup
v-model="filterShow"
mode="bottom"
border-radius="10"
height="auto"
:mask-close-able="false"
class="filterPopup"
>
<view class="title">筛选</view>
<view class="contentTitle">数据分类</view>
<scroll-view scroll-y="true" class="tagBox">
<view
class="tag"
:class="{ active: cateIndex == index1 }"
v-for="(item1, index1) in dataCateList"
:key="index1"
@click="selectCategroy(item1, index1)"
>
{{ item1.tableType }}
</view>
</scroll-view>
<view class="contentTitle">数据主题</view>
<scroll-view scroll-y="true" class="tagBox">
<view
class="tag"
:class="{ active: subjectSelectList.indexOf(item2) != -1 }"
v-for="(item2, index2) in dataSubList"
:key="index2"
@click="selectSubject(item2, index2)"
>
{{ item2 }}
</view>
</scroll-view>
<view class="btnOptions">
<view class="cancelBtn" @click="cancelPopup">取消</view>
<view class="confirmBtn" @click="confirmPopup">确认</view>
</view>
</u-popup>
</view>
</template>
<script>
import { fetchCsmarData, queryDataSubject } from "@/api/data"; // 后端接口
export default {
data() {
return {
keyword: "",
activeIndex: 0, // 当前选中导航栏
typeList: [], // 导航栏列表
dataList: [], // 列表数据
refreStatus: false, // 是否启用下拉刷新功能
filterShow: false, // 是否展示筛选框
dataCateList: [], // 数据分类数据
currentPage: 1, // 当前页
pageSize: 10, // 页容量
categroyType: "全部", // 筛选的数据分类
isLoadEnd: false, // 数据是否全部加载完
isBottom: !1, //定义变量为false
showBottomText: false, //是否展示列表无数据底部文字
showNoDataText: false, // 是否展示无数据页面
showSelect: true, // 是否展示筛选组件
dataSubList: [], // 数据主题列表
cateIndex: -1, // 数据分类选中列表
categroySelect: "", // 选中数据分类名称
subjectSelectList: [], // 数据主题选中列表
flag: false, // 设置数据分类切换列表更新状态
};
},
onShow() {
this.currentPage = 1;
this.flag = false;
this.dataList = [];
this.typeList = [];
this.subjectSelectList = [];
this.dataSubList = [];
this.keyword = "";
this.cateIndex = this.activeIndex - 1;
this.geteCsmarData();
this.getDataSubject();
},
//下拉刷新
onPullDownRefresh() {
this.dataList = [];
this.currentPage = 1;
this.geteCsmarData();
setTimeout(function () {
uni.stopPullDownRefresh();
}, 1000);
},
onReady() {
document.querySelector("uni-page-wrapper").style.overflow = "hidden";
},
methods: {
// 点击筛选
filterPopupShow() {
this.filterShow = true;
this.currentPage = 1;
},
// 获取数据主题列表
async getDataSubject() {
let params = {
belong: "0",
signcode: "",
tableName: this.keyword,
tableType: this.categroyType,
};
let res = await queryDataSubject(params);
if (res.code == 0) {
this.dataSubList = res.data;
} else {
uni.$u.toast(res.msg);
}
},
// 弹框取消事件
cancelPopup() {
this.filterShow = false;
this.categroyType = sessionStorage.getItem("categroyType");
if (sessionStorage.getItem("subjectSelectList")) {
this.subjectSelectList = [];
this.subjectSelectList = sessionStorage
.getItem("subjectSelectList")
.split(",");
} else {
this.subjectSelectList = [];
}
},
// 数据分类筛选
selectCategroy(item1, index1) {
this.subjectSelectList = [];
this.dataList = [];
this.cateIndex = index1;
this.categroyType = item1.tableType;
this.activeIndex = this.cateIndex + 1;
this.flag = true;
this.getDataSubject();
this.geteCsmarData();
},
// 数据主题筛选
selectSubject(item2, index2) {
if (this.subjectSelectList.indexOf(item2) !== -1) {
this.subjectSelectList.splice(this.subjectSelectList.indexOf(item2), 1); //取消
} else {
this.subjectSelectList.push(item2); //选中添加到数组里
}
},
// 弹框确认事件
confirmPopup() {
this.dataList = [];
this.flag = false;
this.geteCsmarData();
},
// scroll-view到底部加载更多
reachBottom() {
// 判断数据是否全部加载完
if (!this.isBottom && !this.isLoadEnd) {
this.isBottom = !0; //定义变量为true
this.currentPage += 1;
this.flag = false;
(this.subjectSelectList =
this.subjectSelectList.length > 0 ? this.subjectSelectList : []),
this.geteCsmarData();
} else {
this.isLoadEnd = true;
this.showBottomText = true;
}
},
// 获取所有列表数据
geteCsmarData() {
let params = {
belong: "0",
pageNo: this.currentPage,
pageSize: this.pageSize,
tableName: this.keyword,
tableType: this.categroyType == "全部" ? "" : this.categroyType,
topicList: this.subjectSelectList,
};
fetchCsmarData(params).then((res) => {
if (res.data) {
if (this.flag) {
this.filterShow = true;
} else {
this.filterShow = false;
}
let tempList = [];
this.typeList = [];
let arr = [];
arr = res.data.tabaPage.records.map((item) => {
return {
...item,
src: item.src,
};
});
tempList = arr; //定义第1页赋值
if (!tempList || tempList.length == 0) {
// 无数据时
this.showNoDataText = true; //展示无数据框
this.showSelect = false;
this.showBottomText = false;
this.dataList = [];
this.typeList = [];
} else {
//有数据时
this.isBottom = !1; //定义变量为false
this.showBottomText = false;
this.showNoDataText = false;
this.showSelect = true;
this.dataList = this.dataList.concat(...tempList);
let typeList1 = [];
sessionStorage.setItem("subjectSelectList", this.subjectSelectList);
sessionStorage.setItem("categroyType", this.categroyType);
typeList1.unshift({
name: "全部",
});
if (this.currentPage == 1) {
res.data.tbleTypeList.map((i) => {
typeList1.push({
name: i.tableType,
});
});
this.typeList = typeList1;
this.dataCateList = res.data.tbleTypeList;
sessionStorage.setItem(
"typeList",
JSON.stringify(res.data.tbleTypeList)
);
} else {
let tbleTypeList = JSON.parse(sessionStorage.getItem("typeList"));
tbleTypeList.map((i) => {
typeList1.push({
name: i.tableType,
});
});
this.typeList = typeList1;
this.dataCateList = tbleTypeList;
}
if (this.dataList.length >= res.data.tabaPage.total) {
this.isLoadEnd = true;
this.showBottomText = true;
} else {
this.isLoadEnd = false;
this.showBottomText = false;
}
}
}
});
},
// 搜索
handleSearch() {
this.currentPage = 1;
this.flag = false;
this.dataList = [];
this.typeList = [];
this.subjectSelectList = [];
this.dataSubList = [];
this.activeIndex = 0;
this.categroyType = "全部";
this.cateIndex = this.activeIndex - 1;
this.geteCsmarData();
},
// 点击导航切换
taggleNav(index) {
this.dataList = [];
this.flag = false;
this.subjectSelectList = [];
this.activeIndex = index;
this.cateIndex = this.activeIndex - 1;
this.currentPage = 1;
this.typeList.forEach((item, index1) => {
if (index1 == index) {
this.categroyType = item.name;
}
});
this.geteCsmarData();
this.getDataSubject();
},
},
};
</script>
<style lang="scss" scoped>
page {
height: 100%;
background-color: #f2f2f2;
}
/deep/ uni-swiper .uni-swiper-slide-frame {
transform: none !important;
}
.tabBox {
display: flex;
align-items: center;
.nav-scroll {
width: 82%;
white-space: nowrap;
position: relative;
height: 80rpx;
}
.shaixuan {
width: 120rpx;
height: 80rpx;
background-color: #f6f5f8;
color: #666666;
display: flex;
align-items: center;
padding: 0 16rpx;
font-size: 28rpx;
position: fixed;
right: 0;
z-index: 9999;
}
}
.bottomText {
color: #606266;
background-color: #f2f2f2;
height: 100rpx;
line-height: 100rpx;
text-align: center;
}
.noDataBox {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -40%);
.noDataImg {
width: 320rpx;
height: 268rpx;
background-image: url("@/static/images/noData.png");
background-size: 100% 100%;
}
.noDataText {
color: #999999;
font-size: 26rpx;
margin-top: 36rpx;
font-weight: 500;
text-align: center;
}
}
.filterPopup {
width: 100%;
.title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
height: 90rpx;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
width: 100%;
.contentTitle {
font-size: 26rpx;
font-weight: bold;
color: #333333;
padding: 0 39rpx;
height: 44rpx;
}
.tagBox {
width: 100%;
padding: 0 39rpx;
margin-bottom: 40rpx;
max-height: 350rpx;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
.tag {
width: 206rpx;
height: 60rpx;
background: #f6f6f7;
display: inline-block;
border-radius: 6rpx;
border: 1rpx solid #f6f6f7;
text-align: center;
line-height: 60rpx;
margin-top: 26rpx;
margin-right: 26rpx;
&:nth-child(3n) {
margin-right: 0;
}
&.active {
background: #f0f4fe;
border: 1rpx solid #3849b4;
}
}
}
.btnOptions {
width: 100%;
padding: 0 39rpx;
display: flex;
margin-bottom: 54rpx;
.cancelBtn {
width: 50%;
height: 80rpx;
border: 1rpx solid #3849b4;
border-radius: 6rpx 0rpx 0rpx 6rpx;
font-size: 30rpx;
color: #3849b4;
text-align: center;
line-height: 80rpx;
}
.confirmBtn {
width: 50%;
height: 80rpx;
background: #3849b4;
border-radius: 0rpx 6rpx 6rpx 0rpx;
font-size: 30rpx;
color: #ffffff;
text-align: center;
line-height: 80rpx;
}
}
}
.swiper {
height: calc(100vh - 250rpx);
overflow: auto;
}
.center-text {
text-align: center;
margin-top: 15px;
}
.wrap {
position: relative;
overflow: hidden;
}
.image-box {
display: flex;
justify-content: center;
align-items: center;
width: 150upx;
height: 150upx;
margin-right: 32upx;
position: relative;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
float: left;
.img-text {
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
color: #fff;
}
uni-image {
max-width: 100%;
max-height: 100%;
}
}
.search_con {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
height: 80upx;
background-color: #fff;
border-top: 1px solid #ccc;
.search_box {
width: 90%;
display: flex;
justify-content: center;
align-items: center;
/deep/ .u-action-active {
background-color: #fb5454;
padding: 5upx 10upx;
border-radius: 8upx;
color: #fff;
}
}
}
.tab_con {
.uni-scroll-view {
/deep/ .u-tabs-item {
min-width: 80upx;
}
}
}
.table_con {
height: calc(100vh - 220upx) !important;
background-color: #fff;
.uni-swiper-wrapper {
height: inherit;
.swiper-item {
height: inherit;
padding-bottom: 80upx;
position: relative;
overflow-y: scroll;
.dataList {
height: 100%;
margin-bottom: 80rpx;
.data-item {
display: flex;
padding: 20upx;
border-bottom: 1px solid #dedede;
&:last-child {
border-bottom: none;
}
.item_l {
width: 200upx;
height: 200upx;
flex-shrink: 0;
margin-right: 20upx;
}
.item_r {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.item_t {
font-weight: bold;
margin-bottom: 15upx;
}
.item_des {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 15upx;
}
.item_op {
display: flex;
align-items: center;
justify-content: space-between;
.item_price {
color: $uni-color-error;
}
.item_buy {
font-size: 18upx;
}
}
}
}
}
}
}
}
.nav-item {
display: inline-block;
margin: 0 16upx;
text-align: center;
color: #666666;
}
.nav {
white-space: nowrap;
position: relative;
height: 80upx;
padding: 20upx 0;
}
/* #ifndef APP-NVUE */
::-webkit-scrollbar {
display: none;
}
/* #endif */
/* #ifdef H5 */
// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
scroll-view ::v-deep ::-webkit-scrollbar {
display: none;
}
/* #endif */
.nav-item-act {
color: #3849b4;
font-weight: bolder;
position: absolute;
bottom: 0;
width: 55upx;
height: 8upx;
border-radius: 10upx;
background-color: #3849b4;
}
.nav-line {
position: absolute;
bottom: 0;
height: 8upx;
border-radius: 10upx;
background-color: #3849b4;
}
swiper {
height: calc(100vh - 80upx);
}
.swiper-item-list {
height: 400upx;
border-bottom: 2upx solid pink;
line-height: 400upx;
}
.swiper-scroll {
height: 100%;
}
</style>