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

<template>
    <popup
        v-model:show="showValue"
        round
        class="start-interact-popup"
        teleport="body"
        z-index="9999"
    >
        <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="" /> -->
                <!-- <el-avatar :size="26" :src="popupData?.expertAvatar" /> -->
                <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">农情互动</div>

            <!-- 异常信息区域 -->
            <div class="abnormal-info">
                完善作物品种以及物候信息，精准匹配种植方案，实现精细化管理
            </div>

            <!-- 图片区域 -->
            <img src="@/assets/img/home/start.png" alt="农事执行图片" class="execute-image" />

            <!-- 按钮区域 -->
            <div class="popup-buttons">
                <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 popupData = ref({
    expertName: "",
    expertAvatar: "",
});

const showValue = ref(false);

// 开始采集
const handleExecuted = () => {
    
    showValue.value = false;
    router.push("/interaction?subjectId=" + localStorage.getItem("selectedFarmId"));
};

const getPhenologyInitOrConfirmStatus = async () => {
    const { data } = await VE_API.farm_v3.phenologyInitOrConfirmStatus({ subjectId: localStorage.getItem("selectedFarmId") });
    if (!data?.farms ||!data.farms.length) {
        // showValue.value = false;
        return;
    }
    popupData.value = data.farms[0];
    showValue.value = true;
}

defineExpose({
    getPhenologyInitOrConfirmStatus,
});
</script>

<style scoped lang="scss">
.start-interact-popup {
    width: 100%;
    padding: 13px 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: 24px;
        margin-bottom: 6px;
        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: 5px;
        
        // 三角形小尖尖
        &::before {
            content: "";
            position: absolute;
            top: -7.5px;
            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: 170px;
        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>