menduner-uniapp/pagesB/positionDetail/index.vue

<template>
  <scroll-view class="scrollBox" scroll-y="true" style="position:relative;">
    <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>
            <!-- <span style="color: #fc6d5e">{{ isCollection ? '取消收藏' : '收藏职位' }}</span> -->
          </view>
        </view>
        <!-- 标签 -->
        <view class="tagList mt">
          <!-- <view class="tagListItem" v-for="(tag,i) in info?.tagList || []" :key="'tagList' + i">
            <uni-tag 
              :text="tag"
              inverted="false"
              size="small"
              custom-style="background-color: #e2f0ef; color:#00897B; border-color:#e2f0ef;"
            />
          </view> -->
          <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;">
          <svg t="1719193613512" class="icon ml" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7666" width="40" height="40">
            <path d="M592.331776 439.619584l10.840064-30.636032 49.16224 17.398784-10.842112 30.633984-49.160192-17.396736z m96.054272-115.116032l-10.840064 30.635008-49.156096-17.39776 10.842112-30.635008 49.154048 17.39776z m296.593408 363.10528L451.8912 498.937856l-27.737088 78.367744 57.70752 20.424704-55.916544 90.039296 230.827008 81.692672c-9.371648 28.745728-21.200896 34.97984-47.558656 25.652224-27.072512-9.581568-81.678336-29.704192-116.795392-43.738112-2.545664 34.371584-6.008832 66.813952-11.152384 99.465216 45.597696 16.137216 100.243456 33.875968 127.8208 42.0352 69.653504 20.640768 105.135104 1.93024 132.8128-60.423168 15.962112-36.032512 30.455808-70.188032 43.681792-100.77696L565.44256 653.766656l14.022656-21.492736 369.80224 130.878464c-87.150592 150.434816-249.872384 251.63776-436.237312 251.63776-87.114752 0-169.064448-22.115328-240.54784-61.032448l86.624256-244.754432c14.751744 3.617792 29.504512 7.236608 43.544576 10.602496 8.411136-28.286976 20.257792-61.770752 33.829888-97.855488-15.0016-2.906112-29.044736-6.270976-43.082752-9.636864l125.060096-353.362944 24.221696 8.572928 32.776192-92.613632-275.70688-97.577984-32.779264 92.61568 27.072512 9.57952-133.13024 376.160256c-7.324672-1.603584-87.942144-16.722944-151.430144-28.83072A511.248384 511.248384 0 0 1 9.216 510.977024C9.216 232.728576 234.78272 7.161856 513.030144 7.161856c95.85664 0 185.460736 26.7776 261.745664 73.250816l-58.9056 166.436864-135.359488-47.906816-100.349952 283.546624L843.498496 611.08224l100.350976-283.547648-136.786944-48.410624 48.638976-137.43104c99.104768 92.005376 161.142784 223.39072 161.142784 369.28512 0 62.150656-11.28448 121.66144-31.864832 176.630784zM732.680192 489.288704l10.84416-30.63296 49.156096 17.400832-10.842112 30.629888-49.158144-17.39776z m96.057344-115.11296l-10.845184 30.635008-49.155072-17.400832 10.840064-30.633984 49.160192 17.399808z m-575.744 204.278784l25.213952-71.240704 48.444416 17.144832-23.701504 66.967552c-16.89088-4.37248-33.068032-8.49408-49.956864-12.87168z m178.547712-350.462976l-23.954432 67.678208L359.1424 278.528l23.955456-67.680256 48.443392 17.143808zM306.69824 426.71104l23.953408-67.683328 48.44544 17.145856-23.952384 67.68128-48.446464-17.143808zM193.521664 900.518912c-80.457728-66.070528-140.06272-156.583936-167.51104-260.184064 92.57472 17.773568 208.65024 39.995392 242.648064 47.880192l-75.137024 212.303872z" fill="#FE6E5A" p-id="7667"></path>
          </svg>
          <view class="hirePrice">{{ `赏金：${commissionCalculation(2000, 1)}元` }}</view>
        </view>
        <!-- 岗位职责 +  -->
        <view class="topLine fs14 mt-5">
          <view class="fs15 w-600 my5">岗位职责</view>
          <view v-if="info.content" class="requirement fs14" v-html="info.content?.replace(/\n/g, '</br>')"></view>
          <view v-else>暂无</view>
        </view>
        <view class="topLine mt-5">
          <view class="fs15 w-600 my5">岗位要求</view>
          <view v-if="info.requirement" class="requirement fs14" v-html="info.requirement?.replace(/\n/g, '</br>')"></view>
          <view v-else>暂无</view>
        </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">
    <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="alreadySendBtn" type="primary" size="default" class="buttons" style="background-color:grey;">已投简历</button>
      <button v-else type="primary" size="default" class="buttons" @click="null">投个简历</button>
    </view>
  </view>
</template>
<script setup>
import { commissionCalculation } from '@/utils/position'
// import loginPage from '@/views/common/loginDialog.vue'
// import simplePage from './sendResume/simple.vue'
// import selectPage from './sendResume/select.vue'
import { reactive, ref } from 'vue';
import {
  getPositionDetails,
  // jobCvRelCheckSend,
  // getPersonJobUnfavorite,
  // getPersonJobFavorite,
  // getJobFavoriteCheck
} from '@/api/position'
import { dealDictObjData } from '@/utils/position'
// import { getToken } from '@/utils/auth'
// import Snackbar from '@/plugins/snackbar'
import { onLoad } from '@dcloudio/uni-app';

const loading = ref(false)
const loadingText = ref('加载中 . . . ')


// 职位详情
const info = ref({})
const positionInfo = ref({})
const getPositionDetail = async () => {
  const { data } = await getPositionDetails({ id: jobId })
  info.value = data
  positionInfo.value = { ...dealDictObjData({}, info.value), ...info.value }
  loading.value = false
  console.log('positionInfo', positionInfo.value)
}

let jobId = ''
onLoad((options) => {
  jobId = options?.id || ''
  if (jobId) {
    loading.value = true
    loadingText.value = '加载中 . . . '
    getPositionDetail()
  } else {
    loadingText.value = '加载失败 . . . '
  }
})

const desc = [
  { mdi: 'mdi-map-marker-outline', value: 'areaName' },
  { mdi: 'mdi-school-outline', value: 'eduName' },
  { mdi: 'mdi-clock-time-ten-outline', value: 'expName' }
]


</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;
}

.requirement {
  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;
  background-color: var(--v-primary-base);
  margin: 0;
}

.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;
}
.show-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; }
</style>