修改学生组织号登录页面按字母分组展示

src/views/login/loginPage.vue

@@ -303,23 +303,29 @@
 				</template>
 				<div class="stuPage" v-if="steps == 2">
 					<div>{{ lang.choosename }}</div>
-					<div style="max-height: 400px;overflow: auto;">
-						<div class="stuList">
-							<!-- <span v-for="i in classJuri" :key="i.userid">{{ i.name }}</span> -->
-							<!-- <div v-for="i in 10" :key="i" @click="selAcc(i)">yym</div> -->
-							<div
-								v-for="i in classJuri"
-								:key="i.userid"
-								:class="[stuInfoCode.userid == i.userid ? 'stuback' : '']"
-								@click="selAcc(i)"
-							>
-								<el-tooltip effect="dark" :content="i.name" placement="top">
-									<span>
-										{{ i.name }}
-									</span>
-								</el-tooltip>
+					<div style="max-height: 400px;display: flex;gap: 10px;">
+						<div class="nameList">
+							<div class="stuList" v-for="op in classJuri" :key="op.id">
+								<span style="position: absolute;top: -18px;left: 0;" :id="'group-'+op.id">{{ op.id }}</span>
+								<div
+									v-for="i in op.child"
+									:key="i.userid"
+									:class="[stuInfoCode.userid == i.userid ? 'stuback' : '','nameModule']"
+									@click="selAcc(i)"
+								>
+									<el-tooltip effect="dark" :content="i.name" placement="top">
+										<span>
+											{{ i.name }}
+										</span>
+									</el-tooltip>
+								</div>
 							</div>
 						</div>
+						<div style="display: flex;flex-direction: column;gap: 5px;cursor: pointer;width: 20px;">
+							<span v-for="op in classJuri" :key="op.id" @click="somp(op.id)">
+								{{ op.id }}
+							</span>
+						</div>
 					</div>
 					<div v-if="!classJuri.length" class="none">{{ lang.nostudents }}</div>
 					<div class="lp_r_b_btn" @click="loginCode" v-loading="loading">
@@ -386,6 +392,7 @@ export default {
 			showName: "",
 			oloading: false,
 			openid: "",
+			uppercaseAlphabet:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
 			allowOrgList: [
 				{
 					area:
@@ -452,6 +459,24 @@ export default {
 			login: "user/login",
 			logout: "user/logout",
 		}),
+		somp(val){
+			const element = document.getElementById(`group-${val}`);
+				if (element) {
+					element.scrollIntoView({
+						behavior: 'smooth',
+						block: 'start'
+					});
+					
+					// 添加视觉反馈
+					element.classList.add('highlight');
+					setTimeout(() => {
+						element.classList.remove('highlight');
+					}, 1000);
+				}
+			// document.getElementById(val).scrollIntoView({
+			// 	behavior: 'smooth'
+			// });
+		},
 		// 返回旧版本
 		backVersion() {
 			this.$confirm(this.lang.backoldversion, this.lang.tip, {
@@ -1103,7 +1128,7 @@ export default {
 					// this.classJuri = res.data[0];
 
 					this.classJuri = this.groupByName(res.data[0])
-					console.log('this.classJuri',this.classJuri);
+					// console.log('this.classJuri',this.classJuri);
 						
 					this.steps = 2;
 				})
@@ -1113,11 +1138,37 @@ export default {
 		},
 		
 		groupByName(list) {
-			return list.sort((a, b) => {
-				const pinyinA = pinyin(a.username, { style: pinyin.STYLE_NORMAL }).join('');
-				const pinyinB = pinyin(b.username, { style: pinyin.STYLE_NORMAL }).join('');
-				return pinyinA.localeCompare(pinyinB);
+			let alphabetArray = Array.from({length: 26}, (_, i) => ({
+				id: String.fromCharCode(65 + i),
+				child: []
+			}));
+			alphabetArray.push({id:'#',child:[]})
+			console.log('alphabetArray1',alphabetArray);
+
+			list.forEach(e => {
+				let l = pinyin(e.username, { style: pinyin.STYLE_NORMAL }).join('')[0].toLocaleUpperCase()
+				// console.log('l',l);
+				
+				if (this.uppercaseAlphabet.includes(l)) {
+					alphabetArray.forEach(k=>{
+						if (l == k.id) {
+							k.child.push(e)
+						}
+					})
+				}else{
+					alphabetArray[alphabetArray.length-1].child.push(e)
+				}
+				
 			});
+			alphabetArray = alphabetArray.filter(e=>e.child.length)
+			console.log('alphabetArray',alphabetArray);
+			
+			return alphabetArray
+			// return list.sort((a, b) => {
+			// 	const pinyinA = pinyin(a.username, { style: pinyin.STYLE_NORMAL }).join('');
+			// 	const pinyinB = pinyin(b.username, { style: pinyin.STYLE_NORMAL }).join('');
+			// 	return pinyinA.localeCompare(pinyinB);
+			// });
 		},
 		// 选择学生账户
 		selAcc(val) {
@@ -1500,17 +1551,23 @@ export default {
 	flex-direction: column;
 	gap: 20px;
 }
+.nameList{
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+	padding-top: 20px;
+	box-sizing: border-box;
+    gap: 25px;
+}
 .stuList {
-	flex: 1;
 	display: -moz-grid;
 	display: grid;
 	height: 100%;
-	/* max-height: 400px;
-	overflow: auto; */
 	grid-template-columns: repeat(4, 1fr);
-	gap: 15px;
+	gap: 10px;
+	position: relative;
 }
-.stuList div {
+.nameModule {
 	padding: 3px 15px;
 	border-radius: 3px;
 	-webkit-line-clamp: 1;