QianNiaoShop/pagesT/user/editPwd.vue

<template>
	<view class="editPwd">
		<view class="input-li">
			<text class="custom-icon custom-icon-mima"></text>
			<input placeholder="请输入旧密码" placeholder-class="input-pl" type="password" v-model="oldPwd" />
		</view>
		<view class="input-li">
			<text class="custom-icon custom-icon-mima"></text>
			<input placeholder="请输入新密码" placeholder-class="input-pl" type="password" v-model="newPwd" />
		</view>
		<view class="input-li">
			<text class="custom-icon custom-icon-dunpai"></text>
			<input placeholder="请再次输入新密码" placeholder-class="input-pl" type="password" v-model="againPwd" />
		</view>
		<view class="conform-btn" @click="editPwd">确认修改</view>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	data() {
		return {
			oldPwd: '',
			newPwd: '',
			againPwd: ''
		};
	},
	methods: {
		...mapActions({
			logout: 'logout'
		}),
		editPwd() {
			if (this.newPwd !== this.againPwd) {
				this.$u.toast('两次输入密码不一致');
				return false;
			}
			this.$u.api
				.updateUserCenterData({
					newPassword: this.newPwd,
					oldPassword: this.oldPwd,
					rePassword: this.againPwd
				})
				.then(res => {
					this.$u.toast('修改成功，请重新登录');
					setTimeout(() => {
						this.logout();
					}, 500);
				});
		}
	}
};
</script>

<style lang="scss" scope>
.editPwd {
	padding-top: 50rpx;
}

.input-li {
	width: 702rpx;
	margin: 30rpx auto 0;
	border: 1px solid #eeeeee;
	line-height: 80rpx;
	border-radius: 8rpx;
	padding: 0 30rpx;

	.input-pl {
		font-size: 24rpx;
		font-weight: 300;
	}

	.custom-icon {
		color: #444444;
		font-size: 32rpx;
	}

	input {
		padding-left: 30rpx;
		display: inline-block;
		vertical-align: middle;
	}
}

.conform-btn {
	width: 680rpx;
	color: #ffffff;
	line-height: 80rpx;
	background-color: $uni-color-primary;
	text-align: center;
	border-radius: 10rpx;
	margin: 60rpx auto 0;
}
</style>