2 lines
7.6 KiB
JavaScript
2 lines
7.6 KiB
JavaScript
|
import{r as e,j as t,o as a,c as l,w as s,a as n,b as o,d as u,k as i,l as r,s as c,i as v,g as d,m as g,v as h,e as p,f as m,I as w}from"./index-BMxaUgem.js";import{_ as f,a as x,b as A}from"./old.CKixGO1Z.js";import{o as E}from"./uni-app.es.B5-OajNy.js";import{_ as F}from"./_plugin-vue_export-helper.BCo6x5W8.js";import{g as b}from"./loginApi.Csw35X6S.js";const K=F({__name:"huakuai",emits:["success"],setup(g,{emit:h}){const p=h,m=100,w=e(null),f=e(null),x=e(400),A=e(600),F=e(0),b=e(0),K=e(0),G=e(!1),I=e(0);const y=`path('${z=m,`\n M20 0\n h${z/3-20}\n a20 20 0 0 1 0 40\n h${z/3}\n a20 20 0 0 0 0 -40\n h${z/3-20}\n v${z/3-20}\n a20 20 0 0 1 -40 0\n v${z/3}\n a20 20 0 0 0 40 0\n v${z/3-20}\n h-${z/3-20}\n a20 20 0 0 1 0 -40\n h-${z/3}\n a20 20 0 0 0 0 40\n h-${z/3-20}\n z\n `}')`;var z;function C(){r().in(w.value).select(".bg-image").boundingClientRect((e=>{e?(console.log("图片宽高：",e.width,e.height),x.value=2*e.width,A.value=2*e.height,F.value=Math.random()*(x.value-200)+m,F.value<100&&(F.value=100),b.value=A.value/2,K.value=0,console.log("originX:",F.value,"originY:",b.value)):console.error("无法获取.bg-image尺寸")})).exec()}function L(e){G.value=!0,I.value=e.touches?2*e.touches[0].clientX:2*e.clientX,window.addEventListener("mousemove",Q),window.addEventListener("mouseup",k),window.addEventListener("touchmove",Q),window.addEventListener("touchend",k)}function Q(e){if(!G.value)return;let t=(e.touches?2*e.touches[0].clientX:2*e.clientX)-I.value;t=Math.max(0,Math.min(t,x.value-m)),K.value=t}function k(){G.value=!1,window.removeEventListener("mousemove",Q),window.removeEventListener("mouseup",k),window.removeEventListener("touchmove",Q),window.removeEventListener("touchend",k),Math.abs(K.value-F.value)<20?(c({title:"验证成功",icon:"none",duration:2e3}),p("success")):(K.value=0,c({title:"验证失败",icon:"none",duration:2e3}))}e(null);const M=e("");return E((()=>{let e=Math.floor(4*Math.random());const t=["/wechat/thd/assets/0-BhKRdqO-.png","/wechat/thd/assets/1-CgyqSGMe.png","/wechat/thd/assets/2-D7X-ZbTx.png","/wechat/thd/assets/3-CQDilGtL.png"];M.value=t[e]})),t((()=>{window.removeEventListener("mousemove",Q),window.removeEventListener("mouseup",k),window.removeEventListener("touchmove",Q),window.removeEventListener("touchend",k)})),(e,t)=>{const r=v,c=d;return a(),l(r,{class:"captcha-container",ref_key:"container",ref:w},{default:s((()=>[n(r,{class:"font-title"},{default:s((()=>[o("请通过滑块验证")])),_:1}),n(r,{class:"captcha-image",style:{position:"relative",width:"100%",height:"400rpx",overflow:"hidden"}},{default:s((()=>[n(c,{src:M.value,class:"bg-image",mode:"widthFix",onLoad:C},null,8,["src"]),n(r,{class:"overlay",style:u({width:x.value+"rpx",height:A.value+"rpx"})},{default:s((()=>[n(r,{class:"hole",style:u({top:b.value+"rpx",left:F.value+50+"rpx",width:"100rpx",height:"100rpx",clipPath:y,transform:"translate(-50%, -50%)",backgroundColor:"rgba(0,0,0,0.6)"})},null,8,["style"]),n(r,{class:"piece",style:u({top:b.value+"rpx",left:K.value+50+"rpx",width:"100rpx",height:"100rpx",backgroundImage:`url(${M.value})`,backgroundSize:x.value+"rpx "+A.value+"rpx",backgroundPosition:`-${F.value+10}rpx -${b.value-20}rpx`,clipPath:y,transform:"translate(-50%, -50%)"})},null,8,["style"])])),_:1},8,["style"])])),_:1}),n(r,{class:"slider-bar"},{default:s((()=>[n(r,{class:"slider-bar-font"},{default:s((()=>[o(" 向右滑动滑块填充拼图 ")])),_:1}),n(r,{class:"slider-button",ref_key:"btn",ref:f,onTouchstart:i(L,["prevent"]),onMousedown:i(L,["prevent"]),style:u({left:K.value+"rpx",maxWidth:x.value-m+"rpx"})},{default:s((()=>[n(c,{src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAABnJJREFUeF7t3V+IFVUcB/Dvb1rtwX3yKXyfuQ/SQ9KdC9tjEvWQUJFSItkfDMsM7c4tjWiNWPPO3bVSzDSxQjQ0IQqKIBKCVnfuikRY7L375quPglA6v7grkWt7554558zMmevx1d+Z+f1+nzlz58/ODMH+M6oDZFQ2NhlYEMM2AgtiQQzrgGHp2BlSRpCpK9Mrb1wfWQfGQw5hBHBm/qa/Zna5Y5eKrKf5x/k1zsgyH4hrt/JwZohvnn+jUvutyLxU1j1whrS60UZmagK8avGK+BqIJgLX36uSgOzYcG5mG4haAO69YxlXwdgdVPyjsssuclwiyOR8NBbH+DU
|