359 lines
7.3 KiB
Vue
359 lines
7.3 KiB
Vue
|
<template>
|
|||
|
|
<view class="hzIndex">
|
|||
|
|
<hzHeader title="选房列表"></hzHeader>
|
|||
|
|
<!-- <view class="banner-box">
|
|||
|
|
<image src="/static/imgs/housebanner.jpg" mode=""></image>
|
|||
|
|
</view> -->
|
|||
|
|
<view class="hzContent">
|
|||
|
|
<view class="main">
|
|||
|
|
<view class="tab-box">
|
|||
|
|
<view class="tab-item" style="width: 100%;" >可选房列表</view>
|
|||
|
|
</view>
|
|||
|
|
<view v-if="msgList.length > 0">
|
|||
|
|
<view class="list-view">
|
|||
|
|
<view v-for="(item, index) in msgList" :key="index"
|
|||
|
|
class="list-cell list-item box box-row-reverse"
|
|||
|
|
@tap="detail(item)"
|
|||
|
|
>
|
|||
|
|
<view class="box" >
|
|||
|
|
<image v-if="item.PICTURE[0]" style="width: 180upx;height: 180upx;" :src="formatImgUrl(item.PICTURE[0])" mode=""></image>
|
|||
|
|
<image v-else style="width: 180upx;height: 180upx;" src="/static/imgs/housebanner.jpg" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="box box-column" style="padding-left: 20upx;">
|
|||
|
|
<view class="cell-title-box" >
|
|||
|
|
<view class="cell-title" >{{ item.HOUSE_NAME }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="sub-title">
|
|||
|
|
<text class="tag" style="color: royalblue;">{{formatHouseModel(item.MODEL)+"·"+item.ACREAGE+'㎡'}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="sub-title">
|
|||
|
|
<text class="tag" style="color: red;">{{item.RENT+"元/月"}}</text>
|
|||
|
|
<!-- <text class="tag" style="color: royalblue;">{{item.RENT_TYPE}}</text> -->
|
|||
|
|
</view>
|
|||
|
|
<view class="sub-title">
|
|||
|
|
<text class="tag" >{{item.HOUSE_ADDR}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<content-none v-else :padTop="35"></content-none>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {getFreeHouse,getHouseType,getDeptByParentId} from '@/common/api.js';
|
|||
|
|
import {callbackRequest,formatDate,getStorage,callbackRequestNoLoading,formatImgUrl} from '@/common/util.js';
|
|||
|
|
import loadMore from '@/components/loadMore.vue';
|
|||
|
|
import contentNone from '@/components/contentNone.vue';
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
formatDate: formatDate,
|
|||
|
|
formatImgUrl:formatImgUrl,
|
|||
|
|
loading:false,
|
|||
|
|
page:1,
|
|||
|
|
pageSize:10,
|
|||
|
|
loadingType:0,//0-loading前；1-loading中；2-没有更多了
|
|||
|
|
contentText: {
|
|||
|
|
contentdown: "上拉加载更多",
|
|||
|
|
contentrefresh: "正在加载...",
|
|||
|
|
contentnomore: "没有更多数据了"
|
|||
|
|
},
|
|||
|
|
msgList:[],
|
|||
|
|
infoType:"0",
|
|||
|
|
houseModel:[],
|
|||
|
|
applyId:''
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
components:{
|
|||
|
|
loadMore,
|
|||
|
|
contentNone
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
this.applyId = option.id;
|
|||
|
|
this.houseType = option.houseType||"0";
|
|||
|
|
this.getDeptByParentId(0,new Array());
|
|||
|
|
this.getHouseType('houseModel');
|
|||
|
|
this.getFreeHouse();
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
getDeptByParentId(parentId,arr){
|
|||
|
|
let params = {
|
|||
|
|
method: getDeptByParentId,
|
|||
|
|
data: {
|
|||
|
|
parentId: parentId
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
callbackRequest(params).then(res => {});
|
|||
|
|
},
|
|||
|
|
getFreeHouse(){
|
|||
|
|
let data = {
|
|||
|
|
method: getFreeHouse,
|
|||
|
|
data: {
|
|||
|
|
pageSize:this.pageSize,
|
|||
|
|
pageNum:this.page,
|
|||
|
|
houseType:this.houseType,
|
|||
|
|
userId:getStorage('userInfo').userId
|
|||
|
|
//cate:this.tabbar[this.currentTab].data_code
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
callbackRequest(data).then(res => {
|
|||
|
|
res = res.data;
|
|||
|
|
if (res.returnCode == 1) {
|
|||
|
|
if (this.page == 1) {
|
|||
|
|
this.msgList = res.returnData ;
|
|||
|
|
} else {
|
|||
|
|
if (res.returnData.length > 0) {
|
|||
|
|
this.msgList = this.msgList.concat(res.returnData);
|
|||
|
|
this.loadingType = 0;
|
|||
|
|
} else {
|
|||
|
|
this.loadingType = 2;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
alertTip(res.returnMsg);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
formatHouseModel(houseModel){
|
|||
|
|
for(let i=0;i<this.houseModel.length;i++){
|
|||
|
|
let obj = this.houseModel[i];
|
|||
|
|
if(obj.id == houseModel){
|
|||
|
|
return obj.name;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getHouseType(dataType){
|
|||
|
|
let params = {
|
|||
|
|
method: getHouseType,
|
|||
|
|
data: {
|
|||
|
|
dataType:dataType
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
callbackRequestNoLoading(params).then(res => {
|
|||
|
|
res = res.data;
|
|||
|
|
if (res.returnCode == 1) {
|
|||
|
|
if(dataType == 'houseModel'){
|
|||
|
|
this.houseModel = res.returnData || [];
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
detail(item) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/house/house-select-detail?houseInfo='+JSON.stringify(item)+'&houseModel='+JSON.stringify(this.houseModel)+"&applyId="+this.applyId
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
onReachBottom() {
|
|||
|
|
console.log(1111)
|
|||
|
|
if(this.loadingType !== 0){
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
this.loadingType = 1;
|
|||
|
|
this.page = this.page + 1;
|
|||
|
|
this.getFreeHouse();
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
@import '@/static/css/common.scss';
|
|||
|
|
.box {
|
|||
|
|
display: flex;
|
|||
|
|
display: -webkit-flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box-row-reverse {
|
|||
|
|
flex-direction: row;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*上下排列*/
|
|||
|
|
.box-column {
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*上下排列*/
|
|||
|
|
.box-left {
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*居右*/
|
|||
|
|
.box-right {
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*居左*/
|
|||
|
|
.box-center {
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*居中*/
|
|||
|
|
.box-between {
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*两端对齐*/
|
|||
|
|
.box-align-center {
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box-wrap {
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
.main {
|
|||
|
|
margin: 180upx 40upx 0;
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
.tab-box {
|
|||
|
|
overflow: hidden;
|
|||
|
|
border-radius: 10upx 10upx 0 0;
|
|||
|
|
background: rgba(132, 149, 167, 0.8);
|
|||
|
|
height: 80upx;
|
|||
|
|
.tab-item {
|
|||
|
|
float: left;
|
|||
|
|
height: 70upx;
|
|||
|
|
width: 50%;
|
|||
|
|
font-size: 32upx;
|
|||
|
|
color: #e5f6ff;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 80upx;
|
|||
|
|
}
|
|||
|
|
.active {
|
|||
|
|
background: #fff;
|
|||
|
|
color: #333;
|
|||
|
|
border-radius: 10upx 10upx 0 0;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.list-view {
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* .list-cell {
|
|||
|
|
padding: 30upx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
} */
|
|||
|
|
.list-cell {
|
|||
|
|
padding: 20upx 20upx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background: #f8f8f8;
|
|||
|
|
margin-bottom: 10upx;
|
|||
|
|
}
|
|||
|
|
/* .cell-title-box {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
} */
|
|||
|
|
.cell-title-box {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.min {
|
|||
|
|
min-height: 90upx;
|
|||
|
|
}
|
|||
|
|
/* .cell-title {
|
|||
|
|
font-size: 36upx;
|
|||
|
|
line-height: 56upx;
|
|||
|
|
word-break: break-all;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
-webkit-line-clamp: 2;
|
|||
|
|
} */
|
|||
|
|
.cell-title {
|
|||
|
|
font-size: 28upx;
|
|||
|
|
/* line-height: 56upx; */
|
|||
|
|
word-break: break-all;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
display: -webkit-box;
|
|||
|
|
-webkit-box-orient: vertical;
|
|||
|
|
-webkit-line-clamp: 3;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
.img-container {
|
|||
|
|
width: 100%;
|
|||
|
|
padding-top: 24upx;
|
|||
|
|
display: flex;
|
|||
|
|
height: 160upx;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cell-img {
|
|||
|
|
width: 32%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* .img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 160upx;
|
|||
|
|
display: block;
|
|||
|
|
border-radius: 4upx;
|
|||
|
|
} */
|
|||
|
|
|
|||
|
|
.img{
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
top: 6upx;
|
|||
|
|
width: 146upx;
|
|||
|
|
height: 146upx;
|
|||
|
|
border-radius: 4upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sub-title {
|
|||
|
|
padding-top: 12upx;
|
|||
|
|
font-size: 30upx;
|
|||
|
|
color: gray;
|
|||
|
|
}
|
|||
|
|
.badge {
|
|||
|
|
padding: 5upx 10upx;
|
|||
|
|
font-size: 24upx;
|
|||
|
|
border-radius: 4upx;
|
|||
|
|
margin-right: 20upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.b-red {
|
|||
|
|
background: #FCEBEF;
|
|||
|
|
color: #8A5966;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.b-blue {
|
|||
|
|
background: #ECF6FD;
|
|||
|
|
color: #4DABEB;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.b-orange {
|
|||
|
|
background: #FEF5EB;
|
|||
|
|
color: #FAA851
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.b-green {
|
|||
|
|
background: #E8F6E8;
|
|||
|
|
color: #44CF85
|
|||
|
|
}
|
|||
|
|
.tag {
|
|||
|
|
padding: 5upx 0upx;
|
|||
|
|
font-size: 24upx;
|
|||
|
|
border-radius: 4upx;
|
|||
|
|
margin-right: 20upx;
|
|||
|
|
}
|
|||
|
|
</style>
|