livestream-miniapp/miniprogram/pages/share/share.ts

// pages/share/share.ts
import { shareRoom } from '../../api/shareRoom'
import { fetchRoom, fetchRoomMinCode, RoomDetailType } from '../../api/fetchRoom'

Page({

  /**
   * 初始数据
   */
  data: {
    shared_img: "",
    shareMiniCode: '',
    userInfo: {} as GlobalUserInfo,
    roomDetail: {} as RoomDetailType,
    roomId: '',
    canvas: {} as WechatMiniprogram.Canvas,
    canvasWidth: NaN,
    canvasHeight: NaN,
    context: {} as any,
    save_url: ''
  },

  onLoad(option: any) {
    console.log('query', option);
    const { id } = option
    if (id) {
      this.setData({
        roomId: id
      })
    } else {
      wx.showToast({
        title: "分享出错了~"
      })
    }
  },
  onReady() {
    this.handleCanvasInit()
  },

  async onShow() {
    const app = getApp<IAppOption>();
    this.setData({
      userInfo: app.globalData.userInfo
    })
    const roomInfo: RoomDetailType = await fetchRoom(this.data.roomId);
    console.log('roomInfo', roomInfo)
   
    if (!roomInfo.roomHostCode) {
      const url = await fetchRoomMinCode(this.data.roomId);
      if (url) {
        roomInfo.roomHostCode = url
      }

    }
 
    this.setData({
      roomDetail: roomInfo,
      shareMiniCode: roomInfo.roomHostCode,
      shared_img: roomInfo.roomCoverUrl,
    })


  },

  async loadImage(url: string): Promise<HTMLImageElement> {
    let src = await this.downloadFile(url)
    return new Promise((resolve, reject) => {
      const image = this.data.canvas.createImage();
      image.onload = () => resolve(image);
      image.onerror = reject;
      image.src = src;
    })
  },

  async handleSaveToAblum() {
    await this.drawCover();
    await this.drawDown();
    wx.showLoading({
      title: '保存中...',
    });
    setTimeout(() => {
      this.handleSaveCanvasToTmp();
    }, 1000)

  },
  async drawDown(): Promise<boolean> {
    try {
      const image = await this.loadImage(this.data.shareMiniCode);
      const top = this.data.canvasHeight * 0.7 + 20
      const left = this.data.canvasWidth - 110

      console.log('logo', image, top, left)
      this.data.context.drawImage(image, left, top, 100, 100);
      this.data.context.drawImage(image, left, top, 100, 100);
      //title

      this.data.context.font = 'normal 800 15px sans-serif'
      this.data.context.fillStyle = "#000";
      let title = this.data.roomDetail.roomTitle || '四维带看'
      if (title.length > 10) {
         let fistTitle =  String(title).substring(0,10) 
         let secTitle = String(title).substring(10,title.length) 
         this.data.context.fillText(fistTitle, 10, top + 20)
         this.data.context.fillText(secTitle, 10, top + 40)
      }else{

        this.data.context.fillText(title, 10, top + 20)
      }


      this.data.context.font = 'normal 400 12px sans-serif'
      this.data.context.fillStyle = "#000";
      this.data.context.fillText('语音云带看，邀您来参与', 10, top + 70)


      this.data.context.font = 'normal 200 10px sans-serif'
      this.data.context.fillStyle = "#666";
      this.data.context.fillText('长按识别二维码参与带看', 10, top + 90)

      this.data.context.restore()
      return Promise.resolve(true);
    } catch (error) {
      return Promise.resolve(false);
    }
  },

  async drawCover(): Promise<boolean> {
    console.log(' this.data.context', this.data.context)
    this.drawCard();
    const cover = await this.loadImage(this.data.shared_img);
    const img_width = this.data.canvasWidth * 0.8644,
      img_height = this.data.canvasHeight * 0.8644;
    // const left = (this.data.canvasWidth - img_width) / 2;
    const dpr = wx.getSystemInfoSync().pixelRatio
    console.log('cover', dpr, this.data.canvas, img_width, img_height);
    this.data.context.save()
    this.roundedImage(10, 10, this.data.canvasWidth - 20, this.data.canvasHeight * 0.7, 15);
    this.data.context.clip()
    this.data.context.drawImage(cover, 10, 10, this.data.canvasWidth - 20, this.data.canvasHeight * 0.7);
    this.data.context.restore()
    return Promise.resolve(true)
  },

  roundedImage(x: number, y: number, width: number, height: number, radius: number) {
    this.data.context.beginPath();
    this.data.context.moveTo(x + radius, y);
    this.data.context.lineTo(x + width - radius, y);
    this.data.context.quadraticCurveTo(x + width, y, x + width, y + radius);
    this.data.context.lineTo(x + width, y + height - radius);
    this.data.context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
    this.data.context.lineTo(x + radius, y + height);
    this.data.context.quadraticCurveTo(x, y + height, x, y + height - radius);
    this.data.context.lineTo(x, y + radius);
    this.data.context.quadraticCurveTo(x, y, x + radius, y);
    this.data.context.closePath();
  },


  downloadFile(url: string): Promise<string> {
    return new Promise(resolve => {
      wx.downloadFile({
        url: url,
        success(res) {
          resolve(res.tempFilePath)
        },
        async fail(res) {
          console.log('下载失败，再触发下载一次', res)
          wx.downloadFile({
            url: url,
            success(res) {
              resolve(res.tempFilePath)
            },
            fail() {
              console.log('二次下载失败', res)
              resolve('')
            }
          })

        }
      })
    })
  },

  async handleCanvasInit() {
    const query = wx.createSelectorQuery()
    query.select('#content')
      .fields({ node: true, size: true })
      .exec((res) => {
        console.log('res', res)
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio

        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr

        ctx.scale(dpr, dpr)
        this.setData({
          canvas: canvas,
          context: ctx,
          canvasWidth: res[0].width,
          canvasHeight: res[0].height
        })

      });
  },

  drawCard() {
    this.data.context.fillStyle = "#fff";
    this.data.context.fillRect(0, 0, this.data.canvas.width, this.data.canvas.height);


  },

  handleSaveCanvasToTmp() {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: this.data.canvasWidth,
      height: this.data.canvasHeight,
      canvas: this.data.canvas,
      success: (res) => {
        this.setData({
          save_url: res.tempFilePath
        }, () => {
          wx.saveImageToPhotosAlbum({
            filePath: this.data.save_url,
            success(res) {
              wx.showModal({
                title: '图片保存成功',
                content: '图片已保存到相册，快去分享吧~',
                showCancel: false,
                confirmText: '好的',
                confirmColor: '#72B9C3',
                success: (res) => {
                  if (res.confirm) { }
                }
              })
            }
          })
        })
        wx.hideLoading();

      }
    })
  },

  onShareAppMessage: function (res) {
    const roomId = this.data.roomId
    const userId = this.data.userInfo.wxUserId
    const isTour = this.data.isTour
    const newPicUrl = this.data.roomDetail.roomCoverUrl || 'http://video.cgaii.com/new4dage/images/images/home_2_a.jpg'

    

    const base = {
      imageUrl: newPicUrl,
      path: `/pages/room/room?roomId=${roomId}&role=customer&isTour=${isTour}`
    }
    if (roomId && userId) {
      shareRoom(roomId, userId);
    }

    console.error('share', base, roomId, userId);
    if (res.from === 'button') {
      this.setData({
        showShare: false
      })
      return {
        ...base,
        title: '【好友邀请】一起来带看吧！',
      }
    } else {
      return {
        ...base,
        title: '【好友邀请】一起来带看吧！',
      }
    }
  },

})