fix: 甲方小程序

zhengyiming

2 天以前 1d472eb06970c85b0edfb58871956bc2c8d69916

 apps/housekeepingMiniApp/src/pages/home/index.vue

@@ -1,10 +1,10 @@
<template>
  <PageLayoutWithBg class="index-page-wrapper" :title="''" :need-auth="false">
    <template #left>
  <PageLayoutWithBg class="index-page-wrapper" :title="'首页'" :need-auth="false">
    <!-- <template #left>
      <div class="menu-btn-wrapper menu-logo">
        <img :src="IconLogo" class="logo" />
      </div>
    </template>
    </template> -->
    <InfiniteLoading
      scrollViewClassName="common-infinite-scroll-list home-list"
      commonMode
@@ -15,7 +15,7 @@
          <div class="searchbar-container">
            <BlSearchbar
              v-model.trim="searchValue"
              placeholder="搜索任务"
              placeholder="搜索"
              @search="handleSearch"
              @change="handleSearch"
            ></BlSearchbar>
@@ -25,29 +25,43 @@
            <div class="city-btn-text">{{ locationCity }}</div>
          </div>
        </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" />
        <SquareView class="home-banner-wrapper" :width-power="2">
          <nut-swiper :auto-play="3000" class="home-banner-swiper">
            <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>
        <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>
        </SquareView>
        <!-- <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-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"
            @click="goService(item)"
          >
            <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"
        />
@@ -72,24 +86,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 { SquareView } 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 { useSystemStore } from '@/stores/modules/system';

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.getOpenStandardServices(params, {
      showLoading: false,
    });
  },
  {
    cityCode: computed(() => findAreaCodeFromName(locationCity.value)),
    enabled: computed(() => !!findAreaCodeFromName(locationCity.value)),
    queryKey: ['standardServiceServices/getOpenStandardServices', queryState],
  }
);

const { advertisementRefetch, advertisements } = useShowAdvertisements();

const { positionListChunk, positionGrid } = usePositionGrid();

onMounted(async () => {
  try {
    await setLocationCity();
@@ -102,28 +147,27 @@
  });
}

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);
});
const switchTab = useSwitchTab();
const systemStore = useSystemStore();

function goService(item: API.SelectOptionStringGetDictionaryDataSelectQueryResultOption) {
  systemStore.setServicePageJobCode(item.value);
  switchTab({
    url: `${RouterPath.service}`,
  });
}
</script>

<style lang="scss">
@@ -171,15 +215,27 @@
  .home-banner-wrapper {
    margin-bottom: 20px;

    .home-banner-swiper {
      width: 100%;
      height: 100%;
    }

    .banner-img {
      width: 100%;
      height: 260px;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }
  }

  .home-gird {
    margin-bottom: 20px;

    .home-grid-item-icon {
      width: 64px;
      height: 64px;
      object-fit: cover;
    }
  }

  .home-header {
@@ -191,6 +247,21 @@
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
  }

  .home-recommend-wrapper {
    margin-bottom: 20px;
    display: flex;
    gap: 20px;

    .home-recommend-item {
      flex: 1;
      min-width: 0;
      height: 200px;
      background-color: #fff;
      border-radius: 12px;
      padding: 24px 32px;
    }
  }
}

.home-list {