yunzhu-im-mobile/pages/change-password/index.vue

<template>
	<view class="change-page">
		<text class="hint">修改成功后请使用新密码登录。</text>

		<view class="form">
			<input class="input" v-model="oldPassword" placeholder="当前密码" password />
			<input class="input" v-model="newPassword" placeholder="新密码（须含字母与数字）" password />
			<input class="input" v-model="confirmPassword" placeholder="确认新密码" password />

			<view class="submit" :class="{ disabled: loading }" @click="onSubmit">
				<text>{{ loading ? '提交中...' : '确认修改' }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { getToken, setToken, changePasswordLoggedIn } from '../../utils/api'

	function passwordMeetsRule(pwd) {
		const s = String(pwd || '')
		return /[A-Za-z]/.test(s) && /\d/.test(s)
	}

	export default {
		data() {
			return {
				oldPassword: '',
				newPassword: '',
				confirmPassword: '',
				loading: false
			}
		},
		onShow() {
			if (!getToken()) {
				uni.showToast({ title: '请先登录', icon: 'none' })
				setTimeout(() => {
					uni.reLaunch({ url: '/pages/login/index' })
				}, 80)
			}
		},
		methods: {
			async onSubmit() {
				if (this.loading) return
				const oldPwd = String(this.oldPassword || '')
				const newPwd = String(this.newPassword || '')
				const confirm = String(this.confirmPassword || '')
				if (!oldPwd) {
					uni.showToast({ title: '请输入当前密码', icon: 'none' })
					return
				}
				if (!newPwd) {
					uni.showToast({ title: '请输入新密码', icon: 'none' })
					return
				}
				if (!passwordMeetsRule(newPwd)) {
					uni.showToast({ title: '新密码须同时包含字母与数字', icon: 'none' })
					return
				}
				if (newPwd !== confirm) {
					uni.showToast({ title: '两次新密码不一致', icon: 'none' })
					return
				}
				if (oldPwd === newPwd) {
					uni.showToast({ title: '新密码不能与当前密码相同', icon: 'none' })
					return
				}
				this.loading = true
				try {
					await changePasswordLoggedIn(oldPwd, newPwd)
					uni.showToast({ title: '修改成功，请重新登录', icon: 'success' })
					setToken('')
					try {
						uni.removeStorageSync('current_user')
					} catch (e) {}
					setTimeout(() => {
						uni.reLaunch({ url: '/pages/login/index' })
					}, 500)
				} catch (e) {
					uni.showToast({ title: e.message || '修改失败', icon: 'none' })
				} finally {
					this.loading = false
				}
			}
		}
	}
</script>

<style scoped>
	.change-page {
		min-height: 100vh;
		background: #fff;
		padding: 32rpx 48rpx 64rpx;
		box-sizing: border-box;
	}
	.hint {
		display: block;
		font-size: 26rpx;
		color: #888;
		line-height: 1.5;
		margin-bottom: 32rpx;
	}
	.form {
		margin-top: 8rpx;
	}
	.input {
		height: 88rpx;
		padding: 0 24rpx;
		background: #f7f7f7;
		border-radius: 16rpx;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}
	.submit {
		margin-top: 32rpx;
		height: 92rpx;
		border-radius: 18rpx;
		background: #259653;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 30rpx;
	}
	.submit.disabled {
		opacity: 0.7;
	}
</style>