zhxg_app/pages/login.vue

<template>
  <view class="container">
  	<view class="logo">
  		<image src="/static/logo.png" mode="aspectFit" />
		<!-- <view class="welcome">
			您好&nbsp;欢迎登录
		</view> -->
  	</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 { getCodeImg } from '@/api/login'

  export default {
    data() {
      return {
        codeUrl: "",
        captchaEnabled: true,
        // 用户注册开关
        register: false,
        globalConfig: getApp().globalData.config,
        loginForm: {
          username: '',
          password: '',
          code: "",
          uuid: ''
        }
      }
    },
    created() {
      this.getCode()
    },
    methods: { 
      // 获取图形验证码
      getCode() {
        getCodeImg().then(res => {
          this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
          if (this.captchaEnabled) {
            this.codeUrl = 'data:image/gif;base64,' + res.img
            this.loginForm.uuid = res.uuid
          }
        })
      },
      // 登录方法
      async handleLogin() {
        if (this.loginForm.username === "") {
          this.$modal.msgError("请输入您的账号")
        } else if (this.loginForm.password === "") {
          this.$modal.msgError("请输入您的密码")
        } else {
          this.$modal.loading("登录中，请耐心等待...")
          this.pwdLogin()
        }
      },
      // 密码登录
      async pwdLogin() {
        this.$store.dispatch('Login', this.loginForm).then(() => {
          this.$modal.closeLoading()
          this.loginSuccess()
        }).catch(() => {
          if (this.captchaEnabled) {
            this.getCode()
          }
        })
      },
      // 登录成功后，处理函数
      loginSuccess(result) {
        // 设置用户信息
        this.$store.dispatch('GetInfo').then(res => {
          this.$tab.switchTab('/pages/index/index')
        })
      }
    }
  }
</script>

<style scoped lang="less">
	.container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		/* 修改为隐藏溢出内容 */
		background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAANcCAIAAAAxcyXWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAzNTNGNTEzOEYzMDExRUVCNUE2OTc3Qzk3MjdDMjUxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjAzNTNGNTE0OEYzMDExRUVCNUE2OTc3Qzk3MjdDMjUxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDM1M0Y1MTE4RjMwMTFFRUI1QTY5NzdDOTcyN0MyNTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDM1M0Y1MTI4RjMwMTFFRUI1QTY5NzdDOTcyN0MyNTEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6mEiC+AAVa60lEQVR42uy9iZLlOHKmy+VskVWx6EXvYjaSTFK3plpX87Jj1+xWRmZWnI3kBQESdIJY3LGQOJF5bKZU3R08Cwn47/jh/qHsuq5YvNqu+/rR3Nv+f/pyqH471IX59ePa/HVt2b9UZfFy2u3r0vSX13vXdN3TvrK8G3sr9obsX+qqfDnVu6pcfEr5+jT995gX+x1fP+7i55z21fOxxl97vrXfLv33YZ/38rQ71NjPZff1/Xy/Nv2HHncV+y3w9v750TT8+/x2rL+Yb0j/Jpd7XZa/m78zfDf2Z/bbK54Ce0/2zuyXPJ9q9t3sn87+nv07e6zs4Vru+setZf+r5d3Y6/3cXO79Q2S38fVpp/3v2U0mPFr2c5ru/eMuBjF7sifXz4ev75eGfW32L+yHsUHFhhbyQjaW2ARp+dxhs4PNEfh92GAT//72ZJsO7E3YF2Bf+GS+aezmfz0P7/aKGH5w+rye6rqyfTq77Q1uUrC3Pe5Ky7ux9/k6vhuMGPC/V24U5sWeznc++9gnv552O8rsY/ft1nhN+Xv77cynPA9o8J7L2+scMGw8sy/P5qNlzsiYxt7oDTH88NNE/gRnTGCPhgUD+3OBQ/oFRAz2Zd7HT3mxRhLti8XVM599ztiim30inKMinvaes897eaprcM/l7WXf5flU2+MGG1mv1r+R76YEf1MMTyK4Tcee7xaCO/0c9um/ZyW41ijEJa9hn2kV3OLPjztBcJlCne8iz3rJUHBPu5KiuFEEt+bxs44tuHaJRAku+t1SC+5hV1oeP0uk33URI6Lg2mNLRMGVOrKc8nEFFz6suIILpfCX4FIF1ymRXHA7lgF+KsEt+xsiH4P87wMFN5MVrvw+TsFln15tKbjN9Y6aFCGCy2KjkHUPwb3xaOAnuD8uzV9ScK3yZJnyygSJLrgynchZcE0Rw7TyTS64RW9qRRBctsLdlR4SSRVcTL6XoeCydXTnK7gy3fUSXH26ixfc5QTJUHDrP/74w+IlifDHB4TxFhz6UVqyP2N/d2naXV1pgwJ/WxmFje+27wcpf7euuN07NjfYu0/3tOxnBUmbhZHE7hF7T/ab2C1g/0SOpN7HuQxW1CtFm6cP5R/HfnvTFgf+vbkbjl0hfL+yZ9yx78zuiTY2kd5tCPeXu9x0YI9jV1WmIC5+AvvmDf8V7Fp2B7Qh6cJv1KV/N1sQl+/W8AchZInN/Gvjqc1imu3rig088evYCEHalN6LYZEjspE5jNJmejr3luAXiwl54zdN+whu/GEN7zbXCXvoEamV5XkNP6Eur/wn3MH41N4olsSwR8wen+3ddsO7yYgRuBgW0YC985XHlmvDUoQKs0kw23BymYnLlxjDFx6p2Ifux4DGRgsy9WE/+c9eP/pbYXoE/N2GmNYPP2tMY1/lfZwm3H3o35k9DtPN2PFJcR0nhSl6iPybRbm79d3EFBNpupzj7G2/jUkMG5xUbRbRQAZk+8+JtRgepId93CKgfQOpz7PL3GcPrrFOmSmR2vGYZv1K+Qgu++MjF1wWRqT77CW45XE3xRb2z8Pqgstu/3EhuBivgT04l+DeaYJ7ngSXTZ99VW4juE0n1q4hi+HPIbi14abd+MMaBbd2Dlq5vsILrsxCnYLL4u0hQHA9FsMiGtR0wYXuM2Y1sp3gNjKmuQV3nCYpBPfmElz2NC+j4IqIIQW3eDjB5TNLFdwLwWvgglugBBdRwuIhuDILjSm4xbTCDXGfR8HdeIXb55D7SXDx5v6ZC67ppkHBZe/2xRXTloJrkUj2E07pBffP0Shkj/7VV3Cv/BYECW5FFVyW8/NRCibITHBdEokU3G4VwZUJoZ/glp9XcGVAO9/a70jB7SILLs9Lh62gzQS3kYJbScGVg9NDcA+q4LJB5H64iuBSbRMpuF2w4FqmTCzBVQ1oaL2LVKPt3AotfSLx7ZchUiSIQhXYT7Lv84j/dVBovqXsHUYVpRFiiVToaWeYV1/u69LjQ5kkMx1quEK3bT9t2HvK0rDfXNtW7K7eWnXRNdPm8x3/btPGV9n/PX/j/r+0KTR/XtJHYH+8X6RfXPKHtz3tHQ9oUmieULLZPrjPu37HuPR5tj4KDWuf3552Nf2DoYHLnk7FY0u/U43YeJf3dpwymrSm3/c+E94NVpqwPx6f15Dgmn6C+EuZQR4WMbq3osbZx9IpSwCtgOskwh+7wyHu89KD1g6/ZcL6fvZ3n6W89Qp0HwIa+1D2ht8uWDUtCx7BzI/gPO57o9xnUaYxZhvsIdzHOObU1GujZpDw9W18W5aCiMWDZYqx1EjkB1ee0n0fq2aevbTZsCR2KDScFB6LYZkWCA9aKjQbqHKn+tWlpiVPv2QQW/727zzjKcYqmNKdbfgIbm0VXFHzK27UASG405KYC66c8m/+gjtbEmM86BUE9/dgwX2PILjdNoLbjYIr3ecwwSV50FkIblmMIX0zwT3NLRuN4N5aWcBysi5HheCKKbYUXI/F8KB9XoI7lGLRF8PLJXFSwUW5z0NdZCdXK4NCxRPcPVJwxynG3vTHxb8Ua2PBXSyJ0wnuC1Vwy2iCy9bYYonN3idEcHcxVrhUwVVa/XwEl+sLWXArzbaiSXB/JwquSIAwrnFawR3rq9Zc4f6IIrhMX0YPWhHcZ5zgisudgot5N9gNAwTXsU174n/ZmAX3YxTcKkBw/dznTAT3yj+U/ZB3kuCWw03QPgIvwR3KadkXa5CCyyLeOD61EY8muJOj3T/UH9c4gtv5Cq63bRJDcIXa9ts2p6iCW84Fd2ZAN7xnQfwp++Us3LMPuNxtGRXUVLCp0kcrqSW8moBWCNkXeRWTzyImDGwQ9lPow2i3iX/uzR0G3n1J2vXkfaz5ZX
		background-size: cover;
		/* 让背景图片铺满整个容器 */
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.logo {
		margin-top: 150rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.welcome{
			font-weight: bold;
			font-size: 60rpx;
			margin-top:28px;
			font-family:douyin;
		}
		image {
			width: 300rpx;
			height: 300rpx;
		}
	}

	.login-form-content {
		text-align: center;
		margin: 20px auto;
		margin-top: 15%;
		width: 80%;
	
		.input-item {
			margin: 20px auto;
			background-color: #ffffff;
			border: 1px solid #c1c1c1;
			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;
			}
		}
	}

	.button {
		width: 95%;
		padding: 24rpx;
		background-color: #3388CC;
		border: none;
		border-radius: 10rpx;
		color: #fff;
		text-align: center;
		cursor: pointer;
		font-size: 32rpx;
		transition: background-color 0.3s;
	}

	.button:hover {
		background: linear-gradient(to right, #87CEFA, #87CEFA);
	}
</style>