mt-yd-ui/src/views/pages/login.vue

<template>
	<div class="aui-wrapper aui-page__login">
		<div class="aui-content__wrapper">
			<main class="aui-content">
				<div class="login-header">
					<h2 class="login-brand">{{ $t('brand.lg') }}</h2>
				</div>
				<div class="login-body">
					<h3 class="login-title">{{ $t('login.title') }}</h3>
					<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" status-icon>
						<el-form-item prop="username">
							<el-input v-model="dataForm.username" :placeholder="$t('login.username')">
								<span slot="prefix" class="el-input__icon">
									<svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
								</span>
							</el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input v-model="dataForm.password" type="password" :placeholder="$t('login.password')">
								<span slot="prefix" class="el-input__icon">
									<svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>
								</span>
							</el-input>
						</el-form-item>
						<!-- <el-form-item prop="captcha">
              <el-row :gutter="20">
                <el-col :span="14">
                  <el-input v-model="dataForm.captcha" :placeholder="$t('login.captcha')">
                    <span slot="prefix" class="el-input__icon">
                      <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-safetycertificate"></use></svg>
                    </span>
                  </el-input>
                </el-col>
                <el-col :span="10" class="login-captcha">
                  <img :src="captchaPath" @click="getCaptcha()">
                </el-col>
              </el-row>
            </el-form-item> -->
						<el-form-item>
							<el-button type="primary" @click="dataFormSubmitHandle()" class="w-percent-100">{{ $t('login.title') }}</el-button>
						</el-form-item>
					</el-form>
				</div>
				<div class="login-footer">
					<p style="background: #ececec99; border-radius: 8px;">
						<el-button style="background: none; color: #fff; border: unset; outline: unset; cursor: pointer;" @click="chLang('zh')">中文</el-button> |
						<el-button style="background: none; color: #fff; border: unset; outline: unset; cursor: pointer;" @click="chLang('en')">English</el-button>
					</p>

					<p>
						{{ $t('login.copyright') }}
					</p>
				</div>
			</main>
		</div>
	</div>
</template>

<script>
import Cookies from 'js-cookie'
import debounce from 'lodash/debounce'
// import { getUUID } from '@/utils'
export default {
	data() {
		return {
			captchaPath: '',
			dataForm: {
				username: 'admin',
				password: 'admin',
				uuid: ''
				// captcha: ''
			}
		}
	},
	computed: {
		dataRule() {
			return {
				username: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }],
				password: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
				// captcha: [
				//   { required: true, message: this.$t('validate.required'), trigger: 'blur' }
				// ]
			}
		}
	},
	created() {
		// this.getCaptcha()
	},
	methods: {
		chLang(lang) {
			switch (lang) {
				case 'zh':
					this.$root.$i18n.locale = 'zh-CN'
					// location.reload()
					break
					case 'en':
						this.$root.$i18n.locale = 'en'
						location.reload()
					break
			}
		},
		// 获取验证码
		getCaptcha() {
			this.dataForm.uuid = getUUID()
			this.captchaPath = `${window.SITE_CONFIG['apiURL']}/captcha?uuid=${this.dataForm.uuid}`
		},
		// 表单提交
		dataFormSubmitHandle: debounce(
			function() {
				this.$refs['dataForm'].validate(valid => {
					if (!valid) {
						return false
					}
					this.$http
						.post(this.$http.adornUrl('/login'), this.dataForm)
						.then(({ data: res }) => {
							if (res.code !== 0) {
								// this.getCaptcha()
								return this.$message.error(res.msg)
							}
							Cookies.set('token', res.data.token)

							/** 保存dictlist */
							this.$http.get(this.$http.adornUrl('/sys/dict/data/getAll')).then(({ data: res }) => {
								if (res && res.code === 0) {
									localStorage.setItem('dictList', JSON.stringify(res.data))
								} else {
									this.$message({
										message: '数据字典拉取失败，请检查!',
										type: 'error',
										duration: 2000
									})
								}
							})

							this.$router.replace({ name: 'home' })
						})
						.catch(err => {
							this.$message({
								message: err.message,
								type: 'error',
								duration: 2000
							})
						})
				})
			},
			1000,
			{ leading: true, trailing: false }
		)
	}
}
</script>