classroom-music-activation/miniprogram/pages/orders/order-result.ts

// pages/orders/order-detail.ts
import drawQrcode from "../../utils/weapp.qrcode.esm";
import { api_userPaymentOrderDetail } from "../../api/login";

// 获取应用实例
Page({
  /**
   * 页面的初始数据
   */
  data: {
    status: 'WAIT_PAY',
    statusList: {
      WAIT_PAY: {
        logo: './images/ing.png',
        title: '等待付款',
        content: '请尽快完成支付，以便我们为您处理订单'
      },
      SUCCESS: {
        logo: './images/success.png',
        title: '交易完成',
        content: '登录「音乐数字课堂」APP使用AI学练'
      },
      CLOSED: {
        logo: './images/error.png',
        title: '交易取消',
        content: '您的交易订单已关闭'
      },
      WAIT_USE: {
        logo: './images/wait.png',
        title: '等待使用',
        content: '请尽快扫描下方二维码进行激活'
      }
    },
    goodsInfo: {} as any,
    orderNo: "" as string,
    canvasImg: "" as string
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options: any) {
    if (options.orderNo) {
      this.setData({
        orderNo: options.orderNo
      }, () => {
        this.getDetail()
      });
    }
  },
  async getDetail() {
    try {
      const { data } = await api_userPaymentOrderDetail(this.data.orderNo);
      if (data.code == 200) {
        const result = data.data || {}
        const goodsInfos = result.goodsInfos || []
        const tempGoods: any = []
        goodsInfos.forEach((item: any) => {
          tempGoods.push({
            ...item,
            originalPrice: this.formatPrice(item.paymentCashAmount, 'ALL'),
            typeName: this.formatPeriod(item.goodsNum, item.activationCodeInfo.type)
          })
        })
        const goodsInfo = {
          orderNo: result.orderNo,
          createTime: result.createTime,
          wechatStatus: result.wechatStatus,
          goods: tempGoods
        }
        this.setData({
          goodsInfo,
          status: result.wechatStatus
        })
        if(result.wechatStatus != 'CLOSED') {
          this.createQrCode(
            'https://www.baidu.com/',
            'canvasCode')
        }
      }
    } catch (error) {
      console.log(error, "error");
    }
  },
  // 格式化价格
  formatPrice(price: number, type?: string) {
    const amountStr = price.toFixed(2)
    const [integerPart, decimalPart] = amountStr.split('.');
    if(type === 'ALL') {
      return amountStr
    }
    return {
      integerPart,
      decimalPart
    }
  },
  // 格式化类型
  formatPeriod(num: number, type: string) {
    const template: any = {
      DAY: "天卡",
      MONTH: "月卡",
      YEAR: "年卡"
    }
    if(type === "YEAR" && num >= 99) {
      return '终生卡'
    }
    return num + template[type]
  },
  onSubmit() {
    wx.redirectTo({
      url: '../index/index'
    })
  },
  setCanvasSize: function () {
    var size = {} as any;
    try {
      const res = wx.getWindowInfo()
      var scale = 750 / 262; //不同屏幕下canvas的适配比例；设计稿是750宽
      var width = res.windowWidth / scale;
      var height = width; //canvas画布为正方形
      size.w = width;
      size.h = height;
    } catch (e) {
      // Do something when catch error
      console.log("获取设备信息失败" + e);
    }
    return size;
  },
  setLogoSize() {
    var size = {} as any;
    try {
      var res = wx.getSystemInfoSync();
      var scale = 750 / 48; //不同屏幕下canvas的适配比例；设计稿是750宽
      var width = res.windowWidth / scale;
      var height = width; //canvas画布为正方形
      size.w = width;
      size.h = height;
    } catch (e) {
      // Do something when catch error
      console.log("获取设备信息失败" + e);
    }
    return size;
  },
  createQrCode(content: any, canvasId: any) {
    const size = this.setCanvasSize();
    // const logoSize = this.setLogoSize();
    drawQrcode({
      width: size.w,
      height: size.h,
      canvasId: canvasId,
      // ctx: wx.createCanvasContext('myQrcode'),
      text: content,
      // v1.0.0+版本支持在二维码上绘制图片
      // image: {
      //   imageResource: "./images/codeLogo.png",
      //   dx: (size.w - logoSize.w) / 2,
      //   dy: (size.h - logoSize.h) / 2,
      //   dWidth: logoSize.w,
      //   dHeight: logoSize.h,
      // },
      callback: () => {
        // 安卓机上不准确，生成的二维码无法扫描，加延时解决
        setTimeout(() => {
          wx.canvasToTempFilePath(
            {
              canvasId: canvasId,
              success: (res) => {
                this.setData({
                  canvasImg: res.tempFilePath,
                });
              },
            },
            this
          );
        }, 500);
      },
    });
  },
})