MTP20_WEB_GLOBAL/src/packages/digital/components/iconbar/index.vue

<template>
    <div :class="className">
        <Grid :border="false" :column-num="filteredIcons.length" v-if="filteredIcons.length">
            <template v-for="(item, index) in filteredIcons" :key="index">
                <GridItem :icon="item.icon" :text="item.text" :to="item.to" />
            </template>
        </Grid>
    </div>
</template>

<script lang="ts" setup>
import { shallowReactive, PropType, computed } from 'vue'
import { Grid, GridItem } from 'vant'

const props = defineProps({
    query: {
        type: Object
    },
    routes: {
        type: Array as PropType<string[]>,
        default: () => ([])
    },
    inset: {
        type: Boolean,
        default: false
    }
})

const className = {
    'app-iconbar': true,
    'app-iconbar--inset': props.inset
}

const icons = shallowReactive([
    { icon: 'pending-payment', text: '充值', to: { name: 'wallet-deposit' } },
    { icon: 'paid', text: '提现', to: { name: 'wallet-withdraw' } },
    { icon: 'peer-pay', text: '划转', to: { name: 'wallet-transfer' } },
    { icon: 'chart-trending-o', text: '交易', to: { name: 'spot-goods-detail' } },
    { icon: 'setting-o', text: '设置', to: { name: 'setting' } },
])

const filteredIcons = computed(() => icons.filter((e) => props.routes.includes(e.to.name)))
</script>

<style lang="less">
@import './index.less';
</style>