sdz/qingdao-employment-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor : 重构首页的简历匹配职位

Browse Source
This commit is contained in:
xiebing
2025-11-20 13:50:09 +08:00
parent 3eca164bde
commit e4d100242b
4 changed files with 1854 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

342
pages/index/components/index-refactor.vue
View File

@@ -1,77 +1,65 @@
<template>
<view class="app-container">
<view class="nav-hidden hidden-animation" :class="{ 'hidden-height': scrollDeep, 'hidden-all': hiddenNav && scrollDeep }">
<scroll-view :scroll-y="true" class="app-container" :scroll-top="scrollTop" @scroll="checkStickyStatus" @scrolltolower="scrollBottom">
<view class="nav-hidden">
<view class="container-search">
<image class="bg-text" mode="widthFix" src="@/static/icon/index-text-bg.png"></image>
<image class="bg-robot button-click" mode="widthFix" src="@/static/icon/index-robot.png"></image>
<view class="search-inner">
<image class="bg-text2" mode="widthFix" src="@/static/icon/index-text-bg2.png"></image>
<view class="search-input button-click" @click="navTo('/pages/search/search')">
<image class="icon" src="@/static/icon/index-search.png"></image>
<text class="inpute">请告诉我想找什么工作</text>
</view>
</view>
</view>
<view class="ai-card">
<image class="ai-card-bg" src="@/static/icon/ai-card-bg.png" />
<view class="ai-card-inner">
<view class="title">人工智能专区</view>
<view class="item-box">
<view class="box-l">
<view class="item1 button-click">
<view class="title">AI素质测评</view>
<view class="des">提高个人素质</view>
<image class="bg-text" mode="widthFix" src="@/static/icon/item-bg-text.png"></image>
<image class="bg-img" src="@/static/icon/item-bg-img1.png"></image>
</view>
</view>
<view class="box-r">
<view class="item2 button-click">
<view class="title">就业指导</view>
<view class="des">根据个人建议</view>
<image class="bg" src="@/static/icon/top-card-bg.png" />
<image class="bg-img" src="@/static/icon/item-bg-img2.png"></image>
</view>
<view class="item3 button-click">
<view class="title">AI模拟面试</view>
<view class="des">提高面试成功率</view>
<image class="bg" src="@/static/icon/bottom-card-bg.png" />
<image class="bg-img" src="@/static/icon/item-bg-img3.png"></image>
</view>
<view class="inner-left">
<image class="bg-text2" mode="widthFix" src="@/static/icon/index-text-bg2.png"></image>
<view class="search-input button-click" @click="navTo('/pages/search/search')">
<image class="icon" src="@/static/icon/index-search.png"></image>
<text class="inpute">请告诉我想找什么工作</text>
</view>
</view>
<view class="tip">
<image class="icon" src="@/static/icon/leart-gold.png" />
<view class="text">使用人工智能需要先完成素质测评、完善简历 ></view>
</view>
<image class="bg-robot button-click" mode="widthFix" src="@/static/icon/index-robot.png"></image>
</view>
</view>
<view class="match-card">
<image class="match-card-bg" src="@/static/icon/match-card-bg.png" />
<view class="title">简历匹配职位</view>
<view class="match-item-container">
<view v-for="(item, index) in matchItems" :key="index" class="match-item-row">
<view
v-for="(subItem, subIndex) in item"
:key="subIndex"
class="match-item"
:style="{
fontSize: subItem.fontSize + 'rpx',
backgroundColor: subItem.bgColor,
color: subItem.textColor,
marginRight: subItem.marginRight + 'rpx',
marginLeft: subItem.marginLeft + 'rpx',
marginTop: subItem.marginTop + 'rpx',
opacity: subItem.opacity,
'--trail-color': subItem.bgColor,
}"
:class="subItem.trailClass"
>
<text class="text">{{ subItem.text }}</text>
<view class="ai-card-out">
<view class="ai-card">
<image class="ai-card-bg" src="@/static/icon/ai-card-bg.png" />
<view class="ai-card-inner">
<view class="title">人工智能专区</view>
<view class="item-box">
<view class="box-l">
<view class="item1 button-click">
<view class="title">AI素质测评</view>
<view class="des">提高个人素质</view>
<image class="bg-text" mode="widthFix" src="@/static/icon/item-bg-text.png"></image>
<image class="bg-img" src="@/static/icon/item-bg-img1.png"></image>
</view>
</view>
<view class="box-r">
<view class="item2 button-click">
<view class="title">就业指导</view>
<view class="des">根据个人建议</view>
<image class="bg" src="@/static/icon/top-card-bg.png" />
<image class="bg-img" src="@/static/icon/item-bg-img2.png"></image>
</view>
<view class="item3 button-click">
<view class="title">AI模拟面试</view>
<view class="des">提高面试成功率</view>
<image class="bg" src="@/static/icon/bottom-card-bg.png" />
<image class="bg-img" src="@/static/icon/item-bg-img3.png"></image>
</view>
</view>
</view>
<view class="tip">
<image class="icon" src="@/static/icon/leart-gold.png" />
<view class="text">使用人工智能需要先完成素质测评、完善简历 ></view>
</view>
</view>
</view>
</view>
<view class="match-card-out">
<view class="match-card">
<image class="match-card-bg" src="@/static/icon/match-card-bg.png" />
<view class="title">简历匹配职位</view>
<view class="match-item-container">
<AIMatch ></AIMatch>
</view>
</view>
</view>
<view class="cards">
<view class="card card1 press-button" @click="navTo('/pages/nearby/nearby')">
<view class="card-title">附近工作</view>
@@ -85,9 +73,9 @@
</view>
</view>
</view>
<view class="list-card" :class="{ 'no-radius': scrollDeep }">
<view class="list-card">
<image v-if="showVideoTip" @click="showVideoTip = false" class="video-mask" src="@/static/icon/video-mask.png" />
<view class="nav-filter">
<view class="nav-filter" :class="{ stuck: isSticky }">
<view class="filter-top" @touchmove.stop.prevent>
<scroll-view :scroll-x="true" :show-scrollbar="false" class="tab-scroll">
<view class="jobs-left">
@@ -112,7 +100,7 @@
</view>
</view>
<view class="table-list">
<scroll-view :scroll-y="true" class="falls-scroll" @scroll="handleMyScroll" @scrolltolower="scrollBottom">
<view :scroll-y="true" class="falls-scroll">
<view class="falls" v-if="list.length">
<custom-waterfalls-flow
:column="columnCount"
@@ -203,9 +191,10 @@
</template>
</custom-waterfalls-flow>
<loadmore ref="loadmoreRef"></loadmore>
<view v-if="showScrollBottom" style="height: 200px"></view>
</view>
<empty v-else pdTop="200"></empty>
</scroll-view>
</view>
</view>
</view>
@@ -219,14 +208,14 @@
<view class="maskFristEntry-Close" @click="closeFristEntry">1</view>
</view>
</view> -->
</view>
</scroll-view>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick } from "vue";
import { reactive, inject, watch, ref, onMounted, watchEffect, nextTick, getCurrentInstance } from "vue";
import img from "@/static/icon/filter.png";
import dictLabel from "@/components/dict-Label/dict-Label.vue";
const { $api, navTo, vacanciesTo, formatTotal } = inject("globalFunction");
const { $api, navTo, vacanciesTo, formatTotal, throttle } = inject("globalFunction");
import { onLoad, onShow } from "@dcloudio/uni-app";
import { storeToRefs } from "pinia";
import useUserStore from "@/stores/useUserStore";
@@ -240,26 +229,14 @@ import { useScrollDirection } from "@/hook/useScrollDirection";
import { useColumnCount } from "@/hook/useColumnCount";
const { isScrollingDown, handleScroll } = useScrollDirection();
const recommedIndexDb = useRecommedIndexedDBStore();
import AIMatch from "./AIMatch.vue"
const { proxy } = getCurrentInstance();
const showVideoTip = ref(true);
const clickSearch = ref(false);
const scrollDeep = ref(false);
const hiddenNav = ref(false);
const handleMyScroll = (e) => {
const scrollTop = e.detail.scrollTop;
if (clickSearch.value) return;
if (scrollTop > 200) {
scrollDeep.value = true;
setTimeout(() => {
hiddenNav.value = true;
}, 800);
} else if (scrollTop == 0) {
hiddenNav.value = false;
setTimeout(() => {
scrollDeep.value = false;
}, 50);
}
};
const isSticky = ref(false);
const showScrollBottom = ref(false);
const scrollTop = ref(0);
const emits = defineEmits(["onShowTabbar"]);
@@ -292,68 +269,31 @@ const rangeOptions = ref([
]);
const isLoaded = ref(false);
const matchItems = ref([]);
const occupations = ["律师", "工程师", "医生", "教师", "设计师", "程序员", "会计师", "建筑师", "护士", "销售", "经理", "顾问", "分析师", "研究员", "编辑", "记者", "摄影师", "厨师", "司机", "保安", "客服", "行政", "人事", "市场", "运营", "产品", "测试", "运维", "前端", "后端", "全栈", "数据", "策划", "导演", "演员", "歌手", "作家", "画家", "翻译", "导游"];
const colors = ["#0069FE", "#FF9400", "#FF6969", "#21EA85", "#87E2EC"];
const generateMatchItems = () => {
const rows = 4; // 4行
const itemsPerRow = 4; // 每行4个item
const newItems = [];
for (let row = 0; row < rows; row++) {
const rowItems = [];
for (let col = 0; col < itemsPerRow; col++) {
// 生成随机职业
const randomIndex = Math.floor(Math.random() * occupations.length);
const occupation = occupations[randomIndex];
// 生成随机字体大小
const fontSize = Math.floor(Math.random() * 15) + 18;
// 生成随机背景色和透明度
const colorIndex = Math.floor(Math.random() * colors.length);
const opacity = (Math.random() * 1 + 0.4).toFixed(2);
const bgColor = hexToRgba(colors[colorIndex], opacity);
// 根据背景色亮度决定文字颜色
const textColor = getTextColor(colors[colorIndex]);
// 生成随机偏移量
const marginRight = Math.floor(Math.random() * 70) + 20;
const marginLeft = Math.floor(Math.random() * 40) + 20;
const marginTop = Math.floor(Math.random() * 60) - 60;
// 根据列位置决定拖尾效果
let trailClass;
if (col === 0) {
trailClass = "trail-right";
} else if (col === itemsPerRow - 1) {
trailClass = "trail-left";
} else {
trailClass = "trail-center";
}
rowItems.push({
text: occupation,
fontSize: fontSize,
bgColor: bgColor,
textColor: textColor,
marginRight: marginRight,
marginLeft: col == 0 ? marginLeft : 0,
marginTop: marginTop,
opacity: opacity,
trailClass: trailClass,
const checkStickyStatus = (e) => {
scrollTop.value = e.detail.scrollTop;
nextTick(() => {
const query = uni.createSelectorQuery().in(proxy);
query
.select(".nav-filter")
.boundingClientRect()
.exec((res) => {
if (res[0]) {
const rect = res[0];
const shouldBeSticky = rect.top <= 0;
if (isSticky.value !== shouldBeSticky) {
isSticky.value = shouldBeSticky;
}
}
});
}
newItems.push(rowItems);
}
matchItems.value = newItems;
});
};
const hexToRgba = (hex, opacity) => {
@@ -381,7 +321,6 @@ const { columnCount, columnSpace } = useColumnCount(() => {
});
async function loadData() {
generateMatchItems(); // ******生成简历匹配职位虚拟数据
try {
if (isLoaded.value) return;
isLoaded.value = true;
@@ -391,13 +330,23 @@ async function loadData() {
}
}
function scrollBottom() {
const scrollBottom = () => {
if (loadmoreRef?.value?.status == "loading" || loadmoreRef?.value?.status == "noMore") return;
loadmoreRef.value.change("loading");
stopScroll();
if (state.tabIndex === "all") {
getJobRecommend();
} else {
getJobList();
}
};
function stopScroll() {
scrollTop.value -= 100;
showScrollBottom.value = true;
setTimeout(() => {
showScrollBottom.value = false;
}, 400);
}
function findJob(job) {
@@ -487,10 +436,6 @@ function handleFilterConfirm(e) {
}
function choosePosition(index) {
clickSearch.value = true;
setTimeout(() => {
clickSearch.value = false;
}, 300);
state.tabIndex = index;
list.value = [];
if (index === "all") {
@@ -508,10 +453,6 @@ function choosePosition(index) {
}
function handelHostestSearch(val) {
clickSearch.value = true;
setTimeout(() => {
clickSearch.value = false;
}, 300);
pageState.search.order = val.value;
if (state.tabIndex === "all") {
getJobRecommend("refresh");
@@ -722,46 +663,45 @@ defineExpose({ loadData });
background-color: #E5F4FB;
display: flex;
flex-direction: column
.hidden-animation
max-height: 2000rpx;
transition: 1s ease;
.hidden-height
max-height: 0 !important;
padding-top: 0;
padding-bottom: 0;
.hidden-all
overflow:hidden
.container-search
width:100%;
padding:60rpx 0 40rpx;
padding:60rpx 0 0rpx;
position: relative
.bg-text
position :absolute
width:100%;
top:60rpx;
top:10%;
left:0
.bg-robot
position :absolute
width:428rpx;
top:80rpx;
right:-5rpx;
.search-inner
position relative;
z-index:1
width:100%;
box-sizing: border-box;
padding:60rpx 22rpx 0;
padding:10% 22rpx 0;
display:flex;
.inner-left
flex:1
overflow:hidden
display:flex
flex-direction: column;
.bg-robot
flex:1
margin-left: - 70rpx
margin-right:-20rpx
margin-bottom:-13%
.bg-text2
width:355rpx;
width:100%;
.search-input
flex:1
margin-top:8%;
margin-bottom:18%;
display: flex
align-items: center;
width: 392rpx;
height: 70rpx;
line-height: 80rpx
width: 100%;
height: 75rpx;
background: #FFFFFF;
border-radius: 49rpx;
margin-top:24rpx;
box-sizing: border-box;
padding:0 24rpx;
.icon
@@ -789,10 +729,14 @@ defineExpose({ loadData });
height: 36rpx;
color: #000000;
padding: 20rpx 30rpx
.ai-card-out
width:100%;
box-sizing:border-box
padding: 0 28rpx
margin-top:-35rpx
position relative;
z-index:1
.ai-card
width 694rpx;
margin 0 auto;
box-sizing:border-box;
position relative;
.ai-card-bg
width:100%;
@@ -817,6 +761,12 @@ defineExpose({ loadData });
margin-top:30rpx;
display:flex;
justify-content: space-between;
.box-l
flex:1
margin-right:10rpx
.box-r
flex:1
margin-left:10rpx
.title
font-family: Alibaba PuHuiTi;
font-weight: 700;
@@ -842,7 +792,7 @@ defineExpose({ loadData });
height:100%
.item1
height:272rpx;
width:298rpx;
width:100%;
border-radius: 20rpx;
background: linear-gradient(127.66deg, #CDE4FF 6.44%, #EAFEFF 93.56%);
box-sizing:border-box;
@@ -862,11 +812,12 @@ defineExpose({ loadData });
bottom:12rpx;
.item2
height:126rpx;
width:298rpx;
width:100%;
border-radius: 20rpx;
box-sizing:border-box;
padding:26rpx 28rpx;
position :relative
background: linear-gradient(100.72deg, #C3E2FF 1.79%, #FFEFDD 98.21%);
.bg-img
position:absolute;
width:212rpx;
@@ -875,12 +826,13 @@ defineExpose({ loadData });
bottom:8rpx;
.item3
height:126rpx;
width:298rpx;
width:100%;
border-radius: 20rpx;
box-sizing:border-box;
padding:26rpx 28rpx;
margin-top:20rpx;
position :relative
background: linear-gradient(100.72deg, #FFDBDB 1.79%, #FFF8F0 98.21%);
.bg-img
position:absolute;
width:102rpx;
@@ -907,14 +859,19 @@ defineExpose({ loadData });
font-style: Regular;
font-size: 24rpx;
color:#E1A374
.match-card-out
width:100%;
box-sizing:border-box
padding: 0 28rpx
position relative;
z-index:1
margin-top:20rpx;
.match-card
width 694rpx;
margin 0 auto;
width 100%;
box-sizing:border-box;
position relative;
background: #ffffffE6;
border-radius: 24rpx;
margin-top:20rpx;
padding:32rpx 36rpx;
.title
font-family: Alibaba PuHuiTi;
@@ -1025,7 +982,6 @@ defineExpose({ loadData });
color: #FFFFFF90;
margin-top: 8rpx
.list-card{
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom) - 90rpx);
display:flex;
flex-direction: column;
background: linear-gradient(to bottom, #fff 0%, #E5F3FA 100%);
@@ -1034,17 +990,23 @@ defineExpose({ loadData });
z-index:3
transition: .5s
.video-mask{
position:absolute;
position:fixed;
right:10rpx;
bottom:20rpx;
bottom:100rpx;
width:264rpx;
height:298rpx;
z-index:4
z-index:6
}
}
.no-radius
border-radius: 0
.nav-filter.stuck
background: linear-gradient( to bottom, #fff 85%, #ffffff1A 100%);
padding-bottom:20rpx
.nav-filter
position:sticky;
z-index:5;
top:calc(var(--window-top) + var(--status-bar-height));
padding: 32rpx 28rpx 0 28rpx
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
.filter-top
@@ -1119,9 +1081,11 @@ defineExpose({ loadData });
.active
transform: rotate(-180deg)
.table-list
flex: 1
overflow: hidden
mask-image: linear-gradient(to top, #000 95% , transparent);
position:sticky;
z-index:4;
top:calc(var(--window-top) + var(--status-bar-height));
.load-trigger
height:200rpx
.falls-scroll
width: 100%
height: 100%