orchestra-app/src/views/adapay/pay-result/index.tsx

import request from '@/helpers/request'
import { browser, getUrlCode, moneyFormat } from '@/helpers/utils'
import {
  Cell,
  CellGroup,
  closeToast,
  Icon,
  Loading,
  showConfirmDialog,
  showDialog,
  showToast
} from 'vant'
import { defineComponent, onMounted, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import styles from './index.module.less'

export default defineComponent({
  name: 'pay-result',
  setup() {
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      errorText: '',
      browserStatus: false,
      code: null as any,
      pay_channel: route.query.pay_channel as any,
      wxAppId: route.query.wxAppId 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
    })

    const init = () => {
      const query = route.query
      console.log(query)
      // 判断是否有支付对象
      if (!query.orderNo || !query.pay_channel) {
        showConfirmDialog({
          message: '支付订单信息错误请重新支付',
          showCancelButton: false
        }).then(() => {
          router.back()
        })
      } else {
        // 判断当前浏览器
        if (browser().weixin) {
          state.browserStatus = true
          getWxPay()
        } else if (browser().alipay) {
          state.browserStatus = true
          getPayment()
        } else {
          state.errorText = '请在微信或支付宝客户端打开'
          document.title = 'ERROR'
        }
      }
    }

    const getPayment = async () => {
      try {
        try {
          if (parseFloat(state.price) <= 0) {
            showToast('支付金额异常')
            return
          }
          const payMap: any = {
            merOrderNo: state.orderNo,
            paymentChannel: state.pay_channel, // 支付渠道
            userId: state.userId
          }
          //     // 判断是否是微信公众号支付
          if (state.pay_channel == 'wx_pub') {
            payMap.code = state.code
          }

          const { data } = await request.post('/api-student/open/userOrder/executePayment', {
            data: {
              ...payMap
            }
          })

          console.log(data, 'payment')
          scanCodePay(data.reqParams)
        } catch (e) {
          //
          console.log(e)
        }
      } catch {
        //
      }
    }

    const scanCodePay = (data: any) => {
      // 判断支付方式 如果是 test 模式 支付用测试url 否则用生产url
      if (state.pay_channel == 'alipay_qr') {
        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 = 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()
        }
      }
    }

    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 + '/orchestra-student/#/payment-result?orderNo=' + state.orderNo
            )
          } else {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            // alert('支付成功')
            window.location.replace(
              location.origin + '/orchestra-student/#/payment-result?orderNo=' + state.orderNo
            )
          }
        }
      )
    }

    const getWxPay = () => {
      // 微信公众号支付
      //授权
      const code = getUrlCode()
      if (!code) {
        goAuth()
      } else {
        state.code = code
        getPayment()
      }
    }
    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)
    }

    onMounted(() => {
      init()
    })

    return () => (
      <div class={styles.paywxresult}>
        {state.browserStatus && (
          <>
            <div class={styles.container}>
              <CellGroup border={false}>
                <Cell title={'订单金额'} value={'￥' + moneyFormat(state.price)}></Cell>
                <Cell title={'订单信息'} value={state.body}></Cell>
              </CellGroup>
            </div>

            <div class={styles['order-loading']}>
              <p>{state.pay_channel == 'wx_pub' ? '微信支付' : '支付宝支付'}</p>
              <Loading type="spinner" color="#01C1B5" />
            </div>
          </>
        )}

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