shuju_ui/qs_zhaoshang/pages/mine/pwd/index.vue

<template>
<view class="info">
  	  <view class='zhanline'></view>
  	<uni-forms class="pl12" ref="form" :value="user">
		<uni-forms-item name="oldPassword" style='margin-bottom: 0;'>
		  <view class="flexc infolist">
		  	<view class="f16 fw c34 flex0">旧密码</view>
		  	<input  placeholder="请输入旧密码" v-if="oldcheckeye" type="text" v-model="user.oldPassword" class="f16  c34 flex1 txr"/>
		  	<input  placeholder="请输入旧密码" v-else type="password" v-model="user.oldPassword" class="f16  c34 flex1 txr"/>
		  	<view class="input_ye ml8" v-if="user.oldPassword" @click="oldcheckeye=!oldcheckeye">
		  		<image :src="yeimgs" v-if="oldcheckeye"></image>
		  		<image :src="yeimg" v-else></image>
		  	</view>
		  </view>
		</uni-forms-item>
		<uni-forms-item name="newPassword" style='margin-bottom: 0;'>
		  <view class="flexc infolist">
		  	<view class="f16 fw c34 flex0">新密码</view>
		  	<input  placeholder="请输入新密码" v-if="newcheckeye" type="text" v-model="user.newPassword" class="f16  c34 flex1 txr"/>
		  	<input  placeholder="请输入新密码" v-else type="password" v-model="user.newPassword" class="f16  c34 flex1 txr"/>
		  	<view class="input_ye ml8" v-if="user.newPassword" @click="newcheckeye=!newcheckeye">
		  		<image :src="yeimgs" v-if="newcheckeye"></image>
		  		<image :src="yeimg" v-else></image>
		  	</view>
		  </view>
		</uni-forms-item>
  		<uni-forms-item name="confirmPassword" style='margin-bottom: 0;'>
  		  <view class="flexc infolist">
  		  	<view class="f16 fw c34 flex0">再次确认新密码</view>
  		  	<input  placeholder="请再次输入新密码" v-if="concheckeye" type="text" v-model="user.confirmPassword" class="f16  c34 flex1 txr"/>
  		  	<input  placeholder="请再次输入新密码" v-else type="password" v-model="user.confirmPassword" class="f16  c34 flex1 txr"/>
  		  	<view class="input_ye ml8" v-if="user.confirmPassword" @click="concheckeye=!concheckeye">
  		  		<image :src="yeimgs" v-if="concheckeye"></image>
  		  		<image :src="yeimg" v-else></image>
  		  	</view>
  		  </view>
  		</uni-forms-item>
		<view class="infobtn flexcc cf f16 mt60 f500" @click="submit">确认修改</view>
  	</uni-forms>
  
  </view>
</template>

<script>
  import { updateUserPwd } from "@/api/system/user"

  export default {
    data() {
      return {
		yeimg:require("@/static/images/mine/nyea.png"),
		yeimgs:require("@/static/images/mine/yea.png"),
		newcheckeye:false,
		concheckeye:false,
		oldcheckeye:false,
        user: {
          oldPassword: undefined,
          newPassword: undefined,
          confirmPassword: undefined
        },
        rules: {
          oldPassword: {
            rules: [{
              required: true,
              errorMessage: '旧密码不能为空'
            }]
          },
          newPassword: {
            rules: [{
                required: true,
                errorMessage: '新密码不能为空',
              },
              {
                minLength: 6,
                maxLength: 20,
                errorMessage: '长度在 6 到 20 个字符'
              }
            ]
          },
          confirmPassword: {
            rules: [{
                required: true,
                errorMessage: '确认密码不能为空'
              }, {
                validateFunction: (rule, value, data) => data.newPassword === value,
                errorMessage: '两次输入的密码不一致'
              }
            ]
          }
        }
      }
    },
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
    methods: {
      submit() {
		  var that=this;
        this.$refs.form.validate().then(res => {
			// this.user.oldPassword, 
          updateUserPwd(this.user.oldPassword,this.user.newPassword).then(response => {
            this.$toast("修改成功")
			setTimeout(function(){
				that.$tab.reLaunch('/pages/mine/index')
			},1500)
          })
        })
      }
    }
  }
</script>

<style lang="scss">
 page {
    background-color: #ffffff;
  }
  .infolist{border-bottom: 2rpx solid #E5E5E5;padding: 40rpx 0;padding-right: 24rpx;}
  .infobtn{width: 700rpx;height: 88rpx;background: #FA5F03;border-radius:10rpx;line-height: 88rpx;}
  .input_ye image{width: 34rpx;height: 18rpx;}
</style>