jp-railway/pages/index/index.vue

<template>
	<view>
	<view class="welcome">
		
		<view class="welcome-state1" >
			<view class="welcome-next" style="z-index: 999;" @click="gotoIndex()">{{step?step+'|':''}}跳过</view>
			
		</view>
		
		<u-image  id="imgw"
		 height="auto"
		 v-if="imgmode"   @load="imgsload" ref="imgw"   mode="widthFix">
			<view slot="loading"></view>
			<view slot="error"></view>
		</u-image>
		
		<u-image   v-if="!imgmode"  :height="imgH"   mode="aspectFill">
			<view slot="loading"></view>
			<view slot="error"></view>
		</u-image>
		
		<view class="welcome-foot">
			<u-image width="185px" height="48px" src="/static/logo.png"></u-image>
		</view>
	
	</view>
	</view>
</template>

<script>
	import * as loginApi from '@/apis/login.js'
	import * as API from '@/apis/index.js'
	
	export default {
		data() {
			return {
				isReady:true,
				isReady2:false,
				step:2,
				imgH:'',
				imgmode:true
			}
		},
		onUnload(){
			document.body.style=""
		},
		onReady() {
			
		},
		onLoad(op) {
			this.findNoLTextConfigure()
			this.findByOpenId()
			if(op.friends){
				
				this.carhelp.set("friends_invitation",{
					op:op,
					date:new Date().getTime()
				})
				uni.redirectTo({
					url:'/pages/login/index'
				})
					//this.onReadyIng()
			}else  if(op.gunId){
				var k=API.codeOperation("jp_team51_charge_id:A_"+op.gunId);
				if(k){
					uni.redirectTo({
						url:k
					})
				}
			
			}else if(op.jpcode){
				
				var k=API.codeOperation(op.jpcode);
				if(k){
					uni.redirectTo({
						url:k
					})
				}
							
			}else{
				
				this.onReadyIng()
			}
		},
		methods: {
			
				imgsload(e){
					 
					
					uni.getSystemInfo({
						success: (res) => {
							//(res)
							
							const query = uni.createSelectorQuery().in(this);
							query.select('#imgw').boundingClientRect(data => {
							  //("得到布局位置信息" + JSON.stringify(data));
							  //("节点离页面顶部的距离为" + data.height);
							  var windowH=res.windowHeight;
							  var imgH= data.height;
							  var value=windowH-imgH;
							  //(value)
							  if(value>=100){
								  this.imgmode=true
								  document.getElementsByClassName("welcome-foot")[0].style="height:"+value+"px"
							  }else{
								  this.imgmode=false
								  
							  }
							}).exec();
							
						}
					})
				},
				 findNoLTextConfigure(){
					 API.getTips().then((response) => {
					 				
					 	this.carhelp.setConfigMessage(response.data.tipsList) 
					
					 }).catch(error => {
					 	
					 })
					 
					 loginApi.findNoLTextConfigure().then((response) => {
					
					 	this.carhelp.setConfig(response.data.configure) 
					 	this.setBackImg()
					 }).catch(error => {
					 	uni.showToast({
					 		title: error,
					 		icon: "none"
					 	})
					 })
				 },
				findByOpenId(){
					
					var openId=this.carhelp.getOpenId()
					if(openId==""){
						//("--------findByOpenId----------")
						setTimeout(()=>{
							this.findByOpenId()
						},1000)
						return
					}
					uni.request({
						method:'get',
						url: process.car.BASE_URL + "/mobile/regUser/findByOpenId",
						data: {
							openId:openId,			
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
							'X-Requested-With': 'XMLHttpRequest',
						}
					}).then((response) => {
						let [error, res] = response;
						 
						if (res.data.code == 200&&res.data.result) {			
							var token = res ? res.data.data.token : '';					
							this.carhelp.setPersonInfo(res.data.data.regUser );
							this.carhelp.setToken(token);
							
							this.carhelp.setPersonInfoPlus(res.data.data);
						
						} else{
							this.carhelp.logoff()
						}
						this.isReady2=true;
						
					}).catch(error => {
						
					
					})
				},
				setBackImg(){
					var  img=this.carhelp.getConfig().homepageLogo
						
							if(img){
								this.$refs.imgw.src=img
								//document.body.style="background:url("+img+") no-repeat;background-size: 100%;"
							}else{
								this.$refs.imgw.src="/static/welcome_bg.png"
							}
					if(this.$refs.imgw){	}
					
					
				},
				gotoIndex(){
					if(this.isReady){
						this.isReady=false
						uni.redirectTo({
							url: '/pages/index/index'
						});
					}
					
				},
				indexstep(){
						setTimeout(()=>{
							
							this.step--;
							if(this.step<0){
								if(this.isReady2){
									this.gotoIndex()
								}else{
									this.step=0;
									this.indexstep()
								}
								
							}else{
								
								this.indexstep()
							}
							
						},1000)
				},
				onReadyIng(){
					//let state = {};
					uni.getSystemInfo({
						success: (res) => {
							 var windowH=res.windowHeight;
							this.imgH=(windowH-100)+"px";
							
						}
					})
									
					this.indexstep()
					this.setBackImg( )
				},
		}
	}
</script>

<style  lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.logo {
			height: 200rpx;
			width: 200rpx;
			margin-top: 200rpx;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 50rpx;
		}
	}

	/* .logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	} */

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
<style>
	page{
		
		background-color: #ffffff;
	}
</style>
<style  lang="scss" scoped>
	.welcome{
		position: relative;
	}
	.welcome-next{
		position: absolute;
		padding: 4px 15px;
		color:#fff;
		border-radius: 14px;
		background:rgba(0,0,0,0.5);
		right: 15px;
		top: 15px;
	}
	.welcome-foot{
		position:fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		height: 100px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.welcome-logo{
		position: absolute;
		left: 50%;
		margin-left: -100px;
		top: 120px;
	}
	.welcome-btn{
		position: fixed;
		left: 48px;
		right: 48px;
		bottom:48px;
		text-align: center;
		.welcomeBtn{
			color:#009143;
			border-color:#fff;
		}
		p{
			color:#fff;
			margin-top: 12px;
			font-size: 16px;
		}
	}
</style>