|
@@ -1,94 +1,106 @@
|
|
|
<template>
|
|
|
- <view class="content">
|
|
|
- <view class="position-details">
|
|
|
- <!-- 滚动广告图 -->
|
|
|
- <view class="banner">
|
|
|
- <swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000"
|
|
|
- indicator-color="#fff" indicator-active-color="#74e0fa" class="banner-swiper"
|
|
|
- @change="swiperchange">
|
|
|
- <swiper-item>
|
|
|
- <view class="swiper-item"
|
|
|
- @click="previewImage('https://file-node.oss-cn-shanghai.aliyuncs.com/youji/3556e2b4f9c844758c3af76407b3a5d5')">
|
|
|
- <image
|
|
|
- src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/3556e2b4f9c844758c3af76407b3a5d5"
|
|
|
- mode="aspectFill" class="banner-swiper-img">
|
|
|
- </image>
|
|
|
- </view>
|
|
|
- </swiper-item>
|
|
|
- <swiper-item>
|
|
|
- <view class="swiper-item"
|
|
|
- @click="previewImage('https://file-node.oss-cn-shanghai.aliyuncs.com/youji/3556e2b4f9c844758c3af76407b3a5d5')">
|
|
|
- <image
|
|
|
- src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/3556e2b4f9c844758c3af76407b3a5d5"
|
|
|
- mode="aspectFill" class="banner-swiper-img">
|
|
|
- </image>
|
|
|
- </view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- <view class="indicator-dots">
|
|
|
- <text>{{current + 1}}/4</text>
|
|
|
- </view>
|
|
|
+ <view class="house-detail">
|
|
|
+ <view class="banner">
|
|
|
+ <swiper class="banner-swiper" @change="swiperchange">
|
|
|
+ <swiper-item v-for="(item,index) in detail.banner" :key="index">
|
|
|
+ <view class="swiper-item" @click="previewImage(item.url)">
|
|
|
+ <image :src="item.url" mode="aspectFill" class="banner-swiper-img">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <view class="indicator-dots">
|
|
|
+ <text>{{current + 1}}/{{detail.banner.length}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="house-info">
|
|
|
+ <view class="title">{{detail.name}}</view>
|
|
|
+ <view class="price">
|
|
|
+ <view class="price-text">¥</view>
|
|
|
+ <text class="price-number">{{detail.price}}</text>
|
|
|
+ <view class="price-text">元/{{detail.payType === 0 ? '月' : '年'}}</view>
|
|
|
</view>
|
|
|
- <view class="info">
|
|
|
- <view class="title">name【village_name】</view>
|
|
|
- <view class="price">
|
|
|
- <view class="price-text">¥</view>
|
|
|
- <text>120</text>
|
|
|
- <view class="price-text">元/月</view>
|
|
|
+ <view class="information">
|
|
|
+ <view class="head-tilte">房源标签</view>
|
|
|
+ <view class="tag">
|
|
|
+ <uni-tag v-for="(tag,i) in detail.tagList" :key="i" :text="tag.name" size="mini"
|
|
|
+ class="house-tag" />
|
|
|
</view>
|
|
|
- <!-- 房源信息 -->
|
|
|
- <view class="information">
|
|
|
- <view class="head-tilte">房源信息</view>
|
|
|
- <view class="information-list">
|
|
|
- <view class="information-box">
|
|
|
- <text class="information-title">房型:</text>
|
|
|
- <text class="information-text">housing</text>
|
|
|
- </view>
|
|
|
- <view class="information-box">
|
|
|
- <text class="information-title">押付:</text>
|
|
|
- <text class="information-text">oshitsuke</text>
|
|
|
- </view>
|
|
|
- <view class="information-box">
|
|
|
- <text class="information-title">楼层:</text>
|
|
|
- <text class="information-text">floor楼</text>
|
|
|
- </view>
|
|
|
- <view class="information-box">
|
|
|
- <text class="information-title">朝向:</text>
|
|
|
- <text class="information-text">orientation_name</text>
|
|
|
- </view>
|
|
|
- <view class="information-box">
|
|
|
- <text class="information-title">建面:</text>
|
|
|
- <text class="information-text">aream²</text>
|
|
|
- </view>
|
|
|
- <view class="information-box">
|
|
|
- <text class="information-title">电梯:</text>
|
|
|
- <text class="information-text">elevator</text>
|
|
|
- </view>
|
|
|
+ <view class="head-tilte">房源信息</view>
|
|
|
+ <view class="information-list">
|
|
|
+ <view class="information-box">
|
|
|
+ <text class="information-title">所属楼宇:</text>
|
|
|
+ <text class="information-text">{{detail.projectItemName}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="information-box">
|
|
|
+ <text class="information-title">所属楼层:</text>
|
|
|
+ <text class="information-text">{{detail.projectItemTargetName}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="information-box">
|
|
|
+ <text class="information-title">房源类型:</text>
|
|
|
+ <text class="information-text">{{$field.findHouseTypeName(detail.roomTypeId)}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="information-box">
|
|
|
+ <text class="information-title">房间号码:</text>
|
|
|
+ <text class="information-text">{{detail.roomNumber}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="information-box">
|
|
|
+ <text class="information-title">房源面积:</text>
|
|
|
+ <text class="information-text">{{detail.area}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="information-box">
|
|
|
+ <text class="information-title">付款方式:</text>
|
|
|
+ <text class="information-text">{{$field.findPayWayName(detail.payWay)}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="information-box">
|
|
|
+ <text class="information-title">产权证书:</text>
|
|
|
+ <text class="information-text">{{detail.propertyCertificateNumber}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="information-box">
|
|
|
+ <text class="information-title">是否装修:</text>
|
|
|
+ <text class="information-text">{{detail.decoration === 1 ? '已装修':'未装修'}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- 房屋介绍 -->
|
|
|
<view class="desc">
|
|
|
<view class="head-tilte">房屋介绍</view>
|
|
|
- <view class="desc-text"><text>goods_desc</text></view>
|
|
|
+ <view class="desc-text" v-html="detail.introduce"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- 底部按钮 -->
|
|
|
- <view class="btn">
|
|
|
- <view class="share color01"><text>签约</text></view>
|
|
|
- <view class="share color02"><text>咨询</text></view>
|
|
|
- <view class="share"><text>留言</text></view>
|
|
|
- </view>
|
|
|
</view>
|
|
|
+ <view class="btn-box">
|
|
|
+ <view class="share color01">签约</view>
|
|
|
+ <view class="share color02">咨询</view>
|
|
|
+ <view class="share">留言</view>
|
|
|
+ </view>
|
|
|
+ <preview-video :show="videoShow" :videoUrl="videoUrl" @close="videoShow = false"></preview-video>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import previewVideo from '../../components/previewVideo/previewVideo'
|
|
|
+ import {
|
|
|
+ getHouseDetailById
|
|
|
+ } from '@/request/api/house'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ videoShow: false,
|
|
|
+ videoUrl: 'https://file-node.oss-cn-shanghai.aliyuncs.com/youji/071c2be54d154f57ae34c31242282788',
|
|
|
current: 0,
|
|
|
+ detail: {
|
|
|
+ banner: [],
|
|
|
+ tagList: []
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
+ onLoad(body) {
|
|
|
+ getHouseDetailById(body.id).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.detail = res.data;
|
|
|
+ if (this.detail.picture) this.detail['banner'] = JSON.parse(this.detail.picture);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
methods: {
|
|
|
swiperchange(e) {
|
|
|
this.current = e.detail.current
|
|
@@ -105,266 +117,197 @@
|
|
|
phoneNumber: '10086' //仅为示例
|
|
|
});
|
|
|
},
|
|
|
- // 去首页
|
|
|
- gohome() {
|
|
|
- uni.reLaunch({
|
|
|
- url: '/pages/index/index'
|
|
|
- })
|
|
|
- },
|
|
|
// 预览图片
|
|
|
previewImage(url) {
|
|
|
uni.previewImage({
|
|
|
- urls: url,
|
|
|
- showmenu: false
|
|
|
+ urls: [url]
|
|
|
})
|
|
|
},
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ previewVideo
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .content {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ .house-detail {
|
|
|
background: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .position-details {
|
|
|
- width: 100%;
|
|
|
- padding-bottom: 140upx;
|
|
|
- }
|
|
|
-
|
|
|
- .banner {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .banner-swiper {
|
|
|
- height: 650upx;
|
|
|
- }
|
|
|
-
|
|
|
- .banner-swiper-img {
|
|
|
- height: 650upx !important;
|
|
|
- }
|
|
|
-
|
|
|
- .swiper-item image {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .indicator-dots {
|
|
|
- position: absolute;
|
|
|
- bottom: 30upx;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .indicator-dots text {
|
|
|
- font-size: 24upx;
|
|
|
- color: #FFFFFF;
|
|
|
- background: rgba(0, 0, 0, 0.5);
|
|
|
- border-radius: 50upx;
|
|
|
- width: 64upx;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/ .uni-swiper-dot {
|
|
|
- width: 40upx;
|
|
|
- height: 4upx;
|
|
|
- border-radius: 20upx;
|
|
|
- }
|
|
|
-
|
|
|
- wx-swiper .wx-swiper-dot {
|
|
|
- width: 40upx;
|
|
|
- height: 4upx;
|
|
|
- border-radius: 20upx;
|
|
|
- }
|
|
|
-
|
|
|
- .info {
|
|
|
- position: relative;
|
|
|
- padding: 30upx;
|
|
|
- border-top-left-radius: 20upx;
|
|
|
- border-top-right-radius: 20upx;
|
|
|
- background: #FFFFFF;
|
|
|
- margin-top: -20upx;
|
|
|
- }
|
|
|
-
|
|
|
- .info .title {
|
|
|
- font-size: 38upx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .price {
|
|
|
- padding-top: 20upx;
|
|
|
- color: red;
|
|
|
- }
|
|
|
-
|
|
|
- .price text {
|
|
|
- font-size: 40upx;
|
|
|
- }
|
|
|
-
|
|
|
- .price .price-text {
|
|
|
- display: inline-block;
|
|
|
- font-size: 26upx;
|
|
|
- scale: 0.8;
|
|
|
- }
|
|
|
-
|
|
|
- .information {
|
|
|
- padding-top: 30upx;
|
|
|
- }
|
|
|
-
|
|
|
- .head-tilte {
|
|
|
- font-size: 30upx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .information-list {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- padding: 20upx 30upx 0;
|
|
|
- }
|
|
|
-
|
|
|
- .information-box {
|
|
|
- width: 50%;
|
|
|
- display: flex;
|
|
|
- padding: 20upx 0;
|
|
|
- }
|
|
|
-
|
|
|
- .information-title {
|
|
|
- font-size: 26upx;
|
|
|
- color: #b4b4b4;
|
|
|
- }
|
|
|
+ padding-bottom: 140rpx;
|
|
|
|
|
|
- .information-text {
|
|
|
- font-size: 26upx;
|
|
|
- color: #2d2d2d;
|
|
|
- }
|
|
|
-
|
|
|
- .arrangement {
|
|
|
- padding-top: 30upx;
|
|
|
- }
|
|
|
+ .banner {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
|
|
|
- .arrangement-list {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- padding: 20upx 0;
|
|
|
- }
|
|
|
+ .banner-swiper {
|
|
|
+ height: 600rpx;
|
|
|
+ }
|
|
|
|
|
|
- .arrangement-box {
|
|
|
- width: 20%;
|
|
|
- padding-top: 20upx;
|
|
|
- text-align: center
|
|
|
- }
|
|
|
+ .banner-swiper-img {
|
|
|
+ height: 600rpx !important;
|
|
|
+ }
|
|
|
|
|
|
- .arrangement-icon {
|
|
|
- color: red;
|
|
|
- font-size: 64upx;
|
|
|
- }
|
|
|
+ .swiper-item image {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
|
|
|
- .arrangement-text {
|
|
|
- padding-top: 6upx;
|
|
|
- font-size: 24upx;
|
|
|
- }
|
|
|
+ .indicator-dots {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
|
|
|
- .desc {
|
|
|
- padding-top: 20upx;
|
|
|
- }
|
|
|
+ .indicator-dots text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: $uni-white;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 50rpx;
|
|
|
+ width: 64rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
|
|
|
- .desc-text {
|
|
|
- padding: 30upx 30upx 20upx 30upx;
|
|
|
- }
|
|
|
+ /deep/ .uni-swiper-dot {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 4rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .desc-text text {
|
|
|
- line-height: 44upx;
|
|
|
- font-size: 28upx;
|
|
|
- }
|
|
|
+ .house-info {
|
|
|
+ position: relative;
|
|
|
+ padding: 30rpx;
|
|
|
+ border-top-left-radius: 30rpx;
|
|
|
+ border-top-right-radius: 30rpx;
|
|
|
+ background: $uni-white;
|
|
|
+ margin-top: -30rpx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 38rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
|
|
|
- .map {
|
|
|
- padding: 30upx 0 0 0;
|
|
|
- }
|
|
|
+ .price {
|
|
|
+ padding-top: 20rpx;
|
|
|
+ color: $uni-error;
|
|
|
|
|
|
- .btn {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- padding: 20upx 1%;
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
+ .price-number {
|
|
|
+ font-size: 44rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
|
|
|
- .share {
|
|
|
- flex: 1;
|
|
|
- text-align: center;
|
|
|
- background: #4a55fd;
|
|
|
- border-radius: 8upx;
|
|
|
- height: 90upx;
|
|
|
- text-align: center;
|
|
|
- margin: 0 1%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
+ .price-text {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 26rpx;
|
|
|
+ scale: 0.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .share text {
|
|
|
- font-size: 26upx;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+ .information {
|
|
|
+ padding-top: 30rpx;
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+
|
|
|
+ .house-tag {
|
|
|
+ background-color: #d4d1d7;
|
|
|
+ border-color: #d4d1d7;
|
|
|
+ padding: 0 10px;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+
|
|
|
+ /* #ifdef MP-WEIXIN */
|
|
|
+ text {
|
|
|
+ background: transparent;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* #endif */
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .share button {
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- color: #fff;
|
|
|
- font-size: 26upx;
|
|
|
- border-radius: 8upx;
|
|
|
- height: 90upx;
|
|
|
- background: #4a55fd;
|
|
|
- line-height: 90upx;
|
|
|
- }
|
|
|
+ .head-tilte {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
|
|
|
- .color01 {
|
|
|
- background: linear-gradient(to right, #fea733, #feb34d, #fdc46b);
|
|
|
- }
|
|
|
+ .information-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 20rpx 20rpx 0;
|
|
|
+
|
|
|
+ .information-box {
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information-title {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: $uni-extra-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information-text {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: $uni-base-color;
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .color02 {
|
|
|
- background: linear-gradient(to right, #ff4761, #fe606e, #fc706f);
|
|
|
- }
|
|
|
+ .desc {
|
|
|
+ padding-top: 20rpx;
|
|
|
|
|
|
- .bnt-box {
|
|
|
- position: fixed;
|
|
|
- right: 20upx;
|
|
|
- bottom: 12%;
|
|
|
+ .desc-text {
|
|
|
+ padding: 20rpx;
|
|
|
+ color: $uni-base-color;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- button {
|
|
|
+ .btn-box {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- padding: 0;
|
|
|
- margin: 14upx 0;
|
|
|
- width: 76upx;
|
|
|
- height: 76upx;
|
|
|
- border-radius: 50%;
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
- box-shadow: 0px 2px 4px #e9e9e9;
|
|
|
+ padding: 20rpx 1%;
|
|
|
+ background: #fff;
|
|
|
+ box-shadow: $uni-shadow-sm;
|
|
|
+
|
|
|
+ .share {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ background: #4a55fd;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 1%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
|
|
|
- text {
|
|
|
- color: #666666;
|
|
|
+ .color01 {
|
|
|
+ background: linear-gradient(to right, #fea733, #feb34d, #fdc46b);
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .kefunv {
|
|
|
- color: #666666;
|
|
|
- font-size: 40upx;
|
|
|
+ .color02 {
|
|
|
+ background: linear-gradient(to right, #ff4761, #fe606e, #fc706f);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .recommend-list {
|
|
|
- padding: 0 10upx;
|
|
|
- }
|
|
|
</style>
|