meilan-app/src/pages/home-new/components/selfCheck.vue

<template>
    <view class="self-check-container">
        <view class="self-check-header">
            <text class="header-title">定/自检</text>
            <text class="view-all" @click="goToSelfCheckPage('all')">查看全部</text>
        </view>

        <view class="self-check-content">
            <!-- 已过期定检提醒 -->
            <view class="check-section">
                <view class="section-header">
                    <text class="section-title">已过期定检提醒</text>
                    <text class="view-more" @click="goToSelfCheckPage('expired')">查看更多</text>
                </view>
                <view class="check-item" v-for="(item, index) in expiredItems" :key="index">
                    <view class="item-indicator expired"></view>
                    <view class="item-content">
                        <view class="item-row">
                            <text class="item-label">{{ item.name }}</text>
                            <text class="item-label">{{ item.serialNumber }}</text>
                            <text class="item-date">{{ item.date }}</text>
                        </view>
                        <view class="item-row">
                            <text class="item-label">{{ item.location }}</text>
                            <text class="item-role">{{ item.role }}</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 两周内到期提醒 -->
            <view class="check-section">
                <view class="section-header">
                    <text class="section-title">两周内到期提醒</text>
                    <text class="view-more" @click="goToSelfCheckPage('twoWeeks')">查看更多</text>
                </view>
                <view class="check-item" v-for="(item, index) in twoWeeksItems" :key="index">
                    <view class="item-indicator urgent"></view>
                    <view class="item-content">
                        <view class="item-row">
                            <text class="item-label">{{ item.name }}</text>
                            <text class="item-label">{{ item.serialNumber }}</text>
                            <text class="item-date">{{ item.date }}</text>
                        </view>
                        <view class="item-row">
                            <text class="item-label">{{ item.location }}</text>
                            <text class="item-role">{{ item.role }}</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 一月内检到期提醒 -->
            <view class="check-section">
                <view class="section-header">
                    <text class="section-title">一月内检到期提醒</text>
                    <text class="view-more" @click="goToSelfCheckPage('oneMonth')">查看更多</text>
                </view>
                <view class="check-item" v-for="(item, index) in oneMonthItems" :key="index">
                    <view class="item-indicator normal"></view>
                    <view class="item-content">
                        <view class="item-row">
                            <text class="item-label">{{ item.name }}</text>
                            <text class="item-label">{{ item.serialNumber }}</text>
                            <text class="item-date">{{ item.date }}</text>
                        </view>
                        <view class="item-row">
                            <text class="item-label">{{ item.location }}</text>
                            <text class="item-role">{{ item.role }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'SelfCheck',
    data() {
        return {
            // 已过期定检数据
            expiredItems: [
                { name: '设备名称', serialNumber: '设备序列号', location: '设备位置', role: '组长、组员、组员', date: '2026-06-10' },
                { name: '设备名称', serialNumber: '设备序列号', location: '设备位置', role: '组长、组员、组员', date: '2026-06-10' }
            ],
            // 两周内到期数据
            twoWeeksItems: [
                { name: '设备名称', serialNumber: '设备序列号', location: '设备位置', role: '组长、组员、组员', date: '2026-06-10' },
                { name: '设备型号', serialNumber: '设备序列号', location: '设备位置', role: '组长、组员、组员', date: '2026-06-10' }
            ],
            // 一月内到期数据
            oneMonthItems: [
                { name: '设备型号', serialNumber: '设备序列号', location: '设备位置', role: '组长、组员、组员', date: '2026-06-10' },
                { name: '设备型号', serialNumber: '设备序列号', location: '设备位置', role: '组长、组员、组员', date: '2026-06-10' }
            ]
        }
    },
    methods: {
        goToSelfCheckPage(tab) {
            uni.navigateTo({
                url: `/pages/selfCheck/index?tab=${tab}`
            });
        }
    }
}
</script>

<style scoped>
.self-check-container {
    width: 100%;
    padding: 12px;
    background-color: #f5f7fa;
}

.self-check-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.header-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
}

.view-all {
    font-size: 14px;
    color: #409eff;
}

.self-check-content {
    background-color: #fff;
    border-radius: 12px;
    padding: 12px;
}

.check-section {
    margin-bottom: 16px;
}

.check-section:last-child {
    margin-bottom: 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.section-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.view-more {
    font-size: 14px;
    color: #409eff;
}

.check-item {
    display: flex;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

.check-item:last-child {
    border-bottom: none;
}

.item-indicator {
    width: 6px;
    border-radius: 3px;
    margin-right: 10px;
    flex-shrink: 0;
}

.item-indicator.expired {
    background-color: #8c3c34;
    height: 60px;
}

.item-indicator.urgent {
    background-color: #ff291f;
    height: 60px;
}

.item-indicator.normal {
    background-color: #b97c45;
    height: 60px;
}

.item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item-label {
    font-size: 14px;
    color: #333;
}

.item-date {
    font-size: 14px;
    color: #333;
}

.item-role {
    font-size: 14px;
    color: #333;
}
</style>