TmOct5/dou_fire
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

新增扫码付款

Browse Source
This commit is contained in:
唐明明
2023-05-09 14:56:00 +08:00
parent 51a76ff3d0
commit 88055e6052
5 changed files with 250 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

264
pages/pay/pay.vue
View File

@@ -16,24 +16,10 @@
</view>
<radio class="choose-radio" value="coin" :checked="payMethod == 'coin'"></radio>
</label>
<!-- <label class="choose-item nowrap">
<view class="choose-text">
<image src="@/static/icons/pay_code.png" mode="aspectFill"></image>
付款码支付
</view>
<radio class="choose-radio" value="code"></radio>
</label> -->
<label class="choose-item nowrap" v-if="Number(total) <= 5000">
<view class="choose-text">
<image src="@/static/icons/pay_ali.png" mode="aspectFill"></image>
支付宝支付
</view>
<radio class="choose-radio" value="ali" :checked="payMethod == 'ali'"></radio>
</label>
<label class="choose-item nowrap">
<view class="choose-text">
<image src="@/static/icons/pay_wechat.png" mode="aspectFill"></image>
微信支付
微信支付(银联)
</view>
<radio class="choose-radio" value="wx" :checked="payMethod == 'wx'"></radio>
</label>
@@ -44,6 +30,13 @@
</view>
<radio class="choose-radio" value="dgwx" :checked="payMethod == 'dgwx'"></radio>
</label>
<label class="choose-item nowrap" v-if="Number(total) <= 10000">
<view class="choose-text">
<image src="@/static/icons/pay_ali.png" mode="aspectFill"></image>
支付宝支付(银联)
</view>
<radio class="choose-radio" value="ali" :checked="payMethod == 'ali'"></radio>
</label>
<label class="choose-item nowrap">
<view class="choose-text">
<image src="@/static/icons/pay_ali.png" mode="aspectFill"></image>
@@ -51,6 +44,13 @@
</view>
<radio class="choose-radio" value="dgali" :checked="payMethod == 'dgali'"></radio>
</label>
<label class="choose-item nowrap">
<view class="choose-text">
<image src="@/static/icons/pay_code.png" mode="aspectFill"></image>
付款码支付
</view>
<radio class="choose-radio" value="code"></radio>
</label>
</radio-group>
</view>
<view class="deduction" v-if="(payMethod == 'wx' || payMethod == 'ali' || payMethod == 'dgwx' || payMethod == 'dgali') && payType != 'free'">
@@ -73,6 +73,28 @@
<input class="deduction-input" type="number" placeholder="输入火力值" v-model="deductionVal" @blur="blurDeductionVal">
</view>
</view>
<!-- 扫码付二维码 -->
<u-popup
:show="payCodeShow"
mode="center"
round="10px">
<view class="qrpay">
<view class="title">支付二维码</view>
<view class="src">
<l-painter class="qrcode-src">
<l-painter-qrcode
:text="payQrUrl"
css="width: 280rpx; height: 280rpx;"
/>
</l-painter>
</view>
<view class="time">请使用{{payQrType == 'app' ? '微信': '支付宝'}}扫码</view>
<view class="btns">
<button class="btn cancel" @click="onCancel">取消支付</button>
<button class="btn confirm" @click="onGetOrderPayState">我已支付</button>
</view>
</view>
</u-popup>
<!-- 确认支付 -->
<view class="payBtn">
<button size="default" @click="onPay">支付</button>
@@ -97,49 +119,16 @@
orderNo : '',
balance : 0,
isDeduction : false,
deductionVal: ''
deductionVal: '',
// 二维码支付
payCodeShow : false,
payQrUrl : '',
payQrType : ''
};
},
onShow() {
if(this.getState && this.trade_id != ''){
// 查询支付状态
uni.showLoading({
title: '查询支付结果...',
mask : true
})
let outTime;
let resNumb = 0;
outTime = setInterval(() => {
if(resNumb >= 3){
clearInterval(outTime)
uni.showToast({
title: '暂未查询到你的支付订单',
icon : 'none'
})
return
}
umsState(this.trade_id).then(res => {
resNumb++
if(res.state === 'success'){
clearInterval(outTime)
wx.showModal({
title : '提示',
content : '支付成功',
showCancel : false,
confirmColor: '#446EFE',
success : () => {
this.onRrmoveItem()
}
})
}
}).catch(err => {
clearInterval(outTime)
uni.showToast({
title: err.message,
icon : 'none'
})
})
}, 2000)
this.onGetOrderPayState()
}
},
created() {
@@ -183,6 +172,53 @@
})
},
methods: {
// 查询订单状态
onGetOrderPayState(){
// 查询支付状态
uni.showLoading({
title: '查询支付结果...',
mask : true
})
let outTime;
let resNumb = 0;
outTime = setInterval(() => {
if(resNumb >= 3){
clearInterval(outTime)
uni.showToast({
title: '暂未查询到你的支付订单',
icon : 'none'
})
return
}
umsState(this.trade_id).then(res => {
resNumb++
if(res.state === 'success'){
clearInterval(outTime)
wx.showModal({
title : '提示',
content : '支付成功',
showCancel : false,
confirmColor: '#446EFE',
success : () => {
this.onRrmoveItem()
}
})
}
}).catch(err => {
clearInterval(outTime)
uni.showToast({
title: err.message,
icon : 'none'
})
})
}, 2000)
},
// 取消支付
onCancel(){
this.payCodeShow = false,
this.payQrUrl = '',
this.payQrType = ''
},
// 抵扣金额
onDeductionSwitch(e){
this.deductionVal = ''
@@ -203,9 +239,21 @@
if(this.payType == 'diff') this.onDiffCoinPay()
break;
case 'code':
uni.showToast({
title: '付款码支付暂未开放，请敬期待',
icon : 'none'
uni.showActionSheet({
itemList:["微信付款码", "支付宝付款码"],
success : actionRes => {
console.log(actionRes.tapIndex)
if(actionRes.tapIndex === 0){
if(this.payType == 'price') this.onDgPay('app', true)
if(this.payType == 'diff') this.onDgDiffPay('app', true)
if(this.payType == 'free') this.onDgFreePay('app', true)
}
if(actionRes.tapIndex === 1){
if(this.payType == 'price') this.onDgPay('app_alipay', true)
if(this.payType == 'diff') this.onDgDiffPay('app_alipay', true)
if(this.payType == 'free') this.onDgFreePay('app_alipay', true)
}
}
})
break;
case 'wx':
@@ -219,19 +267,19 @@
if(this.payType == 'free') this.onFreePay('app_alipay')
break;
case 'dgwx':
if(this.payType == 'price') this.onDgPay('app')
if(this.payType == 'diff') this.onDgDiffPay('app')
if(this.payType == 'free') this.onDgFreePay('app')
if(this.payType == 'price') this.onDgPay('app', false)
if(this.payType == 'diff') this.onDgDiffPay('app', false)
if(this.payType == 'free') this.onDgFreePay('app', false)
break;
case 'dgali':
if(this.payType == 'price') this.onDgPay('app_alipay')
if(this.payType == 'diff') this.onDgDiffPay('app_alipay')
if(this.payType == 'free') this.onDgFreePay('app_alipay')
if(this.payType == 'price') this.onDgPay('app_alipay', false)
if(this.payType == 'diff') this.onDgDiffPay('app_alipay', false)
if(this.payType == 'free') this.onDgFreePay('app_alipay', false)
break
}
},
// 斗拱支付
onDgPay(type){
onDgPay(type, code){
uni.showLoading({
title: '加载中...',
mask : true
@@ -242,15 +290,24 @@
fire : this.deductionVal || 0,
app_schema : 'doufire://'
}).then(res => {
let { params, trade_id } = res;
uni.hideLoading()
// 二维码支付
if(code){
this.onDgPayCode(type, params, trade_id)
return
}
// 转跳付款
this.getState = true
this.trade_id = trade_id
if(type == 'app'){
let jumpUrl = JSON.parse(res.miniapp_data)
let jumpUrl = JSON.parse(params.miniapp_data)
plus.runtime.openURL(jumpUrl.scheme_code)
}
if(type == 'app_alipay'){
plus.runtime.openURL(res.jump_url)
plus.runtime.openURL(params.jump_url)
}
}).catch(err => {
console.log(err)
uni.showToast({
title: err.message,
icon : 'none'
@@ -260,7 +317,7 @@
})
},
// 斗拱补差价
onDgDiffPay(type){
onDgDiffPay(type, code){
uni.showLoading({
title: '加载中...',
mask : true
@@ -271,12 +328,22 @@
fire : this.deductionVal || 0,
app_schema : 'doufire://'
}).then(res => {
let { params, trade_id } = res;
uni.hideLoading()
// 二维码支付
if(code){
this.onDgPayCode(type, params, trade_id)
return
}
// 转跳付款
this.getState = true
this.trade_id = trade_id
if(type == 'app'){
let jumpUrl = JSON.parse(res.miniapp_data)
let jumpUrl = JSON.parse(params.miniapp_data)
plus.runtime.openURL(jumpUrl.scheme_code)
}
if(type == 'app_alipay'){
plus.runtime.openURL(res.jump_url)
plus.runtime.openURL(params.jump_url)
}
}).catch(err => {
uni.showToast({
@@ -288,17 +355,31 @@
})
},
// 斗拱自由服务包
onDgFreePay(type){
onDgFreePay(type, code){
uni.showLoading({
title: '加载中...',
mask : true
})
dgFree(this.orderId, {
type,
app_schema : 'doufire://'
}).then(res => {
let { params, trade_id } = res;
uni.hideLoading()
// 二维码支付
if(code){
this.onDgPayCode(type, params, trade_id)
return
}
// 转跳付款
this.getState = true
this.trade_id = trade_id
if(type == 'app'){
let jumpUrl = JSON.parse(res.miniapp_data)
let jumpUrl = JSON.parse(params.miniapp_data)
plus.runtime.openURL(jumpUrl.scheme_code)
}
if(type == 'app_alipay'){
plus.runtime.openURL(res.jump_url)
plus.runtime.openURL(params.jump_url)
}
}).catch(err => {
uni.showToast({
@@ -309,6 +390,13 @@
uni.hideLoading()
})
},
// 抖拱二维码付款
onDgPayCode(type, params, trade_id){
this.trade_id = trade_id
this.payQrUrl = type == 'app_alipay' ? params.jump_url : 'https://dg-pay.douhuofalv.com?miniurlcode=' + encodeURIComponent(JSON.parse(params.miniapp_data).scheme_code)
this.payQrType = type
this.payCodeShow = true
},
// 银联三方支付
onUmsPay(type){
uni.showLoading({
@@ -463,6 +551,36 @@
</script>
<style lang="scss">
// 二维码收款
.qrpay{
padding: 50rpx;
background: white;
width: 80vw;
box-sizing: border-box;
border-radius: 20rpx;
.title{ text-align: center; font-weight: bold; font-size: 40rpx; color: #333; padding-bottom: 50rpx; }
.src{ background: #f8f8f8; width: 300rpx; height: 300rpx; margin: 0 auto; }
.qrcode-src{ width: 300rpx; height: 300rpx; display: flex; align-items: center; justify-content: center; }
.time{ text-align: center; padding-top: 20rpx; font-size: 28rpx; color: gray; }
.btns{
display: flex;
justify-content: center;
padding-top: 50rpx;
.btn{
margin: 0;
height: 90rpx;
line-height: 90rpx;
font-size: 32rpx;
font-weight: bold;
border-radius: 10rpx;
padding: 0 40rpx;
&::after{ display: none; }
&.confirm{ margin-left: 30rpx; background: $main-color; color: white; }
&.cancel{ color: $main-color; border:solid 1rpx $main-color; background: white; box-sizing: border-box; line-height: 87rpx; }
}
}
}
// 支付收银台
.pay{
background: #f8f8f8;
height: 100vh;