dtl.jsx 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887
  1. import Taro, { Component } from '@tarojs/taro'
  2. import { View, Swiper, SwiperItem, Navigator } from '@tarojs/components'
  3. import { AtCurtain } from 'taro-ui'
  4. import { arrToObj } from '@utils'
  5. import Rooms from './components/dtl/rooms'
  6. import Around from './components/dtl/around'
  7. import './dtl.scss'
  8. class Index extends Component {
  9. onShareAppMessage() {
  10. const userInfo = Taro.getStorageSync('APP_userInfo') || {}
  11. const { curId, curObj } = this.state
  12. if (userInfo.is_sale == 1) {
  13. return {
  14. title: `${userInfo.nickname}给您推荐:${curObj.title}`,
  15. path: `/pagesRoom/dtl?id=${curId}&referrer=${userInfo.user_id}`,
  16. }
  17. } else {
  18. return {
  19. title: `${curObj.title}`,
  20. path: `/pagesRoom/dtl?id=${curId}`,
  21. }
  22. }
  23. }
  24. onShareTimeline () {
  25. const userInfo = Taro.getStorageSync('APP_userInfo') || {}
  26. const { curId, curObj } = this.state
  27. if (userInfo.is_sale == 1) {
  28. return {
  29. title: `${userInfo.nickname}给您推荐:${curObj.title}`,
  30. path: `/pagesRoom/dtl?id=${curId}&referrer=${userInfo.user_id}`,
  31. }
  32. } else {
  33. return {
  34. title: `${curObj.title}`,
  35. path: `/pagesRoom/dtl?id=${curId}`,
  36. }
  37. }
  38. }
  39. constructor (props) {
  40. super(props)
  41. const {id: curId} = this.$router.params
  42. this.state = {
  43. referrer: '',
  44. saleUserObj: {},
  45. curId,
  46. curObj: {},
  47. curImgIndex: 0,
  48. // curShareCardImg: require('./img/dtl/bg_room_dtl.png')
  49. curShareCardImg: ''
  50. }
  51. }
  52. config = {
  53. // navigationBarTitleText: '房源详情',
  54. navigationStyle: 'custom',
  55. navigationBarTextStyle: 'white',
  56. }
  57. componentWillMount () {
  58. Taro.$AHU(this)
  59. this.getDtl()
  60. Taro.removeStorageSync('APP_MY_REFERRER')
  61. const {referrer} = this.$router.params
  62. if (referrer) {
  63. this.setState({
  64. referrer
  65. })
  66. Taro.removeStorageSync('APP_cur_sale')
  67. Taro.setStorageSync("APP_MY_REFERRER", referrer)
  68. }
  69. }
  70. getDtl = () => {
  71. const { curId } = this.state
  72. Taro.api.room.apieshousedetail({id: curId}).then(res => {
  73. // Taro.setNavigationBarTitle({
  74. // title: res.title || '房源详情'
  75. // })
  76. this.setState({
  77. curObj: res || {}
  78. }, () =>{
  79. if (this.subRooms) this.subRooms.getData(res.es_house_list || [])
  80. if (this.subAround) this.subAround.getData(res.estate_id)
  81. const {referrer} = this.$router.params
  82. if (referrer) {
  83. Taro.api.room.apisalelist({
  84. show_status: 1,
  85. referrer
  86. }).then(res => {
  87. const list = res.list || []
  88. if (list.length > 0) {
  89. this.setState({
  90. saleUserObj: list[0]
  91. })
  92. } else {
  93. if (res.sale_user.sale_phone === '18907904022') {
  94. Taro.api.room.apisalelist({
  95. show_status: 1,
  96. page_size: 99
  97. }).then(res => {
  98. const list = res.list || []
  99. const arrIndex = Math.floor(Math.random() * list.length)
  100. this.setState({
  101. saleUserObj: list[arrIndex],
  102. })
  103. Taro.setStorageSync('APP_cur_sale', {curObj: list[arrIndex]})
  104. })
  105. } else {
  106. this.setState({
  107. saleUserObj: res.sale_user
  108. })
  109. }
  110. }
  111. })
  112. } else {
  113. if (res.sale_user.sale_phone === '18907904022') {
  114. Taro.api.room.apisalelist({
  115. show_status: 1,
  116. page_size: 99
  117. }).then(res => {
  118. const list = res.list || []
  119. const arrIndex = Math.floor(Math.random() * list.length)
  120. this.setState({
  121. saleUserObj: list[arrIndex],
  122. })
  123. Taro.setStorageSync('APP_cur_sale', {curObj: list[arrIndex]})
  124. })
  125. } else {
  126. this.setState({
  127. saleUserObj: res.sale_user
  128. })
  129. }
  130. }
  131. })
  132. })
  133. }
  134. componentDidShow () { }
  135. componentDidHide () { }
  136. renderHeader () {
  137. const { curImgIndex, curObj } = this.state
  138. let moreImg = []
  139. let images = curObj.images ? curObj.images.split(',') : []
  140. images.forEach(url => {
  141. moreImg.push({img_url: `${url}`})
  142. })
  143. const imgArr = [{img_url: `${curObj.pri_image}`}, ...moreImg]
  144. return (
  145. <View className="dtl-header">
  146. <Swiper
  147. circular
  148. current={curImgIndex}
  149. onChange={this.headerImgChange.bind(this)}
  150. className='dh-swiper'>
  151. {
  152. curObj.video
  153. ?
  154. <SwiperItem>
  155. <View className='dh-item'>
  156. <Video
  157. className="img"
  158. src={curObj.video}
  159. controls={true}
  160. autoplay={false}
  161. initialTime='0'
  162. id='video'
  163. loop={false}
  164. muted={false}
  165. />
  166. </View>
  167. </SwiperItem>
  168. : ''
  169. }
  170. {
  171. imgArr.map((item, index) => {
  172. return (
  173. <SwiperItem key={index}>
  174. <View className='dh-item'>
  175. <Image src={item.img_url ? item.img_url + '_white' : ''} className="img" onClick={this.previewImage2Handle.bind(this, item.img_url, imgArr)} />
  176. </View>
  177. </SwiperItem>
  178. )
  179. })
  180. }
  181. </Swiper>
  182. <View className="dh-count">
  183. <View className="bg"></View>
  184. <View className="num">{curImgIndex + 1}-{imgArr.length + (curObj.video ? 1 : 0)}</View>
  185. </View>
  186. </View>
  187. )
  188. }
  189. headerImgChange (e) {
  190. this.setState({
  191. curImgIndex: e.detail.current || 0
  192. })
  193. }
  194. previewImage2Handle (cur, arr) {
  195. const current = `${cur}_plus`
  196. const urls = arr.map(item => {
  197. return `${item.img_url}_plus`
  198. })
  199. Taro.previewImage({
  200. current,
  201. urls
  202. })
  203. }
  204. renderQrcode () {
  205. const qrcodeImg = 'http://icon.honglounews.com/miniqrcode.jpg'
  206. return (
  207. <Image src={qrcodeImg} className="scoped-qrcode" onClick={this.previewQrcodeImageHandle.bind(this, qrcodeImg, [qrcodeImg])} />
  208. )
  209. }
  210. previewQrcodeImageHandle (current, urls) {
  211. Taro.previewImage({
  212. current,
  213. urls
  214. })
  215. }
  216. editHandle () {
  217. const { curId } = this.state
  218. const appUserInfo = Taro.getStorageSync('APP_userInfo')
  219. if (appUserInfo.is_sale == 1) {
  220. Taro.navigateTo({
  221. url: `/pagesMore/center/uploadRoom2?id=${curId}`
  222. })
  223. }
  224. }
  225. renderMain () {
  226. const signRight = require('@img/icon_sign_right.png')
  227. const dictData = Taro.getStorageSync('dictData')
  228. const atObj = arrToObj(dictData.area_type)
  229. const hryObj = arrToObj(dictData.house_room_year)
  230. const roomDecObj = arrToObj(dictData.room_dec)
  231. const roomPositionObj = arrToObj(dictData.room_position)
  232. const { curObj } = this.state
  233. const tagArr = curObj.custom_tag ? curObj.custom_tag.split(',') : []
  234. const moreImg = require('./img/dtl/bg_estate.png')
  235. const FH = Number(curObj.floor) || 1
  236. const H = Number(curObj.storeys) || 1
  237. let FHstr = '未知'
  238. if (FH > H * 0.6666) {
  239. FHstr = '中高层'
  240. } else if (FH > H * 0.33333) {
  241. FHstr = '中楼层'
  242. } else {
  243. FHstr = '中低层'
  244. }
  245. if (FH === 1) FHstr = '一楼'
  246. if (FH === H) FHstr = '顶楼'
  247. let houseTypeStr = '未知'
  248. if (curObj.house_type) {
  249. let arr = curObj.house_type.split('-')
  250. houseTypeStr = `${arr[0]}室${arr[1]}厅${arr[2]}卫`
  251. }
  252. const stairsRateArr = curObj.stairs_rate ? curObj.stairs_rate.split('-') : []
  253. const appUserInfo = Taro.getStorageSync('APP_userInfo')
  254. return (
  255. <View className="scoped-main">
  256. {/* {this.renderQrcode()} */}
  257. <View className="sm-tags">
  258. {
  259. appUserInfo.is_sale == 1
  260. ? <Navigator url={`/pagesRoom/follow/room?id=${curObj.id}`} className="s s2">跟进记录</Navigator>
  261. : ''
  262. }
  263. {
  264. tagArr.map((tag, tI) => {
  265. return (
  266. <View className="s" key={tI}>{tag}</View>
  267. )
  268. })
  269. }
  270. </View>
  271. <View className="sm-title" onClick={this.editHandle.bind(this)}>{curObj.title}</View>
  272. <View className="sm-focus">
  273. <View className="op">
  274. <View className="v">{curObj.price}万</View>
  275. <View className="k">售价</View>
  276. </View>
  277. <View className="op" onClick={this.houseImgHandle.bind(this)}>
  278. <View className="v">{houseTypeStr}</View>
  279. <View className="k">房型</View>
  280. </View>
  281. <View className="op">
  282. <View className="v">{curObj.area}㎡</View>
  283. <View className="k">建筑面积</View>
  284. </View>
  285. </View>
  286. <View className="sm-op">
  287. <View className="op full">
  288. <View className="k">单价</View>
  289. <View className="v">{parseInt(curObj.price * 10000 / curObj.area)}元/㎡</View>
  290. </View>
  291. <View className="op">
  292. <View className="k">楼层</View>
  293. <View className="v">{FHstr}/{curObj.storeys}层</View>
  294. </View>
  295. <View className="op" onClick={this.countHandle.bind(this, 'chat')}>
  296. <View className="m">咨询楼层</View>
  297. <Image src={signRight} className="r" />
  298. </View>
  299. <View className="op">
  300. <View className="k">满几</View>
  301. <View className="v">{hryObj[curObj.full_year]}</View>
  302. </View>
  303. <View className="op">
  304. <View className="k">装修</View>
  305. <View className="v">{roomDecObj[curObj.is_dec]}</View>
  306. </View>
  307. <View className="op">
  308. <View className="k">交房</View>
  309. <View className="v">{curObj.delivery_at}</View>
  310. </View>
  311. <View className="op">
  312. <View className="k">电梯</View>
  313. <View className="v">{curObj.is_elevator == 1 ? '有电梯' : '无电梯'}</View>
  314. </View>
  315. <View className="op">
  316. <View className="k">梯户</View>
  317. <View className="v">{stairsRateArr.length > 0 ? `${stairsRateArr[0]}梯${stairsRateArr[1]}户` : '未知'}</View>
  318. </View>
  319. <View className="op">
  320. <View className="k">方位</View>
  321. <View className="v">{curObj.position ? roomPositionObj[curObj.position] : '未知'}</View>
  322. </View>
  323. {/* <View className="op">
  324. <View className="k">预约</View>
  325. <View className="v">房东底价?朝向梯户比?<View onClick={this.countHandle.bind(this, 'chat')} className="s">【免费咨询】</View></View>
  326. </View> */}
  327. <View className="op">
  328. <View className="k">区域</View>
  329. <View className="v">{atObj[curObj.area_type]}</View>
  330. </View>
  331. <Navigator url={`/pagesHouse/indexDtlAround?id=${curObj.estate_id}&name=${curObj.estate_name}`} className="op">
  332. <View className="m">查看周边配套</View>
  333. <Image src={signRight} className="r" />
  334. </Navigator>
  335. <View className="op">
  336. <View className="k">其它</View>
  337. <View className="v">房东底价?套内面积</View>
  338. </View>
  339. <View className="op" onClick={this.countHandle.bind(this, 'chat')}>
  340. <View className="m">免费咨询</View>
  341. <Image src={signRight} className="r" />
  342. </View>
  343. <View className="op full" onClick={this.dtlLink.bind(this)}>
  344. <View className="k">楼盘</View>
  345. <View className="v t2">{curObj.estate_name}
  346. {/* <View onClick={this.dtlLink.bind(this)} className="s">查看该楼盘</View> */}
  347. </View>
  348. </View>
  349. <Navigator url={`/pagesHouse/price?id=${curObj.estate_id}&name=${curObj.estate_name}`} className="op full">
  350. <View className="k">成交</View>
  351. <View className="v t2">查看近期成交价</View>
  352. </Navigator>
  353. {
  354. curObj.introduce
  355. &&
  356. <View className="op full">
  357. <View className="k">简介</View>
  358. <View className="v">{curObj.introduce}</View>
  359. </View>
  360. }
  361. </View>
  362. <Image className="sm-more" src={moreImg} onClick={this.dtlLink.bind(this)} />
  363. </View>
  364. )
  365. }
  366. dtlLink () {
  367. const { curObj } = this.state
  368. Taro.navigateTo({
  369. url: `/pagesHouse/indexDtl?id=${curObj.estate_id}`
  370. })
  371. }
  372. renderImg () {
  373. const { curObj } = this.state
  374. return (
  375. <View className="dtl-options">
  376. <View className="do-title">
  377. <View className="t">户型图</View>
  378. </View>
  379. <View className="do-content" onClick={this.houseImgHandle.bind(this)}>
  380. <View className="scoped-img">
  381. <Image src={curObj.house_img} className="img"/>
  382. <View className="tips">
  383. <View className="bg"></View>
  384. <View className="t">查看大图</View>
  385. </View>
  386. </View>
  387. </View>
  388. </View>
  389. )
  390. }
  391. houseImgHandle () {
  392. const { curObj } = this.state
  393. const current = `${curObj.house_img}`
  394. const urls = [`${curObj.house_img}`]
  395. Taro.previewImage({
  396. current,
  397. urls
  398. })
  399. }
  400. renderAround () {
  401. const { curObj } = this.state
  402. return (
  403. <View className="dtl-options">
  404. <View className="do-title">
  405. <View className="t">周边配套</View>
  406. </View>
  407. <View className="do-content">
  408. <Around onRef={this.refAround} />
  409. </View>
  410. </View>
  411. )
  412. }
  413. refAround = (ref) => {
  414. this.subAround = ref
  415. }
  416. renderOther () {
  417. const { curObj } = this.state
  418. return (
  419. <View className="dtl-options">
  420. <View className="do-title">
  421. <View className="t">猜你喜欢</View>
  422. {/* <Navigator url={'/pagesRoom/list?estate_id=' + curObj.estate_id + '&estate_name=' + curObj.estate_name} className="r">查看更多{' >'}</Navigator> */}
  423. </View>
  424. <Rooms onRef={this.refRooms} />
  425. </View>
  426. )
  427. }
  428. refRooms = (ref) => {
  429. this.subRooms = ref
  430. }
  431. netLink (saleObj) {
  432. const { curObj } = this.state
  433. Taro.navigateTo({
  434. url: `/pagesQa/msg/chat?to_user_id=${saleObj.user_id}&qTitle=${curObj.title}&qId=${curObj.id}`
  435. })
  436. }
  437. callHandle (saleObj) {
  438. Taro.makePhoneCall({
  439. phoneNumber: saleObj.sale_phone
  440. })
  441. }
  442. afterCount (type) {
  443. const { curObj } = this.state
  444. if (type === 'chat') {
  445. this.netLink(curObj.sale_user)
  446. }
  447. if (type === 'call') {
  448. this.callHandle(curObj.sale_user)
  449. }
  450. }
  451. countHandle (type) {
  452. const { curObj } = this.state
  453. Taro.api.room.apiusercontactclick({
  454. target_id: curObj.id,
  455. sale_id: curObj.sale_id,
  456. click_type: type === 'call' ? '2' : '1' // 1在线聊 2打电话
  457. }).then(() => {
  458. this.afterCount(type)
  459. }).catch(() => {
  460. this.afterCount(type)
  461. })
  462. }
  463. renderSale () {
  464. const { curObj, saleUserObj } = this.state
  465. let saleObj = saleUserObj || {}
  466. const tagStr = saleObj.custom_tag ? saleObj.custom_tag.substring(0, 8) : ''
  467. return (
  468. <View className="scoped-sale">
  469. <View className="ss-img">
  470. <Image src={saleObj.sale_avatar} className="img"/>
  471. </View>
  472. <View className="ss-info">
  473. <View className="p1">{saleObj.sale_name}</View>
  474. <View className="p2">{tagStr}</View>
  475. </View>
  476. <View className="ss-r">
  477. <View className="b" onClick={this.countHandle.bind(this, 'chat')}>在线问</View>
  478. <View className="b t2" onClick={this.countHandle.bind(this, 'call')}>打电话</View>
  479. </View>
  480. </View>
  481. )
  482. }
  483. renderPopup () {
  484. const { isPopupShow, curShareCardImg } = this.state
  485. return (
  486. <AtCurtain
  487. isOpened={isPopupShow}
  488. onClose={this.popupClose.bind(this)}
  489. >
  490. <View className="scoped-share-card-img">
  491. <Image
  492. className="img"
  493. src={curShareCardImg}
  494. />
  495. </View>
  496. </AtCurtain>
  497. )
  498. }
  499. popupClose () {
  500. this.setState({
  501. isPopupShow: false
  502. })
  503. }
  504. popupOpen () {
  505. this.setState({
  506. isPopupShow: true
  507. })
  508. }
  509. dealCanvasImg (qrcodeSrc) {
  510. const { curObj } = this.state
  511. const that = this
  512. const imageArr = curObj.images.split(',')
  513. const processMultipleImages = (url) => {
  514. return new Promise((resolve, reject) => {
  515. Taro.getImageInfo({
  516. src: url,
  517. success: (res) => {
  518. resolve(res)
  519. },
  520. fail: () => {
  521. Taro.showToast({
  522. title: '下载失败!'
  523. })
  524. }
  525. })
  526. })
  527. }
  528. Promise.all(
  529. imageArr.map(img => processMultipleImages(img+'_adm0'))
  530. ).then(img => {
  531. let tempImgArr = img.map(i => i.path)
  532. that.dealCanvas(tempImgArr)
  533. })
  534. }
  535. // drawAndShareImage () {
  536. // const { curObj } = this.state
  537. // const imageArr = curObj.images.split(',')
  538. // if (imageArr.length < 2) {
  539. // Taro.$msgConfirm('房源图片不足~')
  540. // return
  541. // }
  542. // console.log(curObj)
  543. // const that = this
  544. // const cvs = Taro.createOffscreenCanvas({type: '2d', width: 700, height: 990})
  545. // const ctx = cvs.getContext('2d')
  546. // ctx.clearRect(0, 0, cvs.width, cvs.height)
  547. // ctx.rect(0 , 0 , cvs.width , cvs.height)
  548. // ctx.fillStyle = "#fff"
  549. // ctx.fill()
  550. // let imgBg = cvs.createImage();
  551. // imgBg.src = require('./img/dtl/bg_room_dtl.jpg')
  552. // imgBg.onload = () => {
  553. // ctx.drawImage(imgBg, 0, 0, 700, 990)
  554. // }
  555. // let img1 = cvs.createImage();
  556. // img1.src = curObj.pri_image + '_adm0'
  557. // imgBg.onload = () => {
  558. // ctx.drawImage(img1, 83, 358, 256, 200)
  559. // }
  560. // let img2 = cvs.createImage();
  561. // img2.src = curObj.house_img
  562. // imgBg.onload = () => {
  563. // ctx.drawImage(img2, 362, 358, 256, 200)
  564. // }
  565. // let img3 = cvs.createImage();
  566. // img3.src = imageArr[0] + '_adm0'
  567. // imgBg.onload = () => {
  568. // ctx.drawImage(img3, 83, 570, 256, 200)
  569. // }
  570. // let img4 = cvs.createImage();
  571. // img4.src = imageArr[1] + '_adm0'
  572. // imgBg.onload = () => {
  573. // ctx.drawImage(img4, 362, 570, 256, 200)
  574. // }
  575. // that.drawText(ctx, '#333', curObj.title.length > 25 ? curObj.title.substring(0, 25) + '...' : curObj.title, 98, 846, '18px')
  576. // if (curObj.estate_name.length > 7) {
  577. // that.drawText(ctx, '#333', curObj.estate_name, 80, 220, 'normal bold 36px')
  578. // } else {
  579. // that.drawText(ctx, '#333', curObj.estate_name, 80, 220, 'normal bold 56px')
  580. // }
  581. // that.drawText(ctx, '#333', curObj.area + '㎡', 140, 310, 'normal bold 28px')
  582. // that.drawText(ctx, '#df6135', curObj.floor_price + '万', 280, 310, 'normal bold 32px')
  583. // // let base64 = ctx.canvas.toDataURL("image/png")
  584. // // that.setState({
  585. // // curShareCardImg: base64
  586. // // })
  587. // // that.popupOpen()
  588. // const imgData = cvs.toDataURL();
  589. // console.log('imgData')
  590. // console.log(imgData)
  591. // const time = new Date().getTime();
  592. // const fs = wx.getFileSystemManager();
  593. // const filePath = Taro.env.USER_DATA_PATH + "/poster" + time + "share" + ".png";
  594. // fs.writeFile({
  595. // filePath,
  596. // data: imgData.replace(/^data:image\/\w+;base64,/, ""),
  597. // encoding: 'base64',
  598. // success: res => {
  599. // console.log('成功:'+res)
  600. // wx.showShareImageMenu({
  601. // path: filePath,
  602. // success: res => {
  603. // console.log(res, 11);
  604. // }
  605. // })
  606. // },
  607. // fail: err => {
  608. // // 此处可能存在内存满了的情况
  609. // // 需要根据具体需求处理
  610. // console.log(err);
  611. // }
  612. // });
  613. // fs.close()
  614. // }
  615. async drawAndShareImage () {
  616. const { curObj, curShareCardImg } = this.state
  617. if (curShareCardImg) {
  618. wx.showShareImageMenu({
  619. path: curShareCardImg,
  620. success: res => {
  621. console.log(res, 22);
  622. }
  623. })
  624. return
  625. }
  626. const imageArr = curObj.images.split(',')
  627. if (imageArr.length < 2) {
  628. Taro.$msgConfirm('房源图片不足~')
  629. return
  630. }
  631. Taro.showLoading({
  632. mask: true,
  633. title: '图片智能生成中..'
  634. })
  635. const that = this
  636. const cvs = Taro.createOffscreenCanvas({type: '2d', width: 700, height: 990})
  637. const ctx = cvs.getContext('2d')
  638. ctx.clearRect(0, 0, cvs.width, cvs.height)
  639. ctx.rect(0 , 0 , cvs.width , cvs.height)
  640. ctx.fillStyle = "#fff"
  641. ctx.fill()
  642. let imgBg = cvs.createImage();
  643. // imgBg.src = require('./img/dtl/bg_room_dtl.jpg')
  644. imgBg.src = 'https://img.honglounews.com/20240202095009-3067.jpg_adm0?r='+ Math.random()
  645. await new Promise(resolve => {
  646. imgBg.onload = resolve;
  647. })
  648. ctx.drawImage(imgBg, 0, 0, 700, 990)
  649. let img1 = cvs.createImage();
  650. await new Promise(resolve => {
  651. img1.onload = resolve;
  652. img1.src = curObj.pri_image + '_adm0'
  653. })
  654. ctx.drawImage(img1, 83, 358, 256, 200)
  655. let img2 = cvs.createImage();
  656. await new Promise(resolve => {
  657. img2.onload = resolve;
  658. img2.src = curObj.house_img
  659. })
  660. ctx.drawImage(img2, 362, 358, 256, 200)
  661. let img3 = cvs.createImage();
  662. await new Promise(resolve => {
  663. img3.onload = resolve;
  664. img3.src = imageArr[0] + '_adm0'
  665. })
  666. ctx.drawImage(img3, 83, 570, 256, 200)
  667. let img4 = cvs.createImage();
  668. await new Promise(resolve => {
  669. img4.onload = resolve;
  670. img4.src = imageArr[1] + '_adm0'
  671. })
  672. ctx.drawImage(img4, 362, 570, 256, 200)
  673. that.drawText(ctx, '#333', curObj.title.length > 25 ? curObj.title.substring(0, 25) + '...' : curObj.title, 98, 846, '18px')
  674. if (curObj.estate_name.length > 7) {
  675. that.drawText(ctx, '#333', curObj.estate_name, 80, 220, 'normal bold 36px')
  676. } else {
  677. that.drawText(ctx, '#333', curObj.estate_name, 80, 220, 'normal bold 56px')
  678. }
  679. that.drawText(ctx, '#333', curObj.area + '㎡', 140, 310, 'normal bold 28px')
  680. that.drawText(ctx, '#df6135', curObj.price + '万', 280, 310, 'normal bold 32px')
  681. // let base64 = ctx.canvas.toDataURL("image/png")
  682. // that.setState({
  683. // curShareCardImg: base64
  684. // })
  685. // that.popupOpen()
  686. setTimeout(() => {
  687. imgBg = null
  688. img1 = null
  689. img2 = null
  690. img3 = null
  691. img4 = null
  692. Taro.hideLoading()
  693. }, 6000)
  694. const imgData = cvs.toDataURL();
  695. const time = new Date().getTime();
  696. const fs = wx.getFileSystemManager();
  697. const filePath = Taro.env.USER_DATA_PATH + "/poster" + time + "share" + ".png";
  698. fs.writeFile({
  699. filePath,
  700. data: imgData.replace(/^data:image\/\w+;base64,/, ""),
  701. encoding: 'base64',
  702. success: res => {
  703. that.setState({
  704. curShareCardImg: filePath
  705. })
  706. Taro.hideLoading()
  707. wx.showShareImageMenu({
  708. path: filePath,
  709. success: res => {
  710. console.log(res, 11);
  711. }
  712. })
  713. },
  714. fail: err => {
  715. // 此处可能存在内存满了的情况
  716. // 需要根据具体需求处理
  717. console.log(err);
  718. Taro.hideLoading()
  719. }
  720. });
  721. fs.close()
  722. }
  723. drawText = (ctx, color, text, x, y, font) => {
  724. ctx.font=`${font} Microsoft YaHei`;
  725. ctx.fillStyle = color;
  726. ctx.textAlign = 'left';
  727. ctx.fillText(text, x, y);
  728. ctx.stroke();
  729. ctx.closePath();
  730. }
  731. renderShare () {
  732. const iconShare = require('@img/images/icon_g_share6s.png')
  733. return (
  734. <Button className="g-icon-share btn-to-div" onClick={this.drawAndShareImage.bind(this)}>
  735. <Image className="img" src={iconShare} />
  736. </Button>
  737. )
  738. }
  739. renderFixedTopLift () {
  740. const iconSignLeft = require('@img/icon_sign_left.png')
  741. return (
  742. <View className="g-fixed-top-left" onClick={this.goBackPrev.bind(this)}>
  743. <Image className="img" src={iconSignLeft} />
  744. </View>
  745. )
  746. }
  747. goBackPrev () {
  748. // 获取当前页面栈
  749. const pages = Taro.getCurrentPages()
  750. // 判断是否有上一页
  751. const hasPreviousPage = pages.length > 1
  752. if (hasPreviousPage) {
  753. // 如果有上一页,使用 navigateBack 返回至上一页
  754. Taro.navigateBack({
  755. delta: 1,
  756. })
  757. } else {
  758. // 若无上一页,可以导航至指定的其它页面或首页
  759. Taro.navigateTo({
  760. url: '/pages/index/index',
  761. })
  762. }
  763. }
  764. render () {
  765. const { curObj } = this.state
  766. return (
  767. <View className="l-box has-footer">
  768. {this.renderFixedTopLift()}
  769. {this.renderHeader()}
  770. {this.renderMain()}
  771. {this.renderImg()}
  772. {this.renderAround()}
  773. {(curObj.es_house_list && curObj.es_house_list.length > 0) && this.renderOther()}
  774. {this.renderSale()}
  775. {this.renderPopup()}
  776. {this.renderShare()}
  777. </View>
  778. )
  779. }
  780. }
  781. export default Index