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.
215 lines
7.0 KiB
215 lines
7.0 KiB
1 year ago
|
<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">
|
||
|
|
{{ tag }}
|
||
|
|
</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">
|
||
|
|
<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">
|
||
|
|
<u-icon name="checkmark" size="40" color="#FF9545" custom-style="margin-right:20rpx;"></u-icon>
|
||
|
|
<u-text size="28" color="#020B18" text="电梯"></u-text>
|
||
|
|
</view>
|
||
|
|
<view class="check-item row col-6">
|
||
|
|
<u-icon name="checkmark" size="40" color="#AFB5BE" custom-style="margin-right:20rpx;"></u-icon>
|
||
|
|
<u-text size="28" color="#020B18" text="电梯"></u-text>
|
||
|
|
</view>
|
||
|
|
<view class="check-item row col-6">
|
||
|
|
<u-icon name="checkmark" size="40" color="#FF9545" custom-style="margin-right:20rpx;"></u-icon>
|
||
|
|
<u-text size="28" color="#020B18" text="电梯"></u-text>
|
||
|
|
</view>
|
||
|
|
<view class="check-item row col-6">
|
||
|
|
<u-icon name="checkmark" size="40" color="#AFB5BE" custom-style="margin-right:20rpx;"></u-icon>
|
||
|
|
<u-text size="28" color="#020B18" 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="check-item row col-6">
|
||
|
|
<u-icon name="checkmark" size="40" color="#FF9545" custom-style="margin-right:20rpx;"></u-icon>
|
||
|
|
<u-text size="28" color="#020B18" text="电梯"></u-text>
|
||
|
|
</view>
|
||
|
|
<view class="check-item row col-6">
|
||
|
|
<u-icon name="checkmark" size="40" color="#AFB5BE" custom-style="margin-right:20rpx;"></u-icon>
|
||
|
|
<u-text size="28" color="#020B18" text="电梯"></u-text>
|
||
|
|
</view>
|
||
|
|
<view class="check-item row col-6">
|
||
|
|
<u-icon name="checkmark" size="40" color="#FF9545" custom-style="margin-right:20rpx;"></u-icon>
|
||
|
|
<u-text size="28" color="#020B18" text="电梯"></u-text>
|
||
|
|
</view>
|
||
|
|
<view class="check-item row col-6">
|
||
|
|
<u-icon name="checkmark" size="40" color="#AFB5BE" custom-style="margin-right:20rpx;"></u-icon>
|
||
|
|
<u-text size="28" color="#020B18" 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="电话联系"></u-text>
|
||
|
|
</view>
|
||
|
|
<view class="button exchange">
|
||
|
|
<u-text size="32" color="#020B18" text="暖新币兑换"></u-text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import api from "@/utils/functions.js";
|
||
|
|
import {roomDetail} from "@/api/shop";
|
||
|
|
|
||
|
|
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:'',
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(option) {
|
||
|
|
this.getDetail(option.id)
|
||
|
|
},
|
||
|
|
onReady(){
|
||
|
|
this.size.height = api.navHeight().navigationBar + api.navHeight().systemBar
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getDetail(id){
|
||
|
|
roomDetail({
|
||
|
|
house_id:id
|
||
|
|
}).then(res => {
|
||
|
|
console.log(res.data)
|
||
|
|
this.detail = res.data;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onPageScroll(res) {
|
||
|
|
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
@import './components/index.scss';
|
||
|
|
</style>
|