dtl.vue 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647
  1. <template>
  2. <view class="l-box">
  3. <wm-watermark :text="userInfo.phone" :num="50"></wm-watermark>
  4. <View class="dtl-header" @click="previewImageHandle(curObj.pri_image, [{img_url: curObj.pri_image}])">
  5. <View class="dh-content">
  6. <View class="dh-p1">
  7. <Image class="i" :src="require('./img/i_house.png')" />
  8. <View class="t">{{curObj.estate_name}}</View>
  9. </View>
  10. <View class="dh-p2">
  11. <Image class="i" :src="require('./img/i_pos.png')" />
  12. <View class="t">{{curObj.address}}</View>
  13. </View>
  14. <View class="dh-sign">
  15. <!-- <View class="s" key={tagIndex}>{tag.key}</View> -->
  16. </View>
  17. </View>
  18. <Image class="dh-bg" :src="`${curObj.pri_image + '_white'}`" />
  19. </View>
  20. <View class="dtl-options">
  21. <View class="do-title">
  22. <View class="t">基本情况</View>
  23. </View>
  24. <View class="do-content">
  25. <View class="do-p">
  26. <View class="k">楼盘价格</View>
  27. <View class="v b">{{curObj.price_range}}/㎡</View>
  28. </View>
  29. <View class="do-p">
  30. <View class="k">带看需收集</View>
  31. <View class="v">{{allObj.report_visit}}</View>
  32. </View>
  33. <View class="do-p">
  34. <View class="k">预计奖励</View>
  35. <View class="v b">{{allObj.brokerage}}</View>
  36. </View>
  37. <!-- <View class="do-p">
  38. <View class="k">营销中心</View>
  39. <View class="v">{{allObj.address}}</View>
  40. </View>
  41. <View class="do-p">
  42. <View class="k">销售热线</View>
  43. <View class="v">{{allObj.marketing_phone}}</View>
  44. </View> -->
  45. <View class="do-p">
  46. <View class="k">报备保护期</View>
  47. <View class="v">{{allObj.report_lock}}天</View>
  48. </View>
  49. <View class="do-p">
  50. <View class="k">带看保护期</View>
  51. <View class="v">{{allObj.lead_lock}}天</View>
  52. </View>
  53. </View>
  54. </View>
  55. <View class="dtl-options">
  56. <View class="do-title">
  57. <View class="t">带看单&流程</View>
  58. </View>
  59. <View class="do-content">
  60. <View class="do-p">
  61. <rich-text :nodes="curHtml | filtersRichText"></rich-text>
  62. </View>
  63. </View>
  64. </View>
  65. <View class="dtl-options">
  66. <View class="do-title">
  67. <View class="t">楼盘详细信息</View>
  68. </View>
  69. <View class="do-content">
  70. <View class="do-p">
  71. <View class="k">所属区域</View>
  72. <View class="v">{{atObj[curObj.area_type]}}</View>
  73. </View>
  74. <View class="do-p">
  75. <View class="k">参考价格</View>
  76. <View class="v">{{curObj.price_range}}/㎡</View>
  77. </View>
  78. <View class="do-p">
  79. <View class="k">户型面积</View>
  80. <View class="v">{{curObj.built_area}}㎡</View>
  81. </View>
  82. <View class="do-p">
  83. <View class="k">楼栋数</View>
  84. <View class="v">{{curObj.seat_sum}}栋</View>
  85. </View>
  86. <View class="do-p">
  87. <View class="k">产权年限</View>
  88. <View class="v">{{curObj.ownership || '未知'}}</View>
  89. </View>
  90. <View class="do-p">
  91. <View class="k">初次交付</View>
  92. <View class="v">{{curObj.deliver_time || '未知'}}</View>
  93. </View>
  94. <View class="do-p">
  95. <View class="k">建设时间</View>
  96. <View class="v">{{curObj.build_time || '未知'}}</View>
  97. </View>
  98. <View class="do-p">
  99. <View class="k">竣工时间</View>
  100. <View class="v">{{curObj.complete_time || '未知'}}</View>
  101. </View>
  102. <View class="do-p">
  103. <View class="k">占地面积</View>
  104. <View class="v">{{curObj.acreage}}㎡</View>
  105. </View>
  106. <View class="do-p">
  107. <View class="k">建筑面积</View>
  108. <View class="v">{{curObj.built_up_area}}㎡</View>
  109. </View>
  110. <View class="do-p">
  111. <View class="k">开发商</View>
  112. <View class="v">{{curObj.developer}}</View>
  113. </View>
  114. <View class="do-p">
  115. <View class="k">物业公司</View>
  116. <View class="v">{{curObj.property_type || '未知'}}</View>
  117. </View>
  118. <View class="do-p">
  119. <View class="k">物业费</View>
  120. <View class="v">{{curObj.property_fee || '未知'}}</View>
  121. </View>
  122. <View class="do-p">
  123. <View class="k">总户数</View>
  124. <View class="v">{{curObj.household || '未知'}}</View>
  125. </View>
  126. <View class="do-p">
  127. <View class="k">车位数</View>
  128. <View class="v">{{curObj.parking || '未知'}}</View>
  129. </View>
  130. <View class="do-p">
  131. <View class="k">容积率</View>
  132. <View class="v">{{curObj.plot_ratio}}</View>
  133. </View>
  134. <View class="do-p">
  135. <View class="k">绿化率</View>
  136. <View class="v">{{curObj.green_rate || '未知'}}%</View>
  137. </View>
  138. <View class="do-p">
  139. <View class="k">楼盘简介</View>
  140. <View class="v">{{curObj.remarked || '暂无'}}</View>
  141. </View>
  142. <View class="do-p">
  143. <View class="k">产品户型</View>
  144. <View class="v">
  145. <View class="scoped-house-type">
  146. <View v-for="(one, oIndex) in curObj.area_data" :key="oIndex" class="sht-one">
  147. <View class="sht-one-title">{{ptObj[one.product_type_val]}}</View>
  148. <View class="sht-two" v-for="(two, index2) in one.house_type_list" :key="index2">
  149. <View class="sht-two-title">{{htObj[two.house_type_val]}}</View>
  150. <View class="sht-area" v-for="(three, index3) in two.area_list" :key="index3">
  151. <Image class="img" :src="three.img_url + '_xs'" @click="previewImageHandle(three.img_url, two.area_list)" />
  152. <View class="t">建面:{{three.area}}㎡</View>
  153. </View>
  154. </View>
  155. </View>
  156. </View>
  157. </View>
  158. </View>
  159. </View>
  160. </View>
  161. <View class="dtl-options">
  162. <View class="do-title">
  163. <View class="t">一页纸&更多</View>
  164. </View>
  165. <View class="do-content">
  166. <view class="scoped-more-box">
  167. <!-- <u-image src="/static/index/popup_bg_more.png" mode="heightFix" height="118rpx" class="icon"></u-image> -->
  168. <view class="plus" @click="oneImgHandle()">楼盘一页纸>></view>
  169. <view class="plus" @click="linkPlus()">查看更多该楼盘的(学区、地铁、航拍户型VR等等)信息,点击这里>></view>
  170. </view>
  171. </View>
  172. </View>
  173. <view class="scoped-footer">
  174. <view class="sf-left">
  175. <view v-if="ateObj.val" class="op t2" @click="callHandle(ateObj)">联系驻场:{{ateObj.key}} <view class="tell">tel:{{ateObj.phone}}</view></view>
  176. <view v-else class="op t2" @click="callHandle(footerObj.govern)">联系驻场:{{footerObj.govern.nickname}} <view class="tell">tel:{{footerObj.govern.phone}}</view></view>
  177. <view class="op" @click="callHandle(footerObj.custos)">联系销售:{{footerObj.custos.nickname}}<view class="tell">tel:{{footerObj.custos.phone}}</view></view>
  178. </view>
  179. <view class="sf-btn" @click="toAgentHandle">立即报备</view>
  180. </view>
  181. <!-- <View class="scoped-sale">
  182. <View class="ss-img">
  183. <Image :src="saleObj.avatar || 'https://img2.honglounews.com/20220515083230-1148.jpg'" class="img"/>
  184. </View>
  185. <View class="ss-info">
  186. <View class="p1">{{saleObj.nickname || '巴老师'}}</View>
  187. <View class="p2">该楼盘咨询我</View>
  188. </View>
  189. <View class="ss-r">
  190. <View class="b t2" @click="callHandle(saleObj)">打电话</View>
  191. <View class="b" @click="toAgentHandle">立即报备</View>
  192. </View>
  193. </View> -->
  194. <backTop :src="backTop.src" :scrollTop="backTop.scrollTop"></backTop>
  195. </view>
  196. </template>
  197. <script>
  198. import backTop from '@/components/back-top/back-top.vue'
  199. import wmWatermark from '@/components/wm-watermark/wm-watermark.vue'
  200. import { arrToObj } from '@/utils'
  201. export default {
  202. components: {
  203. backTop,
  204. wmWatermark
  205. },
  206. data() {
  207. return {
  208. allObj: {},
  209. curId: '',
  210. curObj: {},
  211. saleObj: {},
  212. atObj: {},
  213. ptObj: {},
  214. htObj: {},
  215. curHtml: '',
  216. backTop: {
  217. src: '../../static/back-top/top.png',
  218. scrollTop: 0
  219. },
  220. userInfo: {},
  221. footerObj: {},
  222. ateObj: {},
  223. };
  224. },
  225. filters: {
  226. filtersRichText(html) { //控制小程序中图片大小
  227. let newContent = html.replace(/<img[^>]*>/gi, (match, capture)=>{
  228. match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
  229. match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
  230. match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
  231. return match;
  232. });
  233. newContent = newContent.replace(/style="[^"]+"/gi, (match, capture)=>{
  234. match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
  235. return match;
  236. });
  237. newContent = newContent.replace(/<br[^>]*\/>/gi, '');
  238. newContent = newContent.replace(/\<img/gi,
  239. '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
  240. return newContent;
  241. }
  242. },
  243. onPageScroll(e) {
  244. this.scrollTop = e.scrollTop;
  245. this.backTop.scrollTop = e.scrollTop;
  246. },
  247. onLoad(params) {
  248. this.curId = params.id
  249. uni.api.estate.apiestatedetail({
  250. id: this.curId
  251. }).then(res => {
  252. this.allObj = res || {}
  253. this.curObj = res.plus_estate || {}
  254. this.saleObj = res.manage_user || {}
  255. this.footerObj = res.manage_users || {}
  256. })
  257. uni.api.estate.apiestatecontentdetail({id: this.curId}).then(res => {
  258. this.curHtml = res.content || ''
  259. })
  260. const userInfo2 = uni.getStorageSync('MD_userInfo2')
  261. this.userInfo = userInfo2 || {}
  262. const dictObj = uni.getStorageSync('MD_dict')
  263. let ateArr = dictObj.admin_tell_estate || []
  264. ateArr.forEach(ate => {
  265. if (ate.val === this.curId) {
  266. this.ateObj = {...ate, phone: ate.option1}
  267. }
  268. })
  269. this.authStateObj = arrToObj(dictObj.auth_state)
  270. this.ptObj = arrToObj(dictObj.product_type)
  271. this.htObj = arrToObj(dictObj.house_type)
  272. },
  273. created () {
  274. },
  275. // 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
  276. onReady() {
  277. },
  278. computed: {
  279. },
  280. methods: {
  281. linkPlus () {
  282. uni.navigateToMiniProgram({
  283. appId: 'wx91a710fad8c5eb22',
  284. path: `pagesHouse/indexDtl?id=${this.curObj.id}&fromViews=search`,
  285. // extraData: {
  286. // 'data1': 'test'
  287. // },
  288. success(res) {
  289. // 打开成功
  290. }
  291. })
  292. },
  293. oneImgHandle () {
  294. uni.api.estate.apiestateinfodetail({id: this.curId}).then(res => {
  295. const curImgUrl = res.info_img || ''
  296. if (!curImgUrl) {
  297. uni.$msg('该楼盘暂未设置一页纸楼盘简介~')
  298. return
  299. }
  300. uni.previewImage({
  301. current: curImgUrl,
  302. urls: [curImgUrl],
  303. })
  304. })
  305. },
  306. callHandle (saleObj) {
  307. uni.makePhoneCall({
  308. phoneNumber: saleObj.phone || '18100792072'
  309. })
  310. },
  311. toAgentHandle () {
  312. const that = this
  313. uni.navigateTo({
  314. url: '/pages/agent/recommend/create',
  315. success: function(res) {
  316. res.eventChannel.emit('data', {
  317. info: {
  318. estate_name: that.allObj.estate_name,
  319. estate_id: that.allObj.estate_id,
  320. }
  321. });
  322. }
  323. })
  324. },
  325. previewImageHandle (cur, arr) {
  326. const current = `${cur}_plus`
  327. const urls = arr.map(item => {
  328. return `${item.img_url}_plus`
  329. })
  330. uni.previewImage({
  331. current,
  332. urls
  333. })
  334. }
  335. }
  336. };
  337. </script>
  338. <style lang="scss" scoped>
  339. .l-box {
  340. padding-bottom: 140rpx;
  341. }
  342. .dtl-header {
  343. position: relative;
  344. overflow: hidden;
  345. .dh-bg {
  346. position: absolute;
  347. top: 0;
  348. left: 0;
  349. right: 0;
  350. z-index: -1;
  351. width: 100%;
  352. height: 500rpx;
  353. }
  354. .dh-content {
  355. border-radius: 20rpx;
  356. box-sizing: border-box;
  357. padding: 20rpx;
  358. margin: 10rpx;
  359. background-color: #fff;
  360. margin-top: 400rpx;
  361. z-index: 2;
  362. .i {
  363. display: inline-block;
  364. vertical-align: middle;
  365. width: 30rpx;
  366. height: 30rpx;
  367. margin-right: 10rpx;
  368. }
  369. .t {
  370. display: inline-block;
  371. vertical-align: middle;
  372. }
  373. }
  374. .dh-p1 {
  375. color: #333;
  376. font-size: 30rpx;
  377. padding-bottom: 10rpx;
  378. }
  379. .dh-p2 {
  380. color: #666;
  381. font-size: 26rpx;
  382. padding-bottom: 20rpx;
  383. }
  384. .dh-sign {
  385. .s {
  386. display: inline-block;
  387. vertical-align: middle;
  388. color: #fff;
  389. background: #0259e7;
  390. font-size: 24rpx;
  391. border-radius: 10rpx;
  392. padding: 6rpx 10rpx;
  393. margin-right: 10rpx;
  394. margin-bottom: 10rpx;
  395. &:last-child {
  396. margin-right: 0;
  397. }
  398. &.t-shop {
  399. background: #FFC82C;
  400. }
  401. &.t-park {
  402. background: #13CE66;
  403. }
  404. }
  405. }
  406. }
  407. .dtl-options {
  408. background: #fff;
  409. margin-bottom: 20rpx;
  410. position: relative;
  411. &:last-child {
  412. margin-bottom: 0;
  413. }
  414. .do-title {
  415. padding: 20rpx 20rpx 10rpx;
  416. position: relative;
  417. .t {
  418. display: inline-block;
  419. vertical-align: top;
  420. font-size: 30rpx;
  421. height: 30rpx;
  422. line-height: 30rpx;
  423. overflow: hidden;
  424. border-left: 4PX solid #0259e7;
  425. padding-left: 10rpx;
  426. font-weight: bold;
  427. }
  428. .s {
  429. display: inline-block;
  430. vertical-align: top;
  431. color: #999;
  432. font-size: 28rpx;
  433. text-decoration: underline;
  434. padding-left: 20rpx;
  435. }
  436. .r {
  437. position: absolute;
  438. top: 20rpx;
  439. right: 20rpx;
  440. font-size: 28rpx;
  441. color: #999;
  442. }
  443. }
  444. .do-content {
  445. padding: 0 20rpx 0;
  446. }
  447. .do-p {
  448. display: flex;
  449. padding: 10rpx;
  450. // &:nth-child(2n) {
  451. // background: #f2f2f2;
  452. // }
  453. .k {
  454. width: 26%;
  455. color: #9b9b9b;
  456. }
  457. .v {
  458. width: 74%;
  459. text-align: left;
  460. color: #313131;
  461. &.b {
  462. color: #f00;
  463. font-weight: bold;
  464. font-size: 30rpx;
  465. }
  466. }
  467. .v-item {
  468. .n {
  469. display: inline-block;
  470. color: #0259e7;
  471. }
  472. }
  473. }
  474. }
  475. .scoped-house-type {
  476. .sht-one {
  477. margin-bottom: 20rpx;
  478. }
  479. .sht-one-title {
  480. font-weight: bold;
  481. }
  482. .sht-two {
  483. padding: 10rpx 10rpx 0 20rpx;
  484. margin-top: 10rpx;
  485. background: #f9f9f9;
  486. }
  487. .sht-area {
  488. padding-left: 10rpx;
  489. padding-top: 10rpx;
  490. }
  491. .sht-one-title {
  492. font-weight: bold;
  493. color: #666;
  494. }
  495. .sht-two-title {
  496. font-weight: bold;
  497. color: #666;
  498. font-size: 24rpx;
  499. }
  500. .sht-area {
  501. display: inline-block;
  502. vertical-align: middle;
  503. .img {
  504. width: 100rpx;
  505. height: 100rpx;
  506. }
  507. .t {
  508. margin-top: -10rpx;
  509. text-align: center;
  510. color: #999;
  511. font-size: 22rpx;
  512. }
  513. }
  514. }
  515. .scoped-sale {
  516. position: fixed;
  517. left: 0;
  518. bottom: 0;
  519. width: 100%;
  520. height: 140rpx;
  521. background: #fff;
  522. display: flex;
  523. box-sizing: border-box;
  524. padding: 20rpx;
  525. z-index: 99;
  526. border: 1PX solid #f2f2f2;
  527. .ss-img {
  528. width: 90rpx;
  529. height: 90rpx;
  530. border-radius: 50%;
  531. overflow: hidden;
  532. margin-right: 20rpx;
  533. .img {
  534. width: 90rpx;
  535. height: 90rpx;
  536. border-radius: 50%;
  537. overflow: hidden;
  538. }
  539. }
  540. .ss-info {
  541. flex: 1;
  542. .p1 {
  543. color: #313131;
  544. font-weight: bold;
  545. font-size: 30rpx;
  546. padding-bottom: 6rpx;
  547. padding-left: 10rpx;
  548. }
  549. .p2 {
  550. display: inline-block;
  551. padding: 6rpx 10rpx;
  552. color: #8b94b1;
  553. background: #eceff5;
  554. font-size: 24rpx;
  555. border-radius: 10rpx;
  556. }
  557. }
  558. .ss-r {
  559. width: 350rpx;
  560. display: flex;
  561. padding-top: 10rpx;
  562. justify-content: space-between;
  563. .b {
  564. // width: 170rpx;
  565. width: 100%;
  566. height: 80rpx;
  567. line-height: 80rpx;
  568. text-align: center;
  569. background: #3bc48b;
  570. color: #fff;
  571. border-radius: 10rpx;
  572. &.t2 {
  573. margin-right: 12rpx;
  574. background: #3072f6;
  575. }
  576. }
  577. }
  578. }
  579. .scoped-more-box {
  580. width: 100%;
  581. .plus {
  582. color: #0259e7;
  583. font-size: 34rpx;
  584. text-decoration: underline;
  585. font-weight: bold;
  586. padding: 30rpx 0;
  587. }
  588. }
  589. .scoped-footer {
  590. position: fixed;
  591. bottom: 0;
  592. left: 0;
  593. width: 100%;
  594. height: 120rpx;
  595. display: flex;
  596. background: #fff;
  597. .sf-left {
  598. flex: 1;
  599. padding-top: 12rpx;
  600. padding-left: 20rpx;
  601. border-top: 1PX solid #dcdcdc;
  602. .op {
  603. color: #fff;
  604. background: #19be6b;
  605. border-radius: 10rpx;
  606. width: 250rpx;
  607. padding: 10rpx 0;
  608. display: inline-block;
  609. text-align: center;
  610. font-size: 28rpx;
  611. &.t2 {
  612. background: #f90;
  613. margin-right: 20rpx;
  614. }
  615. .tell {
  616. font-size: 24rpx;
  617. color: #f2f2f2;
  618. }
  619. }
  620. }
  621. .sf-btn {
  622. width: 190rpx;
  623. height: 120rpx;
  624. line-height: 120rpx;
  625. text-align: center;
  626. background: #2979ff;
  627. color: #fff;
  628. font-size: 36rpx;
  629. }
  630. }
  631. </style>