1. 增加错误提示弹窗 2，增加按钮loading
This commit is contained in:
ssyang1993
parent
2093182e52
commit
1fb3ab8dc7
|
|
@ -13,12 +13,13 @@
|
|||
"dependencies": {
|
||||
"@ant-design-vue/pro-layout": "^1.0.7",
|
||||
"@antv/data-set": "^0.10.2",
|
||||
"ant-design-vue": "^1.7.2",
|
||||
"@antv/g2plot": "^2.3.21",
|
||||
"@antv/util": "^2.0.13",
|
||||
"ant-design-vue": "^1.7.2",
|
||||
"axios": "^0.19.0",
|
||||
"core-js": "^3.1.2",
|
||||
"enquire.js": "^2.1.6",
|
||||
"js-base64": "^2.5.2",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"lodash.get": "^4.4.2",
|
||||
"lodash.pick": "^4.4.0",
|
||||
|
|
@ -26,6 +27,7 @@
|
|||
"mockjs2": "1.0.8",
|
||||
"moment": "^2.24.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"reconnectingwebsocket": "^1.0.0",
|
||||
"store": "^2.0.12",
|
||||
"viser-vue": "^2.4.6",
|
||||
"vue": "^2.6.10",
|
||||
|
|
@ -36,9 +38,7 @@
|
|||
"vue-router": "^3.1.2",
|
||||
"vue-svg-component-runtime": "^1.0.1",
|
||||
"vuex": "^3.1.1",
|
||||
"wangeditor": "^3.1.1",
|
||||
"js-base64": "^2.5.2",
|
||||
"reconnectingwebsocket": "^1.0.0"
|
||||
"wangeditor": "^3.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@ant-design/colors": "^3.2.1",
|
||||
|
|
|
|||
|
|
@ -16,7 +16,9 @@ import './utils/filter' // global filter
|
|||
import './global.less' // global style
|
||||
import 'ant-design-vue/dist/antd.less'
|
||||
import infoBox from '@/utils/infoBox'
|
||||
import VueClipboard from 'vue-clipboard2' // 复制插件
|
||||
|
||||
Vue.use(VueClipboard) // 复制插件
|
||||
Vue.config.productionTip = false
|
||||
|
||||
// use pro-layout components
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
<JeepayTableColumns>
|
||||
<a-button type="link" v-if="$access('ENT_MCH_PAY_TEST')">
|
||||
<router-link :to="{name:'ENT_MCH_PAY_TEST', params:{appId:record.appId}}">
|
||||
支付体验
|
||||
支付测试
|
||||
</router-link>
|
||||
</a-button>
|
||||
<a-button type="link" v-if="$access('ENT_MCH_APP_EDIT')" @click="editFunc(record.appId)">修改</a-button>
|
||||
|
|
|
|||
|
|
@ -114,8 +114,8 @@
|
|||
</a-radio-group>
|
||||
|
||||
</div>
|
||||
<div style="margin-top:20px;text-align: right">
|
||||
<span style="color: #FD482C;font-size: 18px;padding-right: 10px;" id="amountShow">{{ paytestAmount }}</span>
|
||||
<div style="margin-top:20px;text-align: left">
|
||||
<!-- <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>
|
||||
|
|
@ -147,8 +147,7 @@ export default {
|
|||
mchOrderNo: '', // 模拟商户订单号
|
||||
authCode: '', // 条码的值
|
||||
paytestAmount: '0.01', // 支付金额，默认为0.01
|
||||
amountInput: false, // 自定金额输入框是否展示
|
||||
barCodeAgain: true // 判断条码是否为，第二次吊起支付按钮,默认为true
|
||||
amountInput: false // 自定金额输入框是否展示
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -215,7 +214,7 @@ export default {
|
|||
// 立即支付按钮
|
||||
immediatelyPay () {
|
||||
// 判断支付金额是否为0
|
||||
if (this.paytestAmount === 0.00 || this.paytestAmount === ' ' || this.paytestAmount === undefined) {
|
||||
if (!this.paytestAmount || this.paytestAmount === 0.00) {
|
||||
return this.$message.error('请输入支付金额')
|
||||
}
|
||||
|
||||
|
|
@ -225,14 +224,9 @@ export default {
|
|||
}
|
||||
|
||||
// 判断是否为条码支付
|
||||
if (this.currentWayCode === 'WX_BAR' || this.currentWayCode === 'ALI_BAR' || this.currentWayCode === 'AUTO_BAR') {
|
||||
// 此处判断是否是条码支付，同时让条码弹窗的输入框处于焦点状态，当在点击提交，或者扫码盒自动提交时，返回条码信息
|
||||
// 此处返回一个值，代表他是条码要第二次吊起支付按钮，第二次吊起后，要将其清空
|
||||
if (this.barCodeAgain) {
|
||||
if (!this.$refs.payTestBarCode.getVisible() && (this.currentWayCode === 'WX_BAR' || this.currentWayCode === 'ALI_BAR' || this.currentWayCode === 'AUTO_BAR')) {
|
||||
this.$refs.payTestBarCode.showModal()
|
||||
this.barCodeAgain = false
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const that = this
|
||||
|
|
@ -246,10 +240,9 @@ export default {
|
|||
authCode: this.authCode
|
||||
}).then(res => {
|
||||
that.$refs.payTestModal.showModal(this.currentWayCode, res) // 打开弹窗
|
||||
that.barCodeAgain = true // 将条码的判断还原为true
|
||||
that.randomOrderNo() // 刷新订单号
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
}).catch(() => {
|
||||
that.$refs.payTestBarCode.processCatch()
|
||||
that.randomOrderNo() // 刷新订单号
|
||||
})
|
||||
},
|
||||
|
|
@ -282,7 +275,6 @@ export default {
|
|||
|
||||
// 条码弹窗点击x或者蒙版关闭
|
||||
testCodeChange () {
|
||||
this.barCodeAgain = true
|
||||
this.randomOrderNo() // 刷新订单号
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<p>请输入用户条形码:</p>
|
||||
<div style="display:flex;flex-direction:row;margin-bottom:14px;">
|
||||
<a-input v-model="barCodeValue" ref="barCodeInput" @keyup.enter="handleOk"></a-input>
|
||||
<a-button @click="handleOk" type="primary" style="margin-left:10px;" >确认支付</a-button>
|
||||
<a-button @click="handleOk" type="primary" style="margin-left:10px;" :loading="loading">确认支付</a-button>
|
||||
</div>
|
||||
<p>或者使用(扫码枪/扫码盒)扫码:</p>
|
||||
<div style="text-align:center">
|
||||
|
|
@ -20,11 +20,13 @@ export default {
|
|||
data () {
|
||||
return {
|
||||
visible: false,
|
||||
barCodeValue: '' // 条码的值
|
||||
barCodeValue: '', // 条码的值
|
||||
loading: false // 按钮的loading状态
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showModal () {
|
||||
this.loading = false
|
||||
this.barCodeValue = ''// 清空条码的值
|
||||
this.visible = true
|
||||
this.$nextTick(() => { // 弹窗展示后，输入框默认展示焦点
|
||||
|
|
@ -34,12 +36,23 @@ export default {
|
|||
|
||||
// 按钮的点击事件，当使用扫码设备扫码后，也会自动吊起该事件
|
||||
handleOk () {
|
||||
if (this.barCodeValue === '') {
|
||||
return
|
||||
}
|
||||
|
||||
// 传递条码值给父组件
|
||||
this.loading = true
|
||||
this.$emit('barCodeValue', this.barCodeValue)
|
||||
},
|
||||
handleChose () {
|
||||
// 点击×关闭，或者点击蒙版关闭时，设置父组件barCodeAgain的值为false
|
||||
this.$emit('CodeAgainChange')
|
||||
},
|
||||
getVisible () {
|
||||
return this.visible
|
||||
},
|
||||
processCatch () {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@
|
|||
<a-modal v-model="visible" title="等待支付" @ok="handleClose" :footer="null" :width="300">
|
||||
<div style="width:100%;margin-bottom:20px;text-align:center">
|
||||
<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>
|
||||
<span v-else-if="apiRes.payDataType == 'payurl'">等待用户支付 <hr> 如浏览器未正确跳转请点击： <a :href="apiRes.payData" target="_blank">支付地址</a><a-button size="small" class="copy-btn" v-clipboard:copy="apiRes.payData" v-clipboard:success="onCopy" >复制链接</a-button></span>
|
||||
<span v-else>等待用户支付,请稍后</span>
|
||||
</div>
|
||||
<p class="describe">
|
||||
<img src="@/assets/payTestImg/wx_app.svg" alt="" v-show="wxApp"><!-- 微信图标 -->
|
||||
|
|
@ -31,6 +32,11 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
onCopy () {
|
||||
this.$message.success('复制成功')
|
||||
},
|
||||
|
||||
// 二维码以及条码弹窗
|
||||
showModal (wayCode, apiRes) {
|
||||
const that = this
|
||||
|
|
@ -45,6 +51,7 @@ export default {
|
|||
this.visible = true // 打开弹窗
|
||||
|
||||
// 根据不同的支付方式，展示不同的信息
|
||||
this.payText = ''
|
||||
if (wayCode === 'WX_NATIVE' || wayCode === 'WX_JSAPI') { // 微信二维码
|
||||
this.wxApp = true
|
||||
this.payText = '请使用微信"扫一扫"扫码支付'
|
||||
|
|
@ -61,20 +68,27 @@ export default {
|
|||
if (apiRes.orderState === 2 || apiRes.orderState === 3) {
|
||||
if (apiRes.orderState === 2) {
|
||||
that.handleClose()
|
||||
that.$message.success('支付成功')
|
||||
const succModal = that.$infoBox.modalSuccess('支付成功', <div>2s后自动关闭...</div>)
|
||||
setTimeout(() => { succModal.destroy() }, 2000)
|
||||
that.$emit('closeBarCode') // 关闭条码框
|
||||
} else if (apiRes.orderState === 3) {
|
||||
that.handleClose()
|
||||
that.$message.error('支付失败')
|
||||
|
||||
that.$emit('closeBarCode') // 关闭条码框
|
||||
that.$infoBox.modalError('支付失败', <div><div>错误码：{ apiRes.errCode}</div>
|
||||
<div>错误信息：{ apiRes.errMsg}</div></div>)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (wayCode === 'WX_H5' || wayCode === 'ALI_WAP') { // h5 或者 wap
|
||||
this.payText = '请复制链接到手机端打开'
|
||||
} else {
|
||||
// 跳转到PC网站
|
||||
if (apiRes.payDataType === 'payurl') {
|
||||
window.open(apiRes.payData)
|
||||
}
|
||||
}
|
||||
|
||||
// 监听响应结果
|
||||
this.payOrderWebSocket = new ReconnectingWebSocket(getWebSocketPrefix() + '/api/anon/ws/payOrder/' + apiRes.payOrderId + '/' + new Date().getTime())
|
||||
|
|
@ -83,11 +97,13 @@ export default {
|
|||
const resMsgObject = JSON.parse(msgObject.data)
|
||||
if (resMsgObject.state === 2) {
|
||||
that.handleClose()
|
||||
that.$message.success('支付成功')
|
||||
const succModal = that.$infoBox.modalSuccess('支付成功', <div>2s后自动关闭...</div>)
|
||||
setTimeout(() => { succModal.destroy() }, 2000)
|
||||
that.$emit('closeBarCode') // 关闭条码框
|
||||
} else {
|
||||
that.handleClose()
|
||||
that.$message.error('支付失败')
|
||||
that.$infoBox.modalError('支付失败', <div><div>错误码：{ apiRes.errCode}</div>
|
||||
<div>错误信息：{ apiRes.errMsg}</div></div>)
|
||||
that.$emit('closeBarCode') // 关闭条码框
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue