微信小程序 分享海報

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();
  }
})