JP-ChargeTeam51/pages/login/welcome.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" 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  v-if="branchParameterBl('ud')" width="185px" height="48px" src="@/assets/static/img/logoUd.png"></u-image>
				
				<u-image v-else width="185px" height="48px" src="@/assets/static/img/logo.png"></u-image>
			</view>
		
		</view>
	</view>
</template>

<script>
	import * as loginApi from '@/apis/login.js'
	import * as API from '@/apis/index.js'
		import {
			// newDate,
			// secondsDistance,
			// hourDistanceArr
			currentTimeStamp,
			parseUnixTime,
			
		} from '@/utils'

	export default {
		data() {
			return {
				src:"",
				isReady:true,
				isReady2:false,
				step:2,
				imgH:'',
				imgmode:true
			}
		},
		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();
						
					}
				})
			},
						getTips(){
							var nowtime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}  {h}')
							var time=this.carhelp.get("getTips_$");
							if((time&&nowtime==time)){
								
							}else{
								API.getTips().then((response) => {
									this.carhelp.get("getTips_$",nowtime);
									this.carhelp.setConfigMessage(response.data.tipsList) 				
								}).catch(error => {
									
								})
							}
						},

			 findNoLTextConfigure(){
				 this.getTips()
				 
				 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,	
						branchParameter:process.car.branchParameter
					},
					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(){
				
				try{
					var  img=this.carhelp.getConfig().homepageLogo
						
					if(img){
						this.$refs.imgw.src=img
						//this.src=img
						//document.body.style="background:url("+img+") no-repeat;background-size: 100%;"
					}else{
						//this.src="@/assets/static/img/welcome_bg.png"
						this.$refs.imgw.src="@/assets/static/img/welcome_bg.png"
					}
				}catch(e){
					//TODO handle the exception
				}
			
				
			},
			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( )
			},
			
		},
		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/login'
				})
					//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()
			}
			
			 
		},
		onUnload(){
			document.body.style=""
		},
		onReady() {
			
		}
	}
</script>
<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>