ZhHealth/pages/wallet/validation.vue

<template>
	<view>
		<!-- 提示信息 -->
		<view class="prompt">
			验证您的钱包助记词
		</view>
		<!-- 助记词 -->
		<view class="mnemonic">
			<view
				class="item"
				v-for="(item, index) in validation"
				:key="index"
				:class="item === null ? 'hide': ''"
				@click="onKeys('removeKey', index)"
			>{{ item }}</view>
		</view>
		<!-- 选择助记词 -->
		<block v-if="mnemonic.length > 0">
			<view class="mnemonic-title">
				按顺序填写助记词
			</view>
			<view class="mnemonic-select">
				<view class="item" v-for="(item, index) in mnemonic" :key="index" @click="onKeys('addKey', index)">{{ item }}</view>
			</view>
		</block>
		<!-- 按钮 -->
		<view class="buttons">
			<button type="default" @click="verifyMnemonic">验证</button>
		</view>
	</view>
</template>

<script>
	import { hash } from "../../apis/interfaces/wallet"
	export default {
		data() {
			return {
				validation	: new Array(12).fill(null), // 验证key
				mnemonic	: [], // 助记词key
				sign		: '', // 助记词校验签名
				seedString	: '', // 助记词原词
			}
		},
		mounted() {
			let seed = this.$Route.query.seed.split(',')
			seed.sort(() => {
				return Math.random() - .5
			});
			console.log(seed)
			// this.mnemonic = seed
			// this.sign = this.$Route.query.sign
			// this.seedString = this.$Route.query.seed
		},
		methods: {
			// 填写助记词
			onKeys(type, index){
				if(type === 'addKey') {
					this.$set(this.validation, this.validation.findIndex(val => val === null), this.mnemonic[index])
					this.$delete(this.mnemonic, index)
					return
				}
				if(type === 'removeKey' && this.validation[index] !== null) {
					this.mnemonic.push(this.validation[index])
					this.$delete(this.validation, index)
					this.validation.push(null)
				}
			},
			// 验证助记词
			verifyMnemonic(){
				if(this.validation.findIndex(val => val === null) > -1){
					uni.showToast({
						title: '请完整填写助记词',
						icon : 'none'
					})
					return
				}
				let seed = this.validation.toString().replace(/,/g, ',')
				if (this.seedString !== seed) {
					uni.showToast({
						title: '验证失败，请确认您的助记词',
						icon : 'none'
					})
					return
				}
				uni.redirectTo({
					url: './create'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 提示信息
	.prompt{
		color: $text-gray;
		text-align: center;
		line-height: 90rpx;
		font-size: $title-size-m;
	}
	// 选择助记词
	.mnemonic-title{
		padding-top: $padding * 2;
		margin: 0 $margin * 2;
		font-size: $title-size-m;
		color: $main-color;
	}
	.mnemonic-select{
		display: flex;
		flex-wrap: wrap;
		padding: $padding $padding + $padding / 2;
		.item{
			background-color: white;
			line-height: 68rpx;
			height: 68rpx;
			width: 68rpx;
			text-align: center;
			margin: $margin / 2;
			border-radius: $radius-m;
			box-shadow: 0 0 4rpx 4rpx rgba($color: $text-color, $alpha: .02);
		}
	}
	// 助记词
	.mnemonic{
		margin: $margin ($margin * 2);
		border-radius: $radius-m;
		box-shadow: 0 0 4rpx 4rpx rgba($color: $text-color, $alpha: .02);
		background-color: white;
		padding: $padding;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		.item{
			background: rgba($color: $border-color, $alpha: .4);
			min-width: 58rpx;
			height: 58rpx;
			line-height: 58rpx;
			text-align: center;
			color: $text-color;
			margin: $margin / 2;
			&.hide{
				border:dashed 1px $border-color;
				box-sizing: border-box;
				background-color: white;
			}
		}
	}
	// 按钮
	.buttons{
		padding: $padding $padding * 2;
		.text{
			text-align: center;
			margin-bottom: $margin * 2;
			font-size: $title-size-lg;
			color: $text-price;
		}
		button{
			height: 90rpx;
			line-height: 90rpx;
			background-color: $main-color;
			border-radius: $radius-lg;
			color: white;
			font-weight: bold;
			font-size: $title-size;
			&[disabled]{
				background: rgba($color: $main-color, $alpha: .8);
			}
		}
	}
</style>