high-mini/components/sanshui-payment-password/index.vue

<template>
	<view>
		<sanshuiModal ref="ssModal" :mode="_parentMode" :position="_parentPosition" @change="changeModal">
			<view class="digital-keyboard-modal" :class="'digital-keyboard-modal-' + _mode">
				<view class="dk-close" v-if="_mode !== 1 && _mode !== 4" @click="close()">
					<icon type="clear" color="#333" :size="u50"></icon>
				</view>
				<swiper class="dk-swiper" :current="current">
					<swiper-item @touchmove.prevent.stop>
						<view class="dk-title">{{_titleObj.title}}</view>
						<view class="dk-subtitle">{{_titleObj.subTitle}}</view>
						<view class="pwd-box clearfix" @click="getKeyboard">
							<view class="pwd-text" v-for="(item,index) in _digits" :key="index" :data-index="index" :class="{active:(activeInput == index)}">{{payPassWord[index]}}</view>
						</view>
					</swiper-item>
					<!-- 设置新安全密码 -->
					<block v-if="_mode === 2 || _mode === 5">
						<swiper-item @touchmove.prevent.stop>
							<view class="dk-title">{{_titleObj.title}}</view>
							<view class="dk-subtitle">{{_titleObj.twoSubTitle}}</view>
							<view class="pwd-box clearfix" @click="getKeyboard">
								<view class="pwd-text" v-for="(item,index) in _digits" :key="index" :data-index="index" :class="{active:(activeInput==index)}">{{payPassWord[index]}}</view>
							</view>
						</swiper-item>
					</block>
					<!-- 修改安全密码 -->
					<block v-else-if="_mode === 3">
						<swiper-item @touchmove.prevent.stop>
							<view class="dk-title">{{_titleObj.twoTitle}}</view>
							<view class="dk-subtitle">{{_titleObj.twoSubTitle}}</view>
							<view class="pwd-box clearfix" @click="getKeyboard">
								<view class="pwd-text" v-for="(item,index) in _digits" :key="index" :data-index="index" :class="{active:(activeInput==index)}">{{payPassWord[index]}}</view>
							</view>
						</swiper-item>
						<swiper-item @touchmove.prevent.stop>
							<view class="dk-title">{{_titleObj.threeTitle}}</view>
							<view class="dk-subtitle">{{_titleObj.threeSubTitle}}</view>
							<view class="pwd-box clearfix" @click="getKeyboard">
								<view class="pwd-text" v-for="(item,index) in _digits" :key="index" :data-index="index" :class="{active:(activeInput==index)}">{{payPassWord[index]}}</view>
							</view>
						</swiper-item>
					</block>
				</swiper>
				<block v-if="_mode !== 1 && _mode !== 4">
					<view class="pwd-tips">安全密码为6位数字，用于提现、设置密保、添加银行卡等操作，可保障资金安全</view>
					<view class="pwd-tips pwd-tips-errot">{{msgText}}</view>
				</block>
				<view class="pwd-forget">
					<!-- <text v-if="_forget && _mode === 1" @click="forgetPwd">忘记安全密码</text> -->
				</view>
				<view class="digital-keyboard" :class="{'digital-keyboard-show' : dkFlag || _mode === 1 || _mode === 4}">
					<view class="dk-down" v-if="_mode !== 1 && _mode !== 4">
						<block v-if="showPrevText">
							<view class="dk-submit dk-return" @click="changeSwiper(-1)">上一步</view>
						</block>
						<view class="dk-down-icon" @click="changeKeyboard(!dkFlag)"></view>
						<block v-if="trigger === 'auto' && !(_mode === 2 && current === 0)">
							<view class="dk-submit" @click="submit(true)">完成</view>
						</block>
					</view>
					<view class="digital-key-box clearfix">
						<view class="num" v-for="item in digitalList" :key="item" :class="{'no-num':(item === '' || item === '-1')}"
						 @click="getKeyNumber(item)">{{item}}</view>
					</view>
				</view>
			</view>
		</sanshuiModal>
	</view>
</template>

<script>
	//依赖的弹窗模块
	import sanshuiModal from '@/components/sanshui-modal'
	export default {
		components: {
			sanshuiModal
		},
		data() {
			return {
				activeInput: 0,//当前输入的下标
				digitalList: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', '-1'],//键盘
				paymentPwd: '',//安全密码内容
				dkFlag: true,//安全密码键盘的显示与隐藏
				current: 0,
				paymentPwds: [],//上一次安全密码内容,历史安全密码,
				msgText: '',
				u50: uni.upx2px(50)
			};
		},
		props: {
			value: {
				type: String,
				default: ''
			},
			digits: {
				type: [Number, String],
				default: 6
			},
			forget: {
				type: Boolean,
				default: true
			},
			/*
			*	可选值说明（这一个顺序最好不要改，跟当前步骤步进行有关系，自动提交要用到mode跟current的判断  是否要自动提交）
			*	1 安全密码校验（用于校验安全）
			*	2 设置安全密码（2步  输入=》确认输入）
			*	3 修改安全密码（3步 原安全密码=》输入=》确认输入）
			*	4 找回登录密码(同mode = 1一样，就怕后端校验接口不一样而额外添加的一个mode)
			*	5 重置安全密码
			*/
			mode: {
				type: [Number, String],
				default: 1
			},
			/*
			*	可选值说明
			*	hand 手动
			*	auto 自动
			*/
			trigger: {
				type: String,
				default: 'auto'
			},
			userName: {
				type: String,
				default: ''
			}
		},
		computed: {
			payPassWord () {
				var payPassWord = this.paymentPwd.split('') || [];
				payPassWord.fill('*');
				return payPassWord;
			},
			_forget () {
				return String(this.forget) === 'false' ? false : true;
			},
			_digits () {
				return isNaN(this.digits) ? 6 : parseInt(this.digits);
			},
			_mode () {
				if(isNaN(this.mode) || !this.mode){
					return 1;
				}
				return +this.mode
			},
			_titleObj () {
				let arr = [
					{
						title: '输入安全密码',
						subTitle: '请输入安全密码'
					},
					{
						title: '设置安全密码',
						subTitle: '请设置安全密码',
						twoSubTitle: '请再次输入安全密码以确认'
					},
					{
						title: '修改安全密码',
						twoTitle: '设置安全密码',
						threeTitle: '设置安全密码',
						subTitle: '请输入安全密码 以验证身份',
						twoSubTitle: '请设置新的安全密码',
						threeSubTitle: '请再次输入安全密码以确认',
					},
					{
						title: '输入安全密码',
						subTitle: '请输入安全密码'
					},
					{
						title: '重置安全密码',
						subTitle: '请输入安全密码',
						twoSubTitle: '请再次输入安全密码以确认'
					}
				]
				return arr[this._mode-1];
			},
			_parentMode () {
				return this._mode === 1 || this._mode === 4 ? 'full' : 'cover';
			},
			_parentPosition () {
				return this._mode === 1 || this._mode === 4 ? 'bottom' : 'middle';
			},
			showPrevText () {
				return this.current >= (this._mode - 1) || (this._mode === 5 && this.current > 0) ? true : false;
			}
		},
		methods: {
			// 模态框显示或者关闭的回调
			changeModal (e) {// 返回是一个Boolean值
				if(e){
					this.current = 0;
					this.changeKeyboard();//默认拉起键盘
				}else{
					this.changeKeyboard(false);//默认拉起键盘
					this.clearAll();
				}
			},
			// 开关键盘
			changeKeyboard(flag = true) {
				this.dkFlag = flag;
				!flag && (this.activeInput = -1);
			},
			/*
				pro可选址
				show	显示
				hide	隐藏
				toggle	动态判断
			*/
			modalFun(pro){
				this.$refs.ssModal[pro]();
			},
			clear () {
				this.paymentPwd = '';
				this.activeInput = 0;
				this.paymentPwds.splice(this.current, 1);
			},
			clearAll () {
				this.paymentPwd = '';
				this.activeInput = 0;
				this.current = 0;
				this.paymentPwds = [];
			},
			showError (msg) {
				if(!msg) return this.msgText = '';
				if(this._mode !== 1 && this._mode !== 4){
					this.msgText = msg;
				}else{
					uni.showToast({
						title: msg
					})
				}
			},
			forgetPwd () {
				console.log('这里是忘记密码跳转逻辑');
			},
			cancel () {
				this.$emit('cancel');
			},
			close () {
				let tips = '';
				if(this._mode === 2){
					tips = '您是否要放弃设置安全密码';
				}else if(this._mode === 5){
					tips = '您是否要放弃重置安全密码';
				}else{
					tips = '您是否要放弃修改安全密码';
				}
				uni.showModal({
					title: '关闭提示',
					content: tips,
					confirmText: '我再想想',
					cancelText: '关闭',
					success: (res) => {
						if(!res.confirm){
							this.modalFun('hide');
						}
					}
				})
			},
			submit (clickFlag){//clickFlag主动点击
				if(this.trigger !== 'auto' && !clickFlag) return;
				if(this.paymentPwd.length !== this._digits){
					this.showError('请输入' + this._digits + '位安全密码');
				}else{
					this.showError('');
					if(this._mode === 5 || this._mode === 4 || this.current >= (this._mode - 1)){
						if(this._mode === 5 && this.current === 0){//下一步，再次输入
							return this.changeSwiper(1);
						}
						if(this.current > 0){//需要校验2次安全密码的是否相等
							if(this.paymentPwd !== this.paymentPwds[this.current - 1]){
								this.showError('两次安全密码输入不一致');
								setTimeout(() => {
									this.paymentPwd = '';
									this.paymentPwds[this.current] = '';
									this.activeInput = 0;
								}, 300)
								return ;
							}
							this.showError('');
							if(this._mode === 2){//设置安全密码
								uni.showLoading({
									title: '正在设置密码'
								});
								// 如果不把逻辑卸载这里面，直接把setTimeout删除即可
								setTimeout(() => {//模拟请求，把这个换成ajax请求哈，或者emit出去 外面去请求，但是建议都集成在这边 省的写一堆重置代码
									uni.hideLoading();
									let response = {//模拟返回
										code: 1,
										value: this.paymentPwd
									}
									if(response.code === 1){
										this.$emit('submit', {//这里是传出去给调用者的，参数任意下，只要能区分就行
											type: 'reset',
											value: this.paymentPwd
										});
										this.modalFun('hide');
									}
								}, 1000)
							}else{//修改安全密码
								uni.showLoading({
									title: '正在重置密码'
								});
								// 如果不把逻辑卸载这里面，直接把setTimeout删除即可
								setTimeout(() => {//模拟请求，把这个换成ajax请求哈，或者emit出去 外面去请求，但是建议都集成在这边 省的写一堆重置代码
									uni.hideLoading();
									let response = {//模拟返回
										code: 1,
										msg: '重置新安全密码成功'
									}
									if(response.code === 1){
										this.$emit('submit', {
											type: 'modify',
											value: this.paymentPwd
										});
										this.modalFun('hide');
									}
								}, 1000)
							}
							return ;
						}
						this.checkSafePwd('check');
					}else{
						if(this._mode === 3 && this.current === 0){//校验安全密码正确性
							this.checkSafePwd('verify');
							return ;
						}
						this.changeSwiper(1);
					}
				}
			},
			checkSafePwd(type) {
				// uni.showLoading({
				// 	title: '校验安全密码中'
				// });
				setTimeout(() => {//模拟请求，把这个换成ajax请求哈，或者emit出去 外面去请求，但是建议都集成在这边 省的写一堆重置代码
					// uni.hideLoading();
					let response = {//模拟返回
						code: 1,
						msg: '密码正确'
					}
					if(response.code === 1){
						if(type === 'check'){
							this.$emit('submit', {//设置或者重置新安全密码
								type: 'check',
								value: this.paymentPwd
							});
							this.modalFun('hide');
						}else{
							this.changeSwiper(1);//执行下一步
						}
					}else{
						this.clear();
						if(type !== 'check'){
							this.showError(response.msg);
						}
					}
				}, 1000)
			},
			changeSwiper (num) {
				if(isNaN(num)){
					num = 1;
				}
				this.current += num;
				this.paymentPwd = this.paymentPwds[this.current] || '';
				let activeInput = this.paymentPwd.length
				this.activeInput = activeInput - (activeInput >= this._digits ? 1 : 0);
			},
			getKeyNumber (val) {
				let paymentPwdArr = this.paymentPwd.split('');
				if (val === '' || (val != -1 && paymentPwdArr.length === this._digits)) { //空或者已经达到最大值
					if(paymentPwdArr.length === this._digits && this.trigger === 'auto'){
						this.submit();
						return ;
					}
					return false;
				} else if (val != -1) { //数字输入
					paymentPwdArr.splice(this.activeInput, 0, val);
					this.activeInput++;
					this.paymentPwd = paymentPwdArr.join('');
					this.paymentPwds[this.current] = this.paymentPwd;
					if(paymentPwdArr.length === this._digits && this.trigger === 'auto'){
						this.submit();
						return ;
					}
				} else { //删除
					if (this.activeInput >= 0) {
						this.activeInput !== 0 && this.activeInput--;
						paymentPwdArr.splice(this.activeInput, 1);
						this.paymentPwd = paymentPwdArr.join('');
						this.paymentPwds[this.current] = this.paymentPwd;
					}
				}
			},
			getKeyboard (e) {
				let index = e && e.target.dataset.index;
				if (index === undefined) {
					this.activeInput = 0;
					this.changeKeyboard(false);
					return ;
				}
				var _length = this.paymentPwd.length;
				this.activeInput = index <= _length ? index : _length;
				this.changeKeyboard();
			}
		}
	}
</script>

<style lang="scss">
	.digital-keyboard-modal{
		height: 100%;
		background-color: #fff;
		&.digital-keyboard-modal-1, &.digital-keyboard-modal-4 {
			height: auto;
			border-radius: 20px 20px 0px 0px;
			background: #fff url(data:image/png;base64,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
			padding-padding: 0;
			padding-padding: constant(safe-area-inset-top);
			padding-padding: env(safe-area-inset-top);
		}
		&.digital-keyboard-modal-2, &.digital-keyboard-modal-5, &.digital-keyboard-modal-3{
			padding-top: 180rpx;
			.dk-title{
				color: #000;
			}
			.digital-keyboard{
				width: 100%;
				position: fixed;
				bottom: 0;
				left: 0;
				position: fixed;
				left: 0;
				bottom: 0;
			}
		}

		.dk-title {
			font-size: 36rpx;
			font-weight: 800;
			color: #fff;
			line-height: 90rpx;
			text-align: center;
		}
		
		.dk-swiper{
			height: 260rpx;
		}
		
		.dk-submit{
			position: absolute;
			right: 0;
			top: 0;
			padding: 0 20rpx;
			color: #38f;
			font-size: 28rpx;
			line-height: 70rpx;
		}
		
		.dk-return{
			right: auto;
			left: 0;
		}

		
		.dk-close{
			position: fixed;
			left: 30rpx;
			top: 30rpx;
		}

		.dk-subtitle {
			font-size: 24rpx;
			color: rgba(152, 152, 148, 1);
			line-height: 3;
			text-align: center;
		}
		
		.dk-down{
			text-align: center;
			line-height: 70rpx;
			box-shadow: 0 0 0 2rpx #eee;
			.dk-down-icon{
				border-left: 1px solid #bbb;
				border-bottom: 1px solid #bbb;
				width: 40rpx;
				height: 40rpx;
				display: inline-block;
				transform: scale(.5) rotate(-45deg);
			}
		}
		
		.pwd-tips{
			color: #666;
			font-size: 24rpx;
			line-height: 1.5;
			padding: 15rpx 100rpx;
		}
		
		.pwd-tips-errot{
			color: #ff4242;
			font-size: 30rpx;
			text-align: center;
		}
		
		.pwd-forget {
			font-size: 24rpx;
			color: #26C6B3;
			padding: 20rpx 0 30rpx;
			text-align: center;
			line-height: 33rpx;
		}

		.digital-keyboard{
			box-shadow: 0 -1rpx 0 3rpx #eee;
			width: 100%;
			transition: all .2s linear;
			transform: translateY(100%);
		}
		
		/* 键盘 */
		.digital-key-box {
			box-shadow: 0 0 0 2rpx #eee;
			position: relative;
			overflow: hidden;
			width: 100%;
		}
		
		.digital-keyboard-show{
			transform: translateY(0);
		}

		.num {
			transition: all .2s linear;
			float: left;
			background-color: #fff;
			box-shadow: 0 0 0 2rpx #eee;
			width: 33.33333333%;
			cursor: pointer;
			height: 100rpx;
			text-align: center;
			color: #333;
			line-height: 100rpx;
			font-size: 55rpx;
			font-weight: bold;
			position: relative;
			overflow: hidden;
			&:after {
				content: "";
				display: block;
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				pointer-events: none;
				//设置径向渐变
				background-image: radial-gradient(circle, rgba(0, 0, 0, .65) 20%, transparent 20%);
				background-repeat: no-repeat;
				background-position: 50%;
				transform: scale(5);
				opacity: 0;
				transition: transform .2s ease-in-out, opacity .3s ease-in-out;
			}
			&:active:after {
			    transform: scale(0);
			    opacity: .5;
			    //设置初始状态
			    transition: 0s;
			}
		}

		.num:nth-of-type(3n+1) {
			border-bottom: 0;
			border-left: 0;
		}

		.num:nth-of-type(3n+2) {
			border-bottom: 0;
			border-left: 0;
			border-right: 0;
		}

		.num.no-num {
			background-color: #f2f2f2;
			font-size: 0;
		}
		

		.num:last-child {
			background: #f2f2f2 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAMAAAD04JH5AAAAilBMVEUAAADLy8vLy8vLy8vMzMzMzMzY2NjMzMzMzMzQ0NDOzs7MzMzMzMzNzc3Pz8/T09PMzMzNzc3Nzc3Nzc3Ly8vMzMzMzMzMzMzOzs7MzMzNzc3MzMzOzs7Ozs7Q0NDMzMzMzMzMzMzOzs7Ozs7Ly8vMzMzMzMzMzMzMzMzOzs7MzMzMzMzMzMzMzMzKmFAsAAAALXRSTlMAQICZ9vAD+uoMG+eyRCsHwV5RJfvhjEw2yGdWMiEX7NWjOhL83JKGeinNu3IVbGIkAAADJklEQVR42u2Z2XLiQAxFBY3xBhgw+2IWkxAg+v/fm6lJKgGBkbrHKl76PFJQOm7crWsZPB6Px+PxeDwej0dGsm/UzB7kZJMIFYiOCYhYz1GJcCCqP0Y9hsCSp6jIJgaGXoSqLLn6G9TlCE9ZbVAZA8+YBcigK7BvIYOuQIOpry3QDZFBV2DK1NcWmI6QQVdgyNTXFlgekEFXYCD8cTeG4Rafcl7GUDQjO4EFSggG399+tlsn7a+OVqlp3OuffvbrqLo+fBPP5QKfKKJxdcdgBR9XmS6UCnygiIhfs8NNq+0IBSYoFGDv2tEUrtnJBCYoZUYMuLR1Fgm8o5gOs3NJ3pyiRMCgBQ1ydoY3eZdcfy+QCOzQhqBHumcLf2gRu3WEvEB7h3ZEOclvwY/bDG4oxsgLtDtoS0rW4JQ+/jx5Q0aA1BcTrEilf1c6Tu68GAH7+pVrvUXcFnf/DC+QXdCNVhduiPv9WJAsqUDWR1dGZL9lmV2yNF/a6M7h98RxSZbmt1U6s4BKlshhnOvTruuYbIzN+cvkDqdkYaCoI/++wwOOKBJYYB3s4A6DMoEd1mPQBqfObuCCtdBpu402DPTrWgBKHskEOlgDxnm8ZuBdYxP8tmFeoIuodhCVc8na8ZruzSC7CAQaITLwDZkiz3mG6ZjWkaTs2T1pmf+cRqUnEoneaEyDZcgKuM/j0vz+vm/NgOZ1RsDdYLymO//hXbEPWAGYuRikyePBejglBqeIEXCbyganqsH6iBr0AkbAZS5N/+vVpjqqQvfACDhM5pfP4v9hKExHxvndRIfGf+Z87PMCkNsYJOThnAvLe0bA9v3QnAx22R6Vixr5WmzQvznsRnxYHjAC1u/o8qvrF+SEMmUErA3m5c3jF2dgxFkqkRpEs6+G28QnXArmGcFUBimeVjOG9p4JPZtjDpBNrNJk8Ya1so1s42yxRU14ASgZA2UB3kBfAMozMigLQMwYKAswgxt9AWZ0pS/ADO8UBF5mYMDNQF9APMLVGbCRIb4iC3itQZjAaw2OAC81OGcgMZigEiYGGeWwqcDnCjwej8fj8Xg8Ho/nL38AXRgT/6dxCesAAAAASUVORK5CYII=) center center / auto 50rpx no-repeat;
		}

		.pwd-box {
			padding-left: 10rpx;
			position: relative;
			text-align: center;
		}

		.pwd-text {
			position: relative;
			line-height: 110rpx;
			vertical-align: middle;
			text-align: center;
			font-size: 50rpx;
			font-weight: bold;
			width: 92rpx;
			height: 92rpx;
			margin-right: 10rpx;
			display: inline-block;
			box-shadow: 0 0 0 2rpx #ccc;
			overflow: hidden;
		}

		.pwd-text.active:after {
			-webkit-animation: twinkle 1s infinite;
			animation: twinkle 1s infinite;
			height: 70%;
			width: 4rpx;
			content: '';
			position: absolute;
			top: 15%;
			left: 50%;
			margin-left: -2rpx;
			background-color: #4fa5e1;
		}
		
		@keyframes twinkle {
			from {
				background-color: #4fa5e1;
			}

			to {
				background-color: transparent;
			}
		}
	}
</style>