feiniao-farm-h5/src/views/old_mini/monitor/subPages/reviewResults.vue

<template>
    <custom-header name="复核成效"></custom-header>
    <div class="farm-dynamics">
        <div class="task-content">
            <div class="expert-content">
                <template v-if="contentData.length > 0">
                    <List
                        v-model:loading="loading"
                        :finished="finished"
                        :offset="100"
                        loading-text="加载中..."
                        finished-text="没有更多了"
                        @load="onLoad"
                    >
                        <div v-for="(section, index) in contentData" :key="index" class="content-section">
                            <div class="section-id" :id="section.targetId"></div>
                            <record-item
                                :record-item-data="section"
                                content-mode="serviceDetail"
                                title-mode="default"
                                class="recipe-item"
                                titleRightDotText="全区"
                                titleRightType="dot"
                                showFarmImage
                                @click="handleClick(section, index)"
                            >
                                <template #footer>
                                    <div class="action-group" v-if="!section.reviewImage.length">
                                        <div class="action-l">查看详情</div>
                                        <div class="action-r">
                                            <div
                                                class="action-item warning-item"
                                                :class="{ 'has-applied': section.hasApplied }"
                                                @click.stop="handleApply(section, index)"
                                            >
                                                {{ section.hasApplied ? "已发起需求" : "发起需求" }}
                                            </div>
                                            <div class="action-item primary-item" @click.stop="handleUploadPhoto(section)">
                                                上传照片
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </record-item>
                        </div>
                    </List>
                </template>
                <empty
                    v-else
                    image="https://birdseye-img.sysuimars.com/birdseye-look-mini/custom-empty-image.png"
                    image-size="80"
                    description="暂无数据"
                />
            </div>
        </div>
    </div>
    <!-- 需求发送成功弹窗 -->
    <popup v-model:show="showApplyPopup" round class="apply-popup">
        <img class="check-icon" src="@/assets/img/home/right.png" alt="" />
        <div class="apply-text">需求发送成功</div>
        <div class="apply-btn" @click="showApplyPopup = false">我知道了</div>
    </popup>

    <!-- 上传照片弹窗 -->
    <review-upload-popup v-model="showUpload" :record-id="sectionId" @success="resetAndLoad" />
</template>
<script setup>
import { ref, onMounted } from "vue";
import recordItem from "@/components/recordItem.vue";
import { Popup } from "vant";
import customHeader from "@/components/customHeader.vue";
import { useRouter, useRoute } from "vue-router";
import { Empty,List } from "vant";
import reviewUploadPopup from "@/components/popup/reviewUploadPopup.vue";

const showApplyPopup = ref(false);
const showUpload = ref(false);
const router = useRouter();
const route = useRoute();
const sectionId = ref(null);
// 上传照片处理函数
const handleUploadPhoto = ({id}) => {
    showUpload.value = true;
    sectionId.value = id;
};

const handleApply = (section, index) => {
    // // 更新当前项的发起需求状态
    // showApplyPopup.value = true;
    // section.hasApplied = true;
};

const contentData = ref([]);
const loading = ref(false);
const finished = ref(false);
const page = ref(1);
const limit = ref(10);

const onLoad = () => {
    if (finished.value) return;
    loading.value = true;
    const params = {
        farmId: route.query.farmId,
        flowStatus: 5,
        page: page.value,
        limit: limit.value,
    };
    VE_API.user.getDetailList(params)
        .then((res) => {
            const list = res?.data || [];
            if (Array.isArray(list) && list.length > 0) {
                contentData.value = contentData.value.concat(list);
                page.value += 1;
                if (list.length < limit.value) {
                    finished.value = true;
                }
            } else {
                finished.value = true;
            }
        })
        .finally(() => {
            loading.value = false;
        });
};

const resetAndLoad = () => {
    page.value = 1;
    finished.value = false;
    contentData.value = [];
    onLoad();
};

onMounted(() => {
    resetAndLoad();
});

const handleClick = (section) => {
    router.push({
        path: "/review_work",
        query: {
            miniJson: JSON.stringify({ id: section.id,goBack: true }),
        },
    });
};
</script>
<style lang="scss" scoped>
.farm-dynamics {
    width: 100%;
    height: 100vh;
    background: #f5f7fb;
    .task-content {
        display: flex;
        padding-top: 10px;
        height: calc(100% - 40px);
        .expert-content {
            width: 100%;
            height: 100%;
            overflow: auto;
            padding: 0 10px 10px;
            box-sizing: border-box;
            .content-section {
                position: relative;
                .section-id {
                    position: absolute;
                    top: 0;
                    width: 100%;
                    height: 1px;
                }
            }
            // 空状态样式
            :deep(.van-empty) {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 60px 0;
                min-height: 200px;
            }
            .action-r {
                color: #1d2129;
            }
            .action-group {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-top: 8px;
                margin-top: 8px;
                border-top: 1px solid #f5f5f5;
                .action-l {
                    font-size: 12px;
                }
            }
            .action-group {
                .action-r {
                    display: flex;
                    align-items: center;
                    .action-item {
                        padding: 0 11px;
                        height: 30px;
                        line-height: 30px;
                        border-radius: 20px;
                        font-size: 12px;
                        &.second-item {
                            border: 1px solid #2199f8;
                            color: #2199f8;
                        }
                        &.primary-item {
                            background: #2199f8;
                            color: #fff;
                        }
                        &.warning-item {
                            background: rgba(255, 131, 29, 0.1);
                            color: #ff831d;
                            &.has-applied {
                                background: transparent;
                                color: #afafaf;
                                pointer-events: none;
                            }
                        }
                        &.cancel-item {
                            color: #676767;
                            border: 1px solid rgba(103, 103, 103, 0.2);
                        }
                    }
                    .action-item + .action-item {
                        margin-left: 5px;
                    }
                }
                .apply-action {
                    justify-content: flex-end;
                    .default-item {
                        border: 1px solid rgba(0, 0, 0, 0.4);
                        color: rgba(0, 0, 0, 0.4);
                    }
                }
            }
        }
    }
}
.apply-popup {
    width: 75%;
    padding: 28px 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .check-icon {
        width: 68px;
        height: 68px;
        margin-bottom: 12px;
    }
    .apply-text {
        font-size: 24px;
        font-weight: 500;
        margin-bottom: 32px;
        text-align: center;
    }
    .apply-btn {
        width: 100%;
        box-sizing: border-box;
        padding: 8px;
        border-radius: 25px;
        font-size: 16px;
        background: #2199f8;
        color: #fff;
        text-align: center;
    }
}

</style>