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.
244 lines
7.5 KiB
244 lines
7.5 KiB
<template> |
|
<view class="body-background"></view> |
|
<u-navbar |
|
:title="title" |
|
:auto-back="true" |
|
left-icon-size="40rpx" |
|
:safe-area-inset-top="true" |
|
:placeholder="true" |
|
bgColor="#fff" |
|
></u-navbar> |
|
<u-swiper |
|
:list="detail.images" |
|
height="720" |
|
></u-swiper> |
|
<view class="detail-container"> |
|
<view class="detail-item price row "> |
|
<view class="price-container row pad-26"> |
|
<u-text mode="price" size="48" color="#FF9545" custom-style="margin-right:5rpx;" :text="detail.price"></u-text> |
|
<u-text size="28" color="#FF9545" text="元/月"></u-text> |
|
</view> |
|
<view class="street pad-26"> |
|
<u-text size="28" color="#178AF2" :text="detail.street"></u-text> |
|
</view> |
|
<view class="item-desc row pad-26"> |
|
<view class="item"> |
|
<view class="title"> |
|
<u-text align="center" size="36" color="#020B18" :text="detail.bedroom_number+'室'"></u-text> |
|
</view> |
|
<view class="desc"> |
|
<u-text align="center" size="28" color="#AFB5BE" text="整租"></u-text> |
|
</view> |
|
</view> |
|
<view class="item"> |
|
<view class="title"> |
|
<u-text align="center" size="36" color="#020B18" :text="detail.area+'㎡'"></u-text> |
|
</view> |
|
<view class="desc"> |
|
<u-text align="center" size="28" color="#AFB5BE" text="使用面积"></u-text> |
|
</view> |
|
</view> |
|
<view class="item"> |
|
<view class="title"> |
|
<u-text align="center" size="36" color="#020B18" :text="'朝'+detail.toward"></u-text> |
|
</view> |
|
<view class="desc"> |
|
<u-text align="center" size="28" color="#AFB5BE" text="朝向"></u-text> |
|
</view> |
|
</view> |
|
<view class="item"> |
|
<view class="title"> |
|
<u-text align="center" size="36" color="#020B18" :text="detail.year+'年'"></u-text> |
|
</view> |
|
<view class="desc"> |
|
<u-text align="center" size="28" color="#AFB5BE" text="建设时间"></u-text> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="tags row pad-26"> |
|
<view class="tag">{{detail.payment_cycle}}</view> |
|
<view class="tag">{{detail.payment_type}}</view> |
|
<view class="tag" v-for="tag in detail.rental_overview" v-show="tag.is_have"> |
|
{{ tag.text }} |
|
</view> |
|
</view> |
|
<view class="hr"></view> |
|
<view class="address row pad-26"> |
|
<u-text size="32" color="#020B18" :text="detail.address"></u-text> |
|
<view class="address-btn" @click="callLocation"> |
|
<u-icon name="map" size="45" color="#ffffff"></u-icon> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="detail-item info"> |
|
<view class="cell-two-container row"> |
|
<view class="cell-border"></view> |
|
<view class="cell-title"> |
|
租住概况 |
|
</view> |
|
</view> |
|
<view class="body"> |
|
<view class="item row"> |
|
<view class="check-item row col-6" v-for="item in detail.rental_overview"> |
|
<u-icon name="checkmark" size="40" :color="item.is_have?'#FF9545':'#AFB5BE'" custom-style="margin-right:20rpx;"></u-icon> |
|
<u-text size="28" color="#020B18" :text="item.text"></u-text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="detail-item detail"> |
|
<view class="cell-two-container row"> |
|
<view class="cell-border"></view> |
|
<view class="cell-title"> |
|
房屋详情 |
|
</view> |
|
</view> |
|
<view class="body"> |
|
<view class="item row"> |
|
<view class="sub-title col-12">家具情况</view> |
|
|
|
<view class="check-item row col-6" v-for="item in detail.furniture"> |
|
<u-icon name="checkmark" size="40" :color="item.is_have?'#FF9545':'#AFB5BE'" custom-style="margin-right:20rpx;"></u-icon> |
|
<u-text size="28" color="#020B18" :text="item.text"></u-text> |
|
</view> |
|
<view class="sub-title col-12">家电情况</view> |
|
<view class="check-item row col-6" v-for="item in detail.jiadian"> |
|
<u-icon name="checkmark" size="40" :color="item.is_have?'#FF9545':'#AFB5BE'" custom-style="margin-right:20rpx;"></u-icon> |
|
<u-text size="28" color="#020B18" :text="item.text"></u-text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="foot-button border-box row"> |
|
<view class="collect"> |
|
<!-- <u-icon name="heart-fill" size="48" color="#FF9545"></u-icon>--> |
|
<!-- <u-text size="28" color="#FF9545" text="收藏" align="center"></u-text>--> |
|
<!-- <u-icon name="heart-fill" size="48" color="#AFB5BE"></u-icon>--> |
|
</view> |
|
<view class="button-group"> |
|
<view class="button phone "> |
|
<u-icon name="phone-fill" size="32" color="#000" custom-style="margin-right:10rpx;"></u-icon> |
|
<u-text size="32" color="#020B18" text="电话联系" @click="callPhone"></u-text> |
|
</view> |
|
<view class="button exchange"> |
|
<u-text size="32" color="#020B18" text="暖新币兑换" @click="navTo('/pages/Order/detail?type=create&id='+detail.id+'&rent='+detail.price,true)"></u-text> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import api from "@/utils/functions.js"; |
|
import {roomDetail} from "@/api/shop"; |
|
import {systemConfig} from "@/api/other"; |
|
|
|
export default { |
|
computed: { |
|
|
|
}, |
|
components: { |
|
|
|
}, |
|
data() { |
|
return { |
|
title: '公寓详情', |
|
size:{ |
|
height:0 |
|
}, |
|
detail:{ |
|
id:'', |
|
images:'', |
|
price:'', |
|
street:'', |
|
bedroom_number:'', |
|
area:'', |
|
toward:'', |
|
year:'', |
|
payment_cycle :'', |
|
payment_type:'', |
|
address:'', |
|
coordinate:'', |
|
rental_overview:'', |
|
jiadian:'', |
|
furniture:'', |
|
tel:'', |
|
}, |
|
all:{ |
|
rental_overview:[], |
|
furniture:[], |
|
jiadian:[], |
|
} |
|
} |
|
}, |
|
onLoad(option) { |
|
this.getDetail(option.id) |
|
}, |
|
onReady(){ |
|
this.size.height = api.navHeight().navigationBar + api.navHeight().systemBar |
|
}, |
|
methods: { |
|
navTo(url,token = false) { |
|
if(token){ |
|
if(uni.getStorageSync('token')){ |
|
wx.navigateTo({ |
|
url: url |
|
}) |
|
}else{ |
|
wx.navigateTo({ |
|
url: '/pages/Login/index' |
|
}) |
|
} |
|
}else{ |
|
wx.navigateTo({ |
|
url: url |
|
}) |
|
} |
|
}, |
|
getDetail(id){ |
|
roomDetail({ |
|
house_id:id |
|
}).then(res => { |
|
res.data.coordinate = res.data.coordinate.split(',') |
|
this.detail = res.data; |
|
}); |
|
}, |
|
getInfo(){ |
|
systemConfig({type:'rental_overview'}).then(res => { |
|
this.all.rental_overview = res.data; |
|
}); |
|
systemConfig({type:'furniture'}).then(res => { |
|
this.all.furniture = res.data; |
|
}); |
|
systemConfig({type:'jiadian'}).then(res => { |
|
this.all.jiadian = res.data; |
|
}); |
|
}, |
|
callPhone(){ |
|
uni.makePhoneCall({ |
|
phoneNumber: this.detail.tel?.toString() |
|
}); |
|
}, |
|
callLocation(){ |
|
uni.openLocation({ |
|
latitude:parseFloat(this.detail.coordinate[0]), |
|
longitude:parseFloat(this.detail.coordinate[1]), |
|
name:this.detail.address, |
|
}) |
|
}, |
|
}, |
|
onPageScroll(res) { |
|
|
|
}, |
|
created() { |
|
|
|
}, |
|
mounted() { |
|
this.getInfo(); |
|
}, |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
@import './components/index.scss'; |
|
</style> |