删除无用内容
This commit is contained in:
xuli3099
@@ -1,182 +0,0 @@
|
||||
<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>
|
||||
@@ -1,228 +0,0 @@
|
||||
<template><view>
|
||||
<view v-if="modelValue.show" class="yzm_body" @mousemove="touchmove" @mouseup="touchend">
|
||||
<view class="zhuti">
|
||||
<view :class="['msg', msgText==='验证成功' ? 'green' : (['安全验证', '验证中...'].indexOf(msgText)>-1 ? '' : 'red')]">{{msgText}}</view>
|
||||
<view class="title">拖动下方滑块完成拼图</view>
|
||||
<view class="movable-area">
|
||||
<view id="msg" v-if="zhutuPic === ''">{{msgLoadMsg}}</view>
|
||||
<view id="pic" v-else :style="{background: 'url(' + zhutuPic + ') no-repeat 100%/100%'}"></view>
|
||||
<view id="line"></view>
|
||||
<view :class="['movable-view', {doudong: futu_doudongClass}]" :style="{background: 'url(' + futuPic + ') no-repeat top left/100% 338rpx', left: futu_x+'px', transitionDuration: futu_x===10 ? '300ms' : '0ms'}"
|
||||
@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" @mousedown="touchstart"></view>
|
||||
</view>
|
||||
<view class="close iconfont iconguanbi" @click="modelValue.show = false"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view></template>
|
||||
<script>
|
||||
export default{
|
||||
emits: ['success'],
|
||||
props:{
|
||||
modelValue: {type: Object, default: {}}
|
||||
},
|
||||
data(){return{
|
||||
zhutuPic: '',//主图
|
||||
//缺口图
|
||||
futuPic: '',
|
||||
futu_x: 10, //默认的位置
|
||||
futu_anxiaX: undefined, //按下时，手指的位置
|
||||
futu_doudongClass: false,
|
||||
//提示信息
|
||||
msgText: '安全验证',
|
||||
msgLoadMsg: '加载中',
|
||||
}},
|
||||
mounted(){},//该组件被挂载到实例上去之后调用
|
||||
methods: {
|
||||
shuaxin(){
|
||||
uni.request({url: this.$yuming+'/xlg_slideCode/yzm_pic.php',
|
||||
data: {
|
||||
type: 'shengcheng',
|
||||
session_id: this.$session_id,
|
||||
class: this.modelValue.className
|
||||
},
|
||||
success: (res) => {
|
||||
if(res.data.code === 1){//生成验证码成功
|
||||
var url = this.$yuming + '/xlg_slideCode/yzm_pic.php?class='+this.modelValue.className+'&session_id='+this.$session_id+'&time='+(new Date()*1)//time参数作用是 避免触发缓存
|
||||
this.futuPic = url+'&type=futu'
|
||||
this.zhutuPic = url+'&type=zhutu'
|
||||
}
|
||||
},
|
||||
complete: (res) => {
|
||||
//错误处理
|
||||
setTimeout(() => {
|
||||
var errMsg = this.$requestError(res);
|
||||
if(typeof(errMsg.msg) === 'string'){
|
||||
this.msgLoadMsg = errMsg.msg;
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
},
|
||||
touchstart(event){//手指按下
|
||||
if(this.futu_anxiaX === undefined && this.futu_x === this.$options.data().futu_x){
|
||||
this.futu_anxiaX = this.$isPc ? event.clientX : event.touches[0].clientX;
|
||||
}
|
||||
},
|
||||
touchmove(event){//手指移动
|
||||
if(this.futu_anxiaX !== undefined){
|
||||
var x = this.$options.data().futu_x + ((this.$isPc ? event.clientX : event.touches[0].clientX) - this.futu_anxiaX),
|
||||
[min, max] = [0, this.$upx2px(600 - 79)]//确保不会超出边界【600是父元素的宽度、79是自身元素的宽度】
|
||||
this.futu_x = x < min ? min : (x > max ? max : x)
|
||||
}
|
||||
},
|
||||
touchend(event){//手指离开
|
||||
if(this.futu_anxiaX !== undefined){
|
||||
this.futu_anxiaX = undefined
|
||||
if(this.zhutuPic === ''){
|
||||
this.futu_x = this.$options.data().futu_x
|
||||
}else{
|
||||
this.msgText = '验证中...'
|
||||
uni.request({url: this.$yuming+'/xlg_slideCode/yzm_pic.php',
|
||||
data: {
|
||||
type: 'yanzheng',
|
||||
session_id: this.$session_id,
|
||||
class: this.modelValue.className,
|
||||
x: parseInt(this.futu_x * (679 / this.$upx2px(600)))//因为x是相对于movable-area容器宽度的，所以需要算出图片实际宽度相 对于 容器宽度的比例
|
||||
},
|
||||
success: (res) => {
|
||||
if(res.data.code === 1){
|
||||
this.$emit('success')
|
||||
this.msgText = '验证成功'
|
||||
setTimeout(() => {
|
||||
this.modelValue.show = false
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
complete: (res) => {
|
||||
var errMsg = this.$requestError(res);
|
||||
if(typeof(errMsg.msg) === 'string'){
|
||||
this.msgText = errMsg.msg
|
||||
//启动抖动动画
|
||||
this.futu_doudongClass = true//执行抖动的css动画
|
||||
//等待抖动结束
|
||||
setTimeout(() => {
|
||||
//停止抖动
|
||||
this.futu_doudongClass = false
|
||||
//回到默认的位置
|
||||
this.futu_x = this.$options.data().futu_x
|
||||
//重载
|
||||
if(errMsg.code === 2){
|
||||
if(typeof(res.data.error_cishu) === 'undefined' || res.data.error_cishu === 0){//等于空意味着滑块验证码不存在，也是需要刷新的
|
||||
this.shuaxin()
|
||||
}
|
||||
}
|
||||
}, 700);
|
||||
//恢复原状
|
||||
setTimeout(() => {
|
||||
this.msgText = '安全验证'
|
||||
}, 3500);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'modelValue.show'(newValue){
|
||||
if(newValue === true){
|
||||
//设置为初始值
|
||||
Object.assign(this, this.$options.data());
|
||||
this.shuaxin()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.yzm_body{
|
||||
display: flex;
|
||||
background: rgba(0,0,0,0.3);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 1001;
|
||||
width: 750rpx;
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.zhuti{
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
background: #FFF;
|
||||
width: 600rpx;
|
||||
padding: 20rpx 25rpx 30rpx 25rpx;
|
||||
border-radius: 15rpx;
|
||||
.msg{
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
&.red{color: red;}
|
||||
&.green{color: green;}
|
||||
}
|
||||
.close{
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
right: 20rpx;
|
||||
color: #A6A6A6;
|
||||
font-size: 36rpx;
|
||||
padding: 10rpx;
|
||||
}
|
||||
.title{
|
||||
font-size: 28rpx;
|
||||
line-height: 38rpx;
|
||||
color: #333;
|
||||
margin: 0 0 7rpx 0;
|
||||
}
|
||||
.movable-area{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 415rpx;
|
||||
flex-direction: column;
|
||||
#msg{
|
||||
width: 100%;
|
||||
line-height: 338rpx;
|
||||
justify-content: center;
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
background: #F8F8F8;
|
||||
}
|
||||
#pic{
|
||||
width: 600rpx;
|
||||
height: 338rpx;
|
||||
}
|
||||
#line{
|
||||
background: #e4e4e4;
|
||||
height: 20rpx;
|
||||
margin: 42rpx 0 15rpx 0;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
.movable-view{
|
||||
position: absolute;
|
||||
top: 0;left: 0;
|
||||
width: 79.63rpx;
|
||||
height: 100%;
|
||||
&:after{
|
||||
position: absolute;
|
||||
bottom: 0;left: 0;
|
||||
content: '';
|
||||
box-shadow: rgba(26, 101, 255, 0.52) 0 0 10rpx 1rpx;
|
||||
width: 100rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 50rpx;
|
||||
background: rgb(26, 101, 255) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAcAgMAAABuexVFAAAACVBMVEUAAADCwsL9/f1P0DqbAAAAAXRSTlMAQObYZgAAAB1JREFUGNNjCGVgYGANABKhyMwoEHMBkIgaZWIwAdyJJQnaJRg5AAAAAElFTkSuQmCC) no-repeat 50% 50%/auto 20rpx;
|
||||
margin-left: -10rpx;
|
||||
}
|
||||
@keyframes doudong{
|
||||
20%{transform: translateX(-15px);}
|
||||
40%{transform: translateX(15px);}
|
||||
60%{transform: translateX(-15px);}
|
||||
80%{transform: translateX(15px);}
|
||||
100%{transform:translateX(0);}
|
||||
}
|
||||
&.doudong{
|
||||
animation: doudong 500ms linear 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user