hg_zlxc_h5/pages/application/success.vue

<template>
	<view class="main">
		<view class="top_row">
			<view class="logo">
				<image src="@/static/images/logo.png" mode=""></image>
			</view>
			<view class="text">浙里学车APP</view>
			<view class="btnSmall" @click="download">立即下载</view>
		</view>
		<view class="slog">
			<view class="iconImg">
				<image src="@/static/images/third_icon_success@2x.png" mode=""></image>
			</view>
			<view class="h3">恭喜您，报名成功！</view>
			<view class="tps">开启您的学车之旅吧</view>
		</view>
		
		<view class="card">
			<view class="h1">下载【浙里学车】</view>
			<view class="text">
				1.分配专属教练；<br/>
				2.跟踪学车进度；<br/>
				3.科目一理论学习；<br/>
				4查看下载签约合同。
			</view>
		</view>
		
		
		<view class="payBtnBox">
			<view class="payBtn bgLinear" @click="download">立即下载</view>
			<!-- <oneBtn text="确认支付" @oneBtnClick="goPay"></oneBtn> -->
		</view>
	</view>
</template>

<script>
	import indexApi from '@/api/index.js'
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			this.getLastVersionFn()
		},
		 methods: {
			 async getLastVersionFn() {
				 let platform = uni.getSystemInfoSync().platform;
				 let appType = platform == 'android'?1:2
				 console.log(platform)
				 const [err, res] = await indexApi.getLastVersion({appType, version:'1.0.0'})
				 console.log(res)
			 },
			 download() {
				 this.$u.toast('需要下载接口')
			 }
		}
	}
	
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		padding-bottom: 128rpx;
	  .top_row {
		  width: 100%;
		  display: flex;
		  height: 112rpx;
		  background: #FFFFFF;
		  box-shadow: 0px 2rpx 0px 0px #E8E9EC, 0px 6px 12px 0px rgba(232,233,236,0.4);
		  align-items: center;
		  padding: 0 32rpx;
	    .logo {
			width: 72rpx;
			height: 72rpx;
	    }
	
	    .text {
			font-size: 36rpx;
			color: #333;
			padding: 0 0 0 16rpx;
			flex: 1;
	    }
	
	    .btnSmall {
			width: 144rpx;
			height: 56rpx;
			border: 2rpx solid  rgba(53, 147, 251, 1);
			// border-image: linear-gradient(180deg, rgba(53, 147, 251, 1), rgba(83, 211, 229, 1)) 2 2;
			border-radius: 36rpx;
			font-size: 28rpx;
			color: #1989FA;
			line-height: 56rpx;
			text-align: center;
	    }
	  }
	
	  .slog {
		 display: flex;
		 flex-direction: column;
		 align-items: center;
		 padding: 90rpx 0 74rpx 0;
	    .iconImg {
			width: 96rpx;
			height: 96rpx;
	    }
	
	    .h3 {
			font-size: 36rpx;
			color: #373A43;
			margin: 32rpx 0 22rpx 0;
	    }
	
	    .tps {
			font-size: 28rpx;
			color: #696B72;
	    }
	  }
	
	  .card {
		  width: 80%;
		  height: 374rpx;
		  background:  #fff;
		  border-radius: 32rpx;
		  margin: 0 auto;
		  padding: 48rpx;
	    .h1 {
			font-size: 32rpx;
			color: #333;
			padding: 16rpx 0;
			font-weight: 600;
	    }
	
	    .text {
			font-size: 28rpx;
			color: #333;
			line-height: 1.5em;
	      br {
	
	      }
	    }
	  }
	
	  .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;
	  	}
	  }
	}
</style>