|
@@ -1,12 +1,350 @@
|
|
|
<template>
|
|
|
- <view class="nodata-img-parent">
|
|
|
- <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image>
|
|
|
- </view>
|
|
|
+ <layout-page>
|
|
|
+ <scroll-view class="scrollBox" scroll-y="true" @scrolltolower="loadingMore" style="position:relative;">
|
|
|
+ <view class="content defaultBgc">
|
|
|
+ <view class="content-top">
|
|
|
+ <view class="content-top-title">
|
|
|
+ <view class="content-top-title-label">
|
|
|
+ <text class="content-top-title-label-l">猎聘</text>
|
|
|
+ <text class="content-top-title-label-s">全球海量岗位 | 推荐有赏</text>
|
|
|
+ </view>
|
|
|
+ <view class="content-top-title-local" @tap="handleMap">
|
|
|
+ <uni-icons type="icon-map" custom-prefix="iconfont" color="#999"/>
|
|
|
+ {{ useUserStore.isLogin ? localtion : null }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content-top-carousel">
|
|
|
+ <view class="content-top-carousel-box">
|
|
|
+ <SwiperAd :list="swiperAdList"></SwiperAd>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content-top-recommend">
|
|
|
+ <view class="content-top-recommend-box">
|
|
|
+ <resume-status>
|
|
|
+ <template #header>
|
|
|
+ <view class="content-top-recommend-box-title">
|
|
|
+ <text class="title">我的推荐</text>
|
|
|
+ <view class="route">
|
|
|
+ <text>推荐好友入职得赏金</text>
|
|
|
+ <uni-icons type="icon-right" custom-prefix="iconfont" color="#999"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </resume-status>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content-main">
|
|
|
+ <!-- <view class="content-main-filter">
|
|
|
+ <view class="content-main-filter-type">
|
|
|
+ <text
|
|
|
+ v-for="item in chooseItems"
|
|
|
+ :key="item"
|
|
|
+ class="content-main-filter-type-item"
|
|
|
+ :class="{ active: item === chooseItem}"
|
|
|
+ @tap="handleChoose(item)"
|
|
|
+ >{{ item}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="content-main-filter-filter">
|
|
|
+ <text>筛选</text>
|
|
|
+ <uni-icons type="icon-Filter" custom-prefix="iconfont" color="#999"/>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view> -->
|
|
|
+ <view class="content-main-list">
|
|
|
+ <PositionList class="pb-10" :list="items" :noMore="items.length === total"></PositionList>
|
|
|
+ <!-- template v-if="items.length === 0">
|
|
|
+ <view class="nodata-img-parent">
|
|
|
+ <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <view v-for="(item,index) in items" :key="item.id" class="content-main-list-box">
|
|
|
+ <view class="top">
|
|
|
+ <view class="title">{{ item.name }}</view>
|
|
|
+ <text class="remuneration">
|
|
|
+ {{ item.payFrom }}
|
|
|
+ {{ item.payTo ? ' - ' : ''}}
|
|
|
+ {{ item.payTo }}
|
|
|
+ {{ item.payName }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="main">
|
|
|
+ <view class="tag blue">
|
|
|
+ 赏
|
|
|
+ <uni-icons
|
|
|
+ type="icon-renminbi1688"
|
|
|
+ size="10"
|
|
|
+ custom-prefix="iconfont"
|
|
|
+ color="royalblue"
|
|
|
+ />
|
|
|
+ {{ item.hirePrice }}
|
|
|
+ </view>
|
|
|
+ <view v-for="tag in item.tagList" :key="tag + index" class="tag">
|
|
|
+ {{ tag }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <view class="origin">
|
|
|
+ <text>{{ item.anotherName }}</text>
|
|
|
+ <text class="interval">·</text>
|
|
|
+ <text>{{ item.areaName }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <template v-if="items.length === total">
|
|
|
+ <view class="noMore">
|
|
|
+ 没有更多了
|
|
|
+ </view>
|
|
|
+ </template> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" style="width: 100vw;height: 100vh;"></image> -->
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ </layout-page>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+import { ref, reactive } from 'vue'
|
|
|
+import SwiperAd from '@/components/SwiperAd'
|
|
|
+import { showAuthModal } from '@/hooks/useModal'
|
|
|
+import { swiperAdListTest } from '@/utils/testData'
|
|
|
+import { userStore } from '@/store/user'
|
|
|
+import layoutPage from '@/layout'
|
|
|
+import ResumeStatus from '@/components/ResumeStatus'
|
|
|
+import { getJobAdvertisedHire } from '@/api/position.js'
|
|
|
+import { getDict } from '@/hooks/useDictionaries.js'
|
|
|
+import { dealDictArrayData } from '@/utils/position.js'
|
|
|
+import PositionList from '@/components/PositionList'
|
|
|
+
|
|
|
+const swiperAdList = ref(swiperAdListTest)
|
|
|
+const useUserStore = userStore()
|
|
|
+const localtion = ref('全国')
|
|
|
+const chooseItem = ref('同城')
|
|
|
+const chooseItems = reactive(['同城','最新'])
|
|
|
+
|
|
|
+const items = reactive([])
|
|
|
+const unitDict = ref([])
|
|
|
+const areaDict = ref([])
|
|
|
+
|
|
|
+const pageInfo = ref({
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 10
|
|
|
+})
|
|
|
+
|
|
|
+const total = ref(0)
|
|
|
+
|
|
|
+// 选择地区
|
|
|
+const handleMap = () => {
|
|
|
+ // 检测是否登录
|
|
|
+ // 未登录
|
|
|
+ if (!useUserStore.isLogin) {
|
|
|
+ console.log(111)
|
|
|
+ showAuthModal()
|
|
|
+ return
|
|
|
+ }
|
|
|
+ // 已登录
|
|
|
+
|
|
|
+}
|
|
|
+// 切换同城、最新
|
|
|
+const handleChoose = (item) => {
|
|
|
+ chooseItem.value = item
|
|
|
+}
|
|
|
+
|
|
|
+const loadingMore = (e) => {
|
|
|
+ console.log(total.value, items.length)
|
|
|
+ if (total.value === items.length) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ pageInfo.value.pageNo++
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+async function getRatio () {}
|
|
|
+
|
|
|
+async function getDictionaries () {
|
|
|
+
|
|
|
+ const { data } = await getDict('menduner_pay_unit')
|
|
|
+ unitDict.value = data.data
|
|
|
+
|
|
|
+ const { data: _data } = await getDict('menduner_area_type')
|
|
|
+ areaDict.value = _data.data
|
|
|
+ getList()
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+async function getList () {
|
|
|
+ const { data } = await getJobAdvertisedHire({
|
|
|
+ ...pageInfo.value
|
|
|
+ })
|
|
|
+ if (!data.list) {
|
|
|
+ pageInfo.pageNo--
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const _items = dealDictArrayData([], data.list)
|
|
|
+ items.push(..._items.map(e => {
|
|
|
+ return {
|
|
|
+ job: e,
|
|
|
+ enterprise: {
|
|
|
+ welfareList: e.tagList,
|
|
|
+ logoUrl: e.logoUrl,
|
|
|
+ anotherName: e.anotherName,
|
|
|
+ industryName: e.industryName,
|
|
|
+ scaleName: e.scaleName
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }))
|
|
|
+ console.log(items)
|
|
|
+ total.value = +data.total
|
|
|
+}
|
|
|
+
|
|
|
+getDictionaries()
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-
|
|
|
+$defaultColor: #999;
|
|
|
+@mixin box {
|
|
|
+ border-radius: 24rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: #FFF;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.content {
|
|
|
+ &-top {
|
|
|
+ &-title {
|
|
|
+ padding: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-end;
|
|
|
+ background-color: #FFF;
|
|
|
+ &-label {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ &-l {
|
|
|
+ font-size: 46rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+ &-s {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: $defaultColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-local {
|
|
|
+ color: $defaultColor;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-carousel {
|
|
|
+ padding: 24rpx;
|
|
|
+ height: 300rpx;
|
|
|
+ &-box {
|
|
|
+ @include box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-recommend {
|
|
|
+ padding: 24rpx;
|
|
|
+ &-box {
|
|
|
+ @include box;
|
|
|
+ &-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-end;
|
|
|
+ padding: 20rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ .route {
|
|
|
+ color: $defaultColor;
|
|
|
+ font-size: .75em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-main {
|
|
|
+ &-filter {
|
|
|
+ padding: 24rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: $defaultColor;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ &-type{
|
|
|
+ &-item {
|
|
|
+ padding: 20rpx;
|
|
|
+ &.active {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-list {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 24rpx 24rpx 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ &-box {
|
|
|
+ padding: 24rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ @include box;
|
|
|
+ .top {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .title {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden; /* 隐藏超出部分 */
|
|
|
+ white-space: nowrap; /* 不换行 */
|
|
|
+ text-overflow: ellipsis; /* 超出部分显示省略号 */
|
|
|
+ }
|
|
|
+ .remuneration {
|
|
|
+ color: aquamarine;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ display: flex;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin: 28rpx 0;
|
|
|
+ .tag {
|
|
|
+ &.blue {
|
|
|
+ background: aliceblue;
|
|
|
+ color: royalblue;
|
|
|
+ }
|
|
|
+ font-size: 20rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ color: #666;
|
|
|
+ background: #eee;
|
|
|
+ padding: 6rpx 10rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ color: #666;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .origin {
|
|
|
+ font-size: 0.8em;
|
|
|
+ .interval {
|
|
|
+ padding: 0 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .local {
|
|
|
+ color: #aaa;
|
|
|
+ font-size: 0.6em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .noMore {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: $defaultColor;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.scrollBox {
|
|
|
+ height: 100vh;
|
|
|
+}
|
|
|
</style>
|