jp-charge/pages/login/index.vue

<template>
	<view>

		<div class="vongi-login-logo" style="
			text-align: center;
			margin-top: 40px;">
			<img src="@/assets/img/logo_xiaopengguanjia.png" style="
			   width: 72px;
			   height: 72px;
			   border-radius: 15px;
			" />
			<div style="
				color: rgba(16, 16, 16, 100);
				font-size: 18px;
				text-align: center;
				font-family: PingFangSC-regular;
			">小鹏管家</div>
		</div>
		<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;
			if (op.phone) {
				this.form.phone = op.phone;
			}

		},
		methods: {
			codeChange(text) {
				this.codeTips = text;
			},
			//倒计时

			end() {
				this.sendMsgSecond = 2 * 60;
				this.isSendMsgIng = false;
			},
			finish() {

				if (!this.carhelp.getOpenId()) {
					uni.showToast({
						title: "请使用“微信”访问本系统登录"
					})
					return
				}
				if (!this.form.phone) {
					uni.showToast({
						title: "请输入手机号"
					})
					return
				}
				if (!this.form.code) {
					uni.showToast({
						title: "请输入验证码"
					})
					return
				}

				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var headImg = "";
				var userInfo = this.carhelp.get("xpgj_wx_user_info")
				if (userInfo) {

					headImg = userInfo.headimgurl;
				}


				API.validateCode({
					verifyCode: this.form.code,
					telephone: this.form.phone,
					openId: this.carhelp.getOpenId(),
					headImg: headImg
				}).then((response) => {
					var token = response ? response.data.token : '';
					this.carhelp.setToken(token);
					this.carhelp.setPersonInfo(response.data.regUser);
					//this.gotoUrl("pages/user/index")
					uni.redirectTo({
						url: '/pages/index/index'
					})

				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			start() {
				if (!this.isSendMsgIng) {


					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();
			},
			query(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.findByOpenId({
					
					openId: this.carhelp.getOpenId(),
					
				}).then((response) => {
					
					var token = response ? response.data.token : '';
					this.carhelp.setToken(token);
					this.carhelp.setPersonInfo(response.data.regUser);
					//this.gotoUrl("pages/user/index")
					uni.redirectTo({
						url: '/pages/index/index'
					})
				
				}).catch(error => {
					uni.hideLoading();
					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();
						}
					}
					
				})
			}
		},
		onReady() {
			this.query()
			
		}
	}
</script>

<style lang="scss" scoped>
	.login-title {
		display: flex;
		align-items: center;
		margin: 25px 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>