|  |  | 
 |  |  |           <div class="city-btn-text">{{ locationCity }}</div> | 
 |  |  |         </div> | 
 |  |  |       </div> | 
 |  |  |       <div class="home-banner-wrapper"> | 
 |  |  |       <!-- <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" | 
 |  |  | 
 |  |  |       :key="queryState.orderType" | 
 |  |  |     > | 
 |  |  |       <template #renderItem="{ item }"> | 
 |  |  |         <TaskCard @click="goTaskDetail(item)" /> | 
 |  |  |         <TaskCard @click="goTaskDetail(item)" v-bind="item" /> | 
 |  |  |       </template> | 
 |  |  |     </InfiniteLoading> | 
 |  |  |   </PageLayoutWithBg> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script setup lang="ts"> | 
 |  |  | import { useUser, useTaskList, HomeOrderType } from '@/hooks'; | 
 |  |  | import { useUserStore } from '@/stores/modules/user'; | 
 |  |  | import { RectDown, Location2 } from '@nutui/icons-vue-taro'; | 
 |  |  | import { useUser } from '@/hooks'; | 
 |  |  | import Taro from '@tarojs/taro'; | 
 |  |  | import { setLocationCity } from '@/utils'; | 
 |  |  | import _ from 'lodash'; | 
 |  |  | 
 |  |  | import { TaskCard, ProTabs, ProTabPane } from '@12333/components'; | 
 |  |  | import HomeQueryMenuView from './HomeQueryMenuView.vue'; | 
 |  |  | import IconLocaltion from '@/assets/task/icon-localtion.png'; | 
 |  |  | import { useAllAreaList, useTaskList, HomeOrderType } from '@12333/hooks'; | 
 |  |  | import { useAccessLogin } from '@/hooks'; | 
 |  |  |  | 
 |  |  | const { locationCity } = useUser(); | 
 |  |  |  | 
 |  |  | const userStore = useUserStore(); | 
 |  |  | const { findAreaCodeFromName } = useAllAreaList(); | 
 |  |  |  | 
 |  |  | const { searchValue, queryState, handleSearch, infiniteLoadingProps, queryMenuState } = useTaskList( | 
 |  |  |   { cityName: locationCity } | 
 |  |  |   { | 
 |  |  |     cityCode: computed(() => findAreaCodeFromName(locationCity.value)), | 
 |  |  |     enabled: computed(() => !!findAreaCodeFromName(locationCity.value)), | 
 |  |  |   } | 
 |  |  | ); | 
 |  |  |  | 
 |  |  | onMounted(async () => { | 
 |  |  | 
 |  |  |   selectItem.value?.toggle?.(); | 
 |  |  | } | 
 |  |  |  | 
 |  |  | function goTaskDetail(item: API.GetFlexTaskListOutput) { | 
 |  |  | function goTaskDetail(item: API.GetTaskInfosQueryResultItem) { | 
 |  |  |   Taro.navigateTo({ | 
 |  |  |     url: `${RouterPath.taskDetail}?id=${item.id}`, | 
 |  |  |     url: `${RouterPath.taskDetail}?id=${item.id}&from=apply`, | 
 |  |  |   }); | 
 |  |  | } | 
 |  |  |  | 
 |  |  | const goTaskApply = useAccessLogin((item: API.GetTaskInfosQueryResultItem) => { | 
 |  |  |   console.log('item: ', item); | 
 |  |  | }); | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <style lang="scss"> |