zhengyiming
2025-02-17 ae1b411fcb54f794646b32b29c47cb380163f95e
apps/bMiniApp/src/subpackages/flexJobManage/flexJobSign/InnerPage.vue
New file
@@ -0,0 +1,93 @@
<template>
  <div class="searchbar-container">
    <BlSearchbar
      v-model.trim="searchValue"
      placeholder="搜索合同名/编号"
      @search="handleSearch"
      @change="handleSearch"
    ></BlSearchbar>
    <ChunkTitle title="合同列表" />
  </div>
  <InfiniteLoading
    scrollViewClassName="common-infinite-scroll-list flexJobSign-list"
    v-bind="infiniteLoadingProps"
  >
    <template #renderItem="{ item }">
      <SignCard @click="handleCheck(item)" v-model:checked-id="checkedId" :id="item.id"></SignCard>
    </template>
  </InfiniteLoading>
  <PageFooter>
    <PageFooterBtn type="primary">邀请签约</PageFooterBtn>
  </PageFooter>
</template>
<script setup lang="ts">
import { useInfiniteLoading } from '@12333/hooks';
import { OrderInputType } from '@12333/constants';
import * as orderServices from '@12333/services/api/Order';
import _ from 'lodash';
import { trim } from '@12333/utils';
import { SignCard } from '@12333/components';
defineOptions({
  name: 'InnerPage',
});
const searchValue = ref('');
const queryState = reactive({
  searchValueTrim: '',
});
const checkedId = ref('');
const handleSearch = _.debounce(function () {
  queryState.searchValueTrim = trim(searchValue.value);
}, 300);
const { infiniteLoadingProps } = useInfiniteLoading(
  ({ pageParam }) => {
    let params: API.FrontOrderListInput = {
      pageModel: {
        rows: 20,
        page: pageParam,
        orderInput: [{ property: 'isRecommend', order: OrderInputType.Desc }],
      },
    };
    return orderServices.getFrontOrderList(params, {
      showLoading: false,
    });
  },
  {
    queryKey: ['orderServices/getFrontOrderList'],
  }
);
function handleCheck(item: API.OrderInfoDto) {
  checkedId.value = item.id;
}
</script>
<style lang="scss">
@import '@/styles/common.scss';
.flexJobSign-page-wrapper {
  .searchbar-container {
    padding: 30px 60px;
  }
  .chunk-title-wrapper {
    padding: 30px 10px 0;
  }
  .flexJobSign-list {
    .infinite-list-inner {
      background-color: #ffffff;
      padding: 0 30px;
      border-radius: 12px;
    }
  }
}
</style>