ks-app-employment-service/pages/service/components/RemindPopup.vue

<template>
    <uni-popup
        ref="popupRef"
        type="center"
        borderRadius="10px 10px 10px 10px"
        background-color="#FFFFFF"
        :mask-click="false"
    >
        <view class="remind-popup-content">
            <view class="remind-title">提醒</view>
            <view class="remind-message">请先完善您的个人信息:</view>
            <view class="remind-list">
                <view 
                    class="remind-item" 
                    v-for="(item, index) in remindList" 
                    :key="index"
                >
                    {{ index + 1 }}、{{ item }}
                </view>
            </view>
            <view class="remind-btns">
                <button class="remind-btn cancel-btn" @click="handleCancel">取消</button>
                <button class="remind-btn confirm-btn" @click="handleConfirm">确认</button>
            </view>
        </view>
    </uni-popup>
</template>

<script setup>
import { ref, defineExpose } from 'vue';

const props = defineProps({
    remindList: {
        type: Array,
        default: () => []
    }
});

const emit = defineEmits(['cancel', 'confirm']);

const popupRef = ref(null);

// 打开弹窗
function open() {
    if (popupRef.value) {
        try {
            popupRef.value.open();
        } catch (error) {
            // 静默处理错误
        }
    }
}

// 关闭弹窗
function close() {
    popupRef.value?.close();
}

// 取消按钮
function handleCancel() {
    emit('cancel');
}

// 确认按钮
function handleConfirm() {
    emit('confirm');
}

defineExpose({
    open,
    close
});
</script>

<style lang="scss" scoped>
.remind-popup-content {
    padding: 40rpx;
    width: 630rpx;
    background-color: #FFFFFF;
    border-radius: 20rpx;
    box-sizing: border-box;
}

.remind-title {
    font-weight: 600;
    font-size: 32rpx;
    color: #000000;
    margin-bottom: 24rpx;
}

.remind-message {
    font-size: 28rpx;
    color: #000000;
    margin-bottom: 20rpx;
    line-height: 40rpx;
}

.remind-list {
    margin-bottom: 32rpx;
    min-height: 40rpx;
}

.remind-item {
    font-size: 28rpx;
    color: #000000;
    line-height: 40rpx;
    margin-bottom: 8rpx;
}

.remind-btns {
    display: flex;
    justify-content: space-between;
    gap: 20rpx;
}

.remind-btn {
    flex: 1;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    border-radius: 8rpx;
    font-size: 28rpx;
    padding: 0;
    box-sizing: border-box;
    font-weight: 400;
}

.cancel-btn {
    background-color: #FFFFFF;
    color: #666666;
    border: 1rpx solid #E5E7EB;
}

.confirm-btn {
    background-color: #256BFA;
    color: #FFFFFF;
    border: none;
}

button::after {
    border: none;
}
</style>