添加登录滑块功能及a-modal添加背景

src/api/sys/user.ts

@@ -23,6 +23,7 @@ enum Api {
   GetPermCode = '/sys/permission/getPermCode',
   //新加的获取图形验证码的接口
   getInputCode = '/sys/randomImage',
+  randomCode = '/sys/randomInputCode',
   //获取短信验证码的接口
   getCaptcha = '/sys/sms',
   //注册接口
@@ -114,6 +115,10 @@ export function getCodeInfo(currdatetime) {
   let url = Api.getInputCode + `/${currdatetime}`;
   return defHttp.get({ url: url });
 }
+export function randomCode(currdatetime) {
+  let url = Api.randomCode + `/${currdatetime}`;
+  return defHttp.get({ url: url });
+}
 /**
  * @description: 获取短信验证码
  */

src/components/Modal/src/index.less

@@ -47,6 +47,9 @@
 
   .ant-modal-body {
     padding: 0;
+    background: url(../resource/img/modalback.png);
+    background-repeat: no-repeat;
+    background-size: cover;
 
     > .scrollbar > .scrollbar__bar.is-horizontal {
       display: none;

src/views/system/loginmini/MiniLogin.vue

@@ -53,7 +53,10 @@
                           </a-col>
                         </a-row>
                       </div>
-                      <div class="aui-inputClear">
+                      <div >
+                        <huakuai @verifySuccess="checkInputCode"/>
+                      </div>
+                      <!-- <div class="aui-inputClear">
                         <a-row>
                           <a-col :span="2">
                             <span style="margin-top: 10px;display: block;"><img :src="icon3Img" alt="验证码" style="width: 20px;" /></span>
@@ -70,7 +73,7 @@
                             </div>
                           </a-col>
                         </a-row>
-                      </div>
+                      </div> -->
                     </div>
                   </a-form>
                 </div>
@@ -92,7 +95,7 @@
   </div>
 </template>
 <script lang="ts" setup name="login-mini">
-  import { getCaptcha, getCodeInfo } from '/@/api/sys/user';
+  import { getCaptcha, getCodeInfo, randomCode } from '/@/api/sys/user';
   import { computed, onMounted, reactive, ref, toRaw, unref } from 'vue';
   import codeImg from '/@/assets/images/checkcode.png';
   import { Rule } from '/@/components/Form';
@@ -117,6 +120,7 @@
   import CaptchaModal from '@/components/jeecg/captcha/CaptchaModal.vue';
   import { useModal } from "@/components/Modal";
   import { ExceptionEnum } from "@/enums/exceptionEnum";
+  import huakuai from './huakuai.vue';
 
   const IconFont = createFromIconfontCN({
     scriptUrl: '//at.alicdn.com/t/font_2316098_umqusozousr.js',
@@ -178,12 +182,20 @@
     formData.inputCode = '';
 
     randCodeData.checkKey = 1629428467008;
-    getCodeInfo(randCodeData.checkKey).then((res) => {
+    randomCode(randCodeData.checkKey).then((res) => {
+      console.log("🚀 ~ handleChangeCheckCode ~ res:", res)
       randCodeData.randCodeImage = res;
       randCodeData.requestCodeSuccess = true;
+      formData.inputCode = res;
     });
   }
 
+  function checkInputCode(type){
+    console.log("🚀 ~ checkCode ~ checkCode:",type)
+    handleChangeCheckCode();
+  }
+
+
   /**
    * 切换登录方式
    */
@@ -372,7 +384,7 @@
 
   onMounted(() => {
     //加载验证码
-    handleChangeCheckCode();
+    // handleChangeCheckCode();
   });
 </script>
 

src/views/system/loginmini/huakuai.vue

@@ -0,0 +1,170 @@
+<template>
+  <!-- 滑动验证码容器 -->
+  <div class="slider-container" ref="containerRef">
+    <!-- 滑动遮罩层，显示滑动进度 -->
+    <div class="slider-mask" :style="{ width: sliderMaskWidth }" />
+    <!-- 滑块按钮 -->
+    <div
+      class="slider"
+      ref="sliderRef"
+      @mousedown="handleDragStart"
+      :class="{ 'slider-success': verified }"
+      :style="{ left: sliderLeft }"
+    >
+      <!-- 滑块图标 -->
+      <Icon icon="ant-design:double-right-outlined" :size="20" />
+    </div>
+    <!-- 提示文本 -->
+    <div class="slider-text" :class="{ 'slider-text-success': verified }">
+      {{ verified ? "验证通过" : "将滑块拖动至右侧完成验证" }}
+    </div>
+  </div>
+</template>
+ 
+<script setup lang="ts">
+import { ref, defineEmits, onUnmounted } from "vue"
+ 
+const emit = defineEmits(["verifySuccess"])
+ 
+// DOM 引用
+const containerRef = ref<HTMLElement | null>(null) // 容器元素引用
+const sliderRef = ref<HTMLElement | null>(null) // 滑块元素引用
+ 
+// 状态变量
+const sliderLeft = ref("0px") // 滑块左侧位置
+const sliderMaskWidth = ref("0px") // 遮罩层宽度
+const verified = ref(false) // 验证状态
+ 
+// 拖动相关变量
+let startX = 0 // 开始拖动时的 X 坐标
+let sliderLeft_temp = 0 // 临时存储滑块位置
+ 
+/**
+ * 开始拖动处理
+ * @param e 鼠标事件对象
+ */
+const handleDragStart = (e: MouseEvent) => {
+  if (verified.value) return // 如果已验证通过，不再处理
+  startX = e.clientX
+  sliderLeft_temp = parseInt(sliderLeft.value)
+  // 添加鼠标移动和松开事件监听
+  document.addEventListener("mousemove", handleDragMove)
+  document.addEventListener("mouseup", handleDragEnd)
+}
+ 
+/**
+ * 拖动过程处理
+ * @param e 鼠标事件对象
+ */
+const handleDragMove = (e: MouseEvent) => {
+  if (verified.value) return
+  const container = containerRef.value
+  if (!container) return
+ 
+  // 计算拖动距离
+  const diff = e.clientX - startX
+  const containerWidth = container.offsetWidth
+  const sliderWidth = sliderRef.value?.offsetWidth || 0
+  const maxLeft = containerWidth - sliderWidth
+ 
+  // 计算新位置并限制范围
+  let newLeft = sliderLeft_temp + diff
+  if (newLeft < 0) newLeft = 0
+  if (newLeft > maxLeft) newLeft = maxLeft
+ 
+  // 更新滑块和遮罩层位置
+  sliderLeft.value = newLeft + "px"
+  sliderMaskWidth.value = newLeft + sliderWidth / 2 + "px"
+ 
+  // 检查是否验证成功
+  if (newLeft === maxLeft) {
+    verified.value = true
+    emit("verifySuccess", true) // 触发验证成功
+    handleDragEnd()
+  }
+}
+ 
+/**
+ * 结束拖动处理
+ */
+const handleDragEnd = () => {
+  if (!verified.value) {
+    // 如果未验证成功，重置位置
+    sliderLeft.value = "0px"
+    sliderMaskWidth.value = "0px"
+  }
+  // 移除事件监听
+  document.removeEventListener("mousemove", handleDragMove)
+  document.removeEventListener("mouseup", handleDragEnd)
+}
+ 
+// 组件卸载时清理事件监听
+onUnmounted(() => {
+  document.removeEventListener("mousemove", handleDragMove)
+  document.removeEventListener("mouseup", handleDragEnd)
+})
+</script>
+ 
+<style scoped>
+/* 滑动验证码容器样式 */
+.slider-container {
+  position: relative;
+  width: 100%;
+  height: 42px;
+  background-color: #f5f5f5;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  margin-top: 20px;
+}
+ 
+/* 滑动遮罩层样式 */
+.slider-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  background-color: #d1e9fc;
+  border-radius: 8px;
+  transition: width 0.1s linear;
+}
+ 
+/* 滑块按钮样式 */
+.slider {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 60px;
+  height: 42px;
+  background: #e1dede;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+ 
+/* 验证成功时滑块样式 */
+.slider-success {
+  background-color: #1ea0fa;
+}
+ 
+/* 提示文本样式 */
+.slider-text {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  user-select: none;
+  font-weight: 400;
+  font-size: 12px;
+  color: #9cb3c5;
+  width: auto;
+}
+ 
+/* 验证成功时文本样式 */
+.slider-text-success {
+  color: #1ea0fa;
+}
+</style>