shop-uniapp-240426/pages/setting/updatePassword.vue

<template>
	<view>
		<u-navbar :title="$t('page.setting.updatePassword.title')" :safeAreaInsetTop="false" placeholder
			@leftClick="leftClick">
		</u-navbar>

		<u--form labelPosition="left" :model="model1" :rules="rules" class="line" ref="uForm">

			<u-form-item :label="$t('page.setting.updatePassword.OldPassword')" prop="oldPassword" borderBottom
				labelWidth="80px">
				<u--input v-model="model1.oldPassword" type="password"
					:placeholder="$t('page.setting.updatePassword.OldPassword-Placeholder')"></u--input>
			</u-form-item>

			<u-form-item :label="$t('page.setting.updatePassword.newPassword')" prop="password" borderBottom
				labelWidth="80px">
				<u--input v-model="model1.password" type="password"
					:placeholder="$t('page.setting.updatePassword.newPassword-Placeholder')"></u--input>
			</u-form-item>

			<u-form-item :label="$t('page.setting.updatePassword.confirmPassword')" prop="okPassword" borderBottom
				labelWidth="80px">
				<u--input v-model="model1.okPassword" type="password"
					:placeholder="$t('page.setting.updatePassword.newPassword-Placeholder')"></u--input>
			</u-form-item>

		</u--form>
		<u-button class="submit" size="large" @click="submit" :text="$t('page.walletRecharge.submit')"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model1: {
					id : 1,
					oldPassword: '',
					password: '',
					okPassword: ''
				},
				rules: {
					'oldPassword': {
						type: 'string',
						required: true,
						message: this.$t('page.setting.updatePassword.OldPassword-Placeholder'),
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: this.$t('page.setting.updatePassword.newPassword-Placeholder'),
						trigger: ['blur', 'change']
					},
					'okPassword': {
						type: 'string',
						required: true,
						message: this.$t('page.setting.updatePassword.newPassword-Placeholder'),
						trigger: ['blur', 'change']
					},
				},
			}
		},
		methods: {
			leftClick() {
				uni.navigateTo({
					url: '/pages/setting/setting'
				})
			},
			editPassword(){
				this.request('editPass',this.model1).then(res=>{
					if(res.code === 200){
						uni.$u.toast(this.$t('page.setting.updatePassword.edit-success'))
						setTimeout(()=>{
							uni.navigateTo({
								url: '/pages/login/login'
							})
						},500)
					}
				})
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					this.editPassword();
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.line {
		background-color: #fff;
		padding: 5px 10px;
		margin-top: 10px;

		.celi {
			border-radius: 10px;
			margin: 10px 0;
		}
	}

	.submit {
		border-radius: 30px;
		background-color: #ED762F;
		color: #fff;
		margin: 10px;
		width: calc(100% - 20px);
	}
</style>