182 lines
4.8 KiB
Vue
182 lines
4.8 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 验证区域 -->
|
|
<view class="captcha-area">
|
|
<image :src="backgroundImg" class="bg-img" mode="widthFix"></image>
|
|
<view class="puzzle-hole" :style="{
|
|
left: `${holePosition.x}px`,
|
|
top: `${holePosition.y}px`,
|
|
width: `${puzzleSize.width}px`,
|
|
height: `${puzzleSize.height}px`
|
|
}"></view>
|
|
</view>
|
|
|
|
<!-- 滑块区域 -->
|
|
<view class="slider-area">
|
|
<movable-area class="movable-area">
|
|
<movable-view class="movable-view" direction="horizontal" :x="sliderX" @change="onDrag"
|
|
@touchend="onDragEnd" :damping="40" :friction="10">
|
|
<image :src="puzzleImg" class="puzzle-img"></image>
|
|
</movable-view>
|
|
</movable-area>
|
|
<text class="slider-text">{{ sliderText }}</text>
|
|
</view>
|
|
|
|
<!-- 操作按钮 -->
|
|
<button class="refresh-btn" @click="initCaptcha">刷新验证码</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
backgroundImg: './static/images/captcha/1.jpg?v=1', // 替换为你的背景图
|
|
puzzleImg: '', // 滑块小图
|
|
holePosition: { x: 0, y: 0 }, // 缺口位置
|
|
puzzleSize: { width: 50, height: 50 }, // 滑块尺寸
|
|
sliderX: 0, // 滑块位置
|
|
targetX: 0, // 正确目标位置
|
|
isVerified: false,
|
|
sliderText: '拖动滑块完成拼图'
|
|
};
|
|
},
|
|
mounted() {
|
|
this.initCaptcha();
|
|
},
|
|
methods: {
|
|
// 初始化验证码
|
|
initCaptcha() {
|
|
this.isVerified = false;
|
|
this.sliderX = 0;
|
|
this.sliderText = '拖动滑块完成拼图';
|
|
|
|
// 随机生成缺口位置 (示例)
|
|
const maxX = 300 - this.puzzleSize.width;
|
|
const maxY = 200 - this.puzzleSize.height;
|
|
|
|
this.holePosition = {
|
|
x: Math.floor(Math.random() * maxX),
|
|
y: Math.floor(Math.random() * maxY)
|
|
};
|
|
|
|
// 这里应该从服务器获取裁剪后的小图
|
|
// 实际项目中需要通过API获取
|
|
this.puzzleImg = this.generatePuzzleImage();
|
|
|
|
// 设置目标位置 (映射到滑块轨道)
|
|
this.targetX = this.mapToSliderPosition(this.holePosition.x);
|
|
},
|
|
|
|
// 模拟生成滑块图片 (实际应从服务端获取)
|
|
generatePuzzleImage() {
|
|
// 这里应该是从背景图裁剪的图片
|
|
return './static/images/captcha/1-1.jpg?v=1';
|
|
},
|
|
|
|
// 映射背景位置到滑块位置
|
|
mapToSliderPosition(bgX) {
|
|
const bgWidth = 300; // 背景图显示宽度
|
|
const sliderWidth = 280; // 滑块轨道宽度
|
|
return (bgX / bgWidth) * sliderWidth;
|
|
},
|
|
|
|
// 拖动中
|
|
onDrag(e) {
|
|
if (this.isVerified) return;
|
|
this.sliderX = e.detail.x;
|
|
},
|
|
|
|
// 拖动结束
|
|
onDragEnd() {
|
|
if (this.isVerified) return;
|
|
|
|
// 允许的误差范围
|
|
const tolerance = 5;
|
|
|
|
if (Math.abs(this.sliderX - this.targetX) < tolerance) {
|
|
this.isVerified = true;
|
|
this.sliderText = '验证成功 ✓';
|
|
uni.showToast({ title: '验证成功', icon: 'success' });
|
|
// 这里可以触发验证通过后的操作
|
|
} else {
|
|
this.sliderText = '验证失败，请重试';
|
|
this.sliderX = 0;
|
|
setTimeout(() => {
|
|
if (!this.isVerified) this.sliderText = '拖动滑块完成拼图';
|
|
}, 1000);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.captcha-area {
|
|
position: relative;
|
|
width: 300px;
|
|
height: 200px;
|
|
border: 1px solid #eee;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.bg-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.puzzle-hole {
|
|
position: absolute;
|
|
border: 2px dashed #fff;
|
|
box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.5);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.slider-area {
|
|
width: 300px;
|
|
position: relative;
|
|
}
|
|
|
|
.movable-area {
|
|
width: 100%;
|
|
height: 50px;
|
|
background-color: #f5f5f5;
|
|
border-radius: 25px;
|
|
}
|
|
|
|
.movable-view {
|
|
width: 60px;
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.puzzle-img {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.slider-text {
|
|
display: block;
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
color: #666;
|
|
}
|
|
|
|
.refresh-btn {
|
|
margin-top: 20px;
|
|
width: 200px;
|
|
}
|
|
</style> |