微信小程序 分享海报

const app = getApp();
const template = require('../../template/templates.js');
Page({
  /**
   * 页面的初始数据
   */
  data: {
    hidden: true,
    dataList: {
      img_bg: '../../img/share_picture/shareListPicbg1.jpg',
      title: '',
      img: '',
      qrCodeUrl: '',
      plusPrice: null, //PLUS价格
      faceValue: null, //代金券面值

    },
    referrerVOid: null,
    saveImgBtnHidden: false,
    openSettingBtnHidden: true,
    referrerVOidShow: ""
  },
  getVouchersId: function(vouchersId) {
    wx.request({
      url: app.data.urls + 'vouchers/detail/id',
      data: vouchersId,
      method: "POST",
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: (res) => {
        console.log(res)
        let dataList = this.data.dataList,
          data = {
            status: 1,
            customerId: app.data.customerId,
            type: 1
          }
        dataList.name = res.data.data.restaurant.name;
        if (dataList.name.length > 10) {
          dataList.name = `${dataList.name.substr(0, 9)}...`;
        }
        let payMoney = res.data.data.deductionPrice / 100,
          useDiscountPrice = res.data.data.useDiscountPrice / 100;
        //plus价格
        let price = res.data.data.vipcardPrice / 100;  
        //地址  和电话
        let address = res.data.data.restaurant.address;    
        let moblie = `电话：${res.data.data.restaurant.moblie}`; 
        dataList.address = address
        dataList.moblie = moblie
         
        dataList.content = `立省${payMoney - price}元`;
        dataList.originalCost = `原价:${payMoney}元`;
        dataList.realPrice = `${price}元`;
        dataList.useDiscountPrice = `( 消费满${useDiscountPrice}元可用 )`;
        dataList.deductionPriceShow = `${payMoney}元代金券`;
        template.getDistributorMsg(data, res => {
          console.log(res)
          this.setData({
            plusPrice: price,
            faceValue: payMoney,
            referrerVOidShow: res.data.data.referrerVO.id,
            // referrerVOid: res.data.data.referrerVO.id
          })
          this.referrerGenQRCode(vouchersId, res.data.data.referrerVO.id, res => {
            // 获取店铺或者二维码
            console.log(res)
            let qrCodeUrl = `https://www.yooeepoint.com.cn${res.data.localQrCodeUrl}`; //  小程序二维码
            let img = `https://www.yooeepoint.com.cn${res.data.localTitleImageUrl}` // 店铺图片
            //背景图片
            let vouchers_background = 'https://www.yooeepoint.com.cn/images/vouchers_background.png'
           
            this.downLoadImage(qrCodeUrl, res => { // 网络图片下载本地(canvas限制图片使用本地路径)
              dataList.qrCodeUrl = res.tempFilePath;
              this.downLoadImage(img, res => {
                dataList.img = res.tempFilePath;
                this.downLoadImage(vouchers_background, res => {
                  dataList.vouchers_background = res.tempFilePath; //背景图片
                  this.getSystemInfo(res => {
                    dataList.windowWidth = res.windowWidth
                    dataList.windowHeight = res.windowHeight
                    this.creatCanvas(dataList);
                  })

                })

              })
            })

          })
        })
      }
    })
  },
  // 绘制分享图片
  creatCanvas: function(data) {
 
    const ctx = wx.createCanvasContext('shareImg');
    //背景图
    // ctx.setFillStyle('#fff')
    // ctx.fillRect(0, 0, data.windowWidth, data.windowHeight * 0.78)
    ctx.drawImage(data.vouchers_background, 0, 0, data.windowWidth, data.windowHeight);
    //banner图
    //banner图
    ctx.drawImage(data.img, 0, 10, data.windowWidth, data.windowHeight * 0.315);
    //店铺名称
    ctx.setFontSize(data.windowWidth / (750 / 35));
    ctx.setTextAlign('center');
    ctx.setFillStyle('#000000');
    ctx.fillText(data.name, data.windowWidth / 2, data.windowHeight * 0.39 + 6);
    //多少元代金券
    ctx.setFontSize(data.windowWidth / (750 / 30));
    ctx.setTextAlign('center');
    ctx.setFillStyle('#000000');
    ctx.fillText(data.deductionPriceShow, data.windowWidth / 2, data.windowHeight * 0.39 + 30);

    // 满减条件
    ctx.setFillStyle('#000000');
    ctx.setFontSize(data.windowWidth / (750 / 25));
    ctx.fillText(data.useDiscountPrice, data.windowWidth / 2, data.windowHeight * 0.39 + 45);



    //原价
    ctx.setFontSize(data.windowWidth / (750 / 22));
    ctx.setFillStyle('#666666');
    ctx.fillText(data.originalCost, data.windowWidth / 2 + 120, data.windowHeight * 0.50);

    // 立省
    ctx.setFillStyle('#f10c0c');
    ctx.setFontSize(data.windowWidth / (750 / 22));
    ctx.fillText(data.content, data.windowWidth / 2 + 120, data.windowHeight * 0.50+ 15);

    // plus价   
    ctx.setFontSize(data.windowWidth / (750 / 55));
    ctx.setFillStyle('#f10c0c');
    ctx.fillText(data.realPrice, data.windowWidth / 2, data.windowHeight * 0.60-15 );

    // 地址和电话   
    ctx.setFontSize(data.windowWidth / (750 / 25));
    ctx.setFillStyle('#323232');
    ctx.fillText(data.address, data.windowWidth / 2, data.windowHeight *0.60+15);

    ctx.setFontSize(data.windowWidth / (750 / 20));
    ctx.setFillStyle('#323232');
    ctx.fillText(data.moblie, data.windowWidth / 2, data.windowHeight *0.60+35);
    
    // 二维码图
    ctx.drawImage(data.qrCodeUrl, data.windowWidth * 0.38-2, data.windowHeight * 0.73, data.windowWidth * 0.25, data.windowWidth * 0.25);

    // tip
    ctx.setTextAlign('center');
    ctx.setFillStyle('#fff');
    ctx.setFontSize(data.windowWidth / (750 / 22));
    ctx.fillText("长按识别图中小程序码购买", data.windowWidth / 2, data.windowHeight * 0.95);

    // tip
    ctx.setTextAlign('center');
    ctx.setFillStyle('#fff');
    ctx.setFontSize(data.windowWidth / (750 / 18));
    ctx.fillText("想要吃点喝点，首选搜城天下", data.windowWidth / 2, data.windowHeight * 0.97);

    //
    // ctx.setTextAlign('right');
    // ctx.setFillStyle('#282828');
    // ctx.setFontSize(data.windowWidth / (750 / 22));
    // ctx.fillText("长按识别二维码", data.windowWidth * 0.89, data.windowHeight * 0.60 + 35);
    //结束绘制/展示
    ctx.stroke();
    ctx.draw(false, () => {
      this.toShare();
    });
  },

  // 获取二维码/店铺图片
  referrerGenQRCode: function(vouchersId, referrerId, successCallBack) {
    let data = {
      referrerId: referrerId,
      serviceType: 3,
      vouchersId: vouchersId
    }
    wx.request({
      url: app.data.urls + `html5/toShareImagePage`,
      data: data,
      method: 'POST',
      success: (res) => {
        successCallBack(res)
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    wx.showLoading({
      title: '加载中',
      mask: true
    });
    console.log(options)

    this.getVouchersId(options.vouchersId)
    console.log(options.referrerId)
    this.setData({
      vouchersId: options.vouchersId,
      referrerVOid: options.referrerId,
      partnersId: options.partnersId,
      isFreeObtain: options.isFreeObtain,
      restaurantId: options.restaurantId
    })
    console.log(this.data.referrerVOid)
    // 初始化数据
  },

  // 动态设置画布宽高
  getSystemInfo: function(successCallBack) {
    wx.getSystemInfo({
      success: (res) => {
        successCallBack(res)
      }
    })
  },

  // 网络图片下载本地(canvas限制图片使用本地路径)
  downLoadImage: function(data, successCallBack) {
    wx.downloadFile({
      url: data,
      success: function(res) {
        successCallBack(res)
      }
    })

  },
  // 分享图片生成后展示
  toShare: function() {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      canvasId: 'shareImg',
      success: (res) => {
        console.log(res)
        wx.hideLoading();
        this.setData({
          prurl: res.tempFilePath,
          hidden: false
        })
      }
    })
  },
  // 分享图片保存到相册
  savePic: function() {
    let that = this
    wx.getSetting({
      success: res => {
        if (!res.authSetting['scope.writePhotosAlbum']) { //用户同意授权
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success: () => {
              this.saveImageToPhotosAlbum();
            },
            fail: () => { //这里是用户拒绝授权后的回调
              that.setData({
                saveImgBtnHidden: true,
                openSettingBtnHidden: false
              })
            }
          })
        } else { //用户已经授权过
          this.saveImageToPhotosAlbum();
        }
      }
    })
  },
  saveImageToPhotosAlbum: function() {
    wx.saveImageToPhotosAlbum({
      filePath: this.data.prurl,
      success(res) {
        this.onShareAppMessage()
      }
    })
  },
  handleSetting: function(e) {
    let that = this;
    // 对用户的设置进行判断，如果没有授权，即使用户返回到保存页面，显示的也是“去授权”按钮；同意授权之后才显示保存按钮
    if (!e.detail.authSetting['scope.writePhotosAlbum']) {
      wx.showModal({
        title: '提示',
        content: '若不打开授权，则无法将图片保存在相册中！',
        showCancel: false
      })
      that.setData({
        saveImgBtnHidden: true,
        openSettingBtnHidden: false
      })
    } else {
      wx.showModal({
        title: '提示',
        content: '您已授权，赶紧将图片保存在相册中吧！',
        showCancel: false
      })
      that.setData({
        saveImgBtnHidden: false,
        openSettingBtnHidden: true
      })
    }
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {
    // return {
    //   title: '【搜城天下】' + this.data.dataList.name,
    //   path: '/pages/goinSharePic/goinSharePic?vouchersId=' + this.data.vouchersId + "&referrerVOid=" + this.data.referrerVOid,
    //   imageUrl: this.data.prurl
    // }
    console.log("kankan" + this.data.referrerVOidShow)
    return {
      title: '【' + this.data.plusPrice + '元抢购】' + this.data.faceValue + '元代金券',
      path: '/pages/vouchersDetails/vouchersDetails?vouchersId=' + this.data.vouchersId + "&referrerId=" + this.data.referrerVOidShow + '&restaurantId=' + this.data.restaurantId + '&isFreeObtain=' + this.data.isFreeObtain + '&partnersId=' + this.data.partnersId,
      imageUrl: this.data.prurl
    }

  },
  onReady: function() {
    wx.hideLoading();
  }
})