hg_zlxc_h5/pages/application/payment.vue

<template>
	<view class="payMoney pageBg">
		<view class="topCon">
			<view class="price">
				<text>￥</text> {{ $u.utils.priceTo(info.price) }}
			</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.className}}</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/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 class="otherWay" @click="showOtherWay=true" v-if="!showOtherWay">
				<view class="txt">其它付款方式</view>
				<view class="icon">
					<image src="@/static/images/third_icon_gengduoIphone@2x.png" mode=""></image>
				</view>
			</view>
			<view class="zfb" @click="changePayWay(1)" v-else>
				<view class="leftCon">
					<view class="icon">
						<image src="@/static/images/jiaofei_wxIphone@2x.png" mode=""></image>
					</view>
					<view class="text">
						微信支付
					</view>
				</view>
				<view class="rightStatusIcon">
					<image src="@/static/images/jiaofei_zhifu_selectIphone@2x.png" mode="" v-if="payWay==1">
					</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>
		</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: {},
				payWay: 2,
				isPoll: false,
				trainingApplyId: 'dddc910e7eac47ba8b6452f0629ff5f2',
				showOtherWay: false
			}
		},
		onLoad(options) {
			// trainingOrderId=832df06eff634376816c00e812a413c7&trainingApplyId=dddc910e7eac47ba8b6452f0629ff5f2
			this.getTrainingApplyDetailsFn()
			
		},
		
		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)
				setTimeout(()=>{
					uni.navigateTo({
						url: '/pages/application/success'
					})
				},2000)
				const [err, res] = await indexApi.createPrepaid(obj)
				
				if(res.code==0) {
					this.payInfo = res.data
					if (this.payWay == 1) {
						this.wxPay()
					} else {
						this.zfbPay()
					}
				}else {
					this.$u.toast(res.message)
					return false
				}
				uni.hideLoading()
				console.log('this.payInfo支付信息')
				console.log(res)
			},
			// 点击去支付培训费
			async goPay() {
				uni.showLoading({
					title: '创建订单...'
				})
				await this.createPrepaidFn()
				
				
				
			},
			// 轮询定时
			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.location.href = 'paymoney://car:8898/carstep'
				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
				
				 //调⽤APP交互
				 var par = {username:"gh_012fd4bda1c2",path:'/pages/payment/payment?tokenCode=' + this.payInfo.tokenCode,miniProgramType:"0"}
				 this.$u.utils.appPostMessage("jumpWXMiniProgram",par);
				
				uni.hideLoading()
			},
			// 查询报名详情-
			async getTrainingApplyDetailsFn() {
				if(!this.trainingApplyId) return
				const [err, res] = await indexApi.getTrainingApplyDetails({ trainingApplyId: this.trainingApplyId })
				console.log('查询报名详情')
				console.log(res)
				this.schoolPayInfo = res.data
				this.trainingOrderId = res.data.trainingOrderId
				
				if(!this.trainingOrderId) {
					// // 创建订单
					let obj = {
						trainingApplyId: res.data.trainingApplyId,
						trainingClassId: res.data.trainingClassId,
						trainingSchoolId: res.data.trainingSchoolId,
					}
					const [err2, res2] = await indexApi.createOrder(obj)
					console.log('****创建的订单***')
					console.log(res2)
					this.trainingOrderId = res2.data
					setTimeout(()=>{
						 this.getOrderDetailsFn()
					},1000)
				}
				
				await this.getOrderDetailsFn()
				
			},
			// 获取订单信息
			async getOrderDetailsFn(poll) {
				if(!this.trainingOrderId) return
				const [err, res] = await indexApi.getOrderDetails({
					trainingOrderId: this.trainingOrderId
				})
				console.log('******')
				console.log(res.data)
				this.info = res.data
				if(!poll) return
				if(this.info.orderStatus !=0&&this.currenPoll==1) {
					console.log('停止订单轮询')
					clearInterval(polling)
					polling = null
					timerNum = 1
					if(!info.examinationPrice) {
						uni.navigateTo({
							url: 'pages/learnDriveStep/payMoney/payMoneySuccess'
						})
					}else {
					}
				}
				if(this.info.examinationStatus !=0&&this.currenPoll==2) {
					console.log('停止考务轮询')
					console.log(polling)
					clearInterval(polling)
					polling = null
					uni.navigateTo({
						url: 'pages/learnDriveStep/payMoney/payMoneySuccess'
					})
				}
				console.log('订单详情')
				console.log(res)
			},
			
 		}
	}
</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>