123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169 |
- <template>
- <div class="sso-login">
- <a-form-model ref="form" :model="model" :rules="validatorRules">
-
- <a-form-model-item required prop="username">
- <a-input v-model="model.username" size="large" placeholder="帐户">
-
- </a-input>
- </a-form-model-item>
- <a-form-model-item required prop="password">
- <a-input-password v-model="model.password" size="large" type="password" autocomplete="false" placeholder="密码">
-
- </a-input-password>
- </a-form-model-item>
-
-
- </a-form-model>
- </div>
- </template>
- <script>
- import { getAction } from '@/api/manage'
- import Vue from 'vue'
- import { mapActions } from 'vuex'
- export default {
- name: 'LoginAccount',
- data(){
- return {
- requestCodeSuccess: false,
- randCodeImage: '',
- currdatetime: '',
- loginType: 0,
- model:{
- username: '',
- password: '',
- inputCode: ''
- },
- validatorRules:{
- username: [
- { required: true, message: '请输入用户名!' },
- { validator: this.handleUsernameOrEmail }
- ],
- password: [{
- required: true, message: '请输入密码!', validator: 'click'
- }],
- inputCode: [{
- required: true, message: '请输入验证码!'
- }]
- }
- }
- },
- created() {
- this.handleChangeCheckCode();
- },
- methods:{
- ...mapActions(['IotSsoLogin']),
-
- handleChangeCheckCode(){
- this.currdatetime = new Date().getTime();
- this.model.inputCode = ''
- getAction(`/sys/randomImage/${this.currdatetime}`).then(res=>{
- if(res.success){
- this.randCodeImage = res.result
- this.requestCodeSuccess=true
- }else{
- this.$message.error(res.message)
- this.requestCodeSuccess=false
- }
- }).catch(()=>{
- this.requestCodeSuccess=false
- })
- },
-
- handleUsernameOrEmail (rule, value, callback) {
- const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
- if (regex.test(value)) {
- this.loginType = 0
- } else {
- this.loginType = 1
- }
- callback()
- },
-
- validateFields(arr, callback){
- let promiseArray = []
- for(let item of arr){
- let p = new Promise((resolve, reject) => {
- this.$refs['form'].validateField(item, (err)=>{
- if(!err){
- resolve();
- }else{
- reject(err);
- }
- })
- });
- promiseArray.push(p)
- }
- Promise.all(promiseArray).then(()=>{
- callback()
- }).catch(err=>{
- callback(err)
- })
- },
- acceptUsername(username){
- this.model['username'] = username
- },
-
- handleLogin(rememberMe){
- this.validateFields([ 'username', 'password' ], (err)=>{
- if(!err){
- let loginParams = {
- username: this.model.username,
- password: this.model.password,
-
- checkKey: this.currdatetime,
- remember_me: rememberMe,
- }
- console.log("登录参数", loginParams)
- this.IotSsoLogin(loginParams).then((res) => {
- this.$emit('success', res.result)
- }).catch((err) => {
-
-
-
-
-
- this.$emit('fail', err)
- });
- }else{
- this.$emit('validateFail')
- }
- })
- }
- }
- }
- </script>
- <style lang="less">
- .sso-login{
- input:-internal-autofill-selected {
- background-color: #fff !important;
- }
- input:-webkit-autofill {
- box-shadow: 0 0 0px 1000px white inset !important;
- }
- }
- </style>
|