shuhi-app/pages/index/index.vue

<template>
    <view class="operation-container">
        <!-- 快递操作区域 -->
        <view class="section">
            <view class="section-title">快递</view>
            <view class="grid-container">
                <view v-for="(item, index) in expressOperations" :key="index" class="grid-item" :class="item.type"
                    @click="handleNavigation(item.path)">
                    {{ item.name }}
                </view>
            </view>
        </view>

        <!-- 审核操作区域 -->
        <view class="section">
            <view class="section-title">审核</view>
            <view class="grid-container">
                <view v-for="(item, index) in auditOperations" :key="index" class="grid-item" :class="item.type"
                    @click="handleNavigation(item.path)">
                    {{ item.name }}
                </view>
            </view>
        </view>

        <!-- 统计操作区域 -->
        <view class="section">
            <view class="section-title">统计</view>
            <view class="grid-container">
                <view v-for="(item, index) in statisticsOperations" :key="index" class="grid-item" :class="item.type"
                    :style="{ gridColumn: item.span ? 'span 2' : 'span 1' }" @click="handleNavigation(item.path)">
                    {{ item.name }}
                </view>
            </view>
        </view>

        <!-- WMS操作区域 -->
        <view class="section">
            <view class="section-title">WMS操作</view>
            <view class="grid-container">
                <view v-for="(item, index) in wmsOperations" :key="index" class="grid-item" :class="item.type"
                    :style="{ gridColumn: item.span ? 'span 2' : 'span 1' }" @click="handleNavigation(item.path)">
                    {{ item.name }}
                </view>
            </view>
        </view>

        <!-- 线下核单 -->
        <view class="section">
            <view class="section-title">线下核单</view>
            <view class="grid-container">
                <view v-for="(item, index) in offlineOperations" :key="index" class="grid-item" :class="item.type"
                    @click="handleNavigation(item.path)">
                    {{ item.name }}
                </view>
            </view>
        </view>

        <!-- 录入信息 -->
        <view class="section">
            <view class="section-title">录入信息</view>
            <view class="grid-container">
                <view v-for="(item, index) in entryOperations" :key="index" class="grid-item" :class="item.type"
                    @click="handleNavigation(item.path)">
                    {{ item.name }}
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import {
    ref
} from 'vue'

// 快递操作列表
const expressOperations = ref([{
    name: '中转\n\r签收',
    path: '/pages/index/express/transfer-sign',
    type: 'primary'
},
{
    name: '到仓\n\r签收',
    path: '/pages/index/express/warehouse-sign',
    type: 'warning'
},
{
    name: '重量\n\r修改',
    path: '/pages/index/express/weight-modify',
    type: 'primary'
},
{
    name: '快速\n\r验收',
    path: '/pages/index/express/quick-check',
    type: 'warning'
},
{
    name: '路由签收\n\r异常',
    path: '/pages/index/express/route-exception',
    type: 'primary'
},
{
    name: '快速\n\r拆包',
    path: '/pages/index/express/quick-unpack',
    type: 'warning'
},
])

// 审核操作列表
const auditOperations = ref([{
    name: '确认\n\r收货',
    path: '/pages/index/audit/confirm-receipt',
    type: 'primary'
},
{
    name: '扫书\n\r查单',
    path: '/pages/index/audit/scan-order',
    type: 'warning'
},
{
    name: '根据快递单\n\r或订单',
    path: '/pages/index/audit/express-order',
    type: 'warning'
},
{
    name: '根据\n\r发件人',
    path: '/pages/index/audit/sender',
    type: 'primary'
},
])

// WMS操作列表
const wmsOperations = ref([{
    name: '中等\n\r入库',
    path: '/pages/index/wms/medium-in',
    type: 'primary'
},
{
    name: '良品\n\r入库',
    path: '/pages/index/wms/good-in',
    type: 'warning'
},
{
    name: '次品\n\r入库',
    path: '/pages/index/wms/secondary-in',
    type: 'primary'
},
{
    name: '不良\n\r入库',
    path: '/pages/index/wms/bad-in',
    type: 'warning'
},
{
    name: '不良\n\r出库',
    path: '/pages/index/wms/bad-out',
    type: 'primary'
},
{
    name: '不良\n\r下架',
    path: '/pages/index/wms/bad-off',
    type: 'warning'
},
{
    name: '订单\n\r查询',
    path: '/pages/index/wms/order-query',
    type: 'primary'
},
{
    name: '库位\n\r订单',
    path: '/pages/index/wms/location-order',
    type: 'warning'
},
{
    name: '快速盘点',
    path: '/pages/index/wms/speedy-check',
    type: 'primary',
    span: 24
},
])

// 统计操作列表
const statisticsOperations = ref([{
    name: '审核统计',
    path: '/pages/index/statistic/audit',
    type: 'warning',
    span: 24
},
{
    name: '售后\n\r统计',
    path: '/pages/index/statistic/after-sale',
    type: 'primary'
},
{
    name: '打包\n\r统计',
    path: '/pages/index/statistic/package',
    type: 'warning'
},
])
//线下核单
const offlineOperations = ref([{
    name: '线下\n\r核单',
    path: '/pages/index/offline/check-order',
    type: 'primary'
},
{
    name: '核单\n\r记录',
    path: '/pages/index/offline/check-record',
    type: 'warning'
},
])

//录入信息
const entryOperations = ref([{
    name: '扫码\n\r查书',
    path: '/pages/index/entry/scan-book',
    type: 'primary'
},
{
    name: '录入\n\r书籍重量',
    path: '/pages/index/entry/book-weight',
    type: 'warning'
},
])

// 页面跳转方法
const handleNavigation = (path) => {
    uni.navigateTo({
        url: path,
        fail: () => {
            uni.showToast({
                title: '页面跳转失败',
                icon: 'none',
            })
        },
    })
}
</script>

<style lang="scss" scoped>
.operation-container {
    padding: 20rpx;
    box-sizing: border-box;
    /* #ifdef H5 */
    padding-bottom: 100rpx;
    /* #endif */
}

.section {
    margin-bottom: 30rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

    .section-title {
        font-size: 50rpx;
        font-weight: 600;
        color: #333;
        padding: 20rpx;
        padding-top: 0;
        border-bottom: 2rpx solid #f0f0f0;
        margin-bottom: 20rpx;
    }

    .grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20rpx;
        padding: 10rpx;

        .grid-item {
            min-height: 148rpx;
            display: flex;
            align-items: center;
            justify-content: center;
			text-align: center;
			padding: 20rpx 30rpx;
			line-height: 60rpx;
            font-size: 50rpx;
            border-radius: 12rpx;
            color: #ffffff;
            transition: all 0.3s;
			white-space: pre-wrap;

            &.primary {
                background: linear-gradient(135deg, #4cd964, #3ac555);

                &:active {
                    background: linear-gradient(135deg, #3ac555, #2fb548);
                }
            }

            &.warning {
                background: linear-gradient(135deg, #ff9500, #ff8000);

                &:active {
                    background: linear-gradient(135deg, #ff8000, #e67300);
                }
            }

            &:active {
                transform: scale(0.98);
            }
        }
    }
}
</style>