gwlz/jp-mobile/pages/login/login.vue

<template>
	<view class="main">
		<view id="box">
			<view id="top" class="">
				<view class="top_le"></view>
				<view class="top_ri"></view>
			</view>
			<view class="title">
				<view style="font-size: 28px!important;">公文流转管理平台</view>
			</view>
			<view class="login-form">
				<u--form :model="inputForm" labelWidth="100px" labelPosition="left" :rules="rules" ref="uForm">
					<u-form-item label="用户名" borderBottom prop="username">
						<u-input v-model="inputForm.username" />
					</u-form-item>
					<u-form-item label="密码" borderBottom prop="password">
						<u-input password v-model="inputForm.password" />
					</u-form-item>
				</u--form>
			</view>
			<view class="but">
				<u-button type="primary" shape="circle" color="linear-gradient(90deg, #1989FA, #19C2FA)"
					@click="bindLogin" text="登录"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import * as $auth from "@/common/auth.js"
	import loginService from "@/api/auth/loginService"
	import {
		mapActions
	} from 'vuex'

	export default {
		data() {
			return {
				isfocus: false,
				captchaImg: '',
				accounts: [],
				isrember: [],
				inputForm: {
					'username': '',
					'password': '',
					'code': '',
					'uuid': ''
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		created() {
			this.getCaptcha()
		},
		methods: {
			...mapActions(['refreshUserInfo']),
			// 登录
			bindLogin() {
				/**
				 * 客户端对账号信息进行一些必要的校验。
				 * 实际开发中，根据业务需要进行处理，这里仅做示例。
				 */
				this.$refs.uForm.validate().then(res => {
					loginService.login(this.inputForm).then((data) => {
						this.$store.commit('SET_TOKEN', data.token);
						this.refreshUserInfo();
						uni.reLaunch({
							url: '../index/index',
						});
					}).catch(e => {
						uni.showToast({
							title: e.data
						})
						this.getCaptcha()

						console.error(e)
					})
				})
			},
			// 获取验证码
			getCaptcha() {
				loginService.getCode().then((data) => {
					this.captchaImg = 'data:image/gif;base64,' + data.codeImg
					this.inputForm.uuid = data.uuid
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 记住账户展示
	.focus_info {}

	#box {
		position: relative;
		// color: $u-content-color;
	}

	.title {
		position: absolute;
		top: 15vh;
		width: 100vw;
		text-align: center;
		font-size: 28rpx;
		color: #198bfa;

	}

	.title view:nth-child(1) {
		height: 54px;
		font-size: 56rpx;
		font-family: PingFang SC;
		font-weight: bold;
		text-shadow: 0px 2px 24px rgba(58, 199, 118, 0.4);

	}

	.title view:nth-child(2) {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #198BFA;
		margin-top: 5vw;
	}



	#top {
		width: 100vw;
		height: 40vh;
		position: relative;
	}

	.top_ri {
		width: 100vw;
		height: 100vw;
		background: linear-gradient(141deg, #19C0FA 0%, #198BFA 100%);
		opacity: 0.1;
		border-radius: 50%;
		position: absolute;
		right: -47vw;
		top: -37vw;
	}

	.top_le {
		width: 100vw;
		height: 100vw;
		background: linear-gradient(141deg, #19C0FA 0%, #198BFA 100%);
		opacity: 0.1;
		border-radius: 50%;
		position: absolute;
		left: -34vw;
		top: -54vw;
	}

	.inp {
		padding-left: 5vw;
		position: relative;
		top: -4vh;

	}

	.inp text {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-left: 5px;
	}


	.but {
		padding-left: 50rpx;
		padding-right: 50rpx;
		margin-top: 60rpx;
	}

	.fot {
		width: 100vw;
		height: 26px;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #8E8E8E;
		margin-top: 20px;
	}

	.login-form {
		padding-left: 100rpx;
		padding-right: 30rpx;
	}
</style>