eam-uniapp/pages/mine/changePassword.vue

<template>
	<view>
		<view class="box">
			<view class="item">
				<!-- <image src="../../static/icon/user_password_icon_blue.png"></image> -->
				<view class="item2 padd35">
					<input type="text" v-model="oldPassword" placeholder="请输入原密码" />
				</view>
			</view>
			<view class="item">
				<!-- <image src="../../static/icon/user_password_icon_red.png"></image> -->
				<view class="item2 padd35">
					<input type="text" v-model="newPassword" placeholder="请输入新密码" />
				</view>
			</view>
			<view class="item">
				<!-- <image src="../../static/icon/user_password_icon.png"></image> -->
				<view class="item2 padd35">
					<input type="text" v-model="confirmPassword" placeholder="请确认新密码" />
				</view>
			</view>
		</view>
		<view class="btn" @click="submit">确认</view>
	</view>
</template>

<script>
	import * as userApi from "@/api/user.js"
	export default {
		data() {
			return {
				newPassword: "",
				oldPassword: "",
				confirmPassword: "",
			}
		},

		onLoad() {

		},
		onShow() {

		},
		methods: {
			submit() {
				if (!this.oldPassword) {
					this.$modal.showToast('请输入原密码');
					return;
				}
				if (!this.newPassword) {
					this.$modal.showToast('请输入新密码');
					return;
				}
				if (!this.confirmPassword) {
					this.$modal.showToast('请确认新密码');
					return;
				}
				if (this.confirmPassword != this.newPassword) {
					this.$modal.showToast('两次输入的密码不一致，请重新输入');
					return;
				}
				this.$modal.confirm('是否修改密码').then(() => {
					this.$modal.loading('加载中')
					this.loading = true
					userApi.updateUserPassword({
						newPassword: this.newPassword,
						oldPassword: this.oldPassword,
					}).then(res => {
						if (res.data) {
							this.$modal.showToast('修改成功')
							setTimeout(() => {
								this.$tab.navigateBack()
								this.loading = false
							}, 1500)
						} else {
							this.$modal.showToast('修改失败')
							this.loading = false
						}
					}).catch(() => {
						this.$modal.closeLoading()
						this.loading = false
					})
				})
			}

		}
	}
</script>

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

	.box {
		width: 94vw;
		margin: 20rpx auto;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.item {
		background-color: #FFFFFF;
		padding: 0rpx 30rpx;
		display: flex;
		align-items: center;

		image {
			width: 44rpx;
			height: 44rpx;
			margin-right: 30rpx;
		}

		.item2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex: 1;
			border-bottom: 1rpx solid #efefef;
			padding: 25rpx 0rpx;

			input {
				font-size: 28rpx;
			}

			view {
				color: #1a4f9f;
				border: 1rpx solid #1a4f9f;
				font-size: 30rpx;
				border-radius: 50rpx;
				padding: 10rpx 18rpx;
			}
		}

	}

	.btn {
		width: calc(100vw - 80rpx);
		position: fixed;
		bottom: 200rpx;
		left: 40rpx;
		background-color: rgb(64, 158, 255);
		color: #FFFFFF;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 32rpx;
	}

	.noborder {
		border-bottom: none !important;
	}

	.padd35 {
		padding: 35rpx 0 !important;
	}
</style>