wupengfei
2 天以前 34b86673ec8fd29680a7679d3d8a597351a63f60
apps/housekeepingMiniApp/src/subpackages/mine/mineCollectTask/InnerPage.vue
@@ -1,106 +1,72 @@
<template>
  <div class="my-collect-task">
    <div class="my-collect-task-title">收藏任务列表</div>
    <div class="my-collect-task-btn" @click="clearExpiredTask">清空已失效任务</div>
  </div>
  <InfiniteLoading
    scrollViewClassName="common-infinite-scroll-list home-list"
    scrollViewClassName="common-page-infinite-scroll-list"
    v-bind="infiniteLoadingProps"
  >
    <template #renderItem="{ item }">
      <TaskCard
        :id="item.id"
        :name="item.name"
        :address-name="item.addressName"
        :begin-time="item.beginTime"
        :end-time="item.endTime"
        :gender-limit="item.genderLimit"
        :service-fee="item.serviceFee"
        :billing-method="item.billingMethod"
        :settlement-cycle="item.settlementCycle"
        :benefits="item.benefits"
        :show-actions="true"
        :release-status="item.releaseStatus"
        :hireStatus="item.hireStatus"
        @apply="goTaskDetail"
      >
      </TaskCard>
    </template>
    <div class="mineCollectTask-service-list">
      <StandardServiceCard
        v-for="item in infiniteLoadingProps.flattenListData"
        :key="item.id"
        @click="goSerciceDetail(item)"
        v-bind="item"
        style="min-width: 0"
      />
    </div>
  </InfiniteLoading>
</template>
<script setup lang="ts">
import { TaskCard } from '@12333/components';
import * as taskServices from '@12333/services/apiV2/task';
import * as taskUserServices from '@12333/services/apiV2/taskUser';
import { useInfiniteLoading, useTaskList } from '@12333/hooks';
import { useInfiniteLoading } from '@12333/hooks';
import Taro from '@tarojs/taro';
import { Message } from '@12333/utils';
import { EnumPagedListOrder, EnumStandardServiceReleaseStatus } from '@12333/constants';
import * as standardServiceServices from '@12333/services/apiV2/standardService';
defineOptions({
  name: 'InnerPage',
});
const queryState = reactive({
  releaseStatus: EnumStandardServiceReleaseStatus.InProcess,
  isCollected: true,
});
const { infiniteLoadingProps, invalidateQueries } = useInfiniteLoading(
  ({ pageParam }) => {
    let params: API.GetTaskInfosQuery = {
    let params: API.GetStandardServicesQuery = {
      pageModel: {
        rows: 20,
        page: pageParam,
        orderInput: [
          { property: 'createdTime', order: EnumPagedListOrder.Desc },
          { property: 'recommendStatus', order: EnumPagedListOrder.Desc },
        ],
      },
      isCollected: true,
      releaseStatus: queryState.releaseStatus,
      isCollected: queryState.isCollected,
    };
    return taskServices.getTaskInfos(params, {
    return standardServiceServices.getOpenStandardServices(params, {
      showLoading: false,
    });
  },
  {
    queryKey: ['taskServices/getTaskInfos'],
    queryKey: ['standardServiceServices/getOpenStandardServices', queryState],
  }
);
function goTaskDetail(id: string) {
function goSerciceDetail(item: API.GetStandardServicesQueryResultItem) {
  Taro.navigateTo({
    url: `${RouterPath.taskDetail}?id=${id}&from=apply`,
    url: `${RouterPath.serciceDetail}?id=${item.id}`,
  });
}
async function clearExpiredTask() {
  try {
    await Message.confirm({
      message: '确定要清空已失效任务吗?',
    });
    let res = await taskUserServices.clearTaskCollect({});
    if (res) {
      Message.success('清空成功');
      invalidateQueries();
    }
  } catch (error) {}
}
</script>
<style lang="scss">
@import '@/styles/common.scss';
.mineCollectTask-page-wrapper {
  .my-collect-task {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 40px;
    .my-collect-task-title {
      font-size: 28px;
      line-height: 40px;
      color: boleGetCssVar('text-color', 'primary');
    }
    .my-collect-task-btn {
      font-size: 24px;
      line-height: 34px;
      color: boleGetCssVar('text-color', 'regular');
    }
  }
.mineCollectTask-service-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
}
</style>