JiangShan-app/pagesB/user/resetPsd.vue

<template>
	<page-meta>
		<navigation-bar :title="$tt('navBar.resetPsd')" title-align="center" background-color="#F1F3F9"
			front-color="#000000" />
	</page-meta>
	<view class="reset-psd">
		<view class="form-wrap">
			<u--form :model="passwordForm" :rules="rules" ref="form" label-width="140rpx">
				<view class="item">
					<u-form-item prop="oldPsd" :label="$tt('user.password0')">
						<view class="right" slot="right">
							<u--input v-model="passwordForm.oldPsd" clearable border="none" inputAlign="right" password
								:placeholder="$tt('user.password1')"></u--input>
							<u-icon name="arrow-right" size="12" color="#D8D8D8"></u-icon>
						</view>
					</u-form-item>
				</view>
				<view class="item">
					<u-form-item prop="newPsd" :label="$tt('user.password2')">
						<view class="right" slot="right">
							<u--input v-model="passwordForm.newPsd" clearable border="none" inputAlign="right" password
								:placeholder="$tt('user.password3')"></u--input>
							<u-icon name="arrow-right" size="12" color="#D8D8D8"></u-icon>
						</view>
					</u-form-item>
				</view>
				<view class="item">
					<u-form-item prop="confirmPsd" :label="$tt('user.password4')">
						<view class="right" slot="right">
							<u--input v-model="passwordForm.confirmPsd" clearable border="none" inputAlign="right"
								password :placeholder="$tt('user.password3')"></u--input>
							<u-icon name="arrow-right" size="12" color="#D8D8D8"></u-icon>
						</view>
					</u-form-item>
				</view>
			</u--form>
		</view>
		<view class="btn-save">
			<u-button type="primary" plain="true" :text="$tt('user.password5')" @click="submit()"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				passwordForm: {
					oldPsd: '',
					newPsd: '',
					confirmPsd: '',
				},
				rules: {
					oldPsd: {
						type: 'string',
						required: true,
						message: this.$tt('user.password1'),
						trigger: ['blur', 'change']
					},
					newPsd: {
						type: 'string',
						required: true,
						min: 6,
						max: 20,
						message: this.$tt('user.password6'),
						trigger: ['blur', 'change']
					},
					confirmPsd: [{
							type: 'string',
							required: true,
							message: this.$tt('user.password7'),
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								if (this.passwordForm.newPsd !== value) {
									callback(new Error(this.$tt('user.password8')));
								} else {
									callback();
								}

							},
							message: this.$tt('user.password8'),
							trigger: ['blur', 'change'],
						}
					]

				}
			}
		},
		onReady() {
			// 兼容小程序
			this.$refs.form.setRules(this.rules);
		},
		methods: {
			//调用修改密码接口
			submit() {
				this.$refs.form.validate().then(res => {
					this.$api.account.updateUserPwd(this.passwordForm.oldPsd, this.passwordForm.newPsd).then(
						res => {
							if (res.code == 200) {
								uni.showToast({
									title: this.$tt('common.saveSuccessful'),
									icon: 'success',
									success: () => {
										uni.navigateBack()
									}
								});
							} else {
								this.$u.toast(res.msg);
							}
						}).catch(err => {
						this.$u.toast(res.msg);
					})
				})
				/*this.$refs["form"].validate(valid => {
					if (valid) {
						console.log("成功")
					}
				});*/
			},
			/*close() {
				this.$tab.closePage();
			}*/

		}
	};
</script>

<style lang="scss">
	page {
		background: $uni-bg-color-grey;
	}
</style>
<style lang="scss" scoped>
	.reset-psd {
		padding: 24rpx;

		.form-wrap {
			background: $uni-bg-color;
			padding: 14rpx 40rpx;
			border-radius: 20rpx;

			.item {
				font-size: 28rpx;
				color: #333333;
				line-height: 21px;
				border-bottom: 1rpx solid #f8f8f8;

				.right {
					display: flex;
					flex-direction: row;
				}
			}

			.item:last-child {
				border: none;

			}

			::v-deep .u-form-item__body {
				padding: 13px 0;

				.u-icon--right {
					margin-left: 20rpx;
				}
			}
		}

		.btn-save {
			width: 100%;
			margin-top: 30rpx;

			::v-deep .u-button--plain {
				color: #486FF2;
				border: unset;
			}

			::v-deep .u-button--square {
				border-radius: 20rpx;
			}

			::v-deep .u-button {
				height: 50px;

			}

			::v-deep .u-button__text {
				font-size: 30rpx !important;
			}
		}
	}
</style>