vue登录人机校验--图片旋转验证

1. login.vue文件

<template>
	<!-- 图片旋转 -->
	<uni-popup ref="visible" style="background-color: antiquewhite;">
		<!--子组件-->
		<picturesRotating :visible.sync="true" @result="result" :maskClick="maskClick" />
	</uni-popup>
</template>
<script>
import picturesRotating from '../../components/piaoyi-picturesRotating/piaoyi-picturesRotating.vue'
export default {
	components:{
		picturesRotating
	},
	data(){
		return{
			maskClick: true
		}
	},
	methods:{
		result(e) {
			this.verivyIs = e
			if (e) {
				this.$refs.visible.close()
			}
		}
	}
}
</script>

2. piaoyi-picturesRotating.vue 文件

<template>
	<view class="piaoyi-picturesRotating">
		<view class="picturesRotating" v-if="visible">
			<view class="title">
				人工验证
			</view>
			<view class="mintitle">
				滑动滑块，使图片显示角度为正
			</view>
			<view class="detail" :class="{'detailactive' : detail == '验证失败，请重试'}">
				{{detail ? detail : ''}}
			</view>
			<view class="imgbox" :style="'transform: rotate(' + deg + 'deg);'">
				<image v-if="imgurl" :src="imgurl" mode=""></image>
			</view>
			<view class="movablebox">
				<movable-area>
					<movable-view @touchstart="touchstart" @touchend="touchend" :disabled="disabled" direction="horizontal" :x="x" @change="onchange">
						<image :src="icon" mode=""></image>
					</movable-view>
				</movable-area>
			</view>
		</view>
		<view @tap="close" @touchmove.stop.prevent :class="visible ? 'pupop-model' : 'pupop-models'"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				x: 0,
				startDeg: 0,
				deg: 0,
				isPass: false,
				timer: null,
				disabled: false,
				detail: '',
				imgurl: '',
				imgList: [
					'https://ts2.cn.mm.bing.net/th?id=OIP-C.7DoQwd5S5Uo010esfn9ZAQAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2',
					'https://tse1-mm.cn.bing.net/th/id/OIP-C.keLuuLXa1_XmRhJiQjwZFgAAAA?w=202&h=202&c=7&r=0&o=5&dpr=1.3&pid=1.7',
					'https://tse4-mm.cn.bing.net/th/id/OIP-C.HNCroQQ0lGlvJTs4ZELojwAAAA?w=202&h=202&c=7&r=0&o=5&dpr=1.3&pid=1.7',
					'https://ts1.cn.mm.bing.net/th?id=OIP-C.UgVPqAbA56SxLMox5_4A9QHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2'
				]
			}
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			maskClick: {
				type: Boolean,
				default: true
			},
			icon: {
				type: String,
				default: "data:image/png;base64,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"
			}
		},
		mounted() {
			this.start()
		},
		watch: {
			visible: function() {
				this.detail = ''
				this.start()
			}
		},
		methods: {
			touchstart(e) {
			},
			touchend(e) {
				if (this.isPass) {
					this.disabled = true
					this.detail = '验证成功，2秒后自动关闭'
					setTimeout(() => {
						this.close()
						this.$emit('result', this.isPass)
					}, 2000)
				} else {
					this.detail = '验证失败，请重试'
					this.start()
				}
			},
			onchange(e) {
				var x = e.detail.x + this.startDeg
				this.deg = x
				var isPass = false
				if (Math.abs((this.startDeg + x) % 360) - this.startDeg > -10 && Math.abs((this.startDeg + x) % 360) - this.startDeg < 10) {
					isPass = true
				}
				this.isPass = isPass
			},
			start() {
				var index = this.random(0, 2)
				this.imgurl = this.imgList[index]
				console.log(this.imgurl)
				var deg = this.random(240, 300)
				this.deg = deg
				this.startDeg = deg
				this.x = this.x == 0 ? 0.1 : 0
				this.disabled = false
			},
			close() {
				if (!this.maskClick) return
				this.$emit('update:visible', false)
				this.disabled = false
			},
			random(min, max) {
			    return Math.floor(Math.random() * (max - min)) + min;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.piaoyi-picturesRotating {
		.pupop-model {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 100;
			background: rgba(0, 0, 0, .5);
		}
		.pupop-models{
			display: none;
		}
		.title {
			text-align: center;
			font-size: 32rpx;
			line-height: 32rpx;
			padding-top: 30rpx;
			color: #999;
		}
		.mintitle {
			text-align: center;
			font-size: 36rpx;
			line-height: 36rpx;
			font-weight: 700;
			color: #333;
			padding: 20rpx 0;
		}
		.detail {
			text-align: center;
			font-size: 32rpx;
			color: #666;
			line-height: 32rpx;
			padding-bottom: 15rpx;
		}
		.detailactive {
			color: red;
		}
		.picturesRotating {
			position: fixed;
			width: 600rpx;
			height: 800rpx;
			border-radius: 30rpx;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			z-index: 120;
			background: #fff;
		}
		.imgbox {
			margin: 30rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;
			image {
				width: 400rpx;
				height: 400rpx;
				border-radius: 100%;
			}
		}
		.movablebox {
			padding: 0 50rpx;
			movable-area {
				height: 100rpx;
				width: 100%;
				border-radius: 100rpx;
				background: #f3f9f1;
				border: 2rpx solid rgba(0,163,68,0.3);
				movable-view {
					width: 80rpx;
					height: 80rpx;
					border-radius: 100%;
					padding: 10rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>