516 lines
15 KiB
Vue
516 lines
15 KiB
Vue
<template>
|
|
<view :class="mode=='pop'?'masks':''" v-show="showBox">
|
|
<view :class="mode=='pop'?'verifybox':''" :style="{'max-width':parseInt(imgSize.width)+30+'px'}">
|
|
<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'}">
|
|
<!-- 验证码容器 -->
|
|
<!-- 滑动 -->
|
|
<view v-if="componentType=='VerifySlide'">
|
|
<VerifySlide
|
|
@success="success"
|
|
:captchaType="captchaType"
|
|
:type="verifyType"
|
|
:figure="figure"
|
|
:arith="arith"
|
|
:mode="mode"
|
|
:vSpace="vSpace"
|
|
:explain="explain"
|
|
:imgSize="imgSize"
|
|
:blockSize="blockSize"
|
|
:barSize="barSize"
|
|
:defaultImg = "defaultImg"
|
|
ref="instance"
|
|
></VerifySlide>
|
|
</view>
|
|
<!-- 点选 -->
|
|
<view v-if="componentType=='VerifyPoints'">
|
|
<VerifyPoint
|
|
:captchaType="captchaType"
|
|
:type="verifyType"
|
|
:figure="figure"
|
|
:arith="arith"
|
|
:mode="mode"
|
|
:vSpace="vSpace"
|
|
:explain="explain"
|
|
:imgSize="imgSize"
|
|
:blockSize="blockSize"
|
|
:barSize="barSize"
|
|
:defaultImg = "defaultImg"
|
|
ref="instance"
|
|
></VerifyPoint>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
/**
|
|
* Verify 验证码组件
|
|
* @description 分发验证码使用
|
|
* */
|
|
import VerifySlide from './verifySlider/verifySlider'
|
|
import VerifyPoint from "./verifyPoint/verifyPoint"
|
|
|
|
export default {
|
|
name: 'Vue2Verify',
|
|
props: {
|
|
captchaType:{
|
|
type:String,
|
|
required:true
|
|
},
|
|
figure: {
|
|
type: Number
|
|
},
|
|
arith: {
|
|
type: Number
|
|
},
|
|
mode: {
|
|
type: String,
|
|
default:'pop'
|
|
},
|
|
vSpace: {
|
|
type: Number,
|
|
default:5
|
|
},
|
|
explain: {
|
|
type: String,
|
|
default: '向右滑动完成验证'
|
|
},
|
|
imgSize: {
|
|
type: Object,
|
|
default() {
|
|
return {
|
|
width: '310px',
|
|
height: '155px'
|
|
}
|
|
}
|
|
},
|
|
blockSize: {
|
|
type: Object,
|
|
default() {
|
|
return {
|
|
width: '50px',
|
|
height: '50px'
|
|
}
|
|
}
|
|
},
|
|
barSize: {
|
|
type: Object
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
// showBox:true,
|
|
clickShow:false,
|
|
// 内部类型
|
|
verifyType: undefined,
|
|
// 所用组件类型
|
|
componentType: undefined,
|
|
defaultImg: ''
|
|
}
|
|
},
|
|
mounted() {
|
|
this.uuid()
|
|
// #ifdef H5
|
|
document.addEventListener("touchmove", (e) => {
|
|
// e.preventDefalut()
|
|
e.stopPropagation = true
|
|
}, {
|
|
passive: false
|
|
});
|
|
var startX, startY;
|
|
document.addEventListener("touchstart", (e) => {
|
|
startX = e.targetTouches[0].pageX;
|
|
startY = e.targetTouches[0].pageY;
|
|
});
|
|
document.addEventListener("touchmove", (e) => {
|
|
var moveX = e.targetTouches[0].pageX;
|
|
var moveY = e.targetTouches[0].pageY;
|
|
if (Math.abs(moveX - startX) > Math.abs(moveY - startY)) {
|
|
e.preventDefault();
|
|
}
|
|
}, {
|
|
passive: false,
|
|
});
|
|
// #endif
|
|
},
|
|
methods: {
|
|
// 生成 uuid
|
|
uuid() {
|
|
var s = [];
|
|
var hexDigits = "0123456789abcdef";
|
|
for (var i = 0; i < 36; i++) {
|
|
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
|
|
}
|
|
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
|
|
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
|
|
s[8] = s[13] = s[18] = s[23] = "-";
|
|
var slider = 'slider'+ '-'+s.join("");
|
|
var point = 'point'+ '-'+s.join("");
|
|
// 判断下是否存在 slider
|
|
if(!uni.getStorageSync('slider')) {
|
|
uni.setStorageSync('slider', slider)
|
|
}
|
|
if(!uni.getStorageSync('point')) {
|
|
uni.setStorageSync("point",point);
|
|
}
|
|
},
|
|
success(e) {
|
|
this.$emit('success', e)
|
|
},
|
|
/**
|
|
* refresh
|
|
* @description 刷新
|
|
* */
|
|
refresh() {
|
|
if (this.instance.refresh) {
|
|
this.instance.refresh()
|
|
}
|
|
},
|
|
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;
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
captchaType:{
|
|
immediate: true,
|
|
handler(captchaType) {
|
|
switch (captchaType.toString()) {
|
|
case 'blockPuzzle':
|
|
this.verifyType = '2'
|
|
this.componentType = 'VerifySlide'
|
|
break
|
|
case 'clickWord':
|
|
this.verifyType = ''
|
|
this.componentType = 'VerifyPoints'
|
|
break
|
|
}
|
|
}
|
|
},
|
|
},
|
|
components: {
|
|
VerifySlide,
|
|
VerifyPoint
|
|
},
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.verifybox{
|
|
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;
|
|
/*#ifdef MP*/
|
|
bottom: 0;
|
|
/*#endif*/
|
|
/*#ifdef H5 || APP-PLUS*/
|
|
top: 0;
|
|
/*#endif*/
|
|
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:rgba(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;
|
|
}
|
|
/* ---------------------------- */
|
|
/*常规验证码*/
|
|
.verify-code {
|
|
font-size: 20px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
margin-bottom: 5px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.cerify-code-panel {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.verify-code-area {
|
|
float: left;
|
|
}
|
|
|
|
.verify-input-area {
|
|
float: left;
|
|
width: 60%;
|
|
padding-right: 10px;
|
|
|
|
}
|
|
|
|
.verify-change-area {
|
|
line-height: 30px;
|
|
float: left;
|
|
}
|
|
|
|
.varify-input-code {
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 25px;
|
|
}
|
|
|
|
.verify-change-code {
|
|
color: #337AB7;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.verify-btn {
|
|
width: 200px;
|
|
height: 30px;
|
|
background-color: #337AB7;
|
|
color: #FFFFFF;
|
|
border: none;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
|
|
/*滑动验证码*/
|
|
.verify-bar-area {
|
|
position: relative;
|
|
background: #FFFFFF;
|
|
text-align: center;
|
|
-webkit-box-sizing: content-box;
|
|
-moz-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
border: 1px solid #ddd;
|
|
-webkit-border-radius: 4px;
|
|
}
|
|
|
|
.verify-bar-area .verify-move-block {
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
-webkit-box-sizing: content-box;
|
|
-moz-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
box-shadow: 0 0 2px #888888;
|
|
-webkit-border-radius: 1px;
|
|
}
|
|
|
|
.verify-bar-area .verify-move-block:hover {
|
|
background-color: #337ab7;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.verify-bar-area .verify-left-bar {
|
|
position: absolute;
|
|
top: -1px;
|
|
left: -1px;
|
|
background: #f0fff0;
|
|
cursor: pointer;
|
|
-webkit-box-sizing: content-box;
|
|
-moz-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.verify-img-panel {
|
|
margin: 0;
|
|
-webkit-box-sizing: content-box;
|
|
-moz-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
border-top: 1px solid #ddd;
|
|
border-bottom: 1px solid #ddd;
|
|
border-radius: 3px;
|
|
position: relative;
|
|
}
|
|
|
|
.verify-img-panel .verify-refresh {
|
|
width: 25px;
|
|
height: 25px;
|
|
text-align: center;
|
|
padding: 5px;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
.verify-img-panel .icon-refresh {
|
|
font-size: 20px;
|
|
color: #fff;
|
|
}
|
|
|
|
.verify-img-panel .verify-gap {
|
|
background-color: #fff;
|
|
position: relative;
|
|
z-index: 2;
|
|
border: 1px solid #fff;
|
|
}
|
|
|
|
.verify-bar-area .verify-move-block .verify-sub-block {
|
|
position: absolute;
|
|
text-align: center;
|
|
z-index: 3;
|
|
/* border: 1px solid #fff; */
|
|
}
|
|
|
|
.verify-bar-area .verify-move-block .verify-icon {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.verify-bar-area .verify-msg {
|
|
z-index: 3;
|
|
}
|
|
|
|
/*字体图标的css*/
|
|
/*@font-face {font-family: "iconfont";*/
|
|
/*src: url('../fonts/iconfont.eot?t=1508229193188'); !* IE9*!*/
|
|
/*src: url('../fonts/iconfont.eot?t=1508229193188#iefix') format('embedded-opentype'), !* IE6-IE8 *!*/
|
|
/*url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),*/
|
|
/*url('../fonts/iconfont.ttf?t=1508229193188') format('truetype'), !* chrome, firefox, opera, Safari, Android, iOS 4.2+*!*/
|
|
/*url('../fonts/iconfont.svg?t=1508229193188#iconfont') format('svg'); !* iOS 4.1- *!*/
|
|
/*}*/
|
|
|
|
.iconfont {
|
|
font-family: "iconfont" !important;
|
|
font-size: 16px;
|
|
font-style: normal;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.icon-check:before {
|
|
content: " ";
|
|
display: block;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: absolute;
|
|
margin: auto;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 9999;
|
|
background-image: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/0001.png");
|
|
background-size: contain;
|
|
}
|
|
|
|
.icon-close:before {
|
|
content: " ";
|
|
display: block;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: absolute;
|
|
margin: auto;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 9999;
|
|
background-image: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/0002.png");
|
|
background-size: contain;
|
|
}
|
|
|
|
.icon-right:before {
|
|
content: " ";
|
|
display: block;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: absolute;
|
|
margin: auto;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
background-size: cover;
|
|
z-index: 9999;
|
|
background-image: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/0003.png");
|
|
background-size: contain;
|
|
}
|
|
|
|
.icon-refresh:before {
|
|
content: " ";
|
|
display: block;
|
|
width: 16px;
|
|
height: 16px;
|
|
position: absolute;
|
|
margin: auto;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
z-index: 9999;
|
|
background-image: url("https://lihai001.oss-cn-chengdu.aliyuncs.com/public/kk/0004.png");
|
|
background-size: contain;
|
|
}
|
|
</style>
|