hlplus/src/pagesRoom/dtl.jsx

import Taro, { Component } from '@tarojs/taro'
import { View, Swiper, SwiperItem, Navigator } from '@tarojs/components'
import { AtCurtain } from 'taro-ui'
import { arrToObj } from '@utils'
import Rooms from './components/dtl/rooms'
import Around from './components/dtl/around'
import './dtl.scss'

class Index extends Component {
  onShareAppMessage() {
    const userInfo = Taro.getStorageSync('APP_userInfo') || {}
    const { curId, curObj } = this.state
    if (userInfo.is_sale == 1) {
      return {
        title: `${userInfo.nickname}给您推荐：${curObj.title}`,
        path: `/pagesRoom/dtl?id=${curId}&referrer=${userInfo.user_id}`,
      }
    } else {
      return {
        title: `${curObj.title}`,
        path: `/pagesRoom/dtl?id=${curId}`,
      }
    }
  }
  onShareTimeline () {
    const userInfo = Taro.getStorageSync('APP_userInfo') || {}
    const { curId, curObj } = this.state
    if (userInfo.is_sale == 1) {
      return {
        title: `${userInfo.nickname}给您推荐：${curObj.title}`,
        path: `/pagesRoom/dtl?id=${curId}&referrer=${userInfo.user_id}`,
      }
    } else {
      return {
        title: `${curObj.title}`,
        path: `/pagesRoom/dtl?id=${curId}`,
      }
    }
  }

  constructor (props) {
    super(props)
    const {id: curId} = this.$router.params
    this.state = {
      referrer: '',
      saleUserObj: {},
      curId,
      curObj: {},
      curImgIndex: 0,
      // curShareCardImg: require('./img/dtl/bg_room_dtl.png')
      curShareCardImg: '',
      curShareCardImgType: '',
    }
  }

  config = {
    // navigationBarTitleText: '房源详情',
    navigationStyle: 'custom',
    navigationBarTextStyle: 'white',
  }

  componentWillMount () {
    Taro.$AHU(this)
    this.getDtl()
    Taro.removeStorageSync('APP_MY_REFERRER')
    const {referrer} = this.$router.params
    if (referrer) {
      this.setState({
        referrer
      })
      Taro.removeStorageSync('APP_cur_sale')
      Taro.setStorageSync("APP_MY_REFERRER", referrer)
    }
  }

  getDtl = () => {
    const { curId } = this.state
    Taro.api.room.apieshousedetail({id: curId}).then(res => {
      // Taro.setNavigationBarTitle({
      //   title: res.title || '房源详情'
      // })
      this.setState({
        curObj: res || {}
      }, () =>{
        if (this.subRooms) this.subRooms.getData(res.es_house_list || [])
        if (this.subAround) this.subAround.getData(res.estate_id)


        const {referrer} = this.$router.params
        if (referrer) {
          Taro.api.room.apisalelist({
            show_status: 1,
            referrer
          }).then(res => {
            const list = res.list || []
            if (list.length > 0) {
              this.setState({
                saleUserObj: list[0]
              })
            } else {


              if (res.sale_user.sale_phone === '18907904022') {
                Taro.api.room.apisalelist({
                  show_status: 1,
                  page_size: 99
                }).then(res => {
                  const list = res.list || []
                  const arrIndex = Math.floor(Math.random() * list.length)
                  this.setState({
                    saleUserObj: list[arrIndex],
                  })
                  Taro.setStorageSync('APP_cur_sale', {curObj: list[arrIndex]})
                })
              } else {
                this.setState({
                  saleUserObj: res.sale_user
                })
              }


            }
          })
        } else {


          if (res.sale_user.sale_phone === '18907904022') {
            Taro.api.room.apisalelist({
              show_status: 1,
              page_size: 99
            }).then(res => {
              const list = res.list || []
              const arrIndex = Math.floor(Math.random() * list.length)
              this.setState({
                saleUserObj: list[arrIndex],
              })
              Taro.setStorageSync('APP_cur_sale', {curObj: list[arrIndex]})
            })
          } else {
            this.setState({
              saleUserObj: res.sale_user
            })
          }



        }





      })
    })
  }

  componentDidShow () { }

  componentDidHide () { }

  renderHeader () {
    const { curImgIndex, curObj } = this.state
    let moreImg = []
    let images = curObj.images ? curObj.images.split(',') : []
    images.forEach(url => {
      moreImg.push({img_url: `${url}`})
    })
    const imgArr = [{img_url: `${curObj.pri_image}`}, ...moreImg]
    return (
      <View className="dtl-header">
        <Swiper
          circular
          current={curImgIndex}
          onChange={this.headerImgChange.bind(this)}
          className='dh-swiper'>
            {
              curObj.video
              ?
              <SwiperItem>
                <View className='dh-item'>
                  <Video
                    className="img"
                    src={curObj.video}
                    controls={true}
                    autoplay={false}
                    initialTime='0'
                    id='video'
                    loop={false}
                    muted={false}
                  />
                </View>
              </SwiperItem>
              : ''
            }
            {
              imgArr.map((item, index) => {
                return (
                  <SwiperItem key={index}>
                    <View className='dh-item'>
                      <Image src={item.img_url ? item.img_url + '_white' : ''} className="img" onClick={this.previewImage2Handle.bind(this, item.img_url, imgArr)} />
                    </View>
                  </SwiperItem>
                )
              })
            }
        </Swiper>
        <View className="dh-count">
          <View className="bg"></View>
          <View className="num">{curImgIndex + 1}-{imgArr.length + (curObj.video ? 1 : 0)}</View>
        </View>
      </View>
    )
  }
  headerImgChange (e) {
    this.setState({
      curImgIndex: e.detail.current || 0
    })
  }
  previewImage2Handle (cur, arr) {
    const current = `${cur}_plus`
    const urls = arr.map(item => {
      return `${item.img_url}_plus`
    })
    Taro.previewImage({
      current,
      urls
    })
  }


  renderQrcode () {
    const qrcodeImg = 'http://icon.honglounews.com/miniqrcode.jpg'
    return (
      <Image src={qrcodeImg} className="scoped-qrcode"  onClick={this.previewQrcodeImageHandle.bind(this, qrcodeImg, [qrcodeImg])} />
    )
  }
  previewQrcodeImageHandle (current, urls) {
    Taro.previewImage({
      current,
      urls
    })
  }


  editHandle () {
    const { curId } = this.state
    const appUserInfo = Taro.getStorageSync('APP_userInfo')
    if (appUserInfo.is_sale == 1) {
      Taro.navigateTo({
        url: `/pagesMore/center/uploadRoom2?id=${curId}`
      })
    }
  }

  renderMain () {
    const signRight = require('@img/icon_sign_right.png')
    const dictData = Taro.getStorageSync('dictData')
    const atObj = arrToObj(dictData.area_type)
    const hryObj = arrToObj(dictData.house_room_year)
    const roomDecObj = arrToObj(dictData.room_dec)
    const roomPositionObj = arrToObj(dictData.room_position)
    const { curObj } = this.state

    const tagArr = curObj.custom_tag ? curObj.custom_tag.split(',') : []
    const moreImg = require('./img/dtl/bg_estate.png')
    const FH = Number(curObj.floor) || 1
    const H = Number(curObj.storeys) || 1
    let FHstr = '未知'
    if (FH > H * 0.6666) {
      FHstr = '中高层'
    } else if (FH > H * 0.33333) {
      FHstr = '中楼层'
    } else {
      FHstr = '中低层'
    }
    if (FH === 1) FHstr = '低层'
    if (FH === H) FHstr = '高层'

    let houseTypeStr = '未知'
    if (curObj.house_type) {
      let arr = curObj.house_type.split('-')
      houseTypeStr = `${arr[0]}室${arr[1]}厅${arr[2]}卫`
    }
    const stairsRateArr = curObj.stairs_rate ? curObj.stairs_rate.split('-') : []

    const appUserInfo = Taro.getStorageSync('APP_userInfo')

    const schoolList = curObj.school_list && curObj.school_list.duikou ? curObj.school_list.duikou : []

    // <View className="t t1">{arrToObj(dictData.school_attrib)[item.school_attrib]}</View>
    //           <View className="t t4">{arrToObj(dictData.school_type)[item.school_type]}</View>
    const schoolViews = schoolList.map((item) => {
      return (
        <View className="v-sub-op" key={item.id}>{`${item.school_name}[${arrToObj(dictData.school_attrib)[item.school_attrib]}][${arrToObj(dictData.school_type)[item.school_type]}]`}</View>
      )

    })
    // console.log(schoolStrList)
    return (
      <View className="scoped-main">
        {/* {this.renderQrcode()} */}
        <View className="sm-tags">
          {
            appUserInfo.is_sale == 1
            ? <Navigator url={`/pagesRoom/follow/room?id=${curObj.id}`} className="s s2">{curObj.id}跟进记录</Navigator>
            : ''
          }
          {
            tagArr.map((tag, tI) => {
              return (
                <View className="s" key={tI}>{tag}</View>
              )
            })
          }
        </View>
        <View className="sm-title" onClick={this.editHandle.bind(this)}>{curObj.title}</View>
        <View className="sm-focus">
          <View className="op">
            <View className="v">{curObj.price}万</View>
            <View className="k">售价</View>
          </View>
          <View className="op" onClick={this.houseImgHandle.bind(this)}>
            <View className="v">{houseTypeStr}</View>
            <View className="k">房型</View>
          </View>
          <View className="op">
            <View className="v">{curObj.area}㎡</View>
            <View className="k">建筑面积</View>
          </View>
        </View>
        <View className="sm-op">
          <View className="op full">
            <View className="k">学区</View>
            <View className="v">
              <View className="v-sub">
                {schoolViews}
                {/* <View className="v-sub-op"></View> */}
              </View>
            </View>
          </View>
          <View className="op full">
            <View className="k">单价</View>
            <View className="v">{parseInt(curObj.price * 10000 / curObj.area)}元/㎡</View>
          </View>
          <View className="op">
            <View className="k">楼层</View>
            <View className="v">{FHstr}/{curObj.storeys}层</View>
          </View>
          <View className="op" onClick={this.countHandle.bind(this, 'chat')}>
            <View className="m">咨询楼层</View>
            <Image src={signRight} className="r" />
          </View>
          <View className="op">
            <View className="k">满几</View>
            <View className="v">{hryObj[curObj.full_year] || '未知'}</View>
          </View>
          <View className="op">
            <View className="k">装修</View>
            <View className="v">{roomDecObj[curObj.is_dec]}</View>
          </View>
          <View className="op">
            <View className="k">交房</View>
            <View className="v">{curObj.delivery_at || '未知'}</View>
          </View>
          <View className="op">
            <View className="k">电梯</View>
            <View className="v">{curObj.is_elevator == 1 ? '有电梯' : '无电梯'}</View>
          </View>
          <View className="op">
            <View className="k">梯户</View>
            <View className="v">{stairsRateArr.length > 0 ? `${stairsRateArr[0]}梯${stairsRateArr[1]}户` : '未知'}</View>
          </View>
          <View className="op">
            <View className="k">方位</View>
            <View className="v">{curObj.position ? roomPositionObj[curObj.position] : '未知'}</View>
          </View>
          {/* <View className="op">
            <View className="k">预约</View>
            <View className="v">房东底价？朝向梯户比？<View onClick={this.countHandle.bind(this, 'chat')} className="s">【免费咨询】</View></View>
          </View> */}
          <View className="op">
            <View className="k">区域</View>
            <View className="v">{atObj[curObj.area_type]}</View>
          </View>
          <Navigator url={`/pagesHouse/indexDtlAround?id=${curObj.estate_id}&name=${curObj.estate_name}`} className="op">
            <View className="m">查看周边配套</View>
            <Image src={signRight} className="r" />
          </Navigator>
          <View className="op">
            <View className="k">其它</View>
            <View className="v">房东底价？套内面积</View>
          </View>
          <View className="op" onClick={this.countHandle.bind(this, 'chat')}>
            <View className="m">免费咨询</View>
            <Image src={signRight} className="r" />
          </View>
          <View className="op full" onClick={this.dtlLink.bind(this)}>
            <View className="k">楼盘</View>
            <View className="v t2">{curObj.estate_name}
            {/* <View onClick={this.dtlLink.bind(this)}  className="s">查看该楼盘</View> */}
            </View>
          </View>
          <Navigator url={`/pagesHouse/price?id=${curObj.estate_id}&name=${curObj.estate_name}`} className="op full">
            <View className="k">成交</View>
            <View className="v t2">查看近期成交价</View>
          </Navigator>
          {
            curObj.introduce
            &&
            <View className="op full">
              <View className="k">简介</View>
              <View className="v">{curObj.introduce}</View>
            </View>
          }
        </View>
        <Image className="sm-more" src={moreImg} onClick={this.dtlLink.bind(this)} />
      </View>
    )
  }
  dtlLink () {
    const { curObj } = this.state
    Taro.navigateTo({
      url: `/pagesHouse/indexDtl?id=${curObj.estate_id}`
    })
  }

  renderImg () {
    const { curObj } = this.state
    return (
      <View className="dtl-options">
        <View className="do-title">
          <View className="t">户型图</View>
        </View>
        <View className="do-content" onClick={this.houseImgHandle.bind(this)}>
          <View className="scoped-img">
            <Image src={curObj.house_img} className="img"/>
            <View className="tips">
              <View className="bg"></View>
              <View className="t">查看大图</View>
            </View>
          </View>
        </View>
      </View>
    )
  }
  houseImgHandle () {
    const { curObj } = this.state
    const current = `${curObj.house_img}`
    const urls = [`${curObj.house_img}`]
    Taro.previewImage({
      current,
      urls
    })
  }









  renderAround () {
    const { curObj } = this.state
    return (
      <View className="dtl-options">
        <View className="do-title">
          <View className="t">周边配套</View>
        </View>
        <View className="do-content">
          <Around onRef={this.refAround} />
        </View>
      </View>
    )
  }
  refAround = (ref) => {
    this.subAround = ref
  }





  renderOther () {
    const { curObj } = this.state
    return (
      <View className="dtl-options">
        <View className="do-title">
          <View className="t">猜你喜欢</View>
          {/* <Navigator url={'/pagesRoom/list?estate_id=' + curObj.estate_id + '&estate_name=' + curObj.estate_name} className="r">查看更多{' >'}</Navigator> */}
        </View>
        <Rooms onRef={this.refRooms} />
      </View>
    )
  }
  refRooms = (ref) => {
    this.subRooms = ref
  }


  netLink (saleObj) {
    const { curObj } = this.state
    Taro.navigateTo({
      url: `/pagesQa/msg/chat?to_user_id=${saleObj.user_id}&qTitle=${curObj.title}&qId=${curObj.id}`
    })
  }
  callHandle (saleObj) {
    Taro.makePhoneCall({
      phoneNumber: saleObj.sale_phone
    })
  }
  afterCount (type) {
    const { curObj } = this.state
    if (type === 'chat') {
      this.netLink(curObj.sale_user)
    }
    if (type === 'call') {
      this.callHandle(curObj.sale_user)
    }
  }
  countHandle (type) {
    const { curObj } = this.state
    Taro.api.room.apiusercontactclick({
      target_id: curObj.id,
      sale_id: curObj.sale_id,
      click_type: type === 'call' ? '2' : '1' // 1在线聊 2打电话
    }).then(() => {
      this.afterCount(type)
    }).catch(() => {
      this.afterCount(type)
    })
  }

  renderSale () {
    const { curObj, saleUserObj } = this.state
    let saleObj = saleUserObj || {}
    const tagStr = saleObj.custom_tag ? saleObj.custom_tag.substring(0, 8) : ''
    return (
      <View className="scoped-sale">
        <View className="ss-img">
          <Image src={saleObj.sale_avatar} className="img"/>
        </View>
        <View className="ss-info">
          <View className="p1">{saleObj.sale_name}</View>
          <View className="p2">{tagStr}</View>
        </View>
        <View className="ss-r">
          <View className="b" onClick={this.countHandle.bind(this, 'chat')}>在线问</View>
          <View className="b t2" onClick={this.countHandle.bind(this, 'call')}>打电话</View>
        </View>
      </View>
    )
  }

  renderPopup () {
    const { isPopupShow, curShareCardImg  } = this.state
    return (
      <AtCurtain
        isOpened={isPopupShow}
        onClose={this.popupClose.bind(this)}
      >
        <View className="scoped-share-card-img">
          <Image
            className="img"
            src={curShareCardImg}
          />
        </View>
      </AtCurtain>
    )
  }
  popupClose () {
    this.setState({
      isPopupShow: false
    })
  }
  popupOpen () {
    this.setState({
      isPopupShow: true
    })
  }


  dealCanvasImg (qrcodeSrc) {
    const { curObj } = this.state
    const that = this
    const imageArr = (curObj.images || '').split(',')
    const processMultipleImages = (url) => {
      return new Promise((resolve, reject) => {
        Taro.getImageInfo({
          src: url,
          success: (res) => {
            resolve(res)
          },
          fail: () => {
            Taro.showToast({
              title: '下载失败!'
            })
          }
        })
      })
    }
    Promise.all(
      imageArr.map(img => processMultipleImages(img+'_adm0'))
    ).then(img => {
      let tempImgArr = img.map(i => i.path)
      that.dealCanvas(tempImgArr)
    })

  }




  // drawAndSharetestImage () {
  //   const { curObj } = this.state
  //   const imageArr = (curObj.images || '').split(',')
  //   if (imageArr.length < 2) {
  //     Taro.$msgConfirm('房源图片不足~')
  //     return
  //   }
  //   console.log(curObj)
  //   const that = this
  //   const cvs = Taro.createOffscreenCanvas({type: '2d', width: 700, height: 990})
  //   const ctx = cvs.getContext('2d')
  //   ctx.clearRect(0, 0, cvs.width, cvs.height)
  //   ctx.rect(0 , 0 , cvs.width , cvs.height)
  //   ctx.fillStyle = "#fff"
  //   ctx.fill()


  //   let imgBg = cvs.createImage();
  //   imgBg.src = require('./img/dtl/bg_room_dtl.jpg')
  //   imgBg.onload = () => {
  //     ctx.drawImage(imgBg, 0, 0, 700, 990)
  //   }

  //   let img1 = cvs.createImage();
  //   img1.src = curObj.pri_image + '_adm0'
  //   imgBg.onload = () => {
  //     ctx.drawImage(img1, 83, 358, 256, 200)
  //   }


  //   let img2 = cvs.createImage();
  //   img2.src = curObj.house_img
  //   imgBg.onload = () => {
  //     ctx.drawImage(img2, 362, 358, 256, 200)
  //   }


  //   let img3 = cvs.createImage();
  //   img3.src = imageArr[0] + '_adm0'
  //   imgBg.onload = () => {
  //     ctx.drawImage(img3, 83, 570, 256, 200)
  //   }


  //   let img4 = cvs.createImage();
  //   img4.src = imageArr[1] + '_adm0'
  //   imgBg.onload = () => {
  //     ctx.drawImage(img4, 362, 570, 256, 200)
  //   }



  //   that.drawText(ctx, '#333', curObj.title.length > 25 ? curObj.title.substring(0, 25) + '...' : curObj.title, 98, 846, '18px')
  //   if (curObj.estate_name.length > 7) {
  //     that.drawText(ctx, '#333', curObj.estate_name, 80, 220, 'normal bold 36px')
  //   } else {
  //     that.drawText(ctx, '#333', curObj.estate_name, 80, 220, 'normal bold 56px')
  //   }


  //   that.drawText(ctx, '#333', curObj.area + '㎡', 140, 310, 'normal bold 28px')
  //   that.drawText(ctx, '#df6135', curObj.floor_price + '万', 280, 310, 'normal bold 32px')


  //   // let base64 = ctx.canvas.toDataURL("image/png")
  //   // that.setState({
  //   //   curShareCardImg: base64
  //   // })

  //   // that.popupOpen()


  //   const imgData = cvs.toDataURL();
  //   console.log('imgData')
  //   console.log(imgData)
  //   const time = new Date().getTime();
  //   const fs = wx.getFileSystemManager();
  //   const filePath = Taro.env.USER_DATA_PATH + "/poster" + time + "share" + ".png";
  //   fs.writeFile({
  //     filePath,
  //     data: imgData.replace(/^data:image\/\w+;base64,/, ""),
  //     encoding: 'base64',
  //     success: res => {
  //       console.log('成功：'+res)
  //       wx.showShareImageMenu({
  //         path: filePath,
  //         success: res => {
  //           console.log(res, 11);
  //         }
  //       })
  //     },
  //     fail: err => {
  //       // 此处可能存在内存满了的情况
  //       // 需要根据具体需求处理
  //       console.log(err);
  //     }
  //   });
  //   fs.close()



  // }


  async drawAndShare2Image (str) {
    const { curObj, curShareCardImg, curShareCardImgType } = this.state
    if (curShareCardImg) {
      if (curShareCardImgType === str) {
        wx.showShareImageMenu({
          path: curShareCardImg,
          success: res => {
            console.log(res, 22);
          }
        })
      } else {
        Taro.$msgConfirm('请返回上一层页面，再重新进入当前页面生成图片~')
      }
      return
    }
    const imageArr = (curObj.images || '').split(',')
    if (imageArr.length < 2) {
      Taro.$msgConfirm('房源图片不足~')
      return
    }
    Taro.showLoading({
      mask: true,
      title: '图片智能生成中..'
    })
    const that = this
    const cvs = Taro.createOffscreenCanvas({type: '2d', width: 700, height: 1516})
    const ctx = cvs.getContext('2d')
    ctx.clearRect(0, 0, cvs.width, cvs.height)
    ctx.rect(0 , 0 , cvs.width , cvs.height)
    ctx.fillStyle = "#fff"
    ctx.fill()

    let imgBg = cvs.createImage();
    // imgBg.src = require('./img/dtl/bg_room_dtl.jpg')
    imgBg.src = 'https://img.honglounews.com/20260107092402-3240.jpg_adm0?r='+ Math.random()
    await new Promise(resolve => {
      imgBg.onload = resolve;
    })

    ctx.drawImage(imgBg, 0, 0, 700, 1516)
    let img1 = cvs.createImage();
    await new Promise(resolve => {
      img1.onload = resolve;
      img1.src = curObj.pri_image + '_adm0'
    })
    ctx.drawImage(img1, 0, 530, 345, 286)

    let img2 = cvs.createImage();
    await new Promise(resolve => {
      img2.onload = resolve;
      img2.src = curObj.house_img
    })
    ctx.drawImage(img2, 356, 530, 345, 286)

    let img3 = cvs.createImage();
    await new Promise(resolve => {
      img3.onload = resolve;
      img3.src = imageArr[0] + '_adm0'
    })
    ctx.drawImage(img3, 0, 828, 345, 286)

    let img4 = cvs.createImage();
    await new Promise(resolve => {
      img4.onload = resolve;
      img4.src = imageArr[1] + '_adm0'
    })
    ctx.drawImage(img4, 356, 828, 345, 286)


    that.drawCenterText(ctx, '#343434', curObj.title.length > 25 ? curObj.title.substring(0, 25) + '...' : curObj.title, 350, 460, '28px')
    if (str === 'hide') {
      that.drawCenterText(ctx, '#333', '详情咨询巴老师', 350, 255, 'normal bold 70px')
    } else {
      if (curObj.estate_name.length > 10) {
        that.drawCenterText(ctx, '#343434', curObj.estate_name, 350, 255, 'normal bold 30px')
      } else if (curObj.estate_name.length > 7) {
        that.drawCenterText(ctx, '#343434', curObj.estate_name, 350, 255, 'normal bold 56px')
      } else {
        that.drawCenterText(ctx, '#343434', curObj.estate_name, 350, 255, 'normal bold 70px')
      }
    }


    // that.drawText(ctx, '#333', curObj.area + '㎡', 140, 310, 'normal bold 28px')
    // that.drawText(ctx, '#df6135', curObj.price + '万', 280, 310, 'normal bold 32px')
    that.drawText(ctx, '#ff2400', curObj.area, 170, 390, 'normal bold 80px')
    that.drawText(ctx, '#ff2400', curObj.price, 380, 390, 'normal bold 80px')


    // let base64 = ctx.canvas.toDataURL("image/png")
    // that.setState({
    //   curShareCardImg: base64
    // })

    // that.popupOpen()

    setTimeout(() => {
      imgBg = null
      img1 = null
      img2 = null
      img3 = null
      img4 = null
      Taro.hideLoading()
    }, 6000)

    const imgData = cvs.toDataURL();
    const time = new Date().getTime();
    const fs = wx.getFileSystemManager();
    const filePath = Taro.env.USER_DATA_PATH + "/poster" + time + "share" + ".png";
    fs.writeFile({
      filePath,
      data: imgData.replace(/^data:image\/\w+;base64,/, ""),
      encoding: 'base64',
      success: res => {
        that.setState({
          curShareCardImgType: str,
          curShareCardImg: filePath
        })
        ctx.clearRect(0, 0, cvs.width, cvs.height)
        Taro.hideLoading()
        wx.showShareImageMenu({
          path: filePath,
          success: res => {
            console.log(res, 11);
          }
        })
      },
      fail: err => {
        // 此处可能存在内存满了的情况
        // 需要根据具体需求处理
        console.log(err);
        Taro.hideLoading()
      }
    });
    fs.close()



  }


  async drawAndShareImage (str) {
    const { curObj, curShareCardImg, curShareCardImgType } = this.state
    if (curShareCardImg) {
      if (curShareCardImgType === str) {
        wx.showShareImageMenu({
          path: curShareCardImg,
          success: res => {
            console.log(res, 22);
          }
        })
      } else {
        Taro.$msgConfirm('请返回上一层页面，再重新进入当前页面生成图片~')
      }
      return
    }
    const imageArr = (curObj.images || '').split(',')
    if (imageArr.length < 2) {
      Taro.$msgConfirm('房源图片不足~')
      return
    }
    Taro.showLoading({
      mask: true,
      title: '图片智能生成中..'
    })
    const that = this
    const cvs = Taro.createOffscreenCanvas({type: '2d', width: 700, height: 1516})
    const ctx = cvs.getContext('2d')
    ctx.clearRect(0, 0, cvs.width, cvs.height)
    ctx.rect(0 , 0 , cvs.width , cvs.height)
    ctx.fillStyle = "#fff"
    ctx.fill()

    let imgBg = cvs.createImage();
    // imgBg.src = require('./img/dtl/bg_room_dtl.jpg')
    imgBg.src = 'https://img.honglounews.com/20260107092402-3240.jpg_adm0?r='+ Math.random()
    await new Promise(resolve => {
      imgBg.onload = resolve;
    })

    ctx.drawImage(imgBg, 0, 0, 700, 1516)
    let img1 = cvs.createImage();
    await new Promise(resolve => {
      img1.onload = resolve;
      img1.src = curObj.pri_image + '_adm0'
    })
    ctx.drawImage(img1, 0, 530, 345, 286)

    let img2 = cvs.createImage();
    await new Promise(resolve => {
      img2.onload = resolve;
      img2.src = curObj.house_img
    })
    ctx.drawImage(img2, 356, 530, 345, 286)

    let img3 = cvs.createImage();
    await new Promise(resolve => {
      img3.onload = resolve;
      img3.src = imageArr[0] + '_adm0'
    })
    ctx.drawImage(img3, 0, 828, 345, 286)

    let img4 = cvs.createImage();
    await new Promise(resolve => {
      img4.onload = resolve;
      img4.src = imageArr[1] + '_adm0'
    })
    ctx.drawImage(img4, 356, 828, 345, 286)


    that.drawCenterText(ctx, '#343434', curObj.title.length > 25 ? curObj.title.substring(0, 25) + '...' : curObj.title, 350, 460, '28px')
    if (str === 'hide') {
      that.drawCenterText(ctx, '#333', '详情咨询巴老师', 350, 255, 'normal bold 70px')
    } else {
      if (curObj.estate_name.length > 10) {
        that.drawCenterText(ctx, '#343434', curObj.estate_name, 350, 255, 'normal bold 30px')
      } else if (curObj.estate_name.length > 7) {
        that.drawCenterText(ctx, '#343434', curObj.estate_name, 350, 255, 'normal bold 56px')
      } else {
        that.drawCenterText(ctx, '#343434', curObj.estate_name, 350, 255, 'normal bold 70px')
      }
    }


    that.drawText(ctx, '#ff2400', curObj.area, 170, 390, 'normal bold 80px')
    that.drawText(ctx, '#ff2400', curObj.price, 380, 390, 'normal bold 80px')


    // let base64 = ctx.canvas.toDataURL("image/png")
    // that.setState({
    //   curShareCardImg: base64
    // })

    // that.popupOpen()

    setTimeout(() => {
      imgBg = null
      img1 = null
      img2 = null
      img3 = null
      img4 = null
      Taro.hideLoading()
    }, 6000)

    const imgData = cvs.toDataURL();
    const time = new Date().getTime();
    const fs = wx.getFileSystemManager();
    const filePath = Taro.env.USER_DATA_PATH + "/poster" + time + "share" + ".png";
    fs.writeFile({
      filePath,
      data: imgData.replace(/^data:image\/\w+;base64,/, ""),
      encoding: 'base64',
      success: res => {
        that.setState({
          curShareCardImgType: str,
          curShareCardImg: filePath
        })
        ctx.clearRect(0, 0, cvs.width, cvs.height)
        Taro.hideLoading()
        wx.showShareImageMenu({
          path: filePath,
          success: res => {
            console.log(res, 11);
          }
        })
      },
      fail: err => {
        // 此处可能存在内存满了的情况
        // 需要根据具体需求处理
        console.log(err);
        Taro.hideLoading()
      }
    });
    fs.close()



  }
  drawText = (ctx, color, text, x, y, font) => {
    ctx.font=`${font} Microsoft YaHei`;
    ctx.fillStyle = color;
    ctx.textAlign = 'left';
    ctx.fillText(text, x, y);
    ctx.stroke();
    ctx.closePath();
  }
  drawCenterText = (ctx, color, text, x, y, font) => {
    ctx.font=`${font} Microsoft YaHei`;
    ctx.fillStyle = color;
    ctx.textAlign = 'center';  // 修改为居中对齐
    ctx.fillText(text, x, y);
    ctx.stroke();
    ctx.closePath();
  }

  renderShare () {
    const iconShare = require('@img/images/icon_g_share6s.png')
    return (
      <Button className="g-icon-share btn-to-div" onClick={this.drawAndShareImage.bind(this, 'normal')}>
        <Image className="img" src={iconShare} />
      </Button>
    )
  }

  renderShare2 () {
    const iconShare = require('@img/images/icon_g_share6s2.png')
    return (
      <Button className="g-icon-share b2 btn-to-div" onClick={this.drawAndShare2Image.bind(this, 'hide')}>
        <Image className="img" src={iconShare} />
      </Button>
    )
  }

  renderFixedTopLift () {
    const iconSignLeft = require('@img/icon_sign_left.png')
    return (
      <View className="g-fixed-top-left" onClick={this.goBackPrev.bind(this)}>
        <Image className="img" src={iconSignLeft} />
      </View>
    )
  }
  goBackPrev () {
    // 获取当前页面栈
    const pages = Taro.getCurrentPages()

    // 判断是否有上一页
    const hasPreviousPage = pages.length > 1

    if (hasPreviousPage) {
      // 如果有上一页，使用 navigateBack 返回至上一页
      Taro.navigateBack({
        delta: 1,
      })
    } else {
      // 若无上一页，可以导航至指定的其它页面或首页
      Taro.navigateTo({
        url: '/pages/index/index',
      })
    }
  }










  renderOptionsDkSchool () {
    const { curObj } = this.state
    return (
      <View className="dtl-options scoped-school">
        <View className="do-title">
          <View className="t">对口学校</View>
          <View className="r2">注:目前该楼盘在此学区中</View>
        </View>
        {this.renderDkSchool()}
      </View>
    )
  }
  renderDkSchool () {
    const { curObj } = this.state
    const dictData = Taro.getStorageSync('dictData')
    const arr = curObj.school_list && curObj.school_list.duikou || []
    const curItems = arr.map((item, index) => {
      return (
        <Navigator url={'/pagesSchool/indexDtl?id=' + item.id} className="lb-item" key={index}>
          <View className="lb-img">
            <Image className="img" src={item.pri_image + '_xs'} />
          </View>
          <View className="lb-info">
            <View className="lb-p1">{item.school_name}</View>
            <View className="lb-p2">{item.address}</View>
            <View className="lb-tag">
              <View className="t t1">{arrToObj(dictData.school_attrib)[item.school_attrib]}</View>
              <View className="t t4">{arrToObj(dictData.school_type)[item.school_type]}</View>
            </View>
          </View>
        </Navigator>
      )
    })
    return (
      <View className="l-list-box t2">
        {curItems}
      </View>
    )
  }






  render () {
    const userInfo = Taro.getStorageSync('APP_userInfo') || {}
    const { curObj } = this.state
    return (
      <View className="l-box has-footer">
        {this.renderFixedTopLift()}
        {this.renderHeader()}
        {this.renderMain()}
        {this.renderImg()}
        {this.renderAround()}
        {this.renderOptionsDkSchool()}
        {(curObj.es_house_list && curObj.es_house_list.length > 0) && this.renderOther()}
        {this.renderSale()}
        {this.renderPopup()}
        {this.renderShare()}
        {userInfo.is_sale == 1 ? this.renderShare2() : ''}
      </View>
    )
  }
}

export default Index