react-app-shell/activity/src/views/component/rabbit-pay-btn/index.js

react打包脚本和example, 这里的版本请忽略

// 功能方法>>>引用:
import React, { Component } from 'react';
import propTypes from 'prop-types';

// 公用方法 配置项 接口 枚举>>>引用:
import { message, myToast, wechatUtils, tools, monitor } from '../../../utils';
import { rabbitPageService } from '../../../service';
import { ORDER_ERROR_CODE } from '../../../constants';

/**
 * 魔小兔-按钮-支付功能组件
 */
export default class RabbitPayBtn extends Component {
  /**
   * 静态类型检验
   */
  static propTypes = {
    productId: propTypes.number,
    preCheck: propTypes.func,
    onSuccess: propTypes.func,
    onCancel: propTypes.func,
    onFail: propTypes.func
  };

  /**
   * 默认属性值
   */
  static defaultProps = {
    productId: '',
    // 前置校验 false | fun(): Promise<true|false>
    preCheck: () => {
      return Promise.resolve(true);
    },

    onSuccess: () => {},

    onCancel: () => {},

    onFail: () => {}
  };

  constructor(props) {
    super(props);
    this.throttleHandleClick = tools.throttle(this.handleClick, 1500); // 按钮事件节流
  }

  /**
   * 支付按钮唤起支付
   */
  handleClick = async () => {
    const { preCheck, productId, onCancel, onFail, onSuccess } = this.props;

    // 1. 前置校验
    if (preCheck) {
      const res = await preCheck();
      if (!res) {
        return;
      }
    }
    rabbitPageService
      .getRabbitOrderPay(productId)
      .then((wechatPayOptions) => {
        // 调用JS-SDK 唤起微信公众号支付
        wechatUtils.chooseWXPay({
          nonceStr: wechatPayOptions.nonceStr,
          package: wechatPayOptions.package,
          paySign: wechatPayOptions.paySign,
          signType: wechatPayOptions.signType,
          timestamp: wechatPayOptions.timestamp,
          success: () => {
            onSuccess && onSuccess(wechatPayOptions.orderNo);
          },
          cancel: () => {
            onCancel && onCancel();
          },
          fail: ({ msg }) => {
            message.error(msg);
            onFail && onFail();
          }
        });
      })
      .catch(({ code, msg }) => {
        switch (code) {
          case ORDER_ERROR_CODE.BIZ_ORDER_EXPIRYTIME_OVER:
            monitor.log('', '支付异常 >> 订单已过期');
            myToast.warning('亲！您的订单已过期');
            return;
          case ORDER_ERROR_CODE.BIZ_PARAM_ERR:
            monitor.log('', '支付异常 >> 请求参数错误');
            myToast.warning('请求参数错误');
            return;
          case ORDER_ERROR_CODE.BIZ_ORDER_HTTP_RESPONSE_IS_NULL:
            monitor.log('', '支付异常 >> 订单状态错误');
            myToast.warning('订单状态错误');
            return;
          case ORDER_ERROR_CODE.BIZ_PRODUCT_NOT_EXIST:
            monitor.log('', '支付异常 >> 商品不存在');
            myToast.warning('商品不存在');
            return;
          case ORDER_ERROR_CODE.BIZ_PAYMENT_NOT_EXIST:
            monitor.log('', '支付异常 >> 支付方式不存在');
            myToast.warning('支付方式不存在');
            return;
          case ORDER_ERROR_CODE.BIZ_ORDER_IS_NOT_SUPPORT_PAYMENT:
            monitor.log('', '支付异常 >> 支付渠道不支持');
            myToast.warning('支付渠道不支持');
            return;
          default:
            monitor.log('', `支付异常 >> ${msg}`);
            myToast.warning(msg);
        }
      });
  };

  render() {
    const { children } = this.props;
    return <div onClick={this.throttleHandleClick}>{children}</div>;
  }
}