feiniao-farm-h5/src/views/old_mini/mine/pages/archives.vue

<template>
    <div class="archives-page">
        <custom-header name="信息化档案"></custom-header>
        <div class="archives-content">
            <div class="archives-header">
                <el-select class="header-item" v-model="value" placeholder="Select" style="width: 240px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <div class="sort header-item" @click="toggleSort">
                    <span>时间排序</span>
                    <div class="sort-icon">
                        <el-icon :class="{ active: sortDirection === 'asc' }"><CaretTop /></el-icon>
                        <el-icon class="caret-bottom" :class="{ active: sortDirection === 'desc' }"><CaretBottom /></el-icon>
                    </div>
                </div>
            </div>
            <div class="archives-list">
                <div class="archives-item" v-for="item in 3" :key="item" @click="handleItem(item)">
                    <div class="item-content">
                        <div class="img"></div>
                        <div class="archives-info">
                            <div class="info-title">
                                <span class="title-text">无人机飞巡报告</span>
                                <span>查看详情</span>
                            </div>
                            <div class="info-desc van-multi-ellipsis--l2">果园面积共XX亩，共有XX棵生树本次飞巡拍摄了XX张照片，包括果园面积共XX亩，共有XX棵</div>
                        </div>
                    </div>
                    <div class="item-footer">
                        <span>来自 从化荔博园</span>
                        <span>2025.05.28</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import customHeader from "@/components/customHeader.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const value = ref("Option1");
const options = [
    {
        value: "Option1",
        label: "农事类型",
    },
    {
        value: "Option2",
        label: "Option2",
    },
];

// 排序方向状态：asc-升序，desc-降序，null-无排序
const sortDirection = ref(null);

// 切换排序方向
const toggleSort = () => {
    if (sortDirection.value === null) {
        sortDirection.value = 'asc';
    } else if (sortDirection.value === 'asc') {
        sortDirection.value = 'desc';
    } else {
        sortDirection.value = 'asc';
    }
    
    // 这里可以添加实际的排序逻辑
    console.log('排序方向:', sortDirection.value);
};

const handleItem = (item) => {
    router.push("/report_detail");
}
</script>

<style lang="scss" scoped>
.archives-page {
    width: 100%;
    height: 100vh;
    background-color: #f7f7f7;
    .archives-content {
        width: 100%;
        height: 100%;
        padding: 12px;
        box-sizing: border-box;
        .archives-header{
            display: flex;
            align-items: center;
            gap: 10px;
            .header-item{
                flex: 1;
                ::v-deep{
                    .el-select__wrapper{
                        padding: 7px 0;
                        justify-content: center;
                        background: none;
                    }
                    .el-select__selection {
                        flex: none;
                        width: fit-content;
                    }
                    .el-select__placeholder {
                        position: static;
                        transform: none;
                        width: fit-content;
                        color: #6D6D6D;
                    }
                    .el-select__caret {
                        color: #6D6D6D;
                    }
                }
            }
            .sort{
                display: flex;
                justify-content: center;
                align-items: center;
                color: #6D6D6D;
                padding: 7px 0;
                border-radius: 4px;
                border: 1px solid #DDDDDD;
                
                .sort-icon{
                    display: flex;
                    flex-direction: column;
                    margin-left: 2px;
                    .caret-bottom{
                        margin-top: -8px;
                    }
                    
                    .el-icon {
                        color: #6D6D6D;
                        
                        &.active {
                            color: #409EFF;
                        }
                    }
                }
            }
        }
        .archives-list{
            .archives-item{
                margin-top: 12px;
                border-radius: 8px;
                background: #fff;
                padding: 10px;
                .item-content{
                    display: flex;
                    margin-bottom: 12px;
                    .img{
                        width: 64px;
                        height: 64px;
                        border-radius: 8px;
                        margin-right: 16px;
                        background-color: red;
                    }
                    .archives-info{
                        width: calc(100% - 64px - 16px);
                        .info-title{
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            color: #A8A8A8;
                            font-size: 12px;
                            .title-text{
                                font-size: 16px;
                                font-weight: 500;
                                color: #000;
                            }
                        }
                        .info-desc{
                            margin-top: 5px;
                            font-size: 12px;
                            color: #575757;
                        }
                    }
                }
                .item-footer{
                    border-top: 1px solid rgba(0, 0, 0, 0.1);
                    padding-top: 12px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: #999999;
                }
            }
        }
    }
}
</style>