javascript
<template>
<view>
<scroll-view class="scrollBox" style="position:relative; background-color: burlywood;" @touchmove.stop.prevent="">
<view class="box">
<view v-for="item in 500" :key="item">{{ 'box' + item }}</view>
</view>
</scroll-view>
<uni-popup ref="popup" background-color="#fff" :mask-click="false" >
<view style="width: 86vw;">
<view>popupTitle</view>
<view style="height: 1px; margin: 0 20rpx; background-color: #dedede;"></view>
<scroll-view scroll-y="true" style="max-height: 50vh; width: auto; background-color: gainsboro;">
<view v-for="val in 200" :key="val">{{ 'ces' + val }}</view>
</scroll-view>
</view>
</uni-popup>
</view>
</template>
完整代码
javascript
<template>
<view>
<scroll-view class="scrollBox" style="position:relative;" @touchmove.stop.prevent="">
<view class="box">
<view v-if="loading" class="vertical80-center">{{ loadingText }}</view>
<view v-else>
<!-- 职位名称 + 薪资 -->
<view class="d-flex justify-space-between">
<h2 class="JobName ellipsis">
{{ info.name }}
</h2>
<span class="salary w-600">{{ info.payFrom }}-{{ info.payTo }}/{{ positionInfo.payName }}</span>
</view>
<!-- 职位地区 收藏职位 -->
<view class="d-flex justify-space-between mt-5">
<view class="bold" style="font-size: 14px;">
<span>
<span>{{positionInfo?.areaName }}</span>
<span class="viewider-mx">|</span>
<span>{{positionInfo?.eduName }}</span>
<span class="viewider-mx">|</span>
<span>{{positionInfo?.expName }}</span>
</span>
</view>
<!-- 收藏职位 -->
<view @click="handleCollection">
<uni-icons
:type="isCollection ? 'heart-filled' : 'heart'"
color="#fc6d5e"
class="mr"
size="25"
></uni-icons>
</view>
</view>
<!-- 标签 -->
<view class="tagList mt">
<view class="tag" v-for="(tag,i) in info?.tagList || []" :key="'tagList' + i">
{{ tag }}
</view>
</view>
<!-- 赏金 -->
<view class="topLine mt-5" style="display: flex; align-items: center;">
<uni-icons class="icon-a-1_zhaopin" custom-prefix="iconfont" color="#e03506"/>
<view class="hirePrice">{{ `赏金:${commissionCalculation(info.hirePrice, 1)}元` }}</view>
</view>
<!-- 岗位职责 -->
<view class="topLine fs14 mt-5">
<view class="fs15 w-600 my5">岗位职责</view>
<view v-if="!info.content">暂无</view>
<rich-text v-else class="htmlCss" :nodes="info.content"></rich-text>
</view>
<!-- 岗位要求 -->
<view class="topLine mt-5">
<view class="fs15 w-600 my5">岗位要求</view>
<view v-if="!info.requirement">暂无</view>
<rich-text v-else class="htmlCss" :nodes="info.requirement"></rich-text>
</view>
<!-- 企业信息 -->
<view class="topLine mt-5 d-flex">
<view class="avatarBox">
<image class="avatar" :src="info.contact?.avatar || 'https://minio.citupro.com/dev/menduner/7.png'"></image>
</view>
<view >
<view class="contact-name">{{ info.contact?.name }}</view>
<view class="contact-info">{{ info.enterprise?.name }} · {{ info.contact?.postNameCn }}</view>
</view>
</view>
<!-- 工作地址 -->
<view class="topLine mt-5">
<view class="fs15 w-600 my5">工作地址</view>
<view class="my10">
<uni-icons
type="map-pin-ellipse"
color="#00897B"
class="mr"
size="25"
></uni-icons>
<span style="color: var(--color-666);font-size: 15px;line-height: 26px;">{{ info.address }}</span>
</view>
</view>
</view>
</view>
</scroll-view>
<!-- 分享 投递 -->
<view class="bottom-sticky" v-if="!loading && jobId">
<view style="display: flex;justify-content: space-evenly;align-items: center;width: 100%;margin: 20rpx 0;">
<view @click="null" style="display: flex;justify-content: center;flex-direction: column;align-items: center;">
<uni-icons type="redo-filled" size="24" color="#00897B"/>
<span style="color:#00897B;font-weight:bold;">分享</span>
</view>
<button v-if="delivery" :disabled="true" class="buttons disable">我已投递</button>
<button v-else class="buttons" @click="handleDelivery">我要投递</button>
</view>
</view>
<!-- 选择简历 -->
<uni-popup ref="popup" background-color="#fff" :mask-click="false" >
<view class="dialogBox" style="width: 86vw;">
<view class="dialog-title">
<view class="title">选择简历</view>
<uni-icons type="close" color="grey" size="26" @click="popupClose" />
</view>
<view style="height: 1px; margin: 0 20rpx; background-color: #dedede;"></view>
<scroll-view class="dialog-content" scroll-y="true" style="max-height: 50vh; width: auto;">
<uni-card
v-for="(item, index) in resumeList"
:key="index"
shadow="0px 0px 3px 1px rgba(0,0,0,0.1)"
:is-shadow="true"
:border='false'
background-color="red"
:class="{'selected': selectIndex === index}"
@click="selectIndex = index"
>
<view class="d-flex align-center">
<view style="flex: 1;">
<view style="font-weight: bold;">
<uni-icons v-if="selectIndex === index" color="green" type="checkmarkempty" size="18"></uni-icons>
{{ item.title }}
</view>
<view>上传时间:{{ timesTampChange(item.createTime, 'Y-M-D') }}</view>
</view>
<view class="ss-m-l-30" style="width: 60rpx;">
<uni-icons @click="preview(item.url)" type="eye" size="24"></uni-icons>
</view>
</view>
</uni-card>
<view class="selectOnline" @click="handleUpload">选取微信聊天文件</view>
</scroll-view>
<view class="dialog-bottom" @click="deliverySubmit()">确认投递</view>
</view>
</uni-popup>
<!-- 上传简历 -->
<uni-popup ref="uploadPopup" type="dialog">
<uni-popup-dialog
type="warn"
cancelText="取消"
confirmText="确定"
title="系统提示"
content="您还未上传过简历,是否选取微信聊天文件投递?"
@confirm="handleUpload"
@close="uploadPopup.close()"
></uni-popup-dialog>
</uni-popup>
</view>
</template>
<script setup>
import { commissionCalculation } from '@/utils/position'
import { timesTampChange } from '@/utils/date'
import { preview } from '@/utils/preview'
import { uploadFileTest } from '@/api/file'
import { ref } from 'vue';
import {
jobCvRelSend,
getPositionDetails,
jobCvRelCheckSend,
getPersonJobUnfavorite, // 取消收藏
getPersonJobFavorite, // 收藏
getJobFavoriteCheck
} from '@/api/position'
import { getPersonResumeCv, saveResume } from '@/api/user'
import { dealDictObjData } from '@/utils/position'
import { getAccessToken } from '@/utils/request'
import { onLoad } from '@dcloudio/uni-app';
const loading = ref(false)
const loadingText = ref('加载中 . . . ')
// 职位详情
const info = ref({})
const positionInfo = ref({})
const getPositionDetail = async () => {
try {
loading.value = true
const { data } = await getPositionDetails({ id: jobId })
info.value = data
positionInfo.value = { ...dealDictObjData({}, info.value), ...info.value }
loading.value = false
console.log('positionInfo', positionInfo.value)
} finally {
}
}
let jobId = ''
onLoad((options) => {
jobId = options?.id || ''
if (jobId) {
loading.value = true
loadingText.value = '加载中 . . . '
deliveryCheck()
getCollectionStatus()
getPositionDetail()
} else {
loadingText.value = '加载失败 . . . '
}
})
// 效验是否有投递过简历
const delivery = ref(false) // 是否已投递简历
const deliveryCheck = async () => {
try {
if (!getAccessToken()) return delivery.value = false
const { data } = await jobCvRelCheckSend({ jobId })
delivery.value = Boolean(data)
} finally {
}
}
const popup = ref()
const uploadPopup = ref()
const resumeList = ref([])
const selectIndex = ref(null)
const handleDelivery = async () => {
// 未登录
if (!getAccessToken()) {
uni.showToast({ title: '您还未上传过简历,请先上传简历', icon: 'none', duration: 2000, })
return
}
// 已投递
if (delivery.value) {
uni.showToast({ title: '您已投递过该职位!', icon: 'none', duration: 2000, })
return
}
const { data } = await getPersonResumeCv()
resumeList.value = data
// 未上传简历
if (!resumeList.value?.length) return uploadPopup.value.open()
popup.value.open()
}
const deliverySubmit = async (uploadFile) => {
const resume = uploadFile ? uploadFile : resumeList.value[selectIndex.value]
if (!resume) {
selectIndex.value = null
uni.showToast({ title: '请选择简历', icon: 'none', duration: 2000, })
return
}
await jobCvRelSend({ jobId, title: resume.title, url: resume.url, type: info.value.hire ? 1 : 0 })
uni.showToast({ title: '投递成功', icon: 'none', duration: 2000, })
deliveryCheck()
popup.value.close()
}
const popupClose = () => {
selectIndex.value = null
popup.value.close()
}
// 效验求职者是否有收藏该职位
const isCollection = ref(false)
const getCollectionStatus = async () => {
if (!getAccessToken()) return isCollection.value = false
const { data } = await getJobFavoriteCheck({ jobId })
isCollection.value = Boolean(data)
}
// 操作 收藏&取消收藏职位
const handleCollection = async () => {
const api = isCollection.value ? getPersonJobUnfavorite : getPersonJobFavorite
await api(isCollection.value ? jobId : { jobId })
await getCollectionStatus()
}
// 选取微信聊天文件
// 上传附件
const handleUpload = () => {
wx.chooseMessageFile({
count: 1,
type: 'file',
success (res) {
const title = res.tempFiles[0].name
const path = res.tempFiles[0].path
//效验是否为支持的文件格式
if(/\.(pdf|docx|doc)$/.test(title)){
uploadFileTest(path).then(async (res) => {
if (!res.data) {
uni.showToast({
title: '上传失败',
icon: 'none'
})
return
}
await saveResume({ title, url: res.data })
uni.showToast({
title: '上传成功',
icon: 'success'
})
deliverySubmit({ title, url: res.data })
})
}else{
uni.showToast({
icon: 'none',
title: '请上传pdf、word类型的文件',
duration: 2000
})
return
}
}
})
}
</script>
<style scoped lang="scss">
.mb5 { margin-bottom: 5px; }
.my5 { margin: 5px 0; }
.my10 { margin: 10px 0; }
.mt10 { margin-top: 10px; }
.fs14 { font-size: 14px; }
.fs15 { font-size: 15px; }
.box {
padding: 10px 30rpx 100px;
}
.JobName {
color: #37576c;
font-size: 24px;
margin-right: 30px;
margin-top: 1px;
vertical-align: middle;
flex: 1;
}
.tagList {
width: 100%;
display: flex;
flex-wrap: wrap;
.tagListItem {
margin: 10rpx 10rpx 10rpx 0;
}
}
.topLine {
border-top: 1px solid #EDEDED;
// border-bottom: 1px solid #EDEDED;
padding-top: 10px;
}
.tag {
padding: 5px 10px;
background-color: #e2f0ef;
color: #00897B;
border-radius: 5px;
font-size: 14px;
margin-right: 8px;
margin-top: 4px;
}
.hirePrice {
padding: 5px 10px;
background-color: #fc6d5e63;
color: #ff250e;
border-radius: 5px;
font-size: 14px;
margin-left: 8px;
margin-top: 4px;
}
.htmlCss {
white-space: pre-wrap;
word-break: break-all;
line-height: 28px;
color: var(--color-333);
font-size: 15px;
text-align: justify;
letter-spacing: 0;
}
//底部按钮公用定位
.bottom-sticky{
display: flex;
width:100vw;
position: fixed;
bottom:0;
left: 0;
background-image:linear-gradient(rgba(255,255,255,1),white);
}
.buttons{
width: 60vw;
height: 44px;
border-radius: 25px;
margin: 0;
color: #fff !important;
background-color: #00897b !important;
}
.disable { background-color: #00897bbe !important; color: #ffffffec !important;}
.noMore{
margin: 20px 0;
}
.date-time{
color:#d9d0d2;
float: right;
}
.viewided-line {
width: 100%;
height: 1px;
background-color: #f0f2f7;
margin: 20px 0;
}
.avatarBox{
max-width: 40px;
max-height: 40px;
margin: 0 10px;
}
.avatar{
width: 40px;
height: 40px;
}
.sub-li-bottom {
display: flex;
justify-content:space-between;
align-items: center;
background: linear-gradient(90deg, #f5fcfc 0, #fcfbfa 100%);
font-size: 13px;
padding: 5px 30rpx;
}
.salary {
// color: #ff770d;
float: right;
}
.list-shape {
padding: 10px 30rpx 10px;
margin-top: 10px;
background-color: #fff;
.titleBox {
display: flex;
align-items: center;
justify-content: space-between;
}
}
.viewider-mx{
margin: 0 10rpx;
}
.viewider {
color:#e4d4d2;
}
//公司名称
.cer-end{
position: absolute;
top: 85%;
right: 16%;
}
.cer-text{
text-decoration: underline;
margin: 0 5rpx;
}
//一行展示不全...
.dis{
display: flex;
align-items: center;
}
.showPopup-more{
width: 26vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 列表触底暂无更多 */
.noMore{ text-align:center; color:grey; }
.mt { margin-top: 10rpx; }
.mb { margin-bottom: 10rpx; }
.ml { margin-left: 20rpx; }
.mr { margin-right: 20rpx; }
.mr-10{ margin-right: 10rpx; }
.my-5{ margin: 5px 0; }
// 选择简历
.dialogBox {
.dialog-title {
display: flex;
justify-content: space-between;
align-items: center;
color:#767a82;
padding: 20rpx;
.title {
font-weight: bold;
margin-left: 10rpx;
}
}
.dialog-content{
padding: 20rpx;
padding-bottom: 50rpx;
.selected {
background-color: #00897b !important;
}
}
.selectOnline {
font-size: 14px;
color: #00897b;
text-align: center;
margin-top: 10rpx;
}
.dialog-bottom{
width: 100%;
height: 44px;
line-height: 44px;
text-align: center;
color: #fff !important;
background-color: #00897b !important;
}
}
</style>