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" v-if="recordList && recordList.length">
            <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">{{item.interactionTime }}</div>
                    </div>
                    <div class="forward-btn" @click.stop="handleShare(item)">转发</div>
                </div>
            </div>
        </div>
        <div v-else class="empty-wrap">
            <div class="empty-text">暂无数据</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, useRoute } from "vue-router";
import wx from "weixin-js-sdk";
import FnShareSheet from "@/components/pageComponents/FnShareSheet.vue";
const router = useRouter();
const route = useRoute();
// 服务记录列表数据
const recordList = ref([]);
const showShareSheet = ref(false);
const shareOptions = ref([{ name: "微信", icon: "wechat", type: "wechat" }]);
const handleShareSelect = () => {
    const query = {
        askInfo: { title: "提醒客户", content: "是否分享该提醒给好友" },
        shareText: shareParams.value.title,
        targetUrl: `warning_detail`,
        paramsPage: JSON.stringify(shareParams.value),
        imageUrl: shareParams.value.imageUrl,
    };
    wx.miniProgram.navigateTo({
        url: `/pages/subPages/share_page/index?pageParams=${JSON.stringify(query)}&type=sharePage`,
    });
};

const shareParams = ref({});
const handleShare = (data) => {
    shareParams.value = {
        id: data.postInfo.postId,
        title: data.postInfo.title,
        questTitle: data.interactionQuestion,
        arrangeId: data.arrangeId,
        farmId: route.query.farmId,
        imageUrl: data.postInfo.media[0],
    };
    showShareSheet.value = true;
};

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

const getListWithAnswer = async () => {
    const { data } = await VE_API.user.listWithAnswer({ farmId: route.query.farmId });
    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) => {
    router.push({
        path: "/warning_detail",
        query: {
            id: data.postInfo.postId,
            questTitle: data.interactionQuestion,
            arrangeId: data.arrangeId,
            farmId: route.query.farmId,
        },
    });
};
</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;
        }
    }
    .empty-wrap {
        padding-top: 40px;
        text-align: center;
        .empty-text {
            font-size: 14px;
            color: #86909c;
        }
    }
}
</style>