fangtanhua/pages/index/pk-list.vue

<template>
	<view class="pk-list">
		<view class="index-bg"></view>
		<view class="search-box u-flex u-row-between" @click="tosearch">
			<u-icon name="search" color="#CCCCCC" size="36"></u-icon>
			<input type="text" placeholder="搜索楼盘" class="input" :disabled="true">
			<text class="text">搜索</text>
		</view>
		<view class="pk-box">
			<view class="box-title">
				全部楼盘
			</view>
			<u-checkbox-group active-color="#1E7DFF" shape="circle" @change="changepk">
				<view class="pk-item u-flex u-row-between" v-for="(item,index) in list" :key="index">
					<image :src="item.logo" class="pk-img" mode="aspectFill"></image>
					<view class="pk-center u-flex-1">
						<u-icon name="trash" class="del-btn" @click="del(index)"></u-icon>
						<view class="item-name u-line-1">
							{{item.name}}
						</view>
						<view class="item-tips">
							<text class="u-line-1" style="white-space: nowrap;" v-if="item.house_type">{{item.house_type.join('·')}}·</text>
							<text style="white-space: nowrap;">{{item.house_min_area || 0}}-{{item.house_max_area || 0}}㎡</text>
						</view>
						<view class="item-tips">
							{{item.area}}
						</view>
						<view class="price-box u-flex">
							<text>参考均价</text>
							<text>{{item.avg_price}}/㎡</text>
						</view>
						<view class="u-flex label-box">
							<text v-for="(a,b) in item.trait" :key="b" v-if="b < 2">{{a}}</text>
						</view>
					</view>
					<u-checkbox :name="item.id" v-model="item.checked"></u-checkbox>
				</view>
			</u-checkbox-group>
			<view style="height: 60vh;" v-if="list.length == 0">
				<u-empty text="请点击上方搜索楼盘" mode="list"></u-empty>
			</view>
		</view>
		<view class="" style="height: 170rpx;"></view>
		<view class="pk-down-btn u-flex u-row-between">
			<text @click="clear">重置</text>
			<text @click="toinfo">PK</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: false,
				list: [],
				ids: []
			}
		},
		onShow() {
			this.list = uni.getStorageSync("pklist") || []
			this.list.forEach(val => {
				val.checked = false
			})
			this.list = JSON.parse(JSON.stringify(this.list))
		},
		methods: {
			del(index) {
				uni.showModal({
					content: "确定删除？",
					success: (e) => {
						if (e.confirm) {
							this.$u.toast("删除成功")
							this.list.splice(index, 1)
							uni.setStorageSync("pklist", this.list)
							this.clear()
						}
					}
				})
			},
			clear() {
				this.ids = []
				this.list.forEach(val => {
					val.checked = false
				})
			},
			changepk(e) {
				this.ids = e
			},
			toinfo() {
				if (this.ids.length < 2) {
					this.$u.toast("至少选择两项")
					return
				}
				if (this.ids.length > 3) {
					this.$u.toast("至多选择三项")
					return
				}
				uni.navigateTo({
					url: "./pk-info?ids=" + JSON.stringify(this.ids)
				})
			},
			tosearch() {
				uni.navigateTo({
					url: "./pk-search"
				})
			}
		}

	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.pk-list {
		position: relative;
		z-index: 1;
		padding: 1rpx 0;

		.pk-down-btn {
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 0 24rpx 54rpx 24rpx;
			z-index: 10;

			text:first-child {
				width: 338rpx;
				line-height: 84rpx;
				background: #B2B2B2;
				border-radius: 20rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}

			text:last-child {
				width: 338rpx;
				line-height: 84rpx;
				background: #FFA120;
				border-radius: 20rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.pk-box {
			width: 702rpx;
			// height: 1760rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 0 auto 20rpx auto;
			padding: 0 20rpx;

			.pk-item {
				margin-bottom: 32rpx;
				position: relative;

				.del-btn {
					position: absolute;
					top: 20rpx;
					right: 0;
					z-index: 10;
				}

				.pk-img {
					width: 280rpx;
					height: 240rpx;
					border-radius: 20rpx;
					margin-right: 20rpx;
				}

				.pk-center {


					.label-box {
						text {
							margin-right: 10rpx;
							padding: 0 12rpx;
							line-height: 40rpx;
							height: 40rpx;
							background: #F5F5F5;
							border-radius: 8rpx;
							font-size: 18rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}
					}

					.price-box {
						margin-bottom: 8rpx;

						text:first-child {
							font-size: 20rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							margin-right: 8rpx;
						}

						text:last-child {
							font-size: 32rpx;
							font-family: DINAlternate-Bold, DINAlternate;
							font-weight: bold;
							color: #FF3B30;
						}
					}

					.item-name {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #131415;
						margin: 10rpx 0;
					}

					.item-tips {
						font-size: 18rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-bottom: 12rpx;
					}
				}
			}

			.box-title {
				padding: 24rpx 0;
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #131415;
			}
		}

		.search-box {
			width: 702rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 24rpx auto;
			padding-left: 24rpx;

			.input {
				flex: 1;
				margin: 0 10rpx;
			}

			.text {
				padding: 0 24rpx;
				border-left: 1rpx solid #E5E7ED;
				line-height: 36rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #1E7DFF;
			}
		}

		.index-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 556rpx;
			background: linear-gradient(180deg, #1E7DFF 0%, #F6F6F6 100%);
			z-index: -1;
		}
	}
</style>