487 lines
9.6 KiB
Vue
487 lines
9.6 KiB
Vue
<template>
|
|
<view class="hzIndex">
|
|
<hzHeader title="选房信息"></hzHeader>
|
|
<view class="hzContent">
|
|
<view v-show="showFlag" class="index-container" style="background-color: white;padding-bottom: 10upx;margin: 20upx;border-radius: 20upx;">
|
|
<view class="banner">
|
|
<swiper v-if="houseInfo.PICTURE&&houseInfo.PICTURE.length>0" class="swiper-banner" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="1500">
|
|
<swiper-item v-for="(item, index) in houseInfo.PICTURE" :key="index">
|
|
<view class="swiper-item" >
|
|
<image @click="vbPicture(vbPicData)" :src="formatImgUrl(item)"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view v-else style="height: 500upx;line-height: 500upx;text-align: center;font-size: 60upx;border-bottom: 1px solid #e5e5e5;color: #606060;">
|
|
暂无图片
|
|
</view>
|
|
</view>
|
|
<view style="clear: both;"></view>
|
|
<view class="box">
|
|
<text style="color: red; font-size:42upx;padding: 40upx 0 0 40upx;">{{houseInfo.RENT+"元/月 "}}</text>
|
|
</view>
|
|
<view class="box">
|
|
<text style=" font-size:32upx;padding: 20upx 40upx 0 40upx;">{{houseInfo.HOUSE_NAME}}</text>
|
|
</view>
|
|
<view class="box">
|
|
<text style=" font-size:32upx;padding: 20upx 40upx 0 40upx;">{{houseInfo.HOUSE_ADDR}}</text>
|
|
</view>
|
|
<view class="box">
|
|
<text style=" font-size:32upx;padding: 20upx 0 0 40upx;">{{houseInfo.BUILDING_YEAR+"年建 " +formatHouseModel(houseInfo.MODEL)+" "+houseInfo.ACREAGE+"㎡"}}</text>
|
|
</view>
|
|
<view style="margin: 20upx 40upx;border-bottom: 1px solid #e5e5e5;"></view>
|
|
<view class="box box-row-reverse box-wrap" style="padding: 20upx 40upx 0 40upx;">
|
|
<view v-for="(item, index) in DEVICE_NAME" :key="index" style="color:#606060;padding: 14upx 24upx;background-color: #F6F6F6;border-radius: 10upx;font-size: 28upx;margin-right: 20upx;margin-bottom: 20upx;">
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view class="occupied" style="height: 180upx;"></view>
|
|
<view style="position: fixed;bottom:0upx;width: 100%;z-index: 9999;border-top: 1px solid #e5e5e5;height: 150upx;">
|
|
<view>
|
|
<view class="footer-btn footer-btn-two batchBtn" >
|
|
<view style="background-color:#FEB952;margin-left: 30%;" class="btn btn-col1 btn1" @click="callPhone(houseInfo.RESPONSIBLE_PHONE)">负责人电话</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import listCell from '@/components/mix-list-cell';
|
|
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|
import clipboard from '@/js_sdk/dc-clipboard/clipboard.js';
|
|
import uniIcons from '@/components/uni-icons/uni-icons.vue';
|
|
import { getSelectedHouse,getHouseType,getDeptByParentId } from '@/common/api.js';
|
|
import { formatImgUrl,vbPicture,callPhone,getStorage,callbackRequest,alertTip,callbackRequestNoLoading } from '@/common/util.js';
|
|
export default {
|
|
components: {
|
|
uniIcons,
|
|
listCell,
|
|
uniPopup
|
|
},
|
|
data() {
|
|
return {
|
|
formatImgUrl:formatImgUrl,
|
|
vbPicture:vbPicture,
|
|
callPhone:callPhone,
|
|
houseInfo:{
|
|
},
|
|
DEVICE_NAME:[],
|
|
vbPicData:[],
|
|
houseModel:[],
|
|
applyId:'',
|
|
submitResult:false,
|
|
houseDevice:[],
|
|
showFlag:false
|
|
};
|
|
},
|
|
onLoad(option) {
|
|
this.getDeptByParentId(0,new Array());
|
|
this.applyId = option.applyId;
|
|
this.getHouseType("houseModel");
|
|
this.getHouseType("houseDevice");
|
|
},
|
|
methods: {
|
|
getDeptByParentId(parentId,arr){
|
|
let params = {
|
|
method: getDeptByParentId,
|
|
data: {
|
|
parentId: parentId
|
|
}
|
|
};
|
|
callbackRequest(params).then(res => {});
|
|
},
|
|
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 if(dataType == 'houseDevice'){
|
|
this.houseDevice = res.returnData || [];
|
|
this.getSelectedHouse();
|
|
}
|
|
} else {
|
|
|
|
}
|
|
});
|
|
},
|
|
getSelectedHouse(){
|
|
let params = {
|
|
method: getSelectedHouse,
|
|
data: {
|
|
userId:getStorage('userInfo').userId,
|
|
APPLY_ID:this.applyId
|
|
}
|
|
};
|
|
callbackRequest(params).then(res => {
|
|
res = res.data;
|
|
console.log(res);
|
|
if (res.returnCode == 1) {
|
|
this.houseInfo = res.returnData[0];
|
|
let device = this.houseInfo.DEVICE;
|
|
var DEVICE_NAME = [];
|
|
if(device!=null&&device!=''){
|
|
let devices = device.split(",");
|
|
for(let i=0;i<devices.length;i++){
|
|
for(let j=0;j<this.houseDevice.length;j++){
|
|
if(devices[i] == this.houseDevice[j].id){
|
|
DEVICE_NAME.push(this.houseDevice[j].name);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// this.$set(this.DEVICE_NAME, DEVICE_NAME);
|
|
this.DEVICE_NAME = DEVICE_NAME;
|
|
this.showFlag = true;
|
|
} else {
|
|
alertTip(res.returnMsg);
|
|
}
|
|
});
|
|
},
|
|
submit(){
|
|
uni.navigateTo({
|
|
url: '/pages/house/house-selected-contract?houseInfo='+JSON.stringify(this.houseInfo)+'&houseModel='+JSON.stringify(this.houseModel)+"&applyId="+this.applyId
|
|
});
|
|
},
|
|
formatHouseModel(houseModel){
|
|
for(let i=0;i<this.houseModel.length;i++){
|
|
let obj = this.houseModel[i];
|
|
if(obj.id == houseModel){
|
|
return obj.name;
|
|
}
|
|
}
|
|
},
|
|
alertTip() {
|
|
alertTip('敬请期待');
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
@import '@/static/css/common.scss';
|
|
.batchBtn{
|
|
position: absolute;height: 140upx;padding-top: 30upx;
|
|
.btn1{
|
|
width:40%;margin-left:7%;margin-right: 6%;border-radius: 10upx;
|
|
}
|
|
.btn2{
|
|
width:40%;border-radius: 10upx;
|
|
}
|
|
.btn3{
|
|
width: 28%;margin-left: 4%;border-radius: 10upx;
|
|
}
|
|
.btn4{
|
|
width: 28%;margin-left: 4%;border-radius: 10upx;
|
|
}
|
|
.btn5{
|
|
width: 28%;margin-left: 4%;border-radius: 10upx;
|
|
background: #348CF2;
|
|
}
|
|
}
|
|
.tip-num {
|
|
color: #fff;
|
|
position: absolute;
|
|
right: 48upx;
|
|
top: -8upx;
|
|
font-size: 24upx;
|
|
background: red;
|
|
border-radius: 50%;
|
|
width: 36upx;
|
|
height: 36upx;
|
|
text-align: center;
|
|
line-height: 36upx;
|
|
}
|
|
.index-container {
|
|
overflow: hidden;
|
|
|
|
.banner {
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 500upx;
|
|
border-radius: 10rpx;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.swiper-banner {
|
|
height: 500upx;
|
|
|
|
.swiper-item {
|
|
line-height: 50upx;
|
|
@include overstepOne;
|
|
|
|
text {
|
|
display: block;
|
|
vertical-align: top;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.backlog {
|
|
background: #f3f4fa;
|
|
padding: 20rpx 30rpx;
|
|
|
|
.icon {
|
|
float: left;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
vertical-align: top;
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.fr-text {
|
|
margin-left: 70rpx;
|
|
|
|
.swiper-box {
|
|
height: 50upx;
|
|
|
|
.swiper-item {
|
|
line-height: 50upx;
|
|
@include overstepOne;
|
|
|
|
text {
|
|
display: block;
|
|
vertical-align: top;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.category-view {
|
|
border-bottom: 1px solid #e3e3e5;
|
|
padding-bottom: 8rpx;
|
|
|
|
.category-name {
|
|
padding: 36rpx 0 40rpx 20upx;
|
|
font-size: 30upx;
|
|
/* margin-bottom: 40upx; */
|
|
font-weight: bold;
|
|
line-height: 36rpx;
|
|
|
|
image {
|
|
margin-right: 14upx;
|
|
width: 36upx;
|
|
height: 36upx;
|
|
vertical-align: top;
|
|
}
|
|
}
|
|
}
|
|
|
|
.category-view:last-child {
|
|
border-bottom: 0px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.button-fun {
|
|
margin-bottom: 36upx;
|
|
position: relative;
|
|
|
|
image {
|
|
width: 60upx;
|
|
height: 60upx;
|
|
margin-bottom: 4upx;
|
|
}
|
|
|
|
text {
|
|
font-size: 24upx;
|
|
color: #666;
|
|
}
|
|
|
|
.tip-num {
|
|
color: #fff;
|
|
position: absolute;
|
|
right: 48upx;
|
|
top: -8upx;
|
|
font-size: 24upx;
|
|
background: red;
|
|
border-radius: 50%;
|
|
width: 36upx;
|
|
height: 36upx;
|
|
text-align: center;
|
|
line-height: 36upx;
|
|
}
|
|
}
|
|
|
|
.wth25 {
|
|
width: 24%;
|
|
}
|
|
|
|
%flex-center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
%section {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-content: center;
|
|
background: #fff;
|
|
border-radius: 10upx;
|
|
}
|
|
|
|
.server {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
color: #929292;
|
|
margin-top: 20upx;
|
|
}
|
|
|
|
.server .line {
|
|
border-bottom: 1px solid #333333;
|
|
width: 66.6667upx;
|
|
}
|
|
|
|
.server .s-text {
|
|
font-size: 25upx;
|
|
margin-left: 15upx;
|
|
margin-right: 15upx;
|
|
}
|
|
|
|
.user-section {
|
|
height: 373upx;
|
|
padding: 20upx 20upx 0 20upx;
|
|
}
|
|
|
|
.img-icon {
|
|
width: 70upx;
|
|
height: 70upx;
|
|
margin-bottom: 18upx;
|
|
}
|
|
|
|
.user-info-box {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.cover-container {
|
|
background: $page-color-base;
|
|
padding: 0 30upx;
|
|
position: relative;
|
|
background: #f5f5f5;
|
|
padding-bottom: 20upx;
|
|
}
|
|
|
|
.order-section {
|
|
@extend %section;
|
|
padding: 28upx 0;
|
|
margin-top: 20upx;
|
|
|
|
.order-item {
|
|
@extend %flex-center;
|
|
width: 120upx;
|
|
height: 120upx;
|
|
border-radius: 10upx;
|
|
font-size: $font-sm;
|
|
color: $font-color-dark;
|
|
}
|
|
|
|
.yticon {
|
|
font-size: 48upx;
|
|
margin-bottom: 18upx;
|
|
color: #fa436a;
|
|
}
|
|
}
|
|
|
|
.history-section {
|
|
padding: 10upx 0 0;
|
|
margin-top: 20upx;
|
|
background: #fff;
|
|
border-radius: 10upx;
|
|
|
|
.sec-header {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: $font-base;
|
|
color: $font-color-dark;
|
|
line-height: 40upx;
|
|
margin-left: 30upx;
|
|
|
|
.yticon {
|
|
font-size: 44upx;
|
|
color: #5eba8f;
|
|
margin-right: 16upx;
|
|
line-height: 40upx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.img-b {
|
|
width: 100%;
|
|
height: 330upx;
|
|
}
|
|
.tip-area {
|
|
opacity: 0.8;
|
|
filter: alpha(opacity=20);
|
|
position: absolute;
|
|
background: #ffffff;
|
|
width: 60upx;
|
|
height: 60upx;
|
|
text-align: center;
|
|
line-height: 36upx;
|
|
}
|
|
</style>
|