FE_occupationlab_miniProgram/user/password/password.vue

<template>
	<view class="page">
		<view class="line">
			<view class="label">原密码</view>
			<input type="password" v-model.trim="form.password" placeholder="请输入密码" />
		</view>
		<view class="line">
			<view class="label">新密码</view>
			<input type="password" v-model.trim="form.newPassword" placeholder="请输入新密码" />
		</view>
		<view class="line not-bd">
			<view class="label">确认新密码</view>
			<input type="password" v-model.trim="form.reNewPassword" placeholder="请再次输入新密码" />
		</view>
		<view class="btn" @click="submit">确认</view>
	</view>
</template>

<script>
	import { examinePassword } from '@/apis/modules/user.js'
	export default {
		data() {
			return {
				form: {
					password: '',
					newPassword: '',
					reNewPassword: ''
				},
			}
		},
		methods: {
			submit() {
				const { form } = this
				const { password, newPassword, reNewPassword } = form
				if(!password) return this.$util.errMsg('请输入旧密码')
				if(!newPassword) return this.$util.errMsg('请输入新密码')
				if(!reNewPassword) return this.$util.errMsg('请确认新密码')
				if(newPassword.length < 6 || reNewPassword.length < 6) return this.$util.errMsg('请输入6位数以上的密码')
				if(newPassword !== reNewPassword) return this.$util.errMsg('输入的新密码不一致，请重新确认')
				if(password === newPassword) return this.$util.errMsg('旧密码跟新密码不能一致')
	
				form.accountId = uni.getStorageSync('team').accountId
				examinePassword(form).then(res => {
					this.$util.sucMsg('修改成功！')
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}).catch(e => {})
			}
		}
	}
</script>

<style scoped lang="scss">
.page {
	min-height: 100%;
	padding: 20px;
	background-color: #fff;
	box-sizing: border-box;
	.line {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		margin-bottom: 10rpx;
		&:not(.not-bd) {
			border-bottom: 1px solid #f3f3f3;
		}
	}
	.label {
		width: 200rpx;
		font-size: 28rpx;
		color: #565656;
	}
	input {
		font-size: 28rpx;
		color: #333;
	}
	.btn {
		width: 300rpx;
		height: 60rpx;
		margin: 50rpx auto 0;
		font-size: 30rpx;
		text-align: center;
		color: #fff;
		line-height: 60rpx;
		background-color: #007EFF;
		border-radius: 40rpx;
	}
}
</style>