web-test/src/layout/live/head.vue

<template>
  <div id="heads">
    <el-row>
      <div class="superbanner">
        <img :src="top_bg" />
      </div>
      <div class="supertop">
        <div class="w_1200">
          <!-- <el-col :span="12" class="left">
            <span>欢迎来到中科在线</span>
            <span @click="guanzhu()">关注公众号</span>
          </el-col>
          <el-col :span="12" class="right">
            <el-col :span="18" class="one">
              <span v-if="user.uid || user.suid">
                {{ user.name || user.adminuser }}
              </span>
            </el-col>
            <el-col
              :span="3"
              class="two"
              v-if="user.role == '2' || user.role == '3' || user.role == '4' || user.role == '5' || user.role == '6' || user.role == '7' || user.role == '8'"
            >
              <span v-if="user.uid">
                <button
                  type="text"
                  class="center"
                  @click="tuCenter"
                  v-if="user.role == '3' || user.role == '4' || user.role == '5' || user.role == '6' || user.role == '7' || user.role == '8'"
                >
                  个人中心
                </button>
                <button type="button" @click="zhuxiao" class="outLogin">退出</button>
              </span>
              <span v-else>
                <el-button type="primary" size="mini" class="loginBtn" @click="webLogin">平台登录</el-button>
              </span>
            </el-col>
            <el-col :span="3" class="two" v-if="user.role == '0' || user.role == '1' || user.role == '7'">
              <span v-if="user.uid">
                <button type="text" class="center" @click="tuCenter" v-if="user.role == '0' || user.role == '1' || user.role == '7'">
                  个人中心
                </button>
                <button type="button" @click="zhuxiao" class="outLogin">退出</button>
              </span>
              <span v-else>
                <el-button type="primary" size="mini" class="loginBtn" @click="adminLogin">管理登录</el-button>
              </span>
            </el-col>
          </el-col> -->
          <el-col :span="12" class="left">
            <span>欢迎来到中科在线</span>
            <span @click="guanzhu()">关注公众号</span>
          </el-col>
          <el-col :span="12" class="right">
            右侧
          </el-col>
        </div>
      </div>
      <div class="superlogo">
        <div class="w_1200">
          <a href="/platlive">
            <img :src="logo" />
            <span>
              中科在线
            </span>
          </a>
        </div>
      </div>
      <div class="supermenu">
        <div class="w_1200">
          <div class="info">
            <ul>
              <li :class="isTab('hallList') ? 'active' : ''">
                <a @click="turnTo('hallList')" target="">直播大厅</a>
                <span></span>
              </li>
              <li :class="isTab('market') ? 'active' : ''">
                <a @click="turnTo('market')" target="">科技超市</a>
                <span></span>
              </li>
              <li :class="isTab('service') ? 'active' : ''">
                <a @click="turnTo('service')" target="">创新服务</a>
                <span></span>
              </li>
              <li :class="isTab('dynamic') ? 'active' : ''">
                <a @click="turnTo('dynamic')" target="">动态监测</a>
                <span></span>
              </li>
              <li :class="isTab('technical') ? 'active' : ''">
                <a @click="turnTo('technical')" target="">技术交流</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div v-if="view" class="erweima">
        <img :src="qrcode" />
      </div>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: login } = createNamespacedHelpers('login');
const { mapActions: dockLogin } = createNamespacedHelpers('dockLogin');
import QRCode from 'qrcode';
export default {
  name: 'heads',
  props: {},
  components: {},
  data: () => {
    return {
      top_bg: require('@/assets/live/top_bg.png'),
      qrcode: require('@/assets/live/free-qrcode.jpg'),
      logo: require('@/assets/live/logo.png'),
      qc: '',
      view: false,
    };
  },
  created() {
    console.log(this.user);
  },
  methods: {
    ...login({ logout: 'logout', transactiondtetle: 'delete' }),
    ...dockLogin({ docklogout: 'logout', transactiondtetle: 'delete' }),
    // 跳转
    turnTo(type) {
      if (type == 'index') {
      } else if (type == 'hall_index') {
        this.$router.push({ path: '/live/hall/index' });
      } else if (type == 'service') {
        this.$router.push({ path: '/live/service' });
      } else {
        this.$router.push({ path: `/${type}/index` });
      }
    },
    // 选中
    isTab(type) {
      if (type == 'index') return this.$route.path.includes('/live/index');
      else return this.$route.path.includes(`/${type}`);
    },
    // 平台登录
    webLogin() {
      this.$router.push({ path: '/webLogin' });
    },
    // 管理登录
    adminLogin() {
      this.$router.push({ path: '/adminLogin' });
    },
    // 个人中心跳转
    tuCenter() {
      if (this.user.role == '4' || this.user.role == '5' || this.user.role == '6' || this.user.role == '7') {
        this.$router.push({ path: '/userCenter/index', query: { num: '1' } });
      } else if (this.user.role == '3') {
        this.$router.push({ path: '/adminCenter/index', query: { num: '1' } });
      } else if (this.user.role == '8') {
        this.$router.push({ path: '/vipCenter/index', query: { num: '1' } });
      } else if (this.user.role == '0' || this.user.role == '1') {
        this.$router.push({ path: '/superAdminCenter/index', query: { num: '1' } });
      } else {
        this.$router.push('/market/index');
      }
    },
    async zhuxiao() {
      if (this.user.role === '3' || this.user.role === '8') {
        this.docklogout();
        this.$message({
          message: '注销成功',
          type: 'success',
        });
        window.location.reload();
      } else {
        this.logout();
        this.$message({
          message: '注销成功',
          type: 'success',
        });
        window.location.reload();
      }
    },
    // 关注公众号
    guanzhu() {
      if (this.view) {
        this.view = false;
      } else {
        this.view = true;
      }
    },
    // 创建二维码
    async creatQrCode() {
      let url = `http://free.liaoningdoupo.com/api/auth/wxchat?redirect_uri=http://free.liaoningdoupo.com/platmobile/bind/&type=1&uid=${this.user.uid}`; // 需要转换为二维码的内容
      let el = document.getElementById('qrCodeUrl');
      this.qc = await QRCode.toDataURL(url, { height: 200, width: 200 });
    },
  },
  mounted() {
    // this.creatQrCode();
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
@import '~@/style/style.css';
.supertop {
  .left {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    span:last-child {
      padding: 0 10px;
      font-weight: bold;
    }
    span:last-child:hover {
      cursor: pointer;
      color: #0085d2;
      font-weight: bold;
    }
  }
  // .right {
  //   height: 40px;
  //   line-height: 40px;
  //   font-size: 16px;
  //   color: #000;
  //   .one {
  //     text-align: right;
  //     color: #000;
  //     font-weight: bold;
  //   }
  //   .two {
  //     text-align: center;
  //     .loginBtn:hover {
  //       cursor: pointer;
  //     }
  //     .center {
  //       font-size: 15px;
  //       font-weight: bold;
  //       color: #fff;
  //     }
  //     .center:hover {
  //       cursor: pointer;
  //       color: #0085d2;
  //     }
  //     .outLogin {
  //       margin: 0 0 0 5px;
  //       font-weight: bold;
  //       font-size: 14px;
  //     }
  //     .outLogin:hover {
  //       cursor: pointer;
  //       color: #0085d2;
  //     }
  //   }
  // }
}
.btnER {
  font-size: 16px;
  padding: 10px 10px;
  float: left;
  font-weight: bold;
}
.btnER:hover {
  color: #0085d2;
  font-weight: bold;
  cursor: pointer;
}
.erweima {
  position: fixed;
  top: 4%;
  left: 40%;
  z-index: 999;
}
</style>