From a69cd3af61d50799993817e4b35d029b0d1fa965 Mon Sep 17 00:00:00 2001
From: tone <3341154833@qq.com>
Date: Fri, 30 Aug 2024 21:33:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E5=8A=A0=E5=85=A5=E6=97=8B?=
 =?UTF-8?q?=E8=BD=AC=E5=9B=BE=E5=83=8F=E9=AA=8C=E8=AF=81=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Common/RotationVerification.vue           | 164 ++++++++++--------
 1 file changed, 88 insertions(+), 76 deletions(-)

diff --git a/tonecn/src/components/Common/RotationVerification.vue b/tonecn/src/components/Common/RotationVerification.vue
index b6dee71..7e95286 100644
--- a/tonecn/src/components/Common/RotationVerification.vue
+++ b/tonecn/src/components/Common/RotationVerification.vue
@@ -1,5 +1,12 @@
 <script setup>
-import ServerSDK from '@/assets/ServerSDK';
+/**
+ * 旋转图像验证码组件
+ * @event success 验证成功
+ * @event fail 验证失败
+ * @requires ServerSDK
+ * @since 1.0.1
+ */
+import { request } from '@/lib/request';
 import { onBeforeMount, onMounted, ref } from 'vue';
 let imageBase64 = ref('');
 const emit = defineEmits(['fail', 'success'])
@@ -7,10 +14,11 @@ let onVerifying = ref(false);
 let onVerifyFail = ref(false);
 onBeforeMount(async () => {
     try {
-        let res = await ServerSDK.GetRotationVerification();
-        imageBase64.value = res;
+        let res = await request.get('captcha')
+        localStorage.setItem('captcha-session', res.data.session)
+        imageBase64.value = res.data.imgPreStr + res.data.img;
     } catch (error) {
-        console.log("获取图像验证码失败："+error);
+        console.log("获取图像验证码失败：" + error);
         emit('fail');
     }
 })
@@ -21,17 +29,16 @@ onMounted(() => {
     let silderMoveable = true;// 是否可以开始移动标识位
     let startX;
     let deltaX;// 拖动距离
-    slider.addEventListener('mousedown', function(e) {
-        if(silderMoveable)
-        {
+    slider.addEventListener('mousedown', function (e) {
+        if (silderMoveable) {
             isDragging = true;
             startX = e.clientX;
             onVerifyFail.value = false;
         }
     })
 
-    slider.addEventListener('touchstart', function(e) {
-        if(silderMoveable) {
+    slider.addEventListener('touchstart', function (e) {
+        if (silderMoveable) {
             e.preventDefault();
             isDragging = true;
             startX = e.touches[0].clientX;
@@ -39,52 +46,53 @@ onMounted(() => {
         }
     }, { passive: false });
 
-    document.addEventListener('mousemove', function(e) {
+    document.addEventListener('mousemove', function (e) {
         if (isDragging) {
             silderMoveable = false;// 产生了位移，则需等待验证后才可再次移动
             deltaX = e.clientX - startX;
             // 对位移距离限幅
-            if(deltaX < 0)
+            if (deltaX < 0)
                 deltaX = 0;
-            if(deltaX > 200)
+            if (deltaX > 200)
                 deltaX = 200;
             // 调整滑块条位置样式
             slider.style.transform = ` translateX(${deltaX}px)`;
             // 调整图片旋转样式 （200 -> 360）映射 y = 9/5x
-            imageEle.style.transform = `rotate(${deltaX*9/5}deg)`
+            imageEle.style.transform = `rotate(${deltaX * 9 / 5}deg)`
         }
     });
 
-    document.addEventListener('touchmove', function(e) {
+    document.addEventListener('touchmove', function (e) {
         if (isDragging) {
             e.preventDefault();
             silderMoveable = false;
             deltaX = e.touches[0].clientX - startX;
-            if(deltaX < 0) deltaX = 0;
-            if(deltaX > 200) deltaX = 200;
+            if (deltaX < 0) deltaX = 0;
+            if (deltaX > 200) deltaX = 200;
             slider.style.transform = `translateX(${deltaX}px)`;
-            imageEle.style.transform = `rotate(${deltaX*9/5}deg)`;
+            imageEle.style.transform = `rotate(${deltaX * 9 / 5}deg)`;
         }
     }, { passive: false });
 
 
     document.addEventListener('mouseup', async () => {
-        if(isDragging)
-        {
+        if (isDragging) {
             isDragging = false;
-            if(!deltaX)
-            {
+            if (!deltaX) {
                 silderMoveable = true;// 位移距离为0，无需验证可以继续移动
-            }else{
+            } else {
                 try {
                     onVerifying.value = true;
-                    let res = await ServerSDK.CheckRotationVerification(deltaX * 9 / 5);
-                    switch (res) {
-                        case 1:
+                    let res = await request.post('checkCaptcha', {
+                        session: localStorage.getItem('captcha-session'),
+                        rotateDeg: deltaX * 9 / 5
+                    })
+                    switch (res.code) {
+                        case 0:
                             // 验证成功
                             emit('success');
                             break;
-                        case -2:
+                        case -5002:
                             // 可以再试一次
                             onVerifyFail.value = true;
                             slider.style.transition = "transform 0.6s";
@@ -98,20 +106,15 @@ onMounted(() => {
                                 imageEle.style.transition = "transform 0s";
                             }, 600);
                             break;
-                        case -1:
-                            console.log('验证次数过多，请重试')
-                            emit('fail');
-                            break;
                         default:
-                            // 大概率是0，过期和不存在
-                            console.log('验证session过期或不存在')
+                            console.log('验证session过期、不存在、服务器错误')
                             emit('fail');
                             break;
-                        }
+                    }
                 } catch (error) {
-                    console.log("图像验证码错误："+error);
+                    console.log("图像验证码错误：" + error);
                     emit('fail');
-                }finally{
+                } finally {
                     onVerifying.value = false;
                 }
             }
@@ -119,22 +122,23 @@ onMounted(() => {
     });
 
     document.addEventListener('touchend', async () => {
-        if(isDragging)
-        {
+        if (isDragging) {
             isDragging = false;
-            if(!deltaX)
-            {
+            if (!deltaX) {
                 silderMoveable = true;// 位移距离为0，无需验证可以继续移动
-            }else{
+            } else {
                 try {
                     onVerifying.value = true;
-                    let res = await ServerSDK.CheckRotationVerification(deltaX * 9 / 5);
-                    switch (res) {
-                        case 1:
+                    let res = await request.post('checkCaptcha', {
+                        session: localStorage.getItem('captcha-session'),
+                        rotateDeg: deltaX * 9 / 5
+                    })
+                    switch (res.code) {
+                        case 0:
                             // 验证成功
                             emit('success');
                             break;
-                        case -2:
+                        case -5002:
                             // 可以再试一次
                             onVerifyFail.value = true;
                             slider.style.transition = "transform 0.6s";
@@ -148,20 +152,15 @@ onMounted(() => {
                                 imageEle.style.transition = "transform 0s";
                             }, 600);
                             break;
-                        case -1:
-                            console.log('验证次数过多，请重试')
-                            emit('fail');
-                            break;
                         default:
-                            // 大概率是0，过期和不存在
-                            console.log('验证session过期或不存在')
+                            console.log('验证session过期、不存在、服务器错误')
                             emit('fail');
                             break;
-                        }
+                    }
                 } catch (error) {
-                    console.log("图像验证码错误："+error);
+                    console.log("图像验证码错误：" + error);
                     emit('fail');
-                }finally{
+                } finally {
                     onVerifying.value = false;
                 }
             }
@@ -171,25 +170,32 @@ onMounted(() => {
 
 </script>
 <template>
-<transition name="el-fade-in-linear">
-<div class="verification-bcc" @click="$emit('fail')">
-    <div class="verification-container" onclick="event.stopPropagation()">
-        <div class="title">安全验证</div>
-        <div class="subtitle">{{ onVerifying ? "正在验证，请稍后..." : (onVerifyFail?"验证失败，请再试一次":"拖动滑块，使图片角度为水平") }}</div>
-        <div class="image-container">
-            <img :src="imageBase64" alt="" id="RV-image">
-        </div>
-        <div class="slide-container">
-            <div class="slider" id="RV-slider">
-                <svg t="1706696449802" class="icon" viewBox="0 0 1024 1024" fill="#666" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1924" width="18" height="18"><path d="M567.32505 547.18536c20.970614-21.479197 20.970614-56.307424 0-77.790714L185.251168 77.115332c-20.971637-21.47715-54.975079-21.47715-75.948763 0-20.973684 21.484314-20.973684 56.30947 0 77.793784l344.188016 353.383446-344.188016 353.384469c-20.973684 21.484314-20.973684 56.311517 0 77.79276 20.971637 21.482267 54.975079 21.482267 75.948763 0l382.072858-392.280337 0.001024-0.004094zM440.60802 154.908092l344.18597 353.383446-344.18597 353.385493c-20.973684 21.484314-20.973684 56.311517 0 77.79276 20.972661 21.482267 54.975079 21.482267 75.949786 0l382.074905-392.281361c20.966521-21.478174 20.966521-56.307424 0-77.790714L516.555759 77.115332c-20.972661-21.47715-54.975079-21.47715-75.949786 0-20.971637 21.48329-20.971637 56.30947 0.002047 77.79276z" p-id="1925"></path></svg>
+    <transition name="el-fade-in-linear">
+        <div class="verification-bcc" @click="$emit('fail')">
+            <div class="verification-container" onclick="event.stopPropagation()">
+                <div class="title">安全验证</div>
+                <div class="subtitle">{{ onVerifying ? "正在验证，请稍后..." : (onVerifyFail ? "验证失败，请再试一次" : "拖动滑块，使图片角度为水平")
+                    }}
+                </div>
+                <div class="image-container">
+                    <img :src="imageBase64" alt="" id="RV-image">
+                </div>
+                <div class="slide-container">
+                    <div class="slider" id="RV-slider">
+                        <svg t="1706696449802" class="icon" viewBox="0 0 1024 1024" fill="#666" version="1.1"
+                            xmlns="http://www.w3.org/2000/svg" p-id="1924" width="18" height="18">
+                            <path
+                                d="M567.32505 547.18536c20.970614-21.479197 20.970614-56.307424 0-77.790714L185.251168 77.115332c-20.971637-21.47715-54.975079-21.47715-75.948763 0-20.973684 21.484314-20.973684 56.30947 0 77.793784l344.188016 353.383446-344.188016 353.384469c-20.973684 21.484314-20.973684 56.311517 0 77.79276 20.971637 21.482267 54.975079 21.482267 75.948763 0l382.072858-392.280337 0.001024-0.004094zM440.60802 154.908092l344.18597 353.383446-344.18597 353.385493c-20.973684 21.484314-20.973684 56.311517 0 77.79276 20.972661 21.482267 54.975079 21.482267 75.949786 0l382.074905-392.281361c20.966521-21.478174 20.966521-56.307424 0-77.790714L516.555759 77.115332c-20.972661-21.47715-54.975079-21.47715-75.949786 0-20.971637 21.48329-20.971637 56.30947 0.002047 77.79276z"
+                                p-id="1925"></path>
+                        </svg>
+                    </div>
+                </div>
             </div>
         </div>
-    </div>
-</div>
-</transition>
+    </transition>
 </template>
 <style scoped>
-.verification-bcc{
+.verification-bcc {
     position: fixed;
     width: 100%;
     height: 100%;
@@ -201,7 +207,8 @@ onMounted(() => {
     justify-content: center;
     align-items: center;
 }
-.verification-container{
+
+.verification-container {
     width: 300px;
     height: 400px;
     background-color: #fff;
@@ -210,14 +217,17 @@ onMounted(() => {
     align-items: center;
     border-radius: 15px;
 }
-.verification-container>.title{
+
+.verification-container>.title {
     margin-top: 25px;
     color: #888;
 }
-.verification-container>.subtitle{
+
+.verification-container>.subtitle {
     margin-top: 8px;
 }
-.verification-container>.image-container{
+
+.verification-container>.image-container {
     display: flex;
     margin-top: 28px;
     width: 160px;
@@ -228,13 +238,15 @@ onMounted(() => {
     justify-content: center;
     overflow: hidden;
 }
-.verification-container>.image-container>img{
+
+.verification-container>.image-container>img {
     width: 226px;
     height: 226px;
     transform: rotate(0deg);
     background-color: gray;
 }
-.verification-container>.slide-container{
+
+.verification-container>.slide-container {
     width: 240px;
     height: 40px;
     border-radius: 20px;
@@ -243,7 +255,8 @@ onMounted(() => {
     display: flex;
     align-items: center;
 }
-.verification-container>.slide-container>.slider{
+
+.verification-container>.slide-container>.slider {
     width: 45px;
     height: 45px;
     background-color: #fff;
@@ -255,5 +268,4 @@ onMounted(() => {
     position: relative;
     transform: translateX(0);
 }
-
 </style>
\ No newline at end of file