flat: 暂存
This commit is contained in:
Apcallover
@@ -15,12 +15,14 @@
|
||||
<swiper-item class="list">
|
||||
<scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
|
||||
<view class="mian">
|
||||
<renderJobs
|
||||
<renderJobsCheckBox
|
||||
ref="jobListRef"
|
||||
:list="pageState.list"
|
||||
v-if="pageState.list.length"
|
||||
:longitude="longitudeVal"
|
||||
:latitude="latitudeVal"
|
||||
></renderJobs>
|
||||
@update:selected="updateSelectedCount"
|
||||
></renderJobsCheckBox>
|
||||
<empty v-else pdTop="200"></empty>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@@ -41,18 +43,28 @@
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<template #footer>
|
||||
<view v-if="selectedJobCount > 0 && type === 0" class="compare-bar">
|
||||
<view class="selected-count">已选中 {{ selectedJobCount }} 个岗位</view>
|
||||
<button class="compare-btn" @click="handleCompare">岗位对比</button>
|
||||
</view>
|
||||
</template>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject, ref, reactive } from 'vue';
|
||||
import { inject, ref, reactive, nextTick } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import useLocationStore from '@/stores/useLocationStore';
|
||||
import renderJobsCheckBox from '@/components/renderJobs/renderJobsCheckBox.vue';
|
||||
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
|
||||
const { $api, navBack } = inject('globalFunction');
|
||||
const { $api, navBack, navTo } = inject('globalFunction');
|
||||
const type = ref(0);
|
||||
|
||||
// 新增：获取renderJobs组件实例
|
||||
const jobListRef = ref(null);
|
||||
// 新增：选中的岗位数量
|
||||
const selectedJobCount = ref(0);
|
||||
const pageState = reactive({
|
||||
page: 0,
|
||||
list: [],
|
||||
@@ -83,6 +95,32 @@ function changeType(e) {
|
||||
type.value = e;
|
||||
}
|
||||
|
||||
// 监听选中数量变化
|
||||
function updateSelectedCount() {
|
||||
nextTick(() => {
|
||||
if (jobListRef.value) {
|
||||
selectedJobCount.value = jobListRef.value.selectedJobs.length;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 新增：对比按钮点击事件
|
||||
function handleCompare() {
|
||||
if (selectedJobCount.value < 2) {
|
||||
uni.showToast({
|
||||
title: '请至少选择2个岗位进行对比',
|
||||
icon: 'none',
|
||||
});
|
||||
return;
|
||||
}
|
||||
// 获取选中的岗位数据
|
||||
const selectedJobs = jobListRef.value.selectedJobs;
|
||||
const selectedJobData = pageState.list.filter((job) => selectedJobs.includes(job.jobId));
|
||||
uni.setStorageSync('compare', selectedJobData);
|
||||
// 跳转到对比页面（假设已创建对比页面）
|
||||
navTo('/packageA/pages/collection/compare');
|
||||
}
|
||||
|
||||
function handleScrollToLower() {
|
||||
getJobList();
|
||||
}
|
||||
@@ -149,6 +187,35 @@ function getCompanyList(type = 'add') {
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
// 新增底部对比栏样式
|
||||
.compare-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: #fff;
|
||||
border-top: 1rpx solid #eee;
|
||||
box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
|
||||
|
||||
.selected-count {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.compare-btn {
|
||||
width: 200rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
background-color: #4C6EFB;
|
||||
color: #fff;
|
||||
border-radius: 30rpx;
|
||||
font-size: 28rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
208
packageA/pages/collection/compare.vue
Normal file
208
packageA/pages/collection/compare.vue
Normal file
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<view class="job-comparison-container">
|
||||
<scroll-view class="horizontal-scroll" scroll-x="true">
|
||||
<view class="comparison-table">
|
||||
<view class="table-row table-header">
|
||||
<view class="table-cell fixed-column"></view>
|
||||
<view v-for="(job, index) in jobs" :key="index" class="table-cell job-title-cell">
|
||||
<text>{{ job.jobTitle }}</text>
|
||||
<text class="company">{{ job.company }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="table-row">
|
||||
<view class="table-cell fixed-column detail-label">
|
||||
<text>薪资</text>
|
||||
</view>
|
||||
<view v-for="(job, index) in jobs" :key="index" class="table-cell detail-content">
|
||||
<view>
|
||||
<Salary-Expectation
|
||||
:max-salary="job.maxSalary"
|
||||
:min-salary="job.minSalary"
|
||||
:is-month="true"
|
||||
></Salary-Expectation>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="table-row">
|
||||
<view class="table-cell fixed-column detail-label">
|
||||
<text>公司名称</text>
|
||||
</view>
|
||||
<view v-for="(job, index) in jobs" :key="index" class="table-cell detail-content">
|
||||
<view>{{ job.companyName }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="table-row">
|
||||
<view class="table-cell fixed-column detail-label">
|
||||
<text>学历</text>
|
||||
</view>
|
||||
<view v-for="(job, index) in jobs" :key="index" class="table-cell detail-content">
|
||||
<view><dict-Label dictType="education" :value="job.education"></dict-Label></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="table-row">
|
||||
<view class="table-cell fixed-column detail-label">
|
||||
<text>经验</text>
|
||||
</view>
|
||||
<view v-for="(job, index) in jobs" :key="index" class="table-cell detail-content">
|
||||
<view><dict-Label dictType="experience" :value="job.experience"></dict-Label></view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="table-row">
|
||||
<view class="table-cell fixed-column detail-label">
|
||||
<text>工作地点</text>
|
||||
</view>
|
||||
<view v-for="(job, index) in jobs" :key="index" class="table-cell detail-content">
|
||||
<view>{{ job.jobLocation }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="table-row">
|
||||
<view class="table-cell fixed-column detail-label">
|
||||
<text>来源</text>
|
||||
</view>
|
||||
<view v-for="(job, index) in jobs" :key="index" class="table-cell detail-content">
|
||||
<view>{{ job.dataSource }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="table-row">
|
||||
<view class="table-cell fixed-column detail-label">
|
||||
<text>职位描述</text>
|
||||
</view>
|
||||
<view v-for="(job, index) in jobs" :key="index" class="table-cell detail-content">
|
||||
<view>{{ job.description }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="table-row">
|
||||
<view class="table-cell fixed-column detail-label">
|
||||
<text>工业</text>
|
||||
</view>
|
||||
<view v-for="(job, index) in jobs" :key="index" class="table-cell detail-content">
|
||||
<view>
|
||||
<dict-tree-Label
|
||||
v-if="jobInfo.company && jobInfo.company.industry"
|
||||
dictType="industry"
|
||||
:value="jobInfo.company.industry"
|
||||
></dict-tree-Label>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="table-row">
|
||||
<view class="table-cell fixed-column detail-label">
|
||||
<text>企业规模</text>
|
||||
</view>
|
||||
<view v-for="(job, index) in jobs" :key="index" class="table-cell detail-content">
|
||||
<view>
|
||||
<dict-Label dictType="scale" :value="jobInfo.company?.scale"></dict-Label>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="table-row">
|
||||
<view class="table-cell fixed-column detail-label">
|
||||
<text>热门</text>
|
||||
</view>
|
||||
<view v-for="(job, index) in jobs" :key="index" class="table-cell detail-content">
|
||||
<view>
|
||||
{{ job.isHot ? '是' : '否' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject, ref, computed, nextTick } from 'vue';
|
||||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||||
import useDictStore from '@/stores/useDictStore';
|
||||
const jobs = ref([]);
|
||||
|
||||
onLoad(() => {
|
||||
let compareData = uni.getStorageSync('compare');
|
||||
jobs.value = compareData;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.job-comparison-container {
|
||||
padding: 10px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.horizontal-scroll {
|
||||
width: 100%;
|
||||
white-space: nowrap; /* 保持 flex 子项在同一行 */
|
||||
}
|
||||
|
||||
.comparison-table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.table-row:first-child {
|
||||
border-bottom: 2px solid #ccc;
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
flex-shrink: 0;
|
||||
padding: 15px 10px;
|
||||
border-right: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 150px;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.table-cell:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.fixed-column {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
background-color: #fff;
|
||||
border-right: 2px solid #ccc;
|
||||
width: 120px; /* 固定左侧列的宽度 */
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
background-color: #f1f1f1;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.job-title-cell {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.company {
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user