435 lines
14 KiB
Vue
435 lines
14 KiB
Vue
<template>
|
||
<view class="collection-content">
|
||
<view class="collection-search">
|
||
<view class="search-content">
|
||
<input class="uni-input collInput" type="text" @confirm="searchCollection" >
|
||
<uni-icons class="iconsearch" color="#616161" type="search" size="20"></uni-icons>
|
||
</input>
|
||
</view>
|
||
<view class="search-date">
|
||
<view class="date-7days AllDay" v-if="state.isAll">
|
||
<view class="day" v-for="item in weekday" :key="item.weekday">
|
||
{{item.weekday}}
|
||
</view>
|
||
<!-- 日期 -->
|
||
<view class="day" v-for="(item, index) in monthDay" :key="index" :class="{active: item.fullDate === currentDay, nothemonth: !item.isCurrent, optional: findBrowseData(item.fullDate)}" @click="selectDay(item)">
|
||
{{item.day}}
|
||
</view>
|
||
<view class="monthSelect">
|
||
<uni-icons size="14" class="monthIcon"
|
||
:color="state.lastDisable ? '#e8e8e8' : '#333333'" type="left"
|
||
@click="changeMonth('lastmonth')"></uni-icons>
|
||
{{state.currentMonth}}
|
||
<uni-icons size="14" class="monthIcon"
|
||
:color="state.nextDisable ? '#e8e8e8' : '#333333'" type="right"
|
||
@click="changeMonth('nextmonth')"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="date-7days" v-else>
|
||
<view class="day" v-for="item in weekday" :key="item.weekday">
|
||
{{item.weekday}}
|
||
</view>
|
||
<!-- 日期 -->
|
||
<view class="day" v-for="(item, index) in weekday" :key="index" :class="{active: item.fullDate === currentDay, optional: findBrowseData(item.fullDate)}" @click="selectDay(item)">
|
||
{{item.day}}
|
||
</view>
|
||
</view>
|
||
<view class="downDate">
|
||
<uni-icons class="downIcon" v-if="state.isAll" type="up" color="#FFFFFF" size="17" @click="upDateList"></uni-icons>
|
||
<uni-icons class="downIcon" v-else type="down" color="#FFFFFF" size="18" @click="downDateList"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="one-cards">
|
||
<view
|
||
class="card-box "
|
||
v-for="(item, index) in pageState.list"
|
||
:key="index"
|
||
:class="{'card-transprent': item.isTitle}"
|
||
@click="navToPost(item.jobId)"
|
||
>
|
||
<view class="card-title" v-if="item.isTitle">{{item.title}}</view>
|
||
<view v-else>
|
||
<view class="box-row mar_top0">
|
||
<view class="row-left">{{ item.jobTitle }}</view>
|
||
<view class="row-right"><Salary-Expectation
|
||
:max-salary="item.maxSalary"
|
||
:min-salary="item.minSalary"
|
||
></Salary-Expectation></view>
|
||
</view>
|
||
<view class="box-row">
|
||
<view class="row-left">
|
||
<view class="row-tag" v-if="item.educatio">
|
||
<dict-Label dictType="education" :value="item.education"></dict-Label>
|
||
</view>
|
||
<view class="row-tag" v-if="item.experience">
|
||
<dict-Label dictType="experience" :value="item.experience"></dict-Label>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="box-row mar_top0">
|
||
<view class="row-item mineText">{{ item.postingDate || '发布日期' }}</view>
|
||
<view class="row-item mineText">{{ vacanciesTo(item.vacancies) }}</view>
|
||
<view class="row-item mineText textblue"><matchingDegree :job="item"></matchingDegree></view>
|
||
<view class="row-item">
|
||
<!-- <uni-icons type="star" size="28"></uni-icons> -->
|
||
<!-- <uni-icons type="star-filled" color="#FFCB47" size="30"></uni-icons> -->
|
||
</view>
|
||
</view>
|
||
<view class="box-row">
|
||
<view class="row-left mineText">{{ item.companyName }}</view>
|
||
<view class="row-right mineText">
|
||
青岛
|
||
<dict-Label dictType="area" :value="item.jobLocationAreaCode"></dict-Label>
|
||
<!-- 550m -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import dictLabel from '@/components/dict-Label/dict-Label.vue';
|
||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
|
||
import useUserStore from '@/stores/useUserStore';
|
||
const { $api, navTo, vacanciesTo, getWeeksOfMonth, isFutureDate } = inject('globalFunction');
|
||
const userStore = useUserStore();
|
||
const state = reactive({
|
||
isAll: false,
|
||
fiveMonth: [],
|
||
currentMonth: '',
|
||
currentMonthNumber: 0,
|
||
lastDisable: false,
|
||
nextDisable: true,
|
||
});
|
||
const browseDate = ref('')
|
||
const weekday = ref([])
|
||
const monthDay = ref([])
|
||
const currentDay = ref('')
|
||
const pageState = reactive({
|
||
page: 0,
|
||
list: [],
|
||
total: 0,
|
||
maxPage: 1,
|
||
pageSize: 10,
|
||
search: {},
|
||
lastDate: ''
|
||
});
|
||
|
||
onLoad(() => {
|
||
getBrowseDate()
|
||
const five = getLastFiveMonths()
|
||
state.fiveMonth = five
|
||
state.currentMonth = five[0]
|
||
state.nextDisable = true
|
||
const today = new Date().toISOString().split('T')[0]
|
||
// currentDay.value = new Date().toISOString().split('T')[0]
|
||
state.currentMonthNumber = new Date().getMonth() + 1
|
||
weekday.value = getWeekFromDate(today)
|
||
getJobList('refresh');
|
||
});
|
||
|
||
onReachBottom(() => {
|
||
getJobList();
|
||
});
|
||
|
||
function navToPost(jobId) {
|
||
navTo(`/packageA/pages/post/post?jobId=${btoa(jobId)}`);
|
||
}
|
||
|
||
function findBrowseData(date) {
|
||
const reg = new RegExp(date, 'g')
|
||
return reg.test(browseDate.value)
|
||
}
|
||
|
||
function searchCollection(e) {
|
||
const value = e.detail.value
|
||
pageState.search.jobTitle = value
|
||
getJobList('refresh')
|
||
}
|
||
|
||
function selectDay(item) {
|
||
if(isFutureDate(item.fullDate) || !findBrowseData(item.fullDate)) {
|
||
$api.msg("这一天没有浏览记录")
|
||
} else {
|
||
pageState.search.startDate = getPreviousDay(item.fullDate)
|
||
pageState.search.endDate = item.fullDate
|
||
currentDay.value = item.fullDate
|
||
getJobList('refresh')
|
||
if(item.month !== state.currentMonthNumber) {
|
||
const today = new Date(item.fullDate);
|
||
monthDay.value = getWeeksOfMonth(today.getFullYear(), today.getMonth() + 1).flat(1);
|
||
if(item.month > state.currentMonthNumber) {
|
||
changeMonth('nextmonth')
|
||
} else {
|
||
changeMonth('lastmonth')
|
||
}
|
||
state.currentMonthNumber = item.month
|
||
}
|
||
}
|
||
}
|
||
|
||
function changeMonth(type) {
|
||
const currentIndex = state.fiveMonth.findIndex((item) => item === state.currentMonth)
|
||
switch(type) {
|
||
case 'lastmonth':
|
||
if(currentIndex === state.fiveMonth.length - 2) state.lastDisable = true
|
||
if(currentIndex === state.fiveMonth.length - 1) return
|
||
state.currentMonth = state.fiveMonth[currentIndex + 1]
|
||
state.nextDisable = false
|
||
$api.msg("上一月")
|
||
break
|
||
case 'nextmonth':
|
||
if(currentIndex === 1) state.nextDisable = true
|
||
if(currentIndex === 0) return
|
||
state.currentMonth = state.fiveMonth[currentIndex - 1]
|
||
state.lastDisable = false
|
||
$api.msg("下一月")
|
||
break
|
||
}
|
||
const today = new Date(state.currentMonth);
|
||
monthDay.value = getWeeksOfMonth(today.getFullYear(), today.getMonth() + 1).flat(1);
|
||
}
|
||
|
||
function downDateList(str) {
|
||
const today = new Date();
|
||
monthDay.value = getWeeksOfMonth(today.getFullYear(), today.getMonth() + 1).flat(1);
|
||
state.isAll = true
|
||
}
|
||
|
||
function getBrowseDate() {
|
||
$api.createRequest('/app/user/review/array').then((res) => {
|
||
browseDate.value = res.data.join(',')
|
||
})
|
||
}
|
||
|
||
function upDateList() {
|
||
if(currentDay.value) {
|
||
weekday.value = getWeekFromDate(currentDay.value)
|
||
}
|
||
state.isAll = false
|
||
}
|
||
|
||
|
||
function getJobList(type = 'add', loading = true) {
|
||
if (type === 'refresh') {
|
||
pageState.page = 1;
|
||
pageState.maxPage = 1;
|
||
}
|
||
if (type === 'add' && pageState.page < pageState.maxPage) {
|
||
pageState.page += 1;
|
||
}
|
||
let params = {
|
||
current: pageState.page,
|
||
pageSize: pageState.pageSize,
|
||
...pageState.search
|
||
};
|
||
$api.createRequest('/app/user/review', params, 'GET', loading).then((resData) => {
|
||
const { rows, total } = resData;
|
||
if (type === 'add') {
|
||
const str = pageState.pageSize * (pageState.page - 1);
|
||
const end = pageState.list.length;
|
||
const [reslist, lastDate] = $api.insertSortData(rows, 'reviewDate')
|
||
if(reslist.length) { // 日期监测是否一致
|
||
if (reslist[0].title === pageState.lastDate) {
|
||
reslist.shift()
|
||
}
|
||
}
|
||
pageState.list.splice(str, end, ...reslist);
|
||
pageState.lastDate = lastDate
|
||
} else {
|
||
const [reslist, lastDate] = $api.insertSortData(rows, 'reviewDate')
|
||
pageState.list = reslist
|
||
pageState.lastDate = lastDate
|
||
}
|
||
// pageState.list = resData.rows;
|
||
pageState.total = resData.total;
|
||
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
||
});
|
||
}
|
||
|
||
function getWeekFromDate(dateStr) {
|
||
const days = [];
|
||
const targetDate = new Date(dateStr);
|
||
const currentDay = targetDate.getDay(); // 获取星期几（0 表示星期日）
|
||
const sundayIndex = currentDay === 0 ? 7 : currentDay; // 让星期日变为 7
|
||
|
||
// 计算本周的起始和结束日期
|
||
for (let i = 1; i <= 7; i++) {
|
||
const date = new Date(targetDate);
|
||
date.setDate(targetDate.getDate() - (sundayIndex - i)); // 计算日期
|
||
days.push({
|
||
weekday: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'][i - 1],
|
||
fullDate: date.toISOString().split('T')[0], // YYYY-MM-DD 格式
|
||
day: date.getDate(),
|
||
month: date.getMonth() + 1,
|
||
year: date.getFullYear(),
|
||
});
|
||
}
|
||
|
||
return days;
|
||
}
|
||
|
||
function getPreviousDay(dateStr) {
|
||
const date = new Date(dateStr);
|
||
date.setDate(date.getDate() - 1); // 减去一天
|
||
|
||
// 格式化成 YYYY-MM-DD
|
||
return date.toISOString().split('T')[0];
|
||
}
|
||
|
||
function getLastFiveMonths() {
|
||
const result = [];
|
||
const today = new Date();
|
||
|
||
for (let i = 0; i < 5; i++) {
|
||
const date = new Date(today);
|
||
date.setMonth(today.getMonth() - i); // 往前推 i 个月
|
||
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零
|
||
|
||
result.push(`${year}-${month}`);
|
||
}
|
||
|
||
return result;
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus">
|
||
.card-title
|
||
color: #5d5d5d;
|
||
font-weight: bold;
|
||
font-size: 24rpx
|
||
.nothemonth
|
||
color: #bfbfbf
|
||
|
||
.downDate
|
||
display: flex
|
||
align-items: center
|
||
justify-content: center
|
||
width: 100%
|
||
margin-top: 20rpx
|
||
.downIcon
|
||
background: #e8e8e8
|
||
border-radius: 50%
|
||
width: 40rpx
|
||
height: 40rpx
|
||
.AllDay
|
||
position: relative
|
||
padding-top: 70rpx
|
||
.monthSelect
|
||
position: absolute;
|
||
top: 0
|
||
left: 50%
|
||
transform: translate(-50%, 0)
|
||
text-align: center;
|
||
line-height: 50rpx
|
||
display: flex
|
||
align-items: center
|
||
justify-content: center
|
||
font-size: 28rpx
|
||
.monthIcon
|
||
padding: 0 10rpx
|
||
|
||
.date-7days
|
||
display: grid;
|
||
grid-template-columns: repeat(7, 1fr);
|
||
text-align: center
|
||
margin-top: 10rpx
|
||
font-size: 24rpx
|
||
grid-gap: 26rpx
|
||
.day
|
||
position: relative
|
||
z-index: 2
|
||
.active
|
||
color: #FFFFFF
|
||
.active::before
|
||
position: absolute
|
||
content: ''
|
||
top: 50%
|
||
left: 50%
|
||
transform: translate(-50%, -50%)
|
||
width: 40rpx
|
||
height: 40rpx
|
||
background: #4679ef
|
||
border-radius: 7rpx
|
||
z-index: -1
|
||
.optional::after
|
||
border 2rpx solid #4679ef
|
||
position: absolute
|
||
content: ''
|
||
top: 50%
|
||
left: 50%
|
||
border-radius: 10rpx
|
||
transform: translate(-50%, -50%)
|
||
width: 40rpx
|
||
height: 40rpx
|
||
z-index: -1
|
||
|
||
|
||
.collection-content
|
||
padding: 0 0 20rpx 0;
|
||
|
||
.collection-search
|
||
padding: 10rpx 20rpx;
|
||
.search-content
|
||
position: relative
|
||
.collInput
|
||
padding: 6rpx 10rpx 6rpx 50rpx;
|
||
background: #e8e8e8
|
||
border-radius: 10rpx
|
||
.iconsearch
|
||
position: absolute
|
||
left: 10rpx
|
||
top: 50%
|
||
transform: translate(0, -50%)
|
||
|
||
.one-cards
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0 20rpx;
|
||
.card-box
|
||
width: calc(100% - 36rpx - 36rpx);
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 17rpx;
|
||
padding: 15rpx 36rpx;
|
||
margin-top: 24rpx;
|
||
.box-row
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 8rpx;
|
||
align-items: center;
|
||
.mineText
|
||
font-weight: 400;
|
||
font-size: 21rpx;
|
||
color: #606060;
|
||
.textblue
|
||
color: #4778EC;
|
||
.row-left
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.row-tag
|
||
background: #13C57C;
|
||
border-radius: 17rpx 17rpx 17rpx 17rpx;
|
||
font-size: 21rpx;
|
||
color: #FFFFFF;
|
||
line-height: 25rpx;
|
||
text-align: center;
|
||
padding: 4rpx 8rpx;
|
||
margin-right: 23rpx;
|
||
.card-box:first-child
|
||
margin-top: 6rpx;
|
||
|
||
.card-transprent
|
||
background: transparent !important;
|
||
|
||
.card-transprent:first-child
|
||
margin: 0 !important;
|
||
padding: 0 !important
|
||
</style>
|