zhengyiming
2 天以前 2a53dc5bab4b5ba06f86031671fc3365050fa3d1
apps/housekeepingMiniApp/src/subpackages/sercice/serciceDetail/serciceDetail.vue
@@ -58,15 +58,20 @@
            <NoData />
          </ProTabPane>
          <ProTabPane :title="`相关推荐`" pane-key="3">
            <div class="serciceDetail-recommend-list">
              <StandardServiceCard
                v-for="item in []"
                :key="item.id"
                v-bind="item"
                style="min-width: 0"
              />
            </div>
            <NoData />
            <InfiniteLoading
              scrollViewClassName="common-infinite-scroll-list serciceDetail-recommend-list"
              commonMode
              v-bind="infiniteLoadingProps"
            >
              <template #renderItem="{ item }">
                <StandardServiceCard
                  :file="item.file"
                  :name="item.name"
                  :minSpecPrice="item.minSpecPrice"
                  @click="goSerciceDetail(item)"
                />
              </template>
            </InfiniteLoading>
          </ProTabPane>
        </ProTabs>
      </InfiniteLoading>
@@ -97,7 +102,7 @@
</template>
<script setup lang="ts">
import { useStandardServiceDetail } from '@12333/hooks';
import { useInfiniteLoading, useStandardServiceDetail } from '@12333/hooks';
import Taro from '@tarojs/taro';
import * as standardOrderServices from '@12333/services/apiV2/standardOrder';
import * as standardServiceServices from '@12333/services/apiV2/standardService';
@@ -117,6 +122,7 @@
import IconShare from '@/assets/flexJob/icon-share.png';
import IconAttention from '@/assets/flexJob/icon-attention-lg.png';
import IconAttentionActive from '@/assets/flexJob/icon-attention-lg-active.png';
import { EnumPagedListOrder } from '@12333/constants';
defineOptions({
  name: 'serciceDetail',
@@ -149,6 +155,7 @@
      imagePath: setOSSLink(res.files[0]),
      name: res.name,
    };
    queryState.jobCode = res.jobCode;
  },
});
@@ -186,6 +193,39 @@
    }
  } catch (error) {}
});
const queryState = reactive({
  ignoreId: id,
  jobCode: '',
});
const { infiniteLoadingProps, invalidateQueries } = useInfiniteLoading(
  ({ pageParam }) => {
    let params: API.GetStandardServicesQuery = {
      pageModel: {
        rows: 20,
        page: pageParam,
        orderInput: [{ property: 'createdTime', order: EnumPagedListOrder.Desc }],
      },
      ignoreId: queryState.ignoreId,
      jobCode: queryState.jobCode,
    };
    return standardServiceServices.getOpenStandardServices(params, {
      showLoading: false,
    });
  },
  {
    queryKey: ['standardServiceServices/getOpenStandardServices', queryState],
    enabled: computed(() => !!queryState.jobCode),
  }
);
function goSerciceDetail(item: API.GetStandardServicesQueryResultItem) {
  Taro.navigateTo({
    url: `${RouterPath.serciceDetail}?id=${item.id}`,
  });
}
</script>
<style lang="scss">
@@ -247,9 +287,11 @@
  }
  .serciceDetail-recommend-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    .infinite-list-inner {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 20px;
    }
  }
}
</style>