Haowmt_wxapp/pages/order_receipt/index.js

// pages/order_receipt/index.js
import { getUserInfo } from '../../api/user.js';
import { getOrderDetail } from '../../api/order.js';
const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    parameter: {
      'navbar': '1',
      'return': '1',
      'title': '订单回执',
    },
    show: true,
    // orderId:'wx159384742516922741',
    orderId: ' ',
    cartInfo: [],//购物车产品
    orderInfo: { system_store: {} },//订单详情
    windowW: '',
    windowH: '',
    order_id: '',
    img: ''
  },
  /**
  * 登录回调
  * 
 */
  onLoadFun: function () {
    this.getOrderInfo();
    this.setData({
      show: true
    })

  },
  /**
     * 获取订单详细信息
     * 
    */
  getOrderInfo: function () {

    var that = this;
    wx.showLoading({ title: "正在加载中" });

    getOrderDetail(that.data.orderId).then(res => {
      var e = res.data;
      that.CreateCanvas(e)
      // console.log(productimg)
      wx.hideLoading();
      that.setData({
        orderInfo: res.data,
        order_id: res.data.order_id,
        cartInfo: res.data.cartInfo,
        evaluate: _type == 3 ? 3 : 0,
        system_store: res.data.system_store
      });

    }).catch(err => {
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    var orderId =options.orderId;
    that.setData({
      orderId:orderId
    })
    // 获取设备宽高，以备海报全屏显示
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          windowW: res.windowWidth,
          windowH: res.windowHeight
        })
      },
    })

    // 海报背景图线上地址
    var url = '/images/bg.png'
    // 头部背景图片
    var urll = '/images/receipt_bgcolor.png'
    var orderimg = '/images/icon_receipt.png'
    var adressimg = '/images/address_icon_location.png'
    that.setData({
      bgpic: url
    })

    // that.getBG(urll).then(function (locationData) {
    that.setData({
      propic: urll
    })
    that.setData({
      orderimg: orderimg
    })
    that.setData({
      adressimg: adressimg
    })
    // })


  },
  CreateCanvas: function (e) {
    var that = this;
    var productimg = e.cartInfo[0].productInfo.image;
    console.log(productimg);
    that.getBG(productimg).then(function (locationData) {
      that.setData({
        product: locationData
      })
      that.drawCanvas(e)
    })

  },
  // 绘制canvas
  drawCanvas(e) {
    var that = this

    var windowW = that.data.windowW
    var windowH = that.data.windowH
    var text = e.cartInfo[0].productInfo.store_name
    if (e.cartInfo[0].productInfo.attrInfo == undefined) {
      var texta = '';
      console.log("1")
    } else {
      var texta = e.cartInfo[0].productInfo.attrInfo.suk;
      console.log("2")
    }

    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createCanvasContext('firstCanvas')

    // 海报背景图
    context.drawImage(that.data.bgpic, (windowW - 380) / 2, (windowH - 560) / 2, 380, 580)
    // 商品图片
    context.drawImage(that.data.propic, (windowW - 380) / 2, (windowH - 560) / 2, 380, 125)
    //支付成功icon
    context.drawImage(that.data.orderimg, (windowW - 340) / 2, (windowH - 530) / 2, 36, 36)
    //地址icon
    context.drawImage(that.data.adressimg, (windowW - 348) / 2, (windowH - 250) / 2, 15, 20)

    // context.drawImage(that.data.product, (windowW - 348) / 2, (windowH - 250) / 2, 15, 20)
    context.drawImage(that.data.product, (windowW - 348) / 2, (windowH - 45) / 2, 85, 85)
    // 商品文字描述
    context.setFontSize(20)
    context.setFillStyle("#fff")
    context.fillText('下单成功', (windowW - 240) / 2, (windowH - 480) / 2)

    context.setFontSize(16)
    context.setFillStyle("#fff")
    context.fillText('订单号', (windowW - 340) / 2, (windowH - 405) / 2)

    context.setFontSize(16)
    context.setFillStyle("#fff")
    context.fillText(e.order_id, (windowW - 180) / 2, (windowH - 405) / 2)

    context.setFontSize(16)
    context.setFillStyle("#fff")
    context.fillText('下单时间', (windowW - 340) / 2, (windowH - 345) / 2)


    context.setFontSize(16)
    context.setFillStyle("#fff")
    context.fillText(e._add_time, (windowW - 180) / 2, (windowH - 345) / 2)

    context.font = 'bold 1px sans-serif'
    context.setFontSize(16)
    context.setFillStyle("#333333")
    context.fillText(e.real_name, (windowW - 270) / 2, (windowH - 245) / 2)

    context.font = 'normal 1px sans-serif'
    context.setFontSize(14)
    context.setFillStyle("#333333")
    context.fillText(e.user_phone, (windowW - 170) / 2, (windowH - 245) / 2)

    context.setFontSize(14)
    context.setFillStyle("#CCCCCC")
    context.fillText(e.user_address, (windowW - 270) / 2, (windowH - 188) / 2)

    context.setFontSize(10)
    context.setFillStyle("#727C8E")
    // context.fillText('￥99.99', (windowW + 50) / 2, (windowH + 55) / 2)
    context.setLineWidth(0.1)
    context.moveTo((windowW - 350) / 2, (windowH - 145) / 2); //设置线条的起始路径坐标
    context.lineTo((windowW + 350) / 2, (windowH - 145) / 2); //设置线条的终点路径坐标
    context.stroke(); //对当前路径进行描边

    context.font = 'bold 1px sans-serif'
    context.setFontSize(16)
    context.setFillStyle("#333333")
    context.fillText('商品', (windowW - 345) / 2, (windowH - 80) / 2)

    // 商品名字，名字很长调用方法将文字折行，传参 文字内容text，画布context
    var row = that.newLine(text, context)
    var a = 24//定义行高25
    for (var i = 0; i < row.length; i++) {
      context.font = 'normal 1px sans-serif'
      context.setFontSize(16)
      context.setFillStyle("#333333")
      context.fillText(row[i], (windowW - 150) / 2, (windowH - 0) / 2 + a * i, 320)
    }

    context.setFontSize(13)
    context.setFillStyle("#999999")
    context.fillText(texta, (windowW - 150) / 2, (windowH + 100) / 2)

    context.setFontSize(10)
    context.setFillStyle("#727C8E")
    // context.fillText('￥99.99', (windowW + 50) / 2, (windowH + 55) / 2)
    context.setLineWidth(0.1)
    context.moveTo((windowW - 350) / 2, (windowH + 170) / 2); //设置线条的起始路径坐标
    context.lineTo((windowW + 350) / 2, (windowH + 170) / 2); //设置线条的终点路径坐标
    context.stroke(); //对当前路径进行描边 

    context.setFontSize(15)
    context.setFillStyle("#B1B1B1")
    context.fillText('商品数量', (windowW - 350) / 2, (windowH + 240) / 2)

    context.setFontSize(15)
    context.setFillStyle("#1D1D1D")
    context.fillText("x" + e.cartInfo[0].cart_num, (windowW + 290) / 2, (windowH + 240) / 2)

    context.setFontSize(15)
    context.setFillStyle("#B1B1B1")
    context.fillText('商品总额', (windowW - 350) / 2, (windowH + 320) / 2)

    context.setFontSize(15)
    context.setFillStyle("#1D1D1D")
    context.fillText("￥" + e.cartInfo[0].now_price, (windowW + 200) / 2, (windowH + 320) / 2) 

    context.setFontSize(15)
    context.setFillStyle("#B1B1B1")
    context.fillText('实际付款', (windowW - 350) / 2, (windowH + 390) / 2)

    context.setFontSize(18)
    context.setFillStyle("#D0021B")
    context.fillText("￥" + e.pay_price, (windowW + 180) / 2, (windowH +390) / 2) 
    context.draw() 
  },
 
  // 点击保存按钮，同时将画布转化为图片
  daochu: function () {
    var that = this;
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      canvasId: 'firstCanvas',
      fileType: 'jpg',
      quality: 1,
      success: function (res) {
        that.setData({
          shareImage: res.tempFilePath
        })
        setTimeout(function () {
          wx.showModal({
            title: '提示',
            content: '将生成的海报保存到手机相册，可以发送给微信好友或分享到朋友圈',
            success(res) {
              if (res.confirm) {
                that.eventSave()
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
        }, 1000)
      }
    }) 
  },

  // 将商品分享图片保存到本地
  eventSave() {
    wx.saveImageToPhotosAlbum({
      filePath: this.data.shareImage,
      success(res) {
        wx.showToast({
          title: '保存图片成功',
          icon: 'success',
          duration: 2000
        })
      }
    })
  },

  //将线上图片地址下载到本地，此函数进行了封装，只有在需要转换url的时候调用即可
  getBG(url) {
    console.log(url + '111')
    // Promise函数给我很大的帮助，让我能return出回调函数中的值
    return new Promise(function (resolve) {
      wx.downloadFile({
        url: url,
        success: function (res) {
          url = res.tempFilePath
          resolve(url);
          console.log(url)
        }
      })
    })
  },

  // canvas多文字换行
  newLine(txt, context) {
    var txtArr = txt.split('')
    var temp = ''
    var row = []
    for (var i = 0; i < txtArr.length; i++) {
      if (context.measureText(temp).width < 210) {
        temp += txtArr[i]
      } else {
        i--
        row.push(temp)
        temp = ''
      }
    }
    row.push(temp)

    //如果数组长度大于3 则截取前三个
    if (row.length > 2) {
      var rowCut = row.slice(0, 2);
      var rowPart = rowCut[1];
      var test = "";
      var empty = [];
      for (var a = 0; a < rowPart.length; a++) {
        if (context.measureText(test).width < 0) {
          test += rowPart[a];
        } else {
          break;
        }
      }
      empty.push(test);
      var group = empty[0]  //这里只显示三行，超出的用...表示
      rowCut.splice(2, 1, group);
      row = rowCut;
    }

    return row
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    var that = this

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  }
})