luoshan_web/pages/alterPassword/alterPassword.vue

<template>
	<view class="container">
		<view class="mim-view">
			<!-- <view>
				<view class="mim-font-16 bold mim-flex-wrap-left" style="margin-bottom: 24rpx;">
					<text class="mim-font-16 bold">原密码</text>
					<text class="mim-font-16 bold mimRed">*</text>
				</view>
				<u-input type="password" v-model="form.password" placeholder='请输入原密码'
					placeholder-style="color: #BDBDBD;" height="96" cursor-spacing="12" :clearable='false'
					:custom-style="customStyle" />
			</view> -->
			<view class="marginTop">
				<view class="mim-font-16 bold mim-flex-wrap-left" style="margin-bottom: 24rpx;">
					<text class="mim-font-16 bold">新密码</text>
					<text class="mim-font-16 bold mimRed">*</text>
				</view>
				<u-input type="password" v-model="form.password" placeholder='请输入新密码'
					placeholder-style="color: #BDBDBD;" height="96" cursor-spacing="12" :clearable='false'
					:custom-style="customStyle" />
			</view>
			<view class="marginTop">
				<view class="mim-font-16 bold mim-flex-wrap-left" style="margin-bottom: 24rpx;">
					<text class="mim-font-16 bold">再次输入新密码</text>
					<text class="mim-font-16 bold mimRed">*</text>
				</view>
				<u-input type="password" v-model="form.password_confirmation" placeholder='请再次输入新密码'
					placeholder-style="color: #BDBDBD;" height="96" cursor-spacing="12" :clearable='false'
					:custom-style="customStyle" />
			</view>
		</view>

		<view class="mim-foot">
			<view class="mim-foot-button mim-button mim-flex-wrap" :class="{ disabled: isButtonDisabled }"
				@click="amend">
				修改密码
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					fontSize: '32rpx',
					paddingLeft: '24rpx',
					background: '#f7f7f7',
					borderRadius: '8rpx'
				},
				form: {
					password: '',
					password_confirmation: '',
				},
				isButtonDisabled: false, // 按钮是否禁用
			};
		},
		methods: {
			amend() {
				if (this.isButtonDisabled) {
					return false; // 如果按钮已禁用，直接返回
				}
				if (!this.form.password || !this.form.password_confirmation) {
					this.$u.toast('请将密码信息输入完整！')
					return false
				}
				if (this.form.password != this.form.password_confirmation) {
					this.$u.toast('二次输入的密码信息不一致！')
					return false
				}
				this.isButtonDisabled = true; // 禁用按钮
				this.amendPasswordFn()
			},
			async amendPasswordFn() {
				setTimeout(() => {
					this.isButtonDisabled = false; // 启用按钮
				}, 1000)
				const res = await this.$u.api.amendPassword(this.form)
				console.log(res)
				this.$u.toast(res.message)
				setTimeout(() => {
					uni.removeStorageSync('token')
					uni.removeStorageSync('password')
					this.$u.route({
						type: 'reLaunch',
						url: '/pages/login/login'
					})
				}, 1000)

			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;

		.container {
			.mim-view {
				.marginTop {
					margin-top: 24rpx;
				}

			}

			.mim-foot {
				width: 100%;
				height: 136rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				background-color: #ffffff;
				padding: 20rpx 24rpx;
				box-sizing: border-box;
				z-index: 9;

				&-button {
					border-radius: 48rpx;
					opacity: 1;
					background: #DE2E27;
					font-size: 32rpx;
					font-weight: normal;
					line-height: 32rpx;
					letter-spacing: 0px;
					color: #FFFFFF;
					height: 96rpx;
					cursor: pointer;
				}
			}
		}

	}
</style>