1

admin

2026-01-06 089bf5d2378b3c4a61d795b2a92bede2c193b771

 src/components/user/UserEditPassword.vue

New file
@@ -0,0 +1,166 @@
<template>
  <!-- 用户密码修改组件 -->
  <div class="lum-dialog-mask" v-show="isShow">
    <el-container class="lum-dialog-box">
      <el-header class="header" height="50px">
        <p>修改密码</p>
        <p class="tools">
          <i class="el-icon-close" @click="close" />
        </p>
      </el-header>
      <el-main class="main">
        <el-form ref="form" :model="form" :rules="rules" label-position="top" >
          <el-form-item prop="old_password" label="旧密码">
            <el-input
              v-model="form.old_password"
              class="cuborder-radius no-border"
              type="password"
              size="medium"
              placeholder="请填写旧密码"
              @keyup.enter.native="onSubmit('form')"
            />
          </el-form-item>
          <el-form-item prop="new_password" label="新密码">
            <el-input
              v-model="form.new_password"
              class="cuborder-radius no-border"
              type="password"
              size="medium"
              placeholder="请填写新的密码"
              @keyup.enter.native="onSubmit('form')"
            />
          </el-form-item>
          <el-form-item prop="new_password2" label="重复密码">
            <el-input
              v-model="form.new_password2"
              class="cuborder-radius no-border"
              size="medium"
              type="password"
              placeholder="请再次填写新密码"
              @keyup.enter.native="onSubmit('form')"
            />
          </el-form-item>
          <el-form-item style="margin-top: 40px">
            <el-button
              class="submit-btn"
              type="primary"
              size="medium"
              :loading="loading"
              @click="onSubmit('form')"
              >提交
            </el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { ServeUpdatePassword } from '@/api/user'

export default {
  name: 'UserEditPassword',
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.new_password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

    return {
      loading: false,
      form: {
        old_password: '',
        new_password: '',
        new_password2: '',
      },
      rules: {
        old_password: [
          {
            required: true,
            message: '旧密码不能为空!',
            trigger: 'blur',
          },
        ],
        new_password: [
          {
            required: true,
            message: '新密码不能为空!',
            trigger: 'blur',
          },
        ],
        new_password2: [
          {
            required: true,
            validator: validatePass2,
            trigger: 'blur',
          },
        ],
      },

      isShow: false,
    }
  },
  methods: {
    // 显示窗口
    open() {
      this.$refs['form'].resetFields()
      this.isShow = true
    },

    // 关闭窗口
    close() {
      this.isShow = false
    },

    // 表单验证
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) return false
        this.changePassword()
      })
    },

    // 提交修改手机号
    changePassword() {
      this.loading = true
      ServeUpdatePassword({
        old_password: this.form.old_password,
        new_password: this.form.new_password,
      })
        .then(res => {
          if (res.code == 200) {
            this.$refs['form'].resetFields()
            this.$notify({
              title: '成功',
              message: '密码修改成功...',
              type: 'success',
            })
          } else {
            this.$message(res.message)
          }

          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
  },
}
</script>
<style lang="less" scoped>
.lum-dialog-box {
  width: 450px;
  max-width: 450px;
}

/deep/.el-form--label-top .el-form-item__label{
  padding: 0;
  line-height: 30px;
}
</style>