个人信息页面技能模块修改。

This commit is contained in:
冯辉
2025-11-12 22:48:49 +08:00
parent 76ece8bfe7
commit c69b332836
2 changed files with 311 additions and 262 deletions

View File

@@ -15,10 +15,10 @@
<view class="search-icon" @click="handleSearch">搜索</view>
</view>
<!-- 已选技能提示 -->
<view class="selected-tip" v-if="selectedSkills.length > 0">
已选择 {{ selectedSkills.length }}/3 个技能
</view>
<!-- 已选技能提示 -->
<view class="selected-tip" v-if="selectedSkill">
已选择技能{{ selectedSkill }}
</view>
</view>
<!-- 可滚动内容区域 -->
@@ -58,23 +58,19 @@
<!-- 固定底部操作栏 -->
<view class="bottom-bar">
<view class="selected-skills" v-if="selectedSkills.length > 0">
<view
class="skill-tag"
v-for="(skill, index) in selectedSkills"
:key="index"
>
<text class="tag-text">{{ skill }}</text>
<text class="tag-close" @click.stop="removeSkill(index)">×</text>
<view class="selected-skills" v-if="selectedSkill">
<view class="skill-tag">
<text class="tag-text">{{ selectedSkill }}</text>
<text class="tag-close" @click.stop="removeSkill">×</text>
</view>
</view>
<view class="action-buttons">
<button class="btn-cancel" @click="handleCancel">取消</button>
<button
class="btn-confirm"
:class="{ 'disabled': selectedSkills.length === 0 }"
:class="{ 'disabled': !selectedSkill }"
@click="handleConfirm"
:disabled="selectedSkills.length === 0"
:disabled="!selectedSkill"
>
确定
</button>
@@ -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
</style>