jp-charge/pages/login/index.vue

<template>
	<view>
		<view class="login-title">
			<u-icon name="qichexiangguan-chongdianzhan" custom-prefix="custom-icon" color="#1677ff" size="56"></u-icon>
			<h3>电动自行车智能充电系统</h3>
		</view>
		<view class="login-main">
			<u-form :model="form" ref="uForm">
				<u-form-item label="手机号码" prop="phone" label-width="150" label-position="top">
					<u-input   placeholder="请输入手机号" v-model="form.phone" type="number"></u-input>
				</u-form-item>
				<u-form-item label="验证码" prop="code" label-width="150" label-position="top">
					<u-input  placeholder="请输入验证码" v-model="form.code" type="text"></u-input>
					<view class="login-code" @click="getCode">
						{{codeTips}}
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class="login-btn">
			<u-button type="primary" :custom-style="customStyle" @click="finish" shape="square">登录</u-button>
		</view>
		<u-verification-code :seconds="sendMsgSecond" ref="uCode" @change="codeChange" @end="end" @start="start">
		</u-verification-code>
	</view>
</template>

<script>
	import * as API from '@/apis/login.js'

	import {
		checkPhone
	} from '@/utils'
	export default {
		data() {
			return {
				form: {
					phone: '',
					code: '',
				},
					backUrl:"",
						message:"",
				codeTips: '',
				isSendMsgIng: false,
				sendMsgSecond: 60 * 2,
				customStyle: {
					background: '#1677ff'
				}
			}
		},
		onLoad(op){
			
			this.message=op.message;
			this.backUrl=op.back;
		
		},
		methods: {
			codeChange(text) {
				this.codeTips = text;
			},
			//倒计时

			end() {
				this.sendMsgSecond = 2 * 60;
				this.isSendMsgIng = false;
			},
			finish(){
				uni.redirectTo({
						url:'pages/user/index'
					})
				return
				if(!this.carhelp.getOpenId()){
					uni.showToast({
						title:"请使用“微信”访问本系统登录"
					})
					return
				}
				 uni.showLoading({
				   	title:"加载中",mask:true,
				   })
				  API.validateCode({
					verifyCode: this.form.code,
					telephone:this.form.phone,
					openId:this.carhelp.getOpenId(),
				
				  }).then((response) => {
				 		 var token = response ? response.data.token : '';
				 		 this.carhelp.setToken(token);
						 this.carhelp.setPersonInfo(response.data.jobUser );
						//this.gotoUrl("pages/user/index")
						uni.redirectTo({
								url:'/pages/user/index'
							})
						// if(this.backUrl){
						// 	window.location.href="#"+this.backUrl.split(",").find(function(item){
						// 		return item.indexOf("pages/login/")==-1
						// 	});
						// }else{
							
						// }
				 }).catch(error => {
				 	uni.showToast({
				 				title:error,
				 				icon:"none"
				 	})
				 })
			},
			start() {
				if (!this.isSendMsgIng) {
					this.carhelp.set("getvcodetime", new Date().getTime());
					console.log("模拟发送成功")
					return
					
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					API.getVerifyCode(this.form.phone).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"
						})
					})


				}
			},
			// 获取验证码
			getCode() {
				if(this.$refs.uCode.canGetCode) {
								
				} else {
					
					uni.showToast({
						title: '倒计时结束后再发送',
						icon: "none"
					})
					return
				}
				
				var checkPhoneResult = checkPhone(this.form.phone);
				
				if (false&&checkPhoneResult !== true) {
					uni.showToast({
						title: checkPhoneResult,
				
					})
					return;
				}
				this.$refs.uCode.start();
			}
		},onReady(){ 
			if(!this.carhelp.getOpenId()){
				uni.showToast({
					title:"请使用“微信”访问本系统登录"
				})
				return
			}else if(this.message){
				uni.showToast({
					title:this.message.split(",")[0],
					icon:"none"
				})
			}
			var time = this.carhelp.get("getvcodetime");
			if (time) {
				//this.$refs.uCode.start();
				var nowtime = new Date().getTime()
				var differ = (nowtime - time) / 1000
				if (differ < 2 * 60) {
					this.sendMsgSecond = 2 * 60 - parseInt(differ)
					this.isSendMsgIng = true;
					this.$refs.uCode.start();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-title {
		display: flex;
		align-items: center;
		margin: 40px 30px;

		h3 {
			font-size: 20px;
			margin-left: 10rpx;
			color: #1677ff;
			font-weight: normal;
		}
	}

	.login-main {
		margin: 0 30px;
	}

	.login-btn {
		margin: 30px;
	}

	.login-code {
		color: #1677ff;
	}
</style>