From eb52624b4ea5303198d4dddc19a3366c87283ff3 Mon Sep 17 00:00:00 2001 From: yangfeng <wanwan926_4@163.com> Date: 星期一, 05 二月 2024 17:50:44 +0800 Subject: [PATCH] 登录页面接口联调 --- src/views/login/loginView.vue | 41 ++++++++++++++++++++++++++++++----------- 1 files changed, 30 insertions(+), 11 deletions(-) diff --git a/src/views/login/loginView.vue b/src/views/login/loginView.vue index 2c768ed..533d652 100644 --- a/src/views/login/loginView.vue +++ b/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 -- Gitblit v1.8.0