= 职业规划推荐

pages/service/components/CareerRecommend.vue

@@ -1,36 +1,33 @@
 <!--suppress JSFileReferences, NpmUsedModulesInstalled, VueMissingComponentImportInspection, HtmlUnknownTag -->
 <script setup>
-import { ref } from 'vue';
 import { useCareerRecommendationStore } from '@/stores/useCareerRecommendationStore';
-import uniList from '@/uni_modules/uni-list/components/uni-list/uni-list.vue';
-import uniListItem from '@/uni_modules/uni-list/components/uni-list-item/uni-list-item.vue';
 
 
 const store = useCareerRecommendationStore();
-
-const popupRef = ref();
-
-const eventSelectCurrentJob = () => {
-    popupRef.value?.open('bottom');
-};
-
-const eventCloseCurrentJob = () => {
-    popupRef.value?.close('bottom');
-};
-
-const eventProfession = (item) => {
-    store.eventProfession(item);
-    store.eventSearch();
-    popupRef.value?.close('bottom');
-};
 </script>
 
 <template>
 <div class="career-recommend">
     <div class="info-card">
-        <div class="card-title">当前职位信息</div>
-        <div class="card-content" @click="eventSelectCurrentJob">
-            <span class="label">当前职位</span> <span class="value">{{ store.professionLabel }}</span>
+        <div class="section-title">
+            <uni-icons color="#286BFA" size="18" type="search"></uni-icons>
+            <span class="title-text">我的职业</span>
+        </div>
+        <div class="input-group">
+            <div class="input-item">
+                <picker @change="store.eventProfession" :value="store.professionIndex" :range="store.professionsRef" range-key="label">
+                    <div class="picker-field">
+                        <span :class="store.professionLabel ? 'picker-text' : 'picker-placeholder'">
+                            {{ store.professionLabel || '请选择职业' }}
+                        </span>
+                        <uni-icons color="#999999" size="16" type="down"></uni-icons>
+                    </div>
+                </picker>
+            </div>
+            <button class="query-btn" @click="store.eventSearch">
+                <span>搜索</span>
+                <uni-icons type="search" size="18" color="#FFFFFF"></uni-icons>
+            </button>
         </div>
     </div>
     <div class="info-card">
@@ -59,19 +56,6 @@ const eventProfession = (item) => {
             </div>
         </div>
     </div>
-    <uni-popup ref="popupRef" :border-radius="'20rpx 20rpx 0 0'" :is-mask-click="true" background-color="#FFFFFF" mask-background-color="rgba(255, 255, 255, 0.6)" type="bottom" @mask-click="eventCloseCurrentJob">
-        <div class="professions">
-            <scroll-view scroll-y style="height: 100%;">
-                <div class="professions-list">
-                    <uni-list>
-                        <template v-for="item in store.professionsRef" :key="item.label">
-                        <uni-list-item :title="item.label" clickable showArrow @click="eventProfession(item)" />
-                        </template>
-                    </uni-list>
-                </div>
-            </scroll-view>
-        </div>
-    </uni-popup>
 </div>
 </template>
 
@@ -80,6 +64,21 @@ const eventProfession = (item) => {
     padding: 10rpx 28rpx 20rpx;
 }
 
+.section-title {
+    font-size: 32rpx;
+    color: #000000;
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+    margin-bottom: 24rpx;
+}
+
+.title-text {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #157DF0;
+}
+
 .info-card {
     background-color: #FFFFFF;
     border-radius: 16rpx;
@@ -134,14 +133,6 @@ const eventProfession = (item) => {
     white-space: nowrap;
 }
 
-.section-title {
-    font-size: 32rpx;
-    font-weight: 600;
-    color: #000000;
-    margin-bottom: 20rpx;
-    margin-top: 8rpx;
-}
-
 .job-item-card {
     background-color: #FFFFFF;
     border-radius: 16rpx;
@@ -206,13 +197,4 @@ const eventProfession = (item) => {
 button::after {
     border: none;
 }
-
-.professions {
-    width: 100vw;
-    height: 80vh;
-
-    .professions-list {
-        padding-left: 20px;
-    }
-}
 </style>