zhxg_app/pages/Login/Login.vue

<!-- Login.vue -->
<template>
	<view class="container">
		<view class="logo">
			<image src="/static/logo.png" mode="aspectFit" />
		</view>
		<view class="login-form-content">
			<view class="input-item flex align-center">
				<view class="iconfont icon-user icon"></view>
				<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
			</view>
			<view class="input-item flex align-center">
				<view class="iconfont icon-password icon"></view>
				<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
			</view>
			<view class="action-btn">
				<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
			</view>

			<view class="xieyi text-center">
				<text class="text-grey1">柳州市网信办 柳州职业技术学院</text>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		doLogin
	} from "@/api/login/login.js";
	import {
		getInfo
	} from "@/api/person/person.js";
	export default {
		data() {
			return {
				username: 'admin',
				password: 'Gxsd#admin6379',
				showPassword: false
			};
		},

		methods: {
			login() {
				let sdata = {
					username: this.username,
					password: this.password
				};
				doLogin(sdata).then(res => {
					if (res.code == 200) {
						uni.setStorageSync('token', res.token);
						uni.showToast({
							title: "登录成功",
							icon: "success"
						});
						getInfo().then(res => {
							uni.setStorageSync("roles", res.roles[0])
						})
						uni.switchTab({
							url: "/pages/index/index"
						})
					}
					if (res.code == 500) {
						console.log(res.msg)
						uni.showToast({
							title: res.msg,
							icon: "error"

						})
					} else {
						console.log('11');
					}
				})

			},

			togglePassword() {
				this.showPassword = !this.showPassword;
			},
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.normal-login-container {
		width: 100%;

		.logo-content {
			width: 100%;
			font-size: 21px;
			text-align: center;
			padding-top: 15%;

			image {
				border-radius: 4px;
			}

			.title {
				margin-left: 10px;
			}
		}

		.login-form-content {
			text-align: center;
			margin: 20px auto;
			margin-top: 15%;
			width: 80%;

			.input-item {
				margin: 20px auto;
				background-color: #f5f6f7;
				height: 45px;
				border-radius: 20px;

				.icon {
					font-size: 38rpx;
					margin-left: 10px;
					color: #999;
				}

				.input {
					width: 100%;
					font-size: 14px;
					line-height: 20px;
					text-align: left;
					padding-left: 15px;
				}

			}

			.login-btn {
				margin-top: 40px;
				height: 45px;
			}

			.reg {
				margin-top: 15px;
			}

			.xieyi {
				color: #333;
				margin-top: 20px;
			}

			.login-code {
				height: 38px;
				float: right;

				.login-code-img {
					height: 38px;
					position: absolute;
					margin-left: 10px;
					width: 200rpx;
				}
			}
		}
	}
</style>