|
|
@@ -0,0 +1,176 @@
|
|
|
+<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_login">
|
|
|
+
|
|
|
+ <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
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // selectSnameByCid
|
|
|
+ nextSteps() {
|
|
|
+ let reg = /^[A-Za-z0-9]{4,}$/
|
|
|
+ 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 + "selectCourseByIc", params)
|
|
|
+ .then(res => {
|
|
|
+ this.loading = false;
|
|
|
+ if (res.data.length && res.data[0].length) {
|
|
|
+ this.res = res.data[0][0]
|
|
|
+ let _inviteCode = JSON.parse(res.data[0][0].inviteCode)
|
|
|
+ for(var i = 0;i<_inviteCode.length;i++){
|
|
|
+ if(_inviteCode[i].ic == this.icode){
|
|
|
+ this.getClass(_inviteCode[i].cid)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } 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() {
|
|
|
+ if(!this.userid){
|
|
|
+ this.$message.error("请选择姓名")
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ window.parent.postMessage(
|
|
|
+ {
|
|
|
+ tools: "inviteLogin",
|
|
|
+ userid: this.userid,
|
|
|
+ },
|
|
|
+ "*"
|
|
|
+ );
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</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;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+}
|
|
|
+</style>
|
zengyicheng
