jje_uniapp/myPages/setting/setting-transaction-password.vue

<template>
  <view class="container">
    <view class="login-wrap">
		<view class="login-form">
			<u--form
				labelPosition="left"
				:model="userInfo"
				:rules="rules"
				ref="form1"
			>
			<u-form-item
				label="原密码"
				prop="oldPassword"
				labelWidth="auto"
				labelAlign="right"
			  >
			<u--input
				v-model="userInfo.oldPassword"
				placeholder="请输入原密码"
				border="bottom"
				maxlength="6"
				type="password"
			></u--input>
			</u-form-item>
				<u-form-item
					label="密码"
					prop="password"
					labelWidth="auto"
					labelAlign="right"
				  >
				<u--input
					v-model="userInfo.password"
					placeholder="请输入密码"
					border="bottom"
					maxlength="6"
					type="password"
				></u--input>
				</u-form-item>
			  <u-form-item
					labelWidth="auto"
					labelAlign="right"
					label="确认密码"
					prop="password1"
					width="120"
				>
				<u--input
					maxlength="6"
					v-model="userInfo.password1"
					placeholder="请再次输入密码"
					border="bottom"
					type="password"
				></u--input>
			  </u-form-item>
			</u--form>
		</view>
	</view>
	<view @click="submitData" class="op-btn-wrap">
		<view class="h-btn">
			<text>确定</text>
		</view>
	</view>

	<!-- 提示 -->
	<view class="h-mark-desc">
		<view class="h-text">
			<text>*交易密码建议输入不连续的6位数密码</text>
		</view>
	</view>

  </view>
</template>
 <script>
export default {
	data() {
		return {
			userInfo: {
				oldPassword: '',
				auth: true,
				password: '',
				password1: '',
			},
			tips2: '',
			rules: {
				oldPassword: {
					required: true,
					min: 6,
					max: 18,
					message: '请输入6到18位密码',
					trigger: ['blur', 'change'],
				},
				password: {
					required: true,
					min: 6,
					max: 6,
					message: '请输入6位密码',
					trigger: ['blur', 'change'],
				},
				password1:  [
					{
						required: true,
						min: 6,
						max: 6,
						message: '请输入6位密码',
						trigger: ['blur', 'change'],
					},
					{
						validator: (rule, value, callback) => {
							if(this.userInfo.password === value){
								return true;
							}
							return false;
						},
						message: "两次输入密码不一致",
						trigger: ['blur', 'change'],
					}
				],
			},
		}
	},
	onLoad() {
		this.$refs.form1.setRules(this.rules)
	},
	methods: {
		// 提交交易密码
		submitData(){
			// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
			this.$refs.form1.validate().then(res => {
				this.updateUserTransactionPassword();
			}).catch(errors => {
				uni.$u.toast('校验失败,请认真填写')
			})

		},
		updateUserTransactionPassword(){
			// 保存数据
			updateUserTransactionPassword(null,{data:this.userInfo}).then((res)=>{
				uni.showToast({
					title: '设置成功'
				})
				setTimeout(function() {
				   // 选择完成后返回上一页
				   uni.navigateBack({
				     delta: 1,
				     success: function(res) {
				       // 在这里可以处理选择结果
				   	   // 可以将选择的内容保存到本地或通过事件传递给上一个页面
				   	   uni.$emit('selectedServiceObjectChild', item);
				     }
				   });
				}, 2000); // 延迟2秒执行
			}).catch(() =>{
				uni.showToast({
					title: "操作失败"
				})
			});
		},
	}
}
</script>
<style lang="scss">
page,body{
	background: #fff;
}
.container{
	background: #fff;
	height: 300px;
	.login-wrap {
		display: flex;
		justify-content: center;
		.login-form{
			width: 90%;
		}
		.account{
			display: flex;
		}
		.identifying-code{
		}
	}
	.op-btn-wrap{
		margin-top: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		.h-btn{
			text-align: center;
			width: 343px;
			height: 42px;
			background: #FFE05C;
			border-radius: 27px;
			line-height: 42px;
		}
	}
}

</style>