feiniao-farm-h5/src/components/popup/agriExecutePopup.vue

<template>
    <popup v-model:show="showValue" round class="agri-execute-popup" :z-index="zIndex" teleport="body">
        <div class="popup-content">
            <!-- 头部区域 -->
            <div class="popup-header">
                <img class="expert-logo" src="@/assets/img/home/bird.png" alt="" />
                <!-- <img class="expert-logo" :src="popupData?.expertAvatar" alt="" /> -->
                <div class="expert-info">
                    <!-- <span>{{ popupData?.expertName || "韦帮稳" }}专家</span> -->
                    <span>飞鸟</span>
                    <span class="invite-text">邀请您进行农情互动</span>
                </div>
            </div>
            <div class="popup-tips">为了更好校准您的农事执行时间</div>


            <!-- 标题 -->
            <div class="popup-title">{{ popupData.subjectName }}</div>

            <!-- 异常信息区域 -->
            <div class="abnormal-info" v-if="popupData.subjectRemark">
                {{ popupData.subjectRemark }}
            </div>

            <!-- 图片区域 -->
            <img :src="popupData.exampleImg" alt="农事执行图片" class="execute-image" />

            <!-- 按钮区域 -->
            <div class="popup-buttons">
                <div class="btn-later" @click="handleLater" v-if="popupData.laterBtn">
                    {{ popupData.laterButtonText || "稍后执行" }}
                </div>
                <div class="btn-executed" @click="handleExecuted">
                    开始采集
                </div>
            </div>
        </div>
    </popup>
</template>

<script setup>
import { Popup } from "vant";
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const props = defineProps({
    // 遮罩层z-index
    zIndex: {
        type: Number,
        default: 9999,
    },
});

const emit = defineEmits(["later"]);

const showValue = ref(false);

// 稍后执行
const handleLater = () => {
    emit("later");
    emit("update:show", false);
};

// 我已执行
const handleExecuted = () => {
    showValue.value = false;
    router.push(`/interaction_list?farmId=${farmIdData.value}&regionId=${popupData.value.regionId}&interactionTypeId=${popupData.value.interactionTypeId}`);
};

const popupData = ref({});
const farmIdData = ref(null);
const showPopup = async (farmId) => {
    farmIdData.value = farmId;
    const { data } = await VE_API.home.hasUnrepliedTriggeredInteraction({ subjectId: localStorage.getItem("selectedFarmId") });
    if (data && data.id != null) {
        popupData.value = data;
        showValue.value = true;
        popupData.value.exampleImg = JSON.parse(data.exampleImagesJson)[0];
    }
};

// const handleClosePopup = () => {
//     VE_API.monitor.closeTodayPopup({
//         interactionId: popupData.value.id,
//     });
// }

defineExpose({
    showPopup,
});

</script>

<style scoped lang="scss">
.agri-execute-popup {
    width: 100%;
    padding: 16px;
    border-radius: 12px;

    .popup-content {
        display: flex;
        flex-direction: column;
    }

    .popup-tips {
        color: #000;
        font-size: 16px;
        margin-bottom: 5px;
    }

    .popup-header {
        margin-bottom: 5px;
        display: flex;
        align-items: center;
        gap: 6px;

        .expert-logo {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            object-fit: cover;
        }

        .expert-info {
            font-size: 12px;
            color: #000;

            .invite-text {
                margin-left: 6px;
                color: rgba(0, 0, 0, 0.4);
            }
        }
    }

    .popup-title {
        font-size: 26px;
        // margin-bottom: 14px;
        font-family: "PangMenZhengDao";
        color: #0785E8;
    }

    .abnormal-info {
        padding: 12px;
        color: #2199f8;
        background: rgba(33, 153, 248, 0.1);
        padding: 3px 9px 9px;
        border-radius: 8px;
        position: relative;
        margin-top: 15px;

        // 三角形小尖尖
        &::before {
            content: "";
            position: absolute;
            top: -8px;
            left: 20px;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 2px solid transparent;
            border-bottom: 8px solid rgba(33, 153, 248, 0.1);
        }
    }

    .execute-image {
        width: 100%;
        height: 200px;
        border-radius: 5px;
        object-fit: cover;
        margin: 11px 0 13px 0;
    }

    .popup-buttons {
        display: flex;
        gap: 13px;

        .btn-later,
        .btn-executed {
            flex: 1;
            padding: 8px;
            border-radius: 4px;
            font-size: 16px;
            text-align: center;
        }

        .btn-later {
            border: 1px solid #d7d7d7;
            color: #9d9d9d;
        }

        .btn-executed {
            background: #2199f8;
            color: #ffffff;
            border: 1px solid #2199f8;
        }
    }
}
</style>