123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285 |
- import request from '@/helpers/request'
- import { browser, getHttpOrigin, getUrlCode, moneyFormat } from '@/helpers/utils'
- import { goAliAuth, goWechatAuth } from '@/state'
- import { Cell, CellGroup, Dialog, Icon, Loading, Toast } from 'vant'
- import { defineComponent, onMounted, reactive } from 'vue'
- import { useRouter, useRoute } from 'vue-router'
- import styles from './index.module.less'
- import { state as baseState } from '@/state'
- 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,
- 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 init = () => {
- const query = route.query
- const isYeePay = state.paymentType?.indexOf('yeepay') !== -1
- // 判断是否有支付对象
- if (!query.orderNo || !query.pay_channel) {
- Dialog.confirm({
- message: '支付订单信息错误请重新支付',
- showCancelButton: false
- }).then(() => {
- router.back()
- })
- } else {
- // 判断当前浏览器
- if (browser().weixin) {
- state.browserStatus = true
- getWxPay()
- } else if (browser().alipay) {
- if (isYeePay) {
- const code = getUrlCode('auth_code')
- if (code) {
- state.code = code // 赋值code码
- state.browserStatus = true
- getPayment()
- } else {
- goAliAuth(state.alipayAppId)
- }
- } else {
- state.browserStatus = true
- getPayment()
- }
- } else {
- state.errorText = '请在微信或支付宝客户端打开'
- document.title = 'ERROR'
- }
- }
- }
- const getPayment = async () => {
- try {
- if (parseFloat(state.price) <= 0) {
- Toast('支付金额异常')
- 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(
- '/api-student/open/userOrder/executePayment/v2',
- {
- data: {
- ...payMap
- }
- }
- )
- state.isYeePay = data.paymentVender?.indexOf('yeepay') !== -1
- console.log(data, 'data')
- scanCodePay(data.reqParams)
- } catch (e) {
- //
- console.log(e)
- // 接口报错也跳转到支付回调页
- window.location.replace(
- getHttpOrigin() +
- baseState.payBackPath +
- '#/tradeDetail?orderNo=' +
- state.orderNo
- )
- }
- }
- // 由于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(
- getHttpOrigin() +
- baseState.payBackPath +
- '#/tradeDetail?orderNo=' +
- state.orderNo
- )
- } else {
- window.location.replace(
- getHttpOrigin() +
- baseState.payBackPath +
- '#/tradeDetail?orderNo=' +
- state.orderNo
- )
- }
- //使用的支付宝内置api实现关闭H5
- ;(window as any).AlipayJSBridge.call('closeWebview')
- }
- )
- })
- }
- const scanCodePay = (data: any) => {
- // 判断支付方式 如果是 test 模式 支付用测试url 否则用生产url
- if (state.pay_channel == 'alipay_qr') {
- if (state.isYeePay) {
- tradePay(data.tradeNO)
- } 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 == 'alipay_wap') {
- window.location.href = data?.expend?.pay_info
- } else if (state.pay_channel == 'wx_pub') {
- console.log(state.isYeePay, data?.expend, 'payInfo')
- const tempPayInfo = state.isYeePay
- ? JSON.parse(data.prePayTn)
- : data?.expend
- ? JSON.parse(data?.expend?.pay_info)
- : data
- 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 || payInfo.packageValue,
- 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(
- getHttpOrigin() +
- baseState.payBackPath +
- '#/tradeDetail?orderNo=' +
- state.orderNo
- )
- } else {
- // 使用以上方式判断前端返回,微信团队郑重提示:
- //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
- // alert('支付成功')
- window.location.replace(
- getHttpOrigin() +
- baseState.payBackPath +
- '#/tradeDetail?orderNo=' +
- state.orderNo
- )
- }
- }
- )
- }
- const getWxPay = () => {
- // 微信公众号支付
- //授权
- const code = getUrlCode()
- if (!code) {
- goWechatAuth(state.wxAppId)
- } else {
- state.code = code
- getPayment()
- }
- }
- 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 class={styles['error-icon']} name="warning-o" />
- )}
- {state.errorText}
- </div>
- )}
- </div>
- )
- }
- })
|