cxyy-applet/pagesMy/account/password.vue

<template>
	<view class="container main">
		<view class="one">
			<uni-forms ref="baseForm" :rules="rules" :modelValue="form" label-width="80px">
				<uni-forms-item label="账号" required name="account">
					<uni-easyinput :disabled="true" v-model="form.account" placeholder="请输入账号" />
				</uni-forms-item>
				<uni-forms-item label="密码" required name="password">
					<uni-easyinput type="password" v-model="form.password" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item label="确认密码" required name="ispassword">
					<uni-easyinput type="password" v-model="form.ispassword" placeholder="请输入确认密码" />
				</uni-forms-item>
			</uni-forms>
			<view class="button">
				<button type="primary" @click="submit('baseForm')">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				form: {
					password: '',
					ispassword: ''
				},
				// 校验规则
				rules: {
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					},
					ispassword: {
						rules: [{
								required: true,
								errorMessage: '确认密码不能为空'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value != data.password) {
										callback('两次输入的密码必须相同')
									}
									return true
								}
							}
						]
					},
				},
			}
		},
		onLoad: async function(e) {
			const that = this;
			await that.searchToken();
			await that.search();
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.baseForm.setRules(this.rules)
		},
		methods: {
			// 用户信息
			searchToken() {
				const that = this;
				try {
					const res = uni.getStorageSync('token');
					if (res) {
						const user = that.$jwt(res);
						that.$set(that, `user`, user);
					}
				} catch (e) {}
			},
			// 查询
			async search() {
				const that = this;
				if (that.user && that.user.id) {
					let res;
					res = await that.$api(`/user/${that.user.id}`, 'GET', {})
					if (res.errcode == '0') {
						that.$set(that, `form`, res.data)
					} else {
						uni.showToast({
							title: res.errmsg,
						});
					}
				}
			},
			// 登录
			submit(ref) {
				const that = this;
				that.$refs[ref].validate().then(async res => {
					if (res.password == res.ispassword) {
						let arr;
						arr = await that.$api(`/login/updatePwd/User`, 'POST', {
							id: that.user.id,
							password: res.password
						})
						if (arr.errcode == '0') {
							try {
								uni.removeStorageSync('token');
							} catch (e) {
								// error
							}
							uni.reLaunch({
								url: `/pages/home/index`
							})
						} else {
							uni.showToast({
								title: arr.errmsg,
							});
						}
					} else {
						uni.showToast({
							title: `密码不一致`,
							icon: 'error'
						});
					}
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 3vw;

		.button {
			margin: 2vw 0 0 0;
			text-align: center;

			button {
				background-color: var(--f3CColor);
				font-size: var(--font14Size);
				border-radius: 2vw;
			}
		}
	}
</style>