YingXingAI/pages/AlumniCircle/Alumni/Alumni copy.vue

<template>
	<view style="background: #fff">
		<u-navbar back-text="" title="校友找找" ></u-navbar>
		<view class="slot-wrap">
			<u-tabs-swiper ref="uTabs" :list="navList" :current="current" :is-scroll="true" gutter='60'
				:active-item-style="{ color: '#3CB5FB',transition:'all 0.5s'}" :bar-style="{ background: '#3CB5FB' }"
				@change="tabsChange"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
			style="height: calc(100vh - 0.8rem); width: 100%">
			<swiper-item class="swiper-item" v-for="(item, index) in navList" :key="index"
				style="height: calc(100vh - 0.8rem); width: 100%">
				<scroll-view scroll-y="true" style="height: calc(100vh - 0.8rem); width: 100%"
					@scrolltolower="onreachBottom" @refresherrefresh='' :scroll-with-animation="true">
					<!-- 学生 -->
					<template v-if='item.List.length'>
						<view class="flex-col student_list group_7">
							<view class="flex-row list-item group_8" :key="i" v-for="(v, i) in item.List"
								@click="toDetil(v.userId)">
								<u-avatar :src="$u.http.config.imgUrl+v.imageUrl" class="image_1" ></u-avatar>
								<view class="justify-between section_4">
									<view class="flex-col items-start group_9 view_1">
										<text class="text_6">{{v.name}}</text>
										<text class="text_24">{{v.college+' '+ v.major}} {{v.startYear}}级</text>
									</view>
									<image src="/static/common/img/16486889538940144558.png" class="image_3" />
								</view>
							</view>
						</view>
					</template>
					<view v-else style='padding-top:30vh'>
						<u-empty text="没有找到匹配的校友" mode="message"></u-empty>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperCurrent: 0,
				current: 0,
				List: [],
				navList: [{
						name: "全部",
						List: [],
					},
					{
						name: "学院",
						List: [],
					},
					{
						name: "同专业",
						List: [],
					},
					{
						name: "同届",
						List: [],
					},
					{
						name: "同行",
						List: [],
					},
					{
						name: "同城",
						List: [],
					},
				],
				PageIndex: 1,
				PageSize: 10,
			};
		},
		watch: {
			current() {
				this.PageIndex = 1
				this.getList(1);
			},
		},
		onLoad() {
			this.getList(1);
		},
		onShow() {
			// this.getList(1);
		},
		methods: {
			getList(type) {
				const data = {
					PageIndex: this.PageIndex,
					PageSize: this.PageSize,
					type: this.current
				}
				this.$u.api.AlumnSearchList(data).then(res => {
					if (this.navList[this.current].List.length == 0 || type == 1) {
						this.navList[this.current].List = res.items
					} else {
						this.navList[this.current].List = this.navList[this.current].List.concat(res.items)
					}
				})
			},
			toDetil(id) {
				this.$u.route({
					url: '/pages/AlumniCircle/userDetail/userDetail?id=' + id + '&type=2'
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问速切题，快换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				this.PageIndex++
				this.getList(2)
			},
			//返回上一级
			router() {
				uni.switchTab({
					url: '../../AlumniCircle/alumnus/alumnus'
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	::v-deep .u-avatar__sex {
		width: 0.1rem !important;
		height: 0.1rem !important;
		border: none;
	}

	.student_list {
		.list-item {
			padding: 0.05rem 0.2rem;
			box-shadow: 0px 0.0063rem #eaeaea;

			.image_1 {
				flex-shrink: 0;
				align-self: center;
				width: 0.5rem !important;
				height: 0.5rem !important;  
				border-radius: 50%;
				flex:0 0 0.5rem !important;
			}

			.section_4 {
				margin-left: 0.05rem;
				padding: 0.1rem;
				flex: 1 1 auto;

				.group_9 {
					align-self: flex-start;
					color: #020202;
					font-size: 0.19rem;
					letter-spacing: 0.019rem;

					.text_6 {
						color: #020202;
						font-size: 0.16rem;
						line-height: 1;
						letter-spacing: 0.019rem;
					}

					.text_24 {
						margin-top: 0.1rem;
						color: #b4b6bd;
						font-size: 0.14rem;
						line-height: 1;
						letter-spacing: 0.015rem;
						width: 2rem;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.view_1 {
					align-self: initial;
					color: initial;
					font-size: initial;
					line-height: initial;
					letter-spacing: initial;
					white-space: initial;
				}

				.image_3 {
					align-self: center;
					width: 0.075rem;
					height: 0.14rem;
					border-radius: 50%;
				}
			}
		}
	}

	.list {
		margin-top: 0.17rem;
		padding: 0 5%;

		.list-item {
			padding: 0.13rem 0.12rem 0.13rem 0.33rem;
			background-color: #f6f7fa;
			border-radius: 0.05rem;

			.text_6 {
				color: #373b48;
				font-size: 0.15rem;
				font-family: PingFang;
				line-height: 0.14rem;
			}

			.text_10 {
				color: #ffffff;
				line-height: 0.16rem;
			}

			.image_1 {
				margin-bottom: 0.02rem;
				width: 0.06rem;
				height: 0.11rem;
			}

			.image_5 {
				margin-bottom: 0.04rem;
			}
		}

		.section_5 {
			padding: 0.12rem 0.12rem 0.12rem 0.34rem;
			background-color: #2e9bff;
			margin-top: 0.07rem;
		}
	}
</style>