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 class="new-purchase">
            <view
                class="purchase-item"
                :key="index"
                @tap="onNavigateTo(item.url)"
                v-for="(item, index) in repairList"
            >
                <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 boxList">
                <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',
    },{
        title: '退料接收',
        url: '/pages/back/index',
        iconSrc: '../../static/workbench/fetchMaterialOutStore.png',
    },
])
// 维修
const repairList = ref([
    {
        title: '维修',
        url: '/pages/repair/repairManage/index',
        iconSrc: '../../static/workbench/fix.png',
    },
    {
        title: '修试审核',
        url: '/pages/repair/testExamine/index',
        iconSrc: '../../static/workbench/fix.png',
    },
    {
        title: '修试入库',
        url: '/pages/repair/testedInBound/index',
        iconSrc: '../../static/workbench/fix.png',
    },
])

// 标准箱
const boxList = ref([
    {
        title: '标准箱管理',
        url: '/pages/standardBox/index',
        iconSrc: '../../static/workbench/fetchMaterialOutStore.png',
    },
    {
        title: '标准箱移交',
        url: '/pages/standardBox/transferBox',
        iconSrc: '../../static/workbench/fetchMaterialOutStore.png',
    },
    {
        title: '标准箱接收',
        url: '/pages/standardBox/acceptBox',
        iconSrc: '../../static/workbench/fetchMaterialOutStore.png',
    },
])

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

<style lang="scss">
page {
    overflow: hidden;
}
.content {
    padding: 24rpx;
    min-height: 100vh;
    background-color: #f7f8fa;

    // 功能区块样式
    .new-purchase {
        background-color: #fff;
        border-radius: 20rpx;
        padding: 32rpx 24rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
        display: flex;
        flex-wrap: wrap;

        // 功能项样式
        .purchase-item {
            width: 25%;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 24rpx 0;
            transition: all 0.3s ease;

            &:active {
                transform: scale(0.95);
                opacity: 0.8;
            }

            // 图标样式
            image {
                width: 88rpx;
                height: 88rpx;
                margin-bottom: 16rpx;
            }

            // 文字样式
            text {
                font-size: 28rpx;
                color: #262626;
                font-weight: 500;
            }
        }
    }
}
</style>