mes-app/pages/index/index.uvue

<template>
	<uni-navbar-lite :showLeft=false title="首页"></uni-navbar-lite>
    <view class="page-container">
        <!-- 快捷功能卡片 -->
        <view class="quick-cards">
            <view v-for="(item, index) in quickFunctions" :key="index" class="quick-card" @click="handleQuickClick(item)">
                <image class="quick-card-bg" :src="item.bgImage" mode="aspectFill"></image>
                <view class="quick-card-content">
                    <text class="quick-card-title">{{ item.title }}</text>
                </view>
				<view class="management-badge">
				    <text class="badge-text">0</text>
				</view>
            </view>
        </view>
		<view>
			<!-- 最近申请 -->
			<view class="section-title-container">
				<view class="section-header">
					<text class="section-title">最近申请</text>
					<text class="view-all" @click="navigateToApply" v-if="applyListData.length > 0">查看全部</text>
				</view>
			</view>
			<template v-if="applyListData.length > 0">
				<common-list
					:dataList="applyListData.slice(0, 4)"
					:loading="applyLoading"
					:hasMore="false"
					:refresherEnabled="false"
					:itemKey="'id'"
					@itemClick="handleApplyItemClick"
				>
					<template #default="{ item }">
						<view class="list-item">
							<view class="item-container">
								<view class="item-header">
									<text class="item-title">标题</text>
								</view>
								<view class="info-row">
									<text class="text-gray">申请单编码：</text>
								</view>
								<view class="info-row">
									<text class="overdue-title"></text>
								</view>
							</view>
						</view>
					</template>
					<template #loadMore>
						<view></view>
					</template>
				</common-list>
			</template>
			<template v-else>
			  <view class="empty-tips">
			    <text class="empty-text">暂无物料申请单</text>
			  </view>
			</template>
		</view>
         
        <!-- 底部 TabBar -->
        <custom-tabbar :current="0" />
    </view>
</template>

<script setup lang="uts">
    import { ref, onMounted } from 'vue'
    import { getUserInfo } from '../../utils/storage'
    type QuickFunction = {
        id: number
        title: string
        bgImage: string
        icon: string
        path: string
    }
	const applyListData = ref<any[]>([])
	const applyLoading = ref<boolean>(false)
	
	// 快捷功能列表
    const quickFunctions = ref<QuickFunction[]>([
        {
            id: 1,
            title: '我的签收',
            bgImage: '/static/images/workbench/2.png',
            icon: '',
            path: ''
        },
        {
            id: 2,
            title: '我的消息',
            bgImage: '/static/images/workbench/3.png',
            icon: '',
            path: ''
        },
        {
            id: 3,
            title: '申请物料',
            bgImage: '/static/images/workbench/4.png',
            icon: '',
            path: ''
        }
    ])
	
	// 快捷功能点击
	const handleQuickClick = (item: QuickFunction): void => {
	    if (item.path.length > 0) {
	        uni.navigateTo({
	            url: item.path,
	            fail: (err: any) => {
	                console.log('导航失败', err)
	            }
	        })
	    } else {
	        uni.showToast({
	            title: item.title,
	            icon: 'none'
	        })
	    }
	}
	// 跳转到超时工单列表
	const navigateToApply = (): void => {
		// 跳转到超时工单页面
		uni.navigateTo({
		    url: '/pages/apply/index'
		})
	}
	// 物料申请点击事件
	const handleApplyItemClick = (item: any, index: number): void => {
		if (item == null) return
		const apply = item as UTSJSONObject
		try {
			uni.navigateTo({
				url: `/pages/apply/index?id=${apply['id']}`
			})
		} catch (e) {
			console.error('处理物料申请事件失败:', e)
		}
	}
    // 用户名
    const userName = ref<string>('用户')
	
    // 初始化
    onMounted(() => {
        const userInfo = getUserInfo()
        if (userInfo != null) {
            const realName = userInfo['nickName'] as string | null
            userName.value = realName ?? '用户'
        }
    })
</script>

<style lang="scss">
    .page-container {
        position: relative;
        flex: 1;
        padding-top: env(safe-area-inset-top);
		background-color: #e8f0f9;
		padding: 20rpx;
    }

    .bg-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
    }

    .bg-color {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: #71a6e4;
    }

    .page-content {
        position: relative;
        flex: 1;
        margin-bottom: 150rpx;
        padding: 20rpx;
        z-index: 10;
    }

    .header {
		flex-direction: row;
		height: 40px;
		
        &-title {
            font-size: 40rpx;
            color: #ffffff;
            font-weight: bold;
            margin-bottom: 15rpx;
        }

        &-greeting {
            font-size: 28rpx;
            color: rgba(255, 255, 255, 0.9);
        }
    }

    .section-title {
        font-size: 32rpx;
        color: #333333;
        font-weight: bold;
        margin-bottom: 20rpx;
    }
	
	.quick-cards {
	    flex-direction: row;
	    flex-wrap: wrap;
	    justify-content: space-between;
	
	    .quick-card {
	        position: relative;
	        width: 212rpx;
	        height: 120rpx;
	        margin-bottom: 20rpx;
	        overflow: hidden;
	        border-radius: 16rpx;
	
	        &-bg {
	            position: absolute;
	            top: 0;
	            left: 0;
	            width: 226rpx;
	            height: 140rpx;
	            z-index: 0;
	        }
	
	        &-content {
	            position: relative;
	            z-index: 1;
	            padding: 20rpx;
	            height: 140rpx;
	            justify-content: flex-start;
	        }
	
	        &-title {
	            font-size: 28rpx;
	            color: #333333;
	            font-weight: bold;
	        }
			.management-badge {
			    position: absolute;
			    top: 20rpx;
			    right: 20rpx;
			    width: 32rpx;
			    height: 32rpx;
			    background-color: #ff3b30;
			    border-radius: 16rpx;
			    justify-content: center;
			    align-items: center;
			
			    .badge-text {
			        font-size: 20rpx;
			        color: #ffffff;
			        line-height: 20rpx;
			    }
			}
	    }
	}
	.section-title-container {
		// margin-top: 20rpx;
		padding: 20rpx 30rpx;
		.section-header {
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.section-title {
			    font-size: 32rpx;
			    color: #333333;
			    font-weight: bold;
			    // margin-bottom: 20rpx;
			}
			.view-all {
				font-size: 28rpx;
				color: #165dff;
			}
		}
	}
	.list-item {
		margin: 0 30rpx 24rpx 30rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		.item-container {
		    padding: 30rpx;
		}
		
		.item-header {
		    flex-direction: row;
		    align-items: center;
		    margin-bottom: 16rpx;
		
		    .location-icon {
		        width: 32rpx;
		        height: 32rpx;
		        margin-right: 8rpx;
		    }
		
		    .item-title {
		        flex: 1;
		        font-size: 32rpx;
		        color: #333333;
		        font-weight: bold;
		    }
		
		    .detail-link {
		        font-size: 28rpx;
		        color: #999999;
		    }
		}
		
		.item-address {
		    font-size: 26rpx;
		    color: #999999;
		    margin-bottom: 20rpx;
		    line-height: 40rpx;
		}
		
		.item-info {
		    padding: 20rpx;
		    background-color: #f8f9fa;
		    border-radius: 8rpx;
		
		    .info-row {
		        flex-direction: row;
		        margin-bottom: 16rpx;
		
		        &:last-child {
		            margin-bottom: 0;
		        }
		
		        .info-item {
		            flex: 1;
		            flex-direction: row;
		            align-items: center;
		
		            .info-label {
		                font-size: 26rpx;
		                color: #666666;
		                margin-right: 8rpx;
		                white-space: nowrap;
		            }
		
		            .info-value {
		                flex: 1;
		                font-size: 26rpx;
		                color: #333333;
		            }
		        }
		    }
		}
	}
	.empty-tips {
	    padding: 30rpx;
	    justify-content: center;
	    align-items: center;
	
	    .empty-text {
	        font-size: 26rpx;
	        color: #999999;
	    }
	}
</style>