// template
<el-form :model="loginForm" :rules="fieldRules" ref="loginForm" label-position="left" label-width="0px" class="login-container">
        <span class="tool-bar"></span>
        <h2 class="title">用戶登陸</h2>
        <el-form-item prop="account">
          <el-input type="text" v-model.trim="loginForm.account" auto-complete="false" placeholder="賬號"></el-input>
        </el-form-item>
        <el-form-item prop="password" class="item-m10">
          <el-input type="password" v-model.trim="loginForm.password" auto-complete="false" placeholder="密碼"></el-input>
        </el-form-item>
        <el-form-item prop="code" align="left" style="margin-top: 20px">
          <el-input v-model="loginForm.code" style="width: 170px" placeholder="驗證碼，點擊圖片刷新"></el-input>
          <el-tag class="login-tag-code" @click="getCode">{{ viewCode }}</el-tag>
        </el-form-item>
        <div class="checked-item">
          <el-checkbox v-model="checked">記住密碼</el-checkbox>
        </div>
        <el-form-item style="width: 100%" class="btn-item">
          <el-button style="width: 100%" @click.native.prevent="loginSubmit" :loading="loading">登錄</el-button>
 </el-form-item>


// js
// ---------分割線

  data () {
    return {
      viewCode: '',
      loginForm: {
        account: '',
        password: '',
        src: '',
        code: ''
      },
      fieldRules: {
        account: [{ required: true, message: '請輸入賬號', trigger: 'blur' }],
        password: [{ required: true, message: '請輸入密碼', trigger: 'blur' }]
      },
      checked: false,
      // 加載中的標(biāo)志
      loading: false
    }
  },


// ------ 分割線


  methods: {
    loginSubmit () {
      if (!this.loginForm.account || !this.loginForm.password) {
        this.$message.error('賬號或密碼不能為空！')
        return
      }
      if (!this.loginForm.code || this.loginForm.code !== this.viewCode) {
        this.$message.error('驗證碼不正確！')
        return
      }
      this.loading = true
      let userInfo = {
        account: this.loginForm.account,
        password: this.loginForm.password
      }
      //登陸接口
      this.$api.login
        .login(userInfo)
        .then((res) => {
            if (this.checked) {
              let rememberInfo = JSON.stringify({ ...userInfo })
              localStorage.setItem('rememberInfo', rememberInfo) // 記住密碼時 保存login
            } else {
              localStorage.removeItem('rememberInfo')
            }
            this.$router.push('/') // 登錄成功，跳轉(zhuǎn)到主頁 
            this.loading = false
        })
        .catch((err) => {
          this.$message({ message: err.message, type: 'error' })
        })
    },

  //獲取驗證碼
    getCode () {
      this.viewCode = ''
      let codeString = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
      let codeArray = codeString.split('')
      let num = codeArray.length
      let newCodeArray = []
      for (let i = 0; i < 5; i++) {
        let index = Math.floor(Math.random() * num)
        newCodeArray.push(codeArray[index])
      }
      this.viewCode = newCodeArray.join('')
    },
  },
  mounted () {
    this.getCode()
    if (localStorage.getItem('rememberInfo')) {
      // 有上次登錄信息 顯示上次登錄
      let rememberData = JSON.parse(localStorage.getItem('rememberInfo'))
      const { account, password } = rememberData
      this.loginForm.account = account
      this.loginForm.password = password
    }
  }