51dj_admin/src/views/main/components/header.vue

<template>
  <el-header>
    <div class="logo-text">
      <img :src="logoImg" class="logoImg" />
      <span>51短剧后台管理系统</span>
    </div>
    <div class="header-btn">
      <el-select
        v-model="selectedLine"
        @change="lineChange"
        size="mini"
        placeholder="请选择线路"
      >
        <el-option
          v-for="(item, index) in $imgUrls"
          :key="index"
          :label="item.desc || `线路${index + 1}`"
          :value="index"
        >
        </el-option>
      </el-select>
      <el-button
        v-show="isShow"
        class="beilv"
        id="beilv"
        style="width:30px"
        type="text"
        @click="getValue()"
        >{{ expansionFactor }}</el-button
      >

      <span class="exit" @click="logout">退出</span>
      <span>
        您好！
        <i class="user-name">{{ userInfo ? userInfo.admin.name : "未知" }}</i
        >,欢迎登录
      </span>
    </div>
  </el-header>
</template>
<script>
// import API from '@/api'
import { mapActions, mapGetters } from "vuex";
import local from "@/utils/localStroage.js";
export default {
  name: "dg-header",
  data() {
    return {
      isShow: true,
      userName: "",
      logoImg: require("../../../assets/images/icon.webp"),
      selectedLine: 0,
    };
  },
  computed: {
    ...mapGetters(["expansionFactor"]),
    userInfo: () => {
      return local.get("userInfo");
    },
  },
  created() {
    // window.console.log(this.$store.state.beilv);
    // 从localStroage读取用户登录信息，存在则自动填充密码
    let _index = localStorage.getItem("overallSituationLine");
    if (_index) {
      this.selectedLine = Number(_index);
    }
  },
  methods: {
    ...mapActions(["setBeilv"]),
    lineChange(v) {
      this.$setOverallSituationLine(v);
    },
    getValue() {
      this.$prompt("请输倍率", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^\d+(\.\d+)?$/,
        inputErrorMessage: "请输入倍率不为负的数字",
      })
        .then(({ value }) => {
          this.setBeilv(value);
          this.isShow = false;
          this.$message({
            type: "success",
            message: "你的输入的倍率是: " + value,
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    // 点击退出
    logout() {
      this.$confirm("您确定要退出当前账户？", "退出提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.exit();
        })
        .catch(() => {});
    },
    // 登出
    exit() {
      local.remove("userInfo");
      local.remove("role");
      // this.$store.dispatch("refreshRouter");
      this.$store.dispatch("removeAllTag");
      this.$router.push({
        path: "/login",
      });

      // let params = {
      //   name: this.userInfo.name
      // }
      // API.logout(params).then(res => {
      //   if (res.code === 200) {
      //     local.remove('userInfo')
      //     this.$router.push({
      //       name: 'login'
      //     })
      //   } else {
      //     this.$message.error('登出失败')
      //   }
      // })
    },
  },
};
</script>
<style lang="scss">
.el-header {
  // background: url("../../../assets/images/header-bg.png");
  text-align: center;
  width: 100%;
  height: 80px !important;
  line-height: 80px;
  display: flex;
  background-color: #161823;

  .logo-text {
    font-size: 22px;
    color: #fff;
    flex: 1;
    text-align: left;
    display: inline;
    .logoImg {
      width: 60px;
      height: 60px;
      vertical-align: middle;
    }
    span {
      vertical-align: middle;
      margin-left: 15px;
    }
  }
  .header-btn {
    flex: 1;
    text-align: right;
    font-size: 14px;
    color: #fff;
    .beilv {
      position: fixed;
      top: 23px;
      left: 371px;
      position: fixed;
    }
    input {
      border: none;
      outline: none;
    }
  }
  .user-name {
    color: white;
  }
  .exit {
    margin: 0 20px;
    cursor: pointer;
    &:hover {
      color: white;
    }
  }
}</style
>''