print-web/src/views/login/components/passwd.vue

<template>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="0" label-position="top" size="large" @keyup.enter="login_code">
        <el-form-item prop="user" :label="$t('login.userName')">
            <el-input v-model="form.user" clearable :placeholder="$t('login.userPlaceholder')"></el-input>
        </el-form-item>
        <el-form-item prop="password" :label="$t('login.PWName')">
            <el-input v-model="form.password" clearable show-password :placeholder="$t('login.PWPlaceholder')"></el-input>
        </el-form-item>
        <el-form-item prop="code" :label="$t('login.code')">
            <el-input v-model="form.code" :placeholder="$t('login.codeErr')">
				<template #suffix>
					<el-tooltip placement="top-start" :content="$t('login.codeTips')">
						<div class="captcha" @click="updateCaptcha"><img :src="captcha.base64" /></div>
					</el-tooltip>
				</template>
			</el-input>
        </el-form-item>
        <el-form-item prop="privacy">
            <el-checkbox :label="$t('login.rememberMe')" v-model="form.privacy">
                <template #default>
                    <div class="privacy">我已阅读并同意<span @click="showPrivacy">《用户协议》</span></div>
                </template>
            </el-checkbox>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="large" style="width: 100%;" :loading="islogin" @click="onSuccess">{{ $t('login.signIn') }}</el-button>
        </el-form-item>
    </el-form>
	<el-dialog title="用户协议" v-model="visible" :width="680" destroy-on-close :close-on-click-modal="false" :show-close="false">
		<div class="showPrivacy">
			<div v-html="baseData.privacy"></div>
		</div>
		<template #footer>
			<el-button type="primary" @click="showPrivacyState">我已阅读并同意</el-button>
		</template>
	</el-dialog>
</template>
<script>
export default {
    emits: ['success', 'upCaptcha'],
    props: ['baseData',"captcha"],
    data(){
        return {
			visible:false,
			isShow:false,
            form: {},
			islogin:false,
			rules: {
				user: [
					{ required: true, message: this.$t('login.userError'), trigger: 'blur' }
				],
				password: [
					{ required: true, message: this.$t('login.PWError'), trigger: 'blur' }
				],
				code: [
					{ required: true, message: this.$t('login.codeErr'), trigger: 'blur' }
				],
				privacy: [
					{ required: true, message: this.$t('login.privacy'), trigger: 'change' }
				]
			},
        }
    },
    methods: {
		updateCaptcha(){
			this.$emit("upCaptcha");
		},
		showPrivacy(){
			this.visible = true;
		},
		showPrivacyState(){
			if (this.form.privacy == false) {
				this.form.privacy = true;
			}
			this.visible = false;
		},
		async onSuccess() {
			this.isShow = false;
			var data = {
				username: this.form.user,
				code: this.form.code,
				key: this.captcha.key,
				password: this.$TOOL.crypto.MD5(this.form.password)
			}
			var validate = await this.$refs.loginForm.validate().catch(() => { })
			if (!validate) { return false }
			//获取token
			this.islogin = true
			var user = await this.$API.auth.login.post(data)
			if (user.code == 1) {
				this.$TOOL.cookie.set("TOKEN", user.data.access_token, {
					expires: user.data.expires_in
				})
			} else {
				this.islogin = false
				this.$message.error(user.msg)
				return false
			}
			//获取菜单
			var menu = await this.$API.menu.list.get()
			if (menu.code == 1) {
				if (menu.data.menu.length == 0) {
					this.islogin = false
					this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
						type: 'error',
						center: true
					})
					return false
				}
				var userData = await this.$API.auth.user.get()
				if (userData.code == 0) {
					this.islogin = false
					this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
						type: 'error',
						center: true
					})
					return false
				}
				this.$TOOL.data.set("USER_TYPE", userData.data.type)
				this.$TOOL.data.set("USER_INFO", userData.data)
				this.$TOOL.data.set("MENU", menu.data.menu)
				this.$TOOL.data.set("PERMISSIONS", menu.data.permissions)
				this.$TOOL.data.set("DASHBOARDGRID", menu.data.dashboardGrid)
			} else {
				this.islogin = false
				this.$message.warning(menu.message)
				return false
			}
			var userType = userData.data.type;
			var dashboard = "/dashboard";
			if (userType == 1) {
				dashboard = "/manage/dashboard";
			} else if (userType == 2) {
				dashboard = "/merchant/dashboard";
			} else if (userType == 3) {
				dashboard = "/store/dashboard";
			}
			this.$emit("success");
			this.$message.success(user.msg)
			this.$router.replace({
				path: dashboard
			})
		},
		onClose() {
			this.isShow = false;
		},
		async login_code() {
			var validate = await this.$refs.loginForm.validate().catch(() => { })
			if (!validate) { return false }
			this.isShow = true;
		}
    }
}
</script>

<style>
.login-forgot{text-align: right;}
.privacy {
	color: #333;
}
.privacy span {
	color: #f00;
}
.showPrivacy {
	max-height: 500px;
	overflow: hidden;
	overflow-y: scroll;
	line-height: 1.5;
}
.el-input--large .el-input__wrapper{
	position: relative;
}
.captcha{
	display: flex;
	align-items: center;
	cursor: pointer;
	position: absolute;
	right: 1px;
	top: 1px;
	bottom: 1px;
	z-index: 99;
}
.captcha img{
	height: 38px;
	border-radius: 5px;
}
</style>