pbl_inviteLogin/src/components/pages/inviteLoginSZ/inviteLogin.vue

<template>
  <div class="container" v-loading="loading">
    <div class="loginOut" v-show="showLoadingOut">
        <span @click="loginOut">退出登录</span>
      </div>
      <!-- <div class="i_box" v-if="steps == 1">
          <div class="i_box_top">
              <div><span>请输入随机码进入项目课程</span></div>
              <div><span>账号登陆</span></div>
              <img src="../../../assets/icon/inviteLogin/password.png" alt="">
          </div>
          <div class="i_box_login">
              <el-input v-model="icode" placeholder="请输入随机码" class="input"></el-input>
              <div @click="nextSteps" class="button">确 定</div>
          </div>
      </div>
      <div class="i_box" v-if="steps == 2">
          <div class="i_box_top">
              <div><span>{{ res.school }}</span></div>
              <div><span>欢迎回来！</span></div>
              <img src="../../../assets/icon/inviteLogin/school.png" style="bottom: -40px;" alt="">
          </div>
          <div class="i_box_login2">
              <div v-for="item in classJuri" @click="login(item.userid,(item.name ? item.name : item.username))" :key="item.userid">{{ item.name ? item.name :
                  item.username }}</div>
              <div v-if="!classJuri.length" class="none">此班级暂无学生</div>
              <el-select v-model="userid" placeholder="选择姓名" filterable class="select">
                  <el-option v-for="item in classJuri" :key="item.userid" :label="item.name ? item.name : item.username"
                      :value="item.userid">
                  </el-option>
              </el-select>

              <div @click="login" class="button">登 录</div>
          </div>
      </div> -->
      <div class="c-box">
        <div class="c-b-left"></div>
        <div class="c-b-right">
          <div class="c-b-r-closeArea" v-if="steps == 2" @click.stop="steps = 1">
            <span class="el-icon-back c-b-r-ca-btn"></span>
          </div>
          <div class="c-b-r-main" v-if="steps == 1">
            <div class="c-b-r-m-title">欢迎登录！</div>

            <div class="c-b-r-m-form">
              <div class="c-b-r-m-f-label">课程识别码</div>
              <div class="c-b-r-m-f-input">
                <el-input v-model="icode" placeholder="请输入课程识别码"  append="这是个测试" :class="[showErrMsg?'showErrMsg':'']"></el-input>
                <div class="c-b-r-m-f-i-errMsg" v-if="showErrMsg">
                  <span class="el-icon-warning-outline"></span>
                  {{ errMsg }}
                </div>
              </div>
            </div>

            <div :class="['c-b-r-m-btn',btnActive?'c-b-r-m-btnActive':'']" @click.stop="nextSteps">下一步</div>

          </div>
          <div class="c-b-r-main" v-if="steps == 2">
            <div class="c-b-r-m-title">请选择您的姓名</div>
            <div class="c-b-r-m-chooseNameArea">
              <!-- <div class="c-b-r-m-cna-none">此班级暂无学生</div> -->
              <div v-if="!classJuri.length" class="c-b-r-m-cna-none">此班级暂无学生</div>
              <div v-for="item in classJuri" :class="['c-b-r-m-cna-item',chooseData.userid==item.userid?'c-b-r-m-cna-itemActive':'']" @click="choose(item.userid,(item.name ? item.name : item.username))" :key="item.userid">{{ item.name ? item.name :item.username }}</div>
            </div>
            <!--  -->
            <el-button class="c-b-r-m-loginBtn" type="primary" v-if="classJuri.length" @click.stop="login(chooseData.userid,chooseData.username)">确认登录</el-button>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  data() {
      return {
          steps: 1,
          icode: "",
          userid: "",
          options: [],
          loading: false,
          res: {},
          classJuri: [],
          code: this.$route.query.code,
          courseId:"",
          showErrMsg:false,
          errMsg:"",
          chooseData:{},
          showLoadingOut:false,
      }
  },
  computed:{
    btnActive(){
      // return this.icode!='';
      return /^\d+$/.test(this.icode);
    },
  },
  watch:{
    icode(newValue,oldValue){
      this.showErrMsg = false;
      this.errMsg = "";
    }
  },
  methods: {
      //       selectSnameByCid
      nextSteps() {
          // let reg = /^[A-Za-z0-9]{2,}$/
          // let reg = /^[0-9]{2,}$/
          if(!this.btnActive || this.showErrMsg)return;
          let reg = /^\d+$/
          if (!reg.test(this.icode)) {
              this.setErrMsg("请正确填写识别码")
              // this.$message.error("请正确填写随机码")
              return;
          }
          let params = {
              code: this.icode,
              oid: this.code,
              // oid:"16ace517-b5c7-4168-a9bb-a9e0035df840"
              // oid:"0fec3a8a-ad04-11ed-b13d-005056b86db5" //测试
          };
          this.loading = true
          this.ajax
              // .get(this.$store.state.api + "selectCourseByIc2", params)
              .get(this.$store.state.api + "selectCourseByIc2SZ", params)
              .then(res => {
                  this.loading = false;
                  if (res.data.length && res.data[0].length) {
                      this.res = res.data[0][0]
                      this.courseId = res.data[0][0].courseId
                      this.getClass(res.data[0][0].classid)
                  } else {
                    this.setErrMsg("不存在此识别码")
                      // this.$message.error("不存在此随机码")
                  }
              })
              .catch(err => {
                  console.error(err);
              });
      },
      getClass(classId) {
          let params = {
              cid: classId,
          };
          this.ajax
              .get(this.$store.state.api + "selectSnameByCid", params)
              .then((res) => {
                  this.classJuri = res.data[0];
                  this.steps = 2
              })
              .catch((err) => {
                  console.error(err);
              });
      },
      login(userid,username) {
          let courseid = this.courseId
          this.$confirm(`确定登录${username}的账号吗?`, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
          })
              .then(() => {
                   window.topU.postMessage(
                      {
                          tools: "inviteLogin",
                          userid: userid,
                          courseId: courseid
                      },
                      "*"
                  );
              })
              .catch(() => { });

      },
      // 选择学生
      choose(userid,username){
        this.chooseData = {
          userid: userid,
          username: username
        }
      },
      // 设置错误信息
      setErrMsg(msg){
        this.showErrMsg = true;
        this.errMsg = msg;
      },
      loginOut(){
       window.topU.postMessage({
        tools:"logout"
      },"*")
    },
  },
  mounted(){
    setInterval(() => {
       window.topU.postMessage({
        tools:"getLogin"
      },"*")
      console.log("获取getLogin")
    }, 2000);
    window.addEventListener("message",(e)=>{
      let data = e.data;
      console.log("message",e)
      if(data.tools && data.tools=='getLogin'){
        if(data.type===2){
          this.showLoadingOut = false;
        }else if(data.type===1){
          this.showLoadingOut = true;
        }
      }
    })
  }
}
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../../../assets/inviteLoginSZBG.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.c-box{
width: 75%;
height: 75%;
border-radius: 12px;
background-color: #4B88F5;
overflow: hidden;
display: flex;
}

.c-b-left{
flex: 1;
height: 100%;
background: url("../../../assets/inviteLoginSZImage.png") no-repeat;
background-size: cover;
background-position: center;
}

.c-b-right{
flex: 1;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
position: relative;
overflow-x:hidden ;
}

.c-b-r-closeArea{
width: 120px;
height: 120px;
position: absolute;
right: -45px;
top: -45px;
border-radius: 50%;
background-color: #3681FC;

}

.c-b-r-ca-btn{
position: absolute;
bottom: 30px;
left: 30px;
color: white;
cursor: pointer;
font-size: 1.5em;
}

.c-b-r-main{
width: 80%;
height: 80%;
overflow: auto;;
}

.c-b-r-m-title{
font-size: 28px;
font-weight: bold;
}

.c-b-r-m-form{
width: 100%;
height: auto;
margin-top: 40px;
}

.c-b-r-m-f-label{
font-size: 14px;
font-weight: bold;
margin-bottom: 5px;
}
.c-b-r-m-f-input{
position: relative;
}

.c-b-r-m-f-input>>>.el-input__inner{
background-color: #F0F2F5 !important;
height: 52px;
border-radius: 6px;
}
.showErrMsg>>>.el-input__inner{
color: #EE3E3E !important;
}

.c-b-r-m-f-i-errMsg{
position: absolute;
right: 10px;
color: #EE3E3E;
font-size: 14px;
height: 100%;
display: flex;
align-items: center;
top: 0;
}

.el-icon-warning-outline>span{
margin-right: 10px !important;
}

.c-b-r-m-btn{
width: 92px;
height: 36px;
box-sizing: border-box;
border-radius: 6px;
border: solid 1px #C2D9FE;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: #C2D9FE;
transition: .3s;
margin-top: 10px;
cursor:not-allowed;
}

.c-b-r-m-btnActive{
border-color: #68A1FD;
color: #68A1FD;
cursor: pointer;
}

.c-b-r-m-chooseNameArea{
width: 100%;
max-height: 70%;
height: auto;
/* max-height: 300px; */
margin-top: 20px;
display: flex;
flex-wrap: wrap;
overflow: auto;
}

.c-b-r-m-cna-none{
font-size: 20px;
margin-top: 30px;
font-weight: bold;
}

.c-b-r-m-cna-item{
width: auto;
padding: 4px 6px;
background-color: #F0F2F5;
color: #000000;
box-sizing: border-box;
border:solid 1px #E7E7E7;
border-radius: 3px;
font-size: 14px;
transition: .3s;
cursor: pointer;
margin-right: 10px;
margin-bottom: 10px;
}

.c-b-r-m-cna-itemActive{
background-color: #E0EAFB;
color:#3681FC;
border-color: #3681FC;

}


.c-b-r-m-loginBtn{
width: 100%;
height: 56px;
font-size: 20px;
margin-top: 20px;
}
/* .i_box {
  height: 100%;
  width: 100%;
}

.i_box_top {
  height: 145px;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-sizing: border-box;
  padding: 20px;
}

.i_box_top>div:nth-child(1) {
  color: rgb(147, 147, 147);
}

.i_box_top>div:nth-child(2) {
  font-size: 28px;
  color: rgb(78, 138, 218);
  margin-top: 5px;
}

.i_box_top>img {
  position: absolute;
  right: 30px;
  bottom: -60px;
  width: 150px;
}

.i_box_login {
  height: calc(100% - 145px);
  width: 100%;
  background: linear-gradient(90deg, #477cd7, #65b9fc);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 20px;
  box-sizing: border-box;
  align-content: flex-start;
}

.i_box_login2 {
  height: calc(100% - 145px);
  background: linear-gradient(90deg, #477cd7, #65b9fc);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  padding-bottom: 10px;
  box-sizing: border-box;
  align-content: flex-start;
}

.i_box_login2 div{
  cursor: pointer;
  width: 80px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  padding: 0 5px;
  overflow: hidden;
  background: rgb(225, 237, 255);
  margin: 10px 9px 0;
  color: rgb(37 124 255);
  border-radius: 5px;
  box-sizing: border-box;
  text-overflow: ellipsis;
}

.i_box_login .input {}

.i_box_login .select {
  width: 100%;
}

.i_box_login .button {
  margin-top: 30px;
  background: rgb(100, 100, 100);
  cursor: pointer;
  color: #fff;
  padding: 10px 50px;
  border-radius: 5px;
}

.none{
  width: 100% !important;
  height: 100% !important;
  background: unset !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
} */

.loginOut{
position: absolute;
right: 30px;
top: 30px;
width: auto;
height: auto;
display: flex;
justify-content: center;
align-items: center;
}

.loginOut>span{
font-size: 24px;
color: #fff;
font-weight: bold;
cursor: pointer;
}
</style>