haowanShow/miniprogram/pages/shared/shared.js

import {
  VueLikePage
} from '../../utils/page'
import CompanyApi from './../../apis/company'

VueLikePage([], {
  data: {
    shared_img: '',
    recommend_text: '',
    editShowStatus: false,
    imgLoaded: false
  },
  methods: {
    onLoad: async function (options) {
      console.log(options)
      const { img_url, companyId, vrLink, shareImg } = options
      this.companyId = companyId
      this.vrLink = vrLink
      this.shareCodeImg = decodeURIComponent(shareImg)
      this.setData({
        shared_img: decodeURIComponent(img_url)
      })
      await this.getCompanyDetail()
      const query = wx.createSelectorQuery()
      query.select('.canvas').boundingClientRect().exec(res => {
        this.canvas_width = res[0].width
        this.canvas_height = res[0].height
        this.drawImage()
      })
    },
    onReady() {
      
    },
    getCompanyDetail () {
      CompanyApi.getCompanyDetail(this.companyId).then(res => {
        console.log(res, 'company')
        this.setData({
          company: res.data
        })
      })
    },
    showEdit () {
      this.setData({
        editShowStatus: true
      })
    },
    hideEdit () {
      this.setData({
        editShowStatus: false
      })
    },
    bindinput (e) {
      const { value } = e.detail
      this.setData({
        recommend_text: value
      })
    },
    onShareAppMessage () {
      return {
        title: this.data.company.companyName,
        path:  `/pages/web/web?vr_link=${this.vrLink}`,
        imageUrl: this.data.shared_img + '?x-oss-process=image/resize,m_fill,h_510,w_510'
      }
    },
    copyLink () {
      wx.setClipboardData({
        data: decodeURIComponent(this.vrLink),
        success (res) {
          wx.showToast({
            title: '复制成功',
          })
        }
      })
    },
    savePhoto () {
      wx.saveImageToPhotosAlbum({
        filePath: this.data.img_url,
        success(res) {
          wx.showModal({
            title: '图片保存成功',
            content: '图片成功保存到相册了，去发圈噻~',
            showCancel: false,
            confirmText: '好哒',
            confirmColor: '#72B9C3',
            success: (res) => {
              if (res.confirm) {
              }
            }
          })
        }
      })
    },
    async drawImage(recommend_text) {
      this.context = wx.createCanvasContext('content')
      this.context.lineJoin = 'miter'
      this.context.font = '15px bold'
      this.context.setFillStyle('#fff')
      this.context.fillRect(0, 0, this.canvas_width, this.canvas_height)
      const dpr = wx.getSystemInfoSync().pixelRatio
      let cover = await this.downloadFile(this.data.shared_img + '?x-oss-process=image/resize,m_fill,h_510,w_510')
      let shareCode = await this.downloadFile(this.shareCodeImg)
      const img_width = this.canvas_width * 0.8644,
            img_height = this.canvas_width * 0.8644
          const left = (this.canvas_width - img_width) / 2
          // 画圆弧矩形
          this.strokeRoundRect((this.canvas_width - img_width) / 2, (this.canvas_width - img_width) / 2, img_width, img_height, 4)
          this.context.clip()
          this.context.drawImage(cover, 0, 0, img_width, img_height)
          this.context.restore()
          this.context.fillStyle = '#131D34'
          this.context.font = '15px bold'
          this.context.fillText(this.data.company.companyName, left, img_width + left + this.canvas_height * 15 / 460 + 21)
          this.context.restore()
          this.context.font = '13px bold'
          this.context.fillStyle = '#79868F'
          let recommend_text1, recommend_text2
          if (recommend_text) {
            recommend_text1 = recommend_text.slice(0,11)
            recommend_text2 = recommend_text.slice(11)
          }
          this.context.fillText(recommend_text1 || '我的个性推荐语', left, img_width + left + this.canvas_height * 15 / 460 + 18 + 21)
          if (recommend_text2) {
            this.context.fillText(recommend_text2 || '我的个性推荐语', left, img_width + left + this.canvas_height * 15 / 460 + 18 + 21 + 21)
          }
          
          this.context.font = '12px bold'
          this.context.fillStyle = '#000'
          this.context.drawImage(shareCode, left, img_width + left + this.canvas_height * 92 / 460 + 10, 60, 60)
          this.context.fillText('3D实景拍摄', left + 80, img_width + left + this.canvas_height * 92 / 460 + 20)
          this.context.fillText('掌上全方位了解企业', left + 80, img_width + left + this.canvas_height * 92 / 460 + 40)
          this.context.fillText('长按识别二维码进入展厅', left + 80, img_width + left + this.canvas_height * 140 / 460 + 17)

          this.context.draw(false, () => {
            wx.canvasToTempFilePath({
              x: 0,
              y: 0,
              width: this.canvas_width,
              height: this.canvas_height,
              canvasId: 'content',
              success: (res) => {
                this.setData({
                  img_url: res.tempFilePath
                })
                setTimeout(() => {
                  this.setData({
                    imgLoaded: true
                  }, 200)
                })
              }
            })
          })
          this.context.fill()
          this.context.restore()
    },
    submitRecommend() {
      this.drawImage(this.data.recommend_text)
      this.hideEdit()
    },
    strokeRoundRect(x, y, width, height, radius, /*optional*/ lineWidth, /*optional*/ strokeColor) {
      //圆的直径必然要小于矩形的宽高          
      if (2 * radius > width || 2 * radius > height) {
        return false;
      }

      this.context.save();
      this.context.translate(x, y);
      //绘制圆角矩形的各个边  
      this.drawRoundRectPath(width, height, radius);
      this.context.lineWidth = 0; //若是给定了值就用给定的值否则给予默认值2  
      this.context.strokeStyle = strokeColor || "#fff";
      this.context.stroke();

    },
    drawRoundRectPath(width, height, radius) {
      this.context.beginPath(0);
      //从右下角顺时针绘制，弧度从0到1/2PI  
      this.context.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

      //矩形下边线  
      this.context.lineTo(radius, height);

      //左下角圆弧，弧度从1/2PI到PI  
      this.context.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

      //矩形左边线  
      this.context.lineTo(0, radius);

      //左上角圆弧，弧度从PI到3/2PI  
      this.context.arc(radius, radius, radius, Math.PI, Math.PI * 3 / 2);

      //上边线  
      this.context.lineTo(width - radius, 0);

      //右上角圆弧  
      this.context.arc(width - radius, radius, radius, Math.PI * 3 / 2, Math.PI * 2);

      //右边线  
      this.context.lineTo(width, height - radius);
      this.context.closePath();
    },
    downloadFile (url) {
      return new Promise(resolve => {
        wx.downloadFile({
          url: url,
          success (res) {
            resolve(res.tempFilePath)
          }
        })
      })
    }
  }
})