live-cms/src/layout/layout-part/heads.vue

<template>
  <div id="heads">
    <el-row>
      <el-col :span="24" class="heads">
        <el-col :span="12" class="left">
          <el-image :src="afterInfo.logo"></el-image>
          <span>{{ afterInfo.title }}</span>
        </el-col>
        <el-col :span="12" class="right">
          <!-- <span @click="bindBtn()"><i class="iconfont iconbangding"></i>绑定微信</span> -->
          <span @click="passwdBtn()"><i class="iconfont iconmima_huaban1"></i>修改密码</span>
          <span
            ><i class="iconfont iconicon-person"></i>
            <span v-if="user.id">
              {{ user.name }}
            </span>
            <span v-else>
              <el-link href="/login" :underline="false">登录</el-link>
            </span>
          </span>
          <span @click="logoutBtn()"><i class="iconfont iconiconfront-"></i>退出登录</span>
        </el-col>
      </el-col>
    </el-row>
    <el-dialog title="绑定" :visible.sync="bindDia" width="30%" :before-close="handleClose">
      <bind @bindDown="bindDown"></bind>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="passwdDia" width="30%" :before-close="handleClose">
      <passwdDias :form="form" @submitForm="submitForm"></passwdDias>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: login } = createNamespacedHelpers('login');
import bind from './parts/bind.vue';
import passwdDias from './parts/passwdDia.vue';
export default {
  name: 'heads',
  props: {},
  components: {
    // 绑定微信
    bind,
    // 修改密码
    passwdDias,
  },
  data: function() {
    return {
      afterInfo: {
        logo: require('@/assets/logo.png'),
        title: '管理后台',
      },
      // 绑定微信
      bindDia: false,
      // 修改密码
      passwdDia: false,
      form: {},
    };
  },
  created() {
    console.log(this.user);
  },
  methods: {
    ...login({ loginUpdate: 'update', logout: 'logout' }),
    // 绑定微信
    bindBtn() {
      this.bindDia = true;
    },
    // 绑定微信关闭
    bindDown() {
      this.bindDia = false;
    },
    // 修改密码
    passwdBtn() {
      this.passwdDia = true;
    },
    // 修改密码提交
    submitForm({ data }) {
      data.id = this.user.id;
      let res = this.loginUpdate(data);
      if (this.$checkRes(res)) {
        this.passwdDia = false;
        this.$message({
          message: '修改密码成功',
          type: 'success',
        });
        this.$router.push({ path: '/login' });
      }
    },
    // 退出登录
    logoutBtn() {
      this.logout();
      this.$router.push({ path: '/login' });
    },

    handleClose(done) {
      done();
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.left {
  padding: 0 20px;
  .el-image {
    float: left;
    width: 50px;
    height: 50px;
    margin: 5px 0 0 0;
  }
  span {
    height: 64px;
    line-height: 60px;
    font-size: 30px;
    color: #fff;
    padding: 0 10px;
    text-shadow: cornflowerblue 3px 3px 3px;
    font-family: cursive;
  }
}
.right {
  float: right;
  padding: 0 20px;
  text-align: right;
  height: 63px;
  line-height: 63px;
  span {
    border-right: 1px solid #000;
    padding: 0 15px;
    color: #000;
    .iconfont {
      margin: 0 5px 0 0;
    }
  }
  span:hover {
    cursor: pointer;
  }
  span:last-child {
    border-right: 0;
  }
}
/deep/.el-link.el-link--default {
  color: #000;
  font-size: 16px;
  top: -2px;
}
</style>