Files
jobslink-user-clent/pages/recruit/subPage/index.vue
2024-03-09 15:59:45 +08:00

211 lines
7.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="app_container">
<CustomNavbar @back="back" :titke="'招工列表'"></CustomNavbar>
<view class="guide">
<view class="guide_content" v-for="(item, index) in arrGuide" :key="index">
<view class="guide_item"> {{item}} </view>
<view class="guide_arrow" v-if="index !== arrGuide.length - 1"></view>
</view>
</view>
<view class="condition">
<view class="cond_list" v-if="pageType === 'enterprise'">
<view v-for="(item, index) in arrTitle" :key="index"
:class="['cond_item', index === currentArrTitleID ? 'activeButton' : '']"
@click="changeTab(item)">
{{ item.text }}
</view>
</view>
<view class="cond_list" v-else>
<view style="font-weight: 700;">个人招工</view>
</view>
<view
class="cond_item item_com"
@click="openPicker = true"
>{{ reviewStatus[currentReviewStatusID] }}</view>
</view>
<view class="container" v-if="dataSource.length">
<block v-for="(item, index) in dataSource" :key="item.id">
<userrecruitList :companyitem="item"></userrecruitList>
</block>
</view>
<empty v-else content="暂无数据" mr-top="200"></empty>
<CustomTabbar :currentpage="0"></CustomTabbar>
<u-picker :show="openPicker" :columns="pickerColumns" @cancel="openPicker = false" @confirm="changeReviewStatus"></u-picker>
</view>
</template>
<script>
import CustomNavbar from '@/components/CustomNavbar/navbar.vue';
import CustomTabbar from '@/components/CustomTabbar/custom_tabbar.vue';
import { getuserrecruitListApp } from '@/api/userrecruit.js'
import userrecruitList from '../components/userrecruitList.vue'
let arrGuide = ['在线填写招工需求', '后台审核沟通发布', '平台/展示招工任务'];
let arrTitle = [
{
text: "任务招工",
id: 0
}, {
text: "岗位招工",
id: 1
}, {
text: "个人招工",
id: 2
}
];
let reviewStatus = {
'-1': '全部',
'0': "待审",
'1': "已审",
'9': "驳回",
};
let pickerColumns = [Object.values(reviewStatus)]
import { mapState } from 'vuex'
export default {
components: {CustomTabbar, CustomNavbar, userrecruitList},
data() {
return {
pageType: null, // null 个人 enterprise 企业
arrGuide,
arrTitle,
reviewStatus,
pickerColumns,
openPicker: false,
currentArrTitleID: 2,
currentReviewStatusID: '-1',
pageNumber: 1,
dataSource: [],
}
},
onLoad({type}) {
if(this.enterprise){
this.pageType = 'enterprise'
this.currentArrTitleID = 0
}
this.getList('refresh')
},
onReachBottom() {
this.getList('add')
},
computed: {
...mapState({enterprise: (state) => state.user.seeEnterprise}),
},
methods: {
changeReviewStatus({value, index, values}) {
const val = Object.keys(reviewStatus).filter((item) => reviewStatus[item] === value[0])[0]
this.currentReviewStatusID = val
this.openPicker = false
this.getList('refresh')
},
changeTab(item) {
this.currentArrTitleID = item.id
this.getList('refresh')
},
back() {
uni.reLaunch({ url: '/pages/my/my' })
},
async getList(type = "add") {
if (type === "refresh") {
this.dataSource = [];
this.pageNumber = 1;
}
let params = {
current: this.pageNumber,
size: 10,
jobType: this.currentArrTitleID,
}
if(this.currentReviewStatusID !== '-1') {
params.reviewState = this.currentReviewStatusID
}
uni.showLoading({title: '加载中...' })
let resData = await getuserrecruitListApp(params);
uni.hideLoading()
if (resData.data?.code === 200) {
const { records, total, page, size } = resData.data.data;
if (!records.length) {
return this.$api.msg("没有更多数据");
}
switch (type) {
case "add":
this.dataSource = [...this.dataSource, ...records];
break;
case "refresh":
this.dataSource = records;
break;
}
this.pageNumber += 1;
}
}
}
}
</script>
<style lang="scss" scoped>
.app_container{
background-color: #f3f4f8;
min-height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
.container{
padding: 0 23rpx;
padding-bottom: calc(env(safe-area-inset-bottom) + 123rpx)
}
.condition{
display: flex;
flex-wrap: nowrap;
padding: 20rpx;
justify-content: space-between;
position: sticky;
top: 78rpx;
z-index: 999;
background-color: #f3f4f8;
.cond_list{
display: flex;
flex-wrap: nowrap;
flex: 1;
justify-content: space-between;
}
.cond_item{
font-size: 14px;
padding: 10rpx 40rpx;
background: #fff;
border-radius: 50px;
margin-right: 10rpx;
white-space: nowrap;
}
.activeButton {
color: #4171f9;
background-color: #cfdaf8;
}
.item_com{
margin-right: 0;
padding: 10rpx 20rpx;
}
}
.guide{
padding: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
height: 200rpx;
color: #FFFFFF;
font-size: 28rpx;
background-color: #4071f8;
.guide_content{
display: flex;
align-items: center;
.guide_item{
width: 160rpx;
text-align: center;
background-color: rgba(76, 120, 249, 1);
border-radius: 10rpx;
padding: 10rpx;
}
.guide_arrow{
margin-left: 40rpx;
}
}
}
}
</style>