增加设备绑定
This commit is contained in:
xuli3099
228
src/components/sliderCode.vue
Normal file
228
src/components/sliderCode.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<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