|
|
@@ -0,0 +1,412 @@
|
|
|
+<template>
|
|
|
+ <view class="house-detail">
|
|
|
+ <swiper class="swiper" circular :indicator-dots="true">
|
|
|
+ <swiper-item v-for="item in responsibility" :key="item.id">
|
|
|
+ <image class="image" :src="item.url" mode="aspectFill">
|
|
|
+ </image>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ <view class="house-title">
|
|
|
+ <view class="house-name">{{detail.name}}</view>
|
|
|
+ <view class="tag">
|
|
|
+ <text style="margin-right: 6rpx;">{{detail.area}}m²</text>
|
|
|
+ <text v-for="(tag,index) in detail.tagList" :key="index"> | {{tag.name}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="pirce">
|
|
|
+ <text class="number">{{detail.price}}</text>
|
|
|
+ <text class="label">/月</text>
|
|
|
+ </view>
|
|
|
+ <view class="project-label">距离您2km</view>
|
|
|
+ <uni-icons class="wx-icon" type="weixin" size="38" color="#43b156"></uni-icons>
|
|
|
+ </view>
|
|
|
+ <view class="house-label house-article">{{detail.comment}}</view>
|
|
|
+ <view class="house-content">
|
|
|
+ <view class="content-title">基本信息</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.findTypeName('houseType',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.findTypeName('payWay',detail.payWay)}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="information-box" style="margin-bottom: 0;">
|
|
|
+ <text class="information-title">产权证书：</text>
|
|
|
+ <text class="information-text">{{detail.propertyCertificateNumber}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="information-box" style="margin-bottom: 0;">
|
|
|
+ <text class="information-title">是否装修：</text>
|
|
|
+ <text class="information-text">{{detail.decoration === 1 ? '已装修':'未装修'}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content-title">房源简介</view>
|
|
|
+ <view class="desc-text" v-html="detail.introduce"></view>
|
|
|
+ <view class="people-tell">
|
|
|
+ <image class="people-avatar" :src="detail.chargePersonPortrait" mode="aspectFill">
|
|
|
+ </image>
|
|
|
+ <view class="people-text">
|
|
|
+ <view class="people-name">{{detail.chargePersonName}}</view>
|
|
|
+ <view class="people-organization">
|
|
|
+ 组织名称
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="people-icon" @click="tell">
|
|
|
+ <uni-icons type="phone-filled" color="#fff"></uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content-title">地理位置</view>
|
|
|
+ <view class="content-map">
|
|
|
+ <map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
|
|
|
+ </view>
|
|
|
+ <view class="content-title">配套设施</view>
|
|
|
+ <view class="content-device">
|
|
|
+ <view class="device-item"
|
|
|
+ v-for="item in $field.findTypeNameByList('supportingFacilities',detail.supportingFacilities)"
|
|
|
+ :key="item.id">
|
|
|
+ <uni-icons class="device-icon" custom-prefix="iconfont" :type="item.icon" size="18"></uni-icons>
|
|
|
+ <text class="device-label">{{item.name}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content-title">
|
|
|
+ <text>访客记录</text>
|
|
|
+ <text class="more">查看更多>></text>
|
|
|
+ </view>
|
|
|
+ <view class="visitor">
|
|
|
+ <view class="visitor-item">
|
|
|
+ <image class="visitor-avatar"
|
|
|
+ src="https://assets.api.uizard.io/api/cdn/stream/d841c8c9-37cc-4fa1-9720-cff12a84352b.png"
|
|
|
+ mode="aspectFill">
|
|
|
+ </image>
|
|
|
+ <text class="visitor-label">林夕三访问了您的房源</text>
|
|
|
+ <text class="visitor-time">2024-01-01</text>
|
|
|
+ </view>
|
|
|
+ <view class="visitor-item">
|
|
|
+ <image class="visitor-avatar"
|
|
|
+ src="https://assets.api.uizard.io/api/cdn/stream/d841c8c9-37cc-4fa1-9720-cff12a84352b.png"
|
|
|
+ mode="aspectFill">
|
|
|
+ </image>
|
|
|
+ <text class="visitor-label">林夕三访问了您的房源</text>
|
|
|
+ <text class="visitor-time">2024-01-01</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getHouseDetailById
|
|
|
+ } from '@/request/api/house.js'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ detail: {},
|
|
|
+ houseId: 15,
|
|
|
+ responsibility: [],
|
|
|
+ coordinates: [],
|
|
|
+ latitude: 39.90923,
|
|
|
+ longitude: 116.397428,
|
|
|
+ mapContext: {},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(body) {
|
|
|
+ if (body.houseId) this.houseId = body.houseId;
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ this.mapContext = uni.createMapContext("map", this);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ getHouseDetailById(this.houseId).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.detail = res.data;
|
|
|
+ if (this.detail.picture) this.responsibility = JSON.parse(this.detail.picture);
|
|
|
+ if (this.detail.coordinates) {
|
|
|
+ this.coordinates = this.detail.coordinates.split(',');
|
|
|
+ this.latitude = this.coordinates[1];
|
|
|
+ this.longitude = this.coordinates[0];
|
|
|
+ this.addMarkers();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ tell() {
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: '17601274604' //仅为示例
|
|
|
+ });
|
|
|
+ },
|
|
|
+ addMarkers() {
|
|
|
+ const positions = [{
|
|
|
+ latitude: this.coordinates[1],
|
|
|
+ longitude: this.coordinates[0],
|
|
|
+ }]
|
|
|
+ const markers = []
|
|
|
+ positions.forEach((p, i) => {
|
|
|
+ markers.push(
|
|
|
+ Object.assign({}, {
|
|
|
+ id: i + 1,
|
|
|
+ width: 50,
|
|
|
+ height: 50,
|
|
|
+ joinCluster: true, // 指定了该参数才会参与聚合
|
|
|
+ }, p)
|
|
|
+ )
|
|
|
+ })
|
|
|
+ this.mapContext.addMarkers({
|
|
|
+ markers,
|
|
|
+ clear: false,
|
|
|
+ complete(res) {}
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .house-detail {
|
|
|
+ background: #fff;
|
|
|
+ padding-bottom: 60rpx;
|
|
|
+
|
|
|
+ .swiper {
|
|
|
+ height: 400rpx;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .house-label {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: $uni-secondary-color;
|
|
|
+ font-weight: 300;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .house-article {
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .house-title {
|
|
|
+ padding: 40rpx 130rpx 30rpx 30rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .house-name {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .project-label {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: $uni-secondary-color;
|
|
|
+ font-weight: 300;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 50rpx;
|
|
|
+ right: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tag {
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-weight: 300;
|
|
|
+ color: $uni-secondary-color;
|
|
|
+ padding: 12rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pirce {
|
|
|
+ color: $uni-primary;
|
|
|
+
|
|
|
+ .number {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 48rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .wx-icon {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 30rpx;
|
|
|
+ transform: translateY(50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-map {
|
|
|
+ width: 100%;
|
|
|
+ height: 360rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .map {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .house-content {
|
|
|
+ padding: 0 30rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .content-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ margin: 30rpx 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .more {
|
|
|
+ color: $uni-secondary-color;
|
|
|
+ font-weight: 300;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .people-tell {
|
|
|
+ margin: 40rpx 0;
|
|
|
+ height: 140rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 30rpx;
|
|
|
+
|
|
|
+ .people-avatar {
|
|
|
+ width: 90rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .people-text {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .people-name {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .people-organization {
|
|
|
+ font-weight: 300;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: $uni-secondary-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ .people-icon {
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: $uni-primary;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .visitor {
|
|
|
+ .visitor-item {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 300;
|
|
|
+
|
|
|
+ .visitor-avatar {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 80rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .visitor-label {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin: 0 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .desc-text {
|
|
|
+ font-weight: 300;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .information-box {
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information-title {
|
|
|
+ color: $uni-secondary-color;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .information-text {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ font-weight: 300;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-device {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ .device-item {
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+
|
|
|
+ .device-label {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ color: $uni-secondary-color;
|
|
|
+ font-weight: 200;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .device-icon {
|
|
|
+ color: $uni-base-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
