property-resident-side/property-uniapp-project/pageSubPack/my/changePwd.vue

<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar title="修改密码" left-icon="left" @clickLeft="goBack" backgroundColor="transparent" :border="false">
		</uni-nav-bar>


		<scroll-view class="page" scroll-y>

			<!-- 表单区域 -->
			<view class="form-container">
				<!-- 原密码 -->
				<input class="input-item" type="password" v-model="oldPwd" placeholder="请输入原密码"
					placeholder-class="input-placeholder" />

				<!-- 新密码 -->
				<input class="input-item" type="password" v-model="newPwd" placeholder="请输入新密码"
					placeholder-class="input-placeholder" />

				<!-- 确认新密码 -->
				<input class="input-item" type="password" v-model="confirmPwd" placeholder="请再次输入新密码"
					placeholder-class="input-placeholder" />

			</view>


		</scroll-view>
		<view class="bottom-btn">
			<button class="submit-btn" @click="onSubmit">确定</button>
		</view>
	</view>



</template>

<script setup>
import { ref } from 'vue'
import { authChangePassword } from '../api/apiSub.js'

	
	const statusBarHeight = ref(20);
	const oldPwd = ref('');
	const newPwd = ref('');
	const confirmPwd = ref('')
	
	
	// 方法
	const onSubmit = () => {
		if (!oldPwd.value) {
			uni.showToast({ title: '请输入原密码', icon: 'none' })
			return
		}
		if (!newPwd.value) {
			uni.showToast({ title: '请输入新密码', icon: 'none' })
			return
		}
		if (newPwd.value !== confirmPwd.value) {
			uni.showToast({ title: '两次密码不一致', icon: 'none' })
			return
		}

		uni.showLoading({ title: '修改中...', mask: true })
		authChangePassword({
			oldPassword: oldPwd.value,
			newPassword: newPwd.value,
			confirmPassword: confirmPwd.value
		}).then(res => {
			uni.hideLoading()
			if (res.code === 200) {
				uni.showToast({ title: '修改成功', icon: 'success' })
				setTimeout(() => goBack(), 1500)
			} else {
				uni.showToast({ title: res.msg || '修改失败', icon: 'none' })
			}
		}).catch((err) => {
			uni.hideLoading()
			uni.showToast({ title: err.msg || '修改失败', icon: 'none' })
		})
	}
	
	const goBack = () =>{
		uni.navigateBack()
	}

</script>
<style lang="scss">
	page {
		background: #f9f9f9;
	}
</style>

<style scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 关键：占满屏幕高度 */
		background-color: #f9f9f9;
	}

	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0px 40rpx;
		box-sizing: border-box;
		/* background-color: #fff; */
	}

	/* 底部按钮 */
	.bottom-btn {
		padding: 20rpx 30rpx 40rpx;
	}

	/* 表单容器 */
	.form-container {
		/* padding: 40rpx 30rpx; */
	}

	/* 输入框样式 */
	.input-item {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		padding: 0 20rpx;
		margin-bottom: 30rpx;
		/* border: 1rpx solid #dcdcdc; */
		border-radius: 8rpx;
		font-size: 30rpx;
		color: #333;
		box-sizing: border-box;
		background-color: #fff;
	}

	/* 占位符样式 */
	.input-placeholder {
		color: #999;
		font-size: 30rpx;
	}

	/* 确定按钮 */
	.submit-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #1677ff;
		color: #fff;
		font-size: 32rpx;
		border-radius: 8rpx;
		border: none;
	}

	/* 成功提示弹窗 */
	.toast-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: transparent;
		z-index: 9999;
	}

	.toast-content {
		background-color: rgba(0, 0, 0, 0.8);
		padding: 40rpx 60rpx;
		border-radius: 8rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.toast-icon {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 50%;
		background-color: #fff;
		color: #1677ff;
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.toast-text {
		color: #fff;
		font-size: 28rpx;
	}

	.status-bar {
		width: 100vw;
		height: 46px;
	}
</style>