app-govern/pages/index/comp/transient.vue

<template>
    <view class="dateReport">
        <view class="pd20">
            <uni-segmented-control
                :current="curSub"
                class="subsection"
                active-color="#376cf3"
                :values="subsectionList"
                @clickItem="sectionChange"
            />
        </view>

        <!-- 申请报表 -->
        <view v-if="curSub == 0">
            <!-- apply -->
            <Apply :navHeight="navHeight"/>
        </view>

        <!-- 申请记录 -->
        <view v-if="curSub == 1">
            <view
                class="record event-list"
                v-if="eventList.length != 0"
                :style="{ height: 'calc(100vh - ' + (navHeight + 56) + 'px)', overflow: 'auto' }"
            >
                <!-- 循环渲染事件项 -->
                <uni-card class="event-item" :class="item.type" v-for="(item, index) in eventList" :key="index">
                    <view class="title" :class="item.status == 1 ? 'completed' : 'incomplete'">
                        <view> {{ item.status == 1 ? '已完成' : '未完成' }} </view>
                    </view>
                    <!-- 头部：图标 + 信息 + 操作 -->
                    <view class="event-header">
                        <view class="event-info">
                            <view class="event-title">
                                <text class="event-id">{{ item.id }}</text>
                                <text class="event-tags">{{ item.tag }}</text>
                            </view>
                        </view>
                    </view>
                    <!-- 详情区域 -->
                    <view class="event-detail">
                        <text>申请人：xxx</text>
                        <text>电话号码：18888888888</text>
                    </view>
                    <view class="downloadReport">
                        <!-- <u-icon :name="item.status == 1 ? 'download' : 'upload'" color="#376cf3" size="40"></u-icon> -->
                        <uni-icons
                            :type="item.status == 1 ? 'download' : 'upload'"
                            size="16"
                            color="#376cf3"
                        ></uni-icons>

                        {{ item.status == 1 ? '下载报告' : '生成报告' }}
                    </view>
                </uni-card>
                <uni-load-more :status="status"></uni-load-more>
            </view>
            <Cn-empty v-else></Cn-empty>
        </view>
    </view>
</template>
<script>
import Apply from './apply.vue'
export default {
    components: { Apply },
    props: {
        indexList: {
            type: Array,
            default: () => [],
        },
        total: {
            type: Number,
            default: 0,
        },
        // status: {
        //     type: String,
        //     default: 'more',
        // },
        navHeight: {
            type: Number,
            default: 0,
        },
    },
    data() {
        return {
            value: ['0'],
            content: 123,
            curSub: 0,
            subsectionList: ['申请报表', '申请记录'],
            form: {
                type: 0,
                lindId: '',
            },
            status: 'noMore',
            eventList: [
                {
                    id: '测试监测点',
                    tag: '2026-01-23至2026-01-23',
                    status: '1',
                },
                {
                    id: '测试监测点',
                    tag: '2026-01-23至2026-01-23',
                    status: '0',
                },
            ],
        }
    },
    created() {},
    mounted() {},
    computed: {},
    methods: {
        scrolltolower() {
            this.$emit('scrolltolower')
        },
        getHeight() {},

        sectionChange(index) {
            this.curSub = index.currentIndex
        },
    },
    watch: {},
}
</script>
<style lang="scss" scoped>
@import '@/pages/message1/index.scss';
.event-title {
    justify-content: space-between;
}
.event-tags {
    font-size: 24rpx;
}

.event-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.downloadReport {
    width: 100%;
    background: #376cf320;
    height: 60rpx;
    line-height: 60rpx;
    color: #376cf3;
    font-weight: 600;
    border-radius: 15rpx;
    margin-top: 10rpx;
    display: flex;
    justify-content: center;
}

.title {
    position: absolute;
    left: 0px;
    width: calc(100% - 36rpx);
    // margin: 0 10px;
    top: 0;
    border-radius: 4px 4px 0 0;
    padding: 2px 10px;
    font-size: 24rpx;
    font-weight: 600px;
    display: flex;
    justify-content: space-between;
    font-weight: 700;
}
.completed {
    background: #e1f3d8;
    color: #67c23a;
}
.incomplete {
    background: #fde2e2;
    color: #f56c6c;
}

/deep/ .record {
    .uni-card__content {
        padding: 55rpx 20rpx 20rpx !important;
    }
}
</style>