dz-app/pages/college-library/components/college-list.vue

<template>
    <z-paging ref="paging" v-model="list" auto-show-system-loading :auto="false" @query="handleQuery"
              @on-refresh="handleRefresh">
        <template #top>
            <slot name="top"/>
            <mx-condition-dropdown/>
        </template>
        <slot name="prefix"/>
        <view class="p-20">
            <mx-search v-model="queryParams.name" placeholder="请输入院校名称" @search="handleSearch"
                       @clear="handleSearch"/>
        </view>
        <view class="px-20 fx-col gap-20">
            <college-item v-for="i in list" :item="i" class="mx-card" @click="handleDetail(i)"/>
        </view>
    </z-paging>
</template>

<script setup>
import {ref, computed, onMounted} from 'vue';
import {filters, universityList, universityDetail} from "@/api/webApi/collegemajor";
import {useCacheStore} from "@/hooks/useCacheStore";
import {useTransfer} from "@/hooks/useTransfer";
import {useProvideSearchModel} from "@/components/mx-condition/useSearchModelInjection";
import {useConditionCollegeFeatures} from "@/components/mx-condition/modules/useConditionCollegeFeatures";
import {useConditionCollegeType} from "@/components/mx-condition/modules/useConditionCollegeType";
import {useConditionCollegeNatureTypeCN} from "@/components/mx-condition/modules/useConditionCollegeNatureTypeCN";
import {useConditionCollegeLocation} from "@/components/mx-condition/modules/useConditionCollegeLocation";
import CollegeItem from "@/pages/college-library/components/college-item.vue";
import {sleep} from "@/uni_modules/uv-ui-tools/libs/function";
import {createPropDefine} from "@/utils";

const props = defineProps({
    customItemClick: createPropDefine(false, Boolean),
    extraFilter: createPropDefine({}, Object)
})
const emits = defineEmits(['item-click'])

const {dispatchCache, removeCache} = useCacheStore()
const {transferTo} = useTransfer()
const paging = ref(null)
const list = ref([])
const filter = ref({})
const queryParams = ref({
    name: '',
    features: [],
    type: [],
    natureTypeCN: [],
    location: [],
    level: []
})

const {onSearch} = useProvideSearchModel([
    useConditionCollegeFeatures(computed(() => filter.value['features'])),
    useConditionCollegeType(computed(() => filter.value['types'])),
    useConditionCollegeNatureTypeCN(computed(() => filter.value['natureTypes'])),
    useConditionCollegeLocation(computed(() => filter.value['locations']))
    // IE中其实没有level属性
], queryParams)

onSearch(async () => {
    await sleep(300) // 等动画结束再查
    handleSearch()
})

const handleSearch = () => {
    paging.value.reload()
}

const handleRefresh = () => {
    removeCache(universityList)
    removeCache(universityDetail)
}

const handleQuery = (pageNum, pageSize) => {
    const query = {pageNum, pageSize, ...props.extraFilter, ...queryParams.value}
    dispatchCache(universityList, query)
        .then(res => paging.value.completeByTotal(res.rows, res.total))
        .catch(e => paging.value.complete(false))
}

const handleDetail = (college) => {
    if (props.customItemClick) return emits('item-click', college)
    const {code} = college
    transferTo('/pages/college-library/detail/detail', {code})
}

onMounted(async () => {
    const res = await dispatchCache(filters)
    filter.value = {...res.data} // 创建副本，防止不能正确触发searchModelService
})
</script>

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