| | |
| | | </div> |
| | | </template> |
| | | <div class="home-header"> |
| | | <!-- <div class="home-searchbar-wrapper"> |
| | | <div class="searchbar-container"> |
| | | <BlSearchbar |
| | | v-model.trim="searchValue" |
| | | placeholder="搜索任务" |
| | | @search="handleSearch" |
| | | @change="handleSearch" |
| | | ></BlSearchbar> |
| | | <div class="home-searchbar-wrapper"> |
| | | <div class="city-btn-wrapper"> |
| | | <div class="city-btn"> |
| | | <img :src="IconLocaltion" class="city-btn-icon" /> |
| | | <div class="city-btn-text">{{ locationCity }}</div> |
| | | </div> |
| | | </div> |
| | | <div class="city-btn" @click="goCitySelect"> |
| | | <img :src="IconLocaltion" class="city-btn-icon" /> |
| | | <div class="city-btn-text">{{ locationCity }}</div> |
| | | </div> |
| | | </div> --> |
| | | <div class="home-banner-wrapper"> |
| | | <div class="reset-localtion" @click="resetLocation">重新定位</div> |
| | | </div> |
| | | <!-- <div class="home-banner-wrapper"> |
| | | <nut-swiper :auto-play="3000"> |
| | | <nut-swiper-item v-for="(item, index) in list" :key="index"> |
| | | <img :src="item" class="banner-img" draggable="false" /> |
| | | </nut-swiper-item> |
| | | </nut-swiper> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | <ProTabs |
| | | v-model="queryState.orderType" |
| | |
| | | title-gutter="8" |
| | | title-scroll |
| | | > |
| | | <ProTabPane :title="`推荐`" :pane-key="HomeOrderType.Recommend"></ProTabPane> |
| | | <ProTabPane :title="`最新`" :pane-key="HomeOrderType.LastShelfTime"></ProTabPane> |
| | | <template #right> |
| | | <Menu> |
| | |
| | | :key="queryState.orderType" |
| | | > |
| | | <template #renderItem="{ item }"> |
| | | <!-- <TaskCard @click="goTaskDetail(item)" /> --> |
| | | <FlexJobCard |
| | | :name="item.name" |
| | | :gender="item.gender" |
| | | :age="item.age" |
| | | :isReal="item.isReal" |
| | | :personalIdentityContent="item.personalIdentityContent" |
| | | :educationalBackgroundContent="item.educationalBackgroundContent" |
| | | :taskCount="item.taskCount" |
| | | :avatar="item.avatar" |
| | | :workExperience="item.workExperience" |
| | | :workSeniority="item.workSeniority" |
| | | @click="goFlexJobDetail(item)" |
| | | :showFooterLeft="false" |
| | | /> |
| | | </template> |
| | | </InfiniteLoading> |
| | | </PageLayoutWithBg> |
| | |
| | | import Taro from '@tarojs/taro'; |
| | | import { LocationUtils, trim } from '@12333/utils'; |
| | | import IconLogo from '@/assets/home/icon-logo.png'; |
| | | import { ProTabs, ProTabPane } from '@12333/components'; |
| | | import { ProTabs, ProTabPane, FlexJobCard } from '@12333/components'; |
| | | import { HomeOrderType } from './constants'; |
| | | import { useInfiniteLoading } from '@12333/hooks'; |
| | | import { OrderInputType, Gender } from '@12333/constants'; |
| | | import * as orderServices from '@12333/services/api/Order'; |
| | | import { |
| | | EnumPagedListOrder, |
| | | EnumTaskRecommendStatus, |
| | | EnumTaskReleaseStatus, |
| | | EnumUserGender, |
| | | } from '@12333/constants'; |
| | | import _ from 'lodash'; |
| | | import HomeQueryMenuView from './HomeQueryMenuView.vue'; |
| | | import HomeQueryPositionMenuView from './HomeQueryPositionMenuView.vue'; |
| | | import IconLocaltion from '@/assets/task/icon-localtion.png'; |
| | | import IconLocaltion from '@/assets/home/icon-localtion.png'; |
| | | import { setLocationCity } from '@/utils'; |
| | | import * as userResumeServices from '@12333/services/apiV2/userResume'; |
| | | |
| | | const { locationCity } = useUser(); |
| | | |
| | | onMounted(async () => { |
| | | try { |
| | | await resetLocation(); |
| | | } catch (error) {} |
| | | }); |
| | | |
| | | const userStore = useUserStore(); |
| | | |
| | | const queryMenuState = reactive({ |
| | | gender: '' as any as Gender, |
| | | genderLimit: '' as any as EnumUserGender, |
| | | age: [15, 65], |
| | | personalIdentityCode: '', |
| | | certificateType: '', |
| | | }); |
| | | |
| | | const queryPositionState = reactive({ |
| | | position: [], |
| | | userExpectJobs: [] as string[], |
| | | }); |
| | | |
| | | const queryState = reactive({ |
| | | orderType: HomeOrderType.Recommend, |
| | | orderType: HomeOrderType.LastShelfTime, |
| | | }); |
| | | |
| | | const { infiniteLoadingProps } = useInfiniteLoading( |
| | | ({ pageParam }) => { |
| | | let params: API.FrontOrderListInput = { |
| | | let params: API.GetUserResumesQuery = { |
| | | pageModel: { |
| | | rows: 20, |
| | | page: pageParam, |
| | | orderInput: [ |
| | | queryState.orderType === HomeOrderType.Recommend |
| | | ? { property: 'isRecommend', order: OrderInputType.Desc } |
| | | : { property: 'lastShelfTime', order: OrderInputType.Desc }, |
| | | ], |
| | | orderInput: [{ property: 'createdTime', order: EnumPagedListOrder.Desc }], |
| | | }, |
| | | userExpectJobs: queryPositionState.userExpectJobs, |
| | | gender: queryMenuState.genderLimit, |
| | | personalIdentityCode: queryMenuState.personalIdentityCode, |
| | | // ageMin: queryMenuState.age[0], |
| | | // ageMax: queryMenuState.age[1], |
| | | userCredentials: queryMenuState.certificateType ? [queryMenuState.certificateType] : null, |
| | | }; |
| | | |
| | | return orderServices.getFrontOrderList(params, { |
| | | return userResumeServices.getOpenUserResumes(params, { |
| | | showLoading: false, |
| | | }); |
| | | }, |
| | | { |
| | | queryKey: ['orderServices/getFrontOrderList', queryState, queryMenuState, queryPositionState], |
| | | queryKey: [ |
| | | 'userResumeServices/getOpenUserResumes', |
| | | queryState, |
| | | queryMenuState, |
| | | queryPositionState, |
| | | ], |
| | | } |
| | | ); |
| | | |
| | |
| | | function handleMenuSelectPositionClose() { |
| | | selectPositionItem.value?.toggle?.(); |
| | | } |
| | | |
| | | function goFlexJobDetail(item: API.GetUserResumesQueryResultItem) { |
| | | Taro.navigateTo({ |
| | | url: `${RouterPath.flexJobDetail}?userId=${item.id}`, |
| | | }); |
| | | } |
| | | |
| | | async function resetLocation() { |
| | | try { |
| | | await setLocationCity(); |
| | | } catch (error) {} |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | |
| | | margin-left: 24px; |
| | | } |
| | | |
| | | .city-btn { |
| | | .home-searchbar-wrapper { |
| | | padding: 32px 0 28px; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | .city-btn-text { |
| | | max-width: 200px; |
| | | @include ellipsis; |
| | | margin-right: 12px; |
| | | .city-btn-wrapper { |
| | | flex: 1; |
| | | min-width: 0; |
| | | |
| | | .city-btn { |
| | | display: flex; |
| | | align-items: center; |
| | | padding-right: 36px; |
| | | color: boleGetCssVar('text-color', 'primary'); |
| | | |
| | | .city-btn-icon { |
| | | width: 40px; |
| | | height: 40px; |
| | | } |
| | | |
| | | .city-btn-text { |
| | | max-width: 200px; |
| | | @include ellipsis; |
| | | margin-left: 12px; |
| | | font-size: 30px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .reset-localtion { |
| | | font-weight: 400; |
| | | font-size: 24px; |
| | | color: boleGetCssVar('color', 'primary'); |
| | | line-height: 28px; |
| | | } |
| | | } |
| | | |