iot-ui-app/pages/my/reset-password.vue

<template>
	<view id="reset-password">
		<view class="list-box">
			<view class="item">
				<view class="item-left">
					<image src="https://am-img.gkiiot.com/iotos/app/img/my/reset-password/account.png" mode="账号"></image>
					<text>账号</text>
				</view>
				<input type="text" disabled v-model="infoData.username" />
			</view>
			<view class="item">
				<view class="item-left">
					<image src="https://am-img.gkiiot.com/iotos/app/img/my/reset-password/old-password.png" mode="旧密码"></image>
					<text>旧密码</text>
				</view>
				<input type="password" v-model="oldPassword" placeholder="请输入旧的密码" />
			</view>
			<view class="item">
				<view class="item-left">
					<image src="https://am-img.gkiiot.com/iotos/app/img/my/reset-password/password.png" mode="新密码"></image>
					<text>新密码</text>
				</view>
				<input type="password" v-model="newPassword" placeholder="请输入新的密码" />
			</view>
			<view class="item">
				<view class="item-left">
					<image src="https://am-img.gkiiot.com/iotos/app/img/my/reset-password/password.png" mode="确认密码"></image>
					<text>确认密码</text>
				</view>
				<input type="password" v-model="confirmPassword" placeholder="请再次输入新密码"/>
			</view>
		</view>
		<view class="btn">
			<button type="default" @click="submit">确认提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoData:{},
				oldPassword:'',
				newPassword:'',
				confirmPassword:'',
			}
		},
		onLoad() {
			this.infoData = uni.getStorageSync('userInfo');
		},
		onShow() {

		},
		methods: {
			submit(){
				if(this.verification()){
					let params={
						// id:this.infoData.id,
						newPassword:this.newPassword,
						oldPassword:this.oldPassword,
					}
					this.$api.updatePwd(params).then(res => {
						console.log("submit",res);
						if(res.status == 200){
							this.$u.toast(res.message);
							this.$store.commit('setTokenKey', '');
							uni.$u.toast('退出登录成功');
							uni.removeStorageSync('token')
							uni.removeStorageSync('password')
							setTimeout(()=>{
								uni.reLaunch({
									url:"../tabbar/login"
								})
								return;
							},200)
						}else{
							this.$u.toast(res.message);
						}
					}, error => {
						this.$u.toast('服务器开小差了呢，请您稍后再试')
					})
				}
			},
			//	表单验证
			verification(){
				console.log(this.oldPassword)
				if(!this.oldPassword){
					this.$refs.uToast.show({
						title: '请输入旧密码!',
						type: 'error',
					})
					return false;
				}else if(!this.newPassword){
					this.$refs.uToast.show({
						title: '请输入新密码!',
						type: 'error',
					})
					return false;
				}else if(!this.confirmPassword){
					this.$refs.uToast.show({
						title: '请输入确认密码!',
						type: 'error',
					})
					return false;
				}else if(this.newPassword!=this.confirmPassword){
					this.$refs.uToast.show({
						title: '两次输入密码不同!',
						type: 'error',
					})
					return false;
				}else{
					return true;
				}
			}
		}
	}
</script>

<style scoped lang="less">
	#reset-password{
		.list-box{
			padding: 0 36rpx 0 45rpx;
			.item{
				height: 120rpx;
				border-bottom: 1px solid #E5E5E5;
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #222;
				.item-left{
					box-sizing: border-box;
					padding-left: 28rpx;
					width: 294rpx;
					display: flex;
					align-items: center;
					image{
						width: 33rpx;
						height: 33rpx;
						margin-right: 23rpx;
					}
				}
				input{
					flex: 1;
					font-size: 28rpx;
				}
				&:first-of-type{
					color: #666;
				}
			}
		}
	}
	.btn{
		display: flex;
		justify-content: center;
		height: 142rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		button{
			width: 690rpx;
			height: 90rpx;
			background: #3683FD;
			border-radius: 43rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>