volunteer tier - api

src/pagesMain/pages/volunteer/components/volunteer-banner-item.vue

@@ -11,7 +11,7 @@
     </view>
 </template>
 
-<script setup lang="ts" name="VolunteerBannerItem">
+<script setup lang="ts">
 defineProps({
     title: {
         type: String,

src/pagesMain/pages/volunteer/components/volunteer-banner.vue

@@ -11,7 +11,7 @@
     </view>
 </template>
 
-<script setup lang="ts" name="VolunteerBanner">
+<script setup lang="ts">
 import VolunteerBannerItem from "@/pagesMain/pages/volunteer/components/volunteer-banner-item.vue";
 import {useTransferPage} from "@/hooks/useTransferPage";
 import {routes} from "@/common/routes";

src/pagesMain/pages/volunteer/components/volunteer-menu-item.vue

@@ -5,7 +5,7 @@
     </view>
 </template>
 
-<script setup lang="ts" name="VolunteerMenuItem">
+<script setup lang="ts">
 defineProps({
     title: String,
     icon: String

src/pagesMain/pages/volunteer/components/volunteer-menu.vue

@@ -4,7 +4,7 @@
     </view>
 </template>
 
-<script setup lang="ts" name="VolunteerMenu">
+<script setup lang="ts">
 import VolunteerMenuItem from "@/pagesMain/pages/volunteer/components/volunteer-menu-item.vue";
 import {routes} from "@/common/routes";
 import {useTransferPage} from "@/hooks/useTransferPage";

src/pagesMain/pages/volunteer/components/volunteer-policy-item.vue

@@ -9,7 +9,7 @@
     </view>
 </template>
 
-<script setup lang="ts" name="VolunteerPolicyItem">
+<script setup lang="ts">
 defineProps({
     title: String,
     desc: String,

src/pagesMain/pages/volunteer/components/volunteer-policy.vue

@@ -8,7 +8,7 @@
     </view>
 </template>
 
-<script setup lang="ts" name="VolunteerPolicy">
+<script setup lang="ts">
 import {getNewsMainList} from "@/api/modules/news";
 import {Guide} from "@/types/news";
 import {useTransferPage} from "@/hooks/useTransferPage";

src/pagesMain/pages/volunteer/components/volunteer-tier-item.vue

@@ -1,12 +1,12 @@
 <template>
-    <view class="rounded-xl w-460 min-w-460 volunteer-tier-item"
+    <view class="rounded-xl w-460 min-w-460 volunteer-tier-item" :class="customClass"
           :style="{ background: `radial-gradient( 0% 0% at 0% 0%, ${data.colorFrom} 0%, ${data.colorTo} 100%)` }">
         <view class="h-90 px-30 flex justify-between items-center">
             <view class="flex items-center">
                 <ie-image is-oss :src="data.icon" custom-class="w-48 h-48"/>
                 <text class="ml-8 text-base font-bold" :style="{color:data.colorText}">{{ data.typeName }}</text>
             </view>
-            <view class="text-sm text-fore-light flex items-center">
+            <view class="text-sm text-fore-light flex items-center" @click="$emit('more')">
                 <text>更多</text>
                 <uv-icon name="arrow-right" color="info"/>
             </view>
@@ -14,7 +14,7 @@
         <uv-line hairline/>
         <view class="mt-10 px-30 text-sm" :style="{color:data.colorText}">{{ data.desc }}</view>
         <view class="p-30 flex flex-col gap-20">
-            <view v-for="(u, i) in data.list" class="flex text-sm">
+            <view v-for="(u, i) in data.list" class="flex text-sm" @click="$emit('item-click', u)">
                 <view class="w-24 text-fore-light">{{ i + 1 }}</view>
                 <view class="text-fore-title truncate">{{ u.name }}</view>
             </view>
@@ -22,12 +22,16 @@
     </view>
 </template>
 
-<script setup lang="ts" name="VolunteerTierItem">
-import {Tier} from '@/types/major'
+<script setup lang="ts">
+
+import {UniversityTier} from "@/types/university";
 
 defineProps<{
-    data: Tier
+    data: UniversityTier;
+    customClass: string|object;
 }>()
+
+defineEmits(['more', 'item-click'])
 </script>
 
 <style scoped lang="scss">

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

@@ -2,76 +2,62 @@
     <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">
+            <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" :class="{'ml-28':i>0}"/>
+            <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" name="VolunteerTier">
-import {Tier} from "@/types/major";
+<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 list = ref<Tier[]>([{
-    typeName: '第一梯队',
-    typeValue: 1,
-    desc: '学考语数外255分以上',
+const uiConfig = [{
     colorFrom: '#F6FCFF',
     colorTo: '#EBF9FF',
     colorText: '#19517F',
-    icon: '/volunteer/index/tier_medal.png',
-    list: [{
-        id: 1,
-        name: '长沙民政职业技术学院',
-    }, {
-        id: 2,
-        name: '长沙电力职业技术学院',
-    }, {
-        id: 3,
-        name: '湖南铁道职业技术学院',
-    }, {
-        id: 4,
-        name: '湖南生物机电职业技术学院',
-    }, {
-        id: 5,
-        name: '湖南高速铁路职业技术学院',
-    }, {
-        id: 6,
-        name: '长沙商贸旅游职业技术学院',
-    }]
+    icon: '/volunteer/index/tier_medal.png'
 }, {
-    typeName: '第二梯队',
-    typeValue: 2,
-    desc: '学考语数外255分以上',
     colorFrom: '#F4FFFC',
     colorTo: '#E6FFF8',
     colorText: '#0E4C3C',
-    icon: '/volunteer/index/tier_medal_2.png',
-    list: []
-}, {
-    typeName: '第三梯队',
-    typeValue: 2,
-    desc: '学考语数外255分以上',
-    colorFrom: '#F6FCFF',
-    colorTo: '#EBF9FF',
-    colorText: '#19517F',
-    icon: '/volunteer/index/tier_medal.png',
-    list: []
-}, {
-    typeName: '第四梯队',
-    typeValue: 2,
-    desc: '学考语数外255分以上',
-    colorFrom: '#F4FFFC',
-    colorTo: '#E6FFF8',
-    colorText: '#0E4C3C',
-    icon: '/volunteer/index/tier_medal_2.png',
-    list: []
-}])
+    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.rows.map((item, idx) => {
+        const conf = uiConfig[idx % uiConfig.length]
+        return {
+            ...item,
+            ...conf
+        }
+    })
+})
 </script>
 
 <style lang="scss" scoped>

src/types/major.ts

@@ -149,20 +149,4 @@ export interface University {
     star: string;
     type: string;
     webSite: string;
-}
-
-export interface UniversitySimple {
-    id: number;
-    name: string;
-}
-
-export interface Tier {
-    typeName: string
-    typeValue: string | number
-    desc: string
-    colorFrom?: string
-    colorTo?: string
-    colorText?: string
-    icon?: string
-    list: UniversitySimple[]
 }

src/types/university.ts

@@ -35,4 +35,11 @@ export interface UniversityTier {
     typeValue: string|number;
     desc: string;
     list: University[];
+
+    /*UI props begin 后台不用管*/
+    colorFrom?: string;
+    colorTo?: string;
+    colorText?: string;
+    icon?: string;
+    /*UI props end*/
 }