ieplus-app/src/pagesMain/pages/volunteer/components/volunteer-tier.vue

<template>
    <view class="px-28 py-16">
        <view class="flex justify-between items-center">
            <view class="text-lg font-bold text-fore-title">院校梯队</view>
            <view class="text-sm text-fore-light flex items-center" @click="goCollegeList">
                <text>更多</text>
                <uv-icon name="arrow-right" color="info"/>
            </view>
        </view>
        <uv-scroll-list class="mt-28">
            <volunteer-tier-item v-for="(t,i) in list" :key="i" :data="t" :custom-class="{'ml-28':i>0}"
                                 @more="goCollegeListByTier(t)" @item-click="goCollegeDetail"/>
        </uv-scroll-list>
    </view>
</template>

<script setup lang="ts">
import {University, UniversityTier} from "@/types/university";
import VolunteerTierItem from "@/pagesMain/pages/volunteer/components/volunteer-tier-item.vue";
import {universityListByTier} from "@/api/modules/university";
import {useTransferPage} from "@/hooks/useTransferPage";
import {routes} from "@/common/routes";

const uiConfig = [{
    colorFrom: '#F6FCFF',
    colorTo: '#EBF9FF',
    colorText: '#19517F',
    icon: '/volunteer/index/tier_medal.png'
}, {
    colorFrom: '#F4FFFC',
    colorTo: '#E6FFF8',
    colorText: '#0E4C3C',
    icon: '/volunteer/index/tier_medal_2.png'
}]
const list = ref<UniversityTier[]>([])
const {transferTo} = useTransferPage()

const goCollegeList = () => {
    transferTo(routes.universityIndex)
}

const goCollegeListByTier = (t: UniversityTier) => {
    transferTo(routes.universityIndex, {data: {tier: t.typeValue}})
}

const goCollegeDetail = (u: University) => {
    const {id, code} = u
    transferTo(routes.universityDetail, {data: {id, code}})
}

onMounted(async () => {
    const res = await universityListByTier()
    list.value = res.data.map((item, idx) => {
        const conf = uiConfig[idx % uiConfig.length]
        return {
            ...item,
            ...conf
        }
    })
})
</script>

<style lang="scss" scoped>
</style>