滑动验证组件和多语言包

components/tf-verify-img/tf-verify-img.vue

@@ -0,0 +1,265 @@
+<template>
+	<view class="tf-Box-Bg">
+		<view class="tf-Box">
+			<view class="tf-Box-title">
+				<text class="text">{{$t('homeNewText.dd3')}}</text>
+				<image class="tf-close" src="img/tf-close.png" mode="aspectFit" @click.stop="close_"></image>
+			</view>
+			<canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }" 
+			class="tf-Box-center" canvas-id="tf-verify-canvas" id="tf-verify-canvas"></canvas>
+			<movable-area class="tf-Box-BtnBox">
+				<view class="tf-Box-BtnBox-text">{{$t('homeNewText.dd4')}}</view>
+				<movable-view class="tf-Box-BtnNei" direction="all" :x="canvasX2" @change="changePath" @touchend="endTouch" @mouseup="endTouch">
+					<view class="tf-Box-BtnNei-leftBox" :style="{backgroundColor:verifyImgs[verifyIndex].color}"></view>
+				</movable-view>
+			</movable-area>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name:"tf-verify-img",
+		props:{
+			verifyImgs:{
+				type:Array,
+				default: function(){
+					return []
+				}
+			}
+		},
+		data() {
+			return {
+				verifyIndex:0,
+				canvasW:"",
+				canvasH:"",
+				canvasX2:0,//归为用的
+				canvasX:0,//实时移动X
+				ctx:false,
+				jgX:0,//结果X
+				dqImgPath:'',//本地临时图片路径
+			};
+		},
+		created() {
+			this.canvasW = uni.upx2px(580);
+			this.canvasH = uni.upx2px(290);
+			console.log("created");
+		},
+		mounted() {
+			this.$nextTick(()=>{
+				this.init()
+			})
+		},
+		methods:{
+			// 生成从minNum到maxNum的随机数
+			randomNum(minNum,maxNum){ 
+			    switch(arguments.length){ 
+			        case 1: 
+			            return parseInt(Math.random()*minNum+1,10); 
+			        break; 
+			        case 2: 
+			            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
+			        break; 
+			            default: 
+			                return 0; 
+			            break; 
+			    } 
+			},
+			close_(){
+				this.$emit('close');
+			},
+			init(){
+				if(this.verifyImgs.length==0){
+					uni.showToast({
+						title: 'verifyImgs不能为空',
+						icon:"none"
+					});
+					return;
+				}
+				console.log("init");
+				this.canvasX2--;
+				this.canvasX = 0;
+				this.verifyIndex = this.randomNum(0,this.verifyImgs.length-1);
+				this.ctx = uni.createCanvasContext('tf-verify-canvas',this);
+				console.log(this.ctx);
+				this.jgX = this.randomNum(uni.upx2px(150),uni.upx2px(450));
+				this.dqImgPath = this.verifyImgs[this.verifyIndex].src;
+				this.huatu();
+			},
+			endTouch(){
+				if(Math.abs(this.canvasX-this.jgX)<=5){
+					this.$emit('succeed')
+				}else{
+					uni.showToast({
+						title: this.$t('homeNewText.dd2'),
+						icon:"error"
+					});
+					this.init();
+				}
+			},
+			huatu(){
+				let this_ = this;
+				let r = uni.upx2px(10);
+				let XX = this.canvasX;
+				let YY = uni.upx2px(100);
+				let cs = uni.upx2px(20);
+				// this_.ctx.drawImage(this_.dqImgPath,0,0,this_.canvasW,this_.canvasH);
+				this_.ctx.drawImage(this_.dqImgPath,16,0,this_.canvasW,this_.canvasH);
+				
+				//画不可移动的拼图块
+				this_.ctx.beginPath();
+				this_.ctx.moveTo(-2*r+this_.jgX+cs+2*r, YY-2*r+2*r);
+				this_.ctx.lineTo(-2*r+this_.jgX+cs+5.5*r, YY-2*r+2*r);
+				this_.ctx.arcTo(-2*r+this_.jgX+cs+5.5*r, YY-2*r+3*r, XX-2+this_.jgX*r+cs+6.5*r, YY-2*r+3*r, r);
+				this_.ctx.lineTo(-2*r+this_.jgX+cs+7.5*r, YY-2*r+3*r);
+				this_.ctx.arcTo(-2*r+this_.jgX+cs+8.5*r, YY-2*r+3*r, -2*r+this_.jgX+cs+8.5*r, YY-2*r+2*r, r);
+				this_.ctx.lineTo(-2*r+this_.jgX+cs+12*r, YY-2*r+2*r);
+				this_.ctx.lineTo(-2*r+this_.jgX+cs+12*r, YY-2*r+11*r);
+				this_.ctx.lineTo(-2*r+this_.jgX+cs+8.5*r, YY-2*r+11*r);
+				this_.ctx.arcTo(-2*r+this_.jgX+cs+8.5*r, YY-2*r+12*r, -2*r+this_.jgX+cs+7.5*r, YY-2*r+12*r, r);
+				this_.ctx.lineTo(-2*r+this_.jgX+cs+6.5*r, YY-2*r+12*r);
+				this_.ctx.arcTo(-2*r+this_.jgX+cs+5.5*r, YY-2*r+12*r, -2*r+this_.jgX+cs+5.5*r, YY-2*r+11*r, r);
+				this_.ctx.lineTo(-2*r+this_.jgX+cs+2*r, YY-2*r+11*r);
+				this_.ctx.lineTo(-2*r+this_.jgX+cs+2*r, YY-2*r+8*r);
+				this_.ctx.arcTo(-2*r+this_.jgX+cs+3*r, YY-2*r+8*r, -2*r+this_.jgX+cs+3*r, YY-2*r+7*r, r);
+				this_.ctx.lineTo(-2*r+this_.jgX+cs+3*r, YY-2*r+6*r);
+				this_.ctx.arcTo(-2*r+this_.jgX+cs+3*r, YY-2*r+5*r, -2*r+this_.jgX+cs+2*r, YY-2*r+5*r, r);
+				this_.ctx.lineTo(-2*r+this_.jgX+cs+2*r, YY-2*r+2*r);
+				this_.ctx.shadowBlur=10;
+				this_.ctx.shadowColor="#ffffff";
+				this_.ctx.fillStyle = "rgba(0,0,0,0.5)";
+				this_.ctx.fill();
+				this_.ctx.restore(); 
+				//画可移动的拼图块
+				this_.ctx.beginPath();
+				this_.ctx.save();
+				this_.ctx.moveTo(XX-2*r+cs+2*r, YY-2*r+2*r);
+				this_.ctx.lineTo(XX-2*r+cs+5.5*r, YY-2*r+2*r);
+				this_.ctx.arcTo(XX-2*r+cs+5.5*r, YY-2*r+3*r, XX-2*r+cs+6.5*r, YY-2*r+3*r, r);
+				this_.ctx.lineTo(XX-2*r+cs+7.5*r, YY-2*r+3*r);
+				this_.ctx.arcTo(XX-2*r+cs+8.5*r, YY-2*r+3*r, XX-2*r+cs+8.5*r, YY-2*r+2*r, r);
+				this_.ctx.lineTo(XX-2*r+cs+12*r, YY-2*r+2*r);
+				this_.ctx.lineTo(XX-2*r+cs+12*r, YY-2*r+11*r);
+				this_.ctx.lineTo(XX-2*r+cs+8.5*r, YY-2*r+11*r);
+				this_.ctx.arcTo(XX-2*r+cs+8.5*r, YY-2*r+12*r, XX-2*r+cs+7.5*r, YY-2*r+12*r, r);
+				this_.ctx.lineTo(XX-2*r+cs+6.5*r, YY-2*r+12*r);
+				this_.ctx.arcTo(XX-2*r+cs+5.5*r, YY-2*r+12*r, XX-2*r+cs+5.5*r, YY-2*r+11*r, r);
+				this_.ctx.lineTo(XX-2*r+cs+2*r, YY-2*r+11*r);
+				this_.ctx.lineTo(XX-2*r+cs+2*r, YY-2*r+8*r);
+				this_.ctx.arcTo(XX-2*r+cs+3*r, YY-2*r+8*r, XX-2*r+cs+3*r, YY-2*r+7*r, r);
+				this_.ctx.lineTo(XX-2*r+cs+3*r, YY-2*r+6*r);
+				this_.ctx.arcTo(XX-2*r+cs+3*r, YY-2*r+5*r, XX-2*r+cs+2*r, YY-2*r+5*r, r);
+				this_.ctx.lineTo(XX-2*r+cs+2*r, YY-2*r+2*r);
+				this_.ctx.shadowBlur=10;
+				this_.ctx.shadowColor="#ffffff";
+				this_.ctx.fill();
+				this_.ctx.clip();
+				// this_.ctx.drawImage(this_.dqImgPath,this_.canvasX-this_.jgX,0,this_.canvasW,this_.canvasH);
+				this_.ctx.drawImage(this_.dqImgPath,this_.canvasX-this_.jgX+16,0,this_.canvasW,this_.canvasH);
+				this_.ctx.restore(); 
+				//绘图
+				this_.ctx.draw();
+			},
+			changePath(e){
+				// #ifdef APP-NVUE
+				this.canvasX = e.detail.x;
+				// #endif
+				// #ifndef APP-NVUE
+				this.canvasX = e.target.x;
+				// #endif
+				this.huatu();
+			}
+		}
+	}
+</script>
+
+<style lang="less">
+	.tf-Box-Bg{
+		position: fixed;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		z-index: 100;
+		background-color: rgba(0,0,0,.3);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		.tf-Box{
+			width: 640upx;
+			height: 584upx;
+			background-color: #fff;
+			border-radius: 6upx;
+			box-shadow: 0 0 50upx 0upx rgba(0,0,0,.2);
+			.tf-Box-title{
+				height: 100upx;
+				line-height: 100upx;
+				// padding: 0 32upx;
+				padding: 0 16px;
+				border-bottom: 1px solid #E1E3E9;
+				flex-direction: row;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				.text{
+					font-size: 32upx;
+					flex: 1;
+				}
+				.tf-close{
+					width: 28upx;
+					height: 28upx;
+				}
+			}
+			.tf-Box-center{
+				margin-top: 30upx;
+				margin-bottom: 30upx;
+				align-self: center;
+				// padding: 0 32upx;
+				padding: 0 16px;
+				
+				
+			}
+			.tf-Box-BtnBox{
+				margin-top: 30upx;
+				margin-bottom: 30upx;
+				align-self: center;
+				width: 580upx;
+				height: 75upx;
+				line-height: 75upx;
+				text-align: center;
+				font-size: 28upx;
+				border-radius: 6upx;
+				border: 1px solid #E1E3E9;
+				background-color: #F7F8F9;
+				overflow: hidden;
+				position: relative;
+				.tf-Box-BtnBox-text{
+					width: 100%;
+					height: 75upx;
+					position: absolute;
+					top: 0;
+					left: 0;
+					color: #424649;
+					text-align: center;
+				}
+				.tf-Box-BtnNei{
+					height: 75upx;
+					width: 75upx;
+					background-color: #fff;
+					box-shadow: 0 0 10upx 0upx rgba(0,0,0,.2);
+					background-image: url(img/tf-arrows.png);
+					background-size: 34upx;
+					background-position: center;
+					background-repeat: no-repeat;
+					.tf-Box-BtnNei-leftBox{
+						position: absolute;
+						top: 0;
+						left: -580upx;
+						width: 580upx;
+						height: 100%;
+					}
+				}
+			}
+		}
+	}
+</style>

i18n/lang/de.json

@@ -833,6 +833,12 @@
     "a40":"sofort Einkommen verdienen",
     "a41":"Klicken Sie hier, um zu gehen",
     "a42": "XUScoin-Kryptowährungs-Handelsplattform – für jedermann konzipiert",
-    "a43": "Beginnen Sie die Verschlüsselungsreise"
+    "a43": "Beginnen Sie die Verschlüsselungsreise",
+	
+	"ee6": "Grafische Überprüfung",
+	"dd1": "Verifizierung erfolgreich",
+	"dd2": "Verifizierung fehlgeschlagen",
+	"dd3": "Bitte führen Sie die Sicherheitsüberprüfung durch",
+	"dd4": "Schieben Sie den Schieberegler, um das Rätsel zu lösen"
 	}
 }

i18n/lang/en.json

@@ -887,6 +887,12 @@
 		"a40": "earn income immediately",
 		"a41": "Click to go",
     "a42": "XUScoin Cryptocurrency Trading Platform - Designed for Everyone",
-    "a43": "Start the encryption journey"
+    "a43": "Start the encryption journey",
+	
+		"ee6": "Graphical verification",
+		"dd1": "Verification successful",
+		"dd2": "verification failed",
+		"dd3": "Please complete the security verification",
+		"dd4": "Slide the slider to complete the puzzle"
 	}
 }

i18n/lang/fra.json

@@ -833,6 +833,12 @@
     "a40": "gagner un revenu immédiatement",
     "a41": "Cliquez pour aller",
     "a42": "Plateforme de trading de crypto-monnaie XUScoin - Conçue pour tout le monde",
-    "a43": "Commencez le voyage de cryptage"
+    "a43": "Commencez le voyage de cryptage",
+	
+	"ee6": "Vérification graphique",
+	"dd1": "Vérification réussie",
+	"dd2": "échec de la vérification",
+	"dd3": "Veuillez compléter la vérification de sécurité",
+	"dd4": "Faites glisser le curseur pour terminer le puzzle"
 	}
 }

i18n/lang/it.json

@@ -833,6 +833,12 @@
     "a40": "guadagna reddito immediatamente",
     "a41": "Clicca per andare",
     "a42": "Piattaforma di trading di criptovalute XUScoin - Progettata per tutti",
-    "a43": "Inizia il viaggio di crittografia"
+    "a43": "Inizia il viaggio di crittografia",
+	
+	"ee6": "Verifica grafica",
+	"dd1": "Verifica riuscita",
+	"dd2": "verifica fallita",
+	"dd3": "Completa la verifica di sicurezza",
+	"dd4": "Fai scorrere il cursore per completare il puzzle"
 	}
 }

i18n/lang/jp.json

@@ -833,6 +833,12 @@
     "a40": "すぐに収入を得る",
     "a41": "クリックして移動",
     "a42": "XUScoin 暗号通貨取引プラットフォーム - 誰でも使えるように設計",
-    "a43": "暗号化への取り組みを始めましょう"
+    "a43": "暗号化への取り組みを始めましょう",
+	
+	"ee6": "グラフィカルな検証",
+	"dd1": "検証成功",
+	"dd2": "検証に失敗しました",
+	"dd3": "セキュリティ検証を完了してください",
+	"dd4": "スライダーをスライドさせてパズルを完成させます"
 	}
 }

i18n/lang/kor.json

@@ -833,6 +833,12 @@
     "a40": "즉시 수익 창출",
     "a41": "클릭하여 이동",
     "a42": "XUScoin 암호화폐 거래 플랫폼 - 모두를 위한 설계",
-		"a43": "암호화 여정 시작"
+		"a43": "암호화 여정 시작",
+		
+	"ee6": "그래픽 검증",
+	"dd1": "확인 성공",
+	"dd2": "확인 실패",
+	"dd3": "보안인증을 완료해주세요",
+	"dd4": "슬라이더를 밀어서 퍼즐을 완성하세요"
 	}
 }

i18n/lang/pt.json

@@ -831,6 +831,12 @@
     "a40": "ganhar renda imediatamente",
     "a41": "Clique para ir",
     "a42": "Plataforma de Negociação de Criptomoedas XUScoin - Projetado para Todos",
-    "a43": "Comece a jornada de criptografia"
+    "a43": "Comece a jornada de criptografia",
+	
+	"ee6": "Verificação gráfica",
+	"dd1": "Verificação bem-sucedida",
+	"dd2": "falha na verificação",
+	"dd3": "Por favor, complete a verificação de segurança",
+	"dd4": "Deslize o controle deslizante para completar o quebra-cabeça"
 	}
 }

i18n/lang/spa.json

@@ -833,6 +833,12 @@
     "a40": "obtener ingresos inmediatamente",
     "a41": "Haz clic para ir",
     "a42": "Plataforma de negociación de criptomonedas XUScoin: diseñada para todos",
-    "a43": "Comience el viaje de encriptación"
+    "a43": "Comience el viaje de encriptación",
+	
+	"ee6": "Verificación gráfica",
+	"dd1": "Verificación exitosa",
+	"dd2": "Fallo en la verificación",
+	"dd3": "Por favor completa la verificación de seguridad.",
+	"dd4": "Desliza el control deslizante para completar el rompecabezas."
 	}
 }

i18n/lang/tr.json

@@ -831,6 +831,12 @@
     "a40": "hemen gelir elde et",
     "a41": "Gitmek için tıklayın",
     "a42": "XUScoin Kripto Para Ticaret Platformu - Herkes İçin Tasarlandı",
-    "a43": "Şifreleme yolculuğuna başlayın"
+    "a43": "Şifreleme yolculuğuna başlayın",
+	
+	"ee6": "Grafiksel doğrulama",
+	"dd1": "Doğrulama başarılı",
+	"dd2": "doğrulama başarısız oldu",
+	"dd3": "Lütfen güvenlik doğrulamasını tamamlayın",
+	"dd4": "Bulmacayı tamamlamak için kaydırıcıyı kaydırın"
 	}
 }

i18n/lang/zh-TW.json

@@ -885,6 +885,13 @@
         "a40":"立即賺取收益",
         "a41":"點擊前往",
         "a42":"XUScoin 加密貨幣交易平台 - 為每個人而設計",
-        "a43":"開啟加密之旅"
+        "a43":"開啟加密之旅",
+		
+		"ee6": "圖形驗證",
+		"dd1": "驗證成功",
+		"dd2": "驗證失敗",
+		"dd3": "請完成安全驗證",
+		"dd4": "滑動滑桿完成拼圖"
+
 		}
 }