feat: 首次提交

pages/component/expand/puzzleVerify/puzzleVerify.vue

@@ -0,0 +1,123 @@
+<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：18 61  40 725   4   9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
+<template>
+	<view class="fui-wrap">
+		<view class="fui-page__hd">
+			<view class="fui-page__title fui-align__center" @tap="vip">PuzzleVerify <image
+					src="/static/images/index/light/icon_member_3x.png"></image>
+			</view>
+			<view class="fui-page__desc">PuzzleVerify 滑块拼图验证，根据提示进行行为验证。此组件为 SliderCaptcha 组件的功能补充，详见文档。</view>
+		</view>
+		<view class="fui-page__bd">
+			<view class="fui-btn__box">
+				<fui-button type="gray" btn-size="medium" text="点击按钮进行验证" bold :margin="['48rpx']"
+					@click="btnVerify">
+				</fui-button>
+
+			</view>
+			<fui-puzzle-verify :width="width" :height="height" :src="src" :cutSrc="cutSrc" :x="40" :y="49" @init="init"
+				@verify="verify" ref="pvRef">
+			</fui-puzzle-verify>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				resUrl: this.fui.resUrl(),
+				src: '',
+				cutSrc: '',
+				width: 300,
+				height: 150,
+				x: 0,
+				y: 0
+			}
+		},
+		methods: {
+			//rpx转化为px
+			getPx(value) {
+				let val = parseInt(uni.upx2px(Number(value)))
+				return val % 2 === 0 ? val : val + 1
+			},
+			//初始化事件中请求接口获取 有黑块的背景图、裁剪图、位置等信息
+			//画布大小可使用rpx转化为px传回给后端使用，动态生成背景图，这样可做到自适应，适配所有终端
+			//示例使用的是已生成好的图，所以使用的是固定宽高
+			init(e) {
+				//裁剪图片宽度，固定为44（px）
+				let cutGraphWidth = e.cutGraphWidth
+				this.width = 300 //this.getPx(640)
+				this.height = 150 //this.getPx(320)
+
+				//以上参数传给后端获取验证信息
+				//示例仅为演示，使用预处理内容
+				this.getVerifyImage()
+			},
+			//注意：为了避免图片显示失真，后端处理图片大小需按照提供的参数等比放大倍数，可根据设备pixelRatio（设备像素比）等比放大
+			getVerifyImage() {
+				//以下由后端获取返回（x1：裁剪位置由后端存储，不返回）
+				//带黑块的背景图，后端接口提供
+				this.src = `${this.resUrl}/component/sc/bg_img_verify.png`
+				//裁剪下的图片，后端接口提供
+				this.cutSrc = `${this.resUrl}/component/sc/cut_img.png`
+				//裁剪图在背景图内的left值 ，后端接口提供
+				this.x = 40;
+				//裁剪图在背景图内的top值 ，后端接口提供
+				this.y = 49
+			},
+			btnVerify() {
+				//需要等组件初始化完成
+				this.$refs.pvRef && this.$refs.pvRef.show()
+			},
+			//开始验证，将返回的滑动距离传给后端进行验证
+			verify(e) {
+				//示例仅为演示，以下为模拟后端验证
+
+				//滑动距离
+				let slipDistance = e.slipDistance
+				//验证方法，参考js方法自行转为后端方法
+				//x1为裁剪黑块的left值，该值仅后端知道，示例使用的预处理数据，此处仅为演示
+				let x1 = 222;
+				//width为需要滑动的总距离
+				let width = x1 - this.x
+				//误差范围，后端自行定义（px）
+				let range = 3
+				//滑动距离 减去 总距离 的绝对值 小于等于误差范围即为验证通过
+				if (Math.abs(slipDistance - width) <= range) {
+					this.success()
+				} else {
+					this.fui.toast('验证失败！')
+					//重置验证，nvue下需延时重置
+					setTimeout(() => {
+						this.$refs.pvRef.reset()
+					}, 50)
+					//当失败多次时，可重新生成验证数据返回
+					//...
+				}
+			},
+			success() {
+				this.fui.toast('验证通过！')
+				setTimeout(() => {
+					//关闭验证框
+					this.$refs.pvRef.closeVerify()
+				}, 200)
+			},
+			vip() {
+				this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
+			}
+		}
+	}
+</script>
+
+<style>
+	.fui-section__title {
+		margin-left: 32rpx;
+	}
+
+	.fui-btn__box {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+</style>