| | |
| | | <div class="searchbar-container"> |
| | | <BlSearchbar |
| | | v-model.trim="searchValue" |
| | | placeholder="搜索任务" |
| | | placeholder="搜索" |
| | | @search="handleSearch" |
| | | @change="handleSearch" |
| | | ></BlSearchbar> |
| | |
| | | </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 v-for="(item, index) in advertisements" :key="item.id"> |
| | | <img :src="item.file" class="banner-img" draggable="false" /> |
| | | </nut-swiper-item> |
| | | </nut-swiper> |
| | | </div> |
| | | <div class="home-recommend-wrapper"> |
| | | <!-- <div class="home-recommend-wrapper"> |
| | | <div class="home-recommend-item">推荐</div> |
| | | <div class="home-recommend-item">推荐</div> |
| | | <div class="home-recommend-item">推荐</div> |
| | | </div> |
| | | </div> --> |
| | | <!-- <nut-swiper :loop="false"> |
| | | <nut-swiper-item |
| | | v-for="(chunk, index) in positionListChunk" |
| | | :key="index" |
| | | style="height: 160px" |
| | | > --> |
| | | <nut-grid class="home-gird"> |
| | | <nut-grid-item text="text"><Dongdong /></nut-grid-item> |
| | | <nut-grid-item text="text"><Dongdong /></nut-grid-item> |
| | | <nut-grid-item text="text"><Dongdong /></nut-grid-item> |
| | | <nut-grid-item text="text"><Dongdong /></nut-grid-item> |
| | | <nut-grid-item text="text"><Dongdong /></nut-grid-item> |
| | | <nut-grid-item text="text"><Dongdong /></nut-grid-item> |
| | | <nut-grid-item text="text"><Dongdong /></nut-grid-item> |
| | | <nut-grid-item text="text"><Dongdong /></nut-grid-item> |
| | | <nut-grid-item v-for="item in positionGrid" :key="item.value" :text="item.label"> |
| | | <img :src="setOSSLink(item.data.field2)" class="home-grid-item-icon" /> |
| | | <!-- <Dongdong /> --> |
| | | </nut-grid-item> |
| | | </nut-grid> |
| | | <!-- </nut-swiper-item> |
| | | </nut-swiper> --> |
| | | </div> |
| | | <div class="home-good-list"> |
| | | <TaskCard |
| | | <StandardServiceCard |
| | | v-for="item in infiniteLoadingProps.flattenListData" |
| | | :key="item.id" |
| | | @click="goTaskDetail(item)" |
| | | @click="goSerciceDetail(item)" |
| | | v-bind="item" |
| | | style="min-width: 0" |
| | | /> |
| | |
| | | import { setLocationCity } from '@/utils'; |
| | | import _ from 'lodash'; |
| | | import IconLogo from '@/assets/home/icon-logo.png'; |
| | | import { TaskCard, ProTabs, ProTabPane } from '@12333/components'; |
| | | import HomeQueryMenuView from './HomeQueryMenuView.vue'; |
| | | import { TaskCard } from '@12333/components'; |
| | | import IconLocaltion from '@/assets/task/icon-localtion.png'; |
| | | import { useAllAreaList, useTaskList, HomeOrderType } from '@12333/hooks'; |
| | | import { useAllAreaList, useInfiniteLoading, useTaskList } from '@12333/hooks'; |
| | | import { useAccessLogin } from '@/hooks'; |
| | | import { Dongdong } from '@nutui/icons-vue-taro'; |
| | | import { usePositionGrid, useShowAdvertisements } from './hooks'; |
| | | import { setOSSLink, trim } from '@12333/utils'; |
| | | import * as standardServiceServices from '@12333/services/apiV2/standardService'; |
| | | import { EnumPagedListOrder, EnumStandardServiceReleaseStatus } from '@12333/constants'; |
| | | import StandardServiceCard from './StandardServiceCard.vue'; |
| | | |
| | | const { locationCity } = useUser(); |
| | | |
| | | const { findAreaCodeFromName } = useAllAreaList(); |
| | | const searchValue = ref(''); |
| | | const queryState = reactive({ |
| | | keywords: '', |
| | | }); |
| | | |
| | | const { searchValue, queryState, handleSearch, infiniteLoadingProps, queryMenuState } = useTaskList( |
| | | const handleSearch = _.debounce(function () { |
| | | queryState.keywords = trim(searchValue.value); |
| | | }, 300); |
| | | |
| | | const { infiniteLoadingProps, invalidateQueries } = useInfiniteLoading( |
| | | ({ pageParam }) => { |
| | | let params: API.GetStandardServicesQuery = { |
| | | pageModel: { |
| | | rows: 20, |
| | | page: pageParam, |
| | | orderInput: [ |
| | | { property: 'createdTime', order: EnumPagedListOrder.Desc }, |
| | | { property: 'recommendStatus', order: EnumPagedListOrder.Desc }, |
| | | ], |
| | | }, |
| | | releaseStatus: EnumStandardServiceReleaseStatus.InProcess, |
| | | keywords: queryState.keywords, |
| | | }; |
| | | |
| | | return standardServiceServices.getStandardServices(params, { |
| | | showLoading: false, |
| | | }); |
| | | }, |
| | | { |
| | | cityCode: computed(() => findAreaCodeFromName(locationCity.value)), |
| | | enabled: computed(() => !!findAreaCodeFromName(locationCity.value)), |
| | | queryKey: ['standardServiceServices/getStandardServices', queryState], |
| | | } |
| | | ); |
| | | |
| | | const { advertisementRefetch, advertisements } = useShowAdvertisements(); |
| | | |
| | | const { positionListChunk, positionGrid } = usePositionGrid(); |
| | | |
| | | onMounted(async () => { |
| | | try { |
| | | await setLocationCity(); |
| | |
| | | }); |
| | | } |
| | | |
| | | const list = ref([ |
| | | 'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg', |
| | | 'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg', |
| | | 'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg', |
| | | 'https://storage.360buyimg.com/jdc-article/fristfabu.jpg', |
| | | ]); |
| | | |
| | | const selectItem = ref(); |
| | | |
| | | function handleMenuSelectClose() { |
| | | selectItem.value?.toggle?.(); |
| | | } |
| | | |
| | | function goTaskDetail(item: API.GetTaskInfosQueryResultItem) { |
| | | // Taro.navigateTo({ |
| | | // url: `${RouterPath.taskDetail}?id=${item.id}&from=apply`, |
| | | // }); |
| | | function goSerciceDetail(item: API.GetStandardServicesQueryResultItem) { |
| | | Taro.navigateTo({ |
| | | url: `${RouterPath.serciceDetail}?id=${item.id}`, |
| | | }); |
| | | } |
| | | |
| | | const goTaskApply = useAccessLogin((item: API.GetTaskInfosQueryResultItem) => { |
| | | console.log('item: ', item); |
| | | }); |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | |
| | | |
| | | .home-gird { |
| | | margin-bottom: 20px; |
| | | |
| | | .home-grid-item-icon { |
| | | width: 64px; |
| | | height: 64px; |
| | | object-fit: cover; |
| | | } |
| | | } |
| | | |
| | | .home-header { |