|  |  | 
 |  |  | <template> | 
 |  |  |   <ContentScrollView style="background-color: transparent"> | 
 |  |  |     <MyTaskCard :showMyTaskArrow="false"></MyTaskCard> | 
 |  |  |     <MyTaskCard | 
 |  |  |       :name="infiniteLoadingProps?.listData?.pages?.[0]?.objectData?.taskInfo?.name ?? ''" | 
 |  |  |       :addressName=" | 
 |  |  |         infiniteLoadingProps?.listData?.pages?.[0]?.objectData?.taskInfo?.addressName ?? '' | 
 |  |  |       " | 
 |  |  |       :beginTime="infiniteLoadingProps?.listData?.pages?.[0]?.objectData?.taskInfo?.beginTime" | 
 |  |  |       :endTime="infiniteLoadingProps?.listData?.pages?.[0]?.objectData?.taskInfo?.endTime" | 
 |  |  |       :showMyTaskArrow="false" | 
 |  |  |     ></MyTaskCard> | 
 |  |  |     <div class="taskCheckFileCard-status-title">验收照片</div> | 
 |  |  |     <InfiniteLoading | 
 |  |  |       scrollViewClassName="common-infinite-scroll-list task-list" | 
 |  |  |       v-bind="infiniteLoadingProps" | 
 |  |  |     > | 
 |  |  |       <template #renderItem="{ item }"> | 
 |  |  |         <div class="taskCheckDetail-status-wrapper"> | 
 |  |  |           <div class="taskCheckDetail-status-title">验收照片</div> | 
 |  |  |           <div | 
 |  |  |             class="taskCheckDetail-status" | 
 |  |  |             :style="{ | 
 |  |  |               color: Colors.Warning, | 
 |  |  |             }" | 
 |  |  |           > | 
 |  |  |             待验收 | 
 |  |  |           </div> | 
 |  |  |         </div> | 
 |  |  |         <div class="taskCheckDetail-time">2024.11.14 9:28:39</div> | 
 |  |  |         <nut-grid | 
 |  |  |           square | 
 |  |  |           :column-num="3" | 
 |  |  |           :border="false" | 
 |  |  |           :gutter="20" | 
 |  |  |           v-if="item?.files?.length > 0" | 
 |  |  |           class="taskCheckDetail-img-grid" | 
 |  |  |         > | 
 |  |  |           <nut-grid-item | 
 |  |  |             v-for="(itema, index) in item.files" | 
 |  |  |             :key="index" | 
 |  |  |             class="publish-circle-friend-file-grid-item" | 
 |  |  |           > | 
 |  |  |             <div class="taskCheckDetail-img-grid-item"> | 
 |  |  |               <PreviewImage | 
 |  |  |                 :src="setOSSLink(itema)" | 
 |  |  |                 class="taskCheckDetail-img" | 
 |  |  |                 :urls="item.files" | 
 |  |  |               /> | 
 |  |  |             </div> | 
 |  |  |           </nut-grid-item> | 
 |  |  |         </nut-grid> | 
 |  |  |         <TaskCheckFileCard | 
 |  |  |           :created-time="item?.createdTime" | 
 |  |  |           :checkReceiveStatus="item?.checkReceiveStatus" | 
 |  |  |           :files="item?.files?.map((x) => setOSSLink(x))" | 
 |  |  |         ></TaskCheckFileCard> | 
 |  |  |       </template> | 
 |  |  |     </InfiniteLoading> | 
 |  |  |   </ContentScrollView> | 
 |  |  |   <!-- <div class="taskCheckDetail-tips-wrapper"> | 
 |  |  |   <!-- <div class="taskCheckDetail-tips-wrapper" v-if="!isBindBankCard"> | 
 |  |  |     <div class="taskCheckDetail-tips-text">您尚未绑定银行卡,暂时无法结算服务费</div> | 
 |  |  |     <div class="taskCheckDetail-tips-btn">立即绑定银行卡信息</div> | 
 |  |  |     <div class="taskCheckDetail-tips-btn" @click="goBindBankCard">立即绑定银行卡信息</div> | 
 |  |  |   </div> --> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script setup lang="ts"> | 
 |  |  | import { MyTaskCard, PreviewImage } from '@12333/components'; | 
 |  |  | import { Colors } from '@12333/constants'; | 
 |  |  | import { MyTaskCard, TaskCheckFileCard } from '@12333/components'; | 
 |  |  | import Taro from '@tarojs/taro'; | 
 |  |  | import { useCheckReceiveTaskUserSubmits } from '@12333/hooks'; | 
 |  |  | import { setOSSLink } from '@12333/utils'; | 
 |  |  | 
 |  |  | const id = route.params?.id as string; | 
 |  |  |  | 
 |  |  | const { infiniteLoadingProps } = useCheckReceiveTaskUserSubmits({ id: id }); | 
 |  |  |  | 
 |  |  | const isBindBankCard = computed( | 
 |  |  |   () => | 
 |  |  |     infiniteLoadingProps.value?.listData?.pages?.[0]?.objectData?.enterpriseEmployeeUser | 
 |  |  |       ?.isBindBankCard | 
 |  |  | ); | 
 |  |  |  | 
 |  |  | function goBindBankCard() { | 
 |  |  |   Taro.navigateTo({ | 
 |  |  |     url: `${RouterPath.unboundBankCard}`, | 
 |  |  |   }); | 
 |  |  | } | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <style lang="scss"> | 
 |  |  | @import '@/styles/common.scss'; | 
 |  |  |  | 
 |  |  | .taskCheckDetail-page-wrapper { | 
 |  |  |   .taskCheckDetail-status-wrapper { | 
 |  |  |     display: flex; | 
 |  |  |     align-items: center; | 
 |  |  |   .taskCheckFileCard-status-title { | 
 |  |  |     font-weight: 600; | 
 |  |  |     font-size: 28px; | 
 |  |  |     line-height: 32px; | 
 |  |  |     margin-bottom: 16px; | 
 |  |  |  | 
 |  |  |     .taskCheckDetail-status-title { | 
 |  |  |       color: boleGetCssVar('text-color', 'primary'); | 
 |  |  |       flex: 1; | 
 |  |  |       min-width: 0; | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   .taskCheckDetail-time { | 
 |  |  |     font-weight: 400; | 
 |  |  |     font-size: 24px; | 
 |  |  |     color: boleGetCssVar('text-color', 'regular'); | 
 |  |  |     line-height: 36px; | 
 |  |  |     margin-bottom: 22px; | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   .taskCheckDetail-img-grid { | 
 |  |  |     padding: 0 !important; | 
 |  |  |  | 
 |  |  |     .publish-circle-friend-file-grid-item { | 
 |  |  |       .nut-grid-item__content--square { | 
 |  |  |         padding: 0; | 
 |  |  |         border: none; | 
 |  |  |         display: block; | 
 |  |  |         background-color: transparent; | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     .taskCheckDetail-img-grid-item { | 
 |  |  |       width: 100%; | 
 |  |  |       height: 100%; | 
 |  |  |       box-sizing: border-box; | 
 |  |  |       position: relative; | 
 |  |  |       padding: 20px; | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     .taskCheckDetail-img { | 
 |  |  |       border-radius: 8px; | 
 |  |  |       width: 100% !important; | 
 |  |  |       height: 100%; | 
 |  |  |       object-fit: cover; | 
 |  |  |     } | 
 |  |  |     color: boleGetCssVar('text-color', 'primary'); | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   .taskCheckDetail-tips-wrapper { | 
 |  |  |     display: flex; | 
 |  |  |     flex-direction: column; | 
 |  |  |     align-items: center; | 
 |  |  |     font-weight: 400; | 
 |  |  |     text-align: center; | 
 |  |  |     font-size: 24px; | 
 |  |  |     line-height: 32px; | 
 |  |  |     padding: 20px 0; | 
 |  |  |  | 
 |  |  |     .taskCheckDetail-tips-text { | 
 |  |  |       color: boleGetCssVar('text-color', 'secondary'); |