lineage-app/pages/login/login.vue

<template>
	<view>
		<view class="login">
			<image src="../../static/images/logo.jpg" class="logo"></image>
			<view class="item">
				<text class="icon">&#xe6c9;</text>
				<input type="number" placeholder="输入手机号" v-model="item.mobile" />
			</view>
			<view class="item">
				<text class="icon">&#xe7a1;</text>
				<input type="number" placeholder="输入短信验证码" v-model="item.captcha" />
				<text class="code" @click="captchaSend()">{{ msg }}</text>
			</view>
			<button type="warn" @click="login()">登陆</button>
			<view class="divider"><view>第三方登陆</view></view>
			<view class="third">
				<view class="weixin"><text class="icon">&#xe622;</text></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			item: {},
			msg: '获取短信',
			flag: true,
			time: 60
		};
	},
	methods: {
		//发送验证码
		captchaSend() {
			if (!this.flag) {
				return;
			}
			this.$http.request({
				url: this.$http.urls.captchaSend,
				data: { mobile: this.item.mobile, type: 2 },
				success: res => {
					uni.showToast({ title: '发送成功' });
					//一分钟倒计时
					var countdown = setInterval(() => {
						this.time--;
						if (this.time == 0) {
							this.flag = true;
							this.msg = '获取短信';
							this.time = 60;
							clearInterval(countdown);
						} else {
							this.flag = false;
							this.msg = '重新获取(' + this.time + ')';
						}
					}, 1000);
				}
			});
		},
		//登陆
		login() {
			//数据校验
			let rule = [{ name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' }, { name: 'captcha', checkType: 'notnull', errorMsg: '输入短信验证码' }];
			let checkRes = this.$verify.check(this.item, rule);
			if (!checkRes) {
				uni.showToast({ title: this.$verify.error, icon: 'none' });
				return;
			}
			this.$http.request({
				url: this.$http.urls.login,
				data:this.item,
				method: 'POST',
				success: res => {
					uni.showToast({ title: '登陆成功' });
					uni.setStorageSync('user', res.data.data.user);
					uni.$emit('update');
					uni.navigateBack();
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: $theme-color;
	text-align: center;
}
.login {
	padding: 15px;
	.logo {
		width: 150px;
		height: 150px;
	}
	.item {
		background-color: white;
		padding: 15px;
		margin-top: 15px;
		border-radius: 3px;
		overflow: hidden;
		text-align: left;
		font-size: 14px;
		.icon {
			float: left;
			font-size: 24px;
		}
		input {
			float: left;
			padding-left: 10px;
			width: 50%;
		}
		.code {
			float: right;
			color: #565656;
		}
	}
	button {
		margin-top: 36px;
		width: 85%;
		background-color: #ebb827;
		color: white;
	}
	.divider {
		color: white;
		font-size: 13px;
		margin-top: 76px;
	}
	.third {
		margin-top: 20px;
		.weixin {
			width: 50px;
			height: 50px;
			margin: 0 auto;
			border: 1px solid white;
			border-radius: 50%;
			color: white;
			.icon {
				font-size: 33px;
				line-height: 50px;
			}
		}
	}
}
</style>