huayuanxi-c/src/components/Password/Password.vue

<template>
	<uni-popup ref="popup" type="center">
		<view class="pass-wrap">
			<IconText class="close" :size="10" :code="`\ue847`" @click.native="close"></IconText>
			<view class="title">请输入安全密码</view>
			<!-- <text class="sub-title" id="sub-title">输入安全密码</text> -->
			<!-- <text class="sub-title">查看钱包数据</text> -->
			<view class="tip" v-if="money">金额</view>
			<view class="money" v-if="money">{{money | moneyFormat}}</view>
			<view class="line"></view>
			<view class="pass-main">
				<view class="rect-wrap">
					<view class="rect" v-for="(item, i) in new Array(6).fill(0)" :key="i">
						<view class="circle" v-if="num>i"></view>
					</view>
				</view>
				<input :focus="focusValue" :maxlength="6" v-model="password" class="input" type="number"
					@input="changeInput">
			</view>
			<text class="forget" @click="forget">忘记密码？</text>
		</view>
	</uni-popup>
</template>

<script lang="ts">
	/**
	 * Icons 图标
	 * @emit {String} finish 输入满6位向父组件传递输入内容
	 * 可配合ref调用open()和close()方法
	 */
	import {
		Component,
		Prop,
		Vue,
		Emit,
		// Ref,
		Watch
	} from 'vue-property-decorator';
	import pubKey from '@/packages/login/pubKey';
	// @ts-ignore
	import JSEncrypt from '@/common/jsencrypt.js';
	@Component({
		filters: {
			moneyFormat(val: any) {
				if (!+val) return '0.00';
				return (+val).toFixed(2);
			}
		}
	})
	export default class Password extends Vue {
		@Prop({
			default: 0
		})
		money ? : any
		code: string = '\ue76b';
		password: string = "";
		num: number = 0;
		flag: boolean = false;
		focusValue: boolean = false
		open(): void {
			this.num = 0;
			this.password = '';
			(this.$refs.popup as any).open('center')
			this.$nextTick(() => {
				this.focusValue = true
			})
		}
		close(): void {
			(this.$refs.popup as any).close()
			this.focusValue = false
		}
		@Emit('finish')
		emitDone(val: string) {
			console.log(val)
			let timeStamp = (+new Date() + '').substr(0, 10);
			let pass = this.rsa(`${val}\\n${timeStamp}\\n`);
			return {
				timeStamp,
				pass
			}
		}

		@Watch('password')
		getPassword(val: string) {
			this.num = val.length
			if (this.num == 6) {
				// 密码已填写完成
				!this.flag && this.emitDone(val);
				this.flag = true;
				this.empty();
				this.close();
			}
		}

		empty() {
			this.num = 0;
			this.password = '';
			this.flag = false;
		}

		changeInput(event: any) {
			// const value: string = event.target.value
			// this.num = value.length
			// if (this.num == 6) {
			// 	// 密码已填写完成
			// 	this.emitDone(value);
			// }
		}
		forget() {
			this.$Router.push({
				path: '/packages/user/code',
				query: {
					type: 'update',
					name: 'pay'
				}
			})
		}
		rsa(pass: string) {
			console.log('加密前', pass)
			var encryptor = new JSEncrypt() // 创建加密对象实例
			encryptor.setPublicKey(pubKey) //设置公钥
			return encryptor.encrypt(pass) || '加密失败'
		}
	}
</script>

<style lang="scss" scoped>
	.pass-wrap {
		width: vw(300);
		// height: vw(180);
		border-radius: vw(10);
		background: white;
		@include flex-y();
		position: relative;

		.close {
			position: absolute;
			top: vw(10);
			right: vw(10);
		}

		.title {
			margin: vw(27) auto vw(16);
			@include word-vw(16, #333);
		}

		.sub-title {
			@include word-vw(14)
		}
		
		.tip{
			@include word-vw(14, #333);
		}
		
		.money{
			@include word-vw(30, #333);
			font-weight: 600;
			margin-top: vw(6);
		}
		
		.line{
			width: vw(280);
			border-bottom: vw(1) solid #F5F5F5;
			margin-top: vw(10);
		}

		.pass-main {
			margin-top: vw(12);
			position: relative;
			width: vw(240);
			height: vw(32);
			text-align: center;

			.input {
				position: absolute;
				left: -100vw;
				top: 0;
				width: 200vw;
				height: vw(32);
				text-align: left;
			}

			.rect-wrap {
				width: 100%;
				@include flex-x(space-between);
				text-align: center;
				position: absolute;
				left: 0;
				top: 0;

				.rect {
					width: vw(32);
					height: vw(32);
					border-radius: vw(5);
					background-color: #F5F5F5;

					@include flex-x(center, center);

					.circle {
						width: vw(6);
						height: vw(6);
						border-radius: vw(6);
						background: #333;
						;
						// line-height: vw(8);
						// transform: scale(4);
						// @include flex-x(center, center);
						// height: vw(60);
						// line-height: vw(1);
					}
				}
			}
		}

		.forget {
			width: 100%;
			text-align: center;
			// padding-right: vw(28);
			@include word-vw(14, $gray3);
			box-sizing: border-box;
			margin-top: vw(32);
			margin-bottom: vw(16);
		}
	}
</style>