mdapp/pages/estate/dtl.vue

<template>
	<view class="l-box">
		<wm-watermark :text="userInfo.phone" :num="50"></wm-watermark>
		<View class="dtl-header" @click="previewImageHandle(curObj.pri_image, [{img_url: curObj.pri_image}])">
			<View class="dh-content">
				<View class="dh-p1">
					<Image class="i" :src="require('./img/i_house.png')" />
					<View class="t">{{curObj.estate_name}}</View>
				</View>
				<View class="dh-p2">
					<Image class="i" :src="require('./img/i_pos.png')" />
					<View class="t">{{curObj.address}}</View>
				</View>
				<View class="dh-sign">
					<!-- <View class="s" key={tagIndex}>{tag.key}</View> -->
				</View>
			</View>
			<Image class="dh-bg" :src="`${curObj.pri_image + '_white'}`" />
		</View>
		<View class="dtl-options">
			<View class="do-title">
				<View class="t">基本情况</View>
			</View>
			<View class="do-content">
				<View class="do-p">
					<View class="k">楼盘价格</View>
					<View class="v b">{{curObj.price_range}}/㎡</View>
				</View>
				<View class="do-p">
					<View class="k">带看需收集</View>
					<View class="v">{{allObj.report_visit}}</View>
				</View>
				<View class="do-p">
					<View class="k">预计奖励</View>
					<View class="v b">{{allObj.brokerage}}</View>
				</View>
				<!-- <View class="do-p">
					<View class="k">营销中心</View>
					<View class="v">{{allObj.address}}</View>
				</View>
				<View class="do-p">
					<View class="k">销售热线</View>
					<View class="v">{{allObj.marketing_phone}}</View>
				</View> -->
				<View class="do-p">
					<View class="k">报备保护期</View>
					<View class="v">{{allObj.report_lock}}天</View>
				</View>
				<View class="do-p">
					<View class="k">带看保护期</View>
					<View class="v">{{allObj.lead_lock}}天</View>
				</View>
			</View>
		</View>
		<View class="dtl-options">
			<View class="do-title">
				<View class="t">带看单&流程</View>
			</View>
			<View class="do-content">
				<View class="do-p">
					<rich-text :nodes="curHtml | filtersRichText"></rich-text>
				</View>
			</View>
		</View>
		<View class="dtl-options">
			<View class="do-title">
				<View class="t">楼盘详细信息</View>
			</View>
			<View class="do-content">
				<View class="do-p">
					<View class="k">所属区域</View>
					<View class="v">{{atObj[curObj.area_type]}}</View>
				</View>
				<View class="do-p">
					<View class="k">参考价格</View>
					<View class="v">{{curObj.price_range}}/㎡</View>
				</View>
				<View class="do-p">
					<View class="k">户型面积</View>
					<View class="v">{{curObj.built_area}}㎡</View>
				</View>
				<View class="do-p">
					<View class="k">楼栋数</View>
					<View class="v">{{curObj.seat_sum}}栋</View>
				</View>
				<View class="do-p">
					<View class="k">产权年限</View>
					<View class="v">{{curObj.ownership || '未知'}}</View>
				</View>
				<View class="do-p">
					<View class="k">初次交付</View>
					<View class="v">{{curObj.deliver_time || '未知'}}</View>
				</View>
				<View class="do-p">
					<View class="k">建设时间</View>
					<View class="v">{{curObj.build_time || '未知'}}</View>
				</View>
				<View class="do-p">
					<View class="k">竣工时间</View>
					<View class="v">{{curObj.complete_time || '未知'}}</View>
				</View>
				<View class="do-p">
					<View class="k">占地面积</View>
					<View class="v">{{curObj.acreage}}㎡</View>
				</View>
				<View class="do-p">
					<View class="k">建筑面积</View>
					<View class="v">{{curObj.built_up_area}}㎡</View>
				</View>
				<View class="do-p">
					<View class="k">开发商</View>
					<View class="v">{{curObj.developer}}</View>
				</View>
				<View class="do-p">
					<View class="k">物业公司</View>
					<View class="v">{{curObj.property_type || '未知'}}</View>
				</View>
				<View class="do-p">
					<View class="k">物业费</View>
					<View class="v">{{curObj.property_fee || '未知'}}</View>
				</View>
				<View class="do-p">
					<View class="k">总户数</View>
					<View class="v">{{curObj.household || '未知'}}</View>
				</View>
				<View class="do-p">
					<View class="k">车位数</View>
					<View class="v">{{curObj.parking || '未知'}}</View>
				</View>
				<View class="do-p">
					<View class="k">容积率</View>
					<View class="v">{{curObj.plot_ratio}}</View>
				</View>
				<View class="do-p">
					<View class="k">绿化率</View>
					<View class="v">{{curObj.green_rate || '未知'}}%</View>
				</View>
				<View class="do-p">
					<View class="k">楼盘简介</View>
					<View class="v">{{curObj.remarked || '暂无'}}</View>
				</View>
				<View class="do-p">
					<View class="k">产品户型</View>
					<View class="v">
						<View class="scoped-house-type">
							<View v-for="(one, oIndex) in curObj.area_data" :key="oIndex" class="sht-one">
								<View class="sht-one-title">{{ptObj[one.product_type_val]}}</View>
								<View class="sht-two" v-for="(two, index2) in one.house_type_list" :key="index2">
									<View class="sht-two-title">{{htObj[two.house_type_val]}}</View>
									<View class="sht-area" v-for="(three, index3) in two.area_list" :key="index3">
										<Image class="img" :src="three.img_url + '_xs'" @click="previewImageHandle(three.img_url, two.area_list)" />
										<View class="t">建面:{{three.area}}㎡</View>
									</View>
								</View>
							</View>
						</View>
					</View>
				</View>
			</View>
		</View>
		
		<View class="dtl-options">
			<View class="do-title">
				<View class="t">一页纸&更多</View>
			</View>
			<View class="do-content">
				<view class="scoped-more-box">
					<!-- <u-image src="/static/index/popup_bg_more.png" mode="heightFix" height="118rpx" class="icon"></u-image> -->
					<view class="plus" @click="oneImgHandle()">楼盘一页纸>></view>
					<view class="plus" @click="linkPlus()">查看更多该楼盘的（学区、地铁、航拍户型VR等等）信息，点击这里>></view>
				</view>
			</View>
		</View>
		
		<View class="scoped-sale">
			<View class="ss-img">
				<Image :src="saleObj.avatar || 'https://img2.honglounews.com/20220515083230-1148.jpg'" class="img"/>
			</View>
			<View class="ss-info">
				<View class="p1">{{saleObj.nickname || '巴老师'}}</View>
				<View class="p2">该楼盘咨询我</View>
			</View>
			<View class="ss-r">
				<View class="b t2" @click="callHandle(saleObj)">打电话</View>
				<View class="b" @click="toAgentHandle">立即报备</View>
			</View>
		</View>
		
		<backTop :src="backTop.src"  :scrollTop="backTop.scrollTop"></backTop>
	</view>
</template>
<script>
import backTop from '@/components/back-top/back-top.vue'
import wmWatermark from '@/components/wm-watermark/wm-watermark.vue'
import { arrToObj } from '@/utils'
export default {
	components: {
		backTop,
		wmWatermark
	},
	data() {
		return {
			allObj: {},
			curId: '',
			curObj: {},
			saleObj: {},
			atObj: {},
			ptObj: {},
			htObj: {},
			curHtml: '',
			backTop: {
				src: '../../static/back-top/top.png',
				scrollTop: 0
			},
			userInfo: {},
		};
	},
	filters: {
		filtersRichText(html) { //控制小程序中图片大小
			let newContent = html.replace(/<img[^>]*>/gi, (match, capture)=>{
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi, (match, capture)=>{
				match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
				return match;
			});
			newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			newContent = newContent.replace(/\<img/gi,
				'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
			return newContent;
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
		this.backTop.scrollTop = e.scrollTop;
	},
	onLoad(params) {
		this.curId = params.id
		uni.api.estate.apiestatedetail({
			id: this.curId
		}).then(res => {
			this.allObj = res || {}
			this.curObj = res.plus_estate || {}
			this.saleObj = res.manage_user || {}
		})
		uni.api.estate.apiestatecontentdetail({id: this.curId}).then(res => {
			this.curHtml = res.content || ''
		})
		const userInfo2 = uni.getStorageSync('MD_userInfo2')
		this.userInfo = userInfo2 || {}
	},
	created () {
		const dictObj = uni.getStorageSync('MD_dict')
		this.atObj = arrToObj(dictObj.area_type)
		this.ptObj = arrToObj(dictObj.product_type)
		this.htObj = arrToObj(dictObj.house_type)
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
	},
	computed: {
	},
	methods: {
		linkPlus () {
			uni.navigateToMiniProgram({
			  appId: 'wx91a710fad8c5eb22',
			  path: `pagesHouse/indexDtl?id=${this.curObj.id}&fromViews=search`,
			  // extraData: {
			  //   'data1': 'test'
			  // },
			  success(res) {
			    // 打开成功
			  }
			})
		},
		oneImgHandle () {
			uni.api.estate.apiestateinfodetail({id: this.curId}).then(res => {
				const curImgUrl = res.info_img || ''
				if (!curImgUrl) {
					uni.$msg('该楼盘暂未设置一页纸楼盘简介~')
					return
				}
				uni.previewImage({
					current: curImgUrl,
					urls: [curImgUrl],
				})
			})
		},
		callHandle (saleObj) {			
			uni.makePhoneCall({
				phoneNumber: saleObj.phone || '18100792072'
			})
		},
		toAgentHandle () {
			uni.navigateTo({
				url: '/pages/agent/recommend/create'
			})
		},
		previewImageHandle (cur, arr) {
			const current = `${cur}_plus`
			const urls = arr.map(item => {
				return `${item.img_url}_plus`
			})
			uni.previewImage({
				current,
				urls
			})
		}
	}
};
</script>
<style lang="scss" scoped>
.l-box {
	padding-bottom: 140rpx;
}
.dtl-header {
  position: relative;
  overflow: hidden;
  .dh-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    width: 100%;
    height: 500rpx;
  }
  .dh-content {
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		margin: 10rpx;
    background-color: #fff;
    margin-top: 400rpx;
    z-index: 2;
    .i {
      display: inline-block;
      vertical-align: middle;
      width: 30rpx;
      height: 30rpx;
      margin-right: 10rpx;
    }
    .t {
      display: inline-block;
      vertical-align: middle;
    }
  }
  .dh-p1 {
    color: #333;
    font-size: 30rpx;
    padding-bottom: 10rpx;
  }
  .dh-p2 {
    color: #666;
    font-size: 26rpx;
    padding-bottom: 20rpx;
  }
  .dh-sign {
    .s {
      display: inline-block;
      vertical-align: middle;
      color: #fff;
      background: #0259e7;
      font-size: 24rpx;
      border-radius: 10rpx;
      padding: 6rpx 10rpx;
      margin-right: 10rpx;
      margin-bottom: 10rpx;
      &:last-child {
        margin-right: 0;
      }
      &.t-shop {
        background: #FFC82C;
      }
      &.t-park {
        background: #13CE66;
      }
    }
  }
}
.dtl-options {
  background: #fff;
  margin-bottom: 20rpx;
  position: relative;
  &:last-child {
    margin-bottom: 0;
  }
  .do-title {
    padding: 20rpx 20rpx 10rpx;
    position: relative;
    .t {
      display: inline-block;
      vertical-align: top;
      font-size: 30rpx;
      height: 30rpx;
      line-height: 30rpx;
      overflow: hidden;
      border-left: 4PX solid #0259e7;
      padding-left: 10rpx;
      font-weight: bold;
    }
    .s {
      display: inline-block;
      vertical-align: top;
      color: #999;
      font-size: 28rpx;
      text-decoration: underline;
      padding-left: 20rpx;
    }
    .r {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
      font-size: 28rpx;
      color: #999;
    }
  }
  .do-content {
    padding: 0 20rpx 0;
  }
  .do-p {
    display: flex;
    padding: 10rpx;
    // &:nth-child(2n) {
    //   background: #f2f2f2;
    // }
    .k {
      width: 26%;
      color: #9b9b9b;
    }
    .v {
      width: 74%;
      text-align: left;
      color: #313131;
			&.b {
				color: #f00;
				font-weight: bold;
				font-size: 30rpx;
			}
    }
    .v-item {
      .n {
        display: inline-block;
        color: #0259e7;
      }
    }
  }
}

.scoped-house-type {
  .sht-one {
    margin-bottom: 20rpx;
  }
  .sht-one-title {
    font-weight: bold;
  }
  .sht-two {
    padding: 10rpx 10rpx 0 20rpx;
    margin-top: 10rpx;
    background: #f9f9f9;
  }
  .sht-area {
    padding-left: 10rpx;
    padding-top: 10rpx;
  }
  .sht-one-title {
    font-weight: bold;
    color: #666;
  }
  .sht-two-title {
    font-weight: bold;
    color: #666;
    font-size: 24rpx;
  }
  .sht-area {
    display: inline-block;
    vertical-align: middle;
    .img {
      width: 100rpx;
      height: 100rpx;
    }
    .t {
      margin-top: -10rpx;
      text-align: center;
      color: #999;
      font-size: 22rpx;
    }
  }
}



.scoped-sale {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 140rpx;
  background: #fff;
  display: flex;
  box-sizing: border-box;
  padding: 20rpx;
  z-index: 99;
  border: 1PX solid #f2f2f2;
  .ss-img {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20rpx;
    .img {
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
      overflow: hidden;
    }
  }
  .ss-info {
    flex: 1;
    .p1 {
      color: #313131;
      font-weight: bold;
      font-size: 30rpx;
      padding-bottom: 6rpx;
      padding-left: 10rpx;
    }
    .p2 {
      display: inline-block;
      padding: 6rpx 10rpx;
      color: #8b94b1;
      background: #eceff5;
      font-size: 24rpx;
      border-radius: 10rpx;
    }
  }
  .ss-r {
    width: 350rpx;
    display: flex;
    padding-top: 10rpx;
    justify-content: space-between;
    .b {
      // width: 170rpx;
			width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      background: #3bc48b;
      color: #fff;
      border-radius: 10rpx;
      &.t2 {
				margin-right: 12rpx;
        background: #3072f6;
      }
    }
  }
}

.scoped-more-box {
	width: 100%;
	.plus {
		color: #0259e7;
		font-size: 34rpx;
		text-decoration: underline;
		font-weight: bold;
		padding: 30rpx 0;
	}
}

</style>