| | |
| | | </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="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"> |
| | |
| | | :key="queryState.orderType" |
| | | > |
| | | <template #renderItem="{ item }"> |
| | | <!-- <TaskCard @click="goTaskDetail(item)" /> --> |
| | | <FlexJobCard @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 * as flexWorkerServices from '@12333/services/api/FlexWorker'; |
| | | 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'; |
| | | |
| | | const { locationCity } = useUser(); |
| | | |
| | |
| | | |
| | | const queryMenuState = reactive({ |
| | | gender: '' as any as Gender, |
| | | age: [15, 65], |
| | | }); |
| | | |
| | | const queryPositionState = reactive({ |
| | |
| | | |
| | | const { infiniteLoadingProps } = useInfiniteLoading( |
| | | ({ pageParam }) => { |
| | | let params: API.FrontOrderListInput = { |
| | | let params: API.GetFlexTaskListInput = { |
| | | pageModel: { |
| | | rows: 20, |
| | | page: pageParam, |
| | | orderInput: [ |
| | | queryState.orderType === HomeOrderType.Recommend |
| | | ? { property: 'isRecommend', order: OrderInputType.Desc } |
| | | : { property: 'lastShelfTime', order: OrderInputType.Desc }, |
| | | ], |
| | | orderInput: [{ property: 'taskId', order: OrderInputType.Desc }], |
| | | }, |
| | | }; |
| | | |
| | | return orderServices.getFrontOrderList(params, { |
| | | return flexWorkerServices.getFlexTaskWorkerArrangeList(params, { |
| | | showLoading: false, |
| | | }); |
| | | }, |
| | | { |
| | | queryKey: ['orderServices/getFrontOrderList', queryState, queryMenuState, queryPositionState], |
| | | queryKey: [ |
| | | 'flexWorkerServices/getFlexTaskByArrange', |
| | | queryState, |
| | | queryMenuState, |
| | | queryPositionState, |
| | | ], |
| | | } |
| | | ); |
| | | |
| | |
| | | function handleMenuSelectPositionClose() { |
| | | selectPositionItem.value?.toggle?.(); |
| | | } |
| | | |
| | | function goFlexJobDetail(item: API.GetFlexTaskListOutput) { |
| | | Taro.navigateTo({ |
| | | url: `${RouterPath.flexJobDetail}?id=${item.taskId}`, |
| | | }); |
| | | } |
| | | |
| | | 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; |
| | | } |
| | | } |
| | | |