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

<template>
    <uni-popup
        ref="popupRef"
        type="bottom"
        :borderRadius="'20rpx 30rpx 0 0'"
        background-color="#FFFFFF"
        maskBackgroundColor="rgba(255, 255, 255, 0.6)"
        :isMaskClick="true"
        @maskClick="handleClose"
    >
        <view class="skill-popup-content">
            <!-- 头部：标题和关闭按钮 -->
            <view class="popup-header">
                <text class="popup-title">{{ jobTitle }}</text>
                <view class="close-btn" @click="handleClose">
                    <uni-icons type="closeempty" size="20" color="#000000"></uni-icons>
                </view>
            </view>

            <!-- 内容区域 -->
            <scroll-view scroll-y class="popup-body" :show-scrollbar="false">
                <view 
                    class="skill-section" 
                    v-for="(section, sIndex) in skillSections" 
                    :key="sIndex"
                >
                    <view class="section-header">
                        <view class="section-icon"></view>
                        <text class="section-title">{{ section.title }}</text>
                    </view>
                    <view class="skill-list">
                        <view 
                            class="skill-item" 
                            v-for="(skill, index) in section.skills" 
                            :key="index"
                        >
                            <text class="skill-name">{{ skill.name }}</text>
                            <view class="skill-dots">
                                <view 
                                    class="dot" 
                                    :class="{ 'active': i - 1 < skill.level }"
                                    v-for="i in 6" 
                                    :key="i"
                                ></view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </uni-popup>
</template>

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

const props = defineProps({
    jobTitle: {
        type: String,
        default: ''
    },
    possessedSkills: {
        type: Array,
        default: () => []
    },
    improvementSkills: {
        type: Array,
        default: () => []
    }
});

const emit = defineEmits(['close']);

const popupRef = ref(null);

// 技能区块数据
const skillSections = computed(() => [
    { title: '已具备技能', skills: props.possessedSkills },
    { title: '需要提升的技能', skills: props.improvementSkills }
]);

function open() {
    popupRef.value?.open('bottom');
}

function close() {
    popupRef.value?.close('bottom');
}

function handleClose() {
    close();
    emit('close');
}

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

<style lang="scss" scoped>
.skill-popup-content {
    height: calc(100vh - 495rpx);
    background-color: #FFFFFF;
    border-radius: 30rpx 30rpx 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 48rpx 42rpx;
    border-bottom: 2rpx solid #F0F0F0;
    flex-shrink: 0;
    position: relative;
}

.popup-title {
    font-size: 54rpx;
    font-weight: 600;
    color: #000000;
    flex: 1;
}

.close-btn {
    width: 66rpx;
    height: 66rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #F5F5F5;
    position: absolute;
    right: 42rpx;
    top: 50%;
    transform: translateY(-50%);
}

.popup-body {
    flex: 1;
    padding: 0 42rpx 42rpx;
    overflow-y: auto;
    box-sizing: border-box;
}

.skill-section {
    margin-bottom: 60rpx;
    
    &:last-child {
        margin-bottom: 0;
    }
}

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 36rpx;
    gap: 18rpx;
}

.section-icon {
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #9974FD 0%, #286BFA 100%);
    flex-shrink: 0;
}

.section-title {
    font-size: 48rpx;
    font-weight: 600;
    color: #286BFA;
}

.skill-list {
    display: flex;
    flex-direction: column;
    gap: 18rpx;
}

.skill-item {
    background-color: #F5F5F5;
    border-radius: 18rpx;
    padding: 30rpx 36rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 96rpx;
    box-sizing: border-box;
}

.skill-name {
    font-size: 42rpx;
    color: #000000;
    flex: 1;
    margin-right: 30rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.skill-dots {
    display: flex;
    gap: 12rpx;
    align-items: center;
    flex-shrink: 0;
    width: 168rpx;
}

.dot {
    width: 18rpx;
    height: 18rpx;
    border-radius: 50%;
    background-color: #E0E0E0;
    
    &.active {
        background-color: #286BFA;
    }
}
</style>