root/rax-medical
1
0
Fork 0
mirror of https://gitee.com/xiongmao1988/rax-medical.git synced 2025-08-24 04:54:58 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

验证码demo

This commit is contained in:
zhaoyz 2024-02-01 18:37:21 +08:00
parent 2c515b4828
commit 2b5363be8e
2 changed files with 52 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -16,12 +16,14 @@
"pinia": "^2.1.7", "pinia": "^2.1.7",
"sass": "^1.58.3", "sass": "^1.58.3",
"slider-verify-v3": "^1.1.11", "slider-verify-v3": "^1.1.11",
"uuid": "^9.0.1",
"vue": "^3.2.45", "vue": "^3.2.45",
"vue-router": "^4.1.6", "vue-router": "^4.1.6",
"xlsx": "^0.18.5" "xlsx": "^0.18.5"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^18.11.12", "@types/node": "^18.11.12",
"@types/uuid": "^9.0.8",
"@vitejs/plugin-vue": "^4.0.0", "@vitejs/plugin-vue": "^4.0.0",
"@vue/tsconfig": "^0.1.3", "@vue/tsconfig": "^0.1.3",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",

90
src/views/login/login.vue
View File

@ -8,41 +8,41 @@
</el-select> </el-select>
</div> </div>
<img v-show="!isShowRegister" class="logo move_2" src="@/assets/imgs/logo.png"> <img v-show="!isShowRegister" class="logo move_2" src="@/assets/imgs/logo.png">
<div v-if="!isShowRegister" class="login-block move_2"> <div v-if="!isShowRegister" class="login-block move_2">
<div class="login-way"> <div class="login-way">
<span :class="passwordLogin && 'active'" @click="passwordLogin = true">密码登录</span> <span :class="passwordLogin && 'active'" @click="passwordLogin = true">密码登录</span>
<span :class="!passwordLogin && 'active'" @click="passwordLogin = false">验证码登录</span> <span :class="!passwordLogin && 'active'" @click="passwordLogin = false">验证码登录</span>
</div> </div>
<el-form ref="loginFormRef" :model="loginParams" :rules="loginRules" label-width="0" size="small"> <el-form ref="loginFormRef" :model="loginParams" :rules="loginRules" label-width="0" size="small">
<div class="login-form password-login" v-if="passwordLogin"> <div class="login-form password-login" v-if="passwordLogin">
<el-form-item prop="account"> <el-form-item prop="account">
<el-input v-model="loginParams.account" placeholder="请输入用户名"> <el-input v-model="loginParams.account" placeholder="请输入用户名">
<template #prepend> <template #prepend>
<el-icon> <el-icon>
<User /> <User/>
</el-icon> </el-icon>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input v-model="loginParams.password" type="password" show-password placeholder="请输入密码"> <el-input v-model="loginParams.password" type="password" show-password placeholder="请输入密码">
<template #prepend> <template #prepend>
<el-icon> <el-icon>
<Lock /> <Lock/>
</el-icon> </el-icon>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-button class="login-btn" type="primary" @click="login('password')">登录</el-button> <el-button class="login-btn" type="primary" @click="login('password')">登录</el-button>
<span class="register-btn" @click="isShowRegister = true">注册账号</span> <span class="register-btn" @click="getCaptchaCode()">注册账号</span>
</div> </div>
<div class="login-form code-login" v-else> <div class="login-form code-login" v-else>
<el-form-item prop="phone"> <el-form-item prop="phone">
<el-input v-model="loginParams.phone" placeholder="请输入手机号"> <el-input v-model="loginParams.phone" placeholder="请输入手机号">
<template #prepend> <template #prepend>
<div @click.stop style="display: flex;align-items: center;"> <div @click.stop style="display: flex;align-items: center;">
<el-dropdown @command="selectPhoneArea"> <el-dropdown @command="selectPhoneArea">
<span style="color: #909399;">{{ loginParams.phoneArea }}<el-icon> <span style="color: #909399;">{{ loginParams.phoneArea }}<el-icon>
<DCaret /> <DCaret />
</el-icon></span> </el-icon></span>
@ -118,11 +118,12 @@
</template> </template>
<script lang='ts' setup> <script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue' import {onMounted, reactive, ref, toRefs, watch} from 'vue'
import { useRouter } from 'vue-router' import {useRouter} from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus' import {ElMessage, ElMessageBox} from 'element-plus'
import { useLoginStore } from '@/stores/user-info-store' import {useLoginStore} from '@/stores/user-info-store'
import { getHospitalsData, getPhoneAreasData } from '@/static-data/core' import {getHospitalsData, getPhoneAreasData} from '@/static-data/core'
import {v4} from "uuid";
const router = useRouter() const router = useRouter()
@ -199,6 +200,8 @@ const sliderVConf = ref({
height: 200 height: 200
}) })
const captchaImgUrl = ref('')
const selectHospital = (e: string) => { const selectHospital = (e: string) => {
// console.log(e) // console.log(e)
} }
@ -260,6 +263,13 @@ const login = async (type: string) => {
} }
}) })
} }
function getCaptchaCode() {
isShowRegister.value = true
const randomStr = v4()
captchaImgUrl.value = 'http://localhost:9999/admin/code/textImage?randomStr=' + randomStr
}
const toHome = () => { const toHome = () => {
const getPermissions = () => { const getPermissions = () => {
let permissions = '普通用户' let permissions = '普通用户'