appAuth_demo/pages/tabbar/resultSquare.vue

<template>
	<view class="container">
		<u-sticky>
			<view class="searchBox">
				<u-search bgColor="rgba(217,217,217,0.3)" placeholder="请输入关键字" :showAction="false"
					v-model="param.keywords" @search="search"></u-search>
				<view class="menu" @click="listModeChange()">
					<image v-if="listMode=='list'" src="/static/img/list.png" mode=""></image>
					<image v-if="listMode=='img'" style="width:40rpx;height:34rpx" src="/static/img/img.png" mode="">
					</image>
					{{listMode=='img'?'图片展示':'列表展示'}}
				</view>
			</view>
		</u-sticky>
		<view class="selBox">
			<view class="selBox_l">
				<view @click="sortShow=true">
					<view>{{sortValue2 ? sortValue2 : '建成年份先后'}}</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
				<image v-if="param.sortType==1" @click="sortTypeChange(2)" src="/static/img/switch.png" mode=""></image>
				<image v-if="param.sortType==2" @click="sortTypeChange(1)" src="/static/img/switch_a.png" mode="">
				</image>
			</view>
			<view class="selBox_r" @click="typeShow=true">
				筛选
				<image src="/static/img/menu1.png" mode=""></image>
			</view>
		</view>

		<view class="imgList" v-if="listMode=='img'">
			<view v-for="(v,i) in list" :key="i">
				<view class="imgList_item" @click="goDetail(v)">
					<u--image :src="v.projectListPicture" width="340rpx" height="auto" mode="widthFix">
						<template v-slot:loading>
							<image class="loading" src="../../static/loading.png" mode=""></image>
						</template>
					</u--image>
					<view class="imgList_item_txt">{{v.projectName}}/{{v.projectTeam}}</view>
				</view>
			</view>
		</view>
		<view class="list" v-if="listMode=='list'">
			<view class="list_item" v-for="(v,i) in list" @click="goDetail(v)">
				<view class="list_item_l">
					<view class="list_item_l_title">{{v.projectName}}</view>
					<view>
						<view>建成年份：{{v.stageFinishDate||"—"}} </view>
						<view class="ml10">设计年份：{{v.stageDesignDate||"—"}} </view>
					</view>
					<view>
						<view>占地面积：{{v.stageLandArea||"—"}}㎡ </view>
						<view class="ml10">建筑面积：{{v.stageBuildArea||"—"}} </view>
					</view>
				</view>
				<view class="list_item_r">
					<image src="/static/img/right.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="loadmoreBox">
			<u-loadmore v-if="list.length>0" :status="status" />
			<u-empty v-if="list.length<=0&&status==='nomore'" textSize="16" mode="list" marginTop="100">
			</u-empty>
		</view>
		<u-popup :show="typeShow" mode="bottom" round="50rpx" @close="typeClose">
			<view class="popupBox">
				<view class="popupBox_title">筛选</view>
				<view class="popupBox_del" @click="typeClose"><u-icon name="close" color="#999999" size="20px"></u-icon>
				</view>
				<view class="popupBox_list">
					<view v-for="(v,i) in typeList" v-if="v.projectCategoryStatus" :key="i"
						:class="{active:param.projectTypeId==v.projectCategoryId}" @click="projectTypeIdChange(v)">
						{{v.projectCategoryName}}</view>
				</view>
				<view class="popupBox_btn">
					<view class="popupBox_btn_cel" @click="typeClose">取消</view>
					<view class="popupBox_btn_sub" @click="search()">确认</view>
				</view>
			</view>
		</u-popup>

		<u-popup :show="sortShow" mode="bottom" round="50rpx" @close="sortClose">
			<view class="popupBox">
				<view class="popupBox_title">年份类型</view>
				<view class="popupBox_del" @click="sortClose"><u-icon name="close" color="#999999" size="20px"></u-icon>
				</view>
				<view class="popupBox_list">
					<view class="sortPad" v-for="(v,i) in sortFieArr" :key="i"
						:class="{active:param.sortField==v.value}" @click="sortFieChange(v)">{{v.label}}</view>
				</view>
				<view class="popupBox_btn">
					<view class="popupBox_btn_cel" @click="sortClose">取消</view>
					<view class="popupBox_btn_sub" @click="search()">确认</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		login,
		resultPlazaPage,
		projectCategoryList
	} from "@/api/index.js"
	export default {
		data() {
			return {
				listMode: "img",
				typeShow: false,
				// 加载前值为loadmore，加载中为loading，没有数据为nomore
				status: 'loadmore',
				param: {
					pageNum: 1,
					pageSize: 10,
					sortType: 1,
					projectTypeId: null,
					sortField: null
				},
				list: [],
				typeList: [],
				sortFieArr: [{
						label: "建成年份",
						value: 1
					},
					{
						label: "设计年份",
						value: 2
					},
					{
						label: "用地面积",
						value: 3
					},
					{
						label: "建筑面积",
						value: 4
					}
				],
				sortShow: false,
				sortValue: '',
				sortValue2: '',
			}
		},
		onLoad() {},
		onPullDownRefresh() {
			this.param.pageNum = 1
			this.getList()
		},
		onReachBottom() {
			if (this.status == "loadmore") {
				this.param.pageNum++;
				this.getList()
			}
		},
		onLoad() {
			this.getList();
			this.getTypeList()
		},
		methods: {
			// 切换显示状态
			listModeChange() {
				this.listMode = this.listMode == 'list' ? 'img' : 'list'
			},
			// 搜索
			search() {
				this.sortValue2 = this.sortValue;
				this.param.pageNum = 1
				this.sortShow = false;
				this.typeShow = false;
				this.getList()
			},
			typeClose() {
				this.typeShow = false;
				this.param.projectTypeId = null;
				// this.search()
			},
			sortClose() {
				this.sortShow = false;
				this.param.sortField = null;
				// this.search()
			},
			sortTypeChange(sortType) {
				this.param.sortType = sortType;
				this.search()
			},
			projectTypeIdChange(row) {
				this.param.projectTypeId = this.param.projectTypeId !== row.projectCategoryId ? row.projectCategoryId :
					null;
			},
			sortFieChange(row) {
				this.sortValue = row.label;
				this.param.sortField = this.param.sortField !== row.value ? row.value : null;
			},
			//获取筛选的类型
			getTypeList() {
				projectCategoryList().then(res => {
					this.typeList = res.data
				})
			},
			goDetail(row) {
				uni.$u.route("pages/resultSquare/detail", {
					stageId: row.stageId
				})
			},
			getList() {
				uni.showLoading({
					title: '加载中'
				});
				this.status = "loading";
				resultPlazaPage(this.param).then(res => {
					if (this.param.pageNum == 1) {
						this.list = res.rows
					} else {
						this.list.push(...res.rows)
					}
					this.status = this.list.length < res.total ? "loadmore" : "nomore";
				}).finally(e => {
					uni.hideLoading();
					uni.stopPullDownRefresh();
				})
			}
		}
	}
</script>

<style lang="scss">
	.searchBox {
		padding: 25rpx 30rpx;
		display: flex;
		border-bottom: 8rpx solid #EBECF0;
		background: #fff;

		.menu {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #1A1A1A;
			margin-left: 30rpx;

			image {
				width: 31rpx;
				height: 27rpx;
				margin-right: 10rpx;
				margin-top: 5rpx;

			}
		}

		::v-deep .u-search__content__input {
			background-color: transparent !important;
		}
	}

	.selBox {
		display: flex;
		justify-content: space-between;
		padding: 28rpx;

		.selBox_l {
			display: flex;
			align-items: center;

			>view {
				width: 252rpx;
				height: 70rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 15rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				color: #D9D9D9;
				background: #ffffff;
				border: 1rpx solid #cccccc;
				border-radius: 8rpx;
			}

			image {
				width: 32rpx;
				height: 36rpx;
				margin-left: 4rpx;
			}
		}

		.selBox_r {
			display: flex;
			align-items: center;
			font-size: 28rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 4rpx;
			}
		}
	}

	.imgList {
		padding: 0 28rpx;
		// display: flex;
		column-count: 2;
		/* 定义列数为3：将图片分为3列 */
		column-gap: 20rpx;
		// column-width:320rpx;
		-webkit-column-fill: auto;
		>view {
			-webkit-column-break-inside: avoid;
			/* Chrome, Safari, Opera */
			page-break-inside: avoid;
			/* Firefox */
			break-inside: avoid;
			// -webkit-overflow-scrolling : touch;
		}

		/* IE 10+, Chrome, Safari, Opera */
		.imgList_item {
			font-size: 0;
			width: 340rpx;
			border-radius: 20rpx;
			overflow: hidden;
			padding-bottom: 30rpx;
			/deep/ .u-image {
				min-height: 160rpx;
			}

			>.imgList_item_txt {
				font-size: 26rpx;
				color: #1A1A1A;
				background: #F2F2F2;
				padding: 16rpx 20rpx;
				line-height: 36rpx;
				font-weight: 700;
				border-radius:0 0 20rpx 20rpx;
				
			}
		}
	}

	.list {
		padding: 0rpx 28rpx 0;

		.list_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 16rpx;
			border-bottom: 1rpx solid #E6E6E6;
			margin-bottom: 30rpx;

			.list_item_l {
				font-size: 24rpx;
				color: #808080;

				.list_item_l_title {
					font-size: 28rpx;
					color: #1A1A1A;
					font-weight: 500;
				}

				>view {
					display: flex;
					margin-bottom: 20rpx;
				}
			}

			.list_item_r {
				image {
					width: 19rpx;
					height: 36rpx;
				}
			}
		}
	}

	.popupBox {
		padding: 0 20rpx;
		position: relative;

		.popupBox_title {
			font-size: 36rpx;
			color: #1A1A1A;
			font-weight: 700;
			text-align: center;
			margin-top: 45rpx;
			margin-bottom: 65rpx;
		}

		.popupBox_del {
			position: absolute;
			right: 30rpx;
			top: 40rpx;
		}

		.popupBox_list {
			display: flex;
			flex-wrap: wrap;

			>view {
				background: #F5F5F5;
				font-size: 24rpx;
				color: #1A1A1A;
				border-radius: 35rpx;
				padding: 20rpx 70rpx;
				margin: 0 15rpx 65rpx;
			}

			.active {
				background: #FFA298;
			}
		}

		.popupBox_btn {
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx 60rpx;

			view {
				width: 285rpx;
				height: 88rpx;
				border-radius: 20rpx;
				font-size: 32rpx;
				text-align: center;
				line-height: 88rpx;
			}

			.popupBox_btn_cel {
				color: #E83A27;
				border: 1rpx solid #e83a27;
			}

			.popupBox_btn_sub {
				background: #E83A27;
				color: #fff;
			}
		}
	}

	.loadmoreBox {
		padding-bottom: 1rpx;
	}

	.sortPad {
		padding: 20rpx 56rpx !important;
	}

	.ml10 {
		margin-left: 10rpx;
	}
	/deep/ .u-image__loading{
		height: 180rpx !important;
	}
	.loading{
		width: 160rpx;
		height: 160rpx;
	}
</style>