UniappVue3/src/pages/ArchivesRoom/index.vue

<!-- 项目存档 -->
<template>
    <view class="PageBox">
        <view class="TopBox">
            <view class="iconBox">
                <u-icon name="arrow-leftward" size="30rpx" color="#333" @click="GoBack"></u-icon>
            </view>
            <view class="titleBox">项目归档</view>
            <view class="BtnBox">&nbsp;</view>
        </view>
        <view class="SearchBox">
            <u-input placeholder="请输入项目名称">
                <template #suffix>
                    <view class="SelectBox">
                        <u-select :current="TypeValue" :options="TypeList" placeholder="请选择工单类型" size="large"
                            showOptionsLabel @update:current="TypeValue = $event"></u-select>
                    </view>
                </template>
            </u-input>
        </view>
        <view class="ListBox">
            <u-virtual-list :list-data="dataSource" :item-height="200" height="100%">
                <template #default="{ item, index }">
                    <view class="CardBox">
                        <view class="FlexBox">
                            <view class="Title">{{ item.name }}</view>
                            <view class="DetailBtn">
                                <u-button plain :text="item.status" :type="item.status === '通过' ? 'success' : 'error'"
                                    size="small"></u-button>
                            </view>
                        </view>
                        <view class="CodeTxt">施工单位：{{ item.company }}</view>
                        <view class="CodeTxt">完工时间：{{ item.completeTime }}</view>
                        <view class="btnBox">
                            <u-button text="查看详情" plain type="primary" @click="GoDetail(item.id)"></u-button>
                        </view>
                    </view>
                </template>
            </u-virtual-list>
        </view>
    </view>
</template>
<script setup>
import { ref } from 'vue'
const TypeValue = ref('1') // 工单类型
// 类型列表
const TypeList = ref([
    { name: '全部', id: '1' },
    { name: '近三个月', id: '2' },
    { name: '近六个月', id: '3' },
])

// 项目列表
const dataSource = ref([
    { id: 1, name: '北京CBD写字楼改造项目', company: '华建集团第一建筑公司', completeTime: '2023-08-01', status: '通过' },
    { id: 2, name: '北京CBD写字楼改造项目', company: '华建集团第一建筑公司', completeTime: '2023-08-02', status: '未通过' },
    { id: 3, name: '北京CBD写字楼改造项目', company: '华建集团第一建筑公司', completeTime: '2023-08-03', status: '通过' },
    { id: 4, name: '北京CBD写字楼改造项目', company: '华建集团第一建筑公司', completeTime: '2023-08-04', status: '通过' },
    { id: 5, name: '北京CBD写字楼改造项目', company: '华建集团第一建筑公司', completeTime: '2023-08-05', status: '通过' },
    { id: 6, name: '北京CBD写字楼改造项目', company: '华建集团第一建筑公司', completeTime: '2023-08-06', status: '通过' },
    { id: 7, name: '北京CBD写字楼改造项目', company: '华建集团第一建筑公司', completeTime: '2023-08-07', status: '通过' },
])

// 跳转项目详情
const GoDetail = (id) => {
    uni.navigateTo({
        url: '/pages/ProgectDetails/index?id=' + id
    })
}

// 返回上一页
const GoBack = () => {
    uni.navigateBack({
        delta: 1
    })
}

</script>
<style lang="scss" scoped>
.FlexBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.SelectBox {
    width: 200rpx;
    height: 80rpx;
    border-radius: 10rpx;
    border: 1rpx solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10rpx;

    .u-select {
        width: 100%;
    }
}

.PageBox {
    padding: 20rpx;
    background-color: #fff;
    height: 100%;

    .SearchBox {
        margin-bottom: 20rpx;
    }

    .TopBox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20rpx;

        .titleBox {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
        }
    }

    .ListBox {
        padding: 20rpx 0px;
        margin-top: 20rpx;
        height: calc(100% - 200rpx);
        overflow: hidden;

        .CardBox {
            width: calc(100% - 30rpx);
            height: calc(100% - 30rpx);
            margin: 0 auto;
            padding: 20rpx;
            box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08), 0 2rpx 4rpx rgba(0, 0, 0, 0.04);
            margin-bottom: 20rpx;
            background-color: #fff;
            border-radius: 10rpx;
            overflow: auto;

            .Title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
            }

            .DetailBtn {
                font-size: 24rpx;
                color: #666;
            }

            .CodeTxt {
                margin-top: 20rpx;
                font-size: 24rpx;
                color: #666;
            }

            .btnBox {
                margin-top: 20rpx;
                display: flex;
                align-items: center;
                gap: 20rpx;
            }

            .BtnList {
                margin-top: 20rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 20rpx;
            }
        }
    }

}
</style>