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: {
    serviceShow: true,
    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,
    refoundValue: "", // 退款内容
    refoundPhone: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options: any) {
    if (options.orderNo) {
      this.setData({
        orderNo: options.orderNo
      }, () => {
        this.getDetail(this.onTimeout)
      });
    }
  },
  onShow() {
    this.setData({
      serviceShow: true
    })
  },
  onHide() {
    this.setData({
      serviceShow: false
    })
  },
  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 () {
    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;
  },
  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)
    }
  },
  /** 申请退款 */
  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);
      } else {
        wx.showToast({ title: data.message, icon: 'none' })
      }
    } catch {}
  },
  /** 申请退款 */
  useRefound() {
    this.setData({
      refoundStatus: true,
      refoundValue: ""
    })
  },
  textareaInput(e: { detail: any }) {
    this.setData({
      refoundValue: e.detail.value
    })
  },
  phoneInput(e: {detail: any}) {
    this.setData({
      refoundPhone: e.detail.value
    })
  },
  onRefoundClose() {
    this.setData({
      refoundStatus: false,
      refoundValue: ''
    })
  },
  checkPhone(phone: string) {
    const phoneRule =
      /^((13[0-9])|(14(0|[5-7]|9))|(15([0-3]|[5-9]))|(16(2|[5-9]))|(17[0-8])|(18[0-9])|(19([0-3]|[5-9])))\d{8}$/;
    return phoneRule.test(phone);
  },
  async onRefound() {
    const refoundValue = this.data.refoundValue
    const refoundPhone = this.data.refoundPhone
    if(!refoundValue) {
      wx.showToast({ title: '请输入退款原因', icon: 'none' })
      return
    }
    if(!this.checkPhone(refoundPhone)) {
      wx.showToast({ title: '请输入正确的手机号码', icon: 'none' })
      return
    }
    try {
      const { goods, orderNo } = this.data.goodsInfo
      const details: any = []
      goods.forEach((item: any) => {
        details.push({
          num: item.goodsNum,
          onlyRefund: false,
          userPaymentOrderDetailId: item.id,
          refundAmount: item.currentPrice
        })
      })
      const params = {
        merOrderNo: orderNo,
        serviceCharge: false,
        refundReason: refoundValue,
        phone: refoundPhone, // 手机号
        serviceChargeFee: 0,
        userRefundOrderDetails: details
      }
      const {data} = await api_userPaymentOrderRefundPayment(params)
      if(data.code == 200) {
        wx.showToast({ title: '申请成功', icon: 'none' })
        this.setData({
          refoundStatus: false
        })
        setTimeout(() => {
          wx.navigateBack({
            delta: 1
          })
        }, 1000);
      } else {
        wx.showToast({ title: data.message, icon: 'none' })
      }
    } catch {}
  },
  onCopy(e: { currentTarget: any }) {
    console.log(e, 'e')
    wx.setClipboardData({
      data: e.currentTarget.dataset.orderno,
      success: () => {
        wx.showToast({title: '复制成功', icon: 'none'})
      },
      fail: () => {
        wx.showToast({title: '复制失败，请稍后再试', icon: 'none'})
      }
    })
  }
})