|  |  |  | 
|---|
|  |  |  | <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'); | 
|---|