工行这里学车报名流程h5
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

363 lines
7.4 KiB

<template>
<view class="payMoney pageBg">
<view class="topCon">
<view class="price">
<text></text> {{ $u.utils.priceTo(info.balance) }}
</view>
<view class="schoolName">
{{ info.schoolName}}
</view>
</view>
<view class="cardInfoPadding">
<view class="cardInfo">
<view class="flex-box-s">
<text>学车类型</text>
<text>{{ info.trainingModel}}</text>
</view>
<view class="flex-box-s">
<text>学车班型</text>
<text>{{info.trainingClassName}}</text>
</view>
</view>
</view>
<view class="payWay">
<view class="zfb" @click="changePayWay(2)">
<view class="leftCon">
<view class="icon">
<image src="@/static/images/jiaofei_zfbIphone@2x.png" mode=""></image>
</view>
<view class="text">
支付宝支付
</view>
<!-- <view class="recommendIcon">
<image src="@/static/images/icon/third_img_tuijianIphone@2x.png" mode=""></image>
</view> -->
</view>
<view class="rightStatusIcon">
<image src="@/static/images/jiaofei_zhifu_selectIphone@2x.png" mode="" v-if="payWay==2">
</image>
<image src="@/static/images/jiaofei_zhifu_unselectIphone@2x.png" mode="" v-else></image>
</view>
</view>
</view>
<view class="payBtnBox">
<view class="payBtn bgLinear" @click="goPay">确认支付</view>
<!-- <oneBtn text="确认支付" @oneBtnClick="goPay"></oneBtn> -->
</view>
</view>
</template>
<script>
import indexApi from '@/api/index.js'
let polling = null
let timerNum = 0
export default {
data() {
return {
info: {
schoolName: '翔力驾校',
balance: 120,
},
payInfo: {},
isPoll: false
}
},
onLoad(options) {
this.getChangeModelDetailsFn()
},
onShow() {
// 判断是否要轮询
if(this.isPoll) this.isPoll()
},
methods: {
// 轮询
async getPrepaidResultFn() {
const [err, res] = await learnDriveApi.getChangeModelPrepaidResult({outTradeNo: this.payInfo.outTradeNo})
if(res.code==0) {
uni.switchTab({
url: '/pages/tabbar/userCenter/userCenter'
})
}
console.log(res)
},
// 切换支付方式
changePayWay(num) {
this.payWay = num
},
// car://paymoney/carstep:8888
// zlxcpay://
// 创建培训费支付
async createPrepaidFn() {
const latLng = await this.$u.utils.getLocation()
let obj = {
clientIp: '127.0.0.1',
deviceId: 'IMEI',
deviceType: '1',
ipType: '04',
riskType: '01',
verifyRt: '01',
verifyTp: '01',
latitude: latLng.lat,
longitude: latLng.lng,
payType: this.payWay,
fromAppurl: 'paymoney://car:8898/carstep',
trainingOrderId: this.info.trainingOrderId,
}
console.log(obj)
const [err, res] = await businessHanldApi.createChangeModelPrepaid(obj)
if(res.code==0) {
this.payInfo = res.data
}else {
uni.hideLoading()
this.$u.toast(res.message)
return false
}
console.log('this.payInfo支付信息')
console.log(res)
},
// 点击去支付培训费
async goPay() {
this.$goPage('/pages/application/success')
uni.showLoading({
title: '创建订单...'
})
await this.createPrepaidFn()
this.zfbPay()
// if(this.payInfo.appURL) {
// if (this.payWay == 1) {
// this.wxPay()
// } else {
// }
// }
},
// 轮询定时
pollFn() {
polling = setInterval(async ()=>{
timerNum ++
if(timerNum>30) {
clearInterval(polling)
polling = null
}
await this.getPrepaidResultFn()
},1000)
},
zfbPay() {
uni.hideLoading()
let url = encodeURIComponent(this.payInfo.appURL)
this.isPoll = true
let urls = `alipays://platformapi/startapp?appId=10000007&qrcode=${url}`
console.log('支付宝路径')
console.log(this.payInfo.appURL)
console.log(urls)
// #ifdef APP-PLUS
plus.runtime.openURL(urls)
// #endif
// #ifdef H5
window.open(urls)
// #endif
},
wxPay() {
this.isPoll = true
// #ifdef APP-PLUS
this.sweixin ? this.sweixin.launchMiniProgram({
// path: '/pages/payment/payment?paymoney='+this.info.price+'&ordersn='+this.payInfo.outTradeNo+'&tokenCode='+ this.payInfo.tokenCode, //跳转小程序页面路径 pages/index/index
path: '/pages/payment/payment?tokenCode=' + this.payInfo.tokenCode, //跳转小程序页面路径 pages/index/index
type: 0, //可取值: 0-正式版; 1-测试版; 2-体验版。 默认值为0。
id: 'gh_012fd4bda1c2' //小程序的原始id
}) : plus.nativeUI.alert('当前环境不支持微信操作!');
// #endif
uni.hideLoading()
},
}
}
</script>
<style lang="scss" scoped>
.payMoney {
min-height: 100vh;
.topCon {
text-align: center;
padding: 116rpx 0 72rpx 0;
.price {
font-size: 56rpx;
color: #E63633;
text {
font-size: 24rpx;
}
}
.schoolName {
font-size: 28rpx;
color: #666;
}
}
.cardInfoPadding {
padding: 20rpx 32rpx;
}
.cardInfo {
background-color: #fff;
border-radius: 16rpx;
padding: 0 16px;
.flex-box-s {
height: 120rpx;
line-height: 120rpx;
display: flex;
justify-content: space-between;
&:last-child {
border-top: 1px solid #f7f7f7;
}
text {
font-size: 28rpx;
color: #333;
}
}
}
.payWay {
padding: 0 32rpx;
.otherWay {
display: flex;
background-color: #fff;
border-radius: 16rpx;
padding: 0 16px;
height: 120rpx;
justify-content: center;
align-items: center;
.txt {
font-size: 28rpx;
color: #999;
}
.icon {
width: 20rpx;
height: 12rpx;
image {
width: 100%;
height: 100%;
display: block;
}
margin-left: 16rpx;
}
}
.zfb {
background-color: #fff;
border-radius: 16rpx;
padding: 0 16px;
height: 120rpx;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.leftCon {
display: flex;
align-items: center;
.icon {
width: 48rpx;
height: 48rpx;
image {
display: block;
width: 100%;
height: 100%;
}
}
.text {
font-size: 32rpx;
color: #333;
margin: 0 10rpx 0 20rpx;
}
.recommendIcon {
width: 64rpx;
height: 34rpx;
image {
width: 100%;
height: 100%;
display: block;
}
}
}
.rightStatusIcon {
width: 42rpx;
height: 42rpx;
image {
display: block;
width: 100%;
height: 100%;
}
}
}
}
}
.payBtnBox {
position: fixed;
bottom: 0;
left: 0;
padding: 32rpx;
display: flex;
align-items: center;
width: 100vw;
height: 128rpx;
background: #FFFFFF;
box-shadow: 0px -1px 0px 0px #E8E9EC;
.payBtn {
width: 100%;
height: 96rpx;
background: linear-gradient(180deg, #3593FB 0%, #53D3E5 100%);
border-radius: 50rpx;
line-height: 96rpx;
text-align: center;
font-size: 36rpx;
color: #fff;
}
}
.footBox {
display: flex;
padding: 0 32rpx;
justify-content: space-between;
.btn {
width: 48%;
height: 98rpx;
background: #2168FC;
border-radius: 16rpx;
color: #fff;
text-align: center;
line-height: 98rpx;
&.border {
background: none;
border: 1px solid #2168FC;
color: #2168FC;
}
}
}
</style>