JDF_ElectronicPublicity_uni/components/schoolRank/schoolRank.vue

<template>
	<view v-show="isShow" class="i-h-p100  i-flex i-al-center i-jst-center i-z-index3">
		<view class="i-h-p100 i-w-p100">
			<view class="i-flex i-al-center i-jst-center">
				<view class="i-w-p80 animate__animated"
					:class="pageStatus===1?'animate__fadeInUp':pageStatus===3?'animate__fadeOutDown':''">
					<view class="i-h-110"></view>
					<view class="i-b-c-fff">
						<uni-row>
							<uni-col v-for="(item,index) in list" :key="index" :span="4">
								<view>
									<view class="i-h-60 i-flex i-al-center i-jst-center i-ml-10 i-mr-10 i-mt-10"
										:class="nowRegionIndex == index?'i-b-c-B42346 i-c-fff':'i-b-c-F7F7F7'"
										@click="RegionClick(item,index)">
										<span class="">{{item.region_title}}</span>
									</view>
								</view>
							</uni-col>
						</uni-row>
						<view>
							<view class="i-w-p100 i-b-c-F7F7F7  i-mt-10 i-fs-20">
								<view class="i-ptb-16">
									<uni-row>
										<uni-col :span="5" class="i-flex i-jst-center i-al-center">学校排名</uni-col>
										<uni-col :span="5">学校中文名称</uni-col>
										<uni-col :span="8">学校英文名称</uni-col>
									</uni-row>
								</view>
								<scroll-view class="i-h-600 i-w-p100" scroll-y="true" :show-scrollbar="false"
									:scroll-top="scrollTop">
									<view v-for="(item,index) in schoolList" :key="index">
										<view v-show="index==nowRegionIndex">
											<view v-for="(ite,ind) in item" :key="ind">
												<view class="i-ptb-16" :class="(ind%2)!=1?'i-b-c-fff':'i-b-c-F7F7F7'">
													<uni-row>
														<uni-col :span="5"
															class="i-flex i-jst-center i-al-center i-ptb-16">{{ite.rank_num}}</uni-col>
														<uni-col :span="5"
															class=" i-ptb-16">{{ite.school_name}}</uni-col>
														<uni-col :span="8"
															class=" i-ptb-16">{{ite.school_name_en}}</uni-col>
														<uni-col :span="4" :offset="2" class=" i-w-p100 i-t-end">
															<view class="i-mr-30 i-flex i-c-fff">
																<view
																	class="i-radius-30 i-b-c-B42346 i-ptb-16 i-plr-20 i-flex"
																	@click="toDetail(ite)">
																	<span>学校简介 >>></span>
																</view>
															</view>
														</uni-col>
													</uni-row>
												</view>
											</view>
										</view>
									</view>
									<view class="i-h-110"></view>
								</scroll-view>

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "schoolRank",
		data() {
			return {
				scrollTop: 0,
				// schoolList: [], // 学校列表
				nowRegionIndex: 0 // 当前地区
			};
		},
		props: {
			isShow: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: () => ([])
			},
			schoolList: {
				type: Array,
				default: () => ([])
			},
			// 页面状态 动画效果 1进入 2正常 3退出
			pageStatus: {
				type: Number,
				default: 1,
			},
		},
		watch: {
			list(newVal) {
				// console.log(newVal)
				// newVal.forEach((item, index) => {
				// 	this.schoolList.push(item.list)
				// });
				// console.log(this.schoolList)
			},
			isShow(newVal) {
				if (newVal) {
					// 强制重置滚动位置
					this.scrollTop = 0; // 先设置为 0
					this.$nextTick(() => {
						this.scrollTop = 1; // 强制触发滚动
						this.$nextTick(() => {
							this.scrollTop = 0; // 再次设置为 0
						});
					});
				}
			}
		},
		methods: {
			RegionClick(item, key) {
				// this.schoolList = item
				this.nowRegionIndex = key
			},
			toDetail(item) {
				item.title = item.school_name
				this.$emit('toDetailEvent', item)
			},
		}
	}
</script>

<style>

</style>