dz-app/components/mx-index-menus/mx-index-menus.vue

<template>
    <view class="mx-30 mx-card bg-white overflow-hidden">
        <view v-if="pageSize<=1" :class="containerWrapClass">
            <mx-index-paged-menus v-bind="props" @click="handleMenuClick"/>
        </view>
        <uv-swiper v-else :height="swiperHeight" :indicator-active-color="theme.brands.primary" :list="pagedData"
                   bg-color="white" circular indicator indicator-inactive-color="#ccc" interval="10000">
            <template #default="{item}">
                <mx-index-paged-menus class="flex-1 mb-60 mt-40" v-bind="props" @click="handleMenuClick"/>
            </template>
        </uv-swiper>
    </view>
</template>

<script setup>
import {computed} from "vue";
import {shareProps} from "./shareProps";
import _ from "lodash";
import {useTheme} from "@/hooks/useTheme";
import MxIndexPagedMenus from "@/components/mx-index-menus/mx-index-paged-menus.vue";
import {useTransfer} from "@/hooks/useTransfer";
import {func} from "@/uni_modules/uv-ui-tools/libs/function/test";
import {openAppLink} from "@/utils/plus-helper";
import {createPropDefine} from "@/utils";

// NOTE：这样写idea才能正常提示！
// defineProps(shareProps) 在本页template无法直接提示shareProps中的属性；无法在外部使用时提示包含的属性
const props = defineProps({
    ...shareProps,
    containerWrapClass: createPropDefine('py-40 px-20', [String, Object]),
    customAction: createPropDefine(false, Boolean)
});
const emits = defineEmits(["click"]);
const {theme} = useTheme();
const {transferTo} = useTransfer();

const pagedData = computed(() => {
    if (props.columns <= 0 || props.rows <= 0 || !props.data.length) return [props.data];
    return _.chunk(props.data, props.columns * props.rows);
});
const pageSize = computed(() => pagedData.value.length);
const swiperHeight = computed(() => props.rows * 70 + 60); // 这个高度并不太准，只保证少量几行没问题

const handleMenuClick = function (menu) {
    if (menu.customAction || props.customAction) return emits("click", menu);
    if (func(menu.handler)) {
        menu.handler(menu);
        return;
    }
    if (!menu?.path) return;
    if (menu.appLink) {
        openAppLink(menu.path);
        return;
    }
    transferTo(menu.path, menu.nextData);
};
</script>

<style scoped>
</style>