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

<template>
    <popup v-model:show="showValue" round class="drone-consult-popup" :close-on-click-overlay="true" teleport="body">
        <div class="popup-content">
            <!-- 无人机咨询：飞鸟购买 -->
            <template v-if="type === 'droneConsult'">
                <div class="top-text">{{ $t('未监测您果园有配套的无人机，您可咨询飞鸟购买') }}</div>
                <div class="code-wrap">
                    <img class="code-img" src="@/assets/img/home/qrcode.png" alt="">
                </div>
                <div class="hint-bubble">{{ $t('长按可添加客服，咨询相关问题') }}</div>
                <div class="action-btn" @click="handleCopy">{{ $t('一键复制微信号') }}</div>
            </template>
            <!-- 地形/建模航线 -->
            <template v-else-if="type === 'terrainRoute'">
                <div class="top-text">
                    <div>{{ $t('需要获取精细的地形信息才可以规划航') }}</div>
                    <div>{{ $t('线,点击获取建模航线') }}</div>
                </div>
                <div class="action-btn" @click="handleConfirm">{{ $t('立即获取') }}</div>
            </template>
            <!-- 航线已生成（兼容图片 UI：中间区域不展示，仅文案 + 我知道了） -->
            <template v-else-if="type === 'terrainRouteSuccess'">
                <div class="top-text">{{ $t('果园三维建模航线已经生成，航线已经推送到遥控器上，请您按照规划的航线起飞即可') }}</div>
                <div class="video-wrap"></div>
                <div class="action-btn" @click="handleConfirm">{{ $t('我知道了') }}</div>
            </template>
        </div>
    </popup>
</template>

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

const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    /** 弹窗类型：droneConsult 无人机咨询 | terrainRoute 地形/建模航线 | terrainRouteSuccess 航线已生成（兼容图片 UI，中间区域不展示） */
    type: {
        type: String,
        default: "droneConsult",
    },
    /** 要复制的微信号（仅 type=droneConsult 时有效），不传则复制默认客服号 */
    wechatId: {
        type: String,
        default: "",
    },
});

const emit = defineEmits(["update:show", "copy", "confirm"]);

const showValue = computed({
    get: () => props.show,
    set: (value) => emit("update:show", value),
});

const handleCopy = async () => {
    const id = props.wechatId || "feiniao-kefu";
    try {
        await navigator.clipboard.writeText(id);
        emit("copy", id);
        emit("update:show", false);
    } catch (e) {
        console.error("复制失败", e);
        emit("copy", id);
        emit("update:show", false);
    }
};

const handleConfirm = () => {
    emit("confirm");
    emit("update:show", false);
};
</script>

<style scoped lang="scss">
.drone-consult-popup {
    width: 89%;
    padding: 20px 16px;

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

    .top-text {
        font-size: 16px;
        color: #333;
        text-align: left;
        line-height: 1.6;
        margin-bottom: 20px;
        width: 100%;
    }

    .code-wrap{
        width: 186px;
        height: 186px;
        background: #f5f5f5;
        border-radius: 4px;
        border: 0.86px solid rgba(33, 153, 248, 0.2);
        background: rgba(33, 153, 248, 0.04);
        display: flex;
        align-items: center;
        justify-content: center;
        .code-img{
            width: 176px;
            height: 176px;
            object-fit: cover;
        }
    }

    .hint-bubble {
        padding: 12px;
        color: #2199f8;
        background: rgba(33, 153, 248, 0.1);
        padding: 3px 9px 9px;
        border-radius: 8px;
        position: relative;
        margin-top: 5px;
        margin: 16px 0;

        // 三角形小尖尖
        &::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);
        }
    }

    .video-wrap{
        width: 100%;
        height: 220px;
        background: rgba(33, 153, 248, 0.05);
        border-radius: 5px;
        border: 1px solid rgba(33, 153, 248, 0.2);
        margin-bottom: 16px;
    }

    .action-btn {
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        background: #2199f8;
        color: #fff;
        text-align: center;
        padding: 8px;
        border-radius: 4px;
    }

    .top-text > div {
        margin-bottom: 0;
    }
}
</style>