volunteer-4/src/pages-sub/home/schoolRank/index.vue

<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="content">
    <z-paging
      ref="paging"
      use-virtual-list
      :force-close-inner-list="true"
      cell-height-mode="dynamic"
      @virtualListChange="virtualListChange"
      @query="queryList"
    >
      <!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
      <template #top>
        <view class="relative h-[400rpx]" hover-class="none" :hover-stop-propagation="false">
          <Navbar
            title="院校排行榜"
            left-arrow
            @click-left="navigatorBack"
            safeAreaInsetTop
            :bordered="false"
            bgColor="transparent"
          />
          <image
            class="absolute top-0 z-[-1]"
            src="https://api.static.ycymedu.com/sub/images/schoolRank/background.svg"
          />
          <image
            class="h-[78rpx] w-[270rpx] absolute top-[249rpx] left-[102rpx] z-[-1]"
            src="https://api.static.ycymedu.com/sub/images/schoolRank/title.svg"
          />
          <image
            class="h-[190rpx] w-[190rpx] absolute top-[194rpx] left-[460rpx] mix-blend-multiply z-[-1]"
            src="https://api.static.ycymedu.com/sub/images/schoolRank/trophy.png"
          />
        </view>
        <view class="my-[24rpx]">
          <z-tabs
            :current="tabIndex"
            :list="unSortTypeList"
            :scrollCount="4"
            value-key="code"
            inactive-color="#A28C6C"
            active-color="#684817"
            :bar-style="{
              display: 'none',
            }"
            :tabsStyle="{
              position: 'sticky',
              top: '0',
              zIndex: '99',
              height: '52rpx',
              gap: '16rpx',
            }"
            :active-style="{
              background: 'linear-gradient( 270deg, #F2CE95 0%, #F8DEBA 100%)',
            }"
            @change="handleTabChange"
            v-bind="{} as any"
          />
        </view>
      </template>
      <view
        class="item-wrapper"
        :id="`zp-id-${item.zp_index}`"
        :key="item.zp_index"
        v-for="item in schoolList"
        @click="itemClick(item)"
      >
        <view class="flex items-center py-[32rpx] w-full">
          <text class="text-[28rpx] text-[#999] font-normal">{{ item.rank }}</text>
          <image class="w-[80rpx] h-[80rpx] ml-[18rpx] mr-[24rpx]" :src="item.logo"></image>
          <view class="flex justify-between items-center flex-1">
            <view class="flex flex-col" hover-class="none">
              <text class="text-[28rpx] text-[#333] font-medium mb-[10rpx]">
                {{ item.universityName }}
              </text>
              <text class="text-[22rpx] text-[#999] font-normal">
                {{ item.cityName }}.{{ item.uType }}
              </text>
            </view>
            <view class="flex flex-col items-end">
              <text class="text-[28rpx] text-[#333] font-medium mb-[10rpx]">{{ item.score }}</text>
              <text class="text-[22rpx] text-[#999] font-normal">综合得分</text>
            </view>
          </view>
        </view>
        <view class="w-full h-[2rpx] bg-[#eee]" hover-class="none"></view>
      </view>
    </z-paging>
  </view>
</template>

<script lang="ts" setup>
import { getUniversityRank, getUnSortType } from '@/service/index/api'
import zTabs from '@/pages-sub/uni_modules/z-tabs/components/z-tabs/z-tabs.vue'
import Navbar from '@/pages-sub/components/navbar/Navbar.vue'

type UnSortType = { type: number; name: string }[]

let unSortTypeList = ref([])
getUnSortType().then((res) => {
  unSortTypeList.value = res.result as UnSortType
})

const navigatorBack = () => {
  uni.navigateBack()
}

const tabIndex = ref<number>(0)
const tabsRef = ref(null)

const itemClick = (item) => {
  console.log('点击了', item)
}

onLoad((option) => {
  tabIndex.value = Number(option?.type) || 0
  tabsRef.value?.setActiveTab(tabIndex.value)
})

const schoolList = ref([])
const paging = ref(null)

const queryList = (page: number, pageSize: number) => {
  getUniversityRank({ Type: tabIndex.value, PageIndex: page, PageSize: pageSize, Year: 2023 }).then(
    (res) => {
      paging.value?.complete((res.result as { rows: any[] }).rows)
    },
  )
}
const virtualListChange = (_vList) => {
  schoolList.value = _vList
}

const handleTabChange = (index: number) => {
  tabIndex.value = index
  paging.value.reload()
}
</script>

<style lang="scss" scoped>
.rank-body {
  height: calc(100% - 400rpx);
}

.swiper-box {
  width: 160rpx;
  height: 52rpx;
  font-size: 28rpx;

  font-weight: 500;
  color: #a28c6c;
  background-color: #f5efe1;
  border-radius: 8rpx;
}

.swiper-box:not(:last-child) {
  margin-right: 16px;
}

.active {
  color: #684817;
  background: linear-gradient(270deg, #f2ce95 0%, #f8deba 100%);
}

.item-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
}

/* #ifdef H5 */
:deep(.uni-scroll-view-content) {
  display: flex;
  align-items: center;
}
/* #endif */

:deep(.z-tabs-item) {
  width: 160rpx;

  font-size: 28rpx;

  font-weight: 500;
  color: #a28c6c;
  background-color: #f5efe1;
  border-radius: 8rpx;

  padding: 0 !important;
}
:deep(.z-tabs-list.tabs--z-tabs-list) {
  margin-top: 0 !important;
  display: flex;
  gap: 16rpx;
}

:deep(.z-tabs-item-title-container) {
  height: 100%;
  flex: 1 1 auto;

  .z-tabs-item-title-rpx {
    height: 100%;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8rpx;
  }
}
</style>