diff --git a/packageA/pages/personalInfo/personalInfo.vue b/packageA/pages/personalInfo/personalInfo.vue index 45401d1..32cb0b9 100644 --- a/packageA/pages/personalInfo/personalInfo.vue +++ b/packageA/pages/personalInfo/personalInfo.vue @@ -58,25 +58,53 @@ 手机号码 - - 技能等级 - - - - 技能名称 - - - {{ item }} + + + 技能信息 + + + 添加技能 + + + + + + + 技能 {{ index + 1 }} + + 删除 + + + + + + 技能名称 + + + + + 技能等级 + + + + + + + 暂无技能信息,点击上方按钮添加 + @@ -125,8 +153,8 @@ const percent = ref('0%'); const state = reactive({ educationText: '', politicalAffiliationText: '', - skillsText: [], - skillLevelText: '' + skills: [], // 新的技能数据结构 + currentEditingSkillIndex: -1 // 当前正在编辑的技能索引 }); const fromValue = reactive({ name: '', @@ -135,8 +163,7 @@ const fromValue = reactive({ education: '', politicalAffiliation: '', idCard: '', - skills: '', - skillLevel: '' + phone: '' }); // 移除重复的onLoad定义,已在上方实现 @@ -144,127 +171,12 @@ const fromValue = reactive({ onLoad(() => { // 初始化页面数据 initLoad(); - - // initLoad执行完毕后,尝试从appSkillsList获取和设置技能信息 - // 使用setTimeout确保initLoad完全执行 - setTimeout(() => { - try { - // 方式1:直接从缓存获取appSkillsList - let appSkillsList = uni.getStorageSync('appSkillsList'); - - // 方式2:如果缓存中没有,尝试从用户信息中获取 - if (!appSkillsList || !Array.isArray(appSkillsList) || appSkillsList.length === 0) { - const userInfo = uni.getStorageSync('userInfo'); - if (userInfo && userInfo.appSkillsList) { - appSkillsList = userInfo.appSkillsList; - } - } - - // 打印调试信息 - console.log('获取到的appSkillsList:', appSkillsList); - - // 处理技能信息回显 - if (appSkillsList && Array.isArray(appSkillsList) && appSkillsList.length > 0) { - // 过滤掉name为空的技能项 - const validSkills = appSkillsList.filter(item => item.name && item.name.trim() !== ''); - console.log('过滤后的有效技能:', validSkills); - - if (validSkills.length > 0) { - // 提取有效的技能名称数组 - const skillNames = validSkills.map(item => item.name); - console.log('提取的技能名称数组:', skillNames); - - // 确保fromValue.skills和state.skillsText的格式正确 - fromValue.skills = skillNames.join(','); // 转换为逗号分隔的字符串 - state.skillsText = skillNames; // 转换为数组格式 - console.log('设置的fromValue.skills:', fromValue.skills); - console.log('设置的state.skillsText:', state.skillsText); - - // 提取最后一个技能的等级 - const lastSkill = validSkills[validSkills.length - 1]; - const lastSkillLevel = lastSkill.levels; - console.log('最后一个技能等级:', lastSkillLevel); - - if (lastSkillLevel) { - // 定义等级映射,用于兼容不同格式的等级值 - const levelMap = { - '1': { value: '1', label: '初级' }, - '2': { value: '2', label: '中级' }, - '3': { value: '3', label: '高级' }, - '初级': { value: '1', label: '初级' }, - '中级': { value: '2', label: '中级' }, - '高级': { value: '3', label: '高级' } - }; - - // 获取对应的等级信息 - const levelInfo = levelMap[lastSkillLevel] || { value: '1', label: '初级' }; - fromValue.skillLevel = levelInfo.value; - state.skillLevelText = levelInfo.label; - console.log('设置的技能等级:', levelInfo); - } - } - - // 更新完成度百分比 - const result = getFormCompletionPercent(fromValue); - percent.value = result; - console.log('更新完成度:', percent.value); - } - } catch (error) { - console.error('获取技能信息失败:', error); - } - }, 100); // 短暂延迟确保初始化完成 }); // 监听页面显示,接收从技能查询页面返回的数据 onShow(() => { // 通过事件总线接收技能选择结果 uni.$on('skillSelected', handleSkillSelected); - - // 在页面显示时也再次尝试获取技能信息,确保数据最新 - try { - // 优先尝试从用户信息中获取 - const userInfo = uni.getStorageSync('userInfo'); - let appSkillsList = userInfo && userInfo.appSkillsList ? userInfo.appSkillsList : uni.getStorageSync('appSkillsList'); - - // 只有在之前未设置或数据有更新时才重新设置 - if (appSkillsList && Array.isArray(appSkillsList) && appSkillsList.length > 0) { - const validSkills = appSkillsList.filter(item => item.name && item.name.trim() !== ''); - if (validSkills.length > 0) { - // 检查是否需要更新 - const currentSkillsText = state.skillsText || ''; - const newSkillNames = validSkills.map(item => item.name); - const newSkillsText = newSkillNames.join(', '); - - // 如果技能名称或等级有变化,才更新 - if (currentSkillsText !== newSkillsText || !fromValue.skillLevel) { - fromValue.skills = newSkillNames; - state.skillsText = newSkillsText; - - const lastSkill = validSkills[validSkills.length - 1]; - if (lastSkill.levels) { - const levelMap = { - '1': { value: '1', label: '初级' }, - '2': { value: '2', label: '中级' }, - '3': { value: '3', label: '高级' }, - '初级': { value: '1', label: '初级' }, - '中级': { value: '2', label: '中级' }, - '高级': { value: '3', label: '高级' } - }; - - const levelInfo = levelMap[lastSkill.levels] || { value: '1', label: '初级' }; - fromValue.skillLevel = levelInfo.value; - state.skillLevelText = levelInfo.label; - } - - // 更新完成度 - const result = getFormCompletionPercent(fromValue); - percent.value = result; - } - } - } - } catch (error) { - console.error('页面显示时获取技能信息失败:', error); - } }); // 页面卸载时移除事件监听 @@ -332,36 +244,21 @@ function initLoad() { fromValue.politicalAffiliation = currentUserInfo.politicalAffiliation || ''; fromValue.idCard = currentUserInfo.idCard || ''; - // 初始化技能数据 - if (currentUserInfo.skills) { - fromValue.skills = currentUserInfo.skills; - // 将技能字符串分割成数组用于显示 - state.skillsText = currentUserInfo.skills.split(','); - } else { - fromValue.skills = ''; - state.skillsText = []; - } - - // 初始化技能等级数据 - if (currentUserInfo.skillLevel) { - fromValue.skillLevel = currentUserInfo.skillLevel; - // 根据skillLevel值设置对应的文本 - switch(currentUserInfo.skillLevel) { - case '1': - state.skillLevelText = '初级'; - break; - case '2': - state.skillLevelText = '中级'; - break; - case '3': - state.skillLevelText = '高级'; - break; - default: - state.skillLevelText = ''; + // 初始化技能数据 - 从appSkillsList获取 + if (currentUserInfo.appSkillsList && Array.isArray(currentUserInfo.appSkillsList)) { + // 过滤掉name为空的技能项 + const validSkills = currentUserInfo.appSkillsList.filter(item => item.name && item.name.trim() !== ''); + if (validSkills.length > 0) { + // 将appSkillsList转换为新的技能数据结构 + state.skills = validSkills.map(skill => ({ + name: skill.name, + level: skill.levels || '' + })); + } else { + state.skills = []; } } else { - fromValue.skillLevel = ''; - state.skillLevelText = ''; + state.skills = []; } // 初始化学历显示文本(需要等待字典数据加载完成) @@ -452,17 +349,14 @@ const confirm = () => { if (!checkingPhoneRegExp(fromValue.phone)) { return $api.msg('请输入正确手机号'); } - // 构建appSkillsList数据结构 - let appSkillsList = []; - if (state.skillsText && state.skillsText.length > 0) { - // 获取当前技能等级文本 - const currentLevelText = state.skillLevelText || ''; - // 为每个技能名称创建一个包含等级信息的对象 - appSkillsList = state.skillsText.map(skillName => ({ - name: skillName, - levels: currentLevelText + + // 构建appSkillsList数据结构 - 使用新的技能数据结构 + const appSkillsList = state.skills + .filter(skill => skill.name && skill.name.trim() !== '') + .map(skill => ({ + name: skill.name, + levels: skill.level || '' })); - } const params = { ...fromValue, @@ -478,31 +372,101 @@ const confirm = () => { }); }; -// 技能选择回调函数 -const handleSkillSelected = (skills) => { - if (Array.isArray(skills) && skills.length > 0) { - // 更新技能显示和值,技能字段值传name - state.skillsText = skills; - fromValue.skills = skills.join(','); - // 更新完成度 - const result = getFormCompletionPercent(fromValue); - percent.value = result; - } else { - // 如果返回空数组,清空选择 - state.skillsText = []; - fromValue.skills = ''; +// 添加技能 +function addSkill() { + if (state.skills.length >= 3) { + $api.msg('最多只能添加3个技能'); + return; } -}; + + // 添加新的技能对象 + state.skills.push({ + name: '', + level: '' + }); + + // 更新完成度 + const result = getFormCompletionPercent(fromValue); + percent.value = result; +} -// 技能名称选择 - 跳转到模糊查询页面 -function changeSkills() { +// 删除技能 +function removeSkill(index) { + state.skills.splice(index, 1); + + // 更新完成度 + const result = getFormCompletionPercent(fromValue); + percent.value = result; +} + +// 获取技能等级文本 +function getSkillLevelText(level) { + const levelMap = { + '1': '初级', + '2': '中级', + '3': '高级' + }; + return levelMap[level] || ''; +} + +// 选择技能名称 +function changeSkillName(index) { + state.currentEditingSkillIndex = index; + // 将当前已选中的技能名称传递给查询页面 - const selectedSkills = state.skillsText || []; + const selectedSkills = state.skills.map(skill => skill.name).filter(name => name); uni.navigateTo({ url: `/pages/complete-info/skill-search?selected=${encodeURIComponent(JSON.stringify(selectedSkills))}` }); } +// 选择技能等级 +function changeSkillLevel(index) { + const skillLevels = [ + { label: '初级', value: '1' }, + { label: '中级', value: '2' }, + { label: '高级', value: '3' } + ]; + + // 查找当前技能等级在数据中的索引 + let defaultIndex = [0]; + const currentSkill = state.skills[index]; + if (currentSkill && currentSkill.level) { + const index = skillLevels.findIndex(item => item.value === currentSkill.level); + if (index >= 0) { + defaultIndex = [index]; + } + } + + openSelectPopup({ + title: '技能等级', + maskClick: true, + data: [skillLevels], + defaultIndex: defaultIndex, + success: (_, [value]) => { + state.skills[index].level = value.value; + // 更新完成度 + const result = getFormCompletionPercent(fromValue); + percent.value = result; + }, + }); +} + +// 技能选择回调函数 +const handleSkillSelected = (skillName) => { + if (skillName && state.currentEditingSkillIndex >= 0) { + // 更新当前编辑的技能名称 + state.skills[state.currentEditingSkillIndex].name = skillName; + + // 重置当前编辑索引 + state.currentEditingSkillIndex = -1; + + // 更新完成度 + const result = getFormCompletionPercent(fromValue); + percent.value = result; + } +}; + const changeDateBirt = () => { const datearray = generateDatePickerArrays(); const defaultIndex = getDatePickerIndexes(fromValue.birthDate); @@ -629,36 +593,6 @@ const changePoliticalAffiliation = () => { }); }; -// 技能等级选择 -function changeSkillLevel() { - const skillLevels = [ - { label: '初级', value: '1' }, - { label: '中级', value: '2' }, - { label: '高级', value: '3' } - ]; - - // 查找当前技能等级在数据中的索引 - let defaultIndex = [0]; - if (fromValue.skillLevel) { - const index = skillLevels.findIndex(item => item.value === fromValue.skillLevel); - if (index >= 0) { - defaultIndex = [index]; - } - } - - openSelectPopup({ - title: '技能等级', - maskClick: true, - data: [skillLevels], - defaultIndex: defaultIndex, - success: (_, [value]) => { - fromValue.skillLevel = value.value; - state.skillLevelText = value.label; - const result = getFormCompletionPercent(fromValue); - percent.value = result; - }, - }); -} function generateDatePickerArrays(startYear = 1975, endYear = new Date().getFullYear()) { const years = []; @@ -755,7 +689,7 @@ function getDatePickerIndexes(dateStr) { dateStr = `${year}-${month}-${day}`; } - const dateParts = dateStr.split('-'); + let dateParts = dateStr.split('-'); if (dateParts.length !== 3) { // 如果分割后不是3部分,使用当前日期作为默认值 const today = new Date(); @@ -882,4 +816,130 @@ function getDatePickerIndexes(dateStr) { color: #FFFFFF; text-align: center; line-height: 90rpx + +// 技能信息样式 +.content-skills + margin-bottom: 52rpx + + .skills-header + display: flex + justify-content: space-between + align-items: center + margin-bottom: 32rpx + + .input-titile + font-weight: 400 + font-size: 28rpx + color: #6A6A6A + + .add-skill-btn + padding: 16rpx 32rpx + background: #256BFA + color: #FFFFFF + border-radius: 8rpx + font-size: 26rpx + font-weight: 500 + transition: all 0.3s ease + + &:active + background: #1a5cd9 + transform: scale(0.98) + + &.disabled + background: #CCCCCC + color: #999999 + cursor: not-allowed + + &:active + background: #CCCCCC + transform: none + + .skills-list + .skill-item + background: #FFFFFF + border: 2rpx solid #E8EAEE + border-radius: 12rpx + padding: 24rpx + margin-bottom: 24rpx + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05) + transition: all 0.3s ease + + &:hover + box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1) + border-color: #256BFA + + .skill-header + display: flex + justify-content: space-between + align-items: center + margin-bottom: 20rpx + + .skill-number + font-weight: 500 + font-size: 28rpx + color: #333333 + + .skill-actions + .action-btn + padding: 8rpx 16rpx + border-radius: 6rpx + font-size: 24rpx + font-weight: 400 + transition: all 0.2s ease + + &.delete-btn + background: #FF4D4F + color: #FFFFFF + + &:active + background: #D9363E + transform: scale(0.95) + + .skill-fields + display: flex + flex-direction: column + gap: 20rpx + + .skill-field + .field-label + font-weight: 400 + font-size: 26rpx + color: #6A6A6A + margin-bottom: 8rpx + + .field-input + font-weight: 400 + font-size: 28rpx + color: #333333 + line-height: 72rpx + height: 72rpx + border: 2rpx solid #E8EAEE + border-radius: 8rpx + padding: 0 20rpx + background: #F8F9FA + transition: all 0.3s ease + + &:focus + border-color: #256BFA + background: #FFFFFF + + &.triangle::before + right: 30rpx + top: calc(50% - 2rpx) + + &.triangle::after + right: 30rpx + top: 50% + + .empty-skills + text-align: center + padding: 60rpx 0 + background: #F8F9FA + border-radius: 12rpx + border: 2rpx dashed #E8EAEE + + .empty-text + font-size: 28rpx + color: #999999 + font-weight: 400 diff --git a/pages/complete-info/skill-search.vue b/pages/complete-info/skill-search.vue index 957a758..635b0b2 100644 --- a/pages/complete-info/skill-search.vue +++ b/pages/complete-info/skill-search.vue @@ -15,10 +15,10 @@ 搜索 - - - 已选择 {{ selectedSkills.length }}/3 个技能 - + + + 已选择技能:{{ selectedSkill }} + @@ -58,23 +58,19 @@ - - - {{ skill }} - × + + + {{ selectedSkill }} + × @@ -93,17 +89,17 @@ const { $api } = inject('globalFunction'); const searchKeyword = ref(''); const searchResults = ref([]); -const selectedSkills = ref([]); +const selectedSkill = ref(''); // 改为单选,存储单个技能名称 const isSearching = ref(false); let searchTimer = null; onLoad((options) => { - // 接收已选中的技能 + // 接收已选中的技能(单选模式,只接收单个技能) if (options.selected) { try { const skills = JSON.parse(decodeURIComponent(options.selected)); - if (Array.isArray(skills)) { - selectedSkills.value = skills; + if (Array.isArray(skills) && skills.length > 0) { + selectedSkill.value = skills[0]; // 只取第一个技能 } } catch (e) { console.error('解析已选技能失败:', e); @@ -176,31 +172,25 @@ async function performSearch(keyword) { // 判断技能是否已选中 function isSelected(item) { - return selectedSkills.value.includes(item.name); + return selectedSkill.value === item.name; } -// 切换技能选择状态 +// 切换技能选择状态(单选模式) function toggleSelect(item) { const skillName = item.name; - const index = selectedSkills.value.indexOf(skillName); - if (index > -1) { + if (selectedSkill.value === skillName) { // 已选中,取消选择 - selectedSkills.value.splice(index, 1); + selectedSkill.value = ''; } else { - // 未选中,检查是否已达到最大数量 - if (selectedSkills.value.length >= 3) { - $api.msg('最多只能选择3个技能'); - return; - } - // 添加选择 - selectedSkills.value.push(skillName); + // 选择新的技能 + selectedSkill.value = skillName; } } -// 移除技能 -function removeSkill(index) { - selectedSkills.value.splice(index, 1); +// 移除技能(单选模式,直接清空) +function removeSkill() { + selectedSkill.value = ''; } // 取消操作 @@ -210,13 +200,13 @@ function handleCancel() { // 确定操作 function handleConfirm() { - if (selectedSkills.value.length === 0) { - $api.msg('请至少选择一个技能'); + if (!selectedSkill.value) { + $api.msg('请选择一个技能'); return; } - // 通过事件总线传递选中的技能(技能字段值传name) - uni.$emit('skillSelected', selectedSkills.value); + // 通过事件总线传递选中的技能(单选模式,传递单个技能名称) + uni.$emit('skillSelected', selectedSkill.value); // 返回上一页 uni.navigateBack(); @@ -385,4 +375,3 @@ onUnmounted(() => { background-color: #ccc color: #999 -