index.vue 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. <template>
  2. <view class="ss-m-x-20">
  3. <!-- 岗位列表 -->
  4. <view v-if="list.length > 0" class="ss-p-b-30 ss-p-t-20">
  5. <view v-for="(item, index) in list" :key="index" class="mList default-border list-item-bgc" :class="{ 'disable': !jobFairId && item.job?.status === '1'}" @click="toDetail(item)">
  6. <!-- 职位信息 -->
  7. <view class="list-shape" :style="`border-radius: ${props.showEntInfo ? '12px 12px 0 0' : '12px'};`">
  8. <!-- 职位 -->
  9. <view class="titleBox ss-m-y-10">
  10. <view style="display: flex;align-items: center;">
  11. <view v-if="item.job?.hire" class="iconfont icon-a-1_zhaopin ss-m-r-10" style="color: #e03506; font-size: 25px;"></view>
  12. <image v-if="props.jobFairId" src="/static/svg/jobFair.svg" class=" ss-m-r-10" style="width: 20px; height: 20px;"></image>
  13. <rich-text v-if="item.job?.name?.indexOf('style') !== -1" class="job-name MiSans-Semibold default-text-color" :nodes="item.job.name"></rich-text>
  14. <view v-else class="job-name MiSans-Semibold default-text-color">{{ formatName(item.job?.name) }}</view>
  15. </view>
  16. </view>
  17. <!-- 薪酬、工作地、学历、工作经验 -->
  18. <view class="ellipsis" style="max-width: 100%; align-items: baseline;">
  19. <span class="ss-m-r-20">
  20. <span v-if="!item.job?.payFrom && !item.job?.payTo" class="salary-text MiSans-Bold">面议</span>
  21. <span v-else class="salary-text MiSans-Bold">{{ item.job?.payFrom }}-{{ item.job?.payTo }}{{ item.job?.payName ? '/' + item.job?.payName : '' }}</span>
  22. </span>
  23. <span class="desc-tag font-size-13">
  24. <span class="MiSans-Normal">{{item.job?.area?.str ?? '全国' }}</span>
  25. <span class="divider-mx" v-if="item.job?.eduName">|</span>
  26. <span class="MiSans-Normal">{{item.job?.eduName }}</span>
  27. <span class="divider-mx" v-if="item.job?.expName">|</span>
  28. <span class="MiSans-Normal">{{item.job?.expName }}</span>
  29. </span>
  30. </view>
  31. <!-- 岗位tag -->
  32. <view class="ss-m-t-15" v-if="showWelfareTag">
  33. <uni-tag
  34. v-for="(tag,i) in item.job?.tagList || []"
  35. :key="i"
  36. class="tag-gap MiSans-Normal"
  37. :text="tag"
  38. inverted="false"
  39. size="mini"
  40. custom-style="background-color: #ececec;color:#666;border-color:#ececec;display: inline-block;"
  41. />
  42. </view>
  43. <view style="text-align: end;" v-if="item.job?.hire">
  44. <uni-tag
  45. class="ss-m-l-10"
  46. v-if="item?.job?.hirePrice && item?.job?.hirePrice > 0"
  47. :text="`赏金:${commissionCalculation(item.job.hirePrice / 100, 1)}元`"
  48. inverted="false"
  49. size="default"
  50. custom-style="background-color: #e2f0ef; color:#666; border-color:#e2f0ef;"
  51. />
  52. </view>
  53. <view
  54. v-if="props.showUpdateTime"
  55. class="font-size-13 color-666 ss-m-t-20 MiSans-Normal d-flex align-center"
  56. >
  57. <image src="https://minio.menduner.com/dev/2b50f8ccb13045a58c69e96ae1f986234452825b8ae01aba8fa08cabbcf86cd8.png" class="ss-m-r-20" style="width: 15px; height: 15px;"></image>
  58. 更新时间:{{ timesTampChange(item?.job?.refreshTime || item.job?.updateTime, 'Y-M-D h:m') }}
  59. </view>
  60. </view>
  61. <!-- 企业信息 -->
  62. <view v-if="props.showEntInfo" class="sub-li-bottom" @tap="handleClickEnt(item)">
  63. <view class="avatarBox">
  64. <image class="enterAvatar ss-m-l-20 default-border default-radius" :src="item.enterprise?.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'"></image>
  65. </view>
  66. <view class="ss-m-l-35 MiSans-Normal" style="flex: 1; max-width: calc(100% - 40px);">
  67. <view class="default-text-color ellipsis" style="width: 98%;">{{ formatName(item.enterprise?.anotherName || item.enterprise.name) }}</view>
  68. <span class="color-666 ss-m-r-10 font-size-12">{{ item.enterprise?.industryName || '' }}</span>
  69. <span class="color-666 font-size-12">{{ item.enterprise?.scaleName || '' }}</span>
  70. </view>
  71. </view>
  72. </view>
  73. <view v-if="props.noMore" class="noMore">暂无更多数据</view>
  74. </view>
  75. <view v-else>
  76. <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image>
  77. <view style="color: gray; text-align: center;">暂无数据</view>
  78. </view>
  79. </view>
  80. </template>
  81. <script setup>
  82. import { commissionCalculation } from '@/utils/position'
  83. import { timesTampChange } from '@/utils/date'
  84. import { formatName } from '@/utils/getText'
  85. const emit = defineEmits(['entClick'])
  86. const props = defineProps({
  87. list: { type: Array, default: () => [] },
  88. jobFairId: { type: [String, Number], default: '' }, // 招聘会id
  89. showEntInfo: { type: Boolean, default: true },
  90. showUpdateTime: { type: Boolean, default: true },
  91. noMore: { type: Boolean, default: false },
  92. showWelfareTag: { type: Boolean, default: true }
  93. })
  94. //岗位详情
  95. const toDetail = (item) =>{
  96. if (!item?.job?.id) return
  97. let url = `/pagesB/positionDetail/index?id=${item.job.id}&area=${item.job.areaName}`
  98. if (props.jobFairId) url += `&jobFairId=${props.jobFairId}`
  99. uni.navigateTo({ url })
  100. }
  101. const handleClickEnt = (item) => {
  102. const info = {
  103. enterpriseId: item?.enterprise?.id || null,
  104. anotherName: item?.enterprise?.anotherName || null
  105. }
  106. emit('entClick', info)
  107. }
  108. </script>
  109. <style scoped lang="scss">
  110. .enterAvatar{
  111. width: 60rpx;
  112. height: 60rpx;
  113. margin: auto;
  114. }
  115. .job-name {
  116. max-width: 80vw;
  117. overflow: hidden;
  118. white-space: nowrap;
  119. text-overflow: ellipsis;
  120. font-weight: 600;
  121. font-size: 30rpx;
  122. }
  123. .sub-li-bottom {
  124. display: flex;
  125. align-items: center;
  126. font-size: 13px;
  127. padding: 10rpx 30rpx 0 30rpx;
  128. border-radius: 0 0 12px 12px;
  129. margin-bottom: 20rpx;
  130. .avatarBox {
  131. max-width: 40px;
  132. max-height: 40px;
  133. }
  134. }
  135. .salary-text {
  136. font-size: 24rpx;
  137. color: #00B760;
  138. font-style: normal;
  139. text-transform: none;
  140. }
  141. .list-shape {
  142. padding: 10px 30rpx 10px;
  143. border-radius: 12px 12px 0 0;
  144. .titleBox {
  145. display: flex;
  146. align-items: center;
  147. justify-content: space-between;
  148. }
  149. }
  150. .desc-tag {
  151. font-size: 24rpx;
  152. color: #666666;
  153. font-style: normal;
  154. text-transform: none;
  155. }
  156. .tag-gap{
  157. margin: 10rpx 10rpx 10rpx 0;
  158. }
  159. .divider-mx{
  160. margin: 0 10rpx;
  161. }
  162. .mList {
  163. margin-bottom: 20rpx;
  164. border-radius: 20rpx;
  165. box-shadow: 1px 2px 12px rgba(0, 0, 0, 0.17);
  166. }
  167. /* 列表触底暂无更多 */
  168. .noMore{ text-align:center; color:grey;margin: 20px 0; }
  169. .disable {
  170. position: relative;
  171. overflow: hidden;
  172. &::after {
  173. content: '已失效';
  174. position: absolute;
  175. display: flex;
  176. align-items: center;
  177. justify-content: center;
  178. font-size: 1.2em;
  179. font-weight: bold;
  180. color: #fc796f;
  181. top: 0;
  182. border-radius: 12px;
  183. left: 0;
  184. width: 100%;
  185. height: 100%;
  186. background-color: rgba(255, 255, 255, 0.75);
  187. }
  188. }
  189. </style>