JianjianStreet-aplet/pages/index/index.vue

<template>
	<view class="container">
		
		<view class="ant-banner-box">
			<image class="ant-banner" mode="scaleToFill" :src="bannerList[3].image"/>
			<view  class="ant-title">
				<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">
					<view class="ant-page-image-item" v-for="(item,index) in hotList">
						<image class="ant-page-image-item" mode="aspectFill" :src="item.image === null? image:item.image"/>
						<view  class="ant-img-tags">
							<!-- <view class="ant-tags-title">{{item.title}}</view> -->
							<view class="ant-tags-text">{{item.price}}元起</view>
						</view>
					</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 === null? image:item.image"/>
					</view>
					<view class="ant-item-content">
						<view class="ant-item-title">{{item.title}}</view>
						<view class="ant-item-span">{{item.titleText}}</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?imageMogr2/quality/70/thumbnail/1024x",
				bannerList:[],
				addressList:[],
				classList:[],
				hotList:[],
				list:[],
				lock: true, 
				size: 20,
				page: 1,
				total: null,
				is_pull: 1, // 1是下拉刷新 2是上拉加载
			}
		},
		onLoad() {
			this.getBannerList();
			this.getAddressList();
			this.getClassList();
			this.getHotList();
			this.getHouseListPage();
		},
		// 下拉刷新首页推荐房源
		onPullDownRefresh() {
			this.is_pull = 1;
			this.getHouseListPage()
		},
		// 上拉加载
		onReachBottom() {
			this.is_pull = 2;
			// 写下限制重复发  以及最后一页
			this.getHouseListPage()
		},
		// 隐藏微信h5的标题栏
		onReady() {
			
		},
		methods:{
			
			//获取轮播图
			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)
				// })
			},
			//获取好房源
			getHotList(){
				this.$api.getHotList().then(res => {
						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)
				// })
			},
			//请求接口获得后台列表数据信息 = 推荐房源
			getHouseListPage() {
				// 区分上拉加载和下拉刷新 is_pull  下拉 1 上拉 2
				const is_pull = this.is_pull;
				this.$api.getHouseListPage().then(res => {
						this.list = res.result;
						if(is_pull === 1) {
							// 下拉
							this.page = 1;
							this.list = res.result.records;
						}else {
							// 加载
							this.page +=1;
							this.list = this.list.concat(res.result.records);
						}
				}).catch(err => {
					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;
		
		.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;
			
			.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{
				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>