|
|
@@ -0,0 +1,224 @@
|
|
|
+<template>
|
|
|
+ <div class="container" v-loading="loading">
|
|
|
+ <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>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ steps: 1,
|
|
|
+ icode: "",
|
|
|
+ userid: "",
|
|
|
+ options: [],
|
|
|
+ loading: false,
|
|
|
+ res: {},
|
|
|
+ classJuri: [],
|
|
|
+ code: this.$route.query.code,
|
|
|
+ courseId:""
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // selectSnameByCid
|
|
|
+ nextSteps() {
|
|
|
+ // let reg = /^[A-Za-z0-9]{2,}$/
|
|
|
+ // let reg = /^[0-9]{2,}$/
|
|
|
+ let reg = /^\d+$/
|
|
|
+ if (!reg.test(this.icode)) {
|
|
|
+ this.$message.error("请正确填写随机码")
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let params = {
|
|
|
+ code: this.icode,
|
|
|
+ oid: this.code,
|
|
|
+ };
|
|
|
+ this.loading = true
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectCourseByIc2", 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.$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.parent.postMessage(
|
|
|
+ {
|
|
|
+ tools: "inviteLogin",
|
|
|
+ userid: userid,
|
|
|
+ courseId: courseid
|
|
|
+ },
|
|
|
+ "*"
|
|
|
+ );
|
|
|
+ })
|
|
|
+ .catch(() => { });
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+}
|
|
|
+</style>
|
