个人信息页面需求更改

packageA/pages/personalInfo/personalInfo.vue

@@ -58,13 +58,25 @@
                 <view class="input-titile">手机号码</view>
                 <input class="input-con" v-model="fromValue.phone" placeholder="请输入您的手机号码" />
             </view>
+            <view class="content-input" @click="changeSkills">
+                <view class="input-titile">技能名称</view>
+                <input
+                    class="input-con triangle"
+                    disabled
+                    v-if="!state.skillsText.length"
+                    placeholder="请选择您的技能名称"
+                />
+                <view class="input-nx" @click="changeSkills" v-else>
+                    <view class="nx-item" v-for="(item, index) in state.skillsText" :key="index">{{ item }}</view>
+                </view>
+            </view>
         </view>
         <SelectPopup ref="selectPopupRef"></SelectPopup>
     </AppLayout>
 </template>
 
 <script setup>
-import { reactive, inject, watch, ref, onMounted } from 'vue';
+import { reactive, inject, watch, ref, onMounted, onUnmounted } from 'vue';
 import { onLoad, onShow } from '@dcloudio/uni-app';
 const { $api, navTo, navBack, checkingPhoneRegExp } = inject('globalFunction');
 import { storeToRefs } from 'pinia';
@@ -104,6 +116,7 @@ const percent = ref('0%');
 const state = reactive({
     educationText: '',
     politicalAffiliationText: '',
+    skillsText: [],
 });
 const fromValue = reactive({
     name: '',
@@ -112,11 +125,23 @@ const fromValue = reactive({
     education: '',
     politicalAffiliation: '',
     idCard: '',
+    skills: '',
 });
 onLoad(() => {
     initLoad();
 });
 
+// 监听页面显示，接收从技能查询页面返回的数据
+onShow(() => {
+    // 通过事件总线接收技能选择结果
+    uni.$on('skillSelected', handleSkillSelected);
+});
+
+// 页面卸载时移除事件监听
+onUnmounted(() => {
+    uni.$off('skillSelected', handleSkillSelected);
+});
+
 // 监听 userInfo 变化，确保数据及时更新
 watch(() => userInfo.value, (newVal) => {
     if (newVal && Object.keys(newVal).length > 0) {
@@ -177,6 +202,16 @@ 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 = [];
+    }
+    
     // 初始化学历显示文本（需要等待字典数据加载完成）
     initEducationText();
     
@@ -271,13 +306,37 @@ const confirm = () => {
     };
     $api.createRequest('/app/user/resume', params, 'post').then((resData) => {
         $api.msg('完成');
-        state.disbleDate = true;
         getUserResume().then(() => {
             navBack();
         });
     });
 };
 
+// 技能选择回调函数
+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 changeSkills() {
+    // 将当前已选中的技能名称传递给查询页面
+    const selectedSkills = state.skillsText || [];
+    uni.navigateTo({
+        url: `/pages/complete-info/skill-search?selected=${encodeURIComponent(JSON.stringify(selectedSkills))}`
+    });
+}
+
 const changeDateBirt = () => {
     const datearray = generateDatePickerArrays();
     const defaultIndex = getDatePickerIndexes(fromValue.birthDate);
@@ -568,6 +627,28 @@ function getDatePickerIndexes(dateStr) {
         border-radius: 2rpx
         background: #697279;
         transform: rotate(45deg)
+.input-nx
+    position: relative
+    border-bottom: 2rpx solid #EBEBEB
+    padding-bottom: 30rpx
+    display: flex
+    flex-wrap: wrap
+    .nx-item
+        padding: 16rpx 24rpx
+        width: fit-content
+        border-radius: 20rpx
+        border: 2rpx solid #E8EAEE
+        background-color: #f8f9fa
+        margin-right: 16rpx
+        margin-top: 16rpx
+        font-size: 28rpx
+        color: #333333
+        transition: all 0.2s ease
+        
+        &:hover
+            background-color: #e9ecef
+            border-color: #256bfa
+            color: #256bfa
 .content-sex
     height: 110rpx;
     display: flex