Applet/pages/policy/index.vue

<template>
	<view class="container">
		<view class="top">
			<view class="search">
				<!-- <input class="uni-input" size="mini" confirm-type="search" placeholder="请输入您要查询的政策名称" /> -->
				<uni-easyinput class="uni-input" prefixIcon="search" v-model="searchVal" placeholder="请输入您要查询的政策名称"></uni-easyinput>
				<button class="searchBtn" type="default" size="mini" @click="searchBtn">搜索</button>
			</view>
			<view class="tabsBox">
				<view class="tab" v-for="(item, index) in btnList" :key="index">
					<text class="text" :class="{ current: istab == item.typeId }" @click="tabsBtn(item)">{{ item.typeName }}</text>
				</view>
			</view>
		</view>
		<uni-list border class="list">
			<uni-list-item v-for="(item, index) in dataList" :key="index" :ellipsis="2" :title="item.title" link clickable  @click="listItemBtn(item)" ></uni-list-item>
		</uni-list>
		<uni-load-more :status="more" />
	</view>
</template>

<script>
	import request from '../../api/cms.js';
	export default {
		data() {
			return {
				searchVal: '',
				istab: 'all',
				page: 0,
				size: 12,
				policyItem: null,
				// more = 加载前， loading = 加载中， noMore = 没有更多
				more: 'more',
				btnList: [
					{ typeName: '全部', typeId: 'all' },
				],
				dataList: [],
				typeName: ''
			}
		},
		onShow: function() {
			this.init();
		},
		async mounted() {
			// 查询分类鞋标
			const res = await request.getTypeList({ alias: 'policy' });
			this.btnList.push(...res.data);
		},
		methods: {
			async init() {
				this.reset();
				// 获取缓存内的标签值
				this.policyItem = uni.getStorageSync('policyItem');
				if (this.policyItem && (this.policyItem !== null || this.policyItem !== '')){
					this.tabsBtn({ ...this.btnList[0], tagName: this.policyItem });
					return;
				}
				this.tabsBtn({ ...this.btnList[0] });
			},
			// 列表点击函数
			listItemBtn(e) {
				uni.navigateTo({ url: `/pages/details/index?id=${e.id}` })
			},
			// tab标签点击函数
			async tabsBtn(e) {
				this.reset();
				this.istab = e.typeId;
				const filter = {};
				filter.typeName = e.alias ?? 'policy';
				if (e.tagName) filter.tagName = e.tagName;
				if(this.searchVal !== '') filter.title = this.searchVal;
				this.typeName = e.alias ?? 'policy';
				await this.getPolicyList({ ...filter });
			},
			// 搜索函数
			async getPolicyList(e) {
				this.page += 1;
				this.more = 'loading';
				const res = await request.getArticleList({ pageNum: this.page, pageSize: this.size, ...e });
				this.dataList.push(...res.rows)
				// 根据总数 算页数  如果当前页 = 总页数就是没有数据  否则就是上拉加载
				this.more = this.page >= Math.ceil(res.total / this.size) ? 'noMore' : 'more';
			},
			// 搜索函数
			searchBtn() {
				if(!this.searchVal || this.searchVal == '') return;
				this.reset();
				this.getPolicyList({ title: this.searchVal, typeName: 'policy' });
			},
			reset() {
				this.page = 0;
				this.dataList = [];
				this.istab = 'all';
				this.policyItem = null;
			}
		},
		// 页面生命周期中onReachBottom（页面滚动到底部的事件）
		onReachBottom() {
			if(this.more != 'noMore') {
				this.more = 'more';
				const filter = {};
				if(this.searchVal !== '') filter.title = this.searchVal;
				if (this.policyItem !== null && this.policyItem !== '') filter.tagName = this.policyItem;
				filter.typeName = this.typeName;
				this.getPolicyList({ ...filter });
				
			}
		}
	}
</script>

<style>
	.container {
		width: 100%;
		background-color: #fff;
	}
	.top {
		position: fixed;
		top: 0;
		left: 0;
		height: 100px;
		width: 100%;
		z-index: 999;
		background-color: #fff;
	}
	.tabsBox {
		width: 100%;
		border-bottom: 1px solid #d3d3d3;
		display: flex;
	}
	.tab {
		width: 25%;
	}
	.text {
		display: block;
		width: 80%;
		margin: 0 auto;
		text-align: center;
	}
	.current {
		color: #ff9302;
		border-bottom: 1px solid #ff9302;
	}
	.search {
		width: 90%;
		height: 2em;
		border: 1px solid #f3f3f3;
		background-color: #fff !important;
		border-radius: 12px;
		display: flex;
		margin: 20px auto;
	}
	.uni-easyinput {
		width: 70%;
		margin-left: 5%;
		height: 100%;
		font-size: 14px;
	}
	.uni-easyinput .uni-easyinput__content {
		border: none !important;
		height: 100%;
		line-height: 2em;
	}
	.searchBtn {
		width: 20%;
		background-color: #ff9302 !important;
		border: none;
		color: #fff !important;
		height: 2em;
		margin-top: 0.2em;
		margin-left: 4%;
		border-radius: 12px;
	}
	.list {
		display: block;
		/* width: 90%; */
		/* margin: 0 auto; */
		margin-top: 100px;
	}
</style>