feiniao-farm-h5/src/views/old_mini/recordDetails/components/RegionNamePopup.vue

<template>
    <popup
        v-model:show="showValue"
        round
        closeable
        class="region-name-popup"
        :close-on-click-overlay="false"
        teleport="body"
    >
        <div class="region-name-popup__content">
            <div class="region-name-popup__title">{{ $t('区域名称') }}</div>
            <el-input
                v-model="regionName"
                size="large"
                :placeholder="$t('请输入区域名称')"
            />
            <div class="region-name-popup__confirm" @click="handleConfirm">
                {{ $t('确认区域') }}
            </div>
        </div>
    </popup>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { Popup } from "vant";
import { ElMessage } from "element-plus";

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

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

const regionName = ref("");

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

watch(
    () => props.show,
    (val) => {
        if (val) {
            regionName.value = "";
        }
    },
);

const handleConfirm = () => {
    const name = regionName.value.trim();
    if (!name) {
        ElMessage.warning("请输入区域名称");
        return;
    }
    emit("confirm", name);
    emit("update:show", false);
};
</script>

<style scoped lang="scss">
.region-name-popup {
    width: 100%;

    :deep(.van-popup__close-icon) {
        color: #333333;
        font-size: 18px;
    }

    &__content {
        padding: 24px 16px 20px;
        background: linear-gradient(360deg, #ffffff 74.2%, #d1ebff 100%);
        border-radius: 16px;
        box-sizing: border-box;
    }

    &__title {
        font-size: 16px;
        margin-bottom: 12px;
    }

    :deep(.el-input__wrapper) {
        border-radius: 4px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
    }

    &__confirm {
        margin-top: 24px;
        padding: 8px;
        border-radius: 25px;
        background: #2199f8;
        color: #fff;
        font-size: 16px;
        text-align: center;
    }
}
</style>