JP-ChargeTeam51/pages/login/login.vue

<template>
	<view class="wrap">
		<view class="login">
			<view class="login-title">
				<h3>手机号登录/注册</h3>
				<p>欢迎来到荆易充</p>
			</view>
			
			<view class="login-form">
				<view class="login-form-item">
					<view class="title">手机号</view>
					<view class="input">
						<u-input 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 v-model="form.verifyCode" type="number" placeholder="请输入验证码" placeholder-style="font-size:16px;color:#ccc;"/>
						<view class="code" @click="getCode">{{codeTips}}</view>
					</view>
					<u-checkbox-group>
						<u-checkbox class="tips" v-model="value" shape="circle" @change="checkboxChange()">
							<view v-if="!form.telephone && !value">我已阅读并同意<span>《会员协议》</span>和<span>《隐私协议》</span></view>
							<view v-else>我已阅读并同意<span style="color: #000000;">《会员协议》</span>和<span style="color: #000000;">《隐私协议》</span></view>
						</u-checkbox>
					</u-checkbox-group>
				</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 {
		checkPhone
	} from '@/utils'
	
	export default {
		data() {
			return {
				form: {
					telephone: '',
					verifyCode: '',
				},
				isSendMsgIng: false,
				sendMsgSecond: 60,
				codeTips: '',
				value: false,
			}
		},
		computed: {
			inputStyle() {
				let style = {};
				if(this.form.telephone) {
					style.color = "#fff";
					style.backgroundColor = this.$u.color['success'];
				}
				return style;
			}
		},
		methods: {
			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,
				})		
				loginApi.validateCode({
					verifyCode: this.form.verifyCode,
					telephone: this.form.telephone,
					nickName: this.carhelp.getUserInfo().nickname,
					openId: this.carhelp.getOpenId(),
				}).then((response) => {
					uni.hideLoading();
					
					var token = response ? response.data.token : '';
					this.carhelp.setToken(token);
					this.carhelp.setPersonInfo(response.data.regUser);
					
					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>
.wrap {
	font-size: 28rpx;
	.login {
		width: 600rpx;
		padding-top: 80rpx;
		margin: 0 auto;
		.login-title {
			text-align: left;
			h3{
				font-size: 48rpx;
				font-weight: normal;
			}
			p{
				margin-top: 4px;
				color:#777
			}
		}
		.login-form-item{
			margin-top: 40px;
			.title{
				margin-bottom: 8px;
			}
			.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;
				font-size: 12px;
				span{
					color:#3fbd70;
				}
			}
		}
	
		.login-btn {
			margin-top: 40px;
			background-color: #a7dbc2;
		}
		.alternative {
			color: $u-tips-color;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
		}
	}
}
</style>