JianjianStreet-aplet/pages/index/index.vue

<template>
	<view class="container">
		<!-- 吸顶搜索地址栏 -->
		<u-sticky bg-color="#fff">
			<view class="sticky">
				<view class="city">
					长沙
				</view>
				<view class="search_btn">
					<u-search placeholder="请输入您要搜索的城市" v-model="keyword" @search="toSearch" @focus="toSearch"></u-search>
				</view>
			</view>
		</u-sticky>
		<!-- </view> -->
		<view class="ant-banner-box">
			<!-- banner 部分 -->
			<swiper class="swiper " circular indicator-dots autoplay :interval="2000" :duration="500"
				indicator-active-color="#00a0ff">
				<swiper-item v-for="(bannerItem,index) in bannerList" class="ant-title" :key="index" @click="toItem(index)">
					<view class="">
						<image :src="bannerItem.image" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="card_box">
			<view class="ant-menu-card">
				<view class="ant-flex-line">
					<view class="ant-icon-menu">
						<view class="ant-icon">
							<image :src="image"></image>
						</view>
						<view class="ant-text">整租</view>
					</view>
					<view class="ant-icon-menu">
						<view class="ant-icon">
							<image :src="image"></image>
						</view>
						<view class="ant-text">新房源</view>
					</view>
					<view class="ant-icon-menu">
						<view class="ant-icon">
							<image :src="image"></image>
						</view>
						<view class="ant-text">合租</view>
					</view>
					<view class="ant-icon-menu">
						<view class="ant-icon">
							<image :src="image"></image>
						</view>
						<view class="ant-text">转租</view>
					</view>

				</view>
			</view>
		</view>


		<!-- 滚动公告 -->
		<view class="notice" @click="toNotice">
			<u-notice-bar more-icon :speed="200" :list="noticeList"></u-notice-bar>
		</view>

		<view class="ant-content">
			<view class="ant-content-page">
				<view class="ant-flex-line">
					<view class="ant-page-title">好房源</view>
					<view class="ant-page-span">平台甄选</view>
					<view class="ant-page-span">品质保障</view>
				</view>

				<view class="ant-flex-line scroll-view_H_x">
					<scroll-view class="scroll-view_H" scroll-x="true" lower-threshold="51" @scrolltolower="scrollTolowerHotList">
						<view class="ant-page-image-item" v-for="(item,index) in hotList" @click="toHomeDetails(item.id)">
							<image class="ant-page-image-item" mode="aspectFill" :src="item.image ? item.image :image" />
							<view class="ant-img-tags">
								<!-- <view class="ant-tags-title">{{item.title}}</view> -->
								<view class="ant-tags-text">{{item.price}}元起{{item.image? '1':'2'}}</view>
							</view>
						</view>
					</scroll-view>

				</view>
			</view>
			<view class="ant-content-page">

				<view class="ant-flex-line ant-head-line" @click="test">
					<view class="ant-page-title">推荐房源</view>
				</view>

				<view class="ant-item-box" v-for="(item,index) in list" @click="toHomeDetails(item.id)">
					<view>
						<image class="ant-item-image" mode="aspectFill" :src="item.image? item.image : image" />
					</view>
					<view class="ant-item-content">
						<view class="ant-item-title">{{item.title}}</view>
						<view class="ant-item-span">{{spliceText(item.titleText,0,39)}}</view>
						<view class="ant-item-span">{{item.address}}</view>
						<view class="ant-item-span"><span>{{item.payType}}</span></view>
						<view class="ant-item-price">{{item.price}} <span>元/月</span></view>
					</view>
				</view>

			</view>

		</view>

		<view class="content-end">
			<view class="line" />
			<view class="center">湖南瀚海黎明·技术支持</view>
		</view>

	</view>
</template>


<script>
	export default {
		data() {
			return {
				image: "https://vrlab-image4.ljcdn.com/release/auto3dhd/eba09229a901cb5cba66fda38f281405/screenshot/1657677701_15/pc0_m7ks1AA5Y.jpg",
				bannerList: [],
				addressList: [],
				classList: [],
				hotList: [],
				list: [],
				noticeList: [],
				lock: true,
				size: 20,
				page: 1,
				total: null,
				is_pull: 1, // 1是下拉刷新 2是上拉加载
				scrollPage: 1, //横向滚动
				scrollSize: 20,
				scrollTotal: null,
				notice_id: '',
			}
		},
		onLoad() {
			this.getBannerList();
			this.getAddressList();
			this.getClassList();
			this.getHotList();
			this.getHouseListPage();
			this.getNiceInfo();
			// 让出导航栏和胶囊的位置
		},
		// 下拉刷新首页推荐房源
		onPullDownRefresh() {
			this.is_pull = 1;
			this.getHouseListPage()
		},
		// 上拉加载
		onReachBottom() {
			this.is_pull = 2;
			const page = this.page;
			const size = this.size;
			const total = this.total;
			// 写下限制重复发  以及最后一页
			if (page * size > total) {
				this.$functions.showToast('没有更多了')
				return;
			}
			this.getHouseListPage()
		},
		// 好房源 向右加载 

		// 隐藏微信h5的标题栏
		onReady() {

		},
		methods: {
			toItem(index) {
				console.log(index)
			},
			toNotice(){
				// 跳转通知
				uni.navigateTo({
					url: '/pages/notice/notice?state='+ this.notice_id
				})
			},
			//获取轮播图
			getBannerList() {
				// this.getBannerList()
				this.$api.getBannerList().then(res => {
					this.bannerList = res.result;
				}).catch(err => {
					console.log(err, "错误信息")
				});
			},
			//获取地区
			getAddressList() {
				this.$api.getAddressList().then(res => {
					this.addressList = res.result;
				}).catch(err => {
					console.log(err, "错误信息")
				});
			},
			//获取分类
			getClassList() {
				this.$api.getClassList().then(res => {
					this.classList = res.result;
				}).catch(err => {
					console.log(err, "错误信息")
				});
			},
			// 向右滚动加载好房源
			scrollTolowerHotList() {
				// 是否已经是最后
				const scrollPage = this.scrollPage;
				const scrollSize = this.scrollSize;
				const scrollTotal = this.scrollTotal;
				if (scrollPage * scrollSize > scrollTotal) {
					this.$functions.showToast('没有更多了');
					return;
				}
				this.$functions.showLoading();
				this.getHotList();
			},
			//获取好房源
			getHotList() {

				this.$api.getHotList().then(res => {
					if (this.scrollTotal !== null) {
						this.scrollPage += 1;
						const hotList = this.hotList;
						this.hotList = hotList.concat(res.result.records);
						this.$functions.hideLoading();
					} else if (this.scrollTotal === null) {
						this.scrollSize = res.result.size;
						this.scrollTotal = res.result.total;
						this.hotList = res.result.records;
					}


				}).catch(err => {
					console.log(err, "错误信息")
				});
				// this.$request('/job-dev/house/applet/indexHotList',{},'GET', (res) => {
				// 	this.hotList = res.records;
				// 	console.log(res.records)
				// })
			},
			// 截断字
			spliceText(text, start_s, length_s) {
				const starts = start_s || 0;
				const lengths = length_s || 10;
				if (text.length < lengths) {
					return text;
				} else {
					return text.slice(starts, lengths) + "...";
				}
			},
			//请求接口获得后台列表数据信息 = 推荐房源
			getHouseListPage() {
				// 区分上拉加载和下拉刷新 is_pull  下拉 1 上拉 2
				const is_pull = this.is_pull;
				this.$functions.showLoading();
				this.$api.getHouseListPage().then(res => {
					// this.list = res.result;
					if (this.page === 1 || this.total == null || is_pull === 1) {
						this.total = res.result.total;
						this.size = res.result.size;
					}
					console.log(is_pull)
					if (is_pull === 1) {
						// 下拉
						console.log(123132)
						this.page = 1;
						this.list = res.result.records;
						// 停止下拉
						uni.stopPullDownRefresh();
					} else {
						// 加载
						this.page += 1;
						this.list = this.list.concat(res.result.records);
					}
					this.$functions.hideLoading();
				}).catch(err => {
					this.$functions.hideLoading();
					console.log(err, "错误信息")
				});
				// this.$request('/job-dev/house/applet/indexListPage',{},'GET', (res) => {
				// 	this.list = res.records;
				// 	console.log(res.records)
				// })

			},
			// 下拉刷新 首页推荐房源分页下拉加载，上拉刷新。如果加载完了提示 没有更多了
			getNiceInfo() {
				this.$api.getNiceInfo().then(res => {
					console.log(res, "tonggaos")
					this.noticeList.push(res.result[0].title);
					this.notice_id = res.result[0].id;
				}).catch(err => {
					console.log(err)
				})
			},

			// 跳转详情页
			toHomeDetails(id) {
				uni.navigateTo({
					url: '/pages/homeDetails/homeDetails?id=' + id
				})
			},
			// 跳转 搜索页面
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			}
		}

	}
</script>




<style lang="scss" scoped>
	.container {
		background-color: #FFF !important;
		// position: relative;
	}

	/deep/ .u-sticky {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		border-bottom: 1px solid #aaa9a5;
		background-color: #fff;

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

			.city {
				padding-right: 20rpx;
			}
		}
	}

	.notice {
		width: 92%;
		margin: 0 30rpx;

		/deep/ .u-notice-bar {
			border-radius: 25rpx;
		}

		/deep/ .u-notice__content {
			height: 100%;
		}
	}

	.ant-float {
		// position: fixed;
		top: 60rpx;
		left: 24rpx;
		z-index: -2;


		.ant-select {
			width: 120rpx;
			padding: 10rpx 24rpx;
			color: #fff;
			font-weight: bolder;
			position: relative;
		}

		.ant-select::after {
			content: "";
			position: absolute;
			top: 8rpx;
			right: 55rpx;
			width: 12rpx;
			height: 12rpx;
			border-bottom: 2rpx solid #FFF;
			border-right: 2rpx solid #FFF;
			transform: rotate(45deg);
		}

		.ant-input {
			height: 48rpx;
			min-width: 460rpx;
			line-height: 48rpx;
			background: rgba(255, 255, 255, .4);
			border-radius: 8rpx;
			padding: 6rpx 24rpx;

			color: #333;
			font-size: 20rpx;
		}

		.ant-input::placeholder {
			color: #FFF;
			font-size: 20rpx;

		}
	}

	.ant-banner-box {
		top: 0;
		z-index: -3;
		background-color: #FFF;
		width: 100%;

		.swiper {
			width: 100%;
			height: 500rpx;

			image {
				width: 100%;
				height: 500rpx;
				border-bottom-left-radius: 100rpx;
				border-bottom-right-radius: 100rpx;
			}
		}

		.ant-banner {
			width: 100vw;
			height: 500rpx;
			border-bottom-left-radius: 100rpx;
			border-bottom-right-radius: 100rpx;
		}

		.ant-title {
			color: #FFF;
			font-size: 42rpx;
			font-weight: bolder;
			text-align: center;
			position: absolute;
			// top: 45%;
			width: 100%;
			line-height: 50rpx;
		}
	}

	.card_box {
		// position: absolute;
		display: flex;
		justify-content: center;
		width: 100%;
		margin: 24rpx 0;
		
		height: 210rpx;

		.ant-menu-card {
			// position: absolute;
			// top: -40rpx;
			z-index: 1;
			margin: 0 24rpx;
			width: calc(100vw - 96rpx);
			background-color: #FFF;
			border-radius: 16rpx;
			min-height: 100rpx;
			padding: 24rpx;
			box-shadow: 10rpx 10rpx 20rpx rgba(134, 136, 136, 0.2);

			.ant-icon-menu {
				width: 150rpx;
				flex: 1;

				.ant-icon {
					width: 80rpx;
					height: 80rpx;
					margin: 8rpx auto;
					border-radius: 50%;

					// border: 1rpx dashed red;
					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
				}

				.ant-text {
					width: 100%;
					font-size: 22rpx;
					color: #222;
					font-weight: bold;
					line-height: 40rpx;
					text-align: center;
				}
			}
		}

	}

	.ant-content {

		margin-top: 24rpx;
		padding: 48rpx 24rpx 20rpx;
		width: calc(100vw - 48rpx);
		overflow: hidden;

		.ant-content-page {
			border-radius: 16rpx;
			min-height: 100rpx;
			// padding: 24rpx 0;
			margin-bottom: 24rpx;

			.scroll-view_H {
				// width: 100%;
				white-space: nowrap;
				width: 100%;
				height: 300rpx;
			}

			.ant-page-title {
				color: #000;
				font-size: 32rpx;
				font-weight: bolder;
				line-height: 62rpx;
				width: 140rpx;
			}

			.ant-head-line {
				width: 100%;
				border-bottom: 1rpx solid #ccc;
				margin-bottom: 20rpx;
			}

			.ant-page-span {
				color: #aaa;
				font-size: 20rpx;
				margin-right: 10rpx;
			}

			.ant-page-image-item {
				display: inline-block;
				border-radius: 4rpx;
				width: 240rpx;
				height: 300rpx;
				margin: 0 10rpx 0 0;
				flex-shrink: 0;
				position: relative;

				.ant-img-tags {
					background-color: rgba(255, 255, 255, .8);
					width: calc(240rpx - 36rpx);
					height: 50rpx;
					position: absolute;
					bottom: 8rpx;
					left: 8rpx;
					padding: 20rpx 10rpx;
					border-radius: 4rpx;

					.ant-tags-title {
						line-height: 30rpx;
						color: #000;
						font-size: 24rpx;
					}

					.ant-tags-text {
						font-size: 18rpx;
						color: #888;
						line-height: 40rpx;
					}
				}
			}


		}




	}

	.ant-item-box {
		display: flex;
		min-height: 80rpx;
		margin-bottom: 20rpx;

		.ant-item-image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 4rpx;
		}

		.ant-item-content {
			color: #888;
			font-size: 28rpx;
			line-height: 42rpx;
			padding: 0 20rpx;

			.ant-item-title {
				color: #000;
				font-weight: bold;
				font-size: 32rpx;
			}

			.ant-item-span {
				color: #888;
				line-height: 40rpx;
				font-size: 24rpx;

				span {
					margin-right: 20rpx;
					font-size: 18rpx;
					background-color: #eee;
					padding: 5rpx 8rpx;
					border-radius: 4rpx;
				}
			}

			.ant-item-price {
				color: #4996f5;
				line-height: 48rpx;
				font-size: 34rpx;
				font-weight: bolder;

				span {
					line-height: 42rpx;
					font-size: 22rpx;
					font-weight: normal;
					margin-left: 10rpx
				}
			}
		}



	}
</style>