menduner-uniapp/pages/index/position.vue

<template>
  <view>
    <Navbar title="职位" />
    <layout-page @loginSucceeded="init">
      <view :style="{'padding-top': navbarHeight + 'px'}">
        <view class="commonBackground"></view>
        <view class="box defaultBgc">
          <uni-segmented-control :current="tab" :values="controlList" @clickItem="tabChange" styleType="text" activeColor="#00B760"></uni-segmented-control>
          <view class="stick" style="border-radius: 5px;">
            <!-- 搜索条 -->
            <uni-search-bar
              v-model="query.name"
              radius="5"
              placeholder="输入关键字"
              cancelButton="none"
              bgColor="#fff"
              :focus="false"
              @confirm="onSearch"
            ></uni-search-bar>
            <!-- 可发布职位数 -->
            <view class="publishJobCountBox">
              <span>可发布职位数 <span class="color-primary">{{ publishJobCount }}</span> 个</span>
            </view>
          </view>
          <scroll-view class="scrollBox" :scroll-y="true" @scrolltolower="loadingMore" style="position:relative;">
            <view>
              <view v-if="!positionListData?.length && more !== 'loading'" class="d-flex flex-column align-center justify-center ss-m-t-30">
                <image src="https://minio.menduner.com/dev/bb43df1dc91945e05ee93da76e49b34f87b0d10203eb76c20e2d4999a13b9a0a.png" class="ss-m-t-20" mode="widthFix" style="width: 100vw"></image>
                <view class="color-999">暂无职位</view>
                <view class="f-horizon-center">
                  <button type="primary" size="default" class="ss-m-t-50" style="width: 60vw;" @click="handleClickAdd">发布新职位</button>
                </view>
              </view>
              <view v-else>
                <PositionList v-if="positionListData?.length" :tab="tab" :jobNum="publishJobCount" :payable="true" :list="positionListData" :noMore="false" @refresh="refresh"></PositionList>
                <uni-load-more :status="more" />
                <view style="padding-bottom: 20vh;"></view>
                <view class="addBtn" @tap="handleClickAdd">
                  <view class="addBox">
                    <view class="icon">+</view>
                    <view class="text">发布新职位</view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </layout-page>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import layoutPage from '@/layout'
import Navbar from '@/components/Navbar'
import PositionList from '@/components/PositionList'
import { dealDictArrayData } from '@/utils/position'
import { getJobAdvertisedList } from '@/api/new/position'
import { onShow, onLoad } from '@dcloudio/uni-app'
import { getAccessToken } from '@/utils/request'
import { showAuthModal } from '@/hooks/useModal'
import { userStore } from '@/store/user'; const useUserStore = userStore()

const tab = ref(1)
const navbarHeight = ref(uni.getStorageSync('navbarHeight'))

onLoad((options) => {
  if (options?.tab) tab.value = Number(options?.tab)
})

const tabList = [
  { label: '待发布', value: 0, status: 99 },
  { label: '招聘中', value: 1, status: 0 },
  { label: '已关闭', value: 2, status: 1 }
]
const controlList = tabList.map(e => e.label)

const tabChange = (e) => {
  tab.value = e.currentIndex
  query.value.pageNo = 1
  getData()
}

const total = ref(0)
const positionListData = ref([])
const query = ref({
  pageSize: 10, 
  pageNo: 1,
  hire: false,
  // jobFairId: 0,
  name: '',
})
const more = ref('more')

const getData = async () => {
  if (query.value.pageNo < 1) return
  if (query.value.pageNo === 1) positionListData.value = []
  try {
    more.value = 'loading'
    query.value.status = tabList[tab.value].status
    const res = await getJobAdvertisedList(query.value)
    const list = res?.data?.list?.length ? res.data.list : []
    total.value = res.data.total-0
    if (!list?.length) {
      more.value = 'noMore'
      return
    }
    positionListData.value.push(...dealDictArrayData([], list))
    more.value = 'more'
    if (positionListData.value.length === total.value) {
      more.value = 'noMore'
      return
    }
  } catch (error) {
    query.value.pageNo--
    more.value = 'more'
  }
}

// 设置自定义tabbar选中值
onShow(() => {
  const currentPage = getCurrentPages()[0] // 获取当前页面实例
  const currentTabBar = currentPage?.getTabBar?.()

  // 设置当前tab页的下标index
  currentTabBar?.setData({ selected: 1 })
  init()
  // 延迟查询可发布职位数量
  setTimeout(() => {
    getPublishJobCount()
  }, 1000)
})

const publishJobCount = ref(0)
const getPublishJobCount = async () => {
  const info = await useUserStore.getUserInfos()
  publishJobCount.value = info?.entitlement?.publishJobCount - 0 || 0
}

const init = () => {
  query.value.pageNo = 1
  getData()
}

const onSearch = () => {
  query.value.pageNo = 1
  getData()
}

// 加载更多
const loadingMore = () => {
  if (more.value === 'noMore') return

  more.value = 'loading'
  query.value.pageNo++
  getData()
}

// reset: 刷新列表
const refresh = async ({ reset = false }) => {
  if (reset) query.value.pageNo = 1
  getData()
}

const handleClickAdd = () => {
  if (!getAccessToken()) {
		uni.showToast({
			title: '请先登录',
			icon: 'none'
		})
		showAuthModal()
		return
	}
  uni.navigateTo({ url: '/pagesB/positionAdd/select' })
}

</script>

<style scoped lang="scss">
.stick {
  z-index: 1;
  position: sticky;
  top: 0;
}
.stickFilter {
  z-index: 1;
  position: sticky;
  box-shadow: 0px 10rpx 12rpx 0px rgba(195, 195, 195, .25);
  top: 110rpx;
}
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.pb-10 {
  padding-bottom: 10px;
}
.pb-20 { padding-bottom: 20px; }
.px-5 { padding-left: 5px; padding-right: 5px; }
.px-10 { padding-left: 10px; padding-right: 10px; }
.mx-10 { margin-left: 10px; margin-right: 10px }
.mx-20 { margin-left: 20px; margin-right: 20px; }
.mb-10 { margin-bottom: 10px; }
.box {
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.scrollBox{
  flex: 1;
  height: 0 !important;
  padding-bottom: 24rpx;
  box-sizing: border-box;
}

.stickBtn{
  text-align: center;
  width: calc(50% - 2px);
  height: 24px;
  line-height: 24px;
  margin: 8px 0;
  color: grey;
  font-size: 13px;
}

.newPositionBtn{
  color: #00B760;
  border-left: 1px solid #c3c3c3;
}

.actColor{
  color: #00B760;
}

.addBtn{
  position: fixed;
  margin-bottom: 20px;
  right: 35rpx;
  // left: 50%;
  // transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 60px);
  width: 70px;
  .addBox {
    position: relative;
    .icon {
      font-size: 42px;
      color: #fff;
      background-color: #00B760;
      width: 50px;
      height: 50px;
      line-height: 46px;
      text-align: center;
      border-radius: 50%;
      margin: 0 auto;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    }
    .text {
      position: absolute;
      top: 42px;
      font-size: 12px;
      color: #00B760;
      background-color: #ffffffc9;
      text-align: center;
      padding: 2px 4px;
      margin: 0 auto;
      border-radius: 6px;
      box-shadow: 0 36px 6px rgba(0, 0, 0, 0.1);
    }
  }
}
.publishJobCountBox {
  font-size: 12px;
  margin-left: 30rpx;
  color: #666;
  padding-bottom: 10px;
  .color-primary {
    font-weight: bold;
  }
}
</style>