smart-app/pages/user/password/password.vue

<template>
	<view class="box">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">修改登录密码</block>
			<block slot="content"></block>
			<block slot="right">
				<view class=" flex justify-center">
				 	<!-- <button  class="margin-top-ssm cu-btn round bg-blue text-blue"><text class="cuIcon-add"></text></button> -->
				</view>
			</block>
		</cu-custom>	
		<view class="cu-list menu  shadow-lg">
			<form>
				<!-- <view class="cu-form-group">
					<view class="title">登录账号</view>
					<input :value="account" name="input" disabled=""></input>
				</view> -->
				<view class="cu-form-group_1">
					<view class="title">原密码</view>
					<input placeholder="请输入原密码" placeholder-style="color:#AEAEAE;font-size:30rpx" password="true" v-model="oldPassword"  name="input"></input>
				</view>
				<view class="cu-form-group_1 cu-form-group_2">
					<view class="title">新密码</view>
					<input placeholder="请输入新密码" placeholder-style="color:#AEAEAE;font-size:30rpx" @input="newPasswordConfig" password="true" v-model="newPassword" name="input"></input>
				</view>
				<view class="cu-form-group_1">
					<view class="title">确认密码</view>
					<input placeholder="请再输入一次新密码" placeholder-style="color:#AEAEAE;font-size:30rpx" @input="confirmPassword" v-model="confirmNewPwd" password="true" name="input"></input>
				    <image v-if="reslut" src="/static/index/unfill-blue.png" class="menuImageTask"></image>
				</view>
			</form>
		</view>
		<view style="padding-top: 62rpx;text-align: center;">
		 	<button @click="submit" style="width: 560rpx;height: 88rpx;font-size: 32rpx;" class="cu-btn bg-blue lg round"  >提交</button>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				account:"",
				oldPassword:"",
				newPassword:"",
				confirmNewPwd:"",
				reslut:false,
				userInfo:"",
			}
		},
		onLoad() {
			var userInfo = uni.getStorageSync("userInfo")
			if(userInfo!=null){
			    this.account = userInfo.account;
				this.userInfo =userInfo;
			}
		},
		methods: {
			confirmPassword(e){
				if(e.detail.value){
					if(e.detail.value==this.newPassword){
						this.reslut=true;
					}else{
						this.reslut=false;
					}
				}
			},
			newPasswordConfig(e){
				if(e.detail.value){
					if(e.detail.value==this.confirmNewPwd){
						this.reslut=true;
					}else{
						this.reslut=false;
					}
				}
				
			},
			submit(){
				var that =this;

				if(that.oldPassword.trim()==""){
					that.$prompt.none("请输入原密码");return;
				}
				if(that.newPassword.length<6 || that.newPassword.length>20){
					that.$prompt.none("请设置6-20位的新密码！");return;
					return;
				}else{
					if(that.reslut!=true){
						that.$prompt.none("两次输入的密码不一致");return;
					}
				}
				 that.http.request('/app/updatePassword', {  
					       userId:that.userInfo.id,
						   oldPassword:that.oldPassword,
						   newPwd:that.newPassword,
						   confirmNewPwd:that.confirmNewPwd,}).then((result)=>{
					     if(result.result=="1"){
					     		that.$prompt.none("修改成功，请重新登录")
								/* 清除缓存 */
								uni.removeStorageSync('porject');
								uni.removeStorageSync('userInfo');
					     		setTimeout(() => {
					     			uni.reLaunch({
					     				url:"/pages/user/login/login"
					     			})
					     		}, 500);					     							 						   
					     }else{
					     	 that.$prompt.none("原密码错误！")						
					     }
				 })
			}
		},
		
	}
</script>

<style>
  .menuImageTask{
  	height: 40rpx;
  	width: 40rpx;
  }
  .cu-form-group_1 {
  	display: flex;
  	align-items: center;
  	padding: 0 24rpx;
  	height: 88rpx;
  	background-color: #fff;
  }
  .cu-form-group_2{margin-top: 20rpx;border-bottom: 2rpx solid #E3E1E1;}
  .cu-form-group_1 .title {
  	width: 148rpx;
  	font-size: 30rpx;
  	color: #101010;
  }
  
  .cu-form-group_1 input {
  	width: 554rpx;
  	color: #8a8a8a;
  	font-size: 30rpx;
  }
</style>