lisang
/
jeepay-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1 . 支付体验页，增加分割线以及提示信息

This commit is contained in:
ssyang1993 2021-06-24 11:22:24 +08:00
parent 1fb3ab8dc7
commit e234398c6d
3 changed files with 34 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
jeepay-ui-merchant/src/views/payTest/PayTest.vue
View File

@ -1,24 +1,29 @@
<template>
<div>
<a-card style="box-sizing:border-box;border-radius:15px;padding:30px">
<a-card style="box-sizing:border-box;padding:30px">
<!-- 选择下单的应用列表 -->
<a-form>
<div style="display:flex;flex-direction:row">
<p style="margin-top:9px;margin-right:10px;">应用APPID</p>
<!-- <p style="margin-top:9px;margin-right:10px;"></p> -->
<a-form-item label="" class="table-head-layout">
<a-select v-model="appId" @change="changeAppId" style="width:300px">
<a-select-option key="" >请选择应用</a-select-option>
<a-select-option key="" >应用APPID</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>
<!-- 未配置支付方式提示框 -->
<a-divider v-if="!appId">请选择应用APPID</a-divider>
<a-divider v-else-if="noConfigText">您尚未配置任何支付方式</a-divider>
<a-divider v-else></a-divider>
<!-- 支付测试面板 v-if=""-->
<div style="width: 100%;" class="paydemo" v-if="payTestShow()">
<div class="paydemo-type-content">
<div class="paydemo-type-name" v-show="showTitle('WX')" >微信支付</div>
<div class="paydemo-type-name article-title" v-show="showTitle('WX')" >微信支付</div>
<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')}">
@ -39,7 +44,7 @@
</div>
<div class="paydemo-type-name" v-show="showTitle('ALI')">支付宝支付</div>
<div class="paydemo-type-name article-title" v-show="showTitle('ALI')">支付宝支付</div>
<div class="paydemo-type-body">
<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>
@ -64,7 +69,7 @@
</div>
</div>
<div class="paydemo-type-name" v-show="showJhTitle()">聚合支付</div>
<div class="paydemo-type-name article-title" v-show="showJhTitle()">聚合支付</div>
<div class="paydemo-type-body">
<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>
@ -77,9 +82,10 @@
</div>
</div>
<a-divider ></a-divider>
<!-- 订单信息 -->
<div class="paydemo-type-content">
<div class="paydemo-type-name">支付信息</div>
<div class="paydemo-type-name article-title">支付信息</div>
<form class="layui-form">
<div class="paydemo-form-item">
<label>订单编号：</label><span id="payMchOrderNo">{{ mchOrderNo }}</span>
@ -122,8 +128,8 @@
</div>
</div>
</a-card>
<!-- 二维码弹窗 @closeBarCode="handleCloseBarCode"-->
<pay-test-modal ref="payTestModal" @closeBarCode="$refs.payTestBarCode.visible = false"></pay-test-modal>
<!-- 二维码弹窗 -->
<pay-test-modal ref="payTestModal" @closeBarCode="$refs.payTestBarCode.visible = false" ></pay-test-modal>
<!-- 条码弹框 -->
<pay-test-bar-code ref="payTestBarCode" @barCodeValue="barCodeChange" @CodeAgainChange="testCodeChange"></pay-test-bar-code>
@ -147,7 +153,8 @@ export default {
mchOrderNo: '', // 模拟商户订单号
authCode: '', // 条码的值
paytestAmount: '0.01', // 支付金额，默认为0.01
amountInput: false // 自定金额输入框是否展示
amountInput: false, // 自定金额输入框是否展示
noConfigText: false // 尚无任何配置分割线提示文字
}
},
@ -169,6 +176,7 @@ export default {
this.randomOrderNo()
},
methods: {
// 支付板块是否展示
payTestShow () {
// 如果未选择appid，或者支付方式列表为0，则不显示支付体验板块
@ -209,6 +217,11 @@ export default {
const that = this
payTest(value).then(res => {
that.appPaywayList = res
if (res.length === 0) {
that.noConfigText = true
} else {
that.noConfigText = false
}
})
},
// 立即支付按钮

14
jeepay-ui-merchant/src/views/payTest/PayTestModal.vue
View File

@ -73,7 +73,6 @@ export default {
that.$emit('closeBarCode') // 关闭条码框
} else if (apiRes.orderState === 3) {
that.handleClose()
that.$emit('closeBarCode') // 关闭条码框
that.$infoBox.modalError('支付失败', <div><div>错误码：{ apiRes.errCode}</div>
<div>错误信息：{ apiRes.errMsg}</div></div>)
@ -81,15 +80,18 @@ export default {
return
}
if (wayCode === 'WX_H5' || wayCode === 'ALI_WAP') { // h5 或者 wap
// h5 或者 wap
if (wayCode === 'WX_H5' || wayCode === 'ALI_WAP') {
this.payText = '请复制链接到手机端打开'
} else {
// 跳转到PC网站
if (apiRes.payDataType === 'payurl') {
window.open(apiRes.payData)
}
if (apiRes.payDataType === 'payurl') {
window.open(apiRes.payData)
}
}
// 如果上面未关闭条码框，则代表进入webScoket，那么先在此处关闭条码框
that.$emit('closeBarCode') // 关闭条码框
// 监听响应结果
this.payOrderWebSocket = new ReconnectingWebSocket(getWebSocketPrefix() + '/api/anon/ws/payOrder/' + apiRes.payOrderId + '/' + new Date().getTime())
this.payOrderWebSocket.onopen = () => {}
@ -99,12 +101,10 @@ export default {
that.handleClose()
const succModal = that.$infoBox.modalSuccess('支付成功', <div>2s后自动关闭...</div>)
setTimeout(() => { succModal.destroy() }, 2000)
that.$emit('closeBarCode') // 关闭条码框
} else {
that.handleClose()
that.$infoBox.modalError('支付失败', <div><div>错误码：{ apiRes.errCode}</div>
<div>错误信息：{ apiRes.errMsg}</div></div>)
that.$emit('closeBarCode') // 关闭条码框
}
}
},

4
jeepay-ui-merchant/src/views/payTest/payTest.css
View File

@ -121,4 +121,8 @@
}
.paydemo-form-item label input {
margin-left:3px;
}
.paydemo .article-title {
font-weight: 600
}