classroom-app/src/views/adapay/pay-define/index.tsx

import request from '@/helpers/request';
import { browser, getUrlCode, moneyFormat } from '@/helpers/utils';
import { goAliAuth, goWechatAuth } from '@/state';
import numeral from 'numeral';
import { Button, Cell, CellGroup, Icon, showToast } from 'vant';
import { defineComponent, onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';
import styles from './index.module.less';

export default defineComponent({
  name: 'pay-define',
  setup() {
    const route = useRoute();
    const state = reactive({
      browserStatus: false,
      errorText: '',
      code: null as any,
      pay_channel: route.query.pay_channel as any,
      wxAppId: route.query.wxAppId as any,
      paymentType: route.query.paymentType as any,
      alipayAppId: route.query.alipayAppId as any,
      body: route.query.body as any,
      price: route.query.price as any,
      orderNo: route.query.orderNo as any,
      userId: route.query.userId as any,
      payInfo: {} as any,
      isYeePay: false // 是否为易宝支付
    });

    const getPayment = async () => {
      try {
        if (parseFloat(state.price) <= 0) {
          showToast('支付金额异常');
          return;
        }
        const payMap: any = {
          merOrderNo: state.orderNo,
          paymentChannel: state.pay_channel, // 支付渠道
          userId: state.userId,
          code: state.code
        };
        // 判断是否是微信公众号支付
        // if (state.pay_channel == 'wx_pub') {
        //   payMap.code = state.code;
        // }
        const { data } = await request.post(
          '/edu-app/open/userOrder/executePayment',
          {
            hideLoading: false,
            data: {
              ...payMap
            }
          }
        );

        state.isYeePay = data.paymentVender?.indexOf('yeepay') !== -1;
        scanCodePay(data.reqParams);
      } catch (e) {
        //
        console.log(e);
      }
    };

    const scanCodePay = (data: any) => {
      // 判断支付方式 如果是 test 模式 支付用测试url 否则用生产url
      if (state.pay_channel == 'alipay_qr') {
        if (state.isYeePay) {
          tradePay(data.prePayTn);
        } else {
          const url =
            data.prod_mode === 'false'
              ? data.expend.qrcode_url +
                '?payment_id=' +
                data.id +
                '&pay_channel=' +
                data.pay_channel
              : data.expend.qrcode_url;
          window.location.href = url;
        }
      } else if (state.pay_channel == 'wx_pub') {
        const tempPayInfo = state.isYeePay
          ? JSON.parse(data.prePayTn)
          : JSON.parse(data.expend.pay_info);
        state.payInfo = tempPayInfo;
        if (typeof (window as any).WeixinJSBridge == 'undefined') {
          if (document.addEventListener) {
            document.addEventListener(
              'WeixinJSBridgeReady',
              onBridgeReady,
              false
            );
          } else if ((document as any).attachEvent) {
            (document as any)
              .attachEvent(
                'WeixinJSBridgeReady',
                onBridgeReady
              )(document as any)
              .attachEvent('onWeixinJSBridgeReady', onBridgeReady);
          }
        } else {
          onBridgeReady();
        }
      }
    };

    // 由于js的载入是异步的，所以可以通过该方法，当AlipayJSBridgeReady事件发生后，再执行callback方法
    const ready = (callback: any) => {
      if ((window as any).AlipayJSBridge) {
        callback && callback();
      } else {
        document.addEventListener('AlipayJSBridgeReady', callback, false);
      }
    };
    const tradePay = (tradeNO: any) => {
      ready(function () {
        // 通过传入交易号唤起快捷调用方式(注意tradeNO大小写严格)
        (window as any).AlipayJSBridge.call(
          'tradePay',
          {
            tradeNO: tradeNO
          },
          function (data: any) {
            if ('9000' == data.resultCode) {
              window.location.replace(
                location.origin +
                  '/classroom-app/#/payment-result?orderNo=' +
                  state.orderNo
              );
            } else {
              window.location.replace(
                location.origin +
                  '/classroom-app/#/payment-result?orderNo=' +
                  state.orderNo
              );
            }
            //使用的支付宝内置api实现关闭H5
            (window as any).AlipayJSBridge.call('closeWebview');
          }
        );
      });
    };
    const onBridgeReady = () => {
      const payInfo = state.payInfo;
      // let orderNo = state.orderNo
      (window as any).WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        {
          appId: payInfo.appId, //公众号名称，由商户传入
          timeStamp: payInfo.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: payInfo.nonceStr, //随机串
          package: payInfo.package,
          signType: payInfo.signType, //微信签名方式：
          paySign: payInfo.paySign //微信签名
        },
        (res: any) => {
          // if(res.err_msg == "get_brand_wcpay_request:ok" ){
          // 使用以上方式判断前端返回,微信团队郑重提示：
          //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          // } else
          if (
            res.err_msg == 'get_brand_wcpay_request:cancel' ||
            res.err_msg == 'get_brand_wcpay_request:fail'
          ) {
            window.location.replace(
              location.origin +
                '/classroom-app/#/payment-result?orderNo=' +
                state.orderNo
            );
          } else {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            // alert('支付成功')
            window.location.replace(
              location.origin +
                '/classroom-app/#/payment-result?orderNo=' +
                state.orderNo
            );
          }
        }
      );
    };

    // const goAuth = () => {
    //   // 用户授权
    //   const urlNow = encodeURIComponent(window.location.href)
    //   const scope = 'snsapi_base' //snsapi_userinfo   //静默授权 用户无感知
    //   const appid = state.wxAppId || 'wx8654c671631cfade'
    //   const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${urlNow}&response_type=code&scope=${scope}&state=STATE&connect_redirect=1#wechat_redirect`
    //   window.location.replace(url)
    // }

    const init = () => {
      const pay_channel = state.pay_channel;
      const isYeePay = state.paymentType.indexOf('yeepay') !== -1;
      if (browser().weixin) {
        if (pay_channel === 'wx_pub') {
          //授权
          const code = getUrlCode();
          if (code) {
            state.code = code; // 赋值code码
          } else {
            goWechatAuth(state.wxAppId);
          }
          state.browserStatus = true;
          document.title = '微信支付';
        } else if (pay_channel == 'alipay_qr') {
          state.errorText = '请使用支付宝扫码';
        }
      } else if (browser().alipay) {
        if (pay_channel === 'wx_pub') {
          state.errorText = '请使用微信扫码';
        } else if (pay_channel == 'alipay_qr') {
          // 支付宝支付
          // 易宝才需要
          if (isYeePay) {
            //授权
            const code = getUrlCode('auth_code');
            if (code) {
              state.code = code; // 赋值code码
            } else {
              goAliAuth(state.alipayAppId);
            }
          }

          state.browserStatus = true;
          document.title = '支付宝支付';
        }
      } else {
        state.errorText = '请在微信或支付宝客户端打开';
      }
      state.errorText && (document.title = 'ERROR');
    };

    onMounted(() => {
      console.log(state);
      init();
    });
    return () => (
      <div class={styles.paydefine}>
        {state.browserStatus && (
          <div class={styles.container}>
            <div class={styles.amount}>
              <span>￥ </span>
              {moneyFormat(state.price)}
            </div>
            <CellGroup inset>
              <Cell
                title="订单信息"
                value={state.body}
                valueClass={styles.values}></Cell>
              <Cell
                title="支付方式"
                value={
                  state.pay_channel === 'wx_pub' ? '微信' : '支付宝'
                }></Cell>
              <Cell
                title="实付金额"
                value={`￥ ${moneyFormat(state.price)}元`}></Cell>
            </CellGroup>

            <Button
              type="primary"
              block
              size="large"
              onClick={getPayment}
              round>
              立即支付
            </Button>
          </div>
        )}

        {!state.browserStatus && (
          <div class={styles.container}>
            <div class={styles['error-text']}>
              {state.errorText && (
                <Icon class={styles['error-icon']} name="warning-o" />
              )}

              {state.errorText}
            </div>
          </div>
        )}
      </div>
    );
  }
});