| | |
| | | </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" @click="goCitySelect"> |
| | | <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">重新定位</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 _ 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'; |
| | | |
| | | const { locationCity } = useUser(); |
| | | |
| | |
| | | |
| | | const queryMenuState = reactive({ |
| | | gender: '' as any as Gender, |
| | | age: [15, 65], |
| | | }); |
| | | |
| | | const queryPositionState = reactive({ |
| | |
| | | function handleMenuSelectPositionClose() { |
| | | selectPositionItem.value?.toggle?.(); |
| | | } |
| | | |
| | | function goFlexJobDetail(item: API.FrontOrderList) { |
| | | Taro.navigateTo({ |
| | | url: `${RouterPath.flexJobDetail}?id=${item.id}`, |
| | | }); |
| | | } |
| | | </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; |
| | | } |
| | | } |
| | | |