540 lines
17 KiB
Vue
540 lines
17 KiB
Vue
<template>
|
||
<view class="app-custom-root">
|
||
<view class="app-container">
|
||
<!-- 顶部头部区域 -->
|
||
<view class="container-header">
|
||
<view class="header-top">
|
||
<view class="header-btnLf button-click" @click="seemsg(0)" :class="{ active: state.current === 0 }">
|
||
现场招聘
|
||
</view>
|
||
<view class="header-btnLf button-click" @click="seemsg(1)" :class="{ active: state.current === 1 }">
|
||
VR虚拟招聘会
|
||
</view>
|
||
</view>
|
||
<view class="header-input btn-feel">
|
||
<uni-icons class="iconsearch" color="#666666" type="search" size="18"></uni-icons>
|
||
<input class="input" placeholder="招聘会" placeholder-class="inputplace" />
|
||
</view>
|
||
<view class="header-date">
|
||
<view class="data-week">
|
||
<view
|
||
class="weel-days button-click"
|
||
:class="{ active: currentDay.fullDate === item.fullDate }"
|
||
v-for="(item, index) in weekList"
|
||
:key="index"
|
||
@click="selectDate(item)"
|
||
>
|
||
<view class="label">{{ item.day }}</view>
|
||
<view class="day">{{ item.date }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="data-all">
|
||
<image class="allimg button-click" @click="toSelectDate" src="/static/icon/date1.png"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 主体内容区域 -->
|
||
<view class="container-main">
|
||
<scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
|
||
<view class="cards" v-if="fairList.length">
|
||
<view
|
||
class="card press-button"
|
||
v-for="(item, index) in fairList"
|
||
:key="index"
|
||
@click="navTo('/packageA/pages/exhibitors/exhibitors?jobFairId=' + item.jobFairId)"
|
||
>
|
||
<view class="card-title">{{ item.name }}</view>
|
||
<view class="card-row">
|
||
<text class="">{{ item.location }}</text>
|
||
<text class="">
|
||
<convert-distance
|
||
:alat="item.latitude"
|
||
:along="item.longitude"
|
||
:blat="latitudeVal"
|
||
:blong="longitudeVal"
|
||
></convert-distance>
|
||
</text>
|
||
</view>
|
||
<view class="card-times">
|
||
<view class="time-left">
|
||
<view class="left-date">{{ parseDateTime(item.startTime).time }}</view>
|
||
<view class="left-dateDay">{{ parseDateTime(item.startTime).date }}</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="time-center">
|
||
<view class="center-date">
|
||
{{ getTimeStatus(item.startTime, item.endTime).statusText }}
|
||
</view>
|
||
<view class="center-dateDay">
|
||
{{ getHoursBetween(item.startTime, item.endTime) }}小时
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="time-right">
|
||
<view class="left-date">{{ parseDateTime(item.endTime).time }}</view>
|
||
<view class="left-dateDay">{{ parseDateTime(item.endTime).date }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="recommend-card-line"></view>
|
||
<view class="card-footer">内容简介：{{ item.description }}</view>
|
||
</view>
|
||
</view>
|
||
<empty v-else pdTop="200"></empty>
|
||
</scroll-view>
|
||
</view>
|
||
<Tabbar :currentpage="1"></Tabbar>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, inject, watch, ref, onMounted } from 'vue';
|
||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||
import Tabbar from '@/components/tabbar/midell-box.vue';
|
||
import useLocationStore from '@/stores/useLocationStore';
|
||
import { storeToRefs } from 'pinia';
|
||
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
|
||
const { $api, navTo, cloneDeep } = inject('globalFunction');
|
||
const weekList = ref([]);
|
||
const fairList = ref([]);
|
||
const currentDay = ref({});
|
||
const state = reactive({
|
||
current: 0,
|
||
all: [{}],
|
||
});
|
||
const pageState = reactive({
|
||
page: 0,
|
||
total: 0,
|
||
maxPage: 2,
|
||
pageSize: 10,
|
||
search: {},
|
||
});
|
||
|
||
onLoad(() => {
|
||
const today = new Date();
|
||
const year = today.getFullYear();
|
||
const month = String(today.getMonth() + 1).padStart(2, '0');
|
||
const day = String(today.getDate()).padStart(2, '0');
|
||
|
||
const currentDate = `${year}-${month}-${day}`;
|
||
const result = getNextDates({
|
||
startDate: currentDate,
|
||
});
|
||
weekList.value = result;
|
||
getFair('refresh');
|
||
});
|
||
|
||
function toSelectDate() {
|
||
navTo('/packageA/pages/selectDate/selectDate', {
|
||
query: {
|
||
date: currentDay.value.fullDate,
|
||
},
|
||
onBack: (res) => {
|
||
console.log(res);
|
||
const result = getNextDates({
|
||
startDate: res.date,
|
||
});
|
||
const formattedDate = res.date.slice(5); // MM-DD
|
||
const dateFull = {
|
||
date: res.date.slice(5),
|
||
day: '周' + res.week,
|
||
fullDate: res.date,
|
||
};
|
||
currentDay.value = dateFull;
|
||
weekList.value = result;
|
||
getFair('refresh');
|
||
},
|
||
});
|
||
}
|
||
// 查看消息类型
|
||
function changeSwiperMsgType(e) {
|
||
const currented = e.detail.current;
|
||
state.current = currented;
|
||
}
|
||
|
||
function seemsg(index) {
|
||
if (index === 1) {
|
||
return $api.msg('功能确定中');
|
||
}
|
||
state.current = index;
|
||
}
|
||
|
||
const handleScrollToLower = () => {
|
||
getFair();
|
||
console.log('触底');
|
||
};
|
||
|
||
function getFair(type = 'add') {
|
||
if (type === 'refresh') {
|
||
pageState.page = 1;
|
||
pageState.maxPage = 1;
|
||
}
|
||
if (type === 'add' && pageState.page < pageState.maxPage) {
|
||
pageState.page += 1;
|
||
}
|
||
let params = {
|
||
...pageState.search,
|
||
current: pageState.page,
|
||
pageSize: pageState.pageSize,
|
||
};
|
||
if (currentDay.value?.fullDate) {
|
||
params.queryDate = currentDay.value.fullDate;
|
||
}
|
||
$api.createRequest('/app/fair', params).then((resData) => {
|
||
const { rows, total } = resData;
|
||
console.log(rows);
|
||
if (type === 'add') {
|
||
const str = pageState.pageSize * (pageState.page - 1);
|
||
const end = fairList.value.length;
|
||
const reslist = rows;
|
||
fairList.value.splice(str, end, ...reslist);
|
||
} else {
|
||
fairList.value = rows;
|
||
}
|
||
// pageState.list = resData.rows;
|
||
pageState.total = resData.total;
|
||
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
|
||
});
|
||
}
|
||
|
||
function parseDateTime(datetimeStr) {
|
||
if (!datetimeStr) return { time: '', date: '' };
|
||
|
||
const dateObj = new Date(datetimeStr);
|
||
|
||
if (isNaN(dateObj.getTime())) return { time: '', date: '' }; // 无效时间
|
||
|
||
const year = dateObj.getFullYear();
|
||
const month = String(dateObj.getMonth() + 1).padStart(2, '0');
|
||
const day = String(dateObj.getDate()).padStart(2, '0');
|
||
const hours = String(dateObj.getHours()).padStart(2, '0');
|
||
const minutes = String(dateObj.getMinutes()).padStart(2, '0');
|
||
|
||
return {
|
||
time: `${hours}:${minutes}`,
|
||
date: `${year}年${month}月${day}日`,
|
||
};
|
||
}
|
||
|
||
function getTimeStatus(startTimeStr, endTimeStr) {
|
||
const now = new Date();
|
||
const startTime = new Date(startTimeStr);
|
||
const endTime = new Date(endTimeStr);
|
||
|
||
// 判断状态：0 开始中，1 过期，2 待开始
|
||
let status = 0;
|
||
let statusText = '开始中';
|
||
if (now < startTime) {
|
||
status = 2; // 待开始
|
||
statusText = '待开始';
|
||
} else if (now > endTime) {
|
||
status = 1; // 已过期
|
||
statusText = '已过期';
|
||
} else {
|
||
status = 0; // 进行中
|
||
statusText = '进行中';
|
||
}
|
||
return {
|
||
status, // 0: 进行中，1: 已过期，2: 待开始
|
||
statusText,
|
||
};
|
||
}
|
||
|
||
function getHoursBetween(startTimeStr, endTimeStr) {
|
||
const start = new Date(startTimeStr);
|
||
const end = new Date(endTimeStr);
|
||
|
||
const diffMs = end - start;
|
||
const diffHours = diffMs / (1000 * 60 * 60);
|
||
|
||
return +diffHours.toFixed(2); // 保留 2 位小数
|
||
}
|
||
|
||
const selectDate = (item) => {
|
||
if (currentDay.value?.fullDate === item.fullDate) {
|
||
currentDay.value = {};
|
||
getFair('refresh');
|
||
return;
|
||
}
|
||
currentDay.value = item;
|
||
getFair('refresh');
|
||
};
|
||
|
||
function getNextDates({ startDate = '', count = 6 }) {
|
||
const baseDate = startDate ? new Date(startDate) : new Date(); // 指定起点或今天
|
||
const dates = [];
|
||
const dayNames = ['日', '一', '二', '三', '四', '五', '六'];
|
||
|
||
for (let i = 0; i < count; i++) {
|
||
const date = new Date(baseDate);
|
||
date.setDate(baseDate.getDate() + i);
|
||
|
||
const fullDate = date.toISOString().slice(0, 10); // YYYY-MM-DD
|
||
const formattedDate = fullDate.slice(5); // MM-DD
|
||
const dayOfWeek = dayNames[date.getDay()];
|
||
|
||
dates.push({
|
||
date: formattedDate,
|
||
fullDate,
|
||
day: '周' + dayOfWeek,
|
||
});
|
||
}
|
||
|
||
// 可选设置默认选中项
|
||
// currentDay.value = dates[0];
|
||
|
||
return dates;
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
.app-custom-root {
|
||
position: fixed;
|
||
z-index: 10;
|
||
width: 100vw;
|
||
height: calc(100% - var(--window-bottom));
|
||
overflow: hidden;
|
||
}
|
||
.app-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
width: 100%;
|
||
.container-header {
|
||
background: url('@/static/icon/background2.png') 0 0 no-repeat;
|
||
background-size: 100% 400rpx;
|
||
.header-top{
|
||
display: flex;
|
||
line-height: calc(88rpx - 14rpx);
|
||
padding: 16rpx 44rpx 14rpx 44rpx;
|
||
.header-btnLf {
|
||
display: flex;
|
||
width: fit-content;
|
||
white-space: nowrap
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
width: calc(60rpx * 3);
|
||
font-weight: 500;
|
||
font-size: 40rpx;
|
||
color: #696969;
|
||
margin-right: 44rpx;
|
||
position: relative;
|
||
.btns-wd{
|
||
position: absolute
|
||
top: 2rpx;
|
||
right: 2rpx
|
||
width: 16rpx;
|
||
height: 16rpx;
|
||
background: #F73636;
|
||
border-radius: 50%;
|
||
border: 4rpx solid #EEEEFF;
|
||
}
|
||
}
|
||
.active {
|
||
font-weight: 600;
|
||
font-size: 40rpx;
|
||
color: #000000;
|
||
}
|
||
}
|
||
.header-input{
|
||
padding: 0 24rpx
|
||
width: calc(100% - 48rpx);
|
||
position: relative
|
||
.iconsearch{
|
||
position: absolute
|
||
left: 50rpx;
|
||
top: 50%
|
||
transform: translate(0, -50%)
|
||
}
|
||
.input{
|
||
padding: 0 30rpx 0 80rpx
|
||
height: 80rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 75rpx 75rpx 75rpx 75rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
.inputplace{
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #B5B5B5;
|
||
}
|
||
|
||
}
|
||
.header-date{
|
||
padding: 28rpx
|
||
display: flex
|
||
justify-content: space-between
|
||
align-items: center
|
||
.data-week{
|
||
flex: 1
|
||
display: flex
|
||
justify-content: space-between
|
||
flex-wrap: nowrap
|
||
overflow: hidden
|
||
.weel-days{
|
||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||
display: flex
|
||
justify-content: center
|
||
flex-direction: column
|
||
text-align: center
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
width: 96rpx;
|
||
height: 88rpx;
|
||
|
||
.label{}
|
||
.day{
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
.active{
|
||
background: rgba(37,107,250,0.1);
|
||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
color: #256BFA;
|
||
}
|
||
}
|
||
.data-all{
|
||
width: 66rpx;
|
||
height: 66rpx;
|
||
margin-left: 18rpx
|
||
.allimg{
|
||
width: 100%;
|
||
height: 100%
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.container-main {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
background-color: #f4f4f4;
|
||
}
|
||
.main-scroll {
|
||
width: 100%
|
||
height: 100%;
|
||
}
|
||
.cards{
|
||
padding: 28rpx 28rpx 28rpx 28rpx;
|
||
.card{
|
||
margin-top: 28rpx
|
||
padding: 32rpx;
|
||
background: #FFFFFF
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
|
||
border-radius: 20rpx 20rpx 20rpx 20rpx;
|
||
.card-title{
|
||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
.card-row{
|
||
display: flex
|
||
justify-content: space-between
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #495265;
|
||
margin-top: 4rpx
|
||
}
|
||
.card-times{
|
||
display: flex;
|
||
justify-content: space-between
|
||
align-items: center
|
||
margin-top: 24rpx
|
||
.time-left,
|
||
.time-right{
|
||
text-align: center
|
||
.left-date{
|
||
font-weight: 500;
|
||
font-size: 48rpx;
|
||
color: #333333;
|
||
font-family: 'PingFangSC-Medium', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, 'Microsoft YaHei', sans-serif;
|
||
}
|
||
.left-dateDay{
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
margin-top: 12rpx
|
||
}
|
||
}
|
||
.line{
|
||
width: 40rpx;
|
||
height: 0rpx;
|
||
border: 2rpx solid #D4D4D4;
|
||
margin-top: 64rpx
|
||
}
|
||
.time-center{
|
||
text-align: center;
|
||
display: flex
|
||
flex-direction: column
|
||
justify-content: center
|
||
align-items: center
|
||
.center-date{
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #FF881A;
|
||
padding-top: 10rpx
|
||
}
|
||
.center-dateDay{
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
margin-top: 6rpx
|
||
line-height: 48rpx;
|
||
width: 104rpx;
|
||
height: 48rpx;
|
||
background: #F9F9F9;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
}
|
||
}
|
||
}
|
||
.recommend-card-line{
|
||
width: calc(100%);
|
||
height: 0rpx;
|
||
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
||
border: 2rpx dashed rgba(0,0,0,0.14);
|
||
margin-top: 32rpx
|
||
position: relative
|
||
}
|
||
|
||
.recommend-card-line::before{
|
||
position: absolute
|
||
content: ''
|
||
left: 0
|
||
top: 0
|
||
transform: translate(-50% - 110rpx, -50%)
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
background: #F4F4F4;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.recommend-card-line::after{
|
||
position: absolute
|
||
content: ''
|
||
right: 0
|
||
top: 0
|
||
transform: translate(50% + 100rpx, -50%)
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
background: #F4F4F4;
|
||
border-radius: 50%;
|
||
}
|
||
.card-footer{
|
||
margin-top: 32rpx
|
||
min-height: 50rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #6C7282;
|
||
}
|
||
}
|
||
.card:first-child{
|
||
margin-top: 0
|
||
}
|
||
}
|
||
</style>
|