| | |
| | | <template> |
| | | <ContentScrollView style="background-color: transparent"> |
| | | <MyTaskCard :showMyTaskArrow="false"></MyTaskCard> |
| | | <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="list.length > 0" |
| | | class="taskCheckDetail-img-grid" |
| | | <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" |
| | | > |
| | | <nut-grid-item |
| | | v-for="(item, index) in list" |
| | | :key="item" |
| | | class="publish-circle-friend-file-grid-item" |
| | | > |
| | | <div class="taskCheckDetail-img-grid-item"> |
| | | <PreviewImage :src="item" class="taskCheckDetail-img" :urls="list" /> |
| | | </div> |
| | | </nut-grid-item> |
| | | </nut-grid> |
| | | <template #renderItem="{ item }"> |
| | | <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-text">您尚未绑定银行卡,暂时无法结算服务费</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'; |
| | | |
| | | defineOptions({ |
| | | name: 'InnerPage', |
| | | }); |
| | | |
| | | const list = ref([ |
| | | 'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg', |
| | | 'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg', |
| | | 'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg', |
| | | 'https://storage.360buyimg.com/jdc-article/fristfabu.jpg', |
| | | ]); |
| | | const route = Taro.useRouter(); |
| | | const id = route.params?.id as string; |
| | | |
| | | const { infiniteLoadingProps } = useCheckReceiveTaskUserSubmits({ id: id }); |
| | | </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; |
| | | } |
| | | } |
| | | |
| | | .taskCheckDetail-tips-wrapper { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | font-weight: 400; |
| | | font-size: 24px; |
| | | line-height: 32px; |
| | | padding: 20px 0; |
| | | |
| | | .taskCheckDetail-tips-text { |
| | | color: boleGetCssVar('text-color', 'secondary'); |
| | | } |
| | | |
| | | .taskCheckDetail-tips-btn { |
| | | color: boleGetCssVar('color', 'primary'); |
| | | } |
| | | color: boleGetCssVar('text-color', 'primary'); |
| | | } |
| | | } |
| | | </style> |