修改滑动验证码

src/pages/accountSetting/components/SliderVerify/index.less

@@ -43,6 +43,20 @@
       left: 175px;
       top: 45px;
     }
+
+    .status {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #fff;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      color: red;
+    }
   }
   
 
@@ -95,7 +109,7 @@
           bottom: 0;
           border-top-left-radius: 45px;
           border-bottom-left-radius: 45px ;
-          background-color: #91d5ff;
+          // background-color: #91d5ff;
       }
   }
 

src/pages/accountSetting/components/SliderVerify/index.tsx

@@ -96,8 +96,11 @@ const SliderVerify: React.FC<SliderVerifyProps> = (props) => {
 
   const onError = () => {
     console.log("error")
+    setStatus(ERROR);
+    setTimeout(() => {
+      reRender()
+    }, 500)
     // setOffset({x: 0, y: 0})
-    reRender()
   }
 
   const onReset = () => {
@@ -106,12 +109,8 @@ const SliderVerify: React.FC<SliderVerifyProps> = (props) => {
 
   const reRender = () => {
     setLoading(true);
-    setStatus(READY);
-    setOffset({x: 0, y: 0})
     const objImage = new Image()
-    console.log(imageUrl)
     objImage.addEventListener("load", () => {
-        console.log(objImage.width);
         // 先获取两个ctx
         const ctxShadow = shadowCanvas.current.getContext("2d")
         const ctxFragment = fragmentCanvas.current.getContext("2d")
@@ -147,6 +146,9 @@ const SliderVerify: React.FC<SliderVerifyProps> = (props) => {
 
         // 修改状态
         setLoading(false);
+        setStatus(READY);
+        setOffset({x: 0, y: 0})
+
     })
     objImage.src = imageUrl
   }
@@ -161,11 +163,11 @@ const SliderVerify: React.FC<SliderVerifyProps> = (props) => {
           ? null
           : (
             <div>
-              {
+              {/* {
                 loading
                 ? <div className={styles.loading}><Spin /></div>
                 : null
-              }
+              } */}
               
               <div className={styles.sliderContainer} style={{visibility: !loading ? 'visible' : 'hidden'}}>
               <div className={styles.container}>
@@ -184,6 +186,12 @@ const SliderVerify: React.FC<SliderVerifyProps> = (props) => {
                     ref={fragmentCanvas}
                     style={{ left: offset.x + "px", top: clipImagePosition.y + "px" }}
                   ></canvas>
+                  {
+                    status === ERROR
+                    ? <div className={styles.status}>验证失败</div>
+                    : null
+                  }
+                  
                 </div>
                 <div className={styles.slider} onMouseMove={mouseMove} onMouseLeave={mouseUp}>
                   <div className={styles.sliderHandle} onMouseDown={mouseDown}  onMouseUp={mouseUp} style={sliderHandleStyle} ><DoubleRightOutlined /></div>