登录页面接口联调

yangfeng

2024-02-05 eb52624b4ea5303198d4dddc19a3366c87283ff3

 src/views/login/loginView.vue

@@ -20,7 +20,7 @@
            />
          </el-form-item>
          <el-form-item label="" prop="code">
            <el-input v-model="ruleForm.code" autocomplete="off" style="width: 70%"> </el-input>
            <el-input v-model="ruleForm.code" placeholder="验证码" autocomplete="off" style="width: 70%"> </el-input>
            <img class="login-code" :src="captcha" @click="getCaptchaData" />
          </el-form-item>
          <el-form-item>
@@ -35,7 +35,10 @@
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { getCaptcha } from '@/api'
import { getCaptcha, login } from '@/api'
import { setToken } from '@/common/utils/index'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const ruleFormRef = ref<FormInstance>()

@@ -72,23 +75,19 @@
})

const captcha = ref('')
const captchaId = ref('')

const getCaptchaData = () => {
  getCaptcha().then((rsp) => {
    if (rsp.code == 200) {
      this.captchaId = rsp.data.captchaId
      this.captcha = rsp.data.picPath
      captcha.value = rsp.data.picPath
      captchaId.value = rsp.data.captchaId
    }
  })
}
onMounted(() => {
  // 获取验证码
  getCaptcha().then((rsp) => {
    if (rsp.code == 200) {
      this.captchaId = rsp.data.captchaId
      this.captcha = rsp.data.picPath
    }
  })
  getCaptchaData()
})

const rules = reactive<FormRules<typeof ruleForm>>({
@@ -97,11 +96,31 @@
  accountNumber: [{ validator: checkAge, trigger: 'blur' }]
})

const router = useRouter()

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      console.log('submit!')
      login({
        username: ruleForm.accountNumber,
        password: ruleForm.pass,
        captcha: ruleForm.code,
        captchaId: captchaId.value
      }).then((rsp) => {
        if (rsp.code == 200) {
          console.log(rsp)
          setToken(rsp.token)
          ElMessage({
            message: '登录成功！',
            type: 'success'
          })
          ruleForm.accountNumber = ''
          ruleForm.pass = ''
          ruleForm.code = ''
          router.push('/')
        }
      })
    } else {
      console.log('error submit!')
      return false