Applet/pages/service/index.vue

<template>
	<view class="container">
		<view class="top">
			<uni-search-bar bgColor="#EEEEEE" class="uni-mt-10" radius="15" placeholder="请输入您要查询的服务名称" clearButton="auto" cancelButton="none" @confirm="search" />
			<view class="tabsBox">
				<view class="tab" v-for="(item, index) in btnList" :key="index" :class="{ current: istab == item.typeId }" @click="tabsBtn(item)">
					{{ item.typeName }}
				</view>
			</view>
		</view>
		<uni-card :title="istitle" class="cardBox">
			<uni-list border class="list">
				<uni-list-item v-for="(item, index) in dataList" :key="index" :note="item.note" :ellipsis="1" :title="item.title" link clickable  @click="listItemBtn(item)" ></uni-list-item>
			</uni-list>
			<uni-load-more :status="more" />
		</uni-card>
	</view>
</template>

<script>
	import request from '../../api/cms.js';
	export default {
		data() {
			return {
				searchVal: '',
				id: '',
				istitle: '',
				page: 0,
				size: 10,
				istab: 'all',
				more: 'more',
				btnList: [
					{ typeName: '全部', typeId: 'all' },
				],
				dataList: [],
				typeName: ''
			}
		},
		async mounted() {
			// 查询分类列表
			const res = await request.getTypeList({ alias: 'service' });
			this.btnList.push(...res.data);
		},
		onShow: function() {
			this.tabsBtn({ ...this.btnList[0] });
		},
		methods: {
			// 搜索函数
			search(e) {
				if(!e.value || e.value == '') return;
				this.reset();
				this.searchVal = e.value;
				this.getServiceList({ title: e.value, typeName: 'service' });
			},
			// tab点击函数
			async tabsBtn(e) {
				this.reset();
				this.istab = e.typeId;
				this.istitle = this.btnList.find(j => j.typeId == e.typeId)?.typeName;
				const filter = {};
				filter.typeName = e.alias ?? 'service';
				this.typeName = e.alias ?? 'service';
				if(this.searchVal !== '') filter.title = this.searchVal;
				await this.getServiceList({ ...filter });
			},
			// 查询详情函数
			listItemBtn(e) {
				uni.navigateTo({ url: `/pages/details/index?id=${e.id}` });
			},
			// 查询列表函数
			async getServiceList(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';
			},
			reset() {
				this.page = 0;
				this.dataList = [];
				this.istab = 'all';
			}
		},
		// 页面生命周期中onReachBottom（页面滚动到底部的事件）
		onReachBottom() {
			if(this.more != 'noMore') {
				this.more = 'more';
				const filter = {};
				if (this.searchVal && this.searchVal !== '')  filter.title = this.searchVal;
				filter.typeName = this.typeName;
				this.getServiceList({ ...filter });
			}
		}
	}
</script>

<style>
	.container {
		width: 100%;
		background-color: #fff;
	}
	.top {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 120px;
		z-index: 999;
		background-color: #fff;
	}
	.searchBox {
		width: 90%;
		margin: 10px auto;
		border: 1px solid #999;
	}
	.tabsBox {
		width: 90%;
		margin: 10px auto;
		display: flex;
	}
	.tab {
		width: 22%;
		margin: 1%;
		text-align: center;
		border: 1px solid #d3d3d3;
		border-radius: 15px;
		font-size: 13px;
		padding: 8px;
	}
	.current {
		color: #fff !important;
		background-color: #ff9302;
		border: none;
	}
	.cardBox {
		margin-top: 110px;
		display: block;
		padding: 10px 0;
	}
	.uni-card__header-content-title {
		font-weight: 800;
		font-size: 18px !important;
	}
</style>