jyz/pages/public/login.vue

<template>
	<view class="container">
		<view class="container_text">
			<image class="banner-img" src="/static/img/img001.png" mode="scaleToFill"></image>
		</view>
		<view class="loginTitle"><text>登录</text></view>
		<view class="login_text">
			<view class="login_input flex">
				<view class="login_img"><image src="/static/icon/img03.png"></image></view>
				<view class="login_name"><input class="uni-input" v-model="username" focus placeholder="请输入手机号" /></view>
			</view>
			<view class="login_input flex">
				<view class="login_img"><image src="/static/icon/img04.png"></image></view>
				<view class="login_name"><input class="uni-input" type="password" v-model="passward" focus placeholder="请输入密码" /></view>
			</view>
			<view><button type="green" class="uni-button uni-button-green" @click="toLogin">登录</button></view>
			<view><button type="green" class="uni-button uni-button-green uni-button-green-plain" plain="true" hover-class="none" @click="register">注册</button></view>
			<navigator url="./forget"><view class="forget">忘记密码</view></navigator>
			<!-- <view class="flex other">
				<view class="fenge"></view>
				<view class="qita">其他方式登录</view>
				<view class="fenge"></view>
			</view>
			<view class="weixin" @click="wecahtLogin"><image src="/static/img/img05.png"></image></view> -->
			<!-- <view class="weixin_text">微信登录</view> -->
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
import { login } from '@/api/login.js';
export default {
	data() {
		return {
			username: '',
			passward: '',
			// #ifdef APP-PLUS
			// 保存当前是否为微信浏览器
			weixinB:false,
			// #endif
		};
	},
	onLoad() {
		console.log(this.$store.state.hasLogin)
		this.weixinB=uni.getStorageSync('weichatBrowser')
	},
	methods: {
		...mapMutations(['setUserInfo','login']),
		//登录
		async toLogin() {
			let obj = this;
			obj.logining = true;
			if (obj.username == '') {
				obj.$api.msg('请输入手机号');
				return;
			}
			if (obj.passward == '') {
				obj.$api.msg('请输入密码');
				return;
			}
			login({
				account:obj.username,
				password:obj.passward
			})
				.then(function(e) {
					obj.login();
					obj.$store.state.hasLogin = true;
					uni.setStorageSync('token',e.data.userinfo.token);
					obj.setUserInfo(e.data.userinfo);
					//调用注册接口，成功跳转首页
					uni.switchTab({
						url: '/pages/index/index'
					});
				})
				.catch(function(e) {
					console.log(e);
				});
		},
		//跳转注册页
		register() {
			uni.navigateTo({
				url: `/pages/public/register`
			});
		},
		//跳转忘记密码
		forget() {
			uni.navigateTo({
				url: `/pages/public/forget`
			});
		},
		// 后退
		navBack() {
			uni.navigateBack();
		}
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
}
.container {
	width: 100%;
	height: 100%;
	background-size: 100%;
}
.container_text {
	width: 100%;
	height: 500rpx;
	top: 0rpx;
	.banner-img {
		width: 100%;
		height: 100%;
	}
}
.login_text {
	margin: auto 30rpx;
	position: relative;
	padding: 100rpx 102rpx;
	background-color: #ffffff;
	margin-top: -180rpx;
	border-radius: 20rpx;
	.login_input {
		border-bottom: 1px solid #f0f0f0;
		margin-bottom: 65rpx;
		.login_img image {
			height: 35rpx;
			width: 29rpx;
			margin-right: 20rpx;
		}
		.uni-input {
			text-align: left;
			width: 470rpx;
			font-size: 28rpx !important;
		}
		.login_name {
			color: #333333;
		}
	}

	.other {
		margin-top: 60rpx;
		.fenge {
			width: 30%;
			height: 2rpx;
			background-color: #eeeeee;
		}
		.qita {
			font-size: 28rpx;
			color: #999999;
		}
	}
	.weixin {
		width: 75rpx;
		height: 75rpx;
		margin: 25rpx auto;
	}
	.weixin image {
		width: 100%;
		height: 100%;
	}
	.weixin_text {
		text-align: center;
		font-size: 28rpx;
		color: #999999;
	}
	.forget {
		font-size: 28rpx;
		width: 100%;
		text-align: right;
		color: #999999;
	}

	.uni-button-green {
		color: #ffffff;
		background-color: #5dbc7c;
		margin: 40rpx 10rpx;
		border-radius: 50rpx;
	}
	.uni-button-green-plain {
		border: 1px solid #5dbc7c;
		margin: 40rpx 10rpx;
		border-radius: 50rpx;
		color: #5dbc7c;
		background-color: #ffffff;
	}
	.uni-button {
		height: 85rpx;
		line-height: 85rpx;
	}
}
.loginTitle {
	position: absolute;
	top: 250rpx;
	width: 100%;
	text-align: center;
	color: white;
	font-size: 40rpx;
}
</style>