BiKing/pages/content/money-password.vue

<template>
	<view>
		<headContent borderBottom>
			<template #left>
				<reverse-back />
			</template>
			<template #content>
				<view class="haed-title">
					设置资金密码
				</view>
			</template>
		</headContent>



		<view class="form-box">
			<form class="form-content">
				<view class="form-item ">
					<view class="form-item-lable">新密码</view>
					<input class="form-item-input" v-model="formData.password" :maxlength="maxlength"
						placeholder-class="form-item-place" :type="showNewPsd ? 'text' : 'password'"
						placeholder="请输入新密码">
					<view class="form-item-icon" @click.stop="showNewPsd = !showNewPsd">
						<text v-show="showNewPsd" class="iconfont">&#xe663;</text>
						<text v-show="!showNewPsd" class="iconfont">&#xe664;</text>
					</view>
				</view>
				<view class="err-hint">{{ formError.newPsdErr }}</view>
				<view class="form-item ">
					<view class="form-item-lable">确认密码</view>
					<input class="form-item-input" v-model="formData.re_password" :maxlength="maxlength"
						placeholder-class="form-item-place" :type="showConfirmPsd ? 'text' : 'password'"
						placeholder="请再次输入新密码">
					<view class="form-item-icon" @click.stop="showConfirmPsd = !showConfirmPsd">
						<text v-show="showConfirmPsd" class="iconfont">&#xe663;</text>
						<text v-show="!showConfirmPsd" class="iconfont">&#xe664;</text>
					</view>
				</view>
				<view class="err-hint">{{ formError.confirmPsdErr }}</view>
			</form>
			<view class="reminder">
				资金密码将用于转账、法币交易、红包、质押借币等功能，请妥善保管，避免泄露！
			</view>
			<view :class="['form-btn' , deblockingSubmitBtn() ? 'active-form-btn' : '' ]"
				@click.stop="SubmitPassWord()">
				确定
			</view>
		</view>

		<!-- <unopen ref="unopenRef" :content="changeHint" /> -->
	</view>
</template>

<script>
	import {
		validPassword
	} from "@/utils/validate.js"
	import {
		Api_setUpdatePassword
	} from "@/api/index.js"
	import {
		Way_getUserInfo
	} from "@/utils/common-request.js"
	export default {
		name: 'money-password',
		data() {
			return {
				account: null,
				maxlength: 20,
				showPwd: false,
				showNewPsd: false,
				showConfirmPsd: false,
				formData: {

					password: '',
					re_password: ''
				},
				formError: {

					newPsdErr: '',
					confirmPsdErr: ''
				}
			};
		},
		watch: {

			'formData.password'(newPsd, oldPsd) {
				this.validateField('password')
			},
			'formData.re_password'(newPsd, oldPsd) {
				this.validateField('re_password')
			}
		},
		onShow() {
			// this.getUserInfo();
			// this.$refs.unopenRef.open();
		},
		methods: {
			getUserInfo() {
				Way_getUserInfo().then(res => {
					this.account = res;
				})
			},
			validateField(key) {
				let validateStatus = false
				switch (key) {

					case 'password':
						if (!this.formData[key].trim()) {
							this.formError.newPsdErr = '请输入新密码'
							validateStatus = false;
						} else if (this.formData[key].length < 6) {
							this.formError.newPsdErr = `密码长度为6-${this.maxlength}位字符`;
							validateStatus = false;
						} else {
							this.formError.newPsdErr = '';
							validateStatus = true;
						};
						break;
					case 're_password':
						if (!this.formData[key].trim()) {
							this.formError.confirmPsdErr = '请再次输入新密码';
							validateStatus = false;
						} else if (this.formData[key] !== this.formData.password) {
							this.formError.confirmPsdErr = '确认密码和新密码输入不一致';
							validateStatus = false;
						} else {
							this.formError.confirmPsdErr = '';
							validateStatus = true;
						}
						break;
					default:
						validateStatus = false

				};
				return validateStatus;
			},
			confirmValidateField() {
				return new Promise((resolve, reject) => {
					let validateStatus = true;
					for (let key in this.formData) {
						if (validateStatus) {
							validateStatus = this.validateField(key)
						} else {
							this.validateField(key)
						}
					}


					if (validateStatus) {
						resolve()
					} else {
						reject()
					};
				})

			},

			deblockingSubmitBtn() {
				for (let key in this.formData) {
					if (this.formData[key] === '') {
						return false
						break;
					}
				};
				return true
			},
			SubmitPassWord() {

				this.confirmValidateField().then(res => {
					uni.showLoading({
						title: '',
						mask: true
					})
					const obj = {
						password: this.formData.password,
						re_password: this.formData.re_password
					}

					Api_setUpdatePassword(obj).then(res => {
						setTimeout(() => {
							uni.showToast({
								title: `设置成功`,
								icon: "none"
							})
							setTimeout(() => {
								uni.navigateBack({
									delta:1
								})
							}, 1000)
						}, 300)
					}).catch(err => {}).finally(() => {
						setTimeout(() => {
							uni.hideLoading()
						}, 200)
					})


				})


			}



		}
	}
</script>

<style lang="scss" scoped>
	.reminder {
		font-size: 26rpx;
		display: flex;
		align-items: center;
		color: $Theme-Color;
		padding: 20rpx 0;
	}

	.form-box {
		width: 100%;
		padding: 0 $pages-padding;

		.form-content {
			width: 100%;

			.form-item {
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				border-bottom: 1rpx solid $border-color;

				.form-item-lable {
					width: 180rpx;
					font-weight: bold;
				}

				.form-item-input {
					font-size: 28rpx;
					flex: 1;
					height: 100%;
					border: none;
				}

				.form-item-place {
					font-size: 28rpx;
					color: #ccc;
				}

				.form-item-icon {
					width: 50rpx;
					height: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.iconfont {
						font-size: 26rpx;
					}
				}
			}

			.err-hint {
				width: 100%;
				min-height: 50rpx;
				font-size: 26rpx;
				color: red;
				line-height: 1.2;
				padding-top: 10rpx;
			}
		}

		.form-btn {
			width: 100%;
			background-color: #ccc;
			height: 90rpx;
			margin-top: 20rpx;
			border-radius: 10rpx;
			text-align: center;
			line-height: 90rpx;
			color: #fff;
			letter-spacing: 1px;
			font-size: 28rpx;
		}

		.active-form-btn {
			background-color: $Theme-Color ;
		}
	}
</style>