sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

flat: 暂存

Browse Source
This commit is contained in:
史典卓
2025-05-13 11:10:38 +08:00
parent 582e432e6a
commit fd74b7d4df
109 changed files with 8644 additions and 5205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
packageA/pages/Intendedposition/Intendedposition.vue
View File

@@ -1,45 +1,13 @@
<template>
<view class="collection-content">
<view class="one-cards">
<view class="card-box" v-for="(item, index) in pageState.list" :key="index" @click="navToPost(item.jobId)">
<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>
<renderJobs
seeDate="applyTime"
v-if="pageState.list.length"
:list="pageState.list"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderJobs>
<empty v-else pdTop="200"></empty>
</view>
</template>
@@ -49,6 +17,9 @@ 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 } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useLocationStore from '@/stores/useLocationStore';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const userStore = useUserStore();
const state = reactive({});
const pageState = reactive({
@@ -99,47 +70,16 @@ function getJobList(type = 'add') {
// pageState.list = resData.rows;
pageState.total = resData.total;
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
console.log(pageState.list);
});
}
</script>
<style lang="stylus">
.collection-content
padding: 20rpx 0 20rpx 0;
.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;
<style lang="stylus" scoped>
.collection-content{
padding: 1rpx 28rpx 20rpx 28rpx;
background: #F4F4F4;
height: 100%
min-height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
}
</style>

405
packageA/pages/UnitDetails/UnitDetails.vue
View File

@@ -1,68 +1,79 @@
<template>
<view class="container">
<!-- 单位基本信息 -->
<view class="company-header">
<text class="company-name">{{ companyInfo.name }}</text>
<view class="company-info">
<view class="location">
<uni-icons type="location-filled" color="#4778EC" size="24"></uni-icons>
青岛 {{ companyInfo.location }}
</view>
<view class="industry" style="display: inline-block">
{{ companyInfo.industry }}
<dict-Label dictType="scale" :value="companyInfo.scale"></dict-Label>
</view>
<AppLayout title="" :use-scroll-view="false">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
</view>
</view>
<view class="hr"></view>
<!-- 单位介绍 -->
<view class="company-description">
<view class="section-title">单位介绍</view>
<text class="description">
{{ companyInfo.description }}
</text>
</view>
<!-- 在招职位 -->
<view class="job-list">
<text class="section-title">在招职位</text>
<view
class="job-row"
v-for="job in pageState.list"
:key="job.id"
@click="navTo(`/packageA/pages/post/post?jobId=${job.jobId}`)"
>
<view class="left">
<text class="job-title">{{ job.jobTitle }}</text>
<view class="job-tags">
<!-- <view class="tag" v-for="tag in job.tags" :key="tag">{{ tag }}</view> -->
<view class="tag">
<dict-Label dictType="education" :value="job.education"></dict-Label>
</view>
<view class="tag">
<dict-Label dictType="experience" :value="job.experience"></dict-Label>
</view>
<view class="tag">{{ job.vacancies }}人</view>
</template>
<template #headerright>
<view class="btn mar_ri10">
<image
src="@/static/icon/collect3.png"
v-if="!companyInfo.isCollection"
@click="companyCollection"
></image>
<image src="@/static/icon/collect2.png" v-else @click="companyCollection"></image>
</view>
</template>
<view class="content">
<view class="content-top">
<view class="companyinfo-left">
<image src="@/static/icon/companyIcon.png" mode=""></image>
</view>
<view class="companyinfo-right">
<view class="row1">{{ companyInfo?.name }}</view>
<view class="row2">
<dict-tree-Label
v-if="companyInfo?.industry"
dictType="industry"
:value="companyInfo?.industry"
></dict-tree-Label>
<span v-if="companyInfo?.industry">&nbsp;</span>
<dict-Label dictType="scale" :value="companyInfo?.scale"></dict-Label>
</view>
<text class="location">
青岛
<dict-Label dictType="area" :value="job.jobLocationAreaCode"></dict-Label>
</text>
</view>
<view class="right">
<text class="salary">{{ job.minSalary }}-{{ job.maxSalary }}/月</text>
<text class="hot" v-if="job.isHot">🔥</text>
</view>
</view>
<view class="conetent-info" :class="{ expanded: isExpanded }">
<view class="info-title">公司介绍</view>
<view class="info-desirption">{{ companyInfo.description }}</view>
<!-- <view class="info-title title2">公司地址</view>
<view class="locationCompany"></view> -->
</view>
<view class="expand" @click="expand">
<text>{{ isExpanded ? '收起' : '展开' }}</text>
<image
class="expand-img"
:class="{ 'expand-img-active': !isExpanded }"
src="@/static/icon/downs.png"
></image>
</view>
<scroll-view scroll-y class="Detailscroll-view" @scrolltolower="getJobsList('add')">
<view class="views">
<view class="Detail-title"><text class="title">在招职位</text></view>
<renderJobs
v-if="pageState.list.length"
:list="pageState.list"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderJobs>
<empty v-else pdTop="200"></empty>
</view>
</scroll-view>
</view>
</view>
</AppLayout>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
import point from '@/static/icon/point.png';
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import dictLabel from '@/components/dict-Label/dict-Label.vue';
const { $api, navTo } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useLocationStore from '@/stores/useLocationStore';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const { $api, navTo, vacanciesTo, navBack } = inject('globalFunction');
const isExpanded = ref(false);
const pageState = reactive({
page: 0,
list: [],
@@ -71,11 +82,27 @@ const pageState = reactive({
pageSize: 10,
});
const companyInfo = ref({});
onLoad((options) => {
console.log(options);
getCompanyInfo(options.companyId);
});
function companyCollection() {
const companyId = companyInfo.value.companyId;
if (companyInfo.value.isCollection) {
$api.createRequest(`/app/company/collection/${companyId}`, {}, 'DELETE').then((resData) => {
getCompanyInfo(companyId);
$api.msg('取消收藏成功');
});
} else {
$api.createRequest(`/app/company/collection/${companyId}`, {}, 'POST').then((resData) => {
getCompanyInfo(companyId);
$api.msg('收藏成功');
});
}
}
function getCompanyInfo(id) {
$api.createRequest(`/app/company/${id}`).then((resData) => {
companyInfo.value = resData.data;
@@ -97,99 +124,193 @@ function getJobsList(type = 'add') {
};
$api.createRequest(`/app/company/job/${companyInfo.value.companyId}`, params).then((resData) => {
const { rows, total } = resData;
pageState.list = resData.rows;
if (type === 'add') {
const str = pageState.pageSize * (pageState.page - 1);
const end = pageState.list.length;
const reslist = rows;
pageState.list.splice(str, end, ...reslist);
} else {
pageState.list = rows;
}
pageState.total = resData.total;
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
});
}
function expand() {
isExpanded.value = !isExpanded.value;
}
</script>
<style lang="stylus">
.container
display flex
flex-direction column
background-color #f8f8f8
.hr
height: 10rpx;
.company-header
padding 20rpx 40rpx
background-color #fff
.company-name
font-size 56rpx
font-weight bold
color #333
margin-bottom 10rpx
.company-info
font-size 24rpx
color #666
display flex
align-items center
justify-content space-between
.location
display flex
align-items center
<style lang="stylus" scoped>
.btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 60rpx;
height: 60rpx;
}
image {
height: 100%;
width: 100%;
}
.content{
height: 100%
display: flex;
flex-direction: column
.content-top{
padding: 28rpx
padding-top: 50rpx
display: flex
flex-direction: row
flex-wrap: nowrap
.companyinfo-left{
width: 96rpx;
height: 96rpx;
margin-right: 24rpx
}
.companyinfo-right{
.company-description
padding 20rpx 40rpx
background-color #fff
margin-bottom 10rpx
.section-title
font-size 42rpx
font-weight bold
margin-bottom 10rpx
.description
font-size 24rpx
color #333
line-height 36rpx
.job-list
padding 20rpx 40rpx
background-color #fff
.section-title
font-size 42rpx
font-weight bold
margin-bottom 10rpx
.job-row
display flex
justify-content space-between
align-items flex-start
padding 20rpx
border 2rpx solid #D9D9D9
margin-top 20rpx
border-radius 17rpx 17rpx 17rpx 17rpx
.left
display flex
flex-direction column
flex-grow 1
.job-title
font-size 28rpx
font-weight bold
color #333
margin-bottom 10rpx
.job-tags
display flex
gap 10rpx
margin-bottom 10rpx
.tag
background-color #22c55e
color #fff
padding 5rpx 10rpx
border-radius 12rpx
font-size 20rpx
.location
font-size 24rpx
color #666
.right
display flex
flex-direction column
align-items flex-end
.salary
font-size 28rpx
color #3b82f6
font-weight bold
.hot
color #ff6b6b
font-size 24rpx
margin-top 5rpx
.row1{
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
.row2{
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
line-height: 45rpx;
}
}
}
.conetent-info{
padding: 0 28rpx
overflow: hidden;
max-height: 0rpx;
transition: max-height 0.3s ease;
.info-title{
font-weight: 600;
font-size: 28rpx;
color: #000000;
}
.info-desirption{
margin-top: 12rpx
font-weight: 400;
font-size: 28rpx;
color: #495265;
text-align: justified;
}
.title2{
margin-top: 48rpx
}
}
.expanded {
max-height: 1000rpx; // 足够显示完整内容
}
.expand{
display: flex
flex-wrap: nowrap
white-space: nowrap
justify-content: center
margin-top: 20rpx
margin-bottom: 28rpx
font-weight: 400;
font-size: 28rpx;
color: #256BFA;
.expand-img{
width: 40rpx;
height: 40rpx;
}
.expand-img-active{
transform: rotate(180deg)
}
}
}
.Detailscroll-view{
flex: 1;
overflow: hidden;
background: #F4F4F4;
.views{
padding: 28rpx
.Detail-title{
font-weight: 600;
font-size: 32rpx;
color: #000000;
position: relative;
display: flex
justify-content: space-between
.title{
position: relative;
z-index: 2;
}
}
.Detail-title::before{
position: absolute
content: '';
left: -14rpx
bottom: 0
height: 16rpx;
width: 108rpx;
background: linear-gradient(to right, #CBDEFF, #FFFFFF);
border-radius: 8rpx;
z-index: 1;
}
.cards{
padding: 32rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-top: 22rpx;
.card-company{
display: flex
justify-content: space-between
align-items: flex-start
.company{
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
.salary{
font-weight: 500;
font-size: 28rpx;
color: #4C6EFB;
white-space: nowrap
line-height: 48rpx
}
}
.card-companyName{
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
}
.card-tags{
display: flex
flex-wrap: wrap
.tag{
width: fit-content;
height: 30rpx;
background: #F4F4F4;
border-radius: 4rpx;
padding: 6rpx 20rpx;
line-height: 30rpx;
font-weight: 400;
font-size: 24rpx;
color: #6C7282;
text-align: center;
margin-top: 14rpx;
white-space: nowrap
margin-right: 20rpx
}
}
.card-bottom{
margin-top: 32rpx
display: flex
justify-content: space-between
font-size: 28rpx;
color: #6C7282;
}
}
}
}
</style>

133
packageA/pages/addPosition/addPosition.vue Normal file
View File

@@ -0,0 +1,133 @@
<template>
<AppLayout title="添加岗位">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
</view>
</template>
<view class="main">
<view class="content-title">
<view class="title-lf">
<view class="lf-h1">想找什么工作？</view>
<view class="lf-text">选择想找的工作，我的将在首页为你推荐</view>
</view>
<view class="title-ri">
<!-- <text style="color: #256bfa">2</text>
<text>/2</text> -->
</view>
</view>
<view class="content-list">
<view class="list-row" v-for="(item, index) in userInfo.jobTitle" :key="index">
<text>{{ item }}</text>
<image
class="row-image button-click"
@click="deleteItem(item, index)"
src="@/static/icon/delete1.png"
mode=""
></image>
</view>
<view class="list-row-add button-click" @click="changeJobs">添加求职岗位</view>
</view>
</view>
<SelectJobs ref="selectJobsModel"></SelectJobs>
</AppLayout>
</template>
<script setup>
import { inject, ref, reactive } from 'vue';
import SelectJobs from '@/components/selectJobs/selectJobs.vue';
const { $api, navBack } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
const { getUserResume } = useUserStore();
const { userInfo } = storeToRefs(useUserStore());
const selectJobsModel = ref(null);
function deleteItem(item, index) {
const ids = userInfo.value.jobTitleId
.split(',')
.filter((_, vIndex) => vIndex !== index)
.join(',');
complete({ jobTitleId: ids });
}
function changeJobs() {
selectJobsModel.value?.open({
title: '添加岗位',
maskClick: true,
success: (ids, labels) => {
complete({ jobTitleId: ids });
},
});
}
function complete(values) {
if (!values.jobTitleId.length) {
return $api.msg('至少添加一份期望岗位');
}
$api.createRequest('/app/user/resume', values, 'post').then((resData) => {
$api.msg('完成');
getUserResume();
});
}
</script>
<style lang="stylus" scoped>
.btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 60rpx;
height: 60rpx;
image {
height: 100%;
width: 100%;
}
}
.main{
padding: 54rpx 28rpx 28rpx 28rpx
.content-list{
.list-row{
background: #FFFFFF;
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #DCDCDC;
padding: 30rpx 28rpx
display: flex;
align-items: center
justify-content: space-between
margin-bottom: 28rpx;
.row-image{
width: 36rpx;
height: 36rpx;
}
}
.list-row-add{
background: #FFFFFF;
color: #256BFA
font-size: 28rpx
font-weight: 500
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx dashed #256BFA;
padding: 30rpx 28rpx
text-align: center
}
}
}
.content-title
display: flex
justify-content: space-between;
align-items: center
margin-bottom: 50rpx
.title-lf
font-size: 44rpx;
color: #000000;
font-weight: 600;
.lf-text
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
.title-ri
font-size: 36rpx;
color: #000000;
font-weight: 600;
</style>

483
packageA/pages/browseJob/browseJob.vue
View File

@@ -1,114 +1,60 @@
<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>
<AppLayout title="我的浏览" :show-bg-image="false" :use-scroll-view="false">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
</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}}
</template>
<view class="collection-content">
<view class="collection-search">
<view class="search-content">
<view class="header-input button-click">
<uni-icons class="iconsearch" color="#6A6A6A" type="search" size="22"></uni-icons>
<input
class="input"
@confirm="searchCollection"
placeholder="招聘会"
placeholder-class="inputplace"
/>
</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 class="data-all">
<image class="allimg button-click" @click="toSelectDate" src="/static/icon/date1.png"></image>
</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>
<scroll-view scroll-y class="main-scroll" @scrolltolower="getJobList('add')">
<view class="one-cards">
<view class="mian">
<renderJobs
:list="pageState.list"
v-if="pageState.list.length"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderJobs>
<empty v-else pdTop="200"></empty>
<!-- <loadmore ref="loadmoreRef"></loadmore> -->
</view>
</view>
</scroll-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>
</AppLayout>
</template>
<script setup>
import dictLabel from '@/components/dict-Label/dict-Label.vue';
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import useUserStore from '@/stores/useUserStore';
const { $api, navTo, vacanciesTo, getWeeksOfMonth, isFutureDate } = inject('globalFunction');
const { $api, navTo, navBack } = inject('globalFunction');
import useLocationStore from '@/stores/useLocationStore';
const { userInfo } = storeToRefs(useUserStore());
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
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 browseDate = ref('');
const weekday = ref([]);
const monthDay = ref([]);
const currentDay = ref('');
const pageState = reactive({
page: 0,
list: [],
@@ -116,104 +62,47 @@ const pageState = reactive({
maxPage: 1,
pageSize: 10,
search: {},
lastDate: ''
lastDate: '',
});
const currentDate = ref('');
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)
getBrowseDate();
const today = new Date().toISOString().split('T')[0];
getJobList('refresh');
currentDate.value = today;
});
onReachBottom(() => {
getJobList();
});
function toSelectDate() {
navTo('/packageA/pages/selectDate/selectDate', {
query: {
date: currentDate.value,
},
onBack: (res) => {
currentDate.value = res.date;
pageState.search.startDate = getPreviousDay(res.date);
pageState.search.endDate = res.date;
getJobList('refresh');
},
});
}
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
const value = e.detail.value;
pageState.search.jobTitle = value;
getJobList('refresh');
}
function getBrowseDate() {
$api.createRequest('/app/user/review/array').then((res) => {
browseDate.value = res.data.join(',')
})
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;
@@ -225,25 +114,26 @@ function getJobList(type = 'add', loading = true) {
let params = {
current: pageState.page,
pageSize: pageState.pageSize,
...pageState.search
...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()
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
pageState.lastDate = lastDate;
} else {
const [reslist, lastDate] = $api.insertSortData(rows, 'reviewDate')
pageState.list = reslist
pageState.lastDate = lastDate
const [reslist, lastDate] = $api.insertSortData(rows, 'reviewDate');
pageState.list = reslist;
pageState.lastDate = lastDate;
}
// pageState.list = resData.rows;
pageState.total = resData.total;
@@ -251,28 +141,6 @@ function getJobList(type = 'add', loading = true) {
});
}
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); // 减去一天
@@ -280,155 +148,72 @@ function getPreviousDay(dateStr) {
// 格式化成 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
<style lang="stylus" scoped>
.btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 60rpx;
height: 60rpx;
}
image {
height: 100%;
width: 100%;
}
.collection-content
padding: 0 0 20rpx 0;
height: 100%
display: flex
flex-direction: column
.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
display: flex
align-items: center
padding: 14rpx 0
.header-input{
padding: 0
width: calc(100% - 48rpx);
position: relative
.iconsearch{
position: absolute
left: 30rpx;
top: 50%
transform: translate(0, -50%)
}
.input{
padding: 0 30rpx 0 80rpx
height: 80rpx;
background: #FFFFFF;
border-radius: 75rpx 75rpx 75rpx 75rpx;
border: 2rpx solid #ECECEC
font-size: 28rpx;
}
.inputplace{
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;
font-size: 28rpx;
color: #B5B5B5;
}
}
.data-all{
width: 66rpx;
height: 66rpx;
margin-left: 18rpx
.allimg{
width: 100%;
height: 100%
}
}
.main-scroll{
flex: 1
overflow: hidden
}
.one-cards{
padding: 0 20rpx 20rpx 20rpx;
background: #f4f4f4
.card-transprent:first-child
margin: 0 !important;
padding: 0 !important
}
</style>

229
packageA/pages/choiceness/choiceness.vue
View File

@@ -1,128 +1,151 @@
<template>
<view class="container">
<!-- 搜索栏 -->
<view class="search-bar">精选企业</view>
<!-- 格子布局 -->
<view class="grid-container">
<view
class="grid-item"
:style="{ backgroundColor: item.backgroudColor }"
v-for="item in list"
:key="item.companyCardId"
>
<text class="title">{{ item.name }}</text>
<view class="status" v-if="item.isCollection" @click="delCollectionCard(item)">已关注 ✓</view>
<view class="status" v-else @click="CollectionCard(item)">特别关注</view>
</view>
<!-- <view class="grid-item green">
<text class="title">银行招聘</text>
<view class="status">特别关注</view>
</view>
<view class="grid-item orange">
<text class="title">世界500强</text>
<view class="status">特别关注</view>
</view>
<view class="grid-item red">
<text class="title">中国500强</text>
<view class="status">特别关注</view>
</view> -->
</view>
</view>
<AppLayout title="精选企业">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
</view>
</template>
<view class="main">
<view class="main-header">
<view class="header-title btn-feel">企业推荐站</view>
<view class="header-text btn-feel">AI智联青岛，岗位触手可“职”！</view>
<image class="header-img btn-shaky" src="/static/icon/companyBG.png"></image>
</view>
<view class="main-content">
<view class="cards btn-feel" v-for="item in list" :key="item.companyCardId" @click="seeDetail(item)">
<view class="card-title">{{ item.name }}</view>
<view class="card-text">{{ item.description }}</view>
</view>
</view>
</view>
</AppLayout>
</template>
<script setup>
import dictLabel from '@/components/dict-Label/dict-Label.vue';
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { inject, ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, navBack, navTo } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
const { $api, navTo } = inject('globalFunction');
const { getUserResume } = useUserStore();
const { userInfo } = storeToRefs(useUserStore());
const list = ref([]);
onLoad(() => {
getPremiumList();
getPremiumList();
});
function CollectionCard(item) {
$api.createRequest(`/app/company/card/collection/${item.companyCardId}`, {}, 'PUT').then((resData) => {
getPremiumList();
$api.msg('关注成功');
});
$api.createRequest(`/app/company/card/collection/${item.companyCardId}`, {}, 'PUT').then((resData) => {
getPremiumList();
$api.msg('关注成功');
});
}
function delCollectionCard(item) {
$api.createRequest(`/app/company/card/collection/${item.companyCardId}`, {}, 'DELETE').then((resData) => {
getPremiumList();
$api.msg('取消关注');
});
$api.createRequest(`/app/company/card/collection/${item.companyCardId}`, {}, 'DELETE').then((resData) => {
getPremiumList();
$api.msg('取消关注');
});
}
function getPremiumList() {
$api.createRequest('/app/company/card').then((resData) => {
const { rows, total } = resData;
list.value = rows;
});
$api.createRequest('/app/company/card').then((resData) => {
const { rows, total } = resData;
list.value = rows;
});
}
function seeDetail(item) {
uni.setStorageSync('jinxuan', item);
navTo('/packageA/pages/choicenessList/choicenessList');
}
</script>
<style lang="stylus" scoped>
/* 页面整体样式 */
.container
background-color #edf4ff
height 100%
display flex
flex-direction column
padding 20rpx
.btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 60rpx;
height: 60rpx;
image {
height: 100%;
width: 100%;
}
}
.main{
.main-content{
padding: 28rpx
.cards{
padding: 32rpx
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #DCDCDC;
margin-bottom: 36rpx;
position: relative;
.card-title{
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 32rpx;
color: #333333;
}
.card-text{
margin-top: 16rpx
width: 502rpx;
height: 80rpx;
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
}
}
.cards::before{
position: absolute;
right: 40rpx;
top: 50%;
content: '';
width: 4rpx;
height: 18rpx;
border-radius: 2rpx
background: #6C7282;
transform: translate(0, -50%) rotate(-45deg) ;
}
/* 搜索栏样式 */
.search-bar
font-size 32rpx
font-weight bold
color #333
margin-bottom 20rpx
.cards::after{
position: absolute;
right: 40rpx;
top: calc(50% + 1rpx);
content: '';
width: 4rpx;
height: 18rpx;
border-radius: 2rpx
background: #6C7282;
transform: rotate(45deg)
}
/* 格子布局样式 */
.grid-container
display flex
flex-wrap wrap
justify-content space-between
gap 20rpx
.grid-item
width 48%
height 200rpx
border-radius 20rpx
display flex
flex-direction column
justify-content center
align-items center
color #fff
font-size 28rpx
font-weight bold
position relative
.status
position absolute
bottom 20rpx
font-size 24rpx
background-color rgba(255, 255, 255, 0.9)
color #333
padding 5rpx 15rpx
border-radius 15rpx
/* 每种格子对应的颜色 */
.blue
background-color #3b82f6
.green
background-color #22c55e
.orange
background-color #f59e0b
.red
background-color #ef4444
}
.main-header{
padding: 80rpx 40rpx
position: relative
.header-title{
font-weight: 400;
font-size: 56rpx;
color: #333333;
font-family: DingTalk JinBuTi;
}
.header-text{
font-weight: 400;
font-size: 32rpx;
color: rgba(3,3,3,0.5);
margin-top: 10rpx
}
.header-img{
position: absolute
right: 0
bottom: 0
// transform: translate(0, -50%)
width: 280rpx;
height: 272rpx;
}
}
}
</style>

152
packageA/pages/choicenessList/choicenessList.vue Normal file
View File

@@ -0,0 +1,152 @@
<template>
<AppLayout :title="title" :show-bg-image="false" @onScrollBottom="getDataList('add')">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
</view>
</template>
<template #headContent>
<view class="collection-search">
<view class="search-content">
<view class="header-input button-click">
<uni-icons class="iconsearch" color="#6A6A6A" type="search" size="22"></uni-icons>
<input
class="input"
@confirm="searchCollection"
placeholder="输入企业名称"
placeholder-class="inputplace"
/>
</view>
</view>
</view>
</template>
<view class="main-list">
<renderCompanys
v-if="pageState.list.length"
:list="pageState.list"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderCompanys>
<empty v-else pdTop="200"></empty>
</view>
</AppLayout>
</template>
<script setup>
import { inject, ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
const { $api, navTo, navBack } = inject('globalFunction');
import useLocationStore from '@/stores/useLocationStore';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
// state
const title = ref('事业单位');
const cardInfo = ref({});
const pageState = reactive({
page: 0,
list: [],
total: 0,
maxPage: 1,
pageSize: 10,
search: {},
});
onLoad(() => {
const options = uni.getStorageSync('jinxuan');
if (options) {
cardInfo.value = options;
title.value = options.name;
} else {
$api.msg('请传入精选企业参数');
}
getDataList('refresh');
});
// search
function searchCollection(e) {
const value = e.detail.value;
pageState.search.companyName = value;
getDataList('refresh');
}
// list
function getDataList(type = 'add') {
if (type === 'refresh') {
pageState.page = 0;
pageState.maxPage = 1;
}
if (type === 'add' && pageState.page < pageState.maxPage) {
pageState.page += 1;
}
let params = {
current: pageState.page,
pageSize: pageState.pageSize,
cardId: cardInfo.value.companyCardId,
...pageState.search,
};
$api.createRequest('/app/company/label', params).then((resData) => {
const { rows, total } = resData;
if (type === 'add') {
const str = pageState.pageSize * (pageState.page - 1);
const end = pageState.list.length;
const reslist = rows;
pageState.list.splice(str, end, ...reslist);
} else {
pageState.list = rows;
}
pageState.total = resData.total;
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
});
}
</script>
<style lang="stylus" scoped>
.btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 60rpx;
height: 60rpx;
}
image {
height: 100%;
width: 100%;
}
.collection-search{
padding: 10rpx 20rpx;
.search-content{
position: relative
display: flex
align-items: center
padding: 14rpx 0
.header-input{
padding: 0
width: calc(100%);
position: relative
.iconsearch{
position: absolute
left: 30rpx;
top: 50%
transform: translate(0, -50%)
}
.input{
padding: 0 30rpx 0 80rpx
height: 80rpx;
background: #FFFFFF;
border-radius: 75rpx 75rpx 75rpx 75rpx;
border: 2rpx solid #ECECEC
font-size: 28rpx;
}
.inputplace{
font-weight: 400;
font-size: 28rpx;
color: #B5B5B5;
}
}
}
}
.main-list{
background-color: #F4F4F4;
padding: 1rpx 28rpx 28rpx 28rpx
}
</style>

234
packageA/pages/collection/collection.vue
View File

@@ -1,57 +1,58 @@
<template>
<view class="collection-content">
<view class="one-cards">
<view class="card-box" v-for="(item, index) in pageState.list" :key="index" @click="navToPost(item.jobId)">
<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>
<AppLayout title="我的收藏" :show-bg-image="false" :use-scroll-view="false">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
</view>
</template>
<view class="collection-content">
<view class="header">
<view class="button-click" :class="{ active: type === 0 }" @click="changeType(0)">工作职位</view>
<view class="button-click" :class="{ active: type === 1 }" @click="changeType(1)">公司企业</view>
</view>
<view class="coll-main">
<swiper class="swiper" :current="type" @change="changeSwiperType">
<swiper-item class="list">
<scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
<view class="mian">
<renderJobs
:list="pageState.list"
v-if="pageState.list.length"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderJobs>
<empty v-else pdTop="200"></empty>
</view>
</scroll-view>
</swiper-item>
<swiper-item class="list">
<scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLowerCompany">
<view class="mian">
<renderCompanys
:list="pageCompanyState.list"
v-if="pageCompanyState.list.length"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderCompanys>
<empty v-else pdTop="200"></empty>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
</view>
</AppLayout>
</template>
<script setup>
import img from '/static/icon/filter.png';
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 } = inject('globalFunction');
const userStore = useUserStore();
const state = reactive({});
import { inject, ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import useLocationStore from '@/stores/useLocationStore';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const { $api, navBack } = inject('globalFunction');
const type = ref(0);
const pageState = reactive({
page: 0,
list: [],
@@ -59,15 +60,35 @@ const pageState = reactive({
maxPage: 1,
pageSize: 10,
});
onLoad(() => {
getJobList();
const pageCompanyState = reactive({
page: 0,
list: [],
total: 0,
maxPage: 1,
pageSize: 10,
});
onReachBottom(() => {
onShow(() => {
getJobList();
getCompanyList();
});
function navToPost(jobId) {
navTo(`/packageA/pages/post/post?jobId=${btoa(jobId)}`);
function changeSwiperType(e) {
const current = e.detail.current;
type.value = current;
}
function changeType(e) {
type.value = e;
}
function handleScrollToLower() {
getJobList();
}
function handleScrollToLowerCompany() {
getCompanyList();
}
function getJobList(type = 'add') {
@@ -97,45 +118,78 @@ function getJobList(type = 'add') {
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
});
}
function getCompanyList(type = 'add') {
if (type === 'refresh') {
pageCompanyState.page = 0;
pageCompanyState.maxPage = 1;
}
if (type === 'add' && pageCompanyState.page < pageCompanyState.maxPage) {
pageCompanyState.page += 1;
}
let params = {
current: pageCompanyState.page,
pageSize: pageCompanyState.pageSize,
};
$api.createRequest('/app/user/collection/company', params).then((resData) => {
const { rows, total } = resData;
if (type === 'add') {
const str = pageCompanyState.pageSize * (pageCompanyState.page - 1);
const end = pageCompanyState.list.length;
const reslist = rows;
pageCompanyState.list.splice(str, end, ...reslist);
} else {
pageCompanyState.list = rows;
}
// pageCompanyState.list = resData.rows;
pageCompanyState.total = resData.total;
pageCompanyState.maxPage = Math.ceil(pageCompanyState.total / pageCompanyState.pageSize);
});
}
</script>
<style lang="stylus">
.collection-content
padding: 20rpx 0 20rpx 0;
.one-cards
<style lang="stylus" scoped>
.btn {
display: flex;
flex-direction: column;
padding: 0 20rpx;
.card-box
width: calc(100% - 36rpx - 36rpx);
border-radius: 0rpx 0rpx 0rpx 0rpx;
justify-content: space-between;
align-items: center;
width: 60rpx;
height: 60rpx;
image {
height: 100%;
width: 100%;
}
}
.collection-content{
background: #F4F4F4;
height: 100%
display: flex
flex-direction: column
.header{
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;
display: flex
justify-content: space-evenly;
align-items: center
padding: 28rpx 100rpx
font-weight: 400;
font-size: 32rpx;
color: #666D7F;
.active {
font-weight: 500;
font-size: 32rpx;
color: #000000;
}
}
.coll-main{
flex: 1
overflow: hidden
.main-scroll,
.swiper{
height: 100%
.mian{
padding: 0 28rpx 28rpx 28rpx
}
}
}
}
</style>

655
packageA/pages/exhibitors/exhibitors.vue
View File

@@ -1,147 +1,536 @@
<template>
<view class="container">
<!-- 招聘会详情标题 -->
<view class="header">
<text class="header-title">2024年春季青岛市商贸服务业招聘会</text>
<view class="header-info">
<view class="location">
<uni-icons type="location-filled" color="#4778EC" size="24"></uni-icons>
青岛 市南区延安三路105号
</view>
<text class="date">2024年7月31日 周三</text>
<AppLayout title="" :use-scroll-view="false">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
</view>
</view>
<!-- 参会单位列表 -->
<view class="company-list">
<text class="section-title">参会单位</text>
<view class="company-row" v-for="company in companies" :key="company.id">
<view class="left">
<view class="logo" :class="'logo-' + company.id">{{ company.id }}</view>
<view class="company-info">
<text class="company-name line_2">{{ company.name }}</text>
<text class="industry">{{ company.industry }}</text>
<view class="details">
<text>查看详情</text>
<uni-icons type="star" size="26"></uni-icons>
<!-- <uni-icons type="star-filled" color="#FFCB47" size="26"></uni-icons> -->
</template>
<view class="content">
<view class="content-top">
<view class="companyinfo-left">
<image src="@/static/icon/companyIcon.png" mode=""></image>
</view>
<view class="companyinfo-right">
<view class="row1 line_2">{{ fairInfo?.name }}</view>
<view class="row2">
<text>{{ fairInfo.location }}</text>
<convert-distance
:alat="fairInfo.latitude"
:along="fairInfo.longitude"
:blat="latitudeVal"
:blong="longitudeVal"
></convert-distance>
</view>
</view>
</view>
<view class="locations">
<image class="location-img" src="/static/icon/mapLine.png"></image>
<view class="location-info">
<view class="info">
<text class="info-title">{{ fairInfo.address }}</text>
<text class="info-text">位置</text>
</view>
</view>
</view>
<view class="conetent-info" :class="{ expanded: isExpanded }">
<view class="info-title">内容描述</view>
<view class="info-desirption">{{ fairInfo.description }}</view>
<!-- <view class="info-title title2">公司地址</view>
<view class="locationCompany"></view> -->
<view class="company-times">
<view class="info-title">内容描述</view>
<view class="card-times">
<view class="time-left">
<view class="left-date">{{ parseDateTime(fairInfo.startTime).time }}</view>
<view class="left-dateDay">{{ parseDateTime(fairInfo.startTime).date }}</view>
</view>
<view class="line"></view>
<view class="time-center">
<view class="center-date">
{{ getTimeStatus(fairInfo.startTime, fairInfo.endTime).statusText }}
</view>
<view class="center-dateDay">
{{ getHoursBetween(fairInfo.startTime, fairInfo.endTime) }}小时
</view>
</view>
<view class="line"></view>
<view class="time-right">
<view class="left-date">{{ parseDateTime(fairInfo.endTime).time }}</view>
<view class="left-dateDay">{{ parseDateTime(fairInfo.endTime).date }}</view>
</view>
</view>
</view>
</view>
<view class="expand" @click="expand">
<text>{{ isExpanded ? '收起' : '展开' }}</text>
<image
class="expand-img"
:class="{ 'expand-img-active': !isExpanded }"
src="@/static/icon/downs.png"
></image>
</view>
<scroll-view scroll-y class="Detailscroll-view">
<view class="views">
<view class="Detail-title">
<text class="title">参会单位（{{ companyList.length }}）</text>
</view>
<renderCompanys
v-if="companyList.length"
:list="companyList"
:longitude="longitudeVal"
:latitude="latitudeVal"
></renderCompanys>
<empty v-else pdTop="200"></empty>
</view>
</scroll-view>
</view>
</view>
<template #footer>
<view class="footer" v-if="hasnext">
<view
class="btn-wq button-click"
:class="{ 'btn-desbel': fairInfo.isCollection }"
@click="applyExhibitors"
>
{{ fairInfo.isCollection ? '已预约招聘会' : '预约招聘会' }}
</view>
</view>
</template>
</AppLayout>
</template>
<script>
export default {
data() {
return {
companies: [
{
id: 1,
name: '湖南沃森电器科技有限公司',
industry: '制造业 100-299人',
},
{
id: 2,
name: '青岛成达汽车销售集团',
industry: '制造业 100-299人',
},
{
id: 3,
name: '青岛日森电器有限公司',
industry: '制造业 100-299人',
},
{
id: 4,
name: '青岛融合网络通信有限公司',
industry: '制造业 100-299人',
},
],
};
},
<script setup>
import point from '@/static/icon/point.png';
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import dictLabel from '@/components/dict-Label/dict-Label.vue';
import useLocationStore from '@/stores/useLocationStore';
const { $api, navTo, vacanciesTo, navBack } = inject('globalFunction');
import { storeToRefs } from 'pinia';
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const isExpanded = ref(false);
const fairInfo = ref({});
const companyList = ref([]);
const hasnext = ref(true);
onLoad((options) => {
getCompanyInfo(options.jobFairId);
});
function getCompanyInfo(id) {
$api.createRequest(`/app/fair/${id}`).then((resData) => {
fairInfo.value = resData.data;
companyList.value = resData.data.companyList;
hasAppointment();
});
}
const hasAppointment = () => {
const isTimePassed = (timeStr) => {
const targetTime = new Date(timeStr.replace(/-/g, '/')).getTime(); // 兼容格式
const now = Date.now();
return now < targetTime;
};
hasnext.value = isTimePassed(fairInfo.value.startTime);
};
function openMap(lat, lng, name = '位置') {
const isConfirmed = window.confirm('是否打开地图查看位置？');
if (!isConfirmed) return;
// 使用高德地图或百度地图的 H5 链接打开
const url = `https://uri.amap.com/marker?position=${lng},${lat}&name=${encodeURIComponent(name)}`;
window.location.href = url;
}
function expand() {
isExpanded.value = !isExpanded.value;
}
// 取消/收藏岗位
function applyExhibitors() {
const fairId = fairInfo.value.jobFairId;
if (fairInfo.value.isCollection) {
// $api.createRequest(`/app/fair/collection/${fairId}`, {}, 'DELETE').then((resData) => {
// getCompanyInfo(fairId);
// $api.msg('取消预约成功');
// });
$api.msg('已预约成功');
} else {
$api.createRequest(`/app/fair/collection/${fairId}`, {}, 'POST').then((resData) => {
getCompanyInfo(fairId);
$api.msg('预约成功');
});
}
}
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 位小数
}
</script>
<style lang="stylus" scoped>
.container
display flex
flex-direction column
background-color #f8f8f8
.header
padding 20rpx 40rpx
background-color #fff
.header-title
font-size 56rpx
font-weight bold
color #333
margin-bottom 10rpx
.header-info
margin-top: 20rpx
font-size 24rpx
color #666
display flex
align-items center
justify-content space-between
.location
display flex
align-items center
.date
flex-shrink 0
.company-list
padding 20rpx
background-color #fff
margin-top 10rpx
.section-title
padding 20rpx
font-size 40rpx
font-weight bold
margin-bottom 10rpx
.company-row
display flex
justify-content space-between
align-items center
padding 20rpx
border 2rpx solid #D9D9D9
margin-top 20rpx
border-radius 17rpx 17rpx 17rpx 17rpx
.left
display flex
align-items center
width: 100%
.btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 60rpx;
height: 60rpx;
}
image {
height: 100%;
width: 100%;
}
.content{
height: 100%
.logo
background-color #22c55e
color #fff
font-size 24rpx
font-weight bold
width: 235rpx;
height: 164rpx;
display flex
align-items center
justify-content center
border-radius 12rpx
margin-right 20rpx
.company-info
min-height 164rpx
flex 1
display flex
flex-direction column
justify-content space-between
.company-name
font-size 28rpx
color #333
font-weight bold
.industry
font-size 24rpx
color #666
.details
font-size 24rpx
color #666
display flex
align-items center
justify-content space-between
display: flex;
flex-direction: column
.content-top{
padding: 28rpx
padding-top: 50rpx
display: flex
flex-direction: row
flex-wrap: nowrap
.companyinfo-left{
width: 96rpx;
height: 96rpx;
margin-right: 24rpx
}
.companyinfo-right{
flex: 1
.row1{
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
.row2{
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
line-height: 45rpx;
display: flex
justify-content: space-between
}
}
}
.locations{
padding: 0 28rpx
height: 86rpx;
position: relative
margin-bottom: 36rpx
.location-img{
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 2rpx solid #EFEFEF;
}
.location-info{
position: absolute
top: 0
left: 0
width: 100%
height: 100%
.info{
padding: 0 60rpx
height: 100%
display: flex
align-items: center
justify-content: space-between
white-space: nowrap
padding-top: rpx
.info-title{
font-weight: 600;
font-size: 28rpx;
color: #333333;
}
.info-text{
font-weight: 400;
font-size: 28rpx;
color: #9B9B9B;
position: relative;
padding-right: 20rpx
}
.info-text::before{
position: absolute;
right: 0;
top: 50%;
content: '';
width: 4rpx;
height: 16rpx;
border-radius: 2rpx
background: #9B9B9B;
transform: translate(0, -75%) rotate(-45deg)
}
.info-text::after {
position: absolute;
right: 0;
top: 50%;
content: '';
width: 4rpx;
height: 16rpx;
border-radius: 2rpx
background: #9B9B9B;
transform: translate(0, -25%) rotate(45deg)
}
}
}
}
.conetent-info{
padding: 0 28rpx
overflow: hidden;
max-height: 0rpx;
transition: max-height 0.3s ease;
.info-title{
font-weight: 600;
font-size: 28rpx;
color: #000000;
}
.info-desirption{
margin-top: 12rpx
font-weight: 400;
font-size: 28rpx;
color: #495265;
text-align: justified;
}
.title2{
margin-top: 48rpx
}
}
.company-times{
padding-top: 40rpx
.info-title{
font-weight: 600;
font-size: 28rpx;
color: #000000;
}
}
.expanded {
max-height: 1000rpx; // 足够显示完整内容
}
.expand{
display: flex
flex-wrap: nowrap
white-space: nowrap
justify-content: center
margin-bottom: 46rpx
font-weight: 400;
font-size: 28rpx;
color: #256BFA;
.expand-img{
width: 40rpx;
height: 40rpx;
}
.expand-img-active{
transform: rotate(180deg)
}
}
}
.Detailscroll-view{
flex: 1;
overflow: hidden;
background: #F4F4F4;
.views{
padding: 28rpx
.Detail-title{
font-weight: 600;
font-size: 32rpx;
color: #000000;
position: relative;
display: flex
justify-content: space-between
.title{
position: relative;
z-index: 2;
}
}
.Detail-title::before{
position: absolute
content: '';
left: -14rpx
bottom: 0
height: 16rpx;
width: 108rpx;
background: linear-gradient(to right, #CBDEFF, #FFFFFF);
border-radius: 8rpx;
z-index: 1;
}
.cards{
padding: 32rpx;
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
border-radius: 20rpx 20rpx 20rpx 20rpx;
margin-top: 22rpx;
.card-company{
display: flex
justify-content: space-between
align-items: flex-start
.company{
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
.salary{
font-weight: 500;
font-size: 28rpx;
color: #4C6EFB;
white-space: nowrap
line-height: 48rpx
}
}
.card-companyName{
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
}
.card-tags{
display: flex
flex-wrap: wrap
.tag{
width: fit-content;
height: 30rpx;
background: #F4F4F4;
border-radius: 4rpx;
padding: 6rpx 20rpx;
line-height: 30rpx;
font-weight: 400;
font-size: 24rpx;
color: #6C7282;
text-align: center;
margin-top: 14rpx;
white-space: nowrap
margin-right: 20rpx
}
}
.card-bottom{
margin-top: 32rpx
display: flex
justify-content: space-between
font-size: 28rpx;
color: #6C7282;
}
}
}
}
.card-times{
display: flex;
justify-content: space-between
align-items: center
padding: 24rpx 30rpx 10rpx 30rpx
.time-left,
.time-right{
text-align: center
.left-date{
font-weight: 500;
font-size: 48rpx;
color: #333333;
}
.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;
}
}
}
.footer{
background: #FFFFFF;
box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(11,44,112,0.12);
border-radius: 0rpx 0rpx 0rpx 0rpx;
padding: 40rpx 28rpx 20rpx 28rpx
.btn-wq{
height: 90rpx;
background: #256BFA;
border-radius: 12rpx 12rpx 12rpx 12rpx;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
text-align: center;
line-height: 90rpx
}
.btn-desbel{
background: #6697FB;
box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(11,44,112,0.12);
}
}
</style>

271
packageA/pages/jobExpect/jobExpect.vue Normal file
View File

@@ -0,0 +1,271 @@
<template>
<AppLayout
title="求职期望"
:sub-title="`完成度${percent}`"
border
back-gorund-color="#ffffff"
:show-bg-image="false"
>
<template #headerleft>
<view class="btn mar_le20 button-click" @click="navBack">取消</view>
</template>
<template #headerright>
<view class="btn mar_ri20 button-click" @click="confirm">确认</view>
</template>
<view class="content">
<view class="content-input" @click="changeSalary">
<view class="input-titile">期望薪资</view>
<input class="input-con triangle" v-model="state.salayText" disabled placeholder="请选择您的期望薪资" />
</view>
<view class="content-input" @click="changeArea">
<view class="input-titile">期望工作地</view>
<input
class="input-con triangle"
v-model="state.areaText"
disabled
placeholder="请选择您的期望工作地"
/>
</view>
<view class="content-input" @click="changeJobs">
<view class="input-titile">求职岗位</view>
<input
class="input-con triangle"
disabled
v-if="!state.jobsText.length"
placeholder="请选择您的求职岗位"
/>
<view class="input-nx" @click="changeJobs" v-else>
<view class="nx-item button-click" v-for="item in state.jobsText">{{ item }}</view>
</view>
</view>
</view>
<SelectJobs ref="selectJobsModel"></SelectJobs>
</AppLayout>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import SelectJobs from '@/components/selectJobs/selectJobs.vue';
const { $api, navTo, navBack } = inject('globalFunction');
const openSelectPopup = inject('openSelectPopup');
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
const { userInfo } = storeToRefs(useUserStore());
const { getUserResume } = useUserStore();
const { dictLabel, oneDictData } = useDictStore();
const selectJobsModel = ref();
const percent = ref('0%');
const salay = [2, 5, 10, 15, 20, 25, 30, 50, 80, 100];
const state = reactive({
lfsalay: [2, 5, 10, 15, 20, 25, 30, 50],
risalay: JSON.parse(JSON.stringify(salay)),
salayText: '',
areaText: '',
jobsText: [],
});
const fromValue = reactive({
salaryMin: 0,
salaryMax: 0,
area: '',
jobTitleId: [],
});
onLoad(() => {
initLoad();
});
const confirm = () => {
if (!fromValue.jobTitleId) {
return $api.msg('请选择您的求职岗位');
}
$api.createRequest('/app/user/resume', fromValue, 'post').then((resData) => {
$api.msg('完成');
state.disbleDate = true;
getUserResume().then(() => {
navBack();
});
});
};
watch(userInfo, (newValue, oldValue) => {
initLoad();
});
function initLoad() {
fromValue.salaryMin = userInfo.value.salaryMin;
fromValue.salaryMax = userInfo.value.salaryMax;
fromValue.area = userInfo.value.area;
fromValue.jobTitleId = userInfo.value.jobTitleId;
// 回显
state.areaText = dictLabel('area', Number(userInfo.value.area));
state.salayText = `${userInfo.value.salaryMin}-${userInfo.value.salaryMax}`;
state.jobsText = userInfo.value.jobTitle;
const result = getFormCompletionPercent(fromValue);
percent.value = result;
}
const changeSalary = () => {
let leftIndex = 0;
openSelectPopup({
title: '薪资',
maskClick: true,
data: [state.lfsalay, state.risalay],
unit: 'k',
success: (_, [min, max]) => {
fromValue.salaryMin = min.value * 1000;
fromValue.salaryMax = max.value * 1000;
state.salayText = `${fromValue.salaryMin}-${fromValue.salaryMax}`;
},
change(e) {
const salayData = e.detail.value;
if (leftIndex !== salayData[0]) {
const copyri = JSON.parse(JSON.stringify(salay));
const [lf, ri] = e.detail.value;
const risalay = copyri.slice(lf, copyri.length);
this.setColunm(1, risalay);
leftIndex = salayData[0];
}
},
});
};
function changeArea() {
openSelectPopup({
title: '区域',
maskClick: true,
data: [oneDictData('area')],
success: (_, [value]) => {
fromValue.area = value.value;
state.areaText = '青岛市-' + value.label;
},
});
}
function changeJobs() {
selectJobsModel.value?.open({
title: '添加岗位',
success: (ids, labels) => {
fromValue.jobTitleId = ids;
state.jobsText = labels.split(',');
},
});
}
function getFormCompletionPercent(form) {
let total = Object.keys(form).length;
let filled = 0;
for (const key in form) {
const value = form[key];
if (value !== '' && value !== null && value !== undefined) {
if (typeof value === 'number') {
filled += 1;
} else if (typeof value === 'string' && value.trim() !== '') {
filled += 1;
}
}
}
if (total === 0) return '0%';
const percent = (filled / total) * 100;
return percent.toFixed(0) + '%'; // 取整，不要小数点
}
</script>
<style lang="stylus" scoped>
.btn{
margin-top: -30rpx
}
.content{
padding: 28rpx;
display: flex;
flex-direction: column;
justify-content: flex-start
height: calc(100% - 120rpx)
}
.content-input
margin-bottom: 52rpx
.input-titile
font-weight: 400;
font-size: 28rpx;
color: #6A6A6A;
.input-con
font-weight: 400;
font-size: 32rpx;
color: #333333;
line-height: 80rpx;
height: 80rpx;
border-bottom: 2rpx solid #EBEBEB
position: relative;
.triangle::before
position: absolute;
right: 20rpx;
top: calc(50% - 2rpx);
content: '';
width: 4rpx;
height: 18rpx;
border-radius: 2rpx
background: #697279;
transform: translate(0, -50%) rotate(-45deg) ;
.triangle::after
position: absolute;
right: 20rpx;
top: 50%;
content: '';
width: 4rpx;
height: 18rpx;
border-radius: 2rpx
background: #697279;
transform: rotate(45deg)
.content-sex
height: 110rpx;
display: flex
justify-content: space-between;
align-items: flex-start;
border-bottom: 2rpx solid #EBEBEB
margin-bottom: 52rpx
.sex-titile
line-height: 80rpx;
.sext-ri
display: flex
align-items: center;
.sext-box
height: 76rpx;
width: 152rpx;
text-align: center;
line-height: 80rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx
border: 2rpx solid #E8EAEE;
margin-left: 28rpx
font-weight: 400;
font-size: 28rpx;
.sext-boxactive
color: #256BFA
background: rgba(37,107,250,0.1);
border: 2rpx solid #256BFA;
.next-btn
width: 100%;
height: 90rpx;
background: #256BFA;
border-radius: 12rpx 12rpx 12rpx 12rpx;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
text-align: center;
line-height: 90rpx
.input-nx
position: relative
border-bottom: 2rpx solid #EBEBEB
padding-bottom: 30rpx
display: flex
flex-wrap: wrap
.nx-item
padding: 20rpx 28rpx
width: fit-content
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #E8EAEE;
margin-right: 24rpx
margin-top: 24rpx
</style>

750
packageA/pages/myResume/myResume.vue
View File

@@ -1,631 +1,179 @@
<template>
<view class="container">
<!-- 头部信息 -->
<view class="header">
<view class="avatar"></view>
<view class="info">
<view class="name-row">
<text class="name" v-if="state.disbleName">{{ state.name || '编辑用户名' }}</text>
<input
class="uni-input name"
style="padding-top: 6px"
v-else
v-model="state.name"
placeholder-class="name"
type="text"
placeholder="输入用户名"
/>
<view class="edit-icon">
<view class="mys-container">
<!-- 个人信息 -->
<view class="mys-tops btn-feel">
<view class="tops-left">
<view class="name">
<text>{{ userInfo.name || '编辑用户名' }}</text>
<view class="edit-icon mar_le10">
<image
class="img"
v-if="state.disbleName"
src="../../../static/icon/edit.png"
@click="editName"
></image>
<image v-else class="img" src="../../../static/icon/save.png" @click="completeUserName"></image>
</view>
</view>
<text class="details">
<dict-Label dictType="sex" :value="userInfo.sex"></dict-Label>
{{ state.age }}岁
</text>
</view>
</view>
<!-- 简历信息 -->
<view class="resume-info">
<view class="info-card">
<view class="card-content">
<text class="label">出生年月：</text>
<!-- <text class="value">2001/01/01</text> -->
<picker
mode="date"
:disabled="state.disbleDate"
:value="state.date"
:start="startDate"
:end="endDate"
@change="bindDateChange"
>
<view class="uni-input">{{ state.date }}</view>
</picker>
<view class="edit-icon">
<image
v-if="state.disbleDate"
class="img"
src="../../../static/icon/edit.png"
@click="editResume"
></image>
<image v-else class="img" src="../../../static/icon/save.png" @click="completeResume"></image>
</view>
</view>
<view class="card-content">
<text class="label">学历：</text>
<!-- <text class="value">
<dict-Label dictType="education" :value="userInfo.education"></dict-Label>
</text> -->
<picker
@change="bindEducationChange"
range-key="label"
:disabled="state.disbleDate"
:value="state.education"
:range="state.educationList"
>
<view class="uni-input">{{ state.educationList[state.education].label }}</view>
</picker>
</view>
<view class="card-content">
<text class="label">政治面貌：</text>
<!-- <text class="value">2001/01/01</text> -->
<picker
@change="bindPoliticalAffiliationChange"
range-key="label"
:disabled="state.disbleDate"
:value="state.politicalAffiliation"
:range="state.affiliationList"
>
<view class="uni-input">{{ state.affiliationList[state.politicalAffiliation].label }}</view>
</picker>
</view>
<view class="card-content" style="padding-bottom: 3px">
<text class="label">联系方式：</text>
<!-- <text class="value">2001/01/01</text> -->
<input
class="uni-input"
style="padding-top: 6px"
:disabled="state.disbleDate"
v-model="state.phone"
placeholder-class="value"
type="number"
placeholder="输入手机号"
/>
</view>
</view>
</view>
<!-- 期望职位 -->
<view class="resume-info">
<view class="info-card">
<view class="card-content">
<text class="label">期望职位：</text>
<view class="value">
<view v-for="item in userInfo.jobTitle" :key="item">{{ item }}</view>
</view>
<view class="edit-icon">
<image class="img" @click="editJobs" src="../../../static/icon/edit.png"></image>
</view>
</view>
</view>
</view>
<!-- 期望薪资 -->
<view class="resume-info">
<view class="info-card">
<view class="card-content">
<text class="label">期望薪资：</text>
<view class="value">
<picker
@change="changeSalary"
@columnchange="changeColumeSalary"
range-key="label"
:disabled="state.disbleSalary"
:value="state.salary"
:range="state.salayList"
mode="multiSelector"
>
<view class="uni-input">{{ state.salaryMin / 1000 }}k-{{ state.salaryMax / 1000 }}k</view>
</picker>
</view>
<view class="edit-icon">
<image
v-if="state.disbleSalary"
class="img"
src="../../../static/icon/edit.png"
@click="salaryExpectation"
></image>
<image
v-else
class="img"
src="../../../static/icon/save.png"
@click="completesalaryExpectation"
class="button-click"
src="@/static/icon/edit1.png"
@click="navTo('/packageA/pages/personalInfo/personalInfo')"
></image>
</view>
</view>
<view class="subName">
<dict-Label class="mar_ri10" dictType="sex" :value="userInfo.sex"></dict-Label>
<text class="mar_ri10">{{ userInfo.age }}岁</text>
<dict-Label class="mar_ri10" dictType="education" :value="userInfo.education"></dict-Label>
<dict-Label
class="mar_ri10"
dictType="affiliation"
:value="userInfo.politicalAffiliation"
></dict-Label>
</view>
<view class="subName">{{ userInfo.phone }}</view>
</view>
</view>
<!-- 期望工作地 -->
<view class="resume-info">
<view class="info-card">
<view class="card-content">
<text class="label long">期望工作地：</text>
<view class="value">
<view v-if="state.disaleArea">
青岛 -
<dict-Label dictType="area" :value="Number(state.area)"></dict-Label>
</view>
<view v-else>
<picker
@change="bindAreaChange"
range-key="label"
:disabled="state.disaleArea"
:value="state.area"
:range="state.areaList"
>
<view class="uni-input">
青岛 -
{{ state.areaList[state.area].label }}
</view>
</picker>
</view>
</view>
<view class="edit-icon">
<image
v-if="state.disaleArea"
class="img"
src="../../../static/icon/edit.png"
@click="state.disaleArea = false"
></image>
<image v-else class="img" src="../../../static/icon/save.png" @click="completeArea"></image>
</view>
<view class="tops-right">
<view class="right-imghead">
<image v-if="userInfo.sex === '0'" src="@/static/icon/boy.png"></image>
<image v-else src="@/static/icon/girl.png"></image>
</view>
<view class="right-sex">
<image v-if="userInfo.sex === '0'" src="@/static/icon/boy1.png"></image>
<image v-else src="@/static/icon/girl1.png"></image>
</view>
</view>
</view>
<!-- 上传按钮 -->
<view class="upload-btn">
<button class="btn">
<uni-icons type="cloud-upload" size="30" color="#FFFFFF"></uni-icons>
上传简历
</button>
</view>
<!-- piker -->
<custom-popup :content-h="100" :visible="state.visible" :header="false">
<view class="popContent">
<view class="s-header">
<view class="heade-lf" @click="state.visible = false">取消</view>
<view class="heade-ri" @click="confimPopup">确认</view>
</view>
<view class="sex-content fl_1">
<expected-station
:search="false"
@onChange="changeJobTitleId"
:station="state.stations"
:max="5"
></expected-station>
<!-- 求职期望 -->
<view class="mys-line"></view>
<view class="mys-info">
<view class="mys-h4">
<text>求职期望</text>
<view class="mys-edit-icon">
<image
class="button-click"
src="@/static/icon/edit1.png"
@click="navTo('/packageA/pages/jobExpect/jobExpect')"
></image>
</view>
</view>
</custom-popup>
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog
mode="base"
title="确定退出登录吗？"
type="info"
:duration="2000"
:before-close="true"
@confirm="confirm"
@close="close"
></uni-popup-dialog>
</uni-popup>
<view class="mys-text">
<text>期望薪资：</text>
<text>{{ userInfo.salaryMin / 1000 }}k-{{ userInfo.salaryMax / 1000 }}k</text>
</view>
<view class="mys-text">
<text>期望工资地：</text>
<text>青岛市-</text>
<dict-Label dictType="area" :value="Number(userInfo.area)"></dict-Label>
</view>
<view class="mys-list">
<view class="cards button-click" v-for="(title, index) in userInfo.jobTitle" :key="index">
{{ title }}
</view>
</view>
</view>
</view>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
const { $api, navTo } = inject('globalFunction');
import { onLoad, onShow } from '@dcloudio/uni-app';
import dictLabel from '@/components/dict-Label/dict-Label.vue';
const { $api, navTo, checkingPhoneRegExp, salaryGlobal, setCheckedNodes } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
const { userInfo } = storeToRefs(useUserStore());
const { getUserResume } = useUserStore();
const { getDictData, oneDictData } = useDictStore();
const userInfo = ref({});
const salay = salaryGlobal();
const state = reactive({
date: getDate(),
education: 0,
politicalAffiliation: 0,
phone: '',
name: '',
jobTitleId: '',
salaryMin: 2000,
salaryMax: 2000,
area: 0,
salary: [0, 0],
disbleDate: true,
disbleName: true,
disbleSalary: true,
disaleArea: true,
visible: false,
educationList: oneDictData('education'),
affiliationList: oneDictData('affiliation'),
areaList: oneDictData('area'),
stations: [],
copyData: {},
salayList: [salay, salay[0].children],
});
const startDate = computed(() => {
return getDate('start');
});
const endDate = computed(() => {
return getDate('end');
});
onShow(() => {
initload();
});
onLoad(() => {
setTimeout(() => {
const { age, birthDate } = useUserStore().userInfo;
const newAge = calculateAge(birthDate);
// 计算年龄是否对等
if (age != newAge) {
console.log(age, newAge);
completeResume();
}
}, 1000);
});
const calculateAge = (birthDate) => {
const birth = new Date(birthDate);
const today = new Date();
let age = today.getFullYear() - birth.getFullYear();
const monthDiff = today.getMonth() - birth.getMonth();
const dayDiff = today.getDate() - birth.getDate();
// 如果生日的月份还没到，或者刚到生日月份但当天还没过，则年龄减 1
if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
age--;
}
return age;
};
function initload() {
userInfo.value = useUserStore().userInfo;
state.name = userInfo.value.name;
state.date = userInfo.value.birthDate;
state.age = userInfo.value.age;
state.phone = userInfo.value.phone;
state.salaryMax = userInfo.value.salaryMax;
state.salaryMin = userInfo.value.salaryMin;
state.area = userInfo.value.area;
state.educationList.map((iv, index) => {
if (iv.value === userInfo.value.education) state.education = index;
});
state.affiliationList.map((iv, index) => {
if (iv.value === userInfo.value.politicalAffiliation) state.politicalAffiliation = index;
});
$api.createRequest('/app/common/jobTitle/treeselect', {}, 'GET').then((resData) => {
if (userInfo.value.jobTitleId) {
const ids = userInfo.value.jobTitleId.split(',').map((id) => Number(id));
setCheckedNodes(resData.data, ids);
}
state.jobTitleId = userInfo.value.jobTitleId;
state.stations = resData.data;
});
}
function bindAreaChange(val) {
state.area = val.detail.value;
}
function bindDateChange(val) {
state.date = val.detail.value;
}
function bindEducationChange(val) {
state.education = val.detail.value;
}
function bindPoliticalAffiliationChange(val) {
state.politicalAffiliation = val.detail.value;
}
function completeArea() {
let params = {
area: state.area,
};
$api.createRequest('/app/user/resume', params, 'post').then((resData) => {
$api.msg('完成');
state.disaleArea = true;
getUserResume().then(() => {
initload();
});
});
}
function completesalaryExpectation() {
let params = {
salaryMin: state.salaryMin,
salaryMax: state.salaryMax,
};
$api.createRequest('/app/user/resume', params, 'post').then((resData) => {
$api.msg('完成');
state.disbleSalary = true;
getUserResume().then(() => {
initload();
});
});
}
function completeResume() {
let params = {
birthDate: state.date,
age: calculateAge(state.date),
education: state.educationList[state.education].value,
politicalAffiliation: state.affiliationList[state.politicalAffiliation].value,
phone: state.phone,
};
if (!params.birthDate) {
return $api.msg('请选择出生年月');
}
if (!params.education) {
return $api.msg('请选择学历');
}
if (!params.politicalAffiliation) {
return $api.msg('请选择政治面貌');
}
if (!checkingPhoneRegExp(params.phone)) {
return $api.msg('请输入正确手机号');
}
$api.createRequest('/app/user/resume', params, 'post').then((resData) => {
$api.msg('完成');
state.disbleDate = true;
getUserResume().then(() => {
initload();
});
});
}
function completeUserName() {
if (!state.name) {
return $api.msg('请输入用户名称');
}
$api.createRequest('/app/user/resume', { name: state.name }, 'post').then((resData) => {
$api.msg('完成');
state.disbleName = true;
getUserResume().then(() => {
initload();
});
});
}
function confimPopup() {
$api.createRequest('/app/user/resume', { jobTitleId: state.jobTitleId }, 'post').then((resData) => {
$api.msg('完成');
state.visible = false;
getUserResume().then(() => {
initload();
});
});
}
function editResume() {
state.copyData.date = state.date;
state.copyData.education = state.education;
state.copyData.politicalAffiliation = state.politicalAffiliation;
state.copyData.phone = state.phone;
state.disbleDate = false;
}
function salaryExpectation() {
state.disbleSalary = false;
}
function editName() {
state.name = userInfo.value.name;
state.disbleName = false;
}
function changeJobTitleId(ids) {
state.jobTitleId = ids;
}
function editJobs() {
state.visible = true;
}
function changeColumeSalary(e) {
const { column, value } = e.detail;
if (column === 0) {
state.salary[1] = 0;
state.salayList[1] = salay[value].children;
}
}
function changeSalary(e) {
const [minIndex, maxIndex] = e.detail.value;
const min = state.salayList[0][minIndex];
const max = state.salayList[0][minIndex].children[maxIndex];
state.salaryMin = min.value;
state.salaryMax = max.value;
}
function getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 60;
} else if (type === 'end') {
year = year + 2;
}
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
}
</script>
<style lang="stylus" scoped>
.container
image{
width: 100%;
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
background: linear-gradient( 180deg, #4778EC 0%, #002979 100%);
display: flex;
flex-direction: column;
align-items center
height: 100%
}
.mys-container{
.mys-tops{
display: flex
justify-content: space-between
padding: 52rpx 48rpx
.tops-left{
.name{
font-weight: 600;
font-size: 44rpx;
color: #333333;
display: flex
align-items: center
justify-content: flex-start
.edit-icon{
display: inline-block
width: 40rpx;
height: 40rpx
padding-bottom: 10rpx
}
}
.subName{
margin-top: 12rpx
font-weight: 400;
font-size: 32rpx;
color: #333333;
}
.header
display flex
align-items center
padding 30rpx 60rpx
width calc(100% - 120rpx)
border-radius 0 0 20rpx 20rpx
.avatar
width 100rpx
height 100rpx
background-color #ccc
border-radius 50%
margin-right 20rpx
.info
display flex
flex-direction column
.name-row
display flex
align-items center
position relative
.name
font-size 36rpx
font-weight bold
color #fff
.edit-icon
width 40rpx
height 40rpx
border-radius 50%
position: absolute
right: -60rpx
top: 6rpx
.img
width: 100%
height: 100%
.details
font-size 24rpx
color #dbeafe
.resume-info
padding: 0 26rpx
width calc(100% - 52rpx)
margin-top 20rpx
.info-card
display flex
flex-direction: column
justify-content space-between
align-items center
color #fff
padding 10rpx 24rpx
border-radius 12rpx
margin-bottom 10rpx
background: #4778EC;
box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
border-radius: 17rpx 17rpx 17rpx 17rpx;
position: relative
.card-content
width: 100%
display flex
line-height: 58rpx
margin-top 16rpx
position: relative
.label
width 160rpx
height: 32rpx
font-size 28rpx
color #FFFFFF
text-align:justify;
margin-right: 20rpx
.long
width 180rpx
margin-right: 0rpx
.label:after
content: '';
display: inline-block;
width: 100%;
.value
font-size: 28rpx;
color: #FFFFFF;
.card-content:first-child
margin-top 0
.edit-icon
position: absolute
right: 10rpx
top: 10rpx
width 40rpx
height 40rpx
.img
width: 100%
height: 100%
.upload-btn
margin-top 20rpx
.btn
display: flex
align-items: center
box-shadow: 0rpx 7rpx 7rpx 0rpx rgba(0,0,0,0.25);
height 80rpx
background-color #22c55e
color #fff
font-size 28rpx
font-weight bold
border-radius 20rpx
/* popup */
.popContent {
padding: 24rpx;
background: #4778ec;
height: calc(100% - 49rpx);
.sex-content {
border-radius: 20rpx;
width: 100%;
margin-top: 20rpx;
margin-bottom: 40rpx;
display: flex;
overflow: hidden;
height: calc(100% - 100rpx);
border: 1px solid #4778ec;
}
.s-header {
display: flex;
justify-content: space-between;
text-align: center;
font-size: 16px;
.heade-lf {
line-height: 30px;
width: 50px;
height: 30px;
border-radius: 4px;
border: 1px solid #666666;
color: #666666;
background: #ffffff;
}
.heade-ri {
line-height: 30px;
width: 50px;
height: 30px;
border-radius: 4px;
border: 1px solid #1b66ff;
background-color: #1b66ff;
color: #ffffff;
.tops-right{
position: relative
.right-imghead{
width: 136rpx;
height: 136rpx;
border-radius: 50%;
background: #e8e8e8
overflow: hidden
}
.right-sex{
position: absolute
right: -10rpx
top: -10rpx
width: 50rpx
height: 50rpx
}
}
}
.mys-line{
margin: 0 28rpx
height: 0rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
border: 2rpx dashed #000000;
opacity: 0.16;
}
.mys-info{
padding: 28rpx
.mys-h4{
font-weight: 600;
font-size: 32rpx;
color: #000000;
margin-bottom: 8rpx
display: flex;
justify-content: space-between
align-items: center
.mys-edit-icon{
display: inline-block
width: 40rpx;
height: 40rpx
}
}
.mys-text{
font-weight: 400;
font-size: 28rpx;
color: #333333;
margin-top: 16rpx
}
.mys-list{
display: flex
align-items: center
flex-wrap: wrap;
.cards{
margin: 28rpx 28rpx 0 0
height: 80rpx;
padding: 0 38rpx;
width: fit-content
display: flex
align-items: center
justify-content: center
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #E8EAEE;
}
}
}
}

340
packageA/pages/personalInfo/personalInfo.vue Normal file
View File

@@ -0,0 +1,340 @@
<template>
<AppLayout
title="个人信息"
:sub-title="`完成度${percent}`"
border
back-gorund-color="#ffffff"
:show-bg-image="false"
>
<template #headerleft>
<view class="btn mar_le20 button-click" @click="navBack">取消</view>
</template>
<template #headerright>
<view class="btn mar_ri20 button-click" @click="confirm">确认</view>
</template>
<view class="content">
<view class="content-input">
<view class="input-titile">姓名</view>
<input class="input-con" v-model="fromValue.name" placeholder="请输入您的姓名" />
</view>
<view class="content-sex">
<view class="sex-titile">性别</view>
<view class="sext-ri">
<view class="sext-box" :class="{ 'sext-boxactive': fromValue.sex === 0 }" @click="changeSex(0)">
男
</view>
<view class="sext-box" :class="{ 'sext-boxactive': fromValue.sex === 1 }" @click="changeSex(1)">
女
</view>
</view>
</view>
<view class="content-input" @click="changeDateBirt">
<view class="input-titile">出生年月</view>
<input
class="input-con triangle"
v-model="fromValue.birthDate"
disabled
placeholder="请选择您的出生年月"
/>
</view>
<view class="content-input" @click="changeEducation">
<view class="input-titile">学历</view>
<input class="input-con triangle" v-model="state.educationText" disabled placeholder="请选择您的学历" />
</view>
<view class="content-input" @click="changePoliticalAffiliation">
<view class="input-titile">政治面貌</view>
<input
class="input-con triangle"
v-model="state.politicalAffiliationText"
disabled
placeholder="请选择您的政治面貌"
/>
</view>
<view class="content-input">
<view class="input-titile">手机号码</view>
<input class="input-con" v-model="fromValue.phone" placeholder="请输入您的手机号码" />
</view>
</view>
</AppLayout>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, navTo, navBack, checkingPhoneRegExp } = inject('globalFunction');
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
const { userInfo } = storeToRefs(useUserStore());
const { getUserResume } = useUserStore();
const { dictLabel, oneDictData } = useDictStore();
const openSelectPopup = inject('openSelectPopup');
const percent = ref('0%');
const state = reactive({
educationText: '',
politicalAffiliationText: '',
});
const fromValue = reactive({
name: '',
sex: 0,
birthDate: '',
education: '',
politicalAffiliation: '',
});
onLoad(() => {
initLoad();
// setTimeout(() => {
// const { age, birthDate } = useUserStore().userInfo;
// const newAge = calculateAge(birthDate);
// // 计算年龄是否对等
// if (age != newAge) {
// completeResume();
// }
// }, 1000);
});
function initLoad() {
fromValue.name = userInfo.value.name;
fromValue.sex = Number(userInfo.value.sex);
fromValue.phone = userInfo.value.phone;
fromValue.birthDate = userInfo.value.birthDate;
fromValue.education = userInfo.value.education;
fromValue.politicalAffiliation = userInfo.value.politicalAffiliation;
// 回显
state.educationText = dictLabel('education', userInfo.value.education);
state.politicalAffiliationText = dictLabel('affiliation', userInfo.value.politicalAffiliation);
const result = getFormCompletionPercent(fromValue);
percent.value = result;
}
const confirm = () => {
if (!fromValue.name) {
return $api.msg('请输入姓名');
}
if (!fromValue.birthDate) {
return $api.msg('请选择出生年月');
}
if (!fromValue.education) {
return $api.msg('请选择学历');
}
if (!fromValue.politicalAffiliation) {
return $api.msg('请选择政治面貌');
}
if (!checkingPhoneRegExp(fromValue.phone)) {
return $api.msg('请输入正确手机号');
}
const params = {
...fromValue,
age: calculateAge(fromValue.birthDate),
};
$api.createRequest('/app/user/resume', params, 'post').then((resData) => {
$api.msg('完成');
state.disbleDate = true;
getUserResume().then(() => {
navBack();
});
});
};
const changeDateBirt = () => {
const datearray = generateDatePickerArrays();
const defaultIndex = getDatePickerIndexes(fromValue.birthDate);
openSelectPopup({
title: '年龄段',
maskClick: true,
data: datearray,
defaultIndex,
success: (_, value) => {
const [year, month, day] = value;
const dateStr = `${year.value}-${month.value}-${day.value}`;
if (isValidDate(dateStr)) {
fromValue.birthDate = dateStr;
} else {
$api.msg('没有这一天');
}
},
});
};
const changeEducation = () => {
openSelectPopup({
title: '学历',
maskClick: true,
data: [oneDictData('education')],
success: (_, [value]) => {
fromValue.education = value.value;
state.educationText = value.label;
},
});
};
const changeSex = (sex) => {
fromValue.sex = sex;
};
const changePoliticalAffiliation = () => {
openSelectPopup({
title: '政治面貌',
maskClick: true,
data: [oneDictData('affiliation')],
success: (_, [value]) => {
fromValue.politicalAffiliation = value.value;
state.politicalAffiliationText = value.label;
},
});
};
function generateDatePickerArrays(startYear = 1975, endYear = new Date().getFullYear()) {
const years = [];
const months = [];
const days = [];
for (let y = startYear; y <= endYear; y++) {
years.push(y.toString());
}
for (let m = 1; m <= 12; m++) {
months.push(m.toString().padStart(2, '0'));
}
for (let d = 1; d <= 31; d++) {
days.push(d.toString().padStart(2, '0'));
}
return [years, months, days];
}
function isValidDate(dateString) {
const [year, month, day] = dateString.split('-').map(Number);
const date = new Date(year, month - 1, day); // 月份从0开始
return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
}
const calculateAge = (birthDate) => {
const birth = new Date(birthDate);
const today = new Date();
let age = today.getFullYear() - birth.getFullYear();
const monthDiff = today.getMonth() - birth.getMonth();
const dayDiff = today.getDate() - birth.getDate();
// 如果生日的月份还没到，或者刚到生日月份但当天还没过，则年龄减 1
if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
age--;
}
return age;
};
function getFormCompletionPercent(form) {
let total = Object.keys(form).length;
let filled = 0;
for (const key in form) {
const value = form[key];
if (value !== '' && value !== null && value !== undefined) {
if (typeof value === 'number') {
filled += 1;
} else if (typeof value === 'string' && value.trim() !== '') {
filled += 1;
}
}
}
if (total === 0) return '0%';
const percent = (filled / total) * 100;
return percent.toFixed(0) + '%'; // 取整，不要小数点
}
// 主函数
function getDatePickerIndexes(dateStr) {
const [year, month, day] = dateStr.split('-');
const [years, months, days] = generateDatePickerArrays();
const yearIndex = years.indexOf(year);
const monthIndex = months.indexOf(month);
const dayIndex = days.indexOf(day);
return [yearIndex, monthIndex, dayIndex];
}
</script>
<style lang="stylus" scoped>
.btn{
margin-top: -30rpx
}
.content{
padding: 28rpx;
display: flex;
flex-direction: column;
justify-content: flex-start
height: calc(100% - 120rpx)
}
.content-input
margin-bottom: 52rpx
.input-titile
font-weight: 400;
font-size: 28rpx;
color: #6A6A6A;
.input-con
font-weight: 400;
font-size: 32rpx;
color: #333333;
line-height: 80rpx;
height: 80rpx;
border-bottom: 2rpx solid #EBEBEB
position: relative;
.triangle::before
position: absolute;
right: 20rpx;
top: calc(50% - 2rpx);
content: '';
width: 4rpx;
height: 18rpx;
border-radius: 2rpx
background: #697279;
transform: translate(0, -50%) rotate(-45deg) ;
.triangle::after
position: absolute;
right: 20rpx;
top: 50%;
content: '';
width: 4rpx;
height: 18rpx;
border-radius: 2rpx
background: #697279;
transform: rotate(45deg)
.content-sex
height: 110rpx;
display: flex
justify-content: space-between;
align-items: flex-start;
border-bottom: 2rpx solid #EBEBEB
margin-bottom: 52rpx
.sex-titile
line-height: 80rpx;
.sext-ri
display: flex
align-items: center;
.sext-box
height: 76rpx;
width: 152rpx;
text-align: center;
line-height: 80rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx
border: 2rpx solid #E8EAEE;
margin-left: 28rpx
font-weight: 400;
font-size: 28rpx;
.sext-boxactive
color: #256BFA
background: rgba(37,107,250,0.1);
border: 2rpx solid #256BFA;
.next-btn
width: 100%;
height: 90rpx;
background: #256BFA;
border-radius: 12rpx 12rpx 12rpx 12rpx;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
text-align: center;
line-height: 90rpx
</style>

167
packageA/pages/post/component/radarMap.vue Normal file
View File

@@ -0,0 +1,167 @@
<template>
<view style="display: flex; justify-content: center; padding: 0px 0">
<canvas canvas-id="radarCanvas" id="radarCanvas" style="width: 300px; height: 250px"></canvas>
</view>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
// const src = ref('');
const props = defineProps({
value: {
type: Object,
default: () => ({}),
},
});
// 监听页面初始化
onMounted(() => {
if (Object.keys(props.value).length > 0) {
rawRadarChart();
}
});
// 监听 props.value 变化
watch(
() => props.value,
(newVal) => {
if (newVal && Object.keys(newVal).length > 0) {
const { skill, experience, education, salary, age, location } = newVal.radarChart;
const labels = ['学历', '年龄', '工作地', '技能', '工作经验', '期望薪资'];
const data = [education, age, location, skill, experience, salary].map((item) => item * 0.05);
rawRadarChart(labels, data);
}
},
{ deep: true, immediate: false } // deep 递归监听对象内部变化
);
function rawRadarChart(labels, data) {
const ctx = uni.createCanvasContext('radarCanvas');
const width = 80;
const height = 80;
const centerX = 150;
const centerY = 125;
// const data = [2, 3.5, 5, 3.5, 5, 3.5]; // 示例数据
// const labels = ['火烧', '泡水', '事故', '外观', '部件', '火烧'];
const colors = ['#F5F5F5', '#F5F5F5', '#F5F5F5', '#F5F5F5', '#F5F5F5'];
const maxScore = 5; // 数据最大值
const angleStep = (2 * Math.PI) / labels.length;
// 绘制背景多边形
ctx.setLineWidth(1);
ctx.setStrokeStyle('#F6F6F6');
//底部圆盘
ctx.beginPath();
ctx.arc(centerX, centerY, width, 0, 2 * Math.PI);
ctx.setFillStyle('#FFFFFF');
ctx.closePath();
ctx.fill();
//多边形圈
// 多边形圈
for (let i = 5; i > 0; i--) {
ctx.setStrokeStyle(colors[i - 1]); // 设置边框颜色
ctx.beginPath();
labels.forEach((label, index) => {
const x = centerX + (width / 5) * i * Math.cos(angleStep * index - Math.PI / 2);
const y = centerY + (height / 5) * i * Math.sin(angleStep * index - Math.PI / 2);
if (index === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
});
ctx.closePath();
ctx.stroke(); // 只描边，不填充
}
// //竖线
labels.forEach((label, index) => {
ctx.setStrokeStyle('#F5F5F5');
ctx.setFillStyle('#F5F5F5');
ctx.beginPath();
const x1 = centerX + width * 0.6 * Math.sin(angleStep * index);
const y1 = centerY + height * 0.6 * Math.cos(angleStep * index);
const x = centerX + width * Math.sin(angleStep * index);
const y = centerY + height * Math.cos(angleStep * index);
ctx.moveTo(x1, y1);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
});
// 绘制雷达图数据
ctx.setStrokeStyle('#256BFA');
ctx.setFillStyle('rgba(37,107,250, 0.24)');
ctx.setLineWidth(2);
ctx.beginPath();
const pointList = []; // 记录每个点的位置，等会画小圆点
data.forEach((score, index) => {
const x = centerX + width * (score / maxScore) * Math.cos(angleStep * index - Math.PI / 2);
const y = centerY + height * (score / maxScore) * Math.sin(angleStep * index - Math.PI / 2);
pointList.push({ x, y }); // 保存位置
if (index === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
});
ctx.closePath();
ctx.fill();
ctx.stroke();
// 绘制每个小圆点
ctx.setFillStyle('#256BFA'); // 小圆点颜色（你可以改）
pointList.forEach((point) => {
ctx.beginPath();
ctx.arc(point.x, point.y, 4, 0, 2 * Math.PI); // 半径 4，可以自己调大小
ctx.fill();
});
// 绘制标签
ctx.setTextAlign('center');
labels.forEach((label, index) => {
const x = centerX + (width + 30) * Math.cos(angleStep * index - Math.PI / 2);
const y = centerY + (height + 26) * Math.sin(angleStep * index - Math.PI / 2);
//标题
ctx.setFillStyle('#000');
ctx.setFontSize(12);
ctx.font = 'bold 12px sans-serif';
ctx.fillText(label, x, y);
// ctx.setFillStyle('#A2A4A2');
// ctx.font = '12px sans-serif';
// ctx.setFontSize(12);
// ctx.fillText(data[index], x, y + 16);
});
ctx.draw();
//转图片
// uni.canvasToTempFilePath({
// x: 0,
// y: 0,
// width: 320,
// height: 320,
// destWidth: 840,
// destHeight: 840,
// canvasId: 'radarCanvas',
// success: (res) => {
// // 在H5平台下，tempFilePath 为 base64
// src = res.tempFilePath;
// },
// });
}
</script>
<style></style>

158
packageA/pages/post/component/videoPlayer.vue Normal file
View File

@@ -0,0 +1,158 @@
<template>
<!-- 小窗播放容器 -->
<view
v-if="visible"
class="mini-player"
:style="{
left: position.x + 'px',
top: position.y + 'px',
width: isFullScreen ? '100%' : '300rpx',
height: isFullScreen ? '100vh' : '200rpx',
}"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
@touchmove.stop.prevent
>
<!-- 视频组件 -->
<video
:src="videoUrl"
:controls="true"
:show-progress="isFullScreen"
:style="{
width: '100%',
height: '100%',
}"
id="myVideo"
@play="onPlay"
@pause="onPause"
></video>
<!-- 控制栏 -->
<view class="controls">
<!-- <text @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</text>
<text @click="toggleFullScreen">{{ isFullScreen ? '退出全屏' : '全屏' }}</text> -->
<text @click="close">关闭</text>
</view>
</view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { nextTick } from 'vue';
const visible = ref(false);
const isPlaying = ref(false);
const isFullScreen = ref(false);
const videoUrl = ref('');
const position = reactive({ x: 20, y: 100 });
const videoContext = ref(null);
const startPos = reactive({ x: 0, y: 0 });
const moving = ref(false);
// 初始化视频上下文
onMounted(() => {
videoContext.value = uni.createVideoContext('myVideo');
});
// 触摸开始
const handleTouchStart = (e) => {
if (isFullScreen.value) return;
startPos.x = e.touches[0].clientX - position.x;
startPos.y = e.touches[0].clientY - position.y;
moving.value = true;
};
// 触摸移动
const handleTouchMove = (e) => {
if (!moving.value || isFullScreen.value) return;
const newX = e.touches[0].clientX - startPos.x;
const newY = e.touches[0].clientY - startPos.y;
// 边界检测
const maxX = window.innerWidth - 150; // 300rpx换算后的值
const maxY = 50 + window.innerHeight - 200;
position.x = Math.max(0, Math.min(newX, maxX));
position.y = Math.max(0, Math.min(newY, maxY));
};
// 触摸结束
const handleTouchEnd = () => {
moving.value = false;
};
// 播放状态变化
const onPlay = () => {
isPlaying.value = true;
};
const onPause = () => {
isPlaying.value = false;
};
// 切换播放状态
const togglePlay = () => {
isPlaying.value ? videoContext.value.pause() : videoContext.value.play();
};
// 切换全屏
const toggleFullScreen = () => {
isFullScreen.value = !isFullScreen.value;
if (!isFullScreen.value) {
// 退出全屏时恢复原位
position.x = 20;
position.y = 100;
}
};
// 关闭播放器
const close = () => {
visible.value = false;
videoContext.value.stop();
isPlaying.value = false;
isFullScreen.value = false;
};
// 打开播放器方法
const open = (url) => {
videoUrl.value = url;
visible.value = true;
nextTick(() => {
videoContext.value.play();
});
};
// 暴露方法
defineExpose({ open });
</script>
<style scoped>
.mini-player {
position: fixed;
z-index: 999;
background: #000;
border-radius: 8rpx;
overflow: hidden;
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.3);
}
.controls {
position: absolute;
top: 0;
right: 0;
/* background: rgba(0, 0, 0, 0.7); */
padding: 10rpx;
display: flex;
justify-content: space-around;
}
.controls text {
color: #fff;
font-size: 24rpx;
padding: 8rpx 16rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 4rpx;
}
</style>

574
packageA/pages/post/post.vue
View File

@@ -1,80 +1,153 @@
<template>
<view class="container">
<view class="job-header">
<view class="job-title">{{ jobInfo.jobTitle }}</view>
<view class="job-info">
<text class="salary">{{ jobInfo.minSalary }}-{{ jobInfo.maxSalary }}/月</text>
<text class="views">{{ jobInfo.view }}浏览</text>
<AppLayout title="" backGorundColor="#F4F4F4">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
</view>
<view class="location-info">
<view class="location" style="display: inline-block">
📍 青岛
<dict-Label dictType="area" :value="jobInfo.jobLocationAreaCode"></dict-Label>
</template>
<template #headerright>
<view class="btn mar_ri10">
<image src="@/static/icon/collect3.png" v-if="!jobInfo.isCollection" @click="jobCollection"></image>
<image src="@/static/icon/collect2.png" v-else @click="jobCollection"></image>
</view>
</template>
<view class="content">
<view class="content-top btn-feel">
<view class="top-salary">{{ jobInfo.minSalary }}-{{ jobInfo.maxSalary }}/月</view>
<view class="top-name">{{ jobInfo.jobTitle }}</view>
<view class="top-info">
<view class="info-img"><image src="/static/icon/post12.png"></image></view>
<view class="info-text">
<dict-Label dictType="experience" :value="jobInfo.experience"></dict-Label>
</view>
<view class="info-img mar_le20"><image src="/static/icon/post13.png"></image></view>
<view class="info-text">
<dict-Label dictType="education" :value="jobInfo.education"></dict-Label>
</view>
</view>
<view class="position-source">
<text>来源&nbsp;</text>
{{ jobInfo.dataSource }}
</view>
<text class="date">{{ jobInfo.postingDate || '发布日期' }}</text>
<view class="source">来源 智联招聘</view>
</view>
</view>
<view class="ai-explain" v-if="jobInfo.isExplain">
<view class="exbg">
<view class="explain-left btn-shaky">
<view class="leftText">AI+智能讲解，职位一听就懂</view>
<view class="leftdownText">懒得看文字？我用AI讲给你听</view>
</view>
<view class="explain-right button-click" @click="seeExplain">点击查看</view>
</view>
</view>
<view class="content-card">
<view class="card-title">
<text class="title">职位描述</text>
</view>
<view class="description" :style="{ whiteSpace: 'pre-wrap' }">
{{ jobInfo.description }}
</view>
</view>
<view class="content-card">
<view class="card-title">
<text class="title">公司信息</text>
<text
class="btntext button-click"
@click="navTo(`/packageA/pages/UnitDetails/UnitDetails?companyId=${jobInfo.company.companyId}`)"
>
单位详情
</text>
</view>
<view class="company-info">
<view class="companyinfo-left">
<image src="@/static/icon/companyIcon.png" mode=""></image>
</view>
<view class="companyinfo-right">
<view class="row1">{{ jobInfo.company?.name }}</view>
<view class="row2">
<dict-tree-Label
v-if="jobInfo.company?.industry"
dictType="industry"
:value="jobInfo.company?.industry"
></dict-tree-Label>
<span v-if="jobInfo.company?.industry">&nbsp;</span>
<dict-Label dictType="scale" :value="jobInfo.company?.scale"></dict-Label>
</view>
<view class="row2">
<text>在招</text>
<text style="color: #256bfa">{{ companyCount }}</text>
<text>个职位</text>
</view>
</view>
</view>
<view class="company-map" v-if="jobInfo.latitude && jobInfo.longitude">
<map
style="width: 100%; height: 100%"
:latitude="jobInfo.latitude"
:longitude="jobInfo.longitude"
:markers="mapCovers"
></map>
</view>
</view>
<view class="content-card">
<view class="card-title">
<text class="title">竞争力分析</text>
</view>
<view class="description">
三个月内共15位求职者申请，你的简历匹配度为{{ raderData.matchScore }}分，排名位于第{{
raderData.rank
}}位，超过{{ raderData.percentile }}%的竞争者，处在优秀位置。
</view>
<RadarMap :value="raderData"></RadarMap>
<view class="job-details">
<text class="details-title">职位详情</text>
<view class="tags">
<view class="tag"><dict-Label dictType="education" :value="jobInfo.education"></dict-Label></view>
<view class="tag"><dict-Label dictType="experience" :value="jobInfo.experience"></dict-Label></view>
</view>
<view class="description" :style="{ whiteSpace: 'pre-wrap' }">
{{ jobInfo.description }}
<view class="card-footer">
<view class="footer-title">你与职位的匹配度</view>
<view class="footer-content">
<view class="progress-container">
<view
v-for="(item, index) in matchingDegree"
:key="index"
class="progress-item"
:class="{
active: index < currentStep - 1,
half: index < currentStep && currentStep < index + 1, // 半条
}"
/>
</view>
</view>
<view class="progress-text">
<view class="text-rpx" v-for="(item, index) in matchingDegree" :key="index">{{ item }}</view>
</view>
</view>
</view>
<view style="height: 24px"></view>
</view>
<view
class="company-info"
@click="navTo(`/packageA/pages/UnitDetails/UnitDetails?companyId=${jobInfo.company.companyId}`)"
>
<view class="company-name">{{ jobInfo.company?.name }}</view>
<view class="company-details">
<dict-tree-Label
v-if="jobInfo.company?.industry"
dictType="industry"
:value="jobInfo.company?.industry"
></dict-tree-Label>
<span v-if="jobInfo.company?.industry">&nbsp;</span>
<dict-Label dictType="scale" :value="jobInfo.company?.scale"></dict-Label>
单位详情
<template #footer>
<view class="footer">
<view class="btn-wq button-click" @click="jobApply">立即前往</view>
</view>
<view class="company-map" v-if="jobInfo.latitude && jobInfo.longitude">
<map
style="width: 100%; height: 100%"
:latitude="jobInfo.latitude"
:longitude="jobInfo.longitude"
:markers="mapCovers"
></map>
</view>
</view>
<view class="footer">
<!-- <button class="apply-btn" v-if="!jobInfo.isApply" @click="jobApply">立即申请</button> -->
<button class="apply-btn" @click="jobApply">立即申请</button>
<!-- <button class="apply-btn btned" v-else>已申请</button> -->
<view class="falls-card-matchingrate" @click="jobCollection">
<uni-icons v-if="!jobInfo.isCollection" type="star" size="40"></uni-icons>
<uni-icons v-else type="star-filled" color="#FFCB47" size="40"></uni-icons>
</view>
</view>
</view>
</template>
<VideoPlayer ref="videoPalyerRef" />
</AppLayout>
</template>
<script setup>
import point from '@/static/icon/point.png';
import VideoPlayer from './component/videoPlayer.vue';
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import dictLabel from '@/components/dict-Label/dict-Label.vue';
const { $api, navTo, getLenPx, parseQueryParams } = inject('globalFunction');
const { $api, navTo, getLenPx, parseQueryParams, navBack } = inject('globalFunction');
import RadarMap from './component/radarMap.vue';
const matchingDegree = ref(['一般', '良好', '优秀', '极好']);
const currentStep = ref(1);
const companyCount = ref(0);
const jobInfo = ref({});
const state = reactive({});
const mapCovers = ref([]);
const jobIdRef = ref();
const raderData = ref({});
const videoPalyerRef = ref(null);
const explainUrlRef = ref('');
onLoad((option) => {
if (option.jobId) {
@@ -94,13 +167,23 @@ function initLoad(option) {
if (jobId !== jobIdRef.value) {
jobIdRef.value = jobId;
getDetail(jobId);
getCompetivetuveness(jobId);
}
}
function seeExplain() {
if (jobInfo.value.explainUrl) {
videoPalyerRef.value?.open(jobInfo.value.explainUrl);
// console.log(jobInfo.value.explainUrl);
// explainUrlRef.value = jobInfo.value.explainUrl;
}
}
function getDetail(jobId) {
$api.createRequest(`/app/job/${jobId}`).then((resData) => {
const { latitude, longitude, companyName } = resData.data;
const { latitude, longitude, companyName, companyId } = resData.data;
jobInfo.value = resData.data;
getCompanyIsAJobs(companyId);
if (latitude && longitude) {
mapCovers.value = [
{
@@ -123,6 +206,12 @@ function getDetail(jobId) {
});
}
function getCompanyIsAJobs(companyId) {
$api.createRequest(`/app/company/count/${companyId}`).then((resData) => {
companyCount.value = resData.data;
});
}
function getTextWidth(text, size = 12) {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
@@ -130,6 +219,13 @@ function getTextWidth(text, size = 12) {
return -(context.measureText(text).width / 2) - 20; // 计算文字中心点
}
function getCompetivetuveness(jobId) {
$api.createRequest(`/app/job/competitiveness/${jobId}`, {}, 'GET').then((resData) => {
raderData.value = resData.data;
currentStep.value = resData.data.matchScore * 0.04;
});
}
// 申请岗位
function jobApply() {
const jobId = jobInfo.value.jobId;
@@ -164,105 +260,273 @@ function jobCollection() {
</script>
<style lang="stylus" scoped>
::v-deep .amap-logo {
opacity: 0 !important;
.btn {
display: flex;
justify-content: space-between;
align-items: center;
width: 60rpx;
height: 60rpx;
}
::v-deep .amap-copyright {
opacity: 0 !important;
image {
height: 100%;
width: 100%;
}
.container
display flex
flex-direction column
background-color #f8f8f8
.job-header
padding 20rpx 40rpx
background-color #ffffff
margin-bottom 10rpx
.job-title
font-size 55rpx
font-weight bold
color #333
margin-bottom 10rpx
.job-info
display flex
justify-content space-between
margin-bottom 10rpx
.salary
color #3b82f6
font-size 42rpx
font-weight bold
.views
font-size 24rpx
color #999
.location-info
font-size 24rpx
color #666
.location, .source, .date
margin-right 10rpx
margin-top: 20rpx
.source
margin-left: 30rpx;
.progress-container {
display: flex;
align-items: center;
gap: 8rpx; /* 间距 */
margin-top: 24rpx
.job-details
background-color #fff
padding 20rpx 40rpx
margin-bottom 10rpx
.details-title
font-size 41rpx
font-weight bold
margin-bottom 15rpx
.tags
display flex
gap 10rpx
margin 15rpx 0
.tag
background-color #3b82f6
color #fff
padding 5rpx 15rpx
border-radius 15rpx
font-size 22rpx
.description
font-size 24rpx
line-height 36rpx
color #333
.company-info
background-color #fff
padding 20rpx 40rpx
margin-bottom 300rpx
.company-name
font-size 28rpx
font-weight bold
margin-bottom 10rpx
.company-details
font-size 24rpx
color #666
.company-map
height: 340rpx
}
.progress-text{
margin-top: 8rpx
display: flex;
align-items: center;
gap: 8rpx; /* 间距 */
justify-content: space-around
width: 100%
background: #e8e8e8
margin-top: 10rpx
border-radius: 16rpx
overflow: hidden
font-weight: 400;
font-size: 20rpx;
color: #999999;
text-align: center;
}
.footer
position fixed
bottom calc(var(--status-bar-height) + var(--window-bottom))
left 0
width calc(100% - 40rpx)
padding 20rpx
background-color #fff
text-align center
display flex
align-items: center
.apply-btn
flex: 1
background-color #22c55e
color #fff
border-radius 30rpx
font-size 32rpx
margin-right: 30rpx
.btned
background-color #666666
.progress-item {
width: 25%;
height: 24rpx;
background-color: #eee;
border-radius: 24rpx;
overflow: hidden;
position: relative;
transition: background-color 0.3s;
}
/* 完整激活格子 */
.progress-item.active {
background: linear-gradient(to right, #256bfa, #8c68ff);
}
/* 当前进度进行中的格子 */
.progress-item.half::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%; /* 根据 currentStep 小数动态控制 */
// background: linear-gradient(to right, #256bfa, #8c68ff);
background: linear-gradient(to right, #256bfa 50%, #eaeaea 50%);
border-radius: 24rpx;
}
.card-footer{
.footer-title{
font-weight: 600;
font-size: 28rpx;
color: #000000;
}
.footer-content{
.content-line{
display: grid
grid-template-columns: repeat(4, 1fr)
background: linear-gradient( to left, #9E74FD 0%, #256BFA 100%);
border-radius: 10rpx
.line-pargrah{
height: 20rpx;
position: relative
}
.line-pargrah::after{
position: absolute;
content: '';
right: 10
top: 0
width: 6rpx
height: 20rpx
background: #FFFFFF
}
}
}
}
// ai
.ai-explain{
margin-top: 28rpx
background-color: #FFFFFF
border-radius: 20rpx 20rpx 20rpx 20rpx;
overflow: hidden
.exbg{
padding: 28rpx 40rpx;
display: flex
align-items: center
justify-content: space-between
background: url('@/static/icon/aibg.png') center center no-repeat;
background-size: 100% 100%
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.explain-left{
.leftText{
font-weight: 600;
font-size: 32rpx;
}
.leftdownText{
margin-top: 12rpx
font-weight: 400;
font-size: 28rpx;
color: #495265;
}
}
.explain-right{
width: 168rpx;
height: 72rpx;
border-radius: 40rpx 40rpx 40rpx 40rpx;
border: 2rpx solid #E7E9ED;
text-align: center;
line-height: 72rpx
font-weight: 400;
font-size: 28rpx;
color: #333333;
}
}
.content{
padding: 0 28rpx
height: 100%
.content-top{
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
border-radius: 20rpx 20rpx 20rpx 20rpx;
padding: 52rpx 32rpx 34rpx 32rpx
position: relative
overflow: hidden
.top-salary{
font-weight: 500;
font-size: 32rpx;
color: #4C6EFB;
}
.top-name{
font-weight: 600;
font-size: 36rpx;
color: #000000;
margin-top: 8rpx
}
.top-info{
margin-top: 22rpx
display: flex;
align-items: center
.info-img{
width: 40rpx;
height: 40rpx
}
.info-text{
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
margin-left: 10rpx
}
}
.position-source{
position: absolute
top: 0
right: 0
width: fit-content;
height: 76rpx;
padding: 0 24rpx
background: rgba(37,107,250,0.1);
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
text-align: center
line-height: 76rpx
font-weight: 400;
font-size: 28rpx;
color: #64779F;
border-bottom-left-radius: 20rpx
}
}
.content-card{
padding: 24rpx
margin-top: 28rpx
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
border-radius: 20rpx 20rpx 20rpx 20rpx;
.card-title{
font-weight: 600;
font-size: 32rpx;
color: #000000;
position: relative;
display: flex
justify-content: space-between
.title{
position: relative;
z-index: 2;
}
.btntext{
white-space: nowrap
font-weight: 400;
font-size: 28rpx;
color: #256BFA;
}
}
.card-title::before{
position: absolute
content: '';
left: -14rpx
bottom: 0
height: 16rpx;
width: 108rpx;
background: linear-gradient(to right, #CBDEFF, #FFFFFF);
border-radius: 8rpx;
z-index: 1;
}
.description{
margin-top: 30rpx
font-weight: 400;
font-size: 28rpx;
color: #495265;
}
.company-info{
padding-top: 30rpx
display: flex
flex-direction: row
flex-wrap: nowrap
.companyinfo-left{
width: 96rpx;
height: 96rpx;
margin-right: 24rpx
}
.companyinfo-right{
.row1{
font-weight: 500;
font-size: 32rpx;
color: #333333;
}
.row2{
font-weight: 400;
font-size: 28rpx;
color: #6C7282;
line-height: 45rpx;
}
}
}
.company-map{
margin-top: 28rpx
height: 416rpx;
border-radius: 20rpx 20rpx 20rpx 20rpx;
overflow: hidden
}
}
}
.footer{
background: #FFFFFF;
box-shadow: 0rpx -4rpx 24rpx 0rpx rgba(11,44,112,0.12);
border-radius: 0rpx 0rpx 0rpx 0rpx;
padding: 40rpx 28rpx 20rpx 28rpx
.btn-wq{
height: 90rpx;
background: #256BFA;
border-radius: 12rpx 12rpx 12rpx 12rpx;
font-weight: 500;
font-size: 32rpx;
color: #FFFFFF;
text-align: center;
line-height: 90rpx
}
}
</style>

161
packageA/pages/reservation/component/countdown.vue Normal file
View File

@@ -0,0 +1,161 @@
<template>
<div class="countdown-wrapper" style="width: 100%">
<template v-if="isNotStarted">
<view class="fl_box fl_nowarp fl_justbet" style="width: 100%">
<view class="fl_box">
<span class="colon">距离开始还剩</span>
<div class="time-block">{{ days }}</div>
<span class="colon">天</span>
</view>
<view style="color: #ff881a">待开始</view>
</view>
</template>
<template v-else-if="isEnd">
<view class="fl_box fl_nowarp fl_justbet" style="width: 100%">
<view class="fl_box">
<span class="colon hui">距离结束还剩</span>
<div class="time-block huibg">00</div>
<span class="colon hui">:</span>
<div class="time-block huibg">00</div>
<span class="colon hui">:</span>
<div class="time-block huibg">00</div>
</view>
<view class="hui">已结束</view>
</view>
</template>
<template v-else>
<template v-if="showDays">
<view class="fl_box fl_nowarp fl_justbet" style="width: 100%">
<view class="fl_box">
<span class="colon">距离结束还剩</span>
<div class="time-block">{{ days }}</div>
<span class="colon">天</span>
</view>
<view style="color: #18a14f">进行中</view>
</view>
</template>
<template v-else>
<view class="fl_box fl_nowarp fl_justbet" style="width: 100%">
<view class="fl_box">
<span class="colon">距离结束还剩</span>
<div class="time-block">{{ hours }}</div>
<span class="colon">:</span>
<div class="time-block">{{ minutes }}</div>
<span class="colon">:</span>
<div class="time-block">{{ seconds }}</div>
</view>
<view style="color: #18a14f">进行中</view>
</view>
</template>
</template>
</div>
</template>
<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
const props = defineProps({
startTime: { type: [String, Number, Date], required: true },
endTime: { type: [String, Number, Date], required: true },
interval: { type: Number, default: 1000 },
});
const now = ref(Date.now());
let timer = null;
const startTimestamp = computed(() => new Date(props.startTime).getTime());
const endTimestamp = computed(() => new Date(props.endTime).getTime());
const isEnd = computed(() => now.value >= endTimestamp.value);
const isNotStarted = computed(() => now.value < startTimestamp.value);
const targetTimestamp = computed(() => {
if (isNotStarted.value) return startTimestamp.value;
if (!isEnd.value) return endTimestamp.value;
return now.value;
});
const remainingMs = computed(() => Math.max(0, targetTimestamp.value - now.value));
const secondsTotal = computed(() => Math.floor(remainingMs.value / 1000));
const showDays = computed(() => secondsTotal.value >= 86400);
const days = computed(() => Math.ceil(secondsTotal.value / 86400));
const hours = computed(() => {
const h = Math.floor(secondsTotal.value / 3600) % 24;
return h.toString().padStart(2, '0');
});
const minutes = computed(() => {
const m = Math.floor((secondsTotal.value % 3600) / 60);
return m.toString().padStart(2, '0');
});
const seconds = computed(() => {
const s = secondsTotal.value % 60;
return s.toString().padStart(2, '0');
});
const startTimer = () => {
timer = setInterval(() => {
now.value = Date.now();
}, props.interval);
};
const stopTimer = () => {
if (timer) {
clearInterval(timer);
timer = null;
}
};
onMounted(() => {
startTimer();
});
onUnmounted(() => {
stopTimer();
});
</script>
<style scoped>
.countdown-wrapper {
display: flex;
align-items: center;
}
.time-block {
text-align: center;
font-weight: 500;
font-size: 28rpx;
color: #ffffff;
height: 44rpx;
line-height: 44rpx;
padding: 0 14rpx;
background: #256bfa;
border-radius: 8rpx 8rpx 8rpx 8rpx;
margin: 0 10rpx;
}
.colon {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #256bfa;
}
.day-text {
font-size: 18px;
color: #333;
}
.hui {
color: #b6b6b6;
}
.huibg {
background-color: #b6b6b6;
}
.lan {
color: #256bfa;
}
</style>

193
packageA/pages/reservation/reservation.vue Normal file
View File

@@ -0,0 +1,193 @@
<template>
<view class="reser-content">
<view class="content-top">
<view
class="top-item"
:class="{ active: ranItem.value === item.value }"
v-for="(item, index) in ranOptions"
:key="index"
@click="chnageRanOption(item)"
>
{{ item.label }}
</view>
</view>
<view class="main">
<scroll-view scroll-y>
<view v-if="pageState.list.length">
<view class="card" v-for="(item, index) in pageState.list" :key="index">
<view @click="navTo('/packageA/pages/exhibitors/exhibitors?jobFairId=' + item.jobFairId)">
<view class="card-row">
<Countdown startTime="item.startTime" :endTime="item.endTime" />
</view>
<view class="card-Title">{{ item.name }}</view>
<view class="card-row">
<view class="rowleft">{{ item.location }}</view>
<view class="rowright">
<convert-distance
:alat="item.latitude"
:along="item.longitude"
:blat="latitudeVal"
:blong="longitudeVal"
></convert-distance>
</view>
</view>
</view>
<view class="footer" v-if="isTimePassed(item.startTime)">
<view class="card_cancel" @click="updateCancel(item)">取消预约</view>
</view>
</view>
</view>
<empty v-else pdTop="200"></empty>
</scroll-view>
</view>
</view>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted, onBeforeUnmount } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, navTo, debounce, customSystem } = inject('globalFunction');
import Countdown from './component/countdown.vue';
import { storeToRefs } from 'pinia';
import useLocationStore from '@/stores/useLocationStore';
import useUserStore from '@/stores/useUserStore';
const { userInfo } = storeToRefs(useUserStore());
const { longitudeVal, latitudeVal } = storeToRefs(useLocationStore());
const pageState = reactive({
page: 0,
list: [],
total: 0,
maxPage: 1,
pageSize: 10,
search: {},
lastDate: '',
});
const ranItem = ref({});
const ranOptions = ref([
{ label: '全部', value: 0 },
{ label: '待开始', value: 1 },
{ label: '进行中', value: 2 },
{ label: '已结束', value: 3 },
]);
function isTimePassed(timeStr) {
const targetTime = new Date(timeStr.replace(/-/g, '/')).getTime(); // 兼容格式
const now = Date.now();
return now < targetTime;
}
onLoad(() => {
ranItem.value = ranOptions.value[0];
getList();
});
function chnageRanOption(item) {
ranItem.value = item;
getList();
}
function updateCancel(item) {
const fairId = item.jobFairId;
$api.createRequest(`/app/fair/collection/${fairId}`, {}, 'DELETE').then((resData) => {
getList('refresh');
$api.msg('取消预约成功');
});
}
function getList(type = 'add', loading = true) {
if (type === 'refresh') {
pageState.page = 0;
pageState.maxPage = 1;
}
if (type === 'add' && pageState.page < pageState.maxPage) {
pageState.page += 1;
}
let params = {
current: pageState.page,
pageSize: pageState.pageSize,
type: ranItem.value.value,
};
$api.createRequest('/app/user/collection/fair', params).then((resData) => {
const { rows, total } = resData;
if (type === 'add') {
const str = pageState.pageSize * (pageState.page - 1);
const end = pageState.list.length;
const reslist = rows;
pageState.list.splice(str, end, ...reslist);
} else {
pageState.list = rows;
}
// pageState.list = resData.rows;
pageState.total = resData.total;
pageState.maxPage = Math.ceil(pageState.total / pageState.pageSize);
});
}
</script>
<style lang="stylus" scoped>
.reser-content{
width: 100%;
height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
display: flex;
flex-direction: column;
.content-top{
display: flex
padding: 28rpx
.top-item{
font-weight: 400;
font-size: 32rpx;
margin-right: 48rpx
color: #666D7F;
}
.active{
font-weight: 500;
font-size: 32rpx;
color: #000000;
}
}
.main{
flex: 1
overflow: hidden
background: #F4F4F4
padding: 28rpx
.card{
padding: 30rpx
background: #FFFFFF;
box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.04);
border-radius: 20rpx 20rpx 20rpx 20rpx;
color: #495264
margin-bottom: 28rpx
.card-row{
display: flex
justify-content: space-between
.rowleft{
display: flex
align-items: center
}
}
.card-Title{
font-weight: 500;
font-size: 32rpx;
line-height: 70rpx
color: #333333;
}
.footer{
display: flex
align-items: center
justify-content: flex-end
}
.card_cancel{
width: 228rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #E8EAEE;
margin-top: 32rpx
}
}
}
}
</style>

290
packageA/pages/selectDate/selectDate.vue Normal file
View File

@@ -0,0 +1,290 @@
<template>
<AppLayout title="选择日期" :use-scroll-view="false" back-gorund-color="#FAFAFA">
<template #headerleft>
<view class="btn">
<image src="@/static/icon/back.png" @click="navBack"></image>
</view>
</template>
<template #headerright>
<view class="btn mar_ri10 button-click" @click="backParams">确认</view>
</template>
<view class="content">
<view class="top-date">
<view
class="weekText"
:class="{ color_256BFA: item === '日' || item === '六' }"
v-for="(item, index) in weekMap"
:key="index"
>
{{ item }}
</view>
</view>
<scroll-view scroll-y class="main-scroll" @scrolltolower="onScrollBottom">
<view class="date-list" v-for="(vItem, vIndex) in calendarData" :key="vIndex">
<view class="list-title">{{ vItem.title }}</view>
<view class="list-item">
<view
class="item button-click"
:class="{
noOptional: !item.isThisMonth,
active: current.date === item.date && item.isThisMonth,
}"
v-for="(item, index) in vItem.list"
:key="index"
@click="selectDay(item)"
>
<view class="item-top">{{ item.day }}</view>
<view class="item-nong">{{ item.nl }}</view>
</view>
</view>
</view>
</scroll-view>
</view>
</AppLayout>
</template>
<script setup>
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
const { $api, navTo, navBack } = inject('globalFunction');
const weekMap = ['日', '一', '二', '三', '四', '五', '六'];
const calendarData = ref([]);
const current = ref({});
import { Solar, Lunar } from '@/lib/lunar-javascript@1.7.2.js';
const pages = reactive({
year: 0,
month: 0,
});
onLoad((options) => {
if (options.date) {
current.value = {
date: options?.date || null,
};
}
console.log(options);
initPagesDate();
addMonth();
addMonth();
addMonth();
});
function backParams() {
console.log(isValidDateString(current.value.date));
if (isValidDateString(current.value.date)) {
navBack({
data: current.value,
});
} else {
$api.msg('请选择日期');
}
}
function isValidDateString(dateStr) {
const regex = /^\d{4}-\d{2}-\d{2}$/;
if (!regex.test(dateStr)) return false;
const date = new Date(dateStr);
if (isNaN(date.getTime())) return false;
// 检查日期部分是否一致（防止 "2020-02-31" 这种被 Date 自动修正）
const [year, month, day] = dateStr.split('-').map(Number);
return date.getFullYear() === year && date.getMonth() + 1 === month && date.getDate() === day;
}
function onScrollBottom() {
addMonth();
}
function selectDay(item) {
current.value = item;
}
function initPagesDate() {
const d = new Date();
pages.year = d.getFullYear();
pages.month = d.getMonth();
}
function addMonth() {
if (pages.month >= 12) {
pages.year += 1;
pages.month = 1;
} else {
pages.month += 1;
}
const month = getMonthCalendarData(pages);
calendarData.value.push(month);
}
/**
*
* @param {Array<string>} selectedDates - 选中的日期数组 ['2025-04-21', ...]
* @returns {Array<Object>} 六个月日历数据
*/
function getMonthCalendarData({ year, month, selectableDates = [] }) {
const todayStr = new Date().toISOString().split('T')[0];
const isSelected = (y, m, d) =>
selectableDates.includes(`${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`);
const list = [];
const firstDay = new Date(year, month - 1, 1);
const firstWeekday = firstDay.getDay(); // 0 是周日
const lastDate = new Date(year, month, 0).getDate();
// 补全前一月天数（上月最后几天）
if (firstWeekday !== 0) {
const prevLastDate = new Date(year, month - 1, 0).getDate();
for (let i = firstWeekday - 1; i >= 0; i--) {
const d = prevLastDate - i;
const prevMonth = month - 1 <= 0 ? 12 : month - 1;
const prevYear = month - 1 <= 0 ? year - 1 : year;
const solar = Solar.fromYmd(prevYear, prevMonth, d);
const lunar = Lunar.fromSolar(solar);
const dateStr = `${prevYear}-${String(prevMonth).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
list.push({
day: d,
nl: lunar.getDayInChinese(),
isThisMonth: false,
isToday: dateStr === todayStr,
isSelectable: isSelected(prevYear, prevMonth, d),
week: weekMap[new Date(prevYear, prevMonth - 1, d).getDay()],
date: dateStr,
});
}
}
// 当前月天数
for (let d = 1; d <= lastDate; d++) {
const solar = Solar.fromYmd(year, month, d);
const lunar = Lunar.fromSolar(solar);
const dateStr = `${year}-${String(month).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
list.push({
day: d,
nl: lunar.getDayInChinese(),
isThisMonth: true,
isToday: dateStr === todayStr,
isSelectable: isSelected(year, month, d),
week: weekMap[new Date(year, month - 1, d).getDay()],
date: dateStr,
});
}
// 补全下个月天数（让最后一行完整 7 个）
const remaining = 7 - (list.length % 7);
if (remaining < 7) {
for (let d = 1; d <= remaining; d++) {
const nextMonth = month + 1 > 12 ? 1 : month + 1;
const nextYear = month + 1 > 12 ? year + 1 : year;
const solar = Solar.fromYmd(nextYear, nextMonth, d);
const lunar = Lunar.fromSolar(solar);
const dateStr = `${nextYear}-${String(nextMonth).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
list.push({
day: d,
nl: lunar.getDayInChinese(),
isThisMonth: false,
isToday: dateStr === todayStr,
isSelectable: isSelected(nextYear, nextMonth, d),
week: weekMap[new Date(nextYear, nextMonth - 1, d).getDay()],
date: dateStr,
});
}
}
return {
title: `${year}年${month}月`,
list,
};
}
</script>
<style lang="stylus" scoped>
.btn {
display: flex;
justify-content: space-between;
align-items: center;
white-space: nowrap
width: 60rpx;
height: 60rpx;
image {
height: 100%;
width: 100%;
}
}
.content{
height: 100%
display: flex
flex-direction: column
border-radius: 40rpx 40rpx 0 0
background: #FFFFFF;
overflow: hidden
margin-top: 20rpx
.top-date{
display: flex
justify-content: space-between
padding: 28rpx
.weekText{
text-align: center
width: 99rpx;
}
}
.main-scroll{
flex: 1
overflow: hidden
}
.date-list{
.list-title{
height: 84rpx;
line-height: 84rpx
background: #FAFAFA;
font-weight: 600;
font-size: 32rpx;
color: #1A1A1A;
padding: 0 28rpx;
box-sizing: border-box
}
.list-item{
padding: 16rpx 28rpx 20rpx 28rpx;
display: grid
grid-template-columns: repeat(7, 1fr)
grid-gap: 0rpx
.item{
display: flex
flex-direction: column
align-items: center
justify-content: center
border-radius: 20rpx 20rpx 20rpx 20rpx;
padding: 16rpx 0
margin-bottom: 20rpx
.item-top{
font-weight: 600;
font-size: 32rpx;
}
.item-nong{
font-size: 16rpx;
color: #666666
margin-top: 2rpx
}
}
.optional{
// height: 96rpx;
border: 2rpx solid #92B5FC;
}
.noOptional{
color: #B8B8B8;
}
.active{
background: linear-gradient( 225deg, #9E74FD 0%, #256BFA 100%);
color: #FFFFFF
.item-nong{
font-size: 16rpx;
color: #FFFFFF
margin-top: 2rpx
}
}
}
}
}
</style>