index.vue

<template>
  <div style="min-width: 1440px; overflow: overlay">
    <header class="layout-header">
      <div class="logotitle">
        <div class="leftLogo"></div>
        <div class="rightText">
          国家消化道早癌防治中心联盟 <br />早期胃癌筛查项目
        </div>
      </div>
      <div v-if="!allianceToken" class="login">
        <div class="login_title text-center">
          筛查随访数据库登录
          <el-form
            ref="form"
            label-position="top"
            :model="form"
            label-suffix=":"
            label-width="100%"
            :rules="rules"
          >
            <el-form-item prop="username" label="登录名">
              <el-input
                v-model="form.username"
                placeholder="请输入登录名"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password" label="密码">
              <el-input
                v-model="form.password"
                type="password"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                class="login_button"
                :loading="loading"
                @click="handleSubmit('form')"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div v-if="allianceToken" class="userInfo">
        <div class="top">
          <div class="text">欢迎，{{ userInfo.name }}</div>
          <div class="exit" @click="logout">退出</div>
        </div>
        <div class="bot" @click="$router.push('/')">
          <div class="left_chart">
            <img src="@/assets/img/Home/chart.png" alt="" />
          </div>
          <div class="right_text">数据中心</div>
        </div>
      </div>
    </header>
    <div class="sider">
      <el-menu
        mode="horizontal"
        :default-active="currentRoute"
        class="siderMenu"
        router
      >
        <el-menu-item
          v-for="(item, index) in menuList"
          :key="index"
          :index="item.route"
          style="width: 10%; text-align: center; min-width: 120px"
        >
          {{ item.name }}
        </el-menu-item>
      </el-menu>
    </div>
    <section style="overflow: hidden; padding: 32px 10%; background: #f3f3f3">
      <transition name="fade-transform" mode="out-in">
        <router-view></router-view>
      </transition>
    </section>
    <footer class="layout-footer-center text-center">
      copyright@ 联盟信息等
    </footer>
  </div>
</template>
<script>
import { loginRSA } from "@/config/settings"
import { getAccessToken } from "@/utils/accessToken"
import { mapGetters } from "vuex"
import { encrypt, decrypt } from "@/utils/encryption"
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
      menuList: [
        {
          route: "/home",
          name: "首页",
        },
        {
          route: "/allianceintroduction",
          name: "联盟介绍",
        },
        // {
        //   route: "/healthpopularization",
        //   name: "健康科普",
        // },
        {
          route: "/scientificresearch",
          name: "科学研究",
        },
        {
          route: "/casesharing",
          name: "案例分享",
        },
        {
          route: "/solution",
          name: "解决方案",
        },
      ],
      loading: false,
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            type: "string",
            min: 6,
            message: "密码长度不能少于六位数",
            trigger: "blur",
          },
        ],
      },
      currentRoute: this.$route.path,
      userInfo: {},
    }
  },
  computed: {
    ...mapGetters({
      allianceToken: ["user/accessToken"],
    }),
  },
  watch: {
    $route: {
      handler(v) {
        this.currentRoute = this.$route.path
      },
      deep: true,
    },
    allianceToken(v) {},
  },
  mounted() {
    // if (localStorage.getItem('allianceToken')) {
    //   this.$router.push('/datacenter/home')
    // }
    // this.allianceToken = getAccessToken()
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.loading = true
          const data = Object.assign({}, this.form)
          if (loginRSA) {
            data.password = encodeURIComponent(encrypt(data.password))
            data.userName = encodeURIComponent(encrypt(data.username))
          }
          this.$store
            .dispatch("user/login", data)
            .then(() => {
              const routerPath =
                !this.redirect || this.redirect === "/404" ? "/" : this.redirect
              this.$router.push({ path: routerPath }).catch((e) => {})
              setTimeout(() => {
                this.loading = false
              }, 800)
            })
            .catch((e) => {
              this.loading = false
            })
        }
      })
    },
    logout() {
      const h = this.$createElement
      this.$msgbox({
        title: "提示",
        message: h("p", null, [h("span", null, "是否确认退出登录？")]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = "执行中..."
            this.$store.dispatch("user/logout").then(() => {
              this.allianceToken = ""
              done()
              instance.confirmButtonLoading = false
            })
          } else {
            done()
          }
        },
      }).then((action) => {
        // this.$message({
        //   type: "info",
        //   message: "action: " + action,
        // })
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.layout-header {
  height: 400px;
  width: 100%;
  background: url("~@/assets/img/Home/homeheaderbg.png") no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  padding: 0 10% 0 5%;
  justify-content: space-between;
  align-items: center;
  .logotitle {
    height: 220px;
    display: flex;
    .leftLogo {
      width: 72px;
      height: 72px;
      background: url("~@/assets/img/Home/stomach.png") no-repeat;
      background-position: center;
      background-size: cover;
    }
    .rightText {
      min-width: 570px;
      font-size: 42px;
      font-family: AlibabaPuHuiTiB;
      color: #ffffff;
      margin-left: 14px;
    }
  }
  .login {
    width: 23%;
    min-width: 334px;
    height: 326px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0px 12px 36px 0px rgba(26, 35, 87, 0.4);
    border-radius: 8px;
    padding: 18px 40px;
    .login_title {
      height: 26px;
      font-size: 22px;
      font-family: AlibabaPuHuiTiM;
      color: #4e68ff;
      // line-height: 60px;
    }
    .login_button {
      width: 100%;
      height: 40px;
      margin-top: 20px;
      background: #4e68ff;
    }
  }
  .userInfo {
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .top {
      display: flex;
      align-items: center;
      .text {
        font-size: 20px;
        font-family: AlibabaPuHuiTiM;
        color: #ffffff;
        margin: 10px 24px;
      }
      .exit {
        font-size: 16px;
        cursor: pointer;
        font-family: AlibabaPuHuiTiR;
        text-decoration: underline;
        color: rgba(255, 255, 255, 0.8);
        line-height: 16px;
        &:active {
          color: #4e68ff;
        }
      }
    }
    .bot {
      width: 183px;
      height: 60px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 0px 12px 36px 0px rgba(23, 44, 105, 0.3);
      border-radius: 8px;
      display: flex;
      margin-top: 32px;
      cursor: pointer;
      .left_chart {
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 36px;
          height: 36px;
        }
      }
      .right_text {
        flex: 1;
        background: #4e68ff;
        border-radius: 0px 8px 8px 0px;
        line-height: 60px;
        font-size: 22px;
        font-family: PingFangSC-Medium, PingFang SC;
        color: #f1f5fd;
        text-align: center;
      }
    }
  }
}
.siderMenu {
  padding: 0 10%;
  background: #edefff;
}
.layout-footer-center {
  width: 100%;
  height: 108px;
  background: #efefef;
  line-height: 108px;
}
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus {
  background-color: transparent;
}
.el-form-item {
  text-align: left;
}
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.3s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>