<template> <div class="main"> <a-form-model class="user-layout-login" @keyup.enter.native="handleSubmit" :model="model" :rules="validatorRules"> <a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }" @change="handleTabClick"> <a-tab-pane key="tab1" tab="系统激活授权"/> </a-tabs> <a-form-model-item> <a-input size="large" v-model="model.activationCode" autocomplete="false" placeholder="系统激活授权期限已到期,请输入系统激活码"/> </a-form-model-item> <a-form-item style="margin-top:24px"> <a-button size="large" type="primary" htmlType="submit" class="login-button" :loading="loginBtn" @click.stop.prevent="handleSubmit" :disabled="loginBtn">确定 </a-button> </a-form-item> </a-form-model> <two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess" @cancel="stepCaptchaCancel"></two-step-captcha> </div> </template> <script> import Vue from 'vue' import {ACCESS_TOKEN, ENCRYPTED_STRING} from '@/store/mutation-types' import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha' import {getEncryptedString} from '@/utils/encryption/aesEncrypt' import {timeFix} from '@/utils/util' import {systemActivation} from '@/api/api' export default { components: { TwoStepCaptcha }, data() { return { customActiveKey: 'tab1', rememberMe: true, loginBtn: false, requiredTwoStepCaptcha: false, stepCaptchaVisible: false, querySource: {}, encryptedString: { key: "", iv: "", }, model: { activationCode: '' }, } }, created() { Vue.ls.remove(ACCESS_TOKEN) this.getRouterData(); this.rememberMe = true }, methods: { handleTabClick(key) { this.customActiveKey = key }, handleRememberMeChange(e) { this.rememberMe = e.target.checked }, /**跳转到登录页面的参数-账号获取*/ getRouterData() { this.$nextTick(() => { let temp = this.$route.params.username || this.$route.query.username || '' if (temp) { this.$refs.alogin.acceptUsername(temp) } }) }, //验证激活码 handleSubmit() { this.loginBtn = true; console.log('handleSubmit start') this.handleSystemActivation(this.rememberMe) }, systemActivationSuccess() { this.$router.push({path: "/user/login"}); this.$notification.success({ message: '激活成功,请重新登录', }); }, systemActivationSuccessError(message) { this.$notification.error({ message: message, }); this.loginBtn = false; }, //获取密码加密规则 getEncrypte() { var encryptedString = Vue.ls.get(ENCRYPTED_STRING); if (encryptedString == null) { getEncryptedString().then((data) => { this.encryptedString = data }); } else { this.encryptedString = encryptedString; } }, handleSystemActivation(rememberMe) { console.log('handleSystemActivation start') let systemActivationModelParams = { activationCode: this.model.activationCode, } systemActivation(systemActivationModelParams).then((res) => { this.loading = false; if (res.success) { this.systemActivationSuccess(); } else { this.systemActivationSuccessError(res.message); } }); } } } </script> <style lang="less" scoped> .user-layout-login { label { font-size: 14px; } .getCaptcha { display: block; width: 100%; height: 40px; } .forge-password { font-size: 14px; } button.login-button { padding: 0 15px; font-size: 16px; height: 40px; width: 100%; } .user-login-other { text-align: left; margin-top: 24px; line-height: 22px; .item-icon { font-size: 24px; color: rgba(0, 0, 0, .2); margin-left: 16px; vertical-align: middle; cursor: pointer; transition: color .3s; &:hover { color: #1890ff; } } .register { float: right; } } .valid-error .ant-select-selection__placeholder { color: #f5222d; } } </style>