11wqe1 před 1 měsícem
rodič
revize
a312f3e813
3 změnil soubory, kde provedl 294 přidání a 224 odebrání
  1. 1 1
      src/lang/cn.json
  2. 1 1
      src/lang/hk.json
  3. 292 222
      src/views/login/loginPage.vue

+ 1 - 1
src/lang/cn.json

@@ -32,7 +32,7 @@
 	"Accountcannot": "账号不可登录,请使用您的专属网址",
 	"accountnotcreated": "还未在此组织下创建账号,请先创建",
 	"addsuffix": "请在账号后添加组织后缀(账号@组织号.com 如:123456@cocorobo.com)",
-	"accountmustOrg": "该账号须使用“组织号登”",
+	"accountmustOrg": "该账号须使用“组织号登”",
 	"Nologinpermission": "无登录权限",
 	"Loginsuccessful": "登录成功",
 	"Loginfailed": "登录失败",

+ 1 - 1
src/lang/hk.json

@@ -32,7 +32,7 @@
   "Accountcannot": "賬號不可登錄,請使用您的專屬網址",
   "accountnotcreated": "還未在此組織下創建賬號,請先創建",
   "addsuffix": "請在賬號後添加組織後綴(賬號@組織號.com 如:123456@cocorobo.com)",
-  "accountmustOrg": "該賬號須使用「組織號登」",
+  "accountmustOrg": "該賬號須使用「組織號登」",
   "Nologinpermission": "無登錄權限",
   "Loginsuccessful": "登錄成功",
   "Loginfailed": "登錄失敗",

+ 292 - 222
src/views/login/loginPage.vue

@@ -49,257 +49,284 @@
 				<template v-if="steps == 1">
 					<span
 						v-if="['default', 'weChat', 'orgL', 'code'].includes(loginType)"
-						>{{ lang.login }}</span
-					>
-					<span v-if="['bind'].includes(loginType)">{{
-						lang.Bindaccount
-					}}</span>
-					<div class="lp_r_b_formArea">
-						<!-- 微信绑定,账号登录,组织号登录 -->
-						<div
-							class="fa_input"
-							v-if="['default', 'bind', 'orgL'].includes(loginType)"
+						style="display: flex;justify-content: space-between;align-items: first baseline;"
 						>
+						{{ lang.login }}
+						<!-- 返回到选择身份 -->
+						<div v-if="logIdentity != 0" @click="backIDyData" class="backIDy">重选身份</div>
+					</span>
+					
+					
+					<!-- 选择身份登录页  -->
+					<div class="logIdy" v-if="logIdentity == 0">
+						<div>
+							请选择您的身份
+						</div>
+						<div style="display: flex;gap: 20px;">
+							<div class="logIdImg"  @click="logIdentity = 1">
+								<img src="../../assets/login/logTea.svg"  alt="">
+								<span>教师</span>
+							</div>
+							<div class="logIdImg"  @click="logIdentity = 2,getData()">
+								<img src="../../assets/login/logStu.svg" alt="">
+								<span>学生</span>
+							</div>
+							<!-- <el-button size="mini">教师</el-button>
+							<el-button size="mini">学生</el-button> -->
+						</div>
+					</div>
+					<!-- 登录页 -->
+					<template v-else>
+						<span v-if="['bind'].includes(loginType)">
+							<!-- 绑定账户 -->
+							{{ lang.Bindaccount }}</span>
+						<div class="lp_r_b_formArea">
+							<!-- 微信绑定,账号登录,组织号登录 -->
 							<div
-								class="fa_i_item"
-								style="position: relative"
-								v-if="loginType == 'orgL'"
+								class="fa_input"
+								v-if="['default', 'bind', 'orgL'].includes(loginType)"
 							>
-								<span>{{ lang.OrganizationNumber }}</span>
-								<div>
-									<input
-										type="text"
-										:placeholder="lang.enterorgnumber"
-										v-model.trim="SuffixData"
-										@input="getSuffix"
-									/>
-								</div>
 								<div
-									style="
-										border: none;
-										font-size: 12px;
-										position: absolute;
-										left: 0;
-										bottom: -70%;
-									"
-									v-if="SuffixData.trim()"
+									class="fa_i_item"
+									style="position: relative"
+									v-if="loginType == 'orgL'"
 								>
-									{{ orginfo.length ? orginfo[0].name : lang.schoolnotexist }}
+									<span>{{ lang.OrganizationNumber }}</span>
+									<div>
+										<input
+											type="text"
+											:placeholder="lang.enterorgnumber"
+											v-model.trim="SuffixData"
+											@input="getSuffix"
+										/>
+									</div>
+									<div
+										style="
+											border: none;
+											font-size: 12px;
+											position: absolute;
+											left: 0;
+											bottom: -70%;
+										"
+										v-if="SuffixData.trim()"
+									>
+										{{ orginfo.length ? orginfo[0].name : lang.schoolnotexist }}
+									</div>
 								</div>
-							</div>
-							<div class="fa_i_item">
-								<span>{{ lang.account }}</span>
-								<div>
-									<input
-										type="text"
-										:placeholder="lang.enteraccount"
-										v-model.trim="account"
-										@keyup.enter="loginFn"
-									/>
+								<div class="fa_i_item">
+									<span>{{ lang.account }}</span>
+									<div>
+										<input
+											type="text"
+											:placeholder="lang.enteraccount"
+											v-model.trim="account"
+											@keyup.enter="loginFn"
+										/>
+									</div>
 								</div>
-							</div>
 
-							<div class="fa_i_item">
-								<span>{{ lang.password }}</span>
-								<div>
-									<input
-										type="password"
-										:placeholder="lang.enterpassword"
-										v-model="password"
-										@keyup.enter="loginFn"
-									/>
+								<div class="fa_i_item">
+									<span>{{ lang.password }}</span>
+									<div>
+										<input
+											type="password"
+											:placeholder="lang.enterpassword"
+											v-model="password"
+											@keyup.enter="loginFn"
+										/>
+									</div>
 								</div>
 							</div>
-						</div>
-						<!-- 微信登录  -->
-						<div class="fa_weChat" v-if="['weChat'].includes(loginType)">
-							<div id="QRcode" class="QRcode" ref="QRcode"></div>
-							<!-- @click="loginType = 'bind'" -->
-						</div>
-						<!-- 随机码登录  -->
-						<div class="fa_input" v-if="['code'].includes(loginType)">
-							<div class="fa_i_item" style="position: relative">
-								<span v-if="prefixL == 'liyuan_'">{{ lang.SelectCampus }}</span>
-								<span v-else>{{ lang.OrganizationNumber }}</span>
-								<!-- v-if="prefixL == 'liyuan_'" -->
-								<div v-if="prefixL == 'liyuan_'">
-									<el-select
-										v-loading="Codeloading"
-										@change="getSuffix"
-										v-model.trim="SuffixData"
-										:placeholder="lang.Pleaseselect"
-									>
-										<el-option
-											v-for="item in CodeOptions"
-											:key="item.code"
-											:label="item.name"
-											:value="item.code"
+							<!-- 微信登录  -->
+							<div class="fa_weChat" v-if="['weChat'].includes(loginType)">
+								<div id="QRcode" class="QRcode" ref="QRcode"></div>
+								<!-- @click="loginType = 'bind'" -->
+							</div>
+							<!-- 随机码登录  -->
+							<div class="fa_input" v-if="['code'].includes(loginType)">
+								<div class="fa_i_item" style="position: relative">
+									<span v-if="prefixL == 'liyuan_'">{{ lang.SelectCampus }}</span>
+									<span v-else>{{ lang.OrganizationNumber }}</span>
+									<!-- v-if="prefixL == 'liyuan_'" -->
+									<div v-if="prefixL == 'liyuan_'">
+										<el-select
+											v-loading="Codeloading"
+											@change="getSuffix"
+											v-model.trim="SuffixData"
+											:placeholder="lang.Pleaseselect"
 										>
-										</el-option>
-									</el-select>
-								</div>
-								<div v-else>
-									<input
-										type="text"
-										:placeholder="lang.enterorgnumber"
-										v-model.trim="SuffixData"
-										@input="getrandomcodeSuffix"
-									/>
-								</div>
-								<div
-									style="
-										border: none;
-										font-size: 12px;
-										position: absolute;
-										left: 0;
-										bottom: -70%;
-									"
-									v-if="SuffixData.trim() && prefixL != 'liyuan_'"
-								>
-									{{ orginfo.length ? orginfo[0].name : lang.schoolnotexist }}
+											<el-option
+												v-for="item in CodeOptions"
+												:key="item.code"
+												:label="item.name"
+												:value="item.code"
+											>
+											</el-option>
+										</el-select>
+									</div>
+									<div v-else>
+										<input
+											type="text"
+											:placeholder="lang.enterorgnumber"
+											v-model.trim="SuffixData"
+											@input="getrandomcodeSuffix"
+										/>
+									</div>
+									<div
+										style="
+											border: none;
+											font-size: 12px;
+											position: absolute;
+											left: 0;
+											bottom: -70%;
+										"
+										v-if="SuffixData.trim() && prefixL != 'liyuan_'"
+									>
+										{{ orginfo.length ? orginfo[0].name : lang.schoolnotexist }}
+									</div>
 								</div>
-							</div>
 
-							<div class="fa_i_item">
-								<span>{{ lang.randomcode }}</span>
-								<div>
-									<input
-										type="text"
-										:placeholder="lang.Pleaseenter"
-										v-model.trim="icode"
-										@keyup.enter="nextSteps"
-									/>
+								<div class="fa_i_item">
+									<span>{{ lang.randomcode }}</span>
+									<div>
+										<input
+											type="text"
+											:placeholder="lang.Pleaseenter"
+											v-model.trim="icode"
+											@keyup.enter="nextSteps"
+										/>
+									</div>
 								</div>
 							</div>
 						</div>
-					</div>
-
-					<div
-						class="lp_r_b_btn"
-						v-if="['code'].includes(loginType)"
-						@click="nextSteps"
-						v-loading="loading"
-					>
-						{{ lang.confirm }}
-					</div>
-					<div
-						class="lp_r_b_btn"
-						v-if="['default', 'orgL'].includes(loginType)"
-						@click="loginFn"
-						v-loading="loading"
-					>
-						{{ lang.login }}
-					</div>
-					<div
-						class="lp_r_b_btn"
-						v-if="loginType == 'weChat'"
-						style="opacity: 0; cursor: default"
-					>
-						{{ lang.Accpaslogin }}
-					</div>
-					<div class="btn_box" v-if="loginType == 'bind'">
-						<div class="lp_r_b_btn" @click="loginFn" v-loading="loading">
-							{{ lang.Confirmbinding }}
-						</div>
-						<div class="lp_r_b_btn" @click="loginType = 'default'">
-							{{ lang.Returnlogin }}
-						</div>
-					</div>
-					<div class="lp_r_b_line">
-						<template
-							v-if="['default', 'weChat', 'orgL', 'code'].includes(loginType)"
-						>
-							<div></div>
-							<span>{{ lang.Otherlogin }}</span>
-							<div></div>
-						</template>
-					</div>
-					<div class="lp_r_b_iconBtn">
 						<div
-							v-if="['default', 'weChat', 'orgL', 'code'].includes(loginType)"
-							@click="getData"
+							class="lp_r_b_btn"
+							v-if="['code'].includes(loginType)"
+							@click="nextSteps"
+							v-loading="loading"
 						>
-							<!-- v-if="['default', 'weChat', 'orgL', 'code'].includes(loginType)" -->
-							<el-tooltip
-								effect="dark"
-								:content="lang.Rancodelogin"
-								placement="bottom"
-							>
-								<img
-									:src="
-										loginType == 'code'
-											? require('../../assets/login/codel.png')
-											: require('../../assets/login/code.png')
-									"
-									:class="[loginType == 'code' ? 'backWin' : '']"
-								/>
-							</el-tooltip>
+							{{ lang.confirm }}
 						</div>
-
 						<div
-							@click="(loginType = 'orgL'), (org = '')"
-							v-if="
-								['default', 'weChat', 'orgL', 'code'].includes(loginType) &&
-								allowOrgList.findIndex((i) => i.area) == -1
-							"
+							class="lp_r_b_btn"
+							v-if="['default', 'orgL'].includes(loginType)"
+							@click="loginFn"
+							v-loading="loading"
 						>
-							<el-tooltip
-								effect="dark"
-								:content="lang.OrgIDLogin"
-								placement="bottom"
-							>
-								<img
-									style="width: 32px; object-fit: cover"
-									:src="
-										loginType == 'orgL'
-											? require('../../assets/login/zzl.svg')
-											: require('../../assets/login/orgh.svg')
-									"
-									:class="[loginType == 'orgL' ? 'backWin' : '']"
-								/>
-							</el-tooltip>
+							{{ lang.login }}
 						</div>
-
 						<div
-							@click="wechatLogin"
-							v-if="['default', 'weChat', 'orgL', 'code'].includes(loginType)"
+							class="lp_r_b_btn"
+							v-if="loginType == 'weChat'"
+							style="opacity: 0; cursor: default"
 						>
-							<el-tooltip
-								effect="dark"
-								:content="lang.WeChatLogin"
-								placement="bottom"
+							{{ lang.Accpaslogin }}
+						</div>
+						<div class="btn_box" v-if="loginType == 'bind'">
+							<div class="lp_r_b_btn" @click="loginFn" v-loading="loading">
+								{{ lang.Confirmbinding }}
+							</div>
+							<div class="lp_r_b_btn" @click="loginType = 'default'">
+								{{ lang.Returnlogin }}
+							</div>
+						</div>
+						<div class="lp_r_b_line">
+							<template
+								v-if="['default', 'weChat', 'orgL', 'code'].includes(loginType)"
 							>
-								<img
-									:src="
-										loginType == 'weChat'
-											? require('../../assets/login/wxl.svg')
-											: require('../../assets/login/wxh.svg')
-									"
-									:class="[loginType == 'weChat' ? 'backWin' : '']"
-								/>
-							</el-tooltip>
+								<div></div>
+								<span>{{ lang.Otherlogin }}</span>
+								<div></div>
+							</template>
 						</div>
+						<div class="lp_r_b_iconBtn">
+							<div
+								v-if="['default', 'weChat', 'orgL', 'code'].includes(loginType) && logIdentity == 2"
+								@click="getData"
+							>
+								<!-- v-if="['default', 'weChat', 'orgL', 'code'].includes(loginType)" -->
+								<el-tooltip
+									effect="dark"
+									:content="lang.Rancodelogin"
+									placement="bottom"
+								>
+									<img
+										:src="
+											loginType == 'code'
+												? require('../../assets/login/codel.png')
+												: require('../../assets/login/code.png')
+										"
+										:class="[loginType == 'code' ? 'backWin' : '']"
+									/>
+								</el-tooltip>
+							</div>
 
-						<div
-							@click="(loginType = 'default'), ((SuffixData = ''), (org = ''))"
-							v-if="['default', 'weChat', 'orgL', 'code'].includes(loginType)"
-						>
-							<el-tooltip
-								effect="dark"
-								:content="lang.Accpaslogin"
-								placement="bottom"
+							<div
+								@click="(loginType = 'orgL'), (org = '')"
+								v-if="
+									['default', 'weChat', 'orgL', 'code'].includes(loginType) &&
+									allowOrgList.findIndex((i) => i.area) == -1 && logIdentity == 1
+								"
 							>
-								<img
-									:src="
-										loginType == 'default'
-											? require('../../assets/login/zhl.svg')
-											: require('../../assets/login/zhh.svg')
-									"
-									:class="[loginType == 'default' ? 'backWin' : '']"
-								/>
-							</el-tooltip>
+								<el-tooltip
+									effect="dark"
+									:content="lang.OrgIDLogin"
+									placement="bottom"
+								>
+									<img
+										style="width: 32px; object-fit: cover"
+										:src="
+											loginType == 'orgL'
+												? require('../../assets/login/zzl.svg')
+												: require('../../assets/login/orgh.svg')
+										"
+										:class="[loginType == 'orgL' ? 'backWin' : '']"
+									/>
+								</el-tooltip>
+							</div>
+
+							<div
+								@click="wechatLogin"
+								v-if="['default', 'weChat', 'orgL', 'code'].includes(loginType) && logIdentity == 1"
+							>
+								<el-tooltip
+									effect="dark"
+									:content="lang.WeChatLogin"
+									placement="bottom"
+								>
+									<img
+										:src="
+											loginType == 'weChat'
+												? require('../../assets/login/wxl.svg')
+												: require('../../assets/login/wxh.svg')
+										"
+										:class="[loginType == 'weChat' ? 'backWin' : '']"
+									/>
+								</el-tooltip>
+							</div>
+
+							<div
+								@click="(loginType = 'default'), ((SuffixData = ''), (org = ''))"
+								v-if="['default', 'weChat', 'orgL', 'code'].includes(loginType)"
+							>
+								<el-tooltip
+									effect="dark"
+									:content="lang.Accpaslogin"
+									placement="bottom"
+								>
+									<img
+										:src="
+											loginType == 'default'
+												? require('../../assets/login/zhl.svg')
+												: require('../../assets/login/zhh.svg')
+										"
+										:class="[loginType == 'default' ? 'backWin' : '']"
+									/>
+								</el-tooltip>
+							</div>
 						</div>
-					</div>
+					</template>
+
 				</template>
 				<div class="stuPage" v-if="steps == 2">
 					<div>{{ lang.choosename }}</div>
@@ -352,6 +379,8 @@ export default {
 	name: "loginPage",
 	data() {
 		return {
+			// 0选择页 1教师 2学生
+			logIdentity:0,
 			// 判断显示组织号区域
 			SuffixShow: false,
 			// 组织号查询区域结果
@@ -459,6 +488,16 @@ export default {
 			login: "user/login",
 			logout: "user/logout",
 		}),
+		// 返回身份登录页后清除数据 
+		backIDyData(){
+			this.password = '';
+			this.org = '';
+			this.account = '';
+			this.loginType = "default";
+			this.SuffixData = '';
+			this.icode = '';
+			this.logIdentity = 0;
+		},
 		somp(val){
 			const element = document.getElementById(`group-${val}`);
 				if (element) {
@@ -1622,6 +1661,37 @@ export default {
 	background: #006afe;
 	color: #fff;
 }
+.logIdy{
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+	padding: 30px 0 306px;
+	box-sizing: border-box;
+}
+.backIDy{
+	font-size: 14px;
+	font-weight: normal;
+	cursor: pointer;
+}
+.logIdImg{
+	background: #F1F2F6;
+	width: 50%;
+	min-width: 100px;
+	height: 120px;
+	padding: 10px;
+	box-sizing: border-box;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 5px;
+	flex-direction: column;
+	border-radius: 10px;
+	cursor: pointer;
+}
+.logIdImg img{
+	height: 50px;
+	width: 50px;
+}
 /* .backWin{ */
 /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); */
 /* }  */