first commit

src/components/sliderCaptcha.vue

@@ -0,0 +1,182 @@
+<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>