details.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
  1. <template>
  2. <div>
  3. <div class="default-width banner px-6">
  4. <div class="banner-title d-flex justify-space-between">
  5. <div class="d-flex align-center">
  6. <h1 class="ellipsis">{{ info.name }}</h1>
  7. <span class="salary">{{ info.payFrom }}-{{ info.payTo }}/{{ positionInfo.payName }}</span>
  8. <publicRecruitment v-if="info.hire" class="ml-5" width="50" height="50"></publicRecruitment>
  9. </div>
  10. <span class="refresh-time">{{ timesTampChange(info.updateTime) }} {{ $t('common.refresh') }} <v-icon color="warning" size="20">mdi-alert-outline</v-icon></span>
  11. </div>
  12. <div class="banner-tags mt-4">
  13. <span v-for="k in desc" :key="k.mdi">
  14. <span v-if="positionInfo[k.value]" class="mr-10">
  15. <v-icon color="var(--color-666)" size="20">{{ k.mdi }}</v-icon>
  16. <span class="ml-1">{{ positionInfo[k.value] }}</span>
  17. </span>
  18. </span>
  19. </div>
  20. <div class="banner-tools my-4">
  21. <v-chip size="small" label v-for="(k, i) in info.tagList" :key="i" class="mr-1" color="primary">{{ k }}</v-chip>
  22. </div>
  23. <div class="d-flex justify-space-between mb-5">
  24. <div>
  25. <div>
  26. <v-chip v-if="info.hire && info.hirePrice && info.hirePrice > 0" label color="primary">赏金:{{ commissionCalculation(info.hirePrice, 1) }}元</v-chip>
  27. <v-chip v-if="info.hire && info.hirePoint && info.hirePoint > 0" label color="primary" class="ml-1">积分:{{ commissionCalculation(info.hirePoint, 1) }}点</v-chip>
  28. </div>
  29. <div v-if="info?.hire" class="font-size-14 mt-3 color-error">推荐好友入职成功即可获得赏金</div>
  30. </div>
  31. <div class="banner-tools-btns">
  32. <v-btn
  33. class="radius mr-2 button-item"
  34. variant="outlined"
  35. color="error"
  36. prepend-icon="mdi-share-outline"
  37. style="height: 36px;"
  38. v-if="info?.hire"
  39. @click="handleShare"
  40. >我要赏金</v-btn>
  41. <v-btn
  42. v-else
  43. class="radius mr-2 button-item"
  44. variant="outlined"
  45. color="error"
  46. prepend-icon="mdi-share-outline"
  47. style="height: 36px;"
  48. @click="handleShare"
  49. >{{ $t('position.rewardsShared') }}</v-btn>
  50. <v-btn
  51. class="button-item radius"
  52. color="warning"
  53. variant="outlined"
  54. :prepend-icon="isCollection ? 'mdi-heart' : 'mdi-heart-outline'"
  55. @click="handleCollection"
  56. >{{ isCollection ? $t('position.cancelFavorite') : $t('position.collection') }}</v-btn>
  57. <v-btn class="button-item mx-2 radius" color="success" variant="outlined" @click="toDetails(info)">{{ $t('position.communicate') }}</v-btn>
  58. <v-btn class="button-item radius" :disabled="delivery" color="primary" variant="outlined" @click="handleDelivery">{{ delivery ? $t('position.delivered') : $t('position.submitResume') }}</v-btn>
  59. </div>
  60. </div>
  61. <v-divider></v-divider>
  62. <div class="d-flex">
  63. <div class="content-left">
  64. <div v-if="Object.keys(info).length">
  65. <div>{{ $t('position.jobResponsibilities') }}:</div>
  66. <div class="requirement" v-html="info.content.replace(/\n/g, '</br>')"></div>
  67. <div class="mt-3">{{ $t('position.jobRequirements') }}:</div>
  68. <div class="requirement" v-html="info.requirement.replace(/\n/g, '</br>')"></div>
  69. </div>
  70. <v-divider class="my-3"></v-divider>
  71. <div class="contact" v-if="Object.keys(info).length">
  72. <div class="float-left d-flex align-center">
  73. <v-img :src="getUserAvatar(info.contact.avatar, info.contact.sex)" :width="45" style="height: 45px;"></v-img>
  74. <div class="ml-2">
  75. <div class="contact-name">{{ info.contact.name }}</div>
  76. <div class="contact-info">
  77. {{ info.enterprise.name }}
  78. <span v-if="info?.enterprise?.name && info?.contact?.postNameCn">·</span>
  79. {{ info.contact.postNameCn }}</div>
  80. </div>
  81. </div>
  82. </div>
  83. <v-divider class="my-3"></v-divider>
  84. <div>
  85. <h4>{{ $t('position.address') }}</h4>
  86. <div class="mt-1">
  87. <v-icon size="25" color="primary">mdi-map-marker</v-icon>
  88. <span style="color: var(--color-666);font-size: 15px;">{{ info.address }}</span>
  89. </div>
  90. </div>
  91. <div class="mt-3 text-center">
  92. <v-btn
  93. class="mr-2 radius button-item"
  94. color="success"
  95. variant="outlined"
  96. @click="toDetails(info)"
  97. >
  98. {{ $t('position.communicate') }}
  99. </v-btn>
  100. <v-btn class="radius button-item" :disabled="delivery" color="primary" @click="handleDelivery">{{ delivery ? $t('position.delivered') : $t('position.submitResume') }}</v-btn>
  101. </div>
  102. </div>
  103. <div class="content-right" v-if="Object.keys(info).length">
  104. <!-- 公司信息 -->
  105. <EnterpriseInfo :info="{ ...info, position: { ...positionInfo } }"></EnterpriseInfo>
  106. <!-- 相似职位 -->
  107. <similarPositions v-if="similarList.length" class="mt-3" :list="similarList" :info="info"></similarPositions>
  108. </div>
  109. </div>
  110. </div>
  111. <!-- 简历上传 -->
  112. <File ref="uploadFile" @success="handleUploadResume"></File>
  113. <!-- 选择简历 -->
  114. <selectResumeDialog v-model="showResume" :list="resumeList" @submit="handleSubmit" @close="handleClose"></selectResumeDialog>
  115. <!-- 复制分享链接 -->
  116. <Dialog
  117. :visible="shareDialog" :widthType="2" :footer="false" titleClass="text-h6"
  118. :title="$t('position.rewardsShared')"
  119. @close="shareDialog = false"
  120. >
  121. <div>
  122. <div class="pa-4" style="background-color: #f0f0f0; border-radius: 8px;">{{ shareUrlTxt }}</div>
  123. <v-btn v-if="!getToken()" class="mt-1" color="warning" variant="text">您还未登录,登录后分享可享受分享有礼活动!</v-btn>
  124. <v-btn class="mt-4 ml-3" color="success" @click="copyText">复制分享链接</v-btn>
  125. <v-btn class="mt-4 ml-3" color="primary" variant="outlined" @click="openShareLink">打开分享链接</v-btn>
  126. </div>
  127. <template #footer>
  128. <v-divider></v-divider>
  129. <div>
  130. <v-btn
  131. class="float-right ma-2"
  132. color="primary"
  133. variant="text"
  134. @click="shareDialog = false"
  135. >{{ $t('common.close') }}</v-btn>
  136. </div>
  137. </template>
  138. </Dialog>
  139. </div>
  140. </template>
  141. <script setup>
  142. import { commissionCalculation } from '@/utils/position'
  143. defineOptions({ name: 'position-details' })
  144. import { computed, ref } from 'vue'
  145. import { useRouter } from 'vue-router'
  146. import { timesTampChange } from '@/utils/date'
  147. import { getPersonResumeCv, savePersonResumeCv } from '@/api/recruit/personal/resume'
  148. import { useI18n } from '@/hooks/web/useI18n'
  149. import { getPositionDetails, getSimilarPosition, getJobFavoriteCheck, getPersonJobFavorite, getPersonJobUnfavorite, jobCvRelCheckSend, jobCvRelSend } from '@/api/position'
  150. import { dealDictObjData, dealDictArrayData } from '@/utils/position'
  151. import similarPositions from '@/components/Position/similarPositions.vue'
  152. import EnterpriseInfo from '@/components/Enterprise/info.vue'
  153. import Snackbar from '@/plugins/snackbar'
  154. import Dialog from '@/components/CtDialog'
  155. import selectResumeDialog from './jobDetails/selectResumeDialog'
  156. import { getToken } from '@/utils/auth'
  157. import { prologue, defaultText } from '@/hooks/web/useIM'
  158. import { getUserAvatar } from '@/utils/avatar'
  159. const { t } = useI18n()
  160. const router = useRouter()
  161. const { id } = router.currentRoute.value.params
  162. const delivery = ref(false) // 是否已投递简历
  163. // 相似职位
  164. const similarList = ref([])
  165. const getSimilarPositionList = async () => {
  166. if (!Object.keys(positionInfo).length) return
  167. const { list } = await getSimilarPosition({ pageNo: 1, pageSize: 4, positionId: positionInfo.value.positionId, expType: positionInfo.value.expType, eduType: positionInfo.value.eduType })
  168. const items = list.splice(0, 4)
  169. similarList.value = dealDictArrayData([], items)
  170. }
  171. // 职位详情
  172. const info = ref({})
  173. const positionInfo = ref({})
  174. const getPositionDetail = async () => {
  175. const data = await getPositionDetails({ id })
  176. info.value = data
  177. positionInfo.value = { ...dealDictObjData({}, info.value), ...info.value }
  178. getSimilarPositionList()
  179. }
  180. getPositionDetail()
  181. // 效验是否有投递过简历
  182. const deliveryCheck = async () => {
  183. const data = await jobCvRelCheckSend({ jobId: id })
  184. if (data) delivery.value = true
  185. }
  186. if (getToken()) deliveryCheck()
  187. const desc = [
  188. { mdi: 'mdi-map-marker-outline', value: 'areaName' },
  189. { mdi: 'mdi-school-outline', value: 'eduName' },
  190. { mdi: 'mdi-clock-time-ten-outline', value: 'expName' }
  191. ]
  192. // 效验求职者是否有收藏该职位
  193. const isCollection = ref(true)
  194. const getCollectionStatus = async () => {
  195. if (!getToken()) return isCollection.value = false
  196. const data = await getJobFavoriteCheck({ jobId: id })
  197. isCollection.value = data
  198. }
  199. getCollectionStatus()
  200. // 分享有礼
  201. const shareDialog = ref(false)
  202. const shareUrl = ref('')
  203. const userInfo = localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : {}
  204. const handleShare = async () => {
  205. // 分享链接携带参数: 用户id、职位id
  206. // if (!id || !userInfo.id) return
  207. shareUrl.value = '/shareJob?' + new URLSearchParams({
  208. jobId: id,
  209. sharedById: userInfo?.id,
  210. }).toString()
  211. shareDialog.value = true
  212. }
  213. const openShareLink = () => { window.open(shareUrl.value) }
  214. // 复制分享链接
  215. const shareUrlTxt = computed(() => {
  216. return 'http://menduner.citupro.com:7878' + shareUrl.value
  217. })
  218. const copyText = async () => {
  219. try {
  220. await navigator.clipboard.writeText(shareUrlTxt.value)
  221. Snackbar.success('复制成功')
  222. } catch (err) {
  223. Snackbar.error('复制失败,请手动复制。')
  224. }
  225. }
  226. // 收藏&取消收藏职位
  227. const handleCollection = async () => {
  228. const api = isCollection.value ? getPersonJobUnfavorite : getPersonJobFavorite
  229. await api(isCollection.value ? id : { jobId: id })
  230. await getCollectionStatus()
  231. }
  232. // 投递简历时,若当前用户没有简历列表则弹窗上传简历以及投递
  233. const uploadFile = ref()
  234. const handleUploadResume = async (url, title) => {
  235. if (!url || !title) return
  236. // 简历上传
  237. await savePersonResumeCv({ title, url })
  238. // 简历投递
  239. await jobCvRelSend({ jobId: id, title, url, type: info.value.hire ? 1 : 0 })
  240. setTimeout(() => {
  241. Snackbar.success(t('resume.deliverySuccess'))
  242. deliveryCheck()
  243. }, 3000)
  244. }
  245. const showResume = ref(false)
  246. // 效验是否有投递简历
  247. const resumeList = ref([])
  248. const selectResume = ref()
  249. const handleDelivery = async () => {
  250. if (delivery.value) return Snackbar.warning(t('resume.alreadyResume'))
  251. const result = await getPersonResumeCv()
  252. resumeList.value = result
  253. // 没有上传过简历的先去上传
  254. if (!result.length) {
  255. Snackbar.warning('您还未上传过简历,请先上传简历')
  256. uploadFile.value.trigger()
  257. return
  258. }
  259. showResume.value = true
  260. }
  261. // 简历投递
  262. const handleClose = () => {
  263. showResume.value = false
  264. selectResume.value = null
  265. }
  266. const handleSubmit = async (val) =>{
  267. selectResume.value = val
  268. if (!selectResume.value) return Snackbar.warning(t('resume.selectResumeToSubmit'))
  269. const obj = resumeList.value.find(e => e.id === selectResume.value)
  270. if (!obj) return Snackbar.warning(t('resume.selectedResumeNotExist'))
  271. await jobCvRelSend({ jobId: id, title: obj.title, url: obj.url, type: info.value.hire ? 1 : 0 })
  272. setTimeout(() => {
  273. Snackbar.success(t('resume.deliverySuccess'))
  274. }, 3000)
  275. handleClose()
  276. deliveryCheck()
  277. }
  278. const toDetails = async (info) => {
  279. const userId = info.contact.userId
  280. const enterpriseId = info.contact.enterpriseId
  281. const textObj = {
  282. text: defaultText,
  283. positionInfo: positionInfo.value
  284. }
  285. await prologue({userId, enterpriseId, text: JSON.stringify(textObj)})
  286. let url = `/recruit/personal/message?id=${info.id}`
  287. if (info.contact.enterpriseId) {
  288. url += `&enterprise=${info.contact.enterpriseId}`
  289. }
  290. router.push(url)
  291. }
  292. </script>
  293. <style lang="scss" scoped>
  294. .banner {
  295. background-color: #fff;
  296. padding: 18px 0 20px;
  297. }
  298. .banner-title {
  299. line-height: 40px;
  300. font-size: 28px;
  301. font-weight: 600;
  302. }
  303. .banner-title h1 {
  304. display: inline-block;
  305. color: #37576c;
  306. font-size: 28px;
  307. margin-right: 30px;
  308. margin-top: 1px;
  309. max-width: 360px;
  310. vertical-align: middle;
  311. }
  312. .button-item {
  313. min-width: 110px;
  314. height: 36px
  315. }
  316. .salary {
  317. color: var(--v-error-base);
  318. line-height: 41px;
  319. font-weight: 600;
  320. height: auto;
  321. display: inline-block;
  322. vertical-align: sub;
  323. }
  324. .refresh-time {
  325. float: right;
  326. color: var(--color-666);
  327. font-size: 14px;
  328. line-height: 66px;
  329. vertical-align: sub;
  330. }
  331. .banner-tags span {
  332. font-weight: 600;
  333. }
  334. .radius {
  335. border-radius: 8px;
  336. }
  337. .content-left {
  338. width: 810px;
  339. padding: 20px 20px;
  340. }
  341. .content-right {
  342. flex: 1;
  343. padding: 20px 20px 20px 0;
  344. }
  345. .label-text {
  346. color: #7f7a7a;
  347. font-weight: 600;
  348. }
  349. .value-text {
  350. color: #000;
  351. font-weight: 400;
  352. }
  353. .requirement {
  354. white-space: pre-wrap;
  355. word-break: break-all;
  356. line-height: 28px;
  357. color: var(--color-333);
  358. font-size: 15px;
  359. text-align: justify;
  360. letter-spacing: 0;
  361. }
  362. .contact {
  363. height: 60px;
  364. line-height: 60px;
  365. }
  366. .contact-name {
  367. font-size: 20px;
  368. font-weight: 500;
  369. color: var(--color-222);
  370. line-height: 28px;
  371. }
  372. .contact-info {
  373. font-size: 15px;
  374. color: var(--color-666);
  375. line-height: 21px;
  376. margin-top: 8px;
  377. }
  378. </style>