uni-zhks-app/pages/login/login.vue

<template>
	<view class="content">
		<view class="logo">
			<image src="../../static/logo.png" mode="aspectFit"></image>
		</view>
		<view class="title">
			<text>宁夏煤业枣泉煤矿</text>
		</view>

		<view class="login_box">
			<view class="item">
				<view class="name">工号</view>
				<view class="input">
					<input type="text" value="" v-model="user.username"/>
				</view>
				<view class="icon icon_avatar"></view>
			</view>
			<view class="item">
				<view class="name">密码</view>
				<view class="input">
					<input type="password" value="" v-model="user.password"/>
				</view>
				<view class="icon icon_password"></view>
			</view>
		</view>

		<view class="tips">
			<text>忘记密码？请联系信息科管理员重置</text>
		</view>

		<view class="login_btn" @click="loginBtn()">
			<text>登录</text>
		</view>

	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				user:{
					username:'123456',
					password:'Zhks123456+'
				}
			};
		},
		onLoad() {
			
		},
		methods: {
			
			loginBtn(){
				const user = this.user
				// 判断是否为空
				if(user.username == '' || user.password == ''){
					uni.showToast({
						icon:"none",
						title:"请填写用户信息"
					})
					return false
				}
				// 登录逻辑，
				// 1.在登录页，根据填写的账号密码，然后正常请求。获取返回值。在你这个项目里面，access_token是登录token
				// 2.将token保存在localstorge里面，让他在其他界面可以用的到。
				// 3.在需要登录的地方，将token带上，就实现了登录。你这个项目里面，header里面的Authorization是登录验证参数，然后赋予localstorge里面的值。其他的就按正常请求即可。
				// 注意点：有时候token需要拼接一下。例如你这个项目。将type和access_token拼接
				uni.request({
					method: "POST",
					url: "http://colliery.nxjiewei.com/api/oauth/token", //登录接口
					data: {
						username: user.username,
						password: user.password
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {
						console.log(res)
						if( res.data.code === 0 ){
							uni.showToast({
								icon:"none",
								title:"登录成功"
							})
							uni.setStorageSync('Authorization', res.data.data.access_token)
							uni.setStorageSync('token_type', res.data.data.token_type)
							
							uni.setStorage({
							    key: 'user',
							    data: res.data.data.user,
							    success: function () {
							        console.log(res.data.data.user);
							    }
							});
							
							setTimeout(function(){
								uni.switchTab({
								    url: '../tabbar/my/my'
								});
							},1500);
							
							
						}else if( res.data.code === 1001 ){
							uni.showToast({
								icon:"none",
								title:"用户不存在"
							})
						}else if( res.data.code === 1002 ){
							uni.showToast({
								icon:"none",
								title:"密码错误"
							})
						}else{
							return false
						}
					},
					fail: (res) => {
						uni.showToast({
							icon:"none",
							title:res
						})
					}
				});
			}
					
		}

	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		background-image: url(../../static/Bitmap.png);
		background-size: cover;
		background-repeat: no-repeat;

		.logo {
			width: 344rpx;
			height: 350rpx;
			margin: 0 auto;
			padding-top: 229rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			margin: 0 auto;
			margin-top: 32rpx;
			width: 288rpx;
			height: 47rpx;
			font-size: 36rpx;
			font-family: MicrosoftYaHei;
			color: #FFFFFF;
			line-height: 47rpx;
			text-align: center;
		}

		.login_box {
			margin-top: 65rpx;

			.item {
				margin: 0 auto;
				margin-bottom: 34rpx;
				width: 500rpx;
				height: 86rpx;
				background: #FFFFFF;
				border-radius: 96rpx;
				padding-left: 40rpx;
				// padding-top: 19rpx;
				padding-right: 40rpx;
				box-sizing: border-box;
				display: flex;

				.name {
					width: 80rpx;
					font-size: 33rpx;
					font-family: MicrosoftYaHei;
					color: #009FE8;
					line-height: 86rpx;
				}

				.input {
					width: 280rpx;
					height: 86rpx;

					input {
						height: 86rpx;
						line-height: 86rpx;
						color: #666;
					}
				}

				.icon {
					margin-top: 19rpx;
				}

				.icon_avatar {
					margin-left: 10rpx;
					width: 50rpx;
					height: 49rpx;
					background-image: url(icon/Avatar.png);
					background-size: cover;
					background-repeat: no-repeat;
				}

				.icon_password {
					margin-left: 18rpx;
					width: 42rpx;
					height: 48rpx;
					background-image: url(icon/Password.png);
					background-size: cover;
					background-repeat: no-repeat;
				}
			}
		}

		.tips {
			margin: 0 auto;
			margin-top: 46rpx;
			width: 531rpx;
			height: 44rpx;
			font-size: 28rpx;
			font-family: MicrosoftYaHei;
			color: #ECF0F1;
			line-height: 44rpx;
			text-align: center;

		}

		.login_btn {
			margin: 0 auto;
			margin-top: 45rpx;
			width: 384rpx;
			height: 100rpx;
			background: rgba(100, 220, 255, 0.8);
			border-radius: 50rpx;
			text-align: center;
			line-height: 100rpx;

			text {
				font-size: 40rpx;
				font-family: MicrosoftYaHei;
				color: #FFFFFF;
				letter-spacing: 1rpx;
			}
		}
	}
</style>