user.vue

<template>
  <div id="user_wrapper">
    <el-card class="box-card" id="user" shadow="hover" style="width: 30%">
      <div slot="header" style="text-align: center" class="clearfix">
        <span style="font-size: 24px; color: #eff0dc">修改密码</span>
      </div>

      <el-form
        ref="password_form"
        :model="password_form"
        :rules="password_form_rules"
        label-width="60px"
        label-position="top"
      >
        <el-form-item prop="odd_password">
          <el-input
            :type="odd_password_type"
            v-model="password_form.odd_password"
            auto-complete="off"
          >
            <template slot="prepend">原密码</template>
            <el-button
              class="append_button"
              slot="append"
              :icon="odd_password_view"
              @click="show_odd_password"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="new_password">
          <el-input
            :type="new_password_type"
            v-model="password_form.new_password"
            auto-complete="off"
          >
            <template slot="prepend">新密码</template>
            <el-button
              class="append_button"
              slot="append"
              :icon="new_password_view"
              @click="show_new_password"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="check_password">
          <el-input
            :type="new_password_type"
            v-model="password_form.check_password"
            auto-complete="off"
          >
            <template slot="prepend">新密码</template>
            <el-button
              class="append_button"
              slot="append"
              :icon="new_password_view"
              @click="show_new_password"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button-group>
            <el-button type="primary" @click="submitForm('password_form')"
              >提交</el-button
            >
            <el-button type="warning" @click="resetForm('password_form')"
              >重置</el-button
            >
          </el-button-group>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" id="user" shadow="hover" style="width: 30%">
      <div slot="header" style="text-align: center" class="clearfix">
        <span style="font-size: 24px; color: #eff0dc">主题颜色</span>
      </div>
      <el-radio-group v-model="color" @change="change_color">
        <el-row style="padding-bottom: 1px">
          <el-radio-button label="天空蓝"></el-radio-button>
          <el-radio-button label="梦幻紫"></el-radio-button>
          <el-radio-button label="活力橙"></el-radio-button>
        </el-row>
        <el-row>
          <el-radio-button label="柠檬绿"></el-radio-button>
          <el-radio-button label="灰灰灰"></el-radio-button>
          <el-radio-button label="小清新"></el-radio-button>
        </el-row>
      </el-radio-group>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "user",
  data() {
    return {
      color: "天空蓝",
      new_password_type: "password",
      odd_password_type: "password",
      new_password_view: "icon i-password-not-view",
      odd_password_view: "icon i-password-not-view",
      rtoken: "",
      user_unid: "",
      auth_base_url: this.$disparch_data.auth_base_url,
      password_form: {
        odd_password: "",
        new_password: "",
        check_password: "",
      },
      password_form_rules: {
        odd_password: {
          required: true,
          message: "请填写旧密码",
          trigger: "blur",
        },
        new_password: [
          {
            pattern: /^[A-Za-z0-9\x20-\x7f]{6,16}$/,
            message: "密码至少6位，至多16位",
            trigger: "blur",
          },
          {
            required: true,
            message: "必须填写新密码",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value == this.password_form.odd_password) {
                callback(new Error("新密码不能和旧密码相同"));
              } else callback();
            },
            trigger: "blur",
          },
        ],
        check_password: [
          {
            pattern: /^[A-Za-z0-9\x20-\x7f]{6,16}$/,
            message: "密码至少6位,至多16位",
            trigger: "blur",
          },
          {
            required: true,
            message: "必须填写新密码",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value != this.password_form.new_password) {
                callback(new Error("两次输入不一致"));
              } else callback();
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    change_color() {
      var backgroundColor = "none";
      var backgroundImage = "none";
      switch (this.color) {
        case "天空蓝":
          backgroundColor = "lightblue";
          break;
        case "梦幻紫":
          backgroundColor = "#8ec5fc";
          backgroundImage = "linear-gradient(225deg, #8ec5fc 0%, #e0c3fc 100%)";
          break;
        case "活力橙":
          backgroundColor = "#FBAB7E";
          backgroundImage = "linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)";
          break;
        case "柠檬绿":
          backgroundColor = "#F4D03F";
          backgroundImage = "linear-gradient(71deg, #F4D03F 0%, #16a046 92%)";
          break;
        case "灰灰灰":
          backgroundColor = "#f0f0f0";
          break;
        case "小清新":
          backgroundColor = "#FFDEE9";
          backgroundImage = "linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%)";
          break;
      }
      let main = document.getElementsByClassName("el-main")[0];
      main.style["background-color"] = backgroundColor;
      main.style.backgroundImage = backgroundImage;
      localStorage.setItem("color", this.color);
      this.$router.go(0);
    },

    show_odd_password() {
      if (this.odd_password_type == "password") {
        this.odd_password_type = "text";
        this.odd_password_view = "icon i-password-view";
      } else {
        this.odd_password_type = "password";
        this.odd_password_view = "icon i-password-not-view";
      }
    },
    show_new_password() {
      if (this.new_password_type == "password") {
        this.new_password_type = "text";
        this.new_password_view = "icon i-password-view";
      } else {
        this.new_password_type = "password";
        this.new_password_view = "icon i-password-not-view";
      }
    },
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.$Axios({
            method: "post",
            url: this.auth_base_url + "users/" + this.user_unid + "/password",
            headers: { authorization: this.rtoken },
            data: {
              old_pwd: this.password_form.odd_password,
              new_pwd: this.password_form.new_password,
            },
          })
            .then((response) => {
              if (response.data.user_unid) {
                this.$message({
                  type: "success",
                  message: "修改成功",
                });
                this.resetForm("password_form");
              }
            })
            .catch((err) => {
              this.$message.error("修改失败");
              this.resetForm("password_form");
            });
        }
      });
    },
    resetForm(form) {
      this.$refs[form].resetFields();
    },
  },
  created() {
    if (!sessionStorage.getItem("user_unid")) {
      this.$router.push("/");
    } else {
      this.rtoken = sessionStorage.getItem("rtoken");
      this.user_unid = sessionStorage.getItem("user_unid");
    }

    if (localStorage.getItem("color")) {
      this.color = localStorage.getItem("color");
    }
  },
};
</script>


<style scoped>
#user_wrapper {
  width: 100%;
  height: 100%;
}
#user >>> label {
  color: black;
}
#user_wrapper >>> .el-card {
  /* float: left; */
  /* display: inline-block; */
  background-color: rgba(0, 0, 0, 0);
}
#user >>> .el-card__body {
  background-color: rgba(0, 0, 0, 0);
}
#user >>> input {
  border-color: black;
  color: black;
  background-color: rgba(0, 0, 0, 0);
}
#user >>> .el-card__header {
  background-color: #34352c;
}
#user >>> .el-input-group__prepend {
  border-color: black;
  color: black;
  /* background-color: lightgray; */
  background-color: rgba(0, 0, 0, 0);
}
#user >>> .el-input-group__append {
  color: black;
  border-color: black;
  background-color: rgba(0, 0, 0, 0);
}
#user >>> .el-radio-button__inner {
  border-color: black;
  background-color: rgba(0, 0, 0, 0);
}
</style>