418 lines
9.4 KiB
Vue
418 lines
9.4 KiB
Vue
<template>
|
||
<view class="slider-verify-box" v-if="isShow">
|
||
<view :style="`background-image: url('../../static/image/slider-verify/${
|
||
$i18n.locale
|
||
}/${isError ? 'bg_error' : 'bg'}.png');`" class="verifyBox">
|
||
<!-- <view class="slider-title">{{ $t('authentication.title') }}</view> -->
|
||
<image class="slider-verify-box-close" src="/static/image/icon/close.png" @click.stop="hideSliderBox">
|
||
</image>
|
||
<view class="slide-content">
|
||
<view class="slider-pintu">
|
||
<!-- <u-icon
|
||
name="reload"
|
||
size="32"
|
||
color="#fff"
|
||
class="reload"
|
||
@tap="refreshVerify"
|
||
v-if="!isLoading"
|
||
></u-icon> -->
|
||
<image src="../../static/image/slider-verify/reload.png" mode="widthFix" style="width: 38rpx"
|
||
class="reload" @tap="refreshVerify" v-if="!isLoading"></image>
|
||
<view class="load" v-if="isLoading">
|
||
<van-loading type="spinner" />
|
||
<!-- <u-loading-icon text="" textSize="16" :vertical="true"></u-loading-icon> -->
|
||
</view>
|
||
<template v-else>
|
||
<image id="pintuImg" :src="canvasSrc" class="pintu"></image>
|
||
<view class="pintukuai" :style="{ top: '0px', left: oldx + 'px' }">
|
||
<image :src="blockSrc" :style="{
|
||
top: blockY + 'px',
|
||
left: oldx + 'px',
|
||
width: blockWidth + 'px',
|
||
height: blockHeight + 'px'
|
||
}"></image>
|
||
</view>
|
||
<view class="mark" v-if="isMess">
|
||
<image :src="`../../static/image/slider-verify/${$i18n.locale}/error.png`" mode="widthFix"
|
||
v-if="isError"></image>
|
||
<image :src="`../../static/image/slider-verify/${$i18n.locale}/success.png`" mode="widthFix"
|
||
v-else></image>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
<view class="slider-movearea" @touchend="endTouchMove">
|
||
<movable-area :animation="true">
|
||
<movable-view :class="
|
||
isLoading
|
||
? 'movable-view btn_info'
|
||
: isError
|
||
? 'movable-view btn_error'
|
||
: 'movable-view btn_success'
|
||
" :x="x" direction="horizontal" @change="startMove"></movable-view>
|
||
</movable-area>
|
||
<view class="huadao">{{
|
||
$t('authentication.content')
|
||
}}</view>
|
||
<view :class="
|
||
isError ? 'huadao_done error_bg' : 'huadao_done'
|
||
" :style="'width:' + doneWindth + 'px;'"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
postDataByParams
|
||
} from '../../utils/api.js'
|
||
|
||
export default {
|
||
name: 'slider-verify',
|
||
props: {
|
||
isShow: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
x: 0, //初始距离
|
||
oldx: 0, //移动的距离
|
||
top: 0, //拼图的top距离
|
||
canvasSrc: '',
|
||
blockSrc: '',
|
||
blockY: '',
|
||
nonceStr: '',
|
||
blockWidth: 50, //块图像的宽度(blockWidth大于14)
|
||
blockHeight: 50,
|
||
isLoading: true,
|
||
doneWindth: 0,
|
||
isError: false,
|
||
isMess: false
|
||
}
|
||
},
|
||
watch: {
|
||
// 每次打开重新刷新拼图
|
||
isShow(newValue, oldValue) {
|
||
if (newValue) {
|
||
this.refreshVerify() //刷新
|
||
}
|
||
}
|
||
},
|
||
mounted() {
|
||
var that = this
|
||
// that.refreshVerify();
|
||
that.getCaptcha()
|
||
// console.log(this.$i18n.locale, 'this.$i18n.locale')
|
||
},
|
||
methods: {
|
||
async getCaptcha() {
|
||
this.isLoading = true
|
||
var that = this
|
||
let url = 'generate/captcha'
|
||
let params = {
|
||
canvasWidth: 320, //画布的宽度(canvasWidth大于41并且（canvasWidth-10）/2 - 1> blockWidth)
|
||
canvasHeight: 190, //画布的高度(canvasHeight大于26并且 canvasHeight - blockHeight > 11
|
||
blockWidth: this.blockWidth, //块图像的宽度(blockWidth大于14)
|
||
blockHeight: this.blockHeight, //块图像的高度(blockHeight大于14)
|
||
// blockRadius: 9, //块图像的圆角半径
|
||
place: 0 //图像来源标识，0表示URL下载，1表示本地文件 一般用0
|
||
}
|
||
postDataByParams(url, params)
|
||
.then((res) => {
|
||
if (res.status === 0) {
|
||
that.canvasSrc = 'data:image/jpg;base64,' + res.data.canvasSrc
|
||
that.blockSrc = 'data:image/jpg;base64,' + res.data.blockSrc
|
||
that.blockY = res.data.blockY
|
||
that.nonceStr = res.data.nonceStr
|
||
that.isLoading = false
|
||
} else {
|
||
this.$emit('sliderError', encodeURIComponent(JSON.stringify(res)))
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$emit('sliderError', encodeURIComponent(JSON.stringify(err)), true)
|
||
});
|
||
},
|
||
//刷新验证
|
||
refreshVerify() {
|
||
this.x = 1
|
||
this.oldx = 1
|
||
setTimeout(() => {
|
||
this.x = 0
|
||
this.oldx = 0
|
||
this.doneWindth = 0
|
||
}, 300)
|
||
this.getCaptcha()
|
||
this.isError = false
|
||
this.isMess = false
|
||
},
|
||
/* 滑动中 */
|
||
startMove(e) {
|
||
// console.log(e.detail.x)
|
||
this.oldx = e.detail.x / 2 - 5
|
||
if (e.detail.x > 1) {
|
||
this.doneWindth = e.detail.x + 30
|
||
} else {
|
||
this.doneWindth = 0
|
||
}
|
||
},
|
||
/* 滑动结束 */
|
||
async endTouchMove() {
|
||
var that = this
|
||
// console.log('滑块结束')
|
||
let url = 'validate/captcha'
|
||
let params = {
|
||
nonceStr: this.nonceStr,
|
||
blockX: this.oldx * 2 + 5
|
||
}
|
||
postDataByParams(url, params)
|
||
.then((res) => {
|
||
this.isMess = true
|
||
if (res.status == 0) {
|
||
setTimeout(() => {
|
||
that.$emit('touchSliderResult', res.data.nonceStr)
|
||
}, 1000)
|
||
} else {
|
||
this.isError = true
|
||
this.$emit('sliderError', encodeURIComponent(JSON.stringify(res)))
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
this.$emit('sliderError', encodeURIComponent(JSON.stringify(err)), true)
|
||
});
|
||
},
|
||
/* 重置阴影位置 */
|
||
/* resetMove() {
|
||
this.x = 1;
|
||
this.oldx = 1;
|
||
setTimeout(() => {
|
||
this.x = 0;
|
||
this.oldx = 0;
|
||
}, 300);
|
||
}, */
|
||
// 关闭
|
||
closeSlider() {
|
||
this.$emit('touchSliderResult', false)
|
||
},
|
||
//隐藏滑块验证弹窗
|
||
hideSliderBox() {
|
||
this.$emit('hideSliderBox')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.slider-verify-box {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
z-index: 999;
|
||
}
|
||
|
||
.error_box {
|
||
// background: url('../../static/image/slider-verify/bg_error.png') no-repeat !important;
|
||
background-size: 100% 100% !important;
|
||
}
|
||
|
||
.verifyBox {
|
||
// width: 588rpx;
|
||
// height: 662rpx;
|
||
padding: 218rpx 45rpx 30rpx 45rpx;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
// width: 85%;
|
||
// background-color: #fff;
|
||
background-repeat: no-repeat;
|
||
// background: url('../../static/image/slider-verify/bg.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
border-radius: 20upx;
|
||
// box-shadow: 0 0 5upx rgba(0, 0, 0, 1);
|
||
|
||
|
||
.slider-verify-box-close {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
}
|
||
|
||
.slider-title {
|
||
font-size: 36upx;
|
||
text-align: center;
|
||
padding: 12rpx 0;
|
||
color: #000000;
|
||
}
|
||
|
||
.slide-content {
|
||
// width: 560rpx;
|
||
// padding: 0 ;
|
||
// margin: 0 auto;
|
||
|
||
.slide-tips {
|
||
font-size: 28rpx;
|
||
color: rgba(2, 20, 33, 0.45);
|
||
padding: 0.5em 0;
|
||
}
|
||
|
||
.slider-pintu {
|
||
position: relative;
|
||
width: 100%;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
|
||
.reload {
|
||
position: absolute;
|
||
right: 10rpx;
|
||
top: 10rpx;
|
||
z-index: 110;
|
||
}
|
||
|
||
.load {
|
||
width: 320px;
|
||
height: 190px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto;
|
||
background: #000000;
|
||
}
|
||
|
||
.pintu {
|
||
width: 320px;
|
||
height: 190px;
|
||
display: block;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.pintukuai {
|
||
position: absolute;
|
||
/* top: 0;
|
||
left: 0; */
|
||
z-index: 100;
|
||
box-shadow: 0 0 5upx rgba(0, 0, 0, 0.3);
|
||
|
||
image {
|
||
display: block;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
/* width: 560rpx;
|
||
height: 315rpx; */
|
||
}
|
||
}
|
||
|
||
.mark {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: #000000;
|
||
z-index: 101;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
image {
|
||
width: 60%;
|
||
height: 50rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.yinying {
|
||
position: absolute;
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
}
|
||
}
|
||
|
||
.slider-movearea {
|
||
position: relative;
|
||
height: 80upx;
|
||
width: 320px;
|
||
margin-top: 25rpx;
|
||
|
||
movable-area {
|
||
width: 100%;
|
||
height: 64rpx;
|
||
|
||
.movable-view {
|
||
width: 100upx;
|
||
height: 74rpx;
|
||
border-radius: 40upx;
|
||
// background-color: #699A70;
|
||
background-image: url(../../static/image/slider-verify/icon-button-normal.png);
|
||
background-repeat: no-repeat;
|
||
background-size: auto 30upx;
|
||
background-position: center;
|
||
position: relative;
|
||
z-index: 100;
|
||
border: 1px solid transparent;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn_info {
|
||
background-color: #878787 !important;
|
||
}
|
||
|
||
.btn_error {
|
||
background-color: #fd343c !important;
|
||
}
|
||
|
||
.btn_success {
|
||
background-color: #699a70 !important;
|
||
}
|
||
|
||
.error_bg {
|
||
background-color: #ffb7ba !important;
|
||
}
|
||
|
||
.success_bg {
|
||
background-color: #aad0b0 !important;
|
||
}
|
||
|
||
.huadao {
|
||
width: 100%;
|
||
// width: 320px;
|
||
height: 66upx;
|
||
line-height: 66upx;
|
||
background: #ededed;
|
||
// box-shadow: inset 0 0 5upx #EDEDED;
|
||
border-radius: 40rpx;
|
||
color: #bcbcbc;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
top: 7rpx;
|
||
left: 0;
|
||
font-size: 28rpx;
|
||
z-index: 99;
|
||
}
|
||
|
||
.huadao_done {
|
||
height: 66upx;
|
||
line-height: 66upx;
|
||
background: #aad0b0;
|
||
border-radius: 40rpx;
|
||
text-align: center;
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
top: 7rpx;
|
||
left: 0;
|
||
font-size: 28rpx;
|
||
z-index: 99;
|
||
}
|
||
</style> |