JianjianStreet-aplet/pages/index/index.vue

<template>
	<view class="container">

		<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>
			<!-- <image class="ant-banner" mode="scaleToFill" :src="bannerList[3].image" /> -->
			<!-- <view class="">
				<p>一个有温度的家</p>
				<p class="ant-font-24">超多房源｜等你来挑</p>
			</view> -->
		</view>
		<view class="ant-float">
			<view class="ant-flex-line">
				<view class="ant-select">江华</view>
				<!-- <input class="ant-input" value="" placeholder="试试输入你想住的地点"/> -->
			</view>
		</view>
		<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 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">
							<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">
					<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: [],
				lock: true,
				size: 20,
				page: 1,
				total: null,
				is_pull: 1, // 1是下拉刷新 2是上拉加载
				scrollPage: 1, //横向滚动
				scrollSize: 20,
				scrollTotal: null,
			}
		},
		onLoad() {
			this.getBannerList();
			this.getAddressList();
			this.getClassList();
			this.getHotList();
			this.getHouseListPage();
		},
		// 下拉刷新首页推荐房源
		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)
			},
			//获取轮播图
			getBannerList() {
				// this.getBannerList()
				this.$api.getBannerList().then(res => {
					this.bannerList = res.result;
				}).catch(err => {
					console.log(err, "错误信息")
				});
				// this.$request('/job-dev/house/applet/banner',{},'GET', (res) => {
				// 	this.bannerList = res;
				// 	console.log("111111")
				// 	console.log(res[0].image)
				// })
			},
			//获取地区
			getAddressList() {
				this.$api.getAddressList().then(res => {
					this.addressList = res.result;
				}).catch(err => {
					console.log(err, "错误信息")
				});
				// this.$request('/job-dev/house/applet/indexListPage',{},'GET', (res) => {
				// 	this.addressList = res.records;
				// 	console.log(res.records)
				// })
			},
			//获取分类
			getClassList() {
				this.$api.getClassList().then(res => {
					this.classList = res.result;
				}).catch(err => {
					console.log(err, "错误信息")
				});
				// this.$request('/job-dev/house/applet/indexClass',{},'GET', (res) => {
				// 	this.classList = res.records;
				// 	console.log(res.records)
				// })
			},
			// 向右滚动加载好房源
			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)
				// })

			}

			// 下拉刷新 首页推荐房源分页下拉加载，上拉刷新。如果加载完了提示 没有更多了


			// 上拉加载
		}

	}
</script>




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

	.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 {
		position: fixed;
		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;
		}
	}


	.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: 520rpx;
		padding: 120rpx 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>