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/mine/expert-icon.png" alt="" />
                <div class="expert-info">
                    <span>{{ popupData.expertName || "韦帮稳" }}专家</span>
                    <span class="invite-text">邀请您</span>
                </div>
            </div>

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

            <!-- 异常信息区域 -->
            <div class="abnormal-info">
                {{ popupData.abnormalText }}
            </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">
                    {{ popupData.executedButtonText || "我已执行" }}
                </div>
            </div>
        </div>
    </popup>
</template>

<script setup>
import { Popup } from "vant";
import { computed } from "vue";

const props = defineProps({
    // 控制弹窗显示/隐藏
    show: {
        type: Boolean,
        default: false,
    },
    // 标题
    popupData: {
        type: Object,
        default: () => ({
            expertName: "韦帮稳",
            title: "梢期杀虫 农事执行",
            abnormalText: "由于***异常的出现,由于***异常的出现,由于***异常的出现,由于***异常的出现,",
            imageUrl: "",
        }),
    },
    // 遮罩层z-index
    zIndex: {
        type: Number,
        default: 9999,
    },
});

const emit = defineEmits(["update:show", "later", "executed"]);

// 处理v-model双向绑定
const showValue = computed({
    get: () => props.show,
    set: (value) => emit("update:show", value),
});

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

// 我已执行
const handleExecuted = () => {
    emit("executed");
    emit("update:show", false);
};
</script>

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

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

    .popup-header {
        margin-bottom: 5px;
        display: flex;
        align-items: center;
        gap: 6px;
        .expert-logo {
            width: 26px;
            height: 26px;
        }

        .expert-info {
            font-size: 16px;
            .invite-text {
                color: #999999;
                margin-left: 6px;
            }
        }
    }

    .popup-title {
        font-size: 26px;
        margin-bottom: 14px;
        font-family: "PangMenZhengDao";
    }

    .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: -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: 184px;
        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>