123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188 |
- <template>
- <view class="changePwd-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="30" 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">
- <u-button size="medium" shape="circle" hover-class="none" @click="handleReset">重置</u-button>
- <u-button shape="circle" type="success" size="medium" hover-class="none" :loading="loading" :custom-style="{background:$config('primaryColor')}" @click="handleSubmit">保存</u-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;
- }
- .changePwd-container{
- width: 100%;
- 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;
- align-items: center;
- .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;
- }
- /deep/ .m-input-view{
- margin-top: 0;
- }
- .form-footer-btn{
- margin: 140upx 50upx 0;
- display: flex;
- justify-content: space-between;
- }
- .form-footer-btn uni-button{
- width: 50%;
- margin: 0 50upx;
- font-size: 30upx;
- }
- }
- </style>
|