修改荔园登录页

src/views/login/loginPage.vue

@@ -47,259 +47,281 @@
 					</div>
 				</div>
 				<template v-if="steps == 1">
-					<span
-						v-if="['default', 'weChat', 'orgL', 'code'].includes(loginType)"
-						>{{ lang.login }}</span
-					>
+					<div style="display: flex;justify-content: space-between;">
+						<div>
+							<span
+								class="logT"
+								v-if="['default', 'weChat', 'orgL', 'code'].includes(loginType)"
+								>{{ lang.login }}</span
+							>
+						</div>
+						
+						<div style="display: flex;justify-content: center;padding: 50px 0 43px;box-sizing: border-box;">
+							<el-button @click="cutlog(0)" :style="{background: loginMethod == 0 ? '#0663FE' :'',color:loginMethod == 0 ? '#fff' :''}">学生</el-button>
+							<el-button @click="cutlog(1)" :style="{background: loginMethod == 1 ? '#0663FE' :'',color:loginMethod == 1 ? '#fff' :''}">教师</el-button>
+						</div>
+					</div>
 					<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)"
-						>
+					<template v-if="loginMethod !== null">
+						<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"
-							>
-								<img
-									:src="
-										loginType == 'weChat'
-											? require('../../assets/login/wxl.svg')
-											: require('../../assets/login/wxh.svg')
-									"
-									:class="[loginType == 'weChat' ? 'backWin' : '']"
-								/>
-							</el-tooltip>
+							{{ 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
-							@click="(loginType = 'default'), ((SuffixData = ''), (org = ''))"
-							v-if="['default', 'weChat', 'orgL', 'code'].includes(loginType)"
-						>
-							<el-tooltip
-								effect="dark"
-								:content="lang.Accpaslogin"
-								placement="bottom"
+						<div class="lp_r_b_line">
+							<template
+								v-if="['default', 'weChat', 'orgL', 'code'].includes(loginType)"
 							>
-								<img
-									:src="
-										loginType == 'default'
-											? require('../../assets/login/zhl.svg')
-											: require('../../assets/login/zhh.svg')
+								<div></div>
+								<span>{{ lang.Otherlogin }}</span>
+								<div></div>
+							</template>
+						</div>
+						
+
+						<div class="lp_r_b_iconBtn">
+							<template v-if="loginMethod == 0">
+								<div
+									v-if="['default', 'weChat', 'orgL', 'code'].includes(loginType)"
+									@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>
+							</template>
+							
+							<template v-if="loginMethod == 1">
+								<div
+									@click="(loginType = 'orgL'), (org = '')"
+									v-if="
+										['default', 'weChat', 'orgL', 'code'].includes(loginType) &&
+										allowOrgList.findIndex((i) => i.area) == -1
 									"
-									: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)"
+								>
+									<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>
+							</template>
+
+							
 						</div>
-					</div>
+
+					</template>
 				</template>
 				<div class="stuPage" v-if="steps == 2">
 					<div>{{ lang.choosename }}</div>
@@ -352,6 +374,7 @@ export default {
 	name: "loginPage",
 	data() {
 		return {
+			loginMethod: null,
 			// 判断显示组织号区域
 			SuffixShow: false,
 			// 组织号查询区域结果
@@ -459,6 +482,15 @@ export default {
 			login: "user/login",
 			logout: "user/logout",
 		}),
+		cutlog(val){
+			console.log(val);
+			this.loginMethod = val
+			if (val == 0) {
+				this.loginType = 'code'
+			}else{
+				this.loginType = 'default'
+			}
+		},
 		somp(val){
 			const element = document.getElementById(`group-${val}`);
 				if (element) {
@@ -1350,6 +1382,7 @@ export default {
 .lp_r_box {
 	width: 500px;
 	height: auto;
+	min-height: 666px;
 	box-sizing: border-box;
 	padding: 20px;
 }
@@ -1365,7 +1398,7 @@ export default {
 	font-size: 18px;
 }
 
-.lp_r_box > span {
+.logT {
 	font-size: 46px;
 	font-weight: bold;
 	margin: 40px 0;