JP-ChargeTeam51/pages/login/login.vue

<template>
	<view class="wrap">
		<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;" ><{{activityInfo.name}}></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" @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>
</template>

<script>
	import * as loginApi from '@/apis/login.js'
	import * as API from '@/apis/index.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,
				sendMsgSecond: 60,
				codeTips: '',
				value: false,
				code: '',
				codeId: '',
				projectName:'',
			}
		},
		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=obj.activityInfo;
				}
				
			}
			
			
		},
		onReady() {
			this.elderMode = this.carhelp.get('getElderModeClass')  == '长辈模式';
			if(this.elderMode)
				this.theme('elder')
			else
				this.theme('standard')
		},
		methods: {
			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;
			},
			// 获取验证码
			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();
			},
			checkboxChange() {
				this.value = !this.value;
			},
			login() {
				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.carhelp.getUserInfo().nickname;
				this.form.headImg=this.carhelp.getUserInfo().headimgurl;
				this.form.openId= this.carhelp.getOpenId();
				loginApi.validateCode(this.form).then((response) => {
					uni.hideLoading(); 
					
					var token = response ? response.data.token : '';
					this.carhelp.setToken(token);
					this.carhelp.setPersonInfo(response.data.regUser);
					this.carhelp.set("getElderModeClass", false);
					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'
						})
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	@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>