student-client/src/components/MainLayout/MainLayout.vue

<template>
  <div class="main-layout">
    <header class="header qm-primary-text">
      <Poptip v-if="ifShowQr" trigger="hover" width="280">
        <span class="name-arrow">手机端登录(Android)</span>
        <div slot="content">
          <Tabs type="card">
            <TabPane label="下载安卓apk">
              <div class="qm-primary-text flex-center">
                <qrcode :value="qrValue" :options="{ width: 200 }"></qrcode>
              </div>
            </TabPane>
            <TabPane label="绑定用户">
              <div class="qm-primary-text flex-center">
                <qrcode :value="qrValue" :options="{ width: 200 }"></qrcode>
                <div>请使用“云考”App扫描</div>
              </div>
            </TabPane>
          </Tabs>
        </div>
      </Poptip>
      <span v-if="ifShowQr" style="margin: auto 20px;">|</span>
      <Poptip trigger="hover" width="300">
        <span class="name-arrow"
          >{{ user.displayName }} &nbsp;
          <i
            class="ivu-icon ivu-icon-md-arrow-dropdown"
            style="vertical-align: middle;"
          ></i>
        </span>
        <div slot="content">
          <div class="info qm-primary-text">
            <div class="hr info-row">
              <div>底照</div>
              <div>
                <img class="user-avatar" :src="user.photoPath" alt="无底照" />
              </div>
            </div>
            <div class="hr info-row">
              <div>学号</div>
              <div>{{ user.studentCodeList.join(",") }}</div>
            </div>
            <div class="hr info-row">
              <div>身份证号</div>
              <div>{{ user.identityNumber }}</div>
            </div>
            <div class="hr info-row">
              <div>学习中心</div>
              <div>{{ user.orgName }}</div>
            </div>
            <div
              v-if="!isEpcc"
              style="
                grid-column: span 2;
                place-self: center;
                width: 100%;
                padding-top: 10px;
              "
            >
              <i-button class="qm-primary-button" long @click="goChangePwd">
                修改密码
              </i-button>
            </div>
          </div>
        </div>
      </Poptip>
      <span style="margin: auto 20px;">|</span>
      <a
        class="qm-primary-text"
        style="display: inline-block; margin-right: 20px; text-align: center;"
        @click="() => logout('?LogoutReason=正常退出')"
      >
        {{ isEpcc ? "返回" : "退出登录" }}
      </a>
    </header>
    <transition name="fade" appear>
      <main :key="$route.path" class="content">
        <slot></slot>
      </main>
    </transition>
    <nav class="nav">
      <img :src="getLogo" class="qm-logo" />
      <ul>
        <!-- <li v-if="menus.map(v => v.routeCode).includes('STU_ONLINE_EXAM')">
          <router-link
            class="link"
            to="/online-exam"
            ondragstart="return false;"
          >
            {{ menus.find(v => v.routeCode === "STU_ONLINE_EXAM").name }}
          </router-link>
        </li>
        <li v-if="menus.map(v => v.routeCode).includes('STU_ONLINE_HOMEWORK')">
          <router-link
            class="link"
            to="/online-homework"
            ondragstart="return false;"
          >
            {{ menus.find(v => v.routeCode === "STU_ONLINE_HOMEWORK").name }}
          </router-link>
        </li>
        <li v-if="menus.map(v => v.routeCode).includes('STU_ONLINE_PRACTICE')">
          <router-link
            class="link"
            to="/online-practice"
            ondragstart="return false;"
          >
            {{ menus.find(v => v.routeCode === "STU_ONLINE_PRACTICE").name }}
          </router-link>
        </li>
        <li v-if="menus.map(v => v.routeCode).includes('STU_OFFLINE_EXAM')">
          <router-link
            class="link"
            to="/offline-exam"
            ondragstart="return false;"
          >
            {{ menus.find(v => v.routeCode === "STU_OFFLINE_EXAM").name }}
          </router-link>
        </li>
        <li v-if="menus.map(v => v.routeCode).includes('STU_NOTICE')">
          <router-link
            class="link"
            to="/site-message"
            ondragstart="return false;"
          >
            <Badge :count="messageUnread" :offset="[20, -20]">
              {{ menus.find(v => v.routeCode === "STU_NOTICE").name }}
            </Badge>
          </router-link>
        </li>
        <li v-if="menus.map(v => v.routeCode).includes('STU_MODIFY_PWD')">
          <router-link class="link" to="/password" ondragstart="return false;">
            {{ menus.find(v => v.routeCode === "STU_MODIFY_PWD").name }}
          </router-link>
        </li> -->
        <li v-for="(menu, index) in menus" :key="index">
          <router-link class="link" :to="menu.link" ondragstart="return false;">
            <Badge
              v-if="menu.routeCode === 'STU_NOTICE'"
              :count="messageUnread"
              :offset="[20, -20]"
            >
              {{ menu.name }}
            </Badge>
            <span v-else>
              {{ menu.name }}
            </span>
          </router-link>
        </li>
      </ul>
    </nav>
    <footer class="footer">©️2020 启明泰和</footer>

    <SiteMessagePopup />
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
import VueQrcode from "@chenfengyuan/vue-qrcode";
import SiteMessagePopup from "./SiteMessagePopup.vue";

export default {
  name: "MainLayout",
  components: {
    qrcode: VueQrcode,
    SiteMessagePopup,
  },
  data() {
    return {
      appDownloadUrl: "fetching...",
      ifShowQr: false,
      menus: [],
    };
  },
  computed: {
    ...mapState(["user", "siteMessages", "QECSConfig"]),
    ...mapGetters(["isEpcc", "isCug"]),
    messageUnread() {
      return this.siteMessages.filter((v) => v.hasRead === false).length;
    },
    qrValue() {
      const { rootOrgId, studentCodeList, identityNumber } = this.user;
      return JSON.stringify({
        rootOrgId,
        studentCode: studentCodeList.join(","),
        identityNumber,
      });
    },
    // ifShowQr() {
    //   const shouldShow = this.QECSConfig.SHOW_STUDENT_CLIENT_APP_QRCODE;
    //   return shouldShow === "true";
    // },
    getLogo() {
      return this.QECSConfig.IS_CUSTOM_MENU_LOGO === "true"
        ? this.QECSConfig.CUS_MENU_LOGO_FILE_URL
        : require("./qm-logo.png");
    },
  },
  async created() {
    const r = await this.$http.get(
      "/api/ecs_core/systemProperty/APP_DOWNLOAD_URL"
    );
    this.appDownloadUrl = r.data;
    const r2 = await this.$http.get(
      `/api/ecs_core/org/property/${this.user.rootOrgId}/APP_ENABLED`
    );
    this.ifShowQr = r2.data;

    var url =
      "/api/ecs_core/rolePrivilege/getStudentClientMenu?rootOrgId=" +
      this.user.rootOrgId;
    // const params = new URLSearchParams();
    // params.append("groupCode", "BASIC_MENUS");
    // params.append("full", false);
    // const res = await this.$http.post(url, params, {
    //   headers: { "content-type": "application/x-www-form-urlencoded" },
    // });
    const links = {
      STU_ONLINE_EXAM: "/online-exam",
      STU_ONLINE_HOMEWORK: "/online-homework",
      STU_ONLINE_PRACTICE: "/online-practice",
      STU_OFFLINE_EXAM: "/offline-exam",
      STU_NOTICE: "/site-message",
      STU_MODIFY_PWD: "/password",
    };
    const res = await this.$http.get(url);
    // console.log(res);
    this.menus = res.data
      .sort((a, b) => b.weight - a.weight)
      .map((v) => {
        return {
          routeCode: v.routeCode.toUpperCase(),
          name: v.name,
          link: links[v.routeCode.toUpperCase()],
        };
      });
    this.updateMenus(this.menus);
  },
  methods: {
    ...mapMutations(["updateMenus"]),
    goChangePwd() {
      this.$router.push("/password");
    },
  },
};
</script>

<style scoped>
.main-layout {
  display: grid;
  grid-template-areas: "nav header" "nav content" "nav footer";
  min-height: 100vh;
  grid-template-columns: 180px 1fr;
  grid-template-rows: auto 1fr auto;
}

.header {
  grid-area: header;
  height: 50px;
  background-color: #ffffff;
  box-shadow: 0px 1px 0px 0px #eeeeee;

  text-align: right;
  line-height: 50px;
}

.user-avatar {
  display: inline-block;
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.info {
  width: 260px;
}

.info > div {
  min-height: 50px;
}

.hr {
  border-bottom: 1px solid #eeeeee;
}
.info-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
}
.info-row > div:nth-of-type(odd) {
  justify-self: left;
}

.info-row > div:nth-of-type(even) {
  justify-self: right;
}

.name-arrow:hover .ivu-icon-md-arrow-dropdown::before {
  content: "\F343";
}

.nav {
  grid-area: nav;
  background-color: rgb(113, 113, 113);
  background-repeat: repeat;
  width: 180px;
  min-height: 100vh;

  display: flex;
  flex-direction: column;
}

.qm-logo {
  width: 80px;
  height: 68px;
  margin: 30px auto;
}

.flex-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.link {
  background-image: url(./link.png);
  background-repeat: no-repeat;
  background-position: 30px 50%;
  padding-left: 45px;
  text-align: left;
  padding-right: 20px;
  line-height: 40px;
  width: 100%;
  display: inline-block;

  color: #ffffff;
}
.link >>> .ivu-badge-count {
  z-index: 1;
}

.router-link-active,
.link:hover {
  background-image: url(./link-active.png);
  background-color: rgba(255, 255, 255, 0.5);
  color: #fafafa;
}

.footer {
  grid-area: footer;
  margin-bottom: 10px;
}
</style>