diff --git a/mini-program/src/pages/onboarding/index.vue b/mini-program/src/pages/onboarding/index.vue index 857c6e2..50cd433 100644 --- a/mini-program/src/pages/onboarding/index.vue +++ b/mini-program/src/pages/onboarding/index.vue @@ -127,20 +127,23 @@ - - - 性格标签 - (最多选择5个) + + + + 性格标签 + (最多选择5个) + + 管理 {{ tag }} - + 添加标签 + + 添加标签 @@ -151,16 +154,17 @@ 兴趣爱好 (最多选择5个) - + 自定义兴趣 + 管理 {{ tag }} + + 添加兴趣 @@ -292,6 +296,45 @@ const syncFromStore = () => { birthday.value = source.birthday || '' } +/** + * 性格标签有序展示列表: + * 1. 新增的自定义标签(不在预设中)按库顺序排在最前 + * 2. 已选中的其他标签紧随其后 + * 3. 其余未选中的预设标签排在最后 + */ +const displayPersonalityTags = computed(() => { + const selectedSet = new Set(form.personalityTags) + const presetSet = new Set(personalityTags) + + const customTags = form.personalityTagLibrary.filter((tag) => !presetSet.has(tag)) + const selectedPreset = form.personalityTagLibrary.filter( + (tag) => presetSet.has(tag) && selectedSet.has(tag) + ) + const unselectedPreset = form.personalityTagLibrary.filter( + (tag) => presetSet.has(tag) && !selectedSet.has(tag) + ) + + return [...customTags, ...selectedPreset, ...unselectedPreset] +}) + +/** + * 兴趣爱好有序展示列表(逻辑同上) + */ +const displayHobbyTags = computed(() => { + const selectedSet = new Set(form.hobbies) + const presetSet = new Set(hobbyOptions) + + const customTags = form.hobbyLibrary.filter((tag) => !presetSet.has(tag)) + const selectedPreset = form.hobbyLibrary.filter( + (tag) => presetSet.has(tag) && selectedSet.has(tag) + ) + const unselectedPreset = form.hobbyLibrary.filter( + (tag) => presetSet.has(tag) && !selectedSet.has(tag) + ) + + return [...customTags, ...selectedPreset, ...unselectedPreset] +}) + const onBirthday = (event) => { birthday.value = event.detail.value } @@ -321,16 +364,52 @@ const chooseAvatar = () => { }) } -const addCustomHobby = () => { +/** + * 跳转到管理标签页面 + */ +const goTagManage = (type) => { + uni.navigateTo({ + url: `/pages/onboarding/tag-manage?type=${type}` + }) +} + +/** + * 新增自定义标签(性格标签 / 兴趣爱好通用) + * @param {string} type 'personality' 或 'hobby' + */ +const addCustomTag = (type) => { + const isPersonality = type === 'personality' + const library = isPersonality ? form.personalityTagLibrary : form.hobbyLibrary + const selected = isPersonality ? form.personalityTags : form.hobbies + const title = isPersonality ? '添加性格标签' : '添加兴趣爱好' + uni.showModal({ - title: '自定义兴趣', + title, editable: true, - placeholderText: '输入兴趣名称', + placeholderText: '请输入标签(最多8个字符)', success: (res) => { const value = String(res.content || '').trim() - if (!res.confirm || !value) return - if (!hobbyOptions.includes(value)) hobbyOptions.push(value) - toggleList(form.hobbies, value, 5) + if (!res.confirm) return + if (!value) { + uni.showToast({ title: '请输入标签内容', icon: 'none' }) + return + } + if (value.length > 8) { + uni.showToast({ title: '标签最多8个字符', icon: 'none' }) + return + } + if (library.includes(value)) { + uni.showToast({ title: '标签已存在', icon: 'none' }) + return + } + // 新标签插入到库数组最前面 + library.unshift(value) + // 若已选未满 5 个,自动加入已选;否则仅提示 + if (selected.length >= 5) { + uni.showToast({ title: '已达上限,仅加入标签库', icon: 'none' }) + return + } + selected.push(value) } }) } @@ -907,6 +986,11 @@ onMounted(async () => { font-size: 23rpx; } +.manage-link { + color: #c06dff; + font-size: 23rpx; +} + .bio-panel { margin-bottom: 0; }