登录提交

src/components/pages/inviteLoginSZ/inviteLogin.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="container" v-loading="loading">
-        <div class="i_box" v-if="steps == 1">
+        <!-- <div class="i_box" v-if="steps == 1">
             <div class="i_box_top">
                 <div><span>请输入随机码进入项目课程</span></div>
                 <div><span>账号登陆</span></div>
@@ -21,15 +21,49 @@
                 <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-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 @click="login" class="button">登 录</div>
             </div>
-        </div>
+        </div> -->
+				<div class="c-box">
+					<div class="c-b-left"></div>
+					<div class="c-b-right">
+						<div class="c-b-r-closeArea">
+							<span class="el-icon-close 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>
 
@@ -45,26 +79,46 @@ export default {
             res: {},
             classJuri: [],
             code: this.$route.query.code,
-            courseId:""
+            courseId:"",
+						showErrMsg:false,
+						errMsg:"",
+						chooseData:{}
         }
     },
+		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.$message.error("请正确填写随机码")
+								this.setErrMsg("请正确填写识别码")
+                // this.$message.error("请正确填写随机码")
                 return;
             }
             let params = {
                 code: this.icode,
-                oid: this.code,
+                // 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 + "selectCourseByIc2", params)
+								.get(this.$store.state.api + "selectCourseByIc2SZ", params)
                 .then(res => {
                     this.loading = false;
                     if (res.data.length && res.data[0].length) {
@@ -72,7 +126,8 @@ export default {
                         this.courseId = res.data[0][0].courseId
                         this.getClass(res.data[0][0].classid)
                     } else {
-                        this.$message.error("不存在此随机码")
+											this.setErrMsg("不存在此识别码")
+                        // this.$message.error("不存在此随机码")
                     }
                 })
                 .catch(err => {
@@ -112,7 +167,19 @@ export default {
                 })
                 .catch(() => { });
 
-        }
+        },
+				// 选择学生
+				choose(userid,username){
+					this.chooseData = {
+						userid: userid,
+						username: username
+					}
+				},
+				// 设置错误信息
+				setErrMsg(msg){
+					this.showErrMsg = true;
+					this.errMsg = msg;
+				}
     },
 }
 </script>
@@ -122,9 +189,176 @@ export default {
     width: 100%;
     height: 100%;
     overflow: hidden;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-image: url("../../../assets/inviteLoginSZBG.png");
+		background-size: 100%;
+}
+
+.c-box{
+	width: 1200px;
+	height: 676px;
+	border-radius: 12px;
+	background-color: #4B88F5;
+	overflow: hidden;
+	display: flex;
+}
+
+.c-b-left{
+	flex: 1;
+	height: 100%;
+	background-image: url("../../../assets/inviteLoginSZImage.png");
+	background-size: 100%;
+}
+
+.c-b-right{
+	flex: 1;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: white;
+	position: relative;
+}
+
+.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: 400px;
+	height: 500px;
+}
+
+.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;
 }
 
-.i_box {
+.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%;
+	height: auto;
+	max-height: 300px;
+	margin-top: 20px;
+	display: flex;
+	flex-wrap: wrap;
+
+}
+
+.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%;
 }
@@ -220,5 +454,5 @@ export default {
     align-items: center !important;
     justify-content: center !important;
     margin: 0 !important;
-}
+} */
 </style>