350 lines
8.0 KiB
Vue
350 lines
8.0 KiB
Vue
<template>
|
|
<view class="page">
|
|
<!-- 搜索 -->
|
|
<view class="search-fix">
|
|
<view class="search">
|
|
<u-search placeholder="请输入搜索关键词" v-model="where.keywords" :actionStyle="actionStyle" :showAction="false"
|
|
shape="square" bgColor="#ffffff" :animation="true" @search="onSearch"></u-search>
|
|
</view>
|
|
</view>
|
|
<view class="search-tools">
|
|
<view class="region">
|
|
<uni-data-select class="select-width" v-model="where.region" :localdata="region" placeholder="区域"
|
|
@change="onSearch"></uni-data-select>
|
|
</view>
|
|
<view class="region">
|
|
<uni-data-select class="select-width" v-model="where.priceScene" :localdata="price" placeholder="价格区间"
|
|
@change="onSearch"></uni-data-select>
|
|
</view>
|
|
<view class="region">
|
|
<uni-data-select class="select-width" v-model="where.extentScene" :localdata="extent" placeholder="面积"
|
|
@change="onSearch"></uni-data-select>
|
|
</view>
|
|
<view class="region">
|
|
<uni-data-select class="select-width" v-model="where.sortScene" :localdata="sort" placeholder="排序"
|
|
@change="onSearch"></uni-data-select>
|
|
</view>
|
|
</view>
|
|
<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
|
|
@scrolltolower="lower" @scroll="onScroll">
|
|
<view class="house-list">
|
|
<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.monthlyRent }}元/月</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
<!-- <view class="item">
|
|
<image src="https://file.wsdns.cn/20230802/8bf0658596ab458d94666cbf4b1177e9.jpg" mode="widthFix">
|
|
</image>
|
|
<view class="info">
|
|
<view class="title">整租·万科云城 2室1厅1卫整租·万科云城 2室1厅1卫整租·万科云城 2室1厅1卫</view>
|
|
<view class="desc"><text>50.8m²|南</text></view>
|
|
<view class="price">6600元/月</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
</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 region = [];
|
|
const price = [];
|
|
const extent = [];
|
|
const sort = [];
|
|
const loginUserId = uni.getStorageSync('userId')
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: [],
|
|
loadMore: true,
|
|
status: '加载更多',
|
|
page: 1,
|
|
where: {},
|
|
dict: null,
|
|
cityList: [],
|
|
// 控制onShow事件是否刷新订单列表
|
|
canReset: false,
|
|
disabled: false,
|
|
swiperList: [
|
|
'https://file.wsdns.cn/20230802/f33f5ac239c843438b36f40941d946ef.png',
|
|
'https://file.wsdns.cn/20230802/1116a02b07904991b2ebdc2c3da4a691.png',
|
|
],
|
|
menu,
|
|
region,
|
|
price,
|
|
extent,
|
|
sort,
|
|
// priceScene: null,
|
|
scrollTop: 0,
|
|
old: {
|
|
scrollTop: 0
|
|
},
|
|
actionStyle: {
|
|
background: '#3f72f4',
|
|
color: '#ffffff',
|
|
padding: '12rpx 0',
|
|
borderRadius: '12rpx'
|
|
},
|
|
};
|
|
|
|
},
|
|
onLoad() {
|
|
this.getDict()
|
|
this.list = []
|
|
this.onRefreshList()
|
|
},
|
|
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: {
|
|
onRefreshList() {
|
|
const app = this
|
|
const userId = uni.getStorageSync('userId')
|
|
app.where.page = app.page
|
|
// if (app.priceScene) {
|
|
// app.where.monthlyRentStart = app.priceScene
|
|
// app.where.monthlyRentEnd = app.priceScene
|
|
// }
|
|
console.log('app: ',app.where);
|
|
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 = app.list.concat(list)
|
|
if (result.data.count > app.list.length) {
|
|
app.canReset = true
|
|
} else {
|
|
app.canReset = false
|
|
}
|
|
console.log("app.list: ", app.list);
|
|
resolve(list)
|
|
})
|
|
})
|
|
},
|
|
getDict() {
|
|
const app = this
|
|
DictApi.listDictionary().then(res => {
|
|
app.dict = res.data
|
|
|
|
app.price = res.data.price[0].map(d => {
|
|
return {
|
|
value: d,
|
|
text: d
|
|
}
|
|
})
|
|
app.extent = res.data.extent[0].map(d => {
|
|
return {
|
|
value: d,
|
|
text: d
|
|
}
|
|
})
|
|
app.sort = res.data.sort[0].map(d => {
|
|
console.log('d: ',d);
|
|
return {
|
|
value: d,
|
|
text: d
|
|
}
|
|
})
|
|
|
|
uni.request({
|
|
url: 'https://file.wsdns.cn/json/city.js',
|
|
success(res) {
|
|
res.data.map(e => {
|
|
if(e.value == '450000'){
|
|
e.children.map(city => {
|
|
if(city.value == '450100'){
|
|
app.region = city.children.map(r => {
|
|
return {
|
|
value: r.label,
|
|
text: r.label
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
});
|
|
}
|
|
})
|
|
})
|
|
},
|
|
onSearch(text) {
|
|
this.list = []
|
|
this.page = 1
|
|
console.log('extentScene: ',this.where.extentScene);
|
|
if(text == '0-100㎡'){
|
|
this.where.extentScene = '100'
|
|
}
|
|
if(text == '100-150㎡'){
|
|
this.where.extentScene = '100-150'
|
|
}
|
|
if(text == '150-200㎡'){
|
|
this.where.extentScene = '150-200'
|
|
}
|
|
if(text == '200-300㎡'){
|
|
this.where.extentScene = '200-300'
|
|
}
|
|
if(text == '300-400㎡'){
|
|
this.where.extentScene = '300-400'
|
|
}
|
|
if(text == '400-600㎡'){
|
|
this.where.extentScene = '400-600'
|
|
}
|
|
if(text == '600-1000㎡'){
|
|
this.where.extentScene = '600-1000'
|
|
}
|
|
if(text == '1000㎡以上'){
|
|
this.where.extentScene = '1000'
|
|
}
|
|
|
|
this.onRefreshList()
|
|
// this.$push('/sub_pages/member/member', this.where)
|
|
},
|
|
},
|
|
watch: {
|
|
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
.search-fix {
|
|
width: 750rpx;
|
|
margin: auto;
|
|
display: flex;
|
|
|
|
.search {
|
|
width: 710rpx;
|
|
margin: 15rpx auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.search-tools {
|
|
width: 720rpx;
|
|
margin: auto;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
font-size: 22rpx;
|
|
|
|
.region {
|
|
width: 178rpx;
|
|
background-color: #ffffff;
|
|
* {
|
|
font-size: 22rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fixed {
|
|
position: fixed;
|
|
top: 300rpx;
|
|
left: 125rpx;
|
|
}
|
|
|
|
.no-fixed {
|
|
position: absolute;
|
|
top: 0rpx;
|
|
left: 125rpx;
|
|
}
|
|
|
|
.tabs {
|
|
margin-top: 50rpx;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |