txCar/pages/login/login.vue

<template>
	<view>
	<view class="container" :style="'height:'+ screenHeight +'px !important;'" v-if="isload">
		  <!--  <image :src="bgImg" mode="" class="bgimg"></image> -->
			
			<view class="box" >
				<!-- <image src="../../static/img/login_text.png" mode="" class="loginLogo"></image> -->
				 <view class="" >
					 <button class="wxlogin" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" >微信用户快捷登录</button>
				 </view> 
				
				<view class="iphoneLogin" @click="iphoneLogin">使用手机号登录</view>
				<view>
					
					
				</view>
				<view class="privacy" @click="privacyClick">
					<image src="../../static/img/login_icon_checked.png" mode="" class="imgPrivacy" v-show="privacyCk"></image>
					<view class="nock" v-show="!privacyCk"></view>
					<span>同意</span> <span class="span1" @click.stop="goTreaty">《服务协议》</span>
					<span>与</span> <span class="span1" @click.stop="goIntimity">《隐私政策》 </span>
				</view>
			</view>
	</view>	
	</view>
	

</template>

<script>
export default {
	data() {
		return {
			screenHeight: '',
			bgImg:'http://phone.66km.cn:8088/thFiles/4E3EB990-959E-4933-9B29-C09C8074CFEA.png',
			privacyCk:true,
			wxdata:'',
			wxCode:'',
			openID:'',
			session_key:'',
			wxPhoneData:'',
			wxOpendata:'',
			isload:false,
		}
	},
	onLoad() {
       this.screenHeight = uni.getSystemInfoSync().windowHeight;
	   // console.log( this.screenHeight)
	   this.wxOpendata=uni.getStorageSync("wxOpendata");
	   this.wxdata=uni.getStorageSync("wxdata");
	   if(this.wxOpendata){
	   	  this.isload=true;
	   }else{
	   		uni.redirectTo({
	   			url:'empower?type=1'
	   		}) 
	   }
	},
	methods: {
		goTreaty(){
			uni.navigateTo({
				url:'../me/treaty'
			})
		},
		goIntimity(){
			uni.navigateTo({
				url:'../me/intimity'
			})
		},
		 getPhoneNumber: function(e) {
		     console.log(e.detail);
			this.wxPhoneData=e.detail;
			this.gologin()
		             
		 },
		 gologin(){
			 var that=this;
			 this.$http('worldKeepCar/sys/wxLogin', {
			    openID:this.wxOpendata.openid,
			    encrypData:this.wxPhoneData.encryptedData,
			    iv:this.wxPhoneData.iv,
			    sessionKey:this.wxOpendata.session_key,
			    nickName:this.wxdata.userInfo.nickName,
			    headUrl:this.wxdata.userInfo.avatarUrl,
			  },).then(res => {
			 	//console.log(res)
			 	uni.hideLoading();
			 	if(res.code==0){
			 		uni.setStorage({
			 			key: 'logodata',
			 			data: res.data,
			 			success: function () {
			 			 
			 			}
			 		}); 
			 		uni.showToast({
			 		     title: '登录成功',
			 		 	 icon:'none',
			 		     duration: 3000
			 		 });
			 		 uni.switchTab({
			 			 url:'../index/index'
			 		 }) 
			 	}else{
			 		uni.showToast({
			 		     title: res.msg,
			 		 	 icon:'none',
			 		     duration: 3000
			 		 });
			 	}
			 	
			 })
		 	
		 },
        privacyClick(){
			this.privacyCk=!this.privacyCk
		},
		iphoneLogin(){
			uni.navigateTo({
				url:'iphoneLogin'
			})
		},
		
		
		
	}
}
</script>

<style scoped>
 .bgimg {
        display: contents;
        overflow: hidden;
        position: relative;
    }
	.container{
	        width: 100%;
	        min-height: 100%;
			background: url('http://phone.66km.cn:8088/thFiles/4E3EB990-959E-4933-9B29-C09C8074CFEA.png');
			background-size: 100%;
	}
	.loginLogo{
		width: 215rpx;height: 111rpx;
		
	}
	.box{
		padding-top: 20vh;
		padding-left: 58rpx;
		padding-right: 58rpx;
	}
	.wxlogin{
		width: 634rpx;
		height: 88rpx;
		background: #FF4F00;
		border-radius: 44rpx;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 30rpx;
		margin-top: 200rpx;
	}
	.iphoneLogin{
		width: 634rpx;
		height: 88rpx;
		background: rgba(255,255,255,0.3);
		border-radius: 44rpx;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 30rpx;
		margin-top: 50rpx;
	}
	.privacy{
		display: flex;
		justify-content: center;
		font-size: 24rpx;
		color: #CCCCCC;
		padding-top: 34rpx;
	}
	.imgPrivacy{
		width: 28rpx;
		height: 28rpx;
		margin-top: 2rpx;
		margin-right: 10rpx;
	}
	.span1{
		color: #FF4F00;
	}
	.nock{
		width: 22rpx;
		height: 22rpx;
		border-radius: 50%;
		border:2px solid #AEAEAE;
		margin-top: 2rpx;
		margin-right: 10rpx;
	}
</style>