<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>
完整代码
<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-iconstype="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-cardv-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-dialogtype="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 = trueconst { data } = await getPositionDetails({ id: jobId })info.value = datapositionInfo.value = { ...dealDictObjData({}, info.value), ...info.value }loading.value = falseconsole.log('positionInfo', positionInfo.value)} finally {}
}let jobId = ''
onLoad((options) => {jobId = options?.id || ''if (jobId) {loading.value = trueloadingText.value = '加载中 . . . 'deliveryCheck()getCollectionStatus()getPositionDetail()} else {loadingText.value = '加载失败 . . . '}
})// 效验是否有投递过简历
const delivery = ref(false) // 是否已投递简历
const deliveryCheck = async () => {try {if (!getAccessToken()) return delivery.value = falseconst { 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 = nulluni.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 = nullpopup.value.close()
}// 效验求职者是否有收藏该职位
const isCollection = ref(false)
const getCollectionStatus = async () => {if (!getAccessToken()) return isCollection.value = falseconst { data } = await getJobFavoriteCheck({ jobId })isCollection.value = Boolean(data)
}// 操作 收藏&取消收藏职位
const handleCollection = async () => {const api = isCollection.value ? getPersonJobUnfavorite : getPersonJobFavoriteawait api(isCollection.value ? jobId : { jobId })await getCollectionStatus()
}// 选取微信聊天文件
// 上传附件
const handleUpload = () => {wx.chooseMessageFile({count: 1,type: 'file',success (res) {const title = res.tempFiles[0].nameconst 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>
