You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
540 lines
12 KiB
540 lines
12 KiB
<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 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 === 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>
|
|
</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 === 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是上拉加载
|
|
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:{
|
|
|
|
//获取轮播图
|
|
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)
|
|
// })
|
|
},
|
|
//请求接口获得后台列表数据信息 = 推荐房源
|
|
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;
|
|
}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;
|
|
|
|
.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>
|
|
|
|
|
|
|
|
|