bonus-material-app/src/pages/work/index.vue

<template>
    <view class="content">
        <view class="new-purchase">
            <view
                class="purchase-item"
                :key="index"
                @tap="onNavigateTo(item.url)"
                v-for="(item, index) in newPurchaseList"
            >
                <image :src="item.iconSrc" mode="scaleToFill" />
                <text>
                    {{ item.title }}
                </text>
            </view>
        </view>

        <view class="new-purchase">
            <view
                class="purchase-item"
                :key="index"
                @tap="onNavigateTo(item.url)"
                v-for="(item, index) in pickingList"
            >
                <image :src="item.iconSrc" mode="scaleToFill" />
                <text>
                    {{ item.title }}
                </text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
// 新购
const newPurchaseList = ref([
    {
        title: '新购验收',
        url: '/pages/new-purchase/accept/index',
        iconSrc: '../../static/workbench/newInStore.png',
    },
    // { title: '新购到货', url: '/pages/new-purchase/bind/index' },
    {
        title: '新购绑定',
        url: '/pages/new-purchase/bind/index',
        iconSrc: '../../static/workbench/newInStore.png',
    },
    {
        title: '新购入库',
        url: '/pages/new-purchase/entry/index',
        iconSrc: '../../static/workbench/newInStore.png',
    },
])

// 领料
const pickingList = ref([
    {
        title: '领料出库',
        url: '/pages/picking/outbound/index',
        iconSrc: '../../static/workbench/fetchMaterialOutStore.png',
    },
])

const onNavigateTo = (url) => {
    uni.navigateTo({ url })
}
</script>

<style lang="scss">
page {
    overflow: hidden;
}
.new-purchase {
    display: flex;
    margin: 15rpx 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    .purchase-item {
        margin: 12rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 28rpx;

        image {
            width: 70rpx;
            height: 70rpx;
            margin-bottom: 15rpx;
        }
    }
}
</style>