完善支付测试页面；
This commit is contained in:
terrfly
parent
998fcc5614
commit
edb8090606
|
|
@ -45,7 +45,7 @@
|
|||
<template slot="opSlot" slot-scope="{record}"> <!-- 操作列插槽 -->
|
||||
<JeepayTableColumns>
|
||||
<a-button type="link" v-if="$access('ENT_MCH_PAY_TEST')">
|
||||
<router-link :to="{path:'paytest',query:{appid:record.appId}}">
|
||||
<router-link :to="{path:'paytest',params:{appId:record.appId}}">
|
||||
支付体验
|
||||
</router-link>
|
||||
</a-button>
|
||||
|
|
|
|||
|
|
@ -1,95 +1,89 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-card style="box-sizing:border-box;border-radius:15px;padding:30px">
|
||||
<a-form >
|
||||
|
||||
<!-- 选择下单的应用列表 -->
|
||||
<a-form>
|
||||
<div style="display:flex;flex-direction:row">
|
||||
<p style="margin-top:9px;margin-right:10px;">应用APPID</p>
|
||||
<a-form-item label="" class="table-head-layout">
|
||||
<a-select v-model="appId" default-value="this.appId" @change="selectChange" style="width:300px">
|
||||
<a-select-option v-for="(item) in appIdList" :key="item.appId" >{{ item.appId }}</a-select-option>
|
||||
<a-select v-model="appId" @change="changeAppId" style="width:300px">
|
||||
<a-select-option key="" >请选择应用</a-select-option>
|
||||
<a-select-option v-for="(item) in mchAppList" :key="item.appId" >{{ item.appName }} [{{ item.appId }}]</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-form>
|
||||
|
||||
<div style="width: 100%;" class="paydemo " v-if="hasAppId">
|
||||
<!-- 支付测试面板 -->
|
||||
<div style="width: 100%;" class="paydemo" v-if="appId != ''">
|
||||
<div class="paydemo-type-content">
|
||||
<div class="paydemo-type-name">微信支付</div>
|
||||
<div class="paydemo-type-body" >
|
||||
<div class="paydemo-type color-change" code="WX_NATIVE" @click="payMentHandle('WX_NATIVE')" :class="{this:(payMent === 'WX_NATIVE')}" v-show="payMentShow('WX_NATIVE')">
|
||||
<img src="@/assets/payTestImg/wx_native.svg" class="paydemo-type-img">
|
||||
<span class="color-change">微信二维码</span>
|
||||
<div class="paydemo-type-body">
|
||||
|
||||
<div class="paydemo-type color-change" v-show="appPaywayList.indexOf('WX_NATIVE') >= 0" @click="changeCurrentWayCode('WX_NATIVE', 'codeImgUrl')" :class="{this:(currentWayCode === 'WX_NATIVE')}">
|
||||
<img src="@/assets/payTestImg/wx_native.svg" class="paydemo-type-img"><span class="color-change">微信二维码</span>
|
||||
</div>
|
||||
<div class="paydemo-type color-change" code="WX_BAR" @click="payMentHandle('WX_BAR')" :class="{this:(payMent === 'WX_BAR')}" v-show="payMentShow('WX_BAR')">
|
||||
<img src="@/assets/payTestImg/wx_bar.svg" class="paydemo-type-img">
|
||||
<span class="color-change">微信条码</span>
|
||||
|
||||
<div class="paydemo-type color-change" v-show="appPaywayList.indexOf('WX_BAR') >= 0" @click="changeCurrentWayCode('WX_BAR', '')" :class="{this:(currentWayCode === 'WX_BAR')}">
|
||||
<img src="@/assets/payTestImg/wx_bar.svg" class="paydemo-type-img"><span class="color-change">微信条码</span>
|
||||
</div>
|
||||
<div class="paydemo-type color-change " code="WX_QR_CASHIER" @click="payMentHandle('WX_QR_CASHIER')" :class="{this:(payMent === 'WX_QR_CASHIER')}" v-show="payMentShow('WX_QR_CASHIER')">
|
||||
<img src="@/assets/payTestImg/wx_jsapi.svg" class="paydemo-type-img">
|
||||
<span class="color-change ">公众号/小程序</span>
|
||||
|
||||
<div class="paydemo-type color-change" v-show="appPaywayList.indexOf('WX_JSAPI') >= 0" @click="changeCurrentWayCode('WX_JSAPI', 'codeImgUrl')" :class="{this:(currentWayCode === 'WX_QR_CASHIER')}">
|
||||
<img src="@/assets/payTestImg/wx_jsapi.svg" class="paydemo-type-img"><span class="color-change">公众号/小程序</span>
|
||||
</div>
|
||||
<div style="position: relative">
|
||||
<div class="paydemo-type-h5" code="WX_H5" @mouseover="wx_h5=true" @mouseleave="wx_h5=false" v-show="payMentShow('WX_H5')">
|
||||
<img src="@/assets/payTestImg/wx_h5.svg" class="paydemo-type-img">
|
||||
<span>微信H5</span>
|
||||
</div>
|
||||
<div class="paydemo-type-h5 codeImg_wx_h5 " v-show="wx_h5" >
|
||||
<img style="width: 120px;height: 120px;padding-bottom: 10px" src="@/assets/payTestImg/pay_h5.png">
|
||||
<span>请使用手机浏览器扫码</span>
|
||||
</div>
|
||||
|
||||
<div class="paydemo-type-h5" v-show="appPaywayList.indexOf('WX_H5') >= 0" @click="changeCurrentWayCode('WX_H5', 'codeImgUrl')">
|
||||
<img src="@/assets/payTestImg/wx_h5.svg" class="paydemo-type-img"><span class="color-change">微信H5</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="paydemo-type-name">支付宝支付</div>
|
||||
<div class="paydemo-type-body">
|
||||
<div class="paydemo-type color-change" code="ALI_QR" @click="payMentHandle('ALI_QR')" :class="{this:(payMent === 'ALI_QR')}" v-show="payMentShow('ALI_QR')">
|
||||
<img src="@/assets/payTestImg/ali_qr.svg" class="paydemo-type-img">
|
||||
<span class="color-change">支付宝二维码</span>
|
||||
<div class="paydemo-type color-change" v-show="appPaywayList.indexOf('ALI_QR') >= 0" @click="changeCurrentWayCode('ALI_QR', 'codeImgUrl')" :class="{this:(currentWayCode === 'ALI_QR')}">
|
||||
<img src="@/assets/payTestImg/ali_qr.svg" class="paydemo-type-img"><span class="color-change">支付宝二维码</span>
|
||||
</div>
|
||||
<div class="paydemo-type color-change" code="ALI_BAR" @click="payMentHandle('ALI_BAR')" :class="{this:(payMent === 'ALI_BAR')}" v-show="payMentShow('ALI_BAR')">
|
||||
<img src="@/assets/payTestImg/ali_bar.svg" class="paydemo-type-img">
|
||||
<span class="color-change">支付宝条码</span>
|
||||
|
||||
<div class="paydemo-type color-change" v-show="appPaywayList.indexOf('ALI_BAR') >= 0" @click="changeCurrentWayCode('ALI_BAR', '')" :class="{this:(currentWayCode === 'ALI_BAR')}">
|
||||
<img src="@/assets/payTestImg/ali_bar.svg" class="paydemo-type-img"><span class="color-change">支付宝条码</span>
|
||||
</div>
|
||||
<div class="paydemo-type color-change" code="ALI_JSAPI" @click="payMentHandle('ALI_JSAPI')" :class="{this:(payMent === 'ALI_JSAPI')}" v-show="payMentShow('ALI_JSAPI')">
|
||||
<img src="@/assets/payTestImg/ali_jsapi.svg" class="paydemo-type-img">
|
||||
<span class="color-change">支付宝生活号</span>
|
||||
|
||||
<div class="paydemo-type color-change" v-show="appPaywayList.indexOf('ALI_JSAPI') >= 0" @click="changeCurrentWayCode('ALI_JSAPI', 'codeImgUrl')" :class="{this:(currentWayCode === 'ALI_JSAPI')}">
|
||||
<img src="@/assets/payTestImg/ali_jsapi.svg" class="paydemo-type-img"><span class="color-change">支付宝生活号</span>
|
||||
</div>
|
||||
<div class="paydemo-type color-change" code="ALI_PC" @click="payMentHandle('ALI_PC')" :class="{this:(payMent === 'ALI_PC')}" v-show="payMentShow('ALI_PC')">
|
||||
<img src="@/assets/payTestImg/ali_pc.svg" class="paydemo-type-img">
|
||||
<span class="color-change">支付宝PC网站</span>
|
||||
|
||||
<div class="paydemo-type color-change" v-show="appPaywayList.indexOf('ALI_PC') >= 0" @click="changeCurrentWayCode('ALI_PC', 'payurl')" :class="{this:(currentWayCode === 'ALI_PC')}">
|
||||
<img src="@/assets/payTestImg/ali_pc.svg" class="paydemo-type-img"><span class="color-change">支付宝PC网站</span>
|
||||
</div>
|
||||
<div style="position: relative">
|
||||
<div class="paydemo-type-h5" code="ALI_WAP" @mouseover="zfb_wap=true" @mouseleave="zfb_wap=false" v-show="payMentShow('ALI_WAP')">
|
||||
<img src="@/assets/payTestImg/ali_wap.svg" class="paydemo-type-img">
|
||||
<span>支付宝WAP</span>
|
||||
</div>
|
||||
<div class="paydemo-type-h5 codeImg_wx_h5" v-show="zfb_wap">
|
||||
<img style="width: 120px;height: 120px;padding-bottom: 10px" src="@/assets/payTestImg/pay_h5.png">
|
||||
<span>请使用手机浏览器扫码</span>
|
||||
|
||||
<div>
|
||||
<div class="paydemo-type-h5" v-show="appPaywayList.indexOf('ALI_WAP') >= 0" @click="changeCurrentWayCode('ALI_WAP', 'payurl')" :class="{this:(currentWayCode === 'ALI_WAP')}">
|
||||
<img src="@/assets/payTestImg/ali_wap.svg" class="paydemo-type-img"><span class="color-change">支付宝WAP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="paydemo-type-name">聚合支付</div>
|
||||
<div class="paydemo-type-body">
|
||||
<div class="paydemo-type color-change" code="QR_CASHIER" @click="payMentHandle('QR_CASHIER')" :class="{this:(payMent === 'QR_CASHIER')}" v-show="payMentShow('QR_CASHIER')">
|
||||
<img src="@/assets/payTestImg/qr_cashier.svg" class="paydemo-type-img">
|
||||
<span class="color-change">聚合扫码(用户扫商家)</span>
|
||||
<div class="paydemo-type color-change" v-show="appPaywayList.indexOf('WX_JSAPI') >= 0 || appPaywayList.indexOf('ALI_JSAPI') >= 0" @click="changeCurrentWayCode('QR_CASHIER', 'codeImgUrl')" :class="{this:(currentWayCode === 'QR_CASHIER')}">
|
||||
<img src="@/assets/payTestImg/qr_cashier.svg" class="paydemo-type-img"><span class="color-change">聚合扫码(用户扫商家)</span>
|
||||
</div>
|
||||
<div class="paydemo-type color-change" code="AUTO_BAR" @click="payMentHandle('AUTO_BAR')" :class="{this:(payMent === 'AUTO_BAR')}" v-show="payMentShow('AUTO_BAR')">
|
||||
<img src="@/assets/payTestImg/auto_bar.svg" class="paydemo-type-img">
|
||||
<span class="color-change">聚合条码(商家扫用户)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="paydemo-type color-change" v-show="appPaywayList.indexOf('WX_BAR') >= 0 || appPaywayList.indexOf('ALI_BAR') >= 0" @click="changeCurrentWayCode('AUTO_BAR', 'codeImgUrl')" :class="{this:(currentWayCode === 'AUTO_BAR')}">
|
||||
<img src="@/assets/payTestImg/auto_bar.svg" class="paydemo-type-img"><span class="color-change">聚合条码(商家扫用户)</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 订单信息 -->
|
||||
<div class="paydemo-type-content">
|
||||
<div class="paydemo-type-name">支付信息</div>
|
||||
<form class="layui-form">
|
||||
<div class="paydemo-form-item">
|
||||
<label>订单编号：</label><span id="payMchOrderNo">{{ orderNo }}</span>
|
||||
<span id="randomOrderNo" @click="randomOrderNo" class=" paydemo-btn" style="padding:0 3px">刷新订单号</span>
|
||||
<label>订单编号：</label><span id="payMchOrderNo">{{ mchOrderNo }}</span>
|
||||
<span @click="randomOrderNo" class=" paydemo-btn" style="padding:0 3px">刷新订单号</span>
|
||||
</div>
|
||||
<div class="paydemo-form-item">
|
||||
<label>商品名称：</label>
|
||||
|
|
@ -97,147 +91,112 @@
|
|||
</div>
|
||||
<div class="paydemo-form-item">
|
||||
<span>支付金额(元)：</span>
|
||||
<label>￥0.01<input type="radio" value="0.01" v-model="payMentAmount" /></label>
|
||||
<label>￥0.15<input type="radio" value="0.15" v-model="payMentAmount" /></label>
|
||||
<label>￥0.21<input type="radio" value="0.21" v-model="payMentAmount" /></label>
|
||||
<label>￥0.29<input type="radio" value="0.29" v-model="payMentAmount" /></label>
|
||||
<label>￥0.64<input type="radio" value="0.64" v-model="payMentAmount" /></label>
|
||||
<label><span style="margin-right:3px">自定义金额</span><a-input-number type="radio" value="0.64" v-model="payMentAmount" :precision="2"/></label>
|
||||
<label>￥0.01<input type="radio" value="0.01" v-model="paytestAmount" /></label>
|
||||
<label>￥0.15<input type="radio" value="0.15" v-model="paytestAmount" /></label>
|
||||
<label>￥0.21<input type="radio" value="0.21" v-model="paytestAmount" /></label>
|
||||
<label>￥0.29<input type="radio" value="0.29" v-model="paytestAmount" /></label>
|
||||
<label>￥0.64<input type="radio" value="0.64" v-model="paytestAmount" /></label>
|
||||
<label><span style="margin-right:3px">自定义金额</span><a-input-number type="radio" value="0.64" v-model="paytestAmount" :precision="2"/></label>
|
||||
</div>
|
||||
<div style="margin-top:20px;text-align: right">
|
||||
<span style="color: #FD482C;font-size: 18px;padding-right: 10px;" id="amountShow">{{ payMentAmount }}</span>
|
||||
<a-button @click="immediatelyPay" lay-filter="payTest" style="padding:5px 20px;background-color: #1953ff;border-radius: 5px;color:#fff">立即支付</a-button>
|
||||
<span style="color: #FD482C;font-size: 18px;padding-right: 10px;" id="amountShow">{{ paytestAmount }}</span>
|
||||
<a-button @click="immediatelyPay" style="padding:5px 20px;background-color: #1953ff;border-radius: 5px;color:#fff">立即支付</a-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
<pay-test-modal ref="payTestModal" :codeUr="codeUr"></pay-test-modal>
|
||||
<pay-test-modal ref="payTestModal"></pay-test-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { API_URL_MCH_APP, req, payTest, payTestOrder, getWebSocketPrefix } from '@/api/manage' // 接口
|
||||
import { API_URL_MCH_APP, req, payTest, payTestOrder } from '@/api/manage' // 接口
|
||||
import PayTestModal from './PayTestModal' // 对话框组件
|
||||
import ReconnectingWebSocket from 'reconnectingwebsocket' // WebSocket
|
||||
|
||||
export default {
|
||||
props: {},
|
||||
components: { PayTestModal },
|
||||
data () {
|
||||
return {
|
||||
payMent: '', // 以何种方式进行支付，默认是微信二维码
|
||||
payMentAmount: '0.01', // 支付金额，默认为0.01
|
||||
hasAppId: false, // 如果没有选择appid 默认为false，则支付板块不显示
|
||||
orderNo: '', // 订单号
|
||||
appIdList: [], // appid列表
|
||||
appId: '请选择appId', // 下拉框的默认值
|
||||
wx_h5: false, // 微信h5 扫码
|
||||
zfb_wap: false, // 支付宝wap 扫码
|
||||
amountInputNum: '', // 自定义金额的值
|
||||
amountInput: false, // 自定金额输入框是否展示
|
||||
payMentList: [], // 支付方式列表（根据appId动态展示）
|
||||
authCode: '', // 条码地址
|
||||
codeUr: '', // 二维码地址
|
||||
payOrderId: ''
|
||||
|
||||
mchAppList: [], // app列表
|
||||
appId: '', // 已选择的appId
|
||||
appPaywayList: [], // 商户app支持的支付方式
|
||||
|
||||
currentWayCode: '', // 以何种方式进行支付，默认是微信二维码
|
||||
currentPayDataType: '', // 支付参数
|
||||
mchOrderNo: '', // 模拟商户订单号
|
||||
paytestAmount: '0.01', // 支付金额，默认为0.01
|
||||
amountInput: false // 自定金额输入框是否展示
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 切换支付方式
|
||||
payMentHandle (mode) {
|
||||
console.log(mode)
|
||||
this.payMent = mode
|
||||
},
|
||||
|
||||
// 自定义金额输入框展示
|
||||
amountRadio () {
|
||||
this.amountInput = true
|
||||
},
|
||||
|
||||
// appId下拉框
|
||||
selectChange (value) {
|
||||
this.payMentListHandle(value) // 根据appId的值，动态显示支付方式
|
||||
},
|
||||
|
||||
// 刷新订单号
|
||||
randomOrderNo () {
|
||||
this.orderNo = 'M' + new Date().getTime() + Math.floor(Math.random() * (9999 - 1000) + 1000)
|
||||
},
|
||||
|
||||
// 根据不同的appId展示不同的支付方式(在下拉框切换时和在携带参数进入页面时调用)
|
||||
payMentListHandle (value) {
|
||||
const that = this
|
||||
payTest(value).then(res => {
|
||||
that.payMentList = res
|
||||
console.log(that.payMentList)
|
||||
this.hasAppId = true // 支付板块显示
|
||||
}).catch(err => {
|
||||
this.$message.error('请求失败')
|
||||
this.hasAppId = false // 支付板块不显示
|
||||
console.error(err)
|
||||
})
|
||||
},
|
||||
// 立即支付按钮
|
||||
immediatelyPay () {
|
||||
// 判断是否选择支付方式
|
||||
if (this.payMent === '') {
|
||||
return this.$message.error('请选择支付方式')
|
||||
}
|
||||
|
||||
const that = this
|
||||
payTestOrder({ // 六个参数 1订单号 2appid 3金额 4支付方式 5payDataType(二维码，条码) 6条码的值
|
||||
wayCode: this.payMent, amount: this.payMentAmount, appId: this.appId, mchOrderNo: this.orderNo, payDataType: 'codeImgUrl', authCode: this.authCode
|
||||
}).then(res => {
|
||||
that.codeUr = res.payData
|
||||
that.payOrderId = res.payOrderId
|
||||
that.$refs.payTestModal.showModal(this.payMent) // 打开弹窗
|
||||
// 此处加入 webSocket
|
||||
const socket = new ReconnectingWebSocket(getWebSocketPrefix() + '/api/anon/ws/payOrder/' + res.payOrderId + '/' + new Date().getTime())
|
||||
socket.onopen = () => {}
|
||||
socket.onmessage = (msgObject) => {
|
||||
if (JSON.parse(msgObject.data).state === 2) {
|
||||
this.$refs.payTestModal.handleClose()
|
||||
this.$message.success('支付成功')
|
||||
} else {
|
||||
this.$refs.payTestModal.handleClose()
|
||||
this.$message.error('支付失败')
|
||||
}
|
||||
}
|
||||
}).catch(err => {
|
||||
this.$message.error('请求失败')
|
||||
console.error(err)
|
||||
})
|
||||
},
|
||||
|
||||
// 该支付方式是否显示
|
||||
payMentShow (payMent) {
|
||||
if (this.payMentList.indexOf(payMent) !== -1) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// 获取传入的参数，如果参数存在，则为appid 重新赋值
|
||||
const appId = this.$route.query.appid
|
||||
mounted () {
|
||||
// 获取传入的参数，如果参数存在，则为appId 重新赋值
|
||||
const appId = this.$route.params.appId
|
||||
if (appId) {
|
||||
this.appId = appId // appId赋值
|
||||
this.hasAppId = true // 支付板块显示
|
||||
this.payMentListHandle(appId) // 调用payMentListHandle，展示支付方式
|
||||
this.appPaywayListHandle(appId) // 调用appPaywayListHandle，展示支付方式
|
||||
}
|
||||
|
||||
const that = this // 提前保留this
|
||||
// 请求接口，获取所有的appid，只有此处进行pageSize=-1传参
|
||||
req.list(API_URL_MCH_APP + '?pageSize=-1').then(res => {
|
||||
that.appIdList = res.records
|
||||
req.list(API_URL_MCH_APP, { pageSize: -1 }).then(res => {
|
||||
that.mchAppList = res.records
|
||||
})
|
||||
|
||||
// 在进入页面时刷新订单号
|
||||
this.randomOrderNo()
|
||||
},
|
||||
mounted () {
|
||||
methods: {
|
||||
|
||||
changeCurrentWayCode (wayCode, currentPayDataType) { // 切换支付方式
|
||||
this.currentWayCode = wayCode
|
||||
this.currentPayDataType = currentPayDataType
|
||||
},
|
||||
|
||||
// 变更 appId的事件
|
||||
changeAppId (value) {
|
||||
this.appPaywayListHandle(value) // 根据appId的值，动态显示支付方式
|
||||
},
|
||||
|
||||
// 刷新订单号
|
||||
randomOrderNo () {
|
||||
this.mchOrderNo = 'M' + new Date().getTime() + Math.floor(Math.random() * (9999 - 1000) + 1000)
|
||||
},
|
||||
|
||||
// 根据不同的appId展示不同的支付方式(在下拉框切换时和在携带参数进入页面时调用)
|
||||
appPaywayListHandle (value) {
|
||||
if (!value) {
|
||||
this.appPaywayList = []
|
||||
return false
|
||||
}
|
||||
const that = this
|
||||
payTest(value).then(res => {
|
||||
that.appPaywayList = res
|
||||
})
|
||||
},
|
||||
// 立即支付按钮
|
||||
immediatelyPay () {
|
||||
// 判断是否选择支付方式
|
||||
if (this.currentWayCode === '') {
|
||||
return this.$message.error('请选择支付方式')
|
||||
}
|
||||
|
||||
const that = this
|
||||
payTestOrder({
|
||||
// jsapi 默认使用聚合二维码支付
|
||||
wayCode: (this.currentWayCode === 'WX_JSAPI' || this.currentWayCode === 'ALI_JSAPI') ? 'QR_CASHIER' : this.currentWayCode,
|
||||
amount: this.paytestAmount,
|
||||
appId: this.appId,
|
||||
mchOrderNo: this.mchOrderNo,
|
||||
payDataType: this.currentPayDataType
|
||||
// authCode: this.authCode
|
||||
}).then(res => {
|
||||
that.$refs.payTestModal.showModal(this.currentWayCode, res) // 打开弹窗
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<a-modal v-model="visible" :title="payTitle" @ok="handleClose" :footer="null" :width="300">
|
||||
<a-modal v-model="visible" title="等待支付" @ok="handleClose" :footer="null" :width="300">
|
||||
<div style="width:100%;margin-bottom:20px;text-align:center">
|
||||
<img :src="codeUr" alt="">
|
||||
<img v-if="apiRes.payDataType == 'codeImgUrl'" :src="apiRes.payData" alt="">
|
||||
<span v-if="apiRes.payDataType == 'payurl'">等待用户支付 <hr> 如浏览器未正确跳转请点击： <a :href="apiRes.payData" target="_blank">支付地址</a></span>
|
||||
</div>
|
||||
<p class="describe">
|
||||
<img src="@/assets/payTestImg/wx_app.svg" alt="" v-show="wxApp"><!-- 微信图标 -->
|
||||
|
|
@ -14,43 +15,71 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ReconnectingWebSocket from 'reconnectingwebsocket'
|
||||
import { getWebSocketPrefix } from '@/api/manage'
|
||||
|
||||
export default {
|
||||
name: 'PayTestModal',
|
||||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
payTitle: '扫码支付', // 弹窗标题文字默认为 扫码支付
|
||||
payText: '', // 二维码底部描述文字
|
||||
wxApp: false, // 微信二维码图片是否展示
|
||||
aliApp: false // 支付宝二维码图片是否展示
|
||||
aliApp: false, // 支付宝二维码图片是否展示
|
||||
apiRes: {}, // 接口返回数据包
|
||||
payOrderWebSocket: null // 支付订单webSocket对象
|
||||
}
|
||||
},
|
||||
props: {
|
||||
codeUr: { type: String, default: '404' }
|
||||
},
|
||||
methods: {
|
||||
// 二维码以及条码弹窗
|
||||
showModal (payMent) {
|
||||
this.visible = true // 打开弹窗
|
||||
showModal (wayCode, apiRes) {
|
||||
const that = this
|
||||
// 关闭上一个webSocket监听
|
||||
if (this.payOrderWebSocket) {
|
||||
this.payOrderWebSocket.close()
|
||||
}
|
||||
|
||||
// 图片展示重置
|
||||
this.apiRes = apiRes
|
||||
this.wxApp = false
|
||||
this.aliApp = false
|
||||
this.visible = true // 打开弹窗
|
||||
|
||||
// 根据不同的支付方式，展示不同的信息
|
||||
if (payMent === 'WX_NATIVE' || payMent === 'WX_QR_CASHIER') { // 微信二维码
|
||||
if (wayCode === 'WX_NATIVE' || wayCode === 'WX_JSAPI') { // 微信二维码
|
||||
this.wxApp = true
|
||||
this.payText = '请使用微信"扫一扫"扫码支付'
|
||||
} else if (payMent === 'ALI_QR' || payMent === 'ALI_QR_CASHIER') { // 支付宝二维码
|
||||
} else if (wayCode === 'ALI_QR' || wayCode === 'ALI_JSAPI') { // 支付宝二维码
|
||||
this.aliApp = true
|
||||
this.payText = '请使用支付宝"扫一扫"扫码支付'
|
||||
} else if (payMent === 'QR_CASHIER') { // 聚合支付二维码
|
||||
} else if (wayCode === 'QR_CASHIER') { // 聚合支付二维码
|
||||
this.wxApp = true
|
||||
this.aliApp = true
|
||||
this.payText = '支持微信、支付宝扫码'
|
||||
}
|
||||
|
||||
// 跳转到PC网站
|
||||
if (apiRes.payDataType === 'payurl') {
|
||||
window.open(apiRes.payData)
|
||||
}
|
||||
|
||||
// 监听响应结果
|
||||
this.payOrderWebSocket = new ReconnectingWebSocket(getWebSocketPrefix() + '/api/anon/ws/payOrder/' + apiRes.payOrderId + '/' + new Date().getTime())
|
||||
this.payOrderWebSocket.onopen = () => {}
|
||||
this.payOrderWebSocket.onmessage = (msgObject) => {
|
||||
const resMsgObject = JSON.parse(msgObject.data)
|
||||
if (resMsgObject.state === 2) {
|
||||
that.handleClose()
|
||||
that.$message.success('支付成功')
|
||||
} else {
|
||||
that.handleClose()
|
||||
that.$message.error('支付失败')
|
||||
}
|
||||
}
|
||||
},
|
||||
handleClose (e) {
|
||||
if (this.payOrderWebSocket) {
|
||||
this.payOrderWebSocket.close()
|
||||
}
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue