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.
624 lines
14 KiB
624 lines
14 KiB
<template>
|
|
<view class="container">
|
|
<!-- 吸顶搜索地址栏 -->
|
|
<u-sticky enable bgColor="#fff" offset-top="0">
|
|
<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">
|
|
<u-notice-bar :volume-icon="false" autoplay is-circular more-icon :speed="200" mode="horizontal" :text="noticeList" :url="'/pages/notice/notice?state='+notice_id"></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)
|
|
},
|
|
//获取轮播图
|
|
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)
|
|
// })
|
|
|
|
},
|
|
|
|
// 下拉刷新 首页推荐房源分页下拉加载，上拉刷新。如果加载完了提示 没有更多了
|
|
|
|
getNiceInfo(){
|
|
this.$api.getNiceInfo().then(res => {
|
|
console.log(res,"tonggaos")
|
|
this.noticeList = 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 ;
|
|
.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;
|
|
width: 100%;
|
|
margin-top: 24rpx;
|
|
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>
|