feiniao-farm-h5/src/views/old_mini/task_condition/components/remindCustomer.vue

<template>
    <div class="service-records-page">
        <custom-header name="提醒客户"></custom-header>
        <div class="record-list">
            <div v-for="(item, index) in recordList" :key="index" class="record-card">
                <img class="thumb" :src="item.postInfo.media && item.postInfo.media[0]" alt="农场缩略图" />
                <div class="card-body" @click="handleItemClick(item)">
                    <div class="card-body-left">
                        <div class="title van-multi-ellipsis--l2">{{ item.postInfo.title }}</div>
                        <div class="date">{{ formatDate(item.postInfo.createTime) }}</div>
                    </div>
                    <div class="forward-btn" @click.stop="showShareSheet = true">转发</div>
                </div>
            </div>
        </div>
    </div>
    <fn-share-sheet v-model:show="showShareSheet" :options="shareOptions" @select="handleShareSelect" />
</template>
<script setup>
import { ref, onMounted } from "vue";
import customHeader from "@/components/customHeader.vue";
import { useRouter } from "vue-router";
import FnShareSheet from "@/components/pageComponents/FnShareSheet.vue";
const router = useRouter();
// 服务记录列表数据
const recordList = ref([]);
const showShareSheet = ref(false);
const shareOptions = ref([
    { name: "微信", icon: "wechat", type: "wechat" },
]);
const handleShareSelect = (option) => {
    console.log("option", option);
};

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

const getListWithAnswer = async () => {
    const { data } = await VE_API.user.listWithAnswer({farmId:'93684'});
    if (data.length) {
        recordList.value = data
    }
};
const formatDate = (dateStr) => {
    if (!dateStr) return "--";
    const date = new Date(dateStr);
    if (Number.isNaN(date.getTime())) return dateStr;
    const y = date.getFullYear();
    const m = `${date.getMonth() + 1}`.padStart(2, "0");
    const d = `${date.getDate()}`.padStart(2, "0");
    return `${y}-${m}-${d}`;
};

// 处理列表项点击
const handleItemClick = (data) => {
    const questInfo = {
        quest: data.quest,
        answer: data.answerOptions,
    }
    router.push(`/warning_detail?id=${data.postInfo.postId}&questInfo=${JSON.stringify(questInfo)}`);
};
</script>
<style lang="scss" scoped>
.service-records-page {
    width: 100%;
    min-height: 100vh;
    background: #f5f5f5;
    .record-list {
        padding: 10px 12px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .record-card {
        display: flex;
        gap: 12px;
        padding: 12px 10px;
        background: #ffffff;
        border-radius: 12px;
        align-items: center;
        height: 98px;
        box-sizing: border-box;
        .thumb {
            width: 80px;
            height: 74px;
            border-radius: 8px;
            object-fit: cover;
        }
        .card-body {
            width: calc(100% - 80px - 12px);
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .card-body-left{
                width: calc(100% - 62px - 12px);
                height: 95%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .date {
                    font-size: 13px;
                    color: #86909C;
                    margin-top: 4px;
                }
            }
        }
        .forward-btn {
            padding: 6px 19px;
            background: rgba(33, 153, 248, 0.1);
            color: #2199F8;
            border-radius: 25px;
            font-size: 12px;
        }
    }
}
</style>