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

<template>
    <popup 
        v-model:show="showValue" 
        round 
        class="tip-popup"
        :overlay-style="overlayStyle"
        teleport="body"
        :close-on-click-overlay="closeOnClickOverlay"
        @click-overlay="handleClickOverlay"
    >
        <template v-if="type === 'create'">
            <img class="tip-icon create-icon" src="@/assets/img/home/create-farm-icon.png" alt="" />
            <div class="tip-text">
                <div v-for="(line, index) in textLines" :key="index">{{ line }}</div>
            </div>
        </template>
        <template v-else-if="type === 'success'">
            <img class="tip-icon success-icon" src="@/assets/img/home/right.png" alt="" />
            <div class="tip-text success-text">{{ text }} <span class="highlight-text">{{ highlightText }}</span></div>
        </template>
        <template v-else>
            <img class="tip-icon success-icon" src="@/assets/img/home/create-farm-icon.png" alt="" />
            <div class="tip-text success-text">{{ text }} <span class="highlight-text">{{ highlightText }}</span> {{ text2 }}</div>
        </template>
        <div class="tip-btn" @click.stop="handleBtnClick">
            {{ buttonText || (type === "create" ? "去创建农场" : "我知道了") }}
        </div>
    </popup>
</template>

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

const props = defineProps({
    // 控制弹窗显示/隐藏
    show: {
        type: Boolean,
        default: false,
    },
    // 类型：'create' 或 'success' 或 'warning'，决定显示哪个图标
    type: {
        type: String,
        default: "create",
    },
    // 提示文字内容
    text: {
        type: [String, Array],
        default: "",
    },
    // 按钮文字，如果不传则根据type自动决定
    buttonText: {
        type: String,
        default: "",
    },
    // 遮罩层样式
    overlayStyle: {
        type: Object,
        default: () => ({}),
    },
    // 是否在点击遮罩层后关闭弹窗
    closeOnClickOverlay: {
        type: Boolean,
        default: true,
    },
    // 高亮文字
    highlightText: {
        type: String,
        default: "",
    },
    // 第二行文字
    text2: {
        type: String,
        default: "",
    },
});

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

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

// 将文字内容转换为数组，支持多行显示
const textLines = computed(() => {
    if (Array.isArray(props.text)) {
        return props.text;
    }
    if (typeof props.text === "string") {
        return props.text.split("\n").filter((line) => line.trim());
    }
    return [];
});

const handleBtnClick = () => {
    emit("confirm");
    if(props.buttonText !== "分享微信"){
        emit("update:show", false);
    }
};

const handleClickOverlay = () => {
    emit("handleClickOverlay");
    if(props.closeOnClickOverlay){
        emit("update:show", false);
    }
};
</script>

<style scoped lang="scss">
.tip-popup {
    z-index: 10000 !important;
    width: 80%;
    padding: 28px 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .tip-icon {
        margin-bottom: 12px;
        &.create-icon {
            width: 40px;
            height: 40px;
        }
        &.success-icon {
            width: 68px;
            height: 68px;
        }
    }
    .tip-text {
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 32px;
        text-align: center;
        &.success-text {
            font-size: 22px;
            font-weight: 400;
        }
        .highlight-text {
            color: #2199f8;
        }
    }
    .tip-btn {
        width: 100%;
        box-sizing: border-box;
        padding: 8px;
        border-radius: 25px;
        font-size: 16px;
        background: #2199f8;
        color: #fff;
        text-align: center;
        cursor: pointer;
    }
}
</style>