150 lines
2.7 KiB
Vue
150 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<view :class="mode=='pop'?'masks':''" v-if="clickShow">
|
||
|
|
<view :class="mode=='pop'?'verifybox':''">
|
||
|
|
<view class="verifybox-top" v-if="mode=='pop'">
|
||
|
|
请完成安全验证
|
||
|
|
<text class="verifybox-close" @click="clickShow = false">
|
||
|
|
<text class="iconfont icon-close"></text>
|
||
|
|
</text>
|
||
|
|
</view>
|
||
|
|
<view class="verifybox-bottom" :style="{padding:mode=='pop'?'15px':'0'}">
|
||
|
|
<!-- 验证码容器 -->
|
||
|
|
<move-verify :style="{ marginTop: '40rpx'} " @vertify='vertifyResult'></move-verify>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import moveVerify from './move-verify.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'MoveVerify',
|
||
|
|
components: {
|
||
|
|
moveVerify,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
mode: {
|
||
|
|
type: String,
|
||
|
|
default: 'pop'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
vertify: false, //验证是否成功
|
||
|
|
// showBox:true,
|
||
|
|
clickShow: false,
|
||
|
|
// 内部类型
|
||
|
|
verifyType: undefined,
|
||
|
|
tipWords: '', // 提示语
|
||
|
|
startMoveTime: "", //移动开始的时间
|
||
|
|
endMovetime: '', //移动结束的时间
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
/**
|
||
|
|
* 滑动验证
|
||
|
|
*/
|
||
|
|
vertifyResult(vertify) {
|
||
|
|
this.vertify = vertify
|
||
|
|
if(this.vertify) this.$emit('success', this.vertify)
|
||
|
|
},
|
||
|
|
show() {
|
||
|
|
if (this.mode == "pop") {
|
||
|
|
this.clickShow = true;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
hide() {
|
||
|
|
if (this.mode == "pop") {
|
||
|
|
this.clickShow = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
instance() {
|
||
|
|
return this.$refs.instance || {}
|
||
|
|
},
|
||
|
|
showBox() {
|
||
|
|
if (this.mode == 'pop') {
|
||
|
|
return this.clickShow
|
||
|
|
} else {
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.verifybox {
|
||
|
|
width: 90%;
|
||
|
|
position: relative;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border-radius: 2px;
|
||
|
|
border: 1px solid #e4e7eb;
|
||
|
|
background-color: #fff;
|
||
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, .3);
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.verifybox-top {
|
||
|
|
padding: 0 15px;
|
||
|
|
height: 50px;
|
||
|
|
line-height: 50px;
|
||
|
|
text-align: left;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #45494c;
|
||
|
|
border-bottom: 1px solid #e4e7eb;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.verifybox-bottom {
|
||
|
|
/* padding: 15px; */
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.verifybox-close {
|
||
|
|
position: absolute;
|
||
|
|
top: 13px;
|
||
|
|
right: 9px;
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
text-align: center;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.masks {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 1001;
|
||
|
|
width: 100%;
|
||
|
|
height: 100vh;
|
||
|
|
background: rgba(0, 0, 0, .3);
|
||
|
|
/* display: none; */
|
||
|
|
transition: all .5s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.verify-tips {
|
||
|
|
position: absolute;
|
||
|
|
left: 0px;
|
||
|
|
bottom: 0px;
|
||
|
|
width: 100%;
|
||
|
|
height: 30px;
|
||
|
|
background-color: rgb(231, 27, 27, .5);
|
||
|
|
line-height: 30px;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tips-enter,
|
||
|
|
.tips-leave-to {
|
||
|
|
bottom: -30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tips-enter-active,
|
||
|
|
.tips-leave-active {
|
||
|
|
transition: bottom .5s;
|
||
|
|
}
|
||
|
|
</style>
|