New file |
| | |
| | | <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> |