123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647 |
- <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-footer">
- <view class="sf-left">
- <view v-if="ateObj.val" class="op t2" @click="callHandle(ateObj)">联系驻场:{{ateObj.key}} <view class="tell">tel:{{ateObj.phone}}</view></view>
- <view v-else class="op t2" @click="callHandle(footerObj.govern)">联系驻场:{{footerObj.govern.nickname}} <view class="tell">tel:{{footerObj.govern.phone}}</view></view>
- <view class="op" @click="callHandle(footerObj.custos)">联系销售:{{footerObj.custos.nickname}}<view class="tell">tel:{{footerObj.custos.phone}}</view></view>
- </view>
- <view class="sf-btn" @click="toAgentHandle">立即报备</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: {},
- footerObj: {},
- ateObj: {},
- };
- },
- 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 || {}
- this.footerObj = res.manage_users || {}
- })
- uni.api.estate.apiestatecontentdetail({id: this.curId}).then(res => {
- this.curHtml = res.content || ''
- })
- const userInfo2 = uni.getStorageSync('MD_userInfo2')
- this.userInfo = userInfo2 || {}
- const dictObj = uni.getStorageSync('MD_dict')
- let ateArr = dictObj.admin_tell_estate || []
- ateArr.forEach(ate => {
- if (ate.val === this.curId) {
- this.ateObj = {...ate, phone: ate.option1}
- }
- })
- this.authStateObj = arrToObj(dictObj.auth_state)
- this.ptObj = arrToObj(dictObj.product_type)
- this.htObj = arrToObj(dictObj.house_type)
- },
- created () {
-
- },
- // 必须要在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 () {
- const that = this
- uni.navigateTo({
- url: '/pages/agent/recommend/create',
- success: function(res) {
- res.eventChannel.emit('data', {
- info: {
- estate_name: that.allObj.estate_name,
- estate_id: that.allObj.estate_id,
- }
- });
- }
- })
- },
- 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;
- }
- }
- .scoped-footer {
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 120rpx;
- display: flex;
- background: #fff;
- .sf-left {
- flex: 1;
- padding-top: 12rpx;
- padding-left: 20rpx;
- border-top: 1PX solid #dcdcdc;
- .op {
- color: #fff;
- background: #19be6b;
- border-radius: 10rpx;
- width: 250rpx;
- padding: 10rpx 0;
- display: inline-block;
- text-align: center;
- font-size: 28rpx;
- &.t2 {
- background: #f90;
- margin-right: 20rpx;
- }
- .tell {
- font-size: 24rpx;
- color: #f2f2f2;
- }
- }
- }
- .sf-btn {
- width: 190rpx;
- height: 120rpx;
- line-height: 120rpx;
- text-align: center;
- background: #2979ff;
- color: #fff;
- font-size: 36rpx;
- }
- }
- </style>
|