zhengyiming
3 天以前 d042bb3c5679375956c7616e6b1afe681fb82d9b
apps/housekeepingMiniApp/src/pages/home/index.vue
@@ -15,7 +15,7 @@
          <div class="searchbar-container">
            <BlSearchbar
              v-model.trim="searchValue"
              placeholder="搜索任务"
              placeholder="搜索"
              @search="handleSearch"
              @change="handleSearch"
            ></BlSearchbar>
@@ -27,32 +27,36 @@
        </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>
        <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>
        </div> -->
        <!-- <nut-swiper :loop="false">
          <nut-swiper-item
            v-for="(chunk, index) in positionListChunk"
            :key="index"
            style="height: 160px"
          > -->
        <nut-grid class="home-gird" :column-num="5">
          <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"
        />
@@ -77,24 +81,55 @@
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();
@@ -107,28 +142,17 @@
  });
}
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">
@@ -185,6 +209,12 @@
  .home-gird {
    margin-bottom: 20px;
    .home-grid-item-icon {
      width: 64px;
      height: 64px;
      object-fit: cover;
    }
  }
  .home-header {