safe-check-mobile/pages/login.vue

<template>
	<view class="normal-login-container">
		<image class="head-bg" src="https://mp-df79fe8b-b924-41b0-bcb1-960be6b4a619.cdn.bspapp.com/images/login/head-bg@2x.png"></image>
		<!-- <image class="head-bg" src="https://i.postimg.cc/t4HDxgXP/login-head-bg-2x.png"></image> -->
		<view class="login-form-content">
			<!-- <image class="form-bg" src="https://mp-df79fe8b-b924-41b0-bcb1-960be6b4a619.cdn.bspapp.com/images/login/formbg@2x.png"></image> -->
			<image class="form-bg" src="https://i.postimg.cc/Xvsgmc9c/formbg-2x.png"></image>
			<text class="info-text">安全检查智能管理系统</text>
			<view class="input-item flex align-center">
				<view class="">
					<!-- <image class="icon" src="https://mp-df79fe8b-b924-41b0-bcb1-960be6b4a619.cdn.bspapp.com/images/login/count@2x.png"></image> -->
					<image class="icon" src="https://i.postimg.cc/8zB4BV5Y/count-2x.png"></image>
				</view>
				<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
			</view>
			<view class="input-item flex align-center">
				<view class="">
					<!-- <image class="icon" src="https://mp-df79fe8b-b924-41b0-bcb1-960be6b4a619.cdn.bspapp.com/images/login/password@2x.png"></image> -->
					<image class="icon" src="https://i.postimg.cc/8cRfQNqQ/password-2x.png"></image>
				</view>
				<uni-easyinput :styles="inputStyles" class="input" :inputBorder="false" clearable="false"
					type="password" v-model="loginForm.password" maxlength="20" placeholder="请输入密码"></uni-easyinput>
			</view>
			<Verify @success="pwdLogin" :mode="'pop'" :captchaType="'blockPuzzle'"
				:imgSize="{ width: '330px', height: '155px' }" ref="verify"></Verify>
			<view class="action-btn">
				<button @click="handleLogin" class="login-btn cu-btn block lg">登录</button>
			</view>
		</view>

		<!-- <view class="xieyi text-center">
			<text class="text-grey1">登录即代表同意</text>
			<text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
			<text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
		</view> -->
		<!-- <image class="feet-bg" src="https://mp-df79fe8b-b924-41b0-bcb1-960be6b4a619.cdn.bspapp.com/images/login/feet-bg@2x.png"></image> -->
		<image class="feet-bg" src="https://i.postimg.cc/wBqVwbRj/feet-bg-2x.png"></image>
	</view>
</template>

<script>
import Verify from "@/components/verifition/Verify"

export default {
	name: 'Login',
	components: {
		Verify
	},
	data() {
		return {
			captchaEnabled: false, // 验证码开关 TODO 芋艿：需要抽到配置里
			globalConfig: getApp().globalData.config,
			loginForm: {
				username: "",
				password: "",
				captchaVerification: ""
			},
			inputStyles: {
				backgroundColor: '#00000000'
			}
		}
	},
	methods: {
		// 隐私协议
		handlePrivacy() {
			let site = this.globalConfig.appInfo.agreements[0]
			this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
		},
		// 用户协议
		handleUserAgrement() {
			let site = this.globalConfig.appInfo.agreements[1]
			this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
		},
		// 登录方法
		async handleLogin(params) {
			if (this.loginForm.username === "") {
				this.$modal.msgError("请输入您的账号")
			} else if (this.loginForm.password === "") {
				this.$modal.msgError("请输入您的密码")
			} else {
				// 显示验证码
				if (this.captchaEnabled) {
					this.$refs.verify.show()
				} else { // 直接登录
					await this.pwdLogin({})
				}
			}
		},
		// 密码登录
		async pwdLogin(captchaParams) {
			this.$modal.loading("登录中，请耐心等待...")
			// 执行登录
			this.loginForm.captchaVerification = captchaParams.captchaVerification
			this.$store.dispatch('Login', this.loginForm).then(() => {
				this.$modal.closeLoading()
				this.loginSuccess()
			})
		},
		// 登录成功后，处理函数
		loginSuccess(result) {
			// 设置用户信息
			this.$store.dispatch('GetInfo').then(res => {
				this.$tab.reLaunch('/pages/index')
			})
		}
	}
}
</script>

<style lang="scss">
page {
	background: linear-gradient(180deg, #60A8FA 0%, rgba(62, 115, 245, 0) 100%);
}

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

	.head-bg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 580rpx;
	}

	.feet-bg{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 609rpx;
		height: 366rpx;
	}

	.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: 0 auto;
		margin-top: 520rpx;
		width: 90%;
		background: linear-gradient(180deg, #EDF4FF 0%, #FFFFFF 100%);
		border-radius: 40rpx;
		padding: 70rpx 30rpx;
		position: relative;

		.form-bg {
			position: absolute;
			top: 0;
			left: 26rpx;
			width: 180rpx;
			height: 124rpx;
		}



		.info-text {
			font-family: Alibaba PuHuiTi;
			font-weight: 500;
			font-size: 44rpx;
			color: #3E73F5;
			margin-bottom: 65rpx;
		}

		.input-item {
			margin: 20px auto;
			background: #FFFFFF;
			height: 45px;
			border-radius: 20rpx;
			border: 1px solid #3E73F5;
			padding-left: 30rpx;

			.icon {
				width: 32rpx;
				height: 32rpx;
			}

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

		}

		.login-btn {
			margin-top: 40px;
			height: 45px;
			border-radius: 20rpx;
			background: #3E73F5;
			color: #fff;
		}

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

	.easyinput {
		width: 100%;
	}
}

.login-code-img {
	height: 45px;
}

::v-deep .input .uni-easyinput {
	background-color: transparent;
}

.uni-easyinput__content {
	background-color: transparent !important;
}
</style>