lipin/pages/users/login/index.vue

<template>
	<view class="login" :style="{ 'height': setHeight + 'px' }">
		<view class="logo">
			<image src="../../../static/images/logo.png"></image>
			<view>登录巴巴礼品网</view>
		</view>
		<div class="form">
			<form @submit.prevent="submit">
				<div class="item">
					<div class="acea-row row-middle">
						<image src="../../../static/images/phone_1.png"></image>
						<input type="text" placeholder="请输入绑定的手机号" placeholder-class="placeholder" v-model="userName" required />
					</div>
				</div>
				<div class="item">
					<div class="acea-row row-middle">
						<image src="../../../static/images/code_2.png"></image>
						<input type="password" placeholder="请输入登录密码" placeholder-class="placeholder" v-model="password" required />
					</div>
				</div>
			</form>
			<view class="goto">
				<navigator hover-class="none" url="/pages/users/retrievePassword/index">
					忘记密码?
				</navigator>
				<navigator class="zhuce" hover-class="none" url="/pages/users/register/index">
					注册账号
				</navigator>
			</view>
			<view class="btn" @click="submit">登录</view>
			<navigator class="return" hover-class="none" url="/pages/index/index" open-type='switchTab'>继续浏览<text class="iconfont icon-jiantou"></text></navigator>
		</div>
	</view>
</template>

<script>
	import {
		loginApi
	} from '@/api/api.js';
	const BACK_URL = "login_back_url";
	export default {
		data() {
			return {
				setHeight: 0,
				userName: '',
				password: ''
			}
		},
		mounted() {
		    let that = this
		    uni.getSystemInfo({
				success: function (res) {
					that.setHeight = res.windowHeight
				}
		    })
		},
		methods: {
			async submit() {
				let that = this;
				if (!that.userName) return that.$util.Tips({
					title: '请填写账号'
				});
				if (!/^[\w\d]{5,16}$/i.test(that.userName)) return that.$util.Tips({
					title: '请输入正确的账号'
				});
				if (!that.password) return that.$util.Tips({
					title: '请填写密码'
				});
				loginApi({
					check: true,
					userName: that.userName,
					passWord: that.password
				}).then(res => {
					that.$store.commit("LOGIN", {
						'token': res.data.token,
						'time': 2592000
					});
					that.$store.commit("UPDATE_USERINFO", res.data.user_info);
					const backUrl = that.$Cache.get(BACK_URL) || "/pages/index/index";
					that.$Cache.clear(BACK_URL);
					if (backUrl === '/pages/index/index' || backUrl === '/pages/users/purchase/index' || backUrl ===
						'/pages/my/index') {					
						uni.switchTab({
							url: backUrl
						});					
					} else {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}
				}).catch(err => {
					that.$util.Tips({
						title: err
					});
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.login{
		padding-top: 200rpx;
		background: #fff;
	}
	.logo{
		text-align: center;
		image{
			width:140rpx;
			height:140rpx;
		}
		view{
			font-size: 32rpx;
			font-weight: 700;
			letter-spacing: 10rpx;
			color:#262626;
		}
	}
	.form{
		padding: 40rpx;
		.item {
		    border-bottom: 1rpx solid #ededed;
		    padding: 45rpx 0 20rpx 0;
			image{
				width:40rpx;
				height:40rpx;
				margin-right: 20rpx;
			}
			input{
				flex-grow: 1;
			}
			.placeholder{
				color:#ccc;
			}
		}
		.goto{
			display: flex;
			justify-content: space-between;	
			margin-top: 45rpx;
			color:#666;
			.zhuce{
				color:#ff5c00;
			}
		}
		.btn{
			font-size: 35rpx;
			color: #fff;
			height: 86rpx;
			border-radius: 40rpx;
			background: linear-gradient(90deg,#f35447 0,#ff8e3c);
			text-align: center;
			line-height: 86rpx;
			margin-top: 70rpx;
		}
		.return{
			color:#666;
			text-align: right;
			margin-top: 30rpx;
			.iconfont{
				font-size: 23rpx;
			}
		}
	}
</style>