471 lines
11 KiB
Vue
471 lines
11 KiB
Vue
<template>
|
|
<view class="pay">
|
|
<!-- 支付金额 -->
|
|
<view class="header">
|
|
<view class="header-title">实付金额</view>
|
|
<view class="header-price"><text>￥</text>{{total}}</view>
|
|
<view class="header-no">订单号:{{orderNo}}</view>
|
|
</view>
|
|
<!-- 选择支付方式 -->
|
|
<view class="choose">
|
|
<radio-group @change="payMethod = $event.detail.value" >
|
|
<label class="choose-item" v-if="payType != 'free'">
|
|
<view class="choose-text nowrap">
|
|
<image src="@/static/icons/pay_alipay.png" mode="aspectFill"></image>
|
|
火力值支付
|
|
</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">
|
|
<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>
|
|
<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>
|
|
</radio-group>
|
|
</view>
|
|
<view class="deduction" v-if="(payMethod == 'wx' || payMethod == 'ali') && payType != 'free'">
|
|
<view class="deduction-item">
|
|
<view class="deduction-label">
|
|
<view class="title">使用火力值抵扣</view>
|
|
<view class="balance">余额:{{balance}}</view>
|
|
</view>
|
|
<u-switch
|
|
activeColor="#446EFE"
|
|
size="20"
|
|
v-model="isDeduction"
|
|
@change="onDeductionSwitch"
|
|
></u-switch>
|
|
</view>
|
|
<view class="deduction-item" v-if="isDeduction">
|
|
<view class="deduction-label">
|
|
<view class="title">使用数量</view>
|
|
</view>
|
|
<input class="deduction-input" type="number" placeholder="输入火力值" v-model="deductionVal" @blur="blurDeductionVal">
|
|
</view>
|
|
</view>
|
|
<!-- 确认支付 -->
|
|
<view class="payBtn">
|
|
<button size="default" @click="onPay">支付</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { info } from '@/apis/interfaces/order.js'
|
|
import { coinPay, diffCoinPay, umsPay, umsState, diffUmsPay, umsFree, umsFreeInfo } from '@/apis/interfaces/pay.js'
|
|
import mixin from 'uview-ui/libs/mixin/mixin';
|
|
export default {
|
|
data() {
|
|
return {
|
|
getState : false,
|
|
trade_id : '',
|
|
orderId : '',
|
|
diffId : '',
|
|
payMethod : 'coin',
|
|
payType : 'price',
|
|
total : '0.00',
|
|
orderNo : '',
|
|
balance : 0,
|
|
isDeduction : false,
|
|
deductionVal: ''
|
|
};
|
|
},
|
|
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)
|
|
}
|
|
},
|
|
created() {
|
|
uni.showLoading({
|
|
title: '获取订单信息...',
|
|
mask : true
|
|
})
|
|
// 自由服务包订单信息
|
|
if(this.$Route.query.paytype === 'free'){
|
|
this.payMethod = "wx"
|
|
umsFreeInfo(this.$Route.query.serviceId).then(res => {
|
|
let { order_id, price, order_no } = res;
|
|
this.orderId = order_id
|
|
this.total = price
|
|
this.orderNo = order_no
|
|
this.payType = this.$Route.query.paytype
|
|
uni.hideLoading()
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
return
|
|
}
|
|
// 其他支付方式订单信息
|
|
info(this.$Route.query.orderId).then(res => {
|
|
let { total, order_no, business_order_id, diff_prices, diff, score } = res
|
|
this.orderId = business_order_id
|
|
this.diffId = diff.business_order_diff_price_id
|
|
this.payType = this.$Route.query.paytype
|
|
this.total = this.payType === 'diff' ? diff_prices: total
|
|
this.orderNo = order_no
|
|
this.balance = score
|
|
uni.hideLoading()
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
// 抵扣金额
|
|
onDeductionSwitch(e){
|
|
this.deductionVal = ''
|
|
},
|
|
// 抵扣金额
|
|
blurDeductionVal(e){
|
|
let { value } = e.target
|
|
let maxVal = Math.min(this.balance, this.total)
|
|
if(value > maxVal){
|
|
this.deductionVal = maxVal
|
|
}
|
|
},
|
|
// 支付方式
|
|
onPay(){
|
|
switch(this.payMethod){
|
|
case 'coin':
|
|
if(this.payType == 'price') this.onCoinPay()
|
|
if(this.payType == 'diff') this.onDiffCoinPay()
|
|
break;
|
|
case 'code':
|
|
uni.showToast({
|
|
title: '付款码支付暂未开放，请敬期待',
|
|
icon : 'none'
|
|
})
|
|
break;
|
|
case 'wx':
|
|
if(this.payType == 'price') this.onUmsPay('app')
|
|
if(this.payType == 'diff') this.onDiffUmsPay('app')
|
|
if(this.payType == 'free') this.onFreePay('app')
|
|
break;
|
|
case 'ali':
|
|
if(this.payType == 'price') this.onUmsPay('app_alipay')
|
|
if(this.payType == 'diff') this.onDiffUmsPay('app_alipay')
|
|
if(this.payType == 'free') this.onFreePay('app_alipay')
|
|
break;
|
|
}
|
|
},
|
|
// 混合支付
|
|
|
|
// 银联三方支付
|
|
onUmsPay(type){
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask : true
|
|
})
|
|
umsPay(this.orderId, {
|
|
type,
|
|
use_fire: this.isDeduction ? 1 : 0,
|
|
fire : this.deductionVal || 0,
|
|
}).then(res => {
|
|
uni.hideLoading()
|
|
this.getState = true
|
|
this.trade_id = res.trade_id
|
|
switch (type){
|
|
case 'app':
|
|
this.onMiniWx()
|
|
break;
|
|
case 'app_alipay':
|
|
plus.runtime.openURL(res.alipay)
|
|
break;
|
|
}
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
// 银联三方补差价支付
|
|
onDiffUmsPay(type){
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask : true
|
|
})
|
|
diffUmsPay(this.diffId, {
|
|
type,
|
|
use_fire: this.isDeduction ? 1 : 0,
|
|
fire : this.deductionVal || 0
|
|
}).then(res => {
|
|
uni.hideLoading()
|
|
this.getState = true
|
|
this.trade_id = res.trade_id
|
|
switch (type){
|
|
case 'app':
|
|
this.onMiniWx()
|
|
break;
|
|
case 'app_alipay':
|
|
plus.runtime.openURL(res.alipay)
|
|
break;
|
|
}
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
// 银联三方自由服务包支付
|
|
onFreePay(type){
|
|
wx.showLoading({
|
|
title: '加载中...',
|
|
mask : true
|
|
})
|
|
umsFree(this.orderId, type).then(res => {
|
|
uni.hideLoading()
|
|
this.getState = true
|
|
this.trade_id = res.trade_id
|
|
switch (type){
|
|
case 'app':
|
|
this.onMiniWx()
|
|
break;
|
|
case 'app_alipay':
|
|
plus.runtime.openURL(res.alipay)
|
|
break;
|
|
}
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
// 火力值支付
|
|
onCoinPay(){
|
|
wx.showLoading({
|
|
title: '支付中...',
|
|
mask : true
|
|
})
|
|
coinPay(this.orderId).then(res => {
|
|
wx.showModal({
|
|
title : '提示',
|
|
content : '代缴费成功，请提醒用户尽快签约并完善资料',
|
|
showCancel : false,
|
|
confirmColor: '#446EFE',
|
|
success : () => {
|
|
this.onRrmoveItem()
|
|
}
|
|
})
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
// 火力值补差价支付
|
|
onDiffCoinPay(){
|
|
diffCoinPay(this.diffId).then(res => {
|
|
wx.showModal({
|
|
title : '提示',
|
|
content : '补缴差价成功',
|
|
showCancel : false,
|
|
confirmColor: '#446EFE',
|
|
success : () => {
|
|
this.onRrmoveItem()
|
|
}
|
|
})
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
// 打开微信小程序收银台
|
|
onMiniWx(){
|
|
let token = this.$store.getters.getToken
|
|
let tradeId = this.trade_id
|
|
plus.share.getServices(e => {
|
|
let wxIndex = e.findIndex(val => val.id == 'weixin')
|
|
let sweixin = null
|
|
if(wxIndex >= 0){
|
|
sweixin = e[wxIndex]
|
|
sweixin ? sweixin.launchMiniProgram({
|
|
id : 'gh_918c81628d6f',
|
|
path: 'pages/pay/pay?type=app&trade_id=' + tradeId + '&token=' + token,
|
|
}): uni.showToast({
|
|
title: '当前环境暂不支持微信支付',
|
|
icon : 'none'
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 更新订单列表
|
|
onRrmoveItem(){
|
|
this.$store.commit('setOrderId', this.orderId)
|
|
this.$Router.back()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.pay{
|
|
background: #f8f8f8;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
padding: 30rpx 30rpx 60rpx;
|
|
box-sizing: border-box;
|
|
.header{
|
|
padding: 80rpx 0 100rpx;
|
|
text-align: center;
|
|
.header-title{
|
|
font-size: 32rpx;
|
|
padding-bottom: 10rpx;
|
|
}
|
|
.header-price{
|
|
font-size: 68rpx;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-weight: bold;
|
|
text{
|
|
font-size: 60%;
|
|
}
|
|
}
|
|
.header-no{
|
|
padding-top: 20rpx;
|
|
font-size: 28rpx;
|
|
color: gray;
|
|
}
|
|
}
|
|
// 支付抵扣
|
|
.deduction{
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
padding: 10rpx 30rpx;
|
|
margin-top: 30rpx;
|
|
.deduction-item{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20rpx 0;
|
|
.deduction-label{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
width: 300rpx;
|
|
.title{ font-size: 32rpx; line-height: 40rpx; }
|
|
.balance{ font-size: 26rpx; color: gray; line-height: 30rpx; margin-top: 5rpx; }
|
|
}
|
|
.deduction-input{
|
|
height: 85rpx;
|
|
width: calc(100% - 300rpx);
|
|
text-align: right;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
// 选择支付方式
|
|
.choose{
|
|
background-color: white;
|
|
border-radius: 20rpx;
|
|
padding: 10rpx 30rpx;
|
|
.choose-item{
|
|
display: block;
|
|
padding: 20rpx 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
&:last-child{
|
|
border-bottom: none;
|
|
}
|
|
.choose-text{
|
|
line-height: 80rpx;
|
|
font-size: 32rpx;
|
|
padding-left: 80rpx;
|
|
position: relative;
|
|
image{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 15rpx;
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
.choose-radio{
|
|
transform:scale(0.8)
|
|
}
|
|
}
|
|
}
|
|
// 按钮
|
|
.payBtn{
|
|
padding: 50rpx 0;
|
|
button[size="default"]{
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
padding: 0;
|
|
border-radius: 20rpx;
|
|
background-color: $main-color;
|
|
color: white;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
&::after{
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|