hg_zlxc_h5/pages/learnDriveStep/step/step4.vue

<template>
	<view class="step4">
		<view class="txt">
			您的学费将由第三方银行资金监管账户进行资金监管，学车过程中提供详细的扣费明细记录，请放心学车。
			请认谁正规渠道报名学车，谨慎在其它网络平台报名缴费，以免造成损失!
		</view>
		
		<view class="flexB">
			<view class="lab">
				班型名称
			</view>
			<view class="text">
				{{info.schoolName}}
			</view>
		</view>
		
		<view class="flexB">
			<view class="lab">
				班型学费
			</view>
			<view class="text">
				￥{{$u.utils.priceTo(info.price)}}
			</view>
		</view>
		
		<view class="btnBox">
			<oneBtn text="签约" @oneBtnClick="showSignConfirmPopup = true"></oneBtn>
		</view>
		
		<u-popup v-model="showSignConfirmPopup" border-radius="14"  mode="center" >
			<view class="popupCon" style="width: 580rpx">
				<view class="h1">温馨提示</view>
				<view class="p">1. 已了解并知晓学车培训及考试、领证过程中相关需支出费用的明细组成。</view>
				<view class="p">2. 已知晓解除合同，因单方面个人原因需承担的服务费或违约金等支付标准。</view>
				<view class="p">3. 本人身份证在学车培训期间不得交给教练员（或其它无关人员）违规用于记录培训学时，否则由此产生的后果（包括且不限于本人违规记录的学时被不予认可并清零）自行承担。</view>
				<view class="popBtn" @click="signContractFn">知道了，签署合同</view>
			</view>
		</u-popup>
		
		<!-- <web-view :src="webVeiwUrl" v-if="showWebView"></web-view> -->
		
	</view>
</template>

<script>
	import learnDriveApi  from '@/api/learnDrive.js'
	// import signWebView from '../webView/webView.vue'
	export default {
		props: ['trainingApplyId', 'info'],

		data() {
			return {
				showSignConfirmPopup: false,
				showWebView: false,
				webVeiwUrl: ''
			}
		},
		mounted() {
			if(this.showWebView) {
				this.$nextTick(()=>{
					this.shang()
				})
			}
		},
		methods: {
			// 获取签约链接
			async signContractFn() {
				uni.showLoading({
					title: '请稍后',
					mask: true
				})
				const [nulls, res] = await learnDriveApi.signContract({trainingApplyId: this.trainingApplyId})
				console.log('获取签约链接')
				console.log(res)
				if(res.code!=0) return this.$u.toast(res.message)
				// this.showWebView = true
				// this.webVeiwUrl = res.data.url
				// console.log(this.webVeiwUrl)
				uni.hideLoading()
				this.$store.commit('updateWebVeiwUrl',res.data.url)
				this.showSignConfirmPopup = false
				uni.navigateTo({
					url: '/pages/learnDriveStep/webView/webView?id='+ this.trainingApplyId
				})
			},
			shang() {
				let _this = this
				var currentWebview = this.$scope.$getAppWebview();
				setTimeout(()=>{
					console.log('currentWebview')
					console.log(currentWebview)
					let wv = currentWebview.children()[0]
					wv.addEventListener('loaded',function() {
						let webVeiwUrl = wv.getURL()
						console.log(webVeiwUrl)
						var reg = RegExp(/wait/i);
						if(reg.test(webVeiwUrl)){
							console.log('匹配成功了')
						 // uni.navigateTo({
							//  url: '/pages/learnDriveStep/payMoney/payMoney?trainingOrderId='+_this.trainingApplyId
						 // })
						 this.$emit('signSuccess')
						}
						
						console.log('监听到了————————————————————')
						console.log(wv.getURL()) //获取url
						console.log(wv.getTitle()) //获取标题
					}, false);
				},500)
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.step4 {
		width: 100%;
		padding: 32rpx;
		color: #666;
		background: #fff;
		font-size: 32rpx;
	  .txt {
		padding-bottom: 32rpx;
		border-bottom: 2rpx solid #ededed;
	  }
	
	  .flexB {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  height: 100rpx;
	    .lab {
			color: #666;
	    }
	
	    .text {
			color: #333;
	    }
	  }
	
	  .btnBox {
		  width: 100%;
		  padding-top: 42rpx;
	    onebtn {
	
	    }
	  }
	}
	
	.popupCon {
		color: #333;
		.h1 {
			font-size: 32rpx;
			text-align: center;
			line-height: 100rpx;
		}
		.p {
			font-size: 26rpx;
			color: #666;
			margin-bottom: 36rpx;
			padding: 10rpx 42rpx;
		}
		.popBtn {
			border-top: 1px solid #ededed;
			font-size: 36rpx;
			text-align: center;
			color: #1989FA;
			text-align: center;
			height: 110rpx;
			line-height: 110rpx;
		}
	}
</style>