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

<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
  },
  needLogin: true,
}
</route>

<template>
  <view class="h-screen flex flex-col">
    <z-paging
      ref="paging"
      use-virtual-list
      :force-close-inner-list="true"
      cell-height-mode="dynamic"
      @virtualListChange="virtualListChange"
      @query="queryList"
      :auto-show-system-loading="true"
    >
      <template #top>
        <Navbar
          safeAreaInsetTop
          custom-class="bg-white!"
          :bordered="false"
          left-arrow
          @click-left="navigatorBack"
          contentClass="justify-start"
        >
          <template #title>
            <SearchInput
              v-model:value="searchValue"
              @confirm="handleChange"
              placeholder="院校名称"
            />
          </template>
        </Navbar>
        <view style="box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(225, 225, 225, 0.2)">
          <drop-menu ref="dropMenuRef">
            <drop-menu-item
              v-for="(item, index) in subMenu"
              :key="item.id"
              :title="item.title"
              @open="handleOpenSubMenu(item.id)"
              custom-class="flex items-center"
              :activation="item.activation"
            >
              <Region
                :defaultValue="regionKeyInfo"
                v-if="currentMenu === 1"
                @changeName="handleRegionChange"
                @change="handleRegionIdChange"
                class="custom-check-group"
              />
              <Nature
                v-if="currentMenu === 2"
                :defaultValue="natureKeyInfo"
                @changeName="handleNatureChange"
                @change="handleNatureIdChange"
                class="custom-check-group"
              />
              <UniType
                v-if="currentMenu === 3"
                :defaultValue="uniTypeKeyInfo"
                @changeName="handleUniTypeChange"
                @change="handleUniTypeIdChange"
                class="custom-check-group"
              />
              <view class="flex items-center justify-between px-[32rpx] pb-[32rpx] gap-[20rpx]">
                <view class="cancel-btn" @click="handleClear(index)">清空</view>
                <view class="submit-btn" @click="handleCheck">查看</view>
              </view>
            </drop-menu-item>
          </drop-menu>
        </view>
      </template>
      <view
        class="item-wrapper"
        :id="`zp-id-${item.zp_index}`"
        :key="item.zp_index"
        v-for="item in schoolList"
        @click="itemClick(item, item.zp_index)"
      >
        <view class="flex items-center p-[32rpx] w-full">
          <image class="w-[80rpx] h-[80rpx] ml-[18rpx] mr-[24rpx]" :src="item.logo"></image>
          <view class="flex justify-between items-center flex-1 overflow-y-hidden">
            <view class="flex flex-col w-full" hover-class="none">
              <text class="text-[28rpx] text-[#333] font-semibold mb-[6rpx]">
                {{ item.name }}
              </text>
              <view class="flex items-center gap-[8rpx] mb-[16rpx] max-w-[90%]">
                <view
                  class="truncate bg-[#f8f8f8] rounded-[4rpx] text-[20rpx] px-[8rpx] py-[2rpx] text-[#666]"
                  v-for="(fea, fIndex) in item.features.slice(0, 5)"
                  :key="fIndex"
                >
                  {{ fea }}
                </view>
              </view>
              <text class="text-[22rpx] text-[#333] font-normal">
                {{ item.cityName }}.{{ item.nature }}
              </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 DropMenu from '@/pages-sub/components/drop-menu/DropMenu.vue'
import DropMenuItem from '@/pages-sub/components/drop-menu/DropMenuItem.vue'
import Region from '@/pages-sub/home/components/Region.vue'
import UniType from '@/pages-sub/home/components/UniType.vue'
import Nature from '@/pages-sub/home/components/Nature.vue'
import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
import SearchInput from '@/pages-sub/components/input/SearchInput.vue'

import { getUniversityList } from '@/service/index/api'

const searchValue = ref('')
const isLoading = ref(false)

const handleChange = (e: any) => {
  paging.value.reload()
}
const navigatorBack = () => {
  uni.navigateBack()
}

const subMenu = ref([
  { id: 1, title: '省份', activation: false },
  { id: 2, title: '层次', activation: false },
  { id: 3, title: '类型', activation: false },
])

const dropMenuRef = ref()

const regionInfo = ref([]) // 省份信息
const uniTypeInfo = ref([]) // 层次信息
const natureInfo = ref([]) // 类型信息

const regionKeyInfo = ref([]) // 省份信息
const uniTypeKeyInfo = ref([]) // 层次信息
const natureKeyInfo = ref([]) // 类型信息

const currentMenu = ref(1)
const handleOpenSubMenu = (id: number) => {
  currentMenu.value = id
}

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

const queryList = (page: number, pageSize: number) => {
  getUniversityList({
    pageIndex: page,
    pageSize,
    name: searchValue.value,
    provinceName: regionInfo.value,
    utype: uniTypeInfo.value,
    nature: natureInfo.value,
  }).then((res) => {
    if (res.code === 200) {
      paging.value.complete((res.result as { rows: any[] }).rows)
    }
  })
}
const virtualListChange = (_vList) => {
  schoolList.value = _vList
}

const itemClick = (item, index) => {
  uni.navigateTo({ url: `/pages-sub/home/college/info?collegeId=${item._id}` })
}

const handleClear = (index: number) => {
  if (currentMenu.value === 1) {
    regionKeyInfo.value = []
  } else if (currentMenu.value === 2) {
    uniTypeKeyInfo.value = []
  } else if (currentMenu.value === 3) {
    natureKeyInfo.value = []
  }
  subMenu.value[index].activation = false
  dropMenuRef.value.closeDropMenu()
}

const handleRegionIdChange = (val) => {
  regionKeyInfo.value = val
  subMenu.value[0].activation = val.length !== 0
}

const handleRegionChange = (val) => {
  regionInfo.value = val
}

const handleUniTypeIdChange = (val) => {
  uniTypeKeyInfo.value = val
  subMenu.value[2].activation = val.length !== 0
}

const handleUniTypeChange = (val) => {
  uniTypeInfo.value = val
}

const handleNatureIdChange = (val) => {
  natureKeyInfo.value = val
  subMenu.value[1].activation = val.length !== 0
}

const handleNatureChange = (val) => {
  natureInfo.value = val
}

const handleCheck = () => {
  paging.value.reload()
  dropMenuRef.value.closeDropMenu()
}

onShow(() => {
  isLoading.value = true
})
</script>

<style lang="scss" scoped>
@import '../styles/navbar_search.scss';
@import '@/pages-sub/home/styles/picker-view-btn.scss';
@import '@/pages-sub/home/styles/grid-checkbox.scss';
</style>