app/components/verification/verification.vue

<template>
	<view>
		<view
			v-if="!hid"
			class="flex-row-center"
			:style="{ top: scHight }"
			style="width: 750rpx; position: fixed; z-index: 100; left: 0"
		>
			<view
				class="flex-column-center"
				style="background-color: #fcfcfc; padding: 30rpx; border-radius: 10rpx"
			>
				<movable-area
					class="flex"
					style="width: 100%"
					animation="false"
					:style="{ height: originalHeight }"
				>
					<movable-view
						scale-value="1"
						animation="false"
						damping="5000"
						:x="moveX"
						:style="{
							height: sliderHeight,
							width: sliderWidth,
							'z-index': 101
						}"
						direction="horizontal"
					>
						<image
							:src="imgbk"
							class="image"
							mode="aspectFit"
							:style="{
								height: sliderHeight,
								width: sliderWidth,
								'margin-top': imgbKH
							}"
						></image>
					</movable-view>
					<image
						:src="img"
						mode="aspectFit"
						:style="{ height: originalHeight, width: originalWidth }"
						style="border-radius: 10rpx"
					></image>
				</movable-area>

				<movable-area
					class="flex-row-start"
					style="width: 100%; background-color: #efefef; height: 80rpx; border-radius: 40rpx; margin-top: 30rpx"
				>
					<movable-view
						scale-value="1"
						animation="false"
						damping="50"
						:x="movePv"
						class="flex-row-center"
						style="border-radius: 50%; height: 100rpx; width: 100rpx; background-color: #ffffff; border: 2rpx solid #e3e3e3; margin-top: -13rpx"
						direction="horizontal"
						@change="moveChange"
						@touchend="end"
					>
						<u-icon
							:color="mainColor"
							size="40"
							v-if="endLoad"
							name="arrow-right"
						></u-icon>
						<u-icon
							:color="mainColor"
							size="40"
							v-else
							name="reload"
						></u-icon>
					</movable-view>

					<text
						style="padding-left: 140rpx"
						:style="{ color: col }"
					>
						{{ hasImg }}
					</text>
				</movable-area>
				<view
					class="flex-row-around padding-top"
					style="width: 100%"
				>
					<u-icon
						@click="hide"
						:color="mainColor"
						size="40"
						name="close"
					></u-icon>

					<text
						class="cu-tag bg-cyan round"
						@click="getCode"
					>
						刷新拼图
					</text>
					<text
						class="my-neirong-sm cuIcon-safe"
						style="color: #c1c1c1"
					>
						Lili-FRAMEWORK
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/config/api.js';
import storage from '@/utils/storage.js';
import uuid from '@/utils/uuid.modified.js';
const phone = uni.getSystemInfoSync();
const l = phone.screenWidth / 750;
export default {
	name: 'verification',
	created() {
		// 可自行调整
		this.scHight = phone.screenHeight / 2 - 200 + 'px';
		this.getCode();
	},
	props: {
		height: {
			type: String,
			default: '80rpx'
		},
		width: {
			type: String,
			default: '350rpx'
		},
		left: {
			type: String,
			default: '180rpx'
		},
		top: {
			type: String,
			default: '30rpx'
		},
		business: {
			type: String,
			default: 'LOGIN'
		}
	},
	data() {
		return {
			mainColor: this.$mainColor,
			flage: false,
			key: '', //key
			vsrtx: '点击进行验证', //按钮提示语
			vsr: false, //
			hid: true,
			col: '#838383',
			movePv: 0,
			hasImg: '拖动滑块已完成拼图',
			spcode: '',
			tl: 0,
			moveCode: 0,
			//X轴移动距离
			moveX: 0,
			//模版高度
			originalHeight: '',
			//模版宽度
			originalWidth: '',
			//拼图高度
			sliderHeight: '',
			//平涂宽度
			sliderWidth: '',
			scHight: 0,
			//原图
			img: '',
			//拼图
			imgbk: '',
			endLoad: true,
			imgbKH: ''
		};
	},
	methods: {
		show() {
			this.hid = false;
		},
		hide() {
			if (!this.vsr) {
				// vsr判断是否验证成功，成功隐藏验证框
				this.hid = !this.hid;
			}
		},
		error() {
			this.vsr = false;
			this.hid = false;
			this.moveX = 0;
			this.moveCode = 0;
		},
		// 获取验证图片
		getCode() {
			this.col = '#b3afae';
			this.hasImg = '图片加载中...';
			if (!storage.getUuid()) {
				// storage.setUuid(uuid.v1());
				storage.setUuid('wzj666');
			}
			uni.request({
				url: api.common + '/common/slider/' + this.business,
				header: {
					uuid: storage.getUuid()
				},
				success: (res) => {
					this.col = '#838383';
					this.hasImg = '拖动滑块以完成拼图';
					var data = res.data.result;

					// base64的图片
					this.img = data.backImage;
					this.imgbk = data.slidingImage;
					// 根据参数动态适应验证图片的高宽
					this.imgbKH = data.randomY * 1.8 + 'rpx';
					this.originalHeight = data.originalHeight * 1.8 + 'rpx';
					this.originalWidth = data.originalWidth * 1.8 + 'rpx';
					this.sliderHeight = data.sliderHeight * 1.8 + 'rpx';
					this.sliderWidth = data.sliderWidth * 1.8 + 'rpx';
					// 适应比率，用来适应滑动距离
					this.tl = 1 / (1.8 * l);
					// 无用信息
					this.spcode = data.capcode;
					// 验证令牌
					this.key = data.key;
					this.$store.state.verificationKey = data.key;
				}
			});
		},
		end(e) {
			this.endLoad = false;
			// 验证拼图位置是否正确
			uni.request({
				method: 'POST',
				url: api.common + '/common/slider/' + this.business + '?xPos=' + parseInt(this.moveCode * this.tl),
				header: {
					uuid: storage.getUuid()
				},
				success: (res) => {
					this.endLoad = true;
					res.data.result == false ? (res.data.result = false) : (res.data.result = true);

					if (res.data && res.data.result) {
						//验证成功后把key发送出去,后端会把验证信息存在缓存里
						this.$emit('send', this.key);
						this.hide();
						this.vsr = true;
						this.vsrtx = '已通过验证';
					} else {
						this.getCode(); // 让滑块回到起始位置
						if (this.movePv == 1) {
							this.movePv = 0;
						} else {
							this.movePv = 1;
						}
					}
				},
				fail: (res) => {
					this.$msg('连接服务器失败');
				}
			});
		},
		// 绑定拼图位置
		moveChange(e) {
			this.moveX = e.detail.x;
			this.moveCode = e.detail.x;
		}
	}
};
</script>

<style lang="scss" scoped>
@import './animation.css';
@import './icon.css';
// @import './main.css';
.dh-wt {
	animation: at 1.1s ease;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	background-color: $main-color;
	border-radius: 50%;
}

@keyframes at {
	from {
		width: 27rpx;
		height: 27rpx;
	}

	to {
		width: 45rpx;
		height: 45rpx;
	}
}

.ttcl {
	color: $main-color;
}

.border-index {
	border: 1rpx solid $main-color;
}

.status_bar {
	height: var(--status-bar-height);
	background-color: #f1f1f1;
	width: 100%;
}

.status_bar-nobg {
	height: var(--status-bar-height);
	width: 100%;
}

/* 转圈动画 */
.turn-load {
	animation: turnmy 1s linear infinite;
}

@keyframes turnmy {
	0% {
		-webkit-transform: rotate(0deg);
	}

	25% {
		-webkit-transform: rotate(90deg);
	}

	50% {
		-webkit-transform: rotate(180deg);
	}

	75% {
		-webkit-transform: rotate(270deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

.status_bar-fixed {
	height: var(--status-bar-height);
	width: 100%;
	position: fixed;
	background-color: #f1f1f1;
	z-index: 20;
}

.head-dh-my {
	display: flex;
	position: fixed;
	justify-content: space-around;
	align-items: flex-end;
	padding-bottom: 10rpx;
	z-index: 15;
	background-color: #e3e3e3;
	width: 750rpx;
}

.padding-left {
	padding-left: 20rpx;
}

.padding-left-top {
	padding-left: 20rpx;
	padding-top: 20rpx;
}

.padding-right {
	padding-right: 20rpx;
}

.input-my {
	padding-left: 20rpx;
	border-radius: 40rpx;
	height: 50rpx;
	margin: 10rpx;
}

.tb-tag-absolute {
	position: absolute;
	z-index: 5;
	border-radius: 25rpx;
	font-size: 16rpx;
	margin-left: 25rpx;
	margin-top: -35rpx;
}

.flex-column-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.flex-column-between {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.flex-column-start {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.flex-column-around {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.flex-row-start {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.flex-row-around {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

.flex-row-center {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.flex-row-between {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.my-title {
	font-size: 35rpx;
	font-weight: bold;
}

.my-neirong {
	font-size: 26rpx;
	color: #6d6d6d;
}

.my-neirong-sm {
	font-size: 23rpx;
	color: #616161;
}

.my-tag-text {
	font-size: 22rpx;
	padding-top: 20rpx;
	color: #bababa;
}

.padding-top {
	padding-top: 35rpx;
}

.padding-top-sm {
	padding-top: 20rpx;
}

.bottom-dh {
	background-color: #f1f1f1;
	position: fixed;
	z-index: 10;
	bottom: 0;
	width: 750rpx;
	height: 110rpx;
}

.tb-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.bottom-text {
	width: 750rpx;
	position: fixed;
	text-align: center;
	font-size: 26rpx;
	color: #9d9d9d;
	bottom: 70rpx;
}

.moneycolor {
	color: #ea5002;
}

.margin-top {
	margin-top: 20rpx;
}

.margin-top-sm {
	margin-top: 12rpx;
}

.margin {
	margin: 20rpx;
}

.margin-left {
	margin-left: 20rpx;
}

.margin-right {
	margin-right: 20rpx;
}

.main-color {
	color: #07d188;
}
</style>