JiangningUrbanManageApp/sub-enterprise/testing-organizations/testing-organizations.vue

<template>
	<view class="container-main">
		<!-- <u-sticky :offset-top="0">
			<view class="search-multiple">
				<view class="multiple-item" v-for="(item,index) in multipleList" :key="index">
					<view class="item-child" @click="clickMultiple(item,index)"
						:class="item.active == true ? 'multipleActive' : '' ">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</u-sticky> -->
		<view class="search-main">
			<view class="search-input">
				<view class="input-icon">
					<image :src="baseImgUrl + 'liao-ning/icon_search.png'" mode=""></image>
				</view>
				<view class="input-middle">
					<u-input v-model="queryParams.checkName" type="text"
						placeholder-style="color:#C4CCD8;font-size:30rpx" :border="false" placeholder="请输入关键字搜索" />
				</view>
				<view class="input-btn" @click="searchList()">搜索</view>
			</view>
			<view class="search-result">
				<view class="result-total">为您搜索到{{ allNum }}条结果</view>
				<view class="result-list">
					<view class="result-item" v-for="item in list" :key="item.id" @click="getInfo(item.id)">
						<view class="item-icon">
							<image :src="baseImgUrl + 'liao-ning/icon_qyzhcx.png'" mode=""></image>
						</view>
						<view class="item-data">
							<view class="data-title">{{ item.checkName }}</view>
							<view class="data-subtitle">{{ item.address }}</view>
						</view>
						<view class="item-arrow">
							<u-icon name="arrow-right" color="#D5D5D5"></u-icon>
						</view>
					</view>
					<u-loadmore :status="status" :load-text="loadText" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getEssayList
	} from "@/api/shianliaoning/check";
	export default {
		data() {
			return {
				baseImgUrl: getApp().globalData.config.iamgeBaseUrl,
				keyWord: "",
				status: "nomore",
				loadText: {
					loading: "努力加载中",
					nomore: "已经到底了~",
				},
				activeList: [],
				list: [],
				//总数
				allNum:0,
				// 总页数
				total: 0,
				loading: false,
				queryParams: {
					service: "",
					checkName: "",
					pageNum: 1,
					pageSize: 10,
				},
				multipleList: [{
						name: "乳制品",
						active: false,
					},
					{
						name: "冷冻饮品",
						active: false,
					},
					{
						name: "焙烤食品",
						active: false,
					},
					{
						name: "肉制品",
						active: false,
					},
					{
						name: "饮料类",
						active: false,
					},
				],
			};
		},
		onLoad() {
			this.getList();
		},
		onReachBottom(e) {
			if (this.queryParams.pageNum < this.total) {
				if (this.loading == true) {
					this.status = "nomore";
					return;
				}
				this.queryParams.pageNum = this.queryParams.pageNum + 1;
				this.getList();
			}
		},
		methods: {
			// 重置
			reset() {
				this.list = [];
				this.total = 0;
				this.queryParams.pageNum = 1;
				this.queryParams.pageSize = 10;
			},
			searchList() {
				this.reset();
				this.getList();
			},
			//获取list
			getList() {
				this.loading = true;
				this.status = "loading";
				getEssayList(this.queryParams).then((res) => {
					console.log(res);
					this.list = [...this.list, ...res.rows];
					this.total = Math.ceil(res.total / this.queryParams.pageSize) || 1;
					this.status = "nomore";
					this.loading = false;
					this.allNum = res.total
				});
			},
			clickMultiple(item, index) {
				this.reset();
				if (this.multipleList[index].active == true) {
					this.activeList.splice(index, 1);
					this.queryParams.queryParams = this.activeList.toString();
					this.getList();
					this.multipleList[index].active = false;
					return;
				}
				this.activeList.push(item.name);
				this.queryParams.queryParams = this.activeList.toString();
				this.getList();
				this.multipleList[index].active = true;
			},
			getInfo(id) {
				uni.navigateTo({
					url: `/sub-enterprise/organ-info/organ-info?id=${id}`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container-main {
		// background-color: #fff;
	}

	.search-multiple {
		height: 220rpx;
		background: #ffffff;

		box-sizing: border-box;
		padding: 30rpx 20rpx;
		display: flex;
		flex-wrap: wrap;

		.multiple-item {
			width: 25%;
			height: 68rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.item-child {
				width: 160rpx;
				height: 68rpx;
				background: #ffffff;
				border-radius: 64rpx;
				border: 1rpx solid #dce3ec;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 520;
				color: #616367;
			}

			.multipleActive {
				background: #3976f1;
				color: #fff;
				border: 0;
			}
		}
	}

	.search-main {
		box-sizing: border-box;
		padding: 20rpx;

		.search-input {
			display: flex;
			align-items: center;
			background: #fff;
			box-shadow: 0px 0px 10rpx 0px rgba(57, 118, 241, 0.0588);
			border-radius: 16rpx;
			box-sizing: border-box;
			padding: 10rpx 25rpx;

			.input-icon {
				height: 30rpx;
				width: 30rpx;
				margin-right: 20rpx;

				image {
					height: 100%;
					width: 100%;
				}
			}

			.input-middle {
				flex: 1;
			}

			.input-btn {
				font-size: 32rpx;
				font-weight: 500;
				color: #3976f1;
			}
		}

		.search-result {
			margin-top: 30rpx;

			.result-total {
				margin-bottom: 20rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #c4ccd8;
			}

			.result-list {
				.result-item {
					display: flex;
					align-items: center;
					background: #fff;
					border-radius: 16rpx;
					box-sizing: border-box;
					padding: 25rpx 20rpx;
					margin-bottom: 20rpx;

					.item-icon {
						height: 82rpx;
						width: 82rpx;

						image {
							height: 100%;
							width: 100%;
						}
					}

					.item-data {
						flex: 1;
						box-sizing: border-box;
						padding-left: 20rpx;

						.data-title {
							font-size: 34rpx;
							font-weight: 550;
							color: #34373b;
						}

						.data-subtitle {
							margin-top: 10rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #b0b4bb;
							overflow: hidden;
							white-space: normal;
							text-overflow: ellipsis;
						}
					}
				}
			}
		}
	}
</style>