flat: 暂存
This commit is contained in:
史典卓
@@ -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>来源 </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"> </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"> </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>
|
||||
|
||||
Reference in New Issue
Block a user