menduner-uniapp/pages/index/search.vue

<template>
	<view>
		<Navbar :showLogo="true" />
		<layout-page>
			<view :style="{'padding-top': navbarHeight + 'px'}">
				<view class="commonBackground"></view>
				<view class="box defaultBgc">
					<view style="padding: 0 15px 0 15px;">
						<uni-segmented-control 
							:current="current"
							:values="tabList"
							@clickItem="changeControl"
							styleType="text"
							activeColor="#00B760"
						></uni-segmented-control>
					</view>

					<!-- 职位推荐 -->
					<RecommendPage v-if="current === 0" :jobList="jobList" />

					<!-- 条件筛选 -->
					<ConditionPage v-else />
				</view>
			</view>
		</layout-page>
	</view>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import layoutPage from '@/layout'
import Navbar from '@/components/Navbar'
import { getAccessToken } from '@/utils/request'
import { showAuthModal } from '@/hooks/useModal'
import { getJobAdvertised } from '@/api/search'
import { userStore } from '@/store/user'
import { formatName } from '@/utils/getText'
import RecommendPage from './components/recommend.vue'
import ConditionPage from './components/condition.vue'

const navbarHeight = ref(0)

onMounted(async () => {
  try {
    const res = await new Promise((resolve, reject) => {
      uni.getStorage({
        key: 'navbarHeight',
        success: (result) => resolve(result),
        fail: (err) => reject(err)
      })
    })
    navbarHeight.value = res.data
	  console.log(navbarHeight.value, '职位列表-导航栏高度')
  } catch (error) {
    console.error('读取本地缓存出错:', error)
  }
})

const current = ref(0)
const tabList = ['职位推荐', '条件筛选']
const useUserStore = userStore()

// 职位列表
const jobList = ref([])
const getJobList = async () => {
  const { data } = await getJobAdvertised({ status: 0 })
  if (data.length) {
    jobList.value = data.map(e => {
      return { text: `${formatName(e.name)}_${e.areaName ? e.area?.str : '全国'}`, value: e.id }
    })
  }
}

watch(() => useUserStore.refreshToken, () => {
	if (useUserStore.refreshToken && !uni.getStorageSync('isPersonalToken')) {
		getJobList()
	}
}, { immediate: true })

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

  // 设置当前tab页的下标index
  currentTabBar?.setData({ selected: 0 })

	if (!getAccessToken()) return showAuthModal()

})

const changeControl = (e) =>{
  current.value = e.currentIndex
}
</script>

<style scoped lang="scss">
:deep(.uni-select__selector-item) {
	display: block !important;
	text-align: left !important;
	max-width: 100% !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
	overflow: hidden !important;
}
</style>