front/src/views/login.vue

<template>
  <div style="overflow:hidden;width:100%">
    <div style="background: #fff6e8;">
      <div style="max-width:1400px;margin:0 auto">
        <top v-if="topLoadin" @userNavTo="userTo"></top>
      </div>
    </div>
    <div style="min-width: 1400px;background: #fff6e8;overflow:hidden;width:100%">
      <div style=" position:absolute;width:100%;z-index: 999;">
        <div style="max-width:1400px;margin:0 auto;padding: 30px; ">
          <el-row>
            <el-col :span="24">
              <div class="fx-row fx-bet-cen">
                <img src="@/assets/images/login_img_logo.png"/>
                <div class="fx-1 fx-row fx-end-cen">
                  <div v-for="(item,idx) in visibleRouters" :key="idx"
                       style="float:left;margin-right:40px;line-height: 50px;">
                    <el-link @click="to(item)" style="color:#fff;font-size: 16px;">
                      <svg-icon :icon-class="item.meta.icon" style="margin-right:5px"/>
                      {{ item.meta.title }}
                    </el-link>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="9" :xs="24">
              <div style="width: 400px; background: #fff; padding: 30px; margin: 100px auto;">
                <img style="width: 60%;margin-left:20%;" src="@/assets/images/login_logo.png"/>
                <div
                  style="color: #47C6A2;text-align: center; margin-top: 20px;font-size: 18px;font-weight: bold;letter-spacing: 10px;margin-bottom: 40px;">
                  WELCOME
                </div>

                <el-form v-if="!isLogin" ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"
                         style="width: auto;">
                  <el-form-item prop="username">
                    <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
                      <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input
                      v-model="loginForm.password"
                      type="password"
                      auto-complete="off"
                      placeholder="密码"
                      @keyup.enter.native="handleLogin"
                    >
                      <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
                    </el-input>
                  </el-form-item>
                  <!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox> -->
                  <div class="mx-forget-pwd">
                    <label @click="forgetDialogVisiable=true">忘记密码?</label>
                  </div>
                  <el-form-item style="width:100%;">
                    <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
                               @click.native.prevent="handleLogin">
                      <span v-if="!loading">登 录</span>
                      <span v-else>登 录 中...</span>
                    </el-button>
                  </el-form-item>
                </el-form>
                <div v-if="isLogin">
                  <div class="text-center">
                    <div class="user-info-head">
                      <img src="@/assets/images/profile.jpg" tclass="img-circle img-lg"
                           style="border-radius:50%;width:80px;"/>
                    </div>
                  </div>
                  <div style="padding-bottom:10px;">
                    <div class="text-center mt20 mb10">
                      {{ currentUser.userName }}
                    </div>
                    <p class="text-center" style="color:#999;font-size:14px">
                      <span>{{ currentUser.nickName }} {{ currentSchoolName }}</span>
                    </p>
                  </div>
                  <div class="list-group-item" style="margin-top:20px;border:none">
                                        <span style="display:inline-block;width:33%;text-align:center;cursor:pointer">
                                            <img style="width: 16px;position: relative;top: 2px;margin-right: 5px;"
                                                 src="@/assets/images/icon_jifen.png" alt/>
                                            {{ currentUser.points || 0 }}积分
                                        </span>
                    <span @click="userTo()"
                          style="display:inline-block;width:33%;text-align:center;color:#4055F7;cursor:pointer">
                                            <img style="width: 16px;position: relative;top: 2px;margin-right: 5px;"
                                                 src="@/assets/images/icon_user.png" alt/>个人中心
                                        </span>
                    <span @click="logout"
                          style="display:inline-block;width:33%;text-align:center;color:#C93C3C;cursor:pointer">
                                            <img style="width: 16px;position: relative;top: 2px;margin-right: 5px;"
                                                 src="@/assets/images/icon_back.png" alt/>退出
                                        </span>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="15" :xs="24">
            </el-col>
          </el-row>
        </div>
      </div>
      <img style="width: 100%;"
           src="https://mingxuejingbang.oss-cn-beijing.aliyuncs.com/mingxueMainImgs/home_banner.png"/>

      <div class="special-class-container hidden-course percent-count">
        <div class="text-center" style="margin:70px;font-size:52px;font-weight: bold;">名学助力 金榜提名</div>
        <ul>
          <li>
            <div class="transition-box">
              <div class="gifts-icon">
                <span class="start-bg"></span>
                <em class="main-bg"></em>
              </div>
              <span class="gifts-title">优质师资</span>
              <p class="gifts-desc">专业教师主讲</p>
            </div>
          </li>
          <li>
            <div class="transition-box">
              <div class="gifts-icon">
                <span class="start-bg"></span>
                <em class="main-bg"></em>
              </div>
              <span class="gifts-title">单题微课</span>
              <p class="gifts-desc">实时录制 精准教学</p>
            </div>
          </li>
          <li>
            <div class="transition-box">
              <div class="gifts-icon">
                <span class="start-bg"></span>
                <em class="main-bg"></em>
              </div>
              <span class="gifts-title">三库联动</span>
              <p class="gifts-desc">发现最合适的资源</p>
            </div>
          </li>
          <li>
            <div class="transition-box">
              <div class="gifts-icon">
                <span class="start-bg"></span>
                <em class="main-bg"></em>
              </div>
              <span class="gifts-title">学乐园</span>
              <p class="gifts-desc">快乐学习 快乐提升</p>
            </div>
          </li>
        </ul>

        <!-- <div class="text-center" style="margin-top:70px;font-size:28px;font-weight: bold;">在线答题 实时阅卷</div> -->
        <div>
          <!--          <img src="@/assets/images/wdpc.png" style="width:100%;display:block" alt="">-->
          <!--          <img src="@/assets/images/zxdt.png" style="width:100%;display:block" alt="">-->
          <!--          <img src="@/assets/images/dwdbb.png" style="width:100%;display:block" alt="">-->
          <!--          <img src="@/assets/images/skld.png" style="width:100%;display:block" alt="">-->

          <img src="https://mingxuejingbang.oss-cn-beijing.aliyuncs.com/mingxueMainImgs/wdpc.png"
               style="width:100%;display:block" alt/>
          <img src="https://mingxuejingbang.oss-cn-beijing.aliyuncs.com/mingxueMainImgs/zxdt.png"
               style="width:100%;display:block" alt/>
          <img src="https://mingxuejingbang.oss-cn-beijing.aliyuncs.com/mingxueMainImgs/dwdbb.png"
               style="width:100%;display:block" alt/>
          <img src="https://mingxuejingbang.oss-cn-beijing.aliyuncs.com/mingxueMainImgs/skld.png"
               style="width:100%;display:block" alt/>
        </div>
        <div style="clear:both"></div>
      </div>

      <!-- <img :src="topImg" style="width: 30px;height: 30px;" alt=""> -->
    </div>
    <el-dialog v-if="dialogVisible" title :visible.sync="dialogVisible" width="850px">
      <complete-profile @completed="handleProfileCompleted"
                        style="margin-left:250px; padding:0 30px"></complete-profile>
    </el-dialog>
    <el-dialog v-if="forgetDialogVisiable" :visible.sync="forgetDialogVisiable" title="忘记密码" width="650px"
               style="height:600px">
      <forget-password @resetPwdSuccess="forgetDialogVisiable=false"></forget-password>
    </el-dialog>
    <bottom-p class="mt40"></bottom-p>
  </div>
</template>

<script>
import store from '@/store'
import router from '@/router'
import { mapGetters, mapActions } from 'vuex'
import auth from '@/utils/auth'
import {
  getUserInfoByAgentcode,
  getFrontInitialRouters
} from '@/api/system/user'
import * as gradeAxios from '@/api/webApi/grade'
import * as loginAxios from '@/api/login'
import * as system from '@/api/webApi/system'
import forgetPassword from './components/forget-pwd.vue'
import CompleteProfile from './components/complete-profile.vue'
import RouterHelpMixin from '@/router/router-help-mixin'

export default {
  mixins: [RouterHelpMixin],
  components: {
    forgetPassword,
    CompleteProfile
  },
  data() {
    return {
      forgetDialogVisiable: false,
      topLoadin: true,
      isLogin: auth.getToken(),
      loginObj: {},
      loading: false,
      gradeLoading: false,
      navList: [],
      loginForm: {
        username: '',
        password: '',
        // rememberMe: false,
        // code: "",
        // uuid: "",
        relation: 1,
        grade: 2,
        year: ''
      },
      loginRules: {
        relation: [
          {
            required: true,
            trigger: 'blur',
            message: '请选择学生端或者老师端'
          }
        ],
        grade: [
          {
            required: true,
            trigger: 'blur',
            message: '请选择学校类别'
          }
        ],
        username: [
          {
            required: true,
            trigger: 'blur',
            message: '用户名不能为空'
          }
        ],
        password: [
          {
            required: true,
            trigger: 'blur',
            message: '密码不能为空'
          }
        ],
        code: [
          {
            required: true,
            trigger: 'change',
            message: '验证码不能为空'
          }
        ]
      },
      options: {
        img: store.getters.avatar //裁剪图片的地址
      },
      submitLoading: false,
      schoolData: [],
      gradeData: [],
      classData: [],
      areaSchoolAndYears: {},
      isSecd: false,
      times: 120,
      form: {
        username: '',
        phoneNumber: '',
        code: '',
        schoolId: '',
        gradeId: [],
        clazzId: []
      },
      subjectData: [],
      dialogVisible: false,
      id: 0,
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node
          setTimeout(() => {
            const nodes = Array.from({
              length: level + 1
            }).map((item) => {
              let a = ''
              if (level == '0') {
                a = '省'
              } else if (level == '1') {
                a = '市'
              } else {
                a = '区'
              }
              return {
                value: 1212,
                label: `选项${a} `,
                leaf: level >= 2
              }
            })
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes)
          }, 1000)
        }
      }
    }
  },
  computed: {
    ...mapGetters([
      'isFrontStudent',
      'isFrontTeacher',
      'isFrontMaster',
      'currentUser'
    ]),
    visibleRouters() {
      return this.navList.filter((r) => r.meta?.title && !r.hidden)
    },
    currentSchoolName() {
      return this.currentUser.busiSchool?.first()?.schoolName
    }
  },
  created() {
    let u = navigator.userAgent
    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
    if (isAndroid) {
      let url = this.$route.fullPath.split('?')[1]
      if (url && !this.isLogin) {
        let urlData = url.split('&')
        for (let i = 0; i < urlData.length; i++) {
          this.loginObj[urlData[i].split('=')[0]] =
            urlData[i].split('=')[1]
        }
        if (this.loginObj.username && this.loginObj.password) {
          // 直接发起登录
          this.loading = true
          this.Login(this.loginObj)
            .then(() => {
              this.isLogin = true
              this.loading = false
              this.getUser()
              this.getNav()
              // this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
            })
            .catch(() => {
              this.loading = false
            })
        }
      }
    } else {
      this.getUser()
      this.getNav()
    }
  },
  methods: {
    ...mapActions(['GenerateRoutes', 'Login', 'LogOut', 'GetInfo']),
    getNav() {
      console.log(
        'getNav called',
        'real menu=' + !!(this.islogin && this.currentUser.isBind),
        this.currentUser,
        this.isLogin
      )
      if (this.isLogin) {
        this.GenerateRoutes().then((accessRoutes) => {
          console.log('GenerateRoutes accessRoutes', accessRoutes)
          router.addRoutes(accessRoutes) // 动态添加可访问路由表
          this.navList = JSON.parse(
            JSON.stringify(
              this.$store.state.permission.topbarRouters
            )
          )
        })
      } else {
        getFrontInitialRouters().then((res) => {
          this.navList = res.data.map((r) => ({
            path: r.path,
            meta: r.meta
          }))
        })
      }
    },
    gouAction(data) {
      // 22.6.7 hht 作废此方法，只处理了有限级跳转
      if (data && data.length > 0) {
        if (data[0].children && data[0].children.length > 0) {
          if (
            data[0].children[0].children &&
            data[0].children[0].children.length > 0
          ) {
            return data[0].children[0].children.path
          } else {
            return data[0].path + '/' + data[0].children[0].path
          }
        } else {
          return data[0].path
        }
      } else {
        return ''
      }
    },
    handleClick(data) {
      let item = JSON.parse(JSON.stringify(data))
      let routes = [] //三级菜单
      let second = [] //二级
      let routesTo = []
      if (item.children) {
        //有二级菜单
        item.children.forEach((item2) => {
          if (item2.children) {
            item2.children.forEach((item3) => {
              item3.path =
                item.path + '/' + item2.path + '/' + item3.path
            })
            if (routes.length == 0 && item2.children.length) {
              //一级菜单下面第一个有3个菜单的二级菜单
              routes = item2.children
              routesTo = item2.children
            }
          } else {
            routesTo = item.children
          }
          item2.path = item.path + '/' + item2.path
          item2.level = 2
          second.push(item2)
        })
        let fal = false
        second.forEach((item) => {
          if (!fal && item.children && item.children.length > 0) {
            auth.setActiveMenu(item.path)
            fal = true
          }
        })

        auth.setMenuTab(second)
        this.three = true
        this.$store.commit('SET_SIDEBAR_ROUTERS', routes)
      } else {
        //没有二级菜单
        this.$store.commit('SET_SIDEBAR_ROUTERS', [])
        this.$router.push({
          path: item.path
        })
      }
      let path = this.findLeafDescendantPath(data)
      if (path) {
        this.$router.push({
          path: path
        })
        auth.setMenuListAction(path)
      } else {
      }
      auth.setMenuList(routes)
    },
    logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.LogOut().then(() => {
          this.isLogin = false
          this.getNav()
          this.topLoadin = false
          this.loginObj = {}
          setTimeout(() => {
            this.topLoadin = true
            this.$router.push({ path: '/login' })
          }, 10)
        })
      })
    },
    getUser() {
      if (!this.isLogin) return
      this.GetInfo().then((response) => {
        this.dialogVisible = !this.currentUser.isBind
        this.topLoadin = false
        setTimeout(() => {
          this.topLoadin = true
        }, 10)
      })
    },
    userTo() {
      //跳转至个人中心
      if (this.isLogin && !this.currentUser.isBind) {
        this.dialogVisible = true
        this.$message.error('请先完善信息！')
        return
      }
      const pcRouter = this.navList.find((r) => r.path == '/user')
      if (pcRouter) this.to(pcRouter)
    },
    to(url) {
      console.log('will go to', url)
      auth.removeMenuTab()
      auth.removeMenuList()
      if (this.isLogin && this.currentUser.isBind) {
        if (url == '/login') {
          window.location.reload()
          return
        }
        if (
          url ==
          '/index?type=http://8.134.76.179/index.php?m=login&token=94c750ea0f7f41d7753327792e937589'
        ) {
          window.open(
            'http://8.134.76.179/index.php?m=login&token=' +
            this.currentUser.code
          )
        } else if (url == '/user/profile') {
          this.$router.push({
            path: url
          })
        } else {
          this.handleClick(url)
        }
      } else if (this.isLogin && this.currentUser.isBind) {
        this.dialogVisible = true
        this.$message.error('请先完善信息！')
      } else {
        this.$message.error('请先登陆！')
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true
          this.Login(this.loginForm)
            .then(() => {
              this.isLogin = true
              this.loading = false
              this.getUser()
              this.getNav()
              // this.$router.push({ path: this.redirect || "/" }).catch(()=>{});
            })
            .catch(() => {
              this.loading = false
            })
        }
      })
    },
    handleProfileCompleted() {
      this.dialogVisible = !this.currentUser.isBind
      this.getNav() //重新获取菜单
    }
  }
}
</script>

<style scoped>
.mx-forget-pwd {
  display: flex;
  justify-content: flex-end;
  color: #999999;
  font-size: 14px;
  margin-bottom: 20px;
}

.mx-forget-pwd label {
  cursor: pointer;
}

/deep/ .el-input-group__append button.el-button {
  background: #e6a23c;
  color: #fff;
}

/deep/ .el-dialog {
  background: url("../assets/images/img_bg1.png") no-repeat;
  /* background-size: 100% 100%;
  height: 580px; */
  max-height: 520px;
  width: 800px;
}

/deep/ .el-card__body {
  padding: 0;
}

/deep/ .el-form-item {
  margin-bottom: 15px;
}

.header-h {
  background: #47c6a2;
}

/deep/ .el-dialog__close {
  color: #999999;
}

p {
  margin: 0;
}

.special-class-container {
  background: #fff6e8;
}

.special-class-container .title,
.special-class-container ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.title-info-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  color: #333;
  font-size: 40px;
  line-height: 56px;
  font-weight: 700;
}

.special-class-container ul {
  margin: 0 auto;
  width: 1400px;
  height: 215px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.special-class-container ul li {
  position: relative;
  width: 260px;
  height: 215px;
  -webkit-border-radius: 6px 20px 6px 20px;
  border-radius: 6px 20px 6px 20px;
  list-style-type: none;
}

.special-class-container ul li .transition-box {
  position: absolute;
  left: 0;
  top: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  width: 260px;
  height: 215px;
  background: #fff;
  -webkit-border-radius: 6px 20px 6px 20px;
  border-radius: 6px 20px 6px 20px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.special-class-container ul li .gifts-icon {
  position: relative;
  margin-top: 40px;
  width: 52px;
  height: 52px;
  -webkit-border-radius: 6px 20px 6px 20px;
  border-radius: 6px 20px 6px 20px;
  background: -o-linear-gradient(
    225deg,
    rgba(94, 232, 193, 0.2) 0,
    rgba(71, 198, 162, 0.2) 100%
  );
  background: linear-gradient(
    225deg,
    rgba(94, 232, 193, 0.2),
    rgba(71, 198, 162, 0.2)
  );
}

.special-class-container ul li .start-bg {
  top: -5px;
  left: 21px;
  width: 10px;
  height: 20px;
  background: url(data:image/png;base64,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) no-repeat 50%;
  background-size: contain;
}

.special-class-container ul li .main-bg,
.special-class-container ul li .start-bg {
  position: absolute;
  display: inline-block;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.special-class-container ul li .main-bg,
.special-class-container ul li .start-bg {
  position: absolute;
  display: inline-block;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.special-class-container ul li .main-bg {
  right: 0;
  top: 0;
}

.special-class-container ul li:first-of-type .main-bg {
  width: 35px;
  height: 41px;
  background: url(data:image/png;base64,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) no-repeat 50%;
  background-size: 100% 100%;
}

.special-class-container.hidden-course ul li:first-of-type .main-bg {
  background: url("../assets/images/icon_zhinengceping.png") no-repeat 50%;
  background-size: 100% 100%;
  height: 39px;
  right: -2px;
}

.special-class-container.hidden-course ul li:nth-of-type(2) .main-bg {
  width: 38px;
  height: 44px;
  background-size: 100% 100%;
  background: url("../assets/images/icon_dantiweike.png") no-repeat 50%;
}

.special-class-container ul li:nth-of-type(3) .main-bg {
  width: 38px;
  height: 44px;
  background: url("../assets/images/icon_sankuliandong.png") no-repeat 50%;
  background-size: 100% 100%;
}

.special-class-container ul li:nth-of-type(4) .main-bg {
  width: 42px;
  height: 42px;
  background: url("../assets/images/icon_kuailejinsai.png") no-repeat 50%;
  background-size: 100% 100%;
}

.special-class-container ul li .gifts-title {
  color: #333;
  font-size: 28px;
  line-height: 40px;
  font-weight: 700;
  margin: 19px 0 6px;
  -webkit-transition: color forwards 2s;
  -o-transition: color 2s forwards;
  transition: color forwards 2s;
}

.special-class-container ul li .gifts-desc {
  color: #666;
  font-size: 14px;
  line-height: 20px;
}

.special-class-container ul li:hover .transition-box {
  top: -10px;
  -webkit-box-shadow: 0 8px 18px 0 #ffefd7;
  box-shadow: 0 8px 18px 0 #ffefd7;
}

.special-class-container ul li:hover .gifts-icon {
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  background: -o-linear-gradient(225deg, #5ee8c1 0, #47c6a2 100%);
  background: linear-gradient(225deg, #5ee8c1, #47c6a2);
}

.special-class-container ul li:hover .start-bg {
  width: 87px;
  height: 53px;
  top: -28px;
  left: -16px;
}

.special-class-container.hidden-course ul li:hover:first-of-type .main-bg {
  right: 6px;
}

.special-class-container ul li:hover .gifts-title {
  color: #47c6a2;
  -webkit-transition: color forwards 2s;
  -o-transition: color 2s forwards;
  transition: color forwards 2s;
}
</style>