front-end/jdApp/src/admin/setting/password.vue

<template>
  <div class="app-content">
    <!-- tabs -->
    <div class="tabs-wrap">
      <button
        class="admin-button-com"
        :class="[tabIndex == 1? 'blue' : '']"
        @click="changeTab(1)"
      >密码设置</button>
      <button
        class="admin-button-com"
        :class="[tabIndex == 2? 'blue' : '']"
        @click="changeTab(2)"
      >确认密码设置</button>
    </div>
    <!-- 输入框 - block -->
    <form @submit="formSubmit">
      <div class="input-line-wrap">
        <tui-list-cell class="line-cell">
          <div class="tui-title">帐号</div>
          <div class="tui-title">{{selfInfo.id}}</div>
        </tui-list-cell>
        <tui-list-cell class="line-cell" :hover="false" v-if="isOldPass">
          <div class="tui-title">旧密码</div>
          <input
            placeholder-class="phcolor"
            v-model="form.old"
            class="tui-input"
            name="old"
            placeholder="请输入旧密码"
            maxlength="50"
            type="password"
          />
        </tui-list-cell>
        <tui-list-cell class="line-cell" :hover="false">
          <div class="tui-title">密码</div>
          <input
            placeholder-class="phcolor"
            v-model="form.new"
            class="tui-input"
            name="new"
            placeholder="请输入确认密码"
            maxlength="50"
            type="password"
          />
        </tui-list-cell>
        <tui-list-cell class="line-cell" :hover="false">
          <div class="tui-title">确认密码</div>
          <input
            placeholder-class="phcolor"
            v-model="form.confirm"
            class="tui-input"
            name="confirm"
            placeholder="请输入确认密码"
            maxlength="50"
            type="password"
          />
        </tui-list-cell>
        <div class="btn-wrap">
          <button class="admin-button-com blue big" formType="submit">提交</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import TuiListCell from "@/components/plugin/list-cell";
const form = require("@/utils/formValidation.js");
import { getSelfInfo } from "@/utils/auth";
import { updatePassword, updateConfirmPassword } from "@/api/login";
export default {
  name: "password-setting",
  components: {
    TuiListCell
  },
  data() {
    return {
      tabIndex: 1,
      form: {
        old: "",
        new: "",
        confirm: ""
      },
      old: [
        {
          name: "old",
          rule: ["required"],
          msg: ["请输入旧密码"]
        }
      ],
      rules: [
        {
          name: "new",
          rule: ["required"],
          msg: ["请输入新密码"]
        },
        {
          name: "confirm",
          rule: ["required"],
          msg: ["请输入确认密码"]
        }
      ]
    };
  },
  computed: {
    ...mapGetters({ selfInfo: "getSelfInfo" }),
    isOldPass() {
      let status = this.selfInfo
        ? this.tabIndex == 1
          ? this.selfInfo.password
          : this.selfInfo.confirmPassword
        : false;
      return !!status;
    }
  },
  onLoad() {
    getSelfInfo().then(res => {});
  },
  methods: {
    changeTab(index) {
      this.tabIndex = index;
      this.form = {
        old: "",
        new: "",
        confirm: ""
      };
    },
    confirmFn() {
      if (!this.isOldPass) {
        delete this.form.old;
      }
      let hostFn = this.tabIndex == 1 ? updatePassword : updateConfirmPassword;
      hostFn(this.form).then(res => {
        this.$msg("修改成功！");
        this.$util.pageTo({
          url: "/admin/home/workbench",
          type: 4
        });
      });
    },
    // 表单验证
    formSubmit(e) {
      // 表单规则
      let rules = this.isOldPass ? [...this.old, ...this.rules] : this.rules;
      // 进行表单检查
      let formData = e.detail.value;
      let checkRes = form.validation(formData, rules);
      // 验证通过!
      if (!checkRes) {
        this.confirmFn();
      } else {
        this.$msg(checkRes);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.tabs-wrap {
  width: calc(100% - 60upx);
  padding: 20upx 30upx;
  .admin-button-com {
    width: 50%;
    padding-top: 16upx;
    padding-bottom: 16upx;
    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
}
// 按钮
.btn-wrap {
  width: calc(100% - 60upx);
  margin: 60upx 30upx 0;
  .admin-button-com {
    width: 100%;
    margin: 0 auto;
  }
}
</style>