=【职业图谱】职业推荐 - 携参跳转

packageA/pages/service/components/CareerRecommend.vue

@@ -46,6 +46,7 @@ const store = useCareerRecommendationStore();
     <div v-for="(job, index) in store.result" :key="index" class="job-item-card">
         <div class="job-header">
             <span class="job-title">{{ job.title }}</span>
+            <div class="job-search" @click="store.eventJobSearch(job)">职位搜索</div>
         </div>
         <div class="job-header">
             <span>职业相似度：{{ job.percentage }}%</span>
@@ -157,6 +158,29 @@ const store = useCareerRecommendationStore();
     width: 100%;
 }
 
+.job-search {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    padding: 6px 20px;
+    border-radius: 5px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #333333;
+    background: #ffd4b8;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover {
+        background: #ffc9a3;
+    }
+
+    &:active {
+        transform: scale(0.98);
+    }
+}
+
 .job-skills {
     display: flex;
     flex-wrap: wrap;

pages/search/search.vue

@@ -74,11 +74,16 @@ async function choosePosition(index) {
     getJobList('add');
 }
 
-onLoad(() => {
+onLoad((query) => {
     let arr = uni.getStorageSync('searchList');
     if (arr) {
         historyList.value = uni.getStorageSync('searchList');
     }
+    const {job} = query;
+    if (job) {
+        searchValue.value = job;
+        searchBtn();
+    }
 });
 
 function changeType(type) {
@@ -192,14 +197,14 @@ function dataToImg(data) {
      padding: 0 28rpx 28rpx 28rpx
 }
 .Detailscroll-view{
-    flex: 1
+    flex: 1;
-    overflow: hidden
+    overflow: hidden;
 
 }
 .container{
-    display: flex
+    display: flex;
-    flex-direction: column
+    flex-direction: column;
-    background: #F4f4f4
+    background: #F4f4f4;
     height: 100vh;
     .custom-header {
         background-color: #fff;
@@ -214,7 +219,7 @@ function dataToImg(data) {
     .top {
 		display: flex;
 		align-items: center;
-        justify-content: space-between
+        justify-content: space-between;
 		background-color: #fff;
 		padding: 20rpx 20rpx;
         .btnback{
@@ -224,11 +229,9 @@ function dataToImg(data) {
         .search-box{
             flex: 1;
             padding: 0 24rpx 0 6rpx;
-            position: relative
+            position: relative;
             .inputed {
-                padding-left: 30rpx
                 width: 100%;
-            	background: #F8F8F8;
             	font-size: 28rpx;
             	font-family: PingFang SC;
             	font-weight: 400;
@@ -241,9 +244,9 @@ function dataToImg(data) {
                 border-radius: 75rpx 75rpx 75rpx 75rpx;
             }
             .iconsearch{
-                position: absolute
+                position: absolute;
-                top: 50%
+                top: 50%;
-                left: 36rpx
+                left: 36rpx;
                 transform: translate(0, -50%)
             }
         }
@@ -258,14 +261,14 @@ function dataToImg(data) {
 		}
 	}
     .main-content{
-        background: #FFFFFF
+        background: #FFFFFF;
-        height: 100%
+        height: 100%;
         margin-top: 140rpx;
         .content-top{
-            padding: 28rpx
+            padding: 28rpx;
-            display: flex
+            display: flex;
-            justify-content: space-between
+            justify-content: space-between;
-            align-items: center
+            align-items: center;
             .top-left{
                 font-weight: 600;
                 font-size: 36rpx;
@@ -275,12 +278,12 @@ function dataToImg(data) {
         }
         .content-history{
             padding: 0 28rpx;
-            display: flex
+            display: flex;
-            flex-wrap: wrap
+            flex-wrap: wrap;
             .history-tag{
-                margin-right: 40rpx
+                margin-right: 40rpx;
-                margin-bottom: 20rpx
+                margin-bottom: 20rpx;
-                white-space: nowrap
+                white-space: nowrap;
                 font-weight: 400;
                 font-size: 28rpx;
                 color: #333333;
@@ -292,17 +295,17 @@ function dataToImg(data) {
         }
     }
     .Detailscroll-view{
-        flex: 1
+        flex: 1;
-        overflow: hidden
+        overflow: hidden;
         margin-top: 140rpx;
     }
 }
 
-.slot-item
+.slot-item {
     // background: #f4f4f4;
     background: #FFFFFF;
     .job-info{
-        padding: 10rpx 24rpx 24rpx 24rpx
+        padding: 10rpx 24rpx 24rpx 24rpx;
     }
     .job-image{
         width: 100%;
@@ -319,14 +322,14 @@ function dataToImg(data) {
         .cover-triangle{
             position: absolute;
             right: 20rpx;
-            top: 20rpx
+            top: 20rpx;
-            width: 36rpx
+            width: 36rpx;
-            height: 36rpx
+            height: 36rpx;
-            border-radius: 50%
+            border-radius: 50%;
-            background: rgba(0,0,0,0.3)
+            background: rgba(0,0,0,0.3);
         }
         .cover-triangle::after {
-          content: '';
+          content: "";
           position: absolute;
           top: 50%;
           left: 50%;
@@ -338,26 +341,32 @@ function dataToImg(data) {
           border-bottom: 12rpx solid #fff;
         }
     }
-    .salary
+    .salary {
         color: #4C6EFB;
-        font-size: 28rpx
+        font-size: 28rpx;
-        display: flex
+        display: flex;
-        align-items: flex-start
+        align-items: flex-start;
-        justify-content: space-between
+        justify-content: space-between;
-        .flame
+
-            margin-top: 4rpx
+        .flame {
-            margin-right: 4rpx
+            margin-top: 4rpx;
-            width: 24rpx
+            margin-right: 4rpx;
-            height: 31rpx
+            width: 24rpx;
-    .title
+            height: 31rpx;
+        }
+    }
+    .title {
         font-weight: 500;
         font-size: 32rpx;
         color: #333333;
         margin-top: 6rpx;
-        white-space: pre-wrap
+        white-space: pre-wrap;
-    .desc
+    }
+    .desc {
         font-weight: 400;
         font-size: 24rpx;
         color: #6C7282;
         margin-top: 6rpx;
+    }
+}
 </style>

stores/useCareerRecommendationStore.js

@@ -1,10 +1,11 @@
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, inject } from 'vue';
 import { defineStore, storeToRefs } from 'pinia';
 import useUserStore from '@/stores/useUserStore';
 import { getProfessions, getRecommend, getSkillTags } from '@/apiRc/service/careerRecommendation';
 
 
 export const useCareerRecommendationStore = defineStore('career-recommendation', () => {
+    const { navTo } = inject('globalFunction');
     const { userInfo: ui } = storeToRefs(useUserStore());
     const userInfo = ref({
         userName: '',
@@ -161,6 +162,11 @@ export const useCareerRecommendationStore = defineStore('career-recommendation',
 
     void fetchData();
 
+    const eventJobSearch = (job) => {
+        console.log(job);
+        navTo('/pages/search/search?job=' + job.title);
+    };
+
     watch(
         () => profession.value,
         () => {
@@ -192,6 +198,7 @@ export const useCareerRecommendationStore = defineStore('career-recommendation',
         skillTags,
         result,
         eventProfession,
-        eventSearch
+        eventSearch,
+        eventJobSearch
     };
 });