UniappVue3/src/pages/ProjectList/index.vue

<!-- 项目实施-列表页 -->
<template>
    <view class="PageBox">
        <view class="FlexBox TopBox">
            <view class="SelectBox">
                <u-select :current="TypeValue" :options="TypeList" placeholder="请选择工单类型" size="large" showOptionsLabel
                    @update:current="TypeValue = $event"></u-select>
            </view>

        </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 text="详情" type="primary" size="small" @click="GoDetail(item.id)"></u-button>
                            </view>
                        </view>
                        <view class="CodeTxt">施工单位：{{ item.company }}</view>
                        <view class="CodeTxt">作业地点：{{ item.site }}</view>
                        <view class="TagBox">
                            <u-tag type="error" plain>3项待复核</u-tag>
                            <u-tag :text="item.status" plain
                                :type="item.status === '实施中' ? 'primary' : item.status === '整改中' ? 'warning' : item.status === '待完工确认' ? 'info' : item.status === '已完工' ? 'success' : 'danger'"
                                shape="circle"></u-tag>
                        </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' },
    { name: '我负责的项目', id: '4' },
    { name: '已完成监理', id: '5' },

])
const dataSource = ref([
    { id: 1, name: '北京CBD写字楼改造项目', company: '华建集团第一建筑公司', remainingTime: '1', site: '北京市朝阳区建国路88号', status: '实施中' },
    { id: 2, name: '工单2', remainingTime: '2', company: '华建集团第一建筑公司', site: '北京市朝阳区建国路88号', status: '整改中' },
    { id: 3, name: '工单3', remainingTime: '3', company: '华建集团第一建筑公司', site: '北京市朝阳区建国路88号', status: '待完工确认' },
    { id: 4, name: '工单4', remainingTime: '5', company: '华建集团第一建筑公司', site: '北京市朝阳区建国路88号', status: '实施中' },
    { id: 5, name: '工单5', remainingTime: '3', company: '华建集团第一建筑公司', site: '北京市朝阳区建国路88号', status: '待完工确认' },
    { id: 6, name: '工单6', remainingTime: '2', company: '华建集团第一建筑公司', site: '北京市朝阳区建国路88号', status: '已完工' },
    { id: 7, name: '工单7', remainingTime: '4', company: '华建集团第一建筑公司', site: '北京市朝阳区建国路88号', status: '已完工' },
])

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

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

.PageBox {
    padding: 20rpx;
    background-color: #fff;
    height: calc(100vh - 170rpx);

    .TopBox {
        .SelectBox {
            width: calc(50% - 10rpx);
            height: 80rpx;
            border-radius: 10rpx;
            border: 1rpx solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10rpx;

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

        .BtnBox {
            width: 300rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .ListBox {
        padding: 20rpx 0px;
        margin-top: 20rpx;
        height: calc(100vh - 300rpx);
        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;
            }

            .TagBox {
                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>