jy_total_process_master_cloud_h5/pages/login/login.vue

<template>
	<view class="content">
		<view id="box">

			<view id="top" class="">
				<view class="top_le"></view>
				<view class="top_ri"></view>
			</view>
			<view class="title">
				<view>欢迎登录JeePlus</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 border="none" v-model="inputForm.username" />
						</u-form-item>
						<u-form-item label="密码" borderBottom prop="password">
							<u-input border="none" password v-model="inputForm.password" />
						</u-form-item>
						<u-form-item label="验证码" borderBottom prop="code">
							<u-input border="none" v-model="inputForm.code" />
							<u--image :showLoading="true" :src="captchaImg" width="140px" height="40px" @click="getCaptcha"></u--image>
						</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 class="fot">
				<text @tap="reg_ok">免费注册</text>
				<text style="display: inline-block;width: 10vw;"></text>
				<text @tap="forget_ok">忘记密码</text>
			</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 {
				captchaImg: '',
				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 => {
				  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>
	#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>