Ci2Order.vue/App/pages/center/setting/modifypass.vue

<template>
	<view>
		<z-navbar title="修改密码" back></z-navbar>
		<z-card width="630" class="mt-30 flex-n fac step_area">
			<view class="step_area_item flex-n fac">
				<view class="step_area_num" :class="step==0?'step_area_num_choose':''">1</view>
				<view class="step_area_text" :class="step==0?'step_area_text_choose':''">验证原密码</view>
			</view>
			<view class="line flex-1 mlr-20"></view>
			<view class="step_area_item flex-n fac">
				<view class="step_area_num" :class="step==1?'step_area_num_choose':''">2</view>
				<view class="step_area_text" :class="step==1?'step_area_text_choose':''">设置新密码</view>
			</view>
		</z-card>
		<template v-if="step==0">
			<view class="toast_area mlr-30">为保障您的账号安全，修改密码前请填写原密码</view>
			<z-card>
				<view class="mlr-40 card_area">
					<view class="flex-n fac card_area_item">
						<view class="card_icon   iconfont iconsuotou"></view>
						<z-input class="ml-19 flex-1" type="password"  align="left" v-model="oldPass" placeholder="请输入原登录密码"></z-input>
					</view>
				</view>
			</z-card>
			<z-button class="mt-50" @click="nextStep">下一步</z-button>
			<view class="mt-30 forget_pass" @click="gotoForgetPage">忘记原密码</view>
		</template>
		<template v-else>
			<z-card class="mt-40">
				<view class="mlr-40 card_area">
					<view class="flex-n fac card_area_item">
						<view class="card_icon   iconfont iconsuotou"></view>
						<z-input class="ml-19 flex-1" type="password"  align="left" v-model="newPass" placeholder="请设置6-20位新的登录密码"></z-input>
					</view>
					<view class="line"></view>
					<view class="flex-n fac card_area_item">
						<view class="card_icon   iconfont iconsuotou"></view>
						<z-input class="ml-19 flex-1" type="password"  align="left" v-model="newPassRepeat" placeholder="请再次输入新的登录密码"></z-input>
					</view>
				</view>

			</z-card>
			<z-button class="mt-50" @click="submit">提 交</z-button>
		</template>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//入参
				oldPass:'',
				
				newPass:'',
				newPassRepeat:'',
				
				step: 0
			}
		},
		methods:{
			//下一步
			nextStep() {
				this.$axios.post('app/user/verifyOldPassword', {
					"passWord": this.oldPass,
				}).then(res => {
					this.step = 1;
				}).catch(err => {
					this.$refs.uToast.error(err.msg);
				})
			},
			//忘记密码
			gotoForgetPage(){
				uni.navigateTo({
					url: './forgetpass',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			submit(){
				if(this.newPass==''||this.newPass.length<6||this.newPass.length>20){
					return this.$refs.uToast.error('请输入6-20位新的登录密码');
				}
				if(this.newPassRepeat==''){
					return this.$refs.uToast.error('请再次输入新的登录密码');
				}
				if(this.newPass!=this.newPassRepeat){
					return this.$refs.uToast.error('两次输入的登录密码不同');
				}
				this.$axios.post('app/user/updatePassword', {
					"passWord": this.newPass
				}).then(res => {
					// this.$refs.uToast.success('密码修改成功,请在登录页重新登录');
					uni.showToast({
					  title:'密码修改成功,请在登录页重新登录,正在跳转……',
					  icon: 'none',
					  duration: 2000,
					  success() {
					  	uni.reLaunch({
					  	    url: '../../login/oldlogin'
					  	});
					  }
					})
					
				}).catch(err => {
					this.$refs.uToast.error(err.msg);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.step_area {
		padding: 24rpx 30rpx;

		.step_area_item {

			.step_area_num {
				width: 54rpx;
				height: 54rpx;
				border: 1px solid #999999;
				border-radius: 50%;
				text-align: center;
				line-height: 54rpx;
				color: #999999;
				font-size: 30rpx;
			}

			.step_area_num_choose {
				background: #2481EE;
				color: white;
				border:1px solid #2481EE;
			}

			.step_area_text_choose {
				color: #2481EE !important;
			}

			.step_area_text {
				color: #999999;
				font-size: 30rpx;
				margin-left: 25rpx;
			}
		}
	}

	.toast_area {
		font-size: 24rpx;
		color: #666666;
		line-height: 90rpx;
	}

	.card_area {
		.card_area_item {
			height: 100rpx;
		}

	.card_icon {
		font-size: 40rpx;
		min-width: 40rpx;
		color: gray;
	}

		.card_send_message {
			font-size: 28rpx;
			color: #2481EE;
		}
	}
	.forget_pass{
		font-size: 28rpx;
		color: #2481EE;
		line-height: 60rpx;
		margin: 0 auto;
		width: fit-content;
	}
</style>