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

<route lang="json5" type="page">
{
  layout: 'page',
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="content">
    <!-- 如果页面中的cell高度是固定不变的，则不需要设置cell-height-mode，如果页面中高度是动态改变的，则设置cell-height-mode="dynamic" -->
    <!-- 原先的v-model修改为@virtualListChange="virtualListChange"并赋值处理后的虚拟列表 -->
    <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-max" hover-class="none" :hover-stop-propagation="false">
          <wd-navbar
            title="院校排行榜"
            left-arrow
            @click-left="navigatorBack"
            safeAreaInsetTop
            :bordered="false"
            custom-class="bg-transparent! z-[99]"
          ></wd-navbar>
          <image
            class="h-[400rpx] w-full mt-[-40rpx]"
            :style="{ marginTop: `-${safeAreaInsets.top * 2}px` }"
            src="@/pages-sub/static/images/schoolRank/background.svg"
          />
          <image
            class="h-[78rpx] w-[270rpx] absolute top-[249rpx] left-[102rpx]"
            src="@/pages-sub/static/images/schoolRank/title.svg"
          />
          <image
            class="h-[190rpx] w-[190rpx] absolute top-[194rpx] left-[460rpx]"
            src="@/pages-sub/static/images/schoolRank/trophy.svg"
          />
        </view>
        <view class="px-[32rpx] my-[24rpx]">
          <wd-tabs
            v-model="tabIndex"
            custom-class="tab-custom"
            slidable="always"
            swipeable
            @change="tabsChange"
            ref="tabsRef"
          >
            <block v-for="item in unSortTypeList" :key="item.type" :name="item.type">
              <wd-tab :title="`${item.name}`" :name="item.type">
                <!-- <view class="content">内容{{ item}}</view> -->
              </wd-tab>
            </block>
          </wd-tabs>
        </view>
      </template>
      <view
        class="item"
        :id="`zp-id-${item.zp_index}`"
        :key="item.zp_index"
        v-for="(item, index) in schoolList"
        @click="itemClick(item, item.zp_index)"
      >
        <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">
              <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 useNavbarWeixin from '@/hooks/useNavbarWeixin'
import { getUniversityRank } from '@/service/index/api'
import { useUnSortType } from '@/hooks/useUnSortType'

const { safeAreaInsets } = useNavbarWeixin()

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

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

const itemClick = (item, index) => {
  console.log('点击了', item)
}
const tabsChange = (index, name) => {
  tabIndex.value = name
  // 当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
  paging.value.reload()
}
const { unSortTypeList } = useUnSortType()

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
}
</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 {
  position: relative;
  display: flex;
  flex-direction: column;

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

.item-content {
  flex: 1;
  margin-left: 20rpx;
}

.item-detail {
  margin-top: 10rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  color: #aaaaaa;
  word-break: break-all;
}

.item-line {
  position: absolute;
  bottom: 0rpx;
  left: 0rpx;
  height: 1px;
  width: 100%;
  background-color: #eeeeee;
}

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

:deep(.wd-tabs__nav-container) {
  gap: 16rpx;
  align-items: center;
  .wd-tabs__nav-item {
    width: 160rpx;
    height: 52rpx;
    font-size: 28rpx;

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

    padding: 0 !important;
  }

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

  .wd-tabs__line {
    display: none;
  }
}

:deep(.tab-custom) {
  --wot-tabs-nav-height: 52rpx;
}
</style>