dtScreen/src/components/ui/ChangePassword.vue

<template>
  <div class="change-password-panel">
    <form @submit.prevent="onSubmit" class="password-form">
      
      <div class="form-group">
        <label>原密码</label>
        <input 
          type="password" 
          v-model="form.oldPassword" 
          placeholder="请输入原密码" 
          required 
          class="tech-input"
        />
      </div>

      <div class="form-group">
        <label>新密码</label>
        <input 
          type="password" 
          v-model="form.newPassword" 
          placeholder="请输入新密码 (至少6位)" 
          required 
          minlength="6"
          class="tech-input"
        />
      </div>

      <div class="form-group">
        <label>确认新密码</label>
        <input 
          type="password" 
          v-model="form.confirmPassword" 
          placeholder="请再次输入新密码" 
          required 
          class="tech-input"
        />
        <span v-if="passwordMismatch" class="error-msg">两次输入的新密码不一致</span>
      </div>

      <div class="button-group">
        <button type="button" class="btn btn-cancel" @click="onCancel">取消</button>
        <button type="submit" class="btn btn-confirm" :disabled="passwordMismatch">确认修改</button>
      </div>

    </form>
  </div>
</template>

<script>
export default {
  name: 'ChangePassword',
  props: {
    onSuccess: {
      type: Function,
      default: null
    },
    onCancel: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      form: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    }
  },
  computed: {
    // 实时校验两次新密码是否一致
    passwordMismatch() {
      if (!this.form.newPassword || !this.form.confirmPassword) return false;
      return this.form.newPassword !== this.form.confirmPassword;
    }
  },
  methods: {
    onSubmit() {
      if (this.passwordMismatch) return;
      
      // 在这里派发事件或者调用 API
      console.log('提交的密码表单:', this.form);
      
      // 直接调用传进来的 onSuccess 函数
      if (typeof this.onSuccess === 'function') {
        this.onSuccess(this.form);
      }
    },
    handleCancel() {
      // 直接调用传进来的 onCancel 函数
      if (typeof this.onCancel === 'function') {
        this.onCancel();
      }
    }
  }
}
</script>

<style scoped>
.change-password-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
}

.password-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.form-group label {
  color: #e2e8f0;
  font-size: 14px;
  letter-spacing: 1px;
}

/* 科技风输入框 */
.tech-input {
  width: 100%;
  height: 38px;
  background-color: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(161, 190, 255, 0.4);
  border-radius: 4px;
  padding: 0 12px;
  color: #ffffff;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.tech-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.tech-input:focus {
  border-color: #3b74ff;
  box-shadow: 0 0 8px rgba(59, 116, 255, 0.5);
  background-color: rgba(0, 0, 0, 0.4);
}

.error-msg {
  position: absolute;
  bottom: -18px;
  left: 0;
  color: #ff4d4f;
  font-size: 12px;
}

/* ================= 按钮样式 ================= */
.button-group {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.btn {
  height: 36px;
  padding: 0 24px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  outline: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-cancel {
  background-color: transparent;
  color: #d1d5db;
  border: 1px solid rgba(130, 150, 190, 0.4);
}

.btn-cancel:hover:not(:disabled) {
  color: #ffffff;
  border-color: rgba(130, 150, 190, 0.8);
  background-color: rgba(255, 255, 255, 0.05);
}

.btn-confirm {
  background-color: #3b74ff;
  color: #ffffff;
}

.btn-confirm:hover:not(:disabled) {
  background-color: #5a8bff;
  box-shadow: 0 2px 8px rgba(59, 116, 255, 0.3);
}
</style>