351 lines
8.9 KiB
Vue
351 lines
8.9 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar placeholder fixed>
|
||
<template slot="left">
|
||
<view style="display: flex;align-items: center;height: 44px;">
|
||
<image style="height: 30px;" src="@/static/logo-chang.png" mode="heightFix"></image>
|
||
</view>
|
||
</template>
|
||
</u-navbar>
|
||
<!-- 搜索 -->
|
||
<u-sticky :offset-top="stickyTop" zIndex="999">
|
||
<view class="search-fix fixed" v-if="scrollTop < 30">
|
||
<view class="search">
|
||
<u-notice-bar bgColor="#ffffff" direction="column" :text="hotKeywords" speed="250" @click="onNoticeBar"></u-notice-bar>
|
||
<!-- <uni-data-select class="select-width" v-model="where.region" :localdata="region"
|
||
placeholder="所在区域"></uni-data-select> -->
|
||
<view class="input">
|
||
<u-search placeholder="您想找哪里" bgColor="#ffffff" v-model="where.keywords" :showAction="false" :animation="true" @search="onSearch"></u-search>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="search-fix" v-else>
|
||
<view class="search">
|
||
<u-notice-bar bgColor="#ffffff" direction="column" :text="hotKeywords" speed="250"></u-notice-bar>
|
||
<!-- <uni-data-select class="select-width" v-model="where.region" :localdata="region"
|
||
placeholder="所在区域"></uni-data-select> -->
|
||
<view class="input">
|
||
<u-search placeholder="您想找哪里" bgColor="#ffffff" v-model="where.keywords" :showAction="false" :animation="true" @search="onSearch"></u-search>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-sticky>
|
||
<!-- 幻灯片 -->
|
||
<view class="swiper">
|
||
<u-swiper :list="swiperList" :height="180" :radius="0" @click="click"></u-swiper>
|
||
</view>
|
||
<!-- 选项卡 -->
|
||
<view class="tabs">
|
||
<u-tabs :list="menu" @click="onClick"></u-tabs>
|
||
</view>
|
||
<uv-waterfall ref="waterfall" v-model="list" left-gap="10" right-gap="10" column-gap="8"
|
||
@changeList="changeList">
|
||
<!-- 第一列数据 -->
|
||
<template v-slot:list1>
|
||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||
<view class="house-list">
|
||
<block v-for="(item,index) in list1" :key="index">
|
||
<view class="item" @click="$push('sub_pages/house/detail?houseId=' + item.houseId)">
|
||
<image :src="item.files[0].url" mode="widthFix">
|
||
</image>
|
||
<view class="info">
|
||
<view class="title">{{ item.houseTitle }}</view>
|
||
<view class="desc"><text>{{ item.extent }}m²|{{ item.toward }}</text></view>
|
||
<view class="price">{{ item.monthlyRent }}元/月</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</template>
|
||
<!-- 第二列数据 -->
|
||
<template v-slot:list2>
|
||
<!-- 为了磨平部分平台的BUG，必须套一层view -->
|
||
<view class="house-list">
|
||
<block v-for="(item,index) in list2" :key="index">
|
||
<view class="item" @click="$push('sub_pages/house/detail?houseId=' + item.houseId)">
|
||
<image :src="item.files[0].url" mode="widthFix">
|
||
</image>
|
||
<view class="info">
|
||
<view class="title">{{ item.houseTitle }}</view>
|
||
<view class="desc"><text>{{ item.extent }}m²|{{ item.toward }}</text></view>
|
||
<view class="price">{{ item.monthlyRent }}元/月</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</template>
|
||
</uv-waterfall>
|
||
<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="list.length == 0">
|
||
</u-empty>
|
||
<!-- <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
|
||
@scrolltolower="lower" @scroll="onScroll">
|
||
<view class="house-list" v-if="list.length > 0">
|
||
<block v-for="(item,index) in list" :key="index">
|
||
<view class="item" @click="$push('sub_pages/house/detail?houseId=' + item.houseId)">
|
||
<image :src="item.files[0].url" mode="widthFix">
|
||
</image>
|
||
<view class="info">
|
||
<view class="title">{{ item.houseTitle }}</view>
|
||
<view class="desc"><text>{{ item.extent }}m²|{{ item.toward }}</text></view>
|
||
<view class="price">{{ item.rent }}元/月</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="list.length == 0">
|
||
</u-empty>
|
||
</scroll-view> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as Util from '@/utils/util.js'
|
||
import store from '@/store'
|
||
import storage from '@/utils/storage'
|
||
import * as DictApi from '@/api/dict.js'
|
||
import * as HouseInfoApi from '@/api/house-info.js'
|
||
|
||
const menu = [{
|
||
name: '推荐',
|
||
reset: true
|
||
},
|
||
{
|
||
name: '必看好房',
|
||
reset: false
|
||
}
|
||
];
|
||
const loginUserId = uni.getStorageSync('userId')
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: [],
|
||
list1: [],
|
||
list2: [],
|
||
loadMore: true,
|
||
status: '加载更多',
|
||
page: 1,
|
||
where: {
|
||
recommend: 1,
|
||
status: 0
|
||
},
|
||
region: [],
|
||
// 控制onShow事件是否刷新订单列表
|
||
canReset: false,
|
||
disabled: false,
|
||
swiperList: [
|
||
'https://oss.wsdns.cn/20240708/9e1f58e7fc7b4bad92edd852ff34dbcb.png?x-oss-process=image/resize,w_750/quality,Q_90',
|
||
'https://oss.wsdns.cn/20240708/c95838b78b5746eb934daffb12a2efdc.png?x-oss-process=image/resize,w_750/quality,Q_90',
|
||
],
|
||
hotKeywords: [
|
||
'五象航洋城',
|
||
'富雅国际金融中心'
|
||
],
|
||
menu,
|
||
scrollTop: 0,
|
||
old: {
|
||
scrollTop: 0
|
||
},
|
||
stickyTop: 60
|
||
};
|
||
|
||
},
|
||
onLoad() {
|
||
this.getDict()
|
||
this.list = []
|
||
this.onRefreshList()
|
||
uni.$u.mpShare = {
|
||
title: '爱尚家找房'
|
||
}
|
||
|
||
uni.getSystemInfo({
|
||
success: (res) => {
|
||
this.stickyTop = res.statusBarHeight + 44 + 20
|
||
}
|
||
})
|
||
},
|
||
onShow() {},
|
||
onBackPress() {},
|
||
onUnload() {
|
||
|
||
},
|
||
onPageScroll(e) {
|
||
this.scrollTop = e.scrollTop
|
||
},
|
||
// 触底函数
|
||
onReachBottom() {
|
||
console.log("触底函数: ");
|
||
const app = this
|
||
if (app.loadMore) {
|
||
app.page = ++app.page;
|
||
app.onRefreshList()
|
||
}
|
||
},
|
||
methods: {
|
||
changeList(e) {
|
||
this[e.name].push(e.value);
|
||
},
|
||
getDict() {
|
||
DictApi.getDictionaryOptions({
|
||
dictCode: 'region'
|
||
}).then(res => {
|
||
this.region = res.data.map(d => {
|
||
return {
|
||
value: d.dictDataCode,
|
||
text: d.dictDataName
|
||
}
|
||
})
|
||
})
|
||
},
|
||
onRefreshList() {
|
||
const app = this
|
||
const userId = uni.getStorageSync('userId')
|
||
app.where.page = app.page
|
||
return new Promise((resolve, reject) => {
|
||
HouseInfoApi.pageHouseInfo(app.where)
|
||
.then(result => {
|
||
const list = result.data.list.map(d => {
|
||
d.files = JSON.parse(d.files) || []
|
||
return d
|
||
})
|
||
// 合并新数据
|
||
app.list.push.apply(app.list,list);
|
||
if (result.data.count > app.list.length) {
|
||
app.canReset = true
|
||
} else {
|
||
app.canReset = false
|
||
}
|
||
resolve(list)
|
||
})
|
||
})
|
||
},
|
||
onClick(e){
|
||
const index = e.index
|
||
this.where = {}
|
||
if(index == 0){
|
||
this.where.recommend = 1
|
||
this.where.status = 0
|
||
}
|
||
if(index == 1){
|
||
this.where.mustSee = 1
|
||
this.where.status = 0
|
||
}
|
||
this.onSearch()
|
||
},
|
||
onNoticeBar(index){
|
||
// console.log('this.hotKeywords[index]: ',this.hotKeywords[index]);
|
||
this.where.keywords = this.hotKeywords[index]
|
||
this.onSearch()
|
||
},
|
||
onSearch() {
|
||
this.list = [];
|
||
this.$refs.waterfall.clear();
|
||
this.list1 = [];
|
||
this.list2 = [];
|
||
this.page = 1
|
||
this.onRefreshList()
|
||
// this.$push('/sub_pages/member/member', this.where)
|
||
},
|
||
},
|
||
watch: {
|
||
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
.search-fix {
|
||
width: 600rpx;
|
||
margin: auto;
|
||
background-color: #ffffff;
|
||
display: flex;
|
||
border-radius: 100rpx;
|
||
box-shadow: 0 3rpx 10rpx 0px #cccccc;
|
||
|
||
.search {
|
||
width: 580rpx;
|
||
margin: 15rpx auto;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.region {
|
||
width: 170rpx;
|
||
color: #666666;
|
||
font-size: 28rpx;
|
||
}
|
||
.input{
|
||
width: 330rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.fixed {
|
||
position: fixed;
|
||
top: 300rpx;
|
||
left: 75rpx;
|
||
}
|
||
|
||
.no-fixed {
|
||
position: absolute;
|
||
top: 0rpx;
|
||
left: 75rpx;
|
||
}
|
||
|
||
.tabs {
|
||
margin-top: 80rpx;
|
||
}
|
||
|
||
.house-list {
|
||
// width: 700rpx;
|
||
// margin: 20rpx auto;
|
||
// display: flex;
|
||
// flex-wrap: wrap;
|
||
// justify-content: space-between;
|
||
|
||
.item {
|
||
margin-bottom: 40rpx;
|
||
border-radius: 20rpx;
|
||
// box-shadow: 0 3rpx 10rpx 0px #cccccc;
|
||
background-color: #ffffff;
|
||
width: 338rpx;
|
||
|
||
image {
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
height: 420rpx;
|
||
width: 338rpx;
|
||
}
|
||
|
||
.info {
|
||
padding: 20rpx 20rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.title {
|
||
font-size: 30rpx;
|
||
text-overflow: -o-ellipsis-lastline;
|
||
overflow: hidden; //溢出内容隐藏
|
||
text-overflow: ellipsis; //文本溢出部分用省略号表示
|
||
display: -webkit-box; //特别显示模式
|
||
-webkit-line-clamp: 2; //行数
|
||
line-clamp: 2;
|
||
-webkit-box-orient: vertical; //盒子中内容竖直排列
|
||
}
|
||
|
||
.desc {
|
||
color: #999999;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.price {
|
||
color: #ff0000;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.select-width{
|
||
width: 200rpx;
|
||
}
|
||
</style> |