验证码demo

package.json

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

src/views/login/login.vue

@@ -35,7 +35,7 @@
               </el-input>
             </el-form-item>
             <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 class="login-form code-login" v-else>
             <el-form-item prop="phone">
@@ -123,6 +123,7 @@ import { useRouter } from 'vue-router'
 import {ElMessage, ElMessageBox} from 'element-plus'
 import {useLoginStore} from '@/stores/user-info-store'
 import {getHospitalsData, getPhoneAreasData} from '@/static-data/core'
+import {v4} from "uuid";
 
 const router = useRouter()
 
@@ -199,6 +200,8 @@ const sliderVConf = ref({
     height: 200
 })
 
+const captchaImgUrl = ref('')
+
 const selectHospital = (e: string) => {
     // 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 getPermissions = () => {
         let permissions = '普通用户'