crm-app-vue3/pages/changePw/index.vue

<template>
	<view class="changePw_wrap">
		<u-navbar title="修改密码" :autoBack="true" :placeholder="true" v-hideNav></u-navbar>
		<view class="ps_wrap">
			<u-icon name="error" color="#409eff" size="16"></u-icon>
			<text class="text">为保障您的账号安全，修改密码前请填写原密码</text>
		</view>
		<view class="form_wrap">
			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
				<u-form-item label="" class="inputFormWrap">
					<u--input shape="circle" clearable prefixIcon="/static/login/icon-account.png"
						:prefixIconStyle="prefixIconStyle" v-model="userName" placeholder="请输入账号" disabled></u--input>
				</u-form-item>
				<u-form-item label="" prop="oldPassword" class="inputFormWrap">
					<u--input shape="circle" clearable password prefixIcon="/static/login/icon-password.png"
						:prefixIconStyle="prefixIconStyle" v-model="form.oldPassword" placeholder="请输入原密码"></u--input>
				</u-form-item>
				<u-form-item label="" prop="newPassword" class="inputFormWrap">
					<u--input shape="circle" clearable prefixIcon="/static/login/icon-password.png"
						:prefixIconStyle="prefixIconStyle" v-model="form.newPassword" placeholder="请输入新的登录密码"></u--input>
				</u-form-item>
				<u-form-item>
					<u-button type="primary" text="提交" shape="circle" @click="handleSubmit"></u-button>
				</u-form-item>
			</u--form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				prefixIconStyle: {
					width: "16px",
					height: "16px",
					marginRight: "4px",
					marginLeft: "10px"
				},
				form: {
					oldPassword : "",
					newPassword: "",
				},
				rules: {
					oldPassword: {
						type: 'string',
						required: true,
						message: '请输入原密码',
						trigger: []
					},
					newPassword: {
						type: 'string',
						required: true,
						message: '请输入新密码',
						trigger: []
					}
				},
			}
		},
		computed :{
			userName() {
				return this.$store.state.user.userInfo.userName;
			}
		},
		methods: {
			handleSubmit(){
				this.$refs.uForm.validate().then(async () => {
					uni.$u.api.updateUserPwd(this.form).then(res=>{
						uni.$u.toast("修改成功,请重新登录");
						uni.reLaunch({
							url:"/pages/login/index"
						})
					})
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.changePw_wrap {
		.ps_wrap {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 60rpx;
			margin-bottom: 30rpx;
			::v-deep .u-icon__icon {
				font-size: 28rpx !important;
			}

			.text {
				font-size: 22rpx;
				color: #666666;
			}
		}

		.form_wrap {
			padding: 20rpx 60rpx;
		}
	}
</style>