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

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

// 获取应用实例
Page({
  /**
   * 页面的初始数据
   */
  data: {
    status: 'WAIT_PAY',
    statusList: {
      WAIT_PAY: {
        logo: './images/ing.png',
        title: '等待付款',
        content: '为了确保您的订单顺利进行，请尽快完成支付'
      },
      PAID: {
        logo: './images/success.png',
        title: '已完成',
        content: '登录「音乐数字课堂」APP，开启AI学练之旅～'
      },
      CLOSED: {
        logo: './images/error.png',
        title: '已取消',
        content: '您的订单已被关闭，如有需要请重新下单'
      },
      WAIT_USE: {
        logo: './images/wait.png',
        title: '待使用',
        content: '为了顺利使用，请尽快扫描下方二维码进行激活'
      },
      REFUNDING: {
        logo: './images/refounding.png',
        title: '退款中',
        content: '您的订单正在退款中，预计7个工作日内审核完'
      },
      REFUNDED: {
        logo: './images/refounded.png',
        title: '已退款',
        content: '您的订单已成功退款，感谢您的耐心等待'
      }
    },
    timerCount: 0,
    timer: null as any,
    goodsInfo: {} as any,
    orderNo: "" as string,
    showCanvas: false, // 是否显示二维码
    canvasImg: "" as string,
    refoundStatus: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options: any) {
    if (options.orderNo) {
      this.setData({
        orderNo: options.orderNo
      }, () => {
        this.getDetail(this.onTimeout)
      });
    }
  },
  async getDetail(callback?: any) {
    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,
            shortUrl: item.activationCodeInfo.shortUrl,
            originalPrice: this.formatPrice(item.paymentCashAmount, 'ALL'),
            typeName: this.formatPeriod(item.activationCodeInfo?.times || 1, item.activationCodeInfo.type)
          })
        })
        let refundStyleStr = ''
        if(result.refundStyle === 'TURN_BACK') {
          refundStyleStr = '原路返回'
        } else if(result.refundStyle === 'OFFLINE') {
          refundStyleStr = '线下'
        }
        const goodsInfo = {
          orderNo: result.orderNo,
          createTime: result.createTime,
          wechatStatus: result.wechatStatus,
          goods: tempGoods,
          refundOrderId: result.refundOrderId,
          refundTime: result.refundTime,
          refundAmount: this.formatPrice(result.refundAmount || 0, 'ALL'),
          refundStyleStr
        }
        this.setData({
          goodsInfo,
          status: result.wechatStatus
        }, () => {
          callback && typeof callback === 'function' && callback()
        })
        if(result.wechatStatus != 'CLOSED' || result.wechatStatus != 'WAIT_PAY') {
          const firstGoods = tempGoods[0]
          if(firstGoods?.shortUrl) {
            this.setData({
              showCanvas: true
            }, () => {
              this.createQrCode(firstGoods?.shortUrl, '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 () {
    const size = {} as any;
    try {
      const res = wx.getWindowInfo()
      const scale = 750 / 300; //不同屏幕下canvas的适配比例；设计稿是750宽
      const width = res.windowWidth / scale;
      const 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();
    drawQrcode({
      width: size.w,
      height: size.h,
      canvasId: canvasId,
      text: content,
      callback: () => {
        // 安卓机上不准确，生成的二维码无法扫描，加延时解决
        setTimeout(() => {
          wx.canvasToTempFilePath(
            {
              canvasId: canvasId,
              success: (res) => {
                this.setData({
                  canvasImg: res.tempFilePath,
                });
              },
            },
            this
          );
        }, 500);
      },
    });
  },
  onTimeout() {
    // 轮询10次查询订单状态
    const goodsInfo = this.data.goodsInfo
    const timerCount = this.data.timerCount
    const timer = this.data.timer
    if(goodsInfo.wechatStatus === 'WAIT_PAY' && timerCount <= 10) {
      let count = timerCount
      const tempT = setTimeout(async () => {
        count += 1
        await this.getDetail()
        this.setData({
          timer: tempT,
          timerCount: count
        }, () => {
          this.onTimeout()
        })
      }, 3000);
    } else {
      clearTimeout(timer)
    }
  },
  openService() {
    wx.navigateTo({
      url: '../service/service'
    })
  },
  /** 申请退款 */
  async cancelRefound() {
    try {
      const {data} = await api_userPaymentCancelRefund(this.data.goodsInfo.refundOrderId)
      // console.log(data, 'data')
      if(data.code == 200) {
        wx.showToast({ title: '取消退款成功', icon: 'none' })
        // setTimeout(() => {
        //   wx.navigateBack({
        //     delta: 1
        //   })
        // }, 1000);
        this.getDetail()
      } else {
        wx.showToast({ title: data.message, icon: 'none' })
      }
    } catch {}
  },
  /** 申请退款 */
  useRefound() {
    this.setData({
      refoundStatus: true
    })
  },
  changeRefoundStatus(e: {detail: any}) {
    this.setData({
      refoundStatus: e.detail
    })
  },
  onRefoundComfirm() {
    this.setData({
      refoundStatus: false
    })
    // wx.navigateBack({
    //   delta: 1
    // })
    this.getDetail()
  },
  onCopy(e: { currentTarget: any }) {
    wx.setClipboardData({
      data: e.currentTarget.dataset.orderno,
      success: () => {
        wx.showToast({title: '复制成功', icon: 'none'})
      },
      fail: () => {
        wx.showToast({title: '复制失败，请稍后再试', icon: 'none'})
      }
    })
  }
})