zhangzengfei
2021-11-17 5186227a467bd34dc253e64b23bc96d3a07bb399
src/layouts/components/VabAvatar/index.vue
@@ -10,51 +10,159 @@
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="password" divided>修改密码</el-dropdown-item>
      <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
    </el-dropdown-menu>
    <el-dialog
      title="修改密码"
      :visible.sync="dialogVisible"
      width="25%"
      :modal="false"
      :close-on-click-modal="false"
      destroy-on-close
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input
            v-model.trim="form.oldPassword"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model.trim="form.newPassword"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model.trim="form.confirmPassword"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="resetPassword">确 定</el-button>
      </span>
    </el-dialog>
  </el-dropdown>
</template>
<script>
import { mapGetters } from 'vuex'
import { recordRoute } from '@/config'
import { mapGetters } from "vuex";
import { recordRoute } from "@/config";
import { updatePassword } from "@/api/user";
export default {
  name: 'VabAvatar',
  name: "VabAvatar",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value.length < 6) {
        callback(new Error("请输入6位以上密码"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      form: {},
      rules: {
        oldPassword: [
          {
            required: true,
            trigger: "blur",
            message: "原密码不能为空",
          },
        ],
        newPassword: [
          {
            validator: validatePass,
            required: true,
            trigger: "blur",
          },
        ],
        confirmPassword: [
          {
            validator: validatePass2,
            required: true,
            trigger: "blur",
          },
        ],
      },
      dialogVisible: false,
    };
  },
  computed: {
    ...mapGetters({
      avatar: 'user/avatar',
      username: 'user/username',
      avatar: "user/avatar",
      username: "user/username",
      userId: "user/userId",
    }),
  },
  methods: {
    handleCommand(command) {
      switch (command) {
        case 'logout':
          this.logout()
          break
        case "logout":
          this.logout();
          break;
        case "password":
          this.dialogVisible = true;
          this.form = {};
          break;
      }
    },
    personalCenter() {
      this.$router.push('/personalCenter/personalCenter')
    },
    logout() {
      this.$baseConfirm(
        '您确定要退出' + this.$baseTitle + '吗?',
        "您确定要退出" + this.$baseTitle + "吗?",
        null,
        async () => {
          await this.$store.dispatch('user/logout')
          await this.$store.dispatch("user/logout");
          if (recordRoute) {
            const fullPath = this.$route.fullPath
            this.$router.push(`/login?redirect=${fullPath}`)
            const fullPath = this.$route.fullPath;
            this.$router.push(`/login?redirect=${fullPath}`);
          } else {
            this.$router.push('/login')
            this.$router.push("/login");
          }
        }
      )
      );
    },
    resetPassword() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          let rsp = await updatePassword(this.userId, {
            oldPassword: this.form.oldPassword,
            newPassword: this.form.newPassword,
          });
          if (rsp && rsp.success) {
            this.$baseMessage(rsp.msg, "success");
            this.$refs["form"].resetFields();
            this.dialogVisible = false;
          }
        }
      });
    },
    handleClose() {
      console.log("close");
      this.$refs["form"].resetFields();
    },
  },
}
};
</script>
<style lang="scss" scoped>
.avatar-dropdown {