JP-ChargeTeam51/pages/login/login.vue

<template>
	<view class="wrap">
		<ujp-navbar :isBack="false" title="">
			
				<view slot="right" 
				 v-if="!personInfo"
				 @click="touristBl=true" style=" margin-right: 10px;color:#00B962"> 游客模式</view>
		</ujp-navbar>
		
		<view class="login">
			<view class="login-title">
				<h3>手机号登录/注册</h3>
				<p>欢迎来到{{projectName}}</p>
				<p v-if="activityInfo"><span style="color: red;">*</span>正在参加活动<span style="color: #3fbd70;" ><邀请有礼></span></p>
			</view>
			
			<view class="login-form">
				<view class="login-form-item">
					<view class="title">手机号</view>
					<view class="input">
						<u-input :customStyle="customStyle" :placeholderStyle="placeholderStyle" v-model="form.telephone" type="number" placeholder="请输入手机号" placeholder-style="font-size:16px;color:#ccc;"/>
					</view>
					<view class="tips">未注册的手机号验证后将自动注册</view>
				</view>
				<view class="login-form-item">
					<view class="title">验证码</view>
					<view class="input">
						<u-input :customStyle="customStyle" :placeholderStyle="placeholderStyle" v-model="form.verifyCode" type="number" placeholder="请输入验证码" placeholder-style="font-size:16px;color:#ccc;"/>
						<view class="code" :style="isCodeTipsColor ? 'color: #999999;' : ''" @click="getCode">{{codeTips}}</view>
					</view>
					<view style="width: 350px;">
						<u-checkbox-group>
								<u-checkbox class="tips" active-color="green" v-model="value" shape="circle" @change="checkboxChange()"></u-checkbox>				
						</u-checkbox-group>
						<span>我已阅读并同意</span>
						<span @click="gotoUrl('pages/article/details?code=YHXY')" style="color: #3fbd70;">《会员协议》</span>和
						<span @click="gotoUrl('pages/article/details?code=YSZC')" style="color: #3fbd70;">《隐私协议》</span>		
					</view>
				</view>
			</view>		
			<u-button    :style="[inputStyle]" class="login-btn" type="success" shape="circle" @click="login">登录</u-button>
			<u-verification-code :seconds="sendMsgSecond" ref="uCode" @change="codeChange" @end="end" @start="start" change-text="已发送(Xs)">
			</u-verification-code>
		</view>	
		
		<view class="foot" v-if="!show2">
			<span style="color: red;">*</span>我们将使用您的微信昵称及头像，为您补全本平台帐号相关基础信息，请点击下方“<span  style="color: #3fbd70;">使用完整服务</span>”。
		</view>
		<u-modal v-model="show1" @confirm="gotoGz"
		cancel-text="暂不关注"  
		confirm-text="前往关注"
		
		 confirm-color="#53b56b"
			:show-cancel-button="true" 
			ref="uModal2" :asyncClose="true" 
			 >
			<view style="padding: 15px;"
			
			>请先关注<span style=" color:  #53b56b;">{{projectName}}</span>公众号，然后进行会员注册</view>
		</u-modal>
		
		<u-modal v-model="touristBl" 
		:show-cancel-button="true"
		   @confirm="touristConfirm"
		cancel-text="取消"  	confirm-text="游客登录" title="提示">
			<view style="
								text-align: center;
							">
				
			</view>
			<view style="text-align: center;    padding: 10px;">游客身份充电将无法享受平台服务费8.5折及各类优惠券活动哦~</view>
		
		</u-modal>
		
	</view>
</template>

<script>
	import * as loginApi from '@/apis/login.js'
	import * as API from '@/apis/index.js'
	import * as API_weixin from '@/apis/weixin.js'
	
	import {
		checkPhone
	} from '@/utils'
	
	export default {
		data() {
			return {
				elderMode:false,
				customStyle:{
					'font-size':'28rpx'
				},
				placeholderStyle:"font-size:28rpx",
				form: {
					telephone: '',
					verifyCode: '',
				},
				activityInfo:null,
				isSendMsgIng: false,
				isCodeTipsColor: false,
				sendMsgSecond: 60,
				codeTips: '',
				value: false,
				code: '',
				codeId: '',
				projectName:'',
				show1:false,
				show2:false,
				touristBl:false,
				personInfo:null,
				
			}
		},
		computed: {
			inputStyle() {
				let style = {};
				if(this.form.telephone) {
					style.color = "#fff";
					style.backgroundColor = this.$u.color['success'];
				}
				return style;
			}
		},
		onLoad(op) {
			this.projectName=process.car.ProjectName;
			
			if(op.jpcode) {
				
				var str1 = op.jpcode.slice(0,19);
				var str2 = op.jpcode.slice(20,21);
				var str3 = op.jpcode.slice(22);
				
				if(str1 == 'jp_team51_charge_id') {
					if(str2 == 'A') {
						this.code = str2;
						this.codeId = str3;
						uni.showToast({
							title:"注册后享受充电服务"
						})
					}
				} 
				
			}
			var obj=this.carhelp.get("friends_invitation")
			
			if(obj){
				if(obj.date+1000*60*60*24 > new Date().getTime() ){
					this.form.inviteId=obj.op.uid
					this.form.code=obj.op.icode
					this.activityInfo="true";
				}
				
			}
			
			this.personInfo=this.carhelp.getPersonInfo()
			if(this.personInfo){
				if(this.personInfo.userType=="1"){
					
				}else{
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}
			}
			
			
		},
		onReady() {
			this.elderMode = this.carhelp.get('getElderModeClass')  == '长辈模式';
			if(this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')
		},
		onShow() {
			this.checkSubscribe()
		},
		methods: {
			touristConfirm(){
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				this.form.nickName=this.carhelp.getUserInfo().nickname;
				this.form.headImg=this.carhelp.getUserInfo().headimgurl;
				this.form.openId= this.carhelp.getOpenId();
				this.form.source=2//创建渠道1电单车2电车
				
				loginApi.registerGuest(this.form).then((response) => {
					this.loginresponse(response);
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
				
			},
			gotoGz(){
				this.carhelp.setGzDate()
				var url="https://mp.weixin.qq.com/s/mCHz1nNvg0xAICiBeIyKRQ";
				window.location.href=url
				
			},
			checkSubscribe(){
				API_weixin.checkSubscribe({
					openId: this.carhelp.getOpenId() 
				}).then((res) => {
					
					if(res.data=="0"){
						this.show1=true
						
					}else{
						//this.init();
						this.show2=true;
						//this.carhelp.setGzDate() 
						
					}
					
					//setGzDate
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
				
			},
			
			theme(type) {
			  if(type == 'elder')	
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				 let data = { 
				 	"font-size":'32rpx', 
				 };
				 this.customStyle = data;
				 this.placeholderStyle = "font-size:32rpx";//data;
			  }
			  else
			  {
				document.getElementsByTagName('body')[0].setAttribute('data-theme',type);
				  let data  ={ 
				  	"font-size":'28rpx', 
				  };
				  this.customStyle = data;
				  this.placeholderStyle = "font-size:28rpx";//data;
			  } 
			},
			codeChange(text) {
				this.codeTips = text;
			},
			start() {
				if (!this.isSendMsgIng) {
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					loginApi.getVerifyCode(this.form.telephone).then((response) => {
						uni.hideLoading();
						this.carhelp.set("getvcodetime", new Date().getTime());
			
						if (!"") {
							//倒计时
							uni.showToast({
								title: "发送成功"
							})
						} else {
							uni.showToast({
								title: "您的验证码已经发送[5分钟有效]，请勿重复点击"
							})
						}
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				}
			},
			//倒计时
			end() {
				this.sendMsgSecond = 60;
				this.isSendMsgIng = false;
				this.isCodeTipsColor = false;
			},
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {} else {
					uni.showToast({
						title: '倒计时结束后再发送',
						icon: "none"
					})
					return
				}
			
				var checkPhoneResult = checkPhone(this.form.telephone);
			
				if (checkPhoneResult !== true) {
					uni.showToast({
						title: checkPhoneResult,
					})
					return;
				}
				this.$refs.uCode.start();
				this.isCodeTipsColor = true;
			},
			checkboxChange() {
				this.value = !this.value;
			},
			loginresponse(response){
				uni.hideLoading();
				
				var token = response ? response.data.token : '';
				this.carhelp.setToken(token);
				this.carhelp.setPersonInfo(response.data.regUser);
				if(!response.data.regUser.carId){
					var url="/pages/login/completeInfo?login=1"
					
					if(this.code == 'A') {
						url+="&jpcode=jp_team51_charge_id:A_" + this.codeId
					} 	
					uni.redirectTo({
						url:url
					})
					
				}else if(this.code == 'A') {
					
					var k=API.codeOperation("jp_team51_charge_id:A_"+this.codeId);
					if(k){
						uni.redirectTo({
							url:k
						})
					}
					
				} else {
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}
			},
			login() {
				// if(!this.show2){
				// 	this.show1=true;
				// 	return
				// }
				
				var checkPhoneResult = checkPhone(this.form.telephone);
				
				if(!this.form.telephone || checkPhoneResult != true) {
					uni.showToast({
						title: checkPhoneResult,
						icon: "none"
					})
					return;
				}
				if(!this.form.verifyCode) {
					uni.showToast({
						title: "请输入验证码",
						icon: "none"
					})
					return
				}
				if(!this.value) {
					uni.showToast({
						title: "请勾选协议",
						icon: "none"
					})
					return
				}
				 
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				
				//this.form.nickName= this.form.telephone;
				this.form.nickName=this.carhelp.getUserInfo().nickname;
				this.form.headImg=this.carhelp.getUserInfo().headimgurl;
				this.form.openId= this.carhelp.getOpenId();
				this.form.source=2//创建渠道1电单车2电车
				
				
				if(this.personInfo&&this.personInfo.userType=="1"){
					
					loginApi.validateGuestCode(this.form).then((response) => {
						this.loginresponse(response)
						
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				}else{
					loginApi.validateCode(this.form).then((response) => {
						this.loginresponse(response)
						
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				}
				
				
			}
		}
	}
</script>

<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	
	.foot{
		position:fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		
		
		padding: 0 10px;
	}
	
	
	@import "@/_theme.scss";
	.all{
		@include themeify{
			font-size: themed('font-size2');
		}
	}
	/deep/.placeholderStyle {
		font-size: themed('font-size2');
	}
.wrap {
	@include themeify{
		font-size: themed('font-size2');
	}
/*	font-size: 28rpx;*/
	.login {
		width: 600rpx;
		padding-top: 80rpx;
		margin: 0 auto;
		.login-title {
			text-align: left;
			h3{
				@include themeify{
					font-size: themed('font-size7');
				}
/*				font-size: 48rpx;*/
				font-weight: normal;
			}
			p{
				margin-top: 4px;
				color:#777
			}
		}
		.login-form-item{
			margin-top: 40px;
			.title{
				margin-bottom: 8px;
				@include themeify{
					font-size: themed('font-size2');
					font-weight: themed('fontWeight');
					letter-spacing: themed('letterSpacing');
				}
			}
			.input {
				border-bottom: 1px solid #f7f7f7;
				position: relative;
			}
			.code{
				position: absolute;
				right: 0;
				top:7px;
				color:#1677FF;
			}
			.tips {
				color: $u-type-info;
				margin-top: 12px;
				@include themeify{
					font-size: themed('font-size1');
				}
/*				font-size: 12px;*/
				span{
					color:#3fbd70;
				}
			}
		}
	
		.login-btn {
			margin-top: 40px;
			background-color: #a7dbc2;
			@include themeify{
				font-size: themed('font-size3');
 			}
		}
		.alternative {
			color: $u-tips-color;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
		}
	}
}
</style>