初始化（包含登录模块）

2024-03-29 17:37:48 +08:00
commit 1bcb13ce7a
1306 changed files with 152772 additions and 0 deletions
--- a/components/mpvueGestureLock/index.vue
+++ b/components/mpvueGestureLock/index.vue
@@ -0,0 +1,138 @@
+<template>
+	<view class="gesture-lock" :class="{error:error}" :style="{width: containerWidth +'rpx', height:containerWidth +'rpx'}"
+	 @touchstart.stop="onTouchStart" @touchmove.stop="onTouchMove" @touchend.stop="onTouchEnd">
+		<!-- 同级 v-for 的 key 重复会有问题，需要套一层。 -->
+		<!-- 9 个圆 -->
+		<view>
+			<view v-for="(item,i) in circleArray" :key="i" class="cycle" :class="{check:item.check}" :style="{left:item.style.left,top:item.style.top,width:item.style.width,height:item.style.width}">
+			</view>
+		</view>
+		<view>
+			<!-- 已激活锁之间的线段 -->
+			<view v-for="(item,i) in lineArray" :key="i" class="line" :style="{left:item.activeLeft,top:item.activeTop,width:item.activeWidth,'-webkit-transform':'rotate('+item.activeRotate+')',transform:'rotate('+item.activeRotate+')'}">
+			</view>
+		</view>
+		<!-- 最后一个激活的锁与当前位置之间的线段 -->
+		<view class="line" :style="{left:activeLine.activeLeft,top:activeLine.activeTop,width:activeLine.activeWidth,'-webkit-transform':'rotate('+activeLine.activeRotate+')',transform:'rotate('+activeLine.activeRotate+')'}">
+		</view>
+	</view>
+</template>
+<script>
+	import GestureLock from './gestureLock';
+
+	export default {
+		name: 'index',
+		props: {
+			/**
+			 * 容器宽度
+			 */
+			containerWidth: {
+				type: [Number, String],
+				default: 0
+			},
+			/**
+			 * 圆的半径
+			 */
+			cycleRadius: {
+				type: [Number, String],
+				default: 0
+			},
+			/**
+			 * 已设定的密码
+			 */
+			password: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+		},
+		data() {
+			return {
+				gestureLock: {}, // 锁对象
+				circleArray: [], // 圆对象数组
+				lineArray: [], // 已激活锁之间的线段
+				activeLine: {}, // 最后一个激活的锁与当前位置之间的线段
+				error: false
+			}
+		},
+		methods: {
+			onTouchStart(e) {
+				this.gestureLock.onTouchStart(e);
+				this.refesh();
+			},
+
+			onTouchMove(e) {
+				this.gestureLock.onTouchMove(e);
+				this.refesh();
+			},
+
+			onTouchEnd(e) {
+				const checkPoints = this.gestureLock.onTouchEnd(e);
+				if (!this.password.length || checkPoints.join('') == this.password.join('')) {
+					this.refesh();
+					this.$emit('end', checkPoints);
+				} else {
+					this.error = true;
+					setTimeout(() => {
+						this.refesh();
+						this.$emit('end', checkPoints);
+					}, 800);
+				}
+
+			},
+			refesh() {
+				this.error = false;
+				this.circleArray = this.gestureLock.getCycleArray();
+				this.lineArray = this.gestureLock.getLineArray();
+				this.activeLine = this.gestureLock.getActiveLine();
+			}
+		},
+		mounted() {
+			this.gestureLock = new GestureLock(this.containerWidth, this.cycleRadius);
+			this.refesh();
+		}
+	}
+</script>
+
+<style scoped>
+	.gesture-lock {
+		margin: 0 auto;
+		position: relative;
+		box-sizing: border-box;
+		overflow: auto;
+	}
+
+	.gesture-lock .cycle {
+		box-sizing: border-box;
+		position: absolute;
+		border: 2px solid #66aaff;
+		border-radius: 50%;
+	}
+
+	.gesture-lock .cycle.check:after {
+		content: "";
+		display: block;
+		position: absolute;
+		width: 32%;
+		height: 32%;
+		border: 2px solid #66aaff;
+		border-radius: 50%;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	.gesture-lock .line {
+		height: 0;
+		border-top: 2px solid #66aaff;
+		position: absolute;
+		transform-origin: left center;
+	}
+
+	.gesture-lock.error .cycle.check,
+	.gesture-lock.error .cycle.check:after,
+	.gesture-lock.error .line {
+		border-color: #ffa197;
+	}
+</style>