<template> <view class="container"> <view class="content"> <view class="tishi">请先输入原密码,再按步骤操作</view> <view class="input-group"> <view class="input-row border"> <text class="title">原密码:</text> <m-input class="m-input" :maxlength="12" type="password" displayable v-model="formCustom.oldPwd" placeholder="请输入原密码"></m-input> </view> <view class="input-row"> <text class="title">新密码:</text> <m-input class="m-input" :maxlength="12" type="password" displayable v-model="formCustom.passwd" placeholder="请输入6-12位新密码"></m-input> </view> <view class="input-row"> <text class="title">再次输入:</text> <m-input class="m-input" :maxlength="12" type="password" displayable v-model="formCustom.passwdCheck" placeholder="请输入6-12位新密码"></m-input> </view> </view> </view> <!-- 消息提醒弹窗 --> <view class="form-footer-btn"> <button @click="handleReset" type="info"> 重置 </button> <button @click="handleSubmit" :style="{background: $config('buttonColors')}" :loading="loading" type="primary"> 保存 </button> </view> </view> </template> <script> import mInput from '../../components/m-input.vue' import { changePwd, logout } from '@/api/user.js' export default{ name:'changePwd', components: { mInput }, data(){ return{ formCustom: { passwd: '', passwdCheck: '', oldPwd: '' }, loading: false } }, methods:{ messageInfo(info){ uni.showToast({ icon:'none', title: info }) }, handleSubmit(){ let _this = this //非空判断密码长度判断 if (this.formCustom.oldPwd === '') { this.messageInfo("请输入原密码") return } if (this.formCustom.passwd === '') { this.messageInfo("请输入新密码") return } if (this.formCustom.passwd.length < 6) { this.messageInfo("新密码最少6位") return } if (this.formCustom.passwdCheck === '') { this.messageInfo("请再次输入新密码") return } if (this.formCustom.passwdCheck.length < 6) { this.messageInfo("再次输入新密码最少6位") return } if (this.formCustom.passwdCheck !== this.formCustom.passwd) { this.messageInfo("再次输入的密码和新密码不一样") return } // 保存 this.loading = true changePwd({ oldPassword: this.formCustom.oldPwd, password: this.formCustom.passwd }).then(res => { if (res.status == '200') { this.messageInfo('修改成功, 请重新登录') setTimeout(function(){ _this.logout() },800) } else { this.messageInfo(res.message) this.loading = false } }) }, logout(){ logout().then(res => { console.log(res) this.messageInfo(res.message) if(res.status == 200){ this.$store.commit("$closeWebsocket") this.$store.state.vuex_token = '' this.$store.state.vuex_userData = '' uni.setStorageSync('setStatusIndexFunc', 0) uni.reLaunch({ url: "/pages/login/login" }) } this.loading = false }) }, handleReset (name) { this.formCustom = { passwd: '', passwdCheck: '', oldPwd: '' } } } } </script> <style lang="less"> page{ background: #FFFFFF; } .container{ font-size: 28rpx; padding: 20rpx 40rpx ; .content{ .tishi{ text-align: center; line-height: 130rpx; font-size: 30rpx; color: #999; } .input-group{ margin-top:20rpx; } .input-row{ padding: 10rpx 20rpx; background-color: #F8F8F8; margin-bottom: 20rpx; border-radius: 10rpx; line-height: 32px; display: flex; .title{ width:140rpx; display: inline-block; text-align: left; color:#808080; } } .uni-input-placeholder{ font-size: 26rpx; color:#989898; } } .u-size-default[data-v-1f520a08]{ height: 92rpx; } .m-input-input[data-v-5a85b703]{ position: relative; bottom: 4rpx; } .m-input-icon[data-v-5a85b703]{ position: relative; bottom: 10rpx; } } </style>