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

<template>
    <popup
        v-model:show="showValue"
        round
        teleport="body"
        class="leave-confirm-popup"
        :close-on-click-overlay="true"
    >
        <img class="leave-confirm-popup__icon" src="@/assets/img/agricultural/notice.png" alt="" />
        <div class="leave-confirm-popup__title">{{ t("agriFile.confirmLeaveTitle") }}</div>
        <div class="leave-confirm-popup__desc">
            <div>{{ t("agriFile.confirmLeaveDesc1") }}</div>
            <div>{{ t("agriFile.confirmLeaveDesc2") }}</div>
        </div>
        <div class="leave-confirm-popup__btn" @click="handleContinue">{{ t("agriFile.continueRecord") }}</div>
        <div class="leave-confirm-popup__leave" @click="handleLeave">{{ t("agriFile.confirmLeave") }}</div>
    </popup>
</template>

<script setup>
import { computed } from "vue";
import { Popup } from "vant";
import { useI18n } from "@/i18n";

const { t } = useI18n();

const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
});

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

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

const handleContinue = () => {
    emit("cancel");
    showValue.value = false;
};

const handleLeave = () => {
    emit("confirm");
    showValue.value = false;
};
</script>

<style scoped lang="scss">
.leave-confirm-popup {
    width: 78%;
    padding: 72px 20px 22px;
    text-align: center;
    overflow: visible;
    background: linear-gradient(360deg, #FFFFFF 0%, #D3EBFF 100%);

    &__icon {
        position: absolute;
        top: -32px;
        left: 50%;
        display: block;
        width: 102px;
        height: 102px;
        transform: translateX(-50%);
    }

    &__title {
        font-size: 26px;
        color: #010101;
        font-family: "pangmenzhengdao";
    }

    &__desc {
        margin-top: 8px;
        color: #1F1F1F;
    }

    &__btn {
        margin: 20px auto 10px;
        padding: 8px;
        border-radius: 25px;
        background: linear-gradient(180deg, #96D1FF 0%, #2199F8 100%);
        color: #fff;
        font-size: 16px;
    }

    &__leave {
        color: #AEAEAE;
    }
}
</style>