|  |  | 
 |  |  |   <LoadingLayout :loading="isLoading" :error="isError" :loadError="refetch"> | 
 |  |  |     <ContentScrollView style="background-color: #fff"> | 
 |  |  |       <div class="personal-info-wrapper"> | 
 |  |  |         <TaskCheckPersonalView /> | 
 |  |  |         <TaskCheckPersonalView | 
 |  |  |           :avatarUrl="setOSSLink(detail?.enterpriseEmployeeUser?.avatar)" | 
 |  |  |           :name="detail?.enterpriseEmployeeUser?.name" | 
 |  |  |           :isReal="detail?.enterpriseEmployeeUser?.isReal" | 
 |  |  |           :contactPhoneNumber="detail?.enterpriseEmployeeUser?.contactPhoneNumber" | 
 |  |  |         /> | 
 |  |  |       </div> | 
 |  |  |       <div class="taskCheckDetail-status-wrapper"> | 
 |  |  |         <div class="taskCheckDetail-status-title">验收照片</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="pro-img-grid" | 
 |  |  |       > | 
 |  |  |         <nut-grid-item v-for="(item, index) in list" :key="item" class="pro-img-grid-item"> | 
 |  |  |           <div class="pro-img-grid-img-item"> | 
 |  |  |             <PreviewImage :src="item" class="pro-img-grid-img" :urls="list" /> | 
 |  |  |           </div> | 
 |  |  |         </nut-grid-item> | 
 |  |  |       </nut-grid> | 
 |  |  |       <div class="taskCheckFileCard-status-title">验收照片</div> | 
 |  |  |       <TaskCheckFileCard | 
 |  |  |         :created-time="detail?.createdTime" | 
 |  |  |         :files="detail?.files?.map((x) => setOSSLink(x))" | 
 |  |  |       ></TaskCheckFileCard> | 
 |  |  |     </ContentScrollView> | 
 |  |  |     <PageFooter> | 
 |  |  |       <PageFooterBtn type="primary" :color="Colors.Info" class="dark-btn">验收未通过</PageFooterBtn> | 
 |  |  |       <PageFooterBtn type="primary">验收通过</PageFooterBtn> | 
 |  |  |       <PageFooterBtn | 
 |  |  |         type="primary" | 
 |  |  |         :color="Colors.Info" | 
 |  |  |         class="dark-btn" | 
 |  |  |         @click="checkReceiveTask(EnumTaskUserSubmitCheckReceiveStatus.Fail)" | 
 |  |  |         >验收未通过</PageFooterBtn | 
 |  |  |       > | 
 |  |  |       <PageFooterBtn | 
 |  |  |         type="primary" | 
 |  |  |         @click="checkReceiveTask(EnumTaskUserSubmitCheckReceiveStatus.Success)" | 
 |  |  |         >验收通过</PageFooterBtn | 
 |  |  |       > | 
 |  |  |     </PageFooter> | 
 |  |  |   </LoadingLayout> | 
 |  |  | </template> | 
 |  |  | 
 |  |  | <script setup lang="ts"> | 
 |  |  | import Taro from '@tarojs/taro'; | 
 |  |  | import { useQuery } from '@tanstack/vue-query'; | 
 |  |  | import * as flexWorkerServices from '@12333/services/api/FlexWorker'; | 
 |  |  | import TaskCheckPersonalView from '../components/TaskCheckPersonalView.vue'; | 
 |  |  | import { PreviewImage } from '@12333/components'; | 
 |  |  | import { Colors } from '@12333/constants'; | 
 |  |  | import * as taskCheckReceiveServices from '@12333/services/apiV2/taskCheckReceive'; | 
 |  |  | import { TaskCheckFileCard, TaskCheckPersonalView } from '@12333/components'; | 
 |  |  | import { Colors, EnumTaskUserSubmitCheckReceiveStatus } from '@12333/constants'; | 
 |  |  | import { Message, setOSSLink } from '@12333/utils'; | 
 |  |  | import dayjs from 'dayjs'; | 
 |  |  | import { goBack } from '@/utils'; | 
 |  |  |  | 
 |  |  | defineOptions({ | 
 |  |  |   name: 'InnerPage', | 
 |  |  | }); | 
 |  |  |  | 
 |  |  | const router = Taro.useRouter(); | 
 |  |  | const taskId = router.params?.id ?? ''; | 
 |  |  | const id = router.params?.id ?? ''; | 
 |  |  | const date = router.params?.date ?? ''; | 
 |  |  |  | 
 |  |  | const { | 
 |  |  |   isLoading, | 
 |  |  | 
 |  |  |   data: detail, | 
 |  |  |   refetch, | 
 |  |  | } = useQuery({ | 
 |  |  |   queryKey: ['flexWorkerServices/getOrdeForDetail', taskId], | 
 |  |  |   queryKey: ['taskCheckReceiveServices/getCheckReceiveTaskUserSubmit', id, date], | 
 |  |  |   queryFn: async () => { | 
 |  |  |     return await flexWorkerServices.getOrdeForDetail( | 
 |  |  |       { id: taskId }, | 
 |  |  |     return await taskCheckReceiveServices.getCheckReceiveTaskUserSubmit( | 
 |  |  |       { taskInfoUserId: id, date: dayjs(date).format('YYYY-MM-DD') }, | 
 |  |  |       { | 
 |  |  |         showLoading: false, | 
 |  |  |       } | 
 |  |  |     ); | 
 |  |  |   }, | 
 |  |  |   placeholderData: () => ({} as API.OrderInfoDto), | 
 |  |  |   placeholderData: () => ({} as API.GetCheckReceiveTaskUserSubmitQueryResult), | 
 |  |  | }); | 
 |  |  |  | 
 |  |  | 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', | 
 |  |  | ]); | 
 |  |  | async function checkReceiveTask(checkReceiveStatus: EnumTaskUserSubmitCheckReceiveStatus) { | 
 |  |  |   try { | 
 |  |  |     let params: API.CheckReceiveTaskCommand = { | 
 |  |  |       id: detail.value?.id, | 
 |  |  |       checkReceiveStatus: checkReceiveStatus, | 
 |  |  |     }; | 
 |  |  |     let res = await taskCheckReceiveServices.checkReceiveTask(params); | 
 |  |  |     if (res) { | 
 |  |  |       Message.success('提交成功', { | 
 |  |  |         onClosed() { | 
 |  |  |           goBack(); | 
 |  |  |         }, | 
 |  |  |       }); | 
 |  |  |     } | 
 |  |  |   } catch (error) {} | 
 |  |  | } | 
 |  |  | </script> | 
 |  |  |  | 
 |  |  | <style lang="scss"> | 
 |  |  | @import '@/styles/common.scss'; | 
 |  |  |  | 
 |  |  | .taskHandleCheckDetail-page-wrapper { | 
 |  |  |   .personal-info-wrapper { | 
 |  |  |     padding-top: 52px; | 
 |  |  |     padding-bottom: 36px; | 
 |  |  |     border-bottom: 1px solid #d9d9d9; | 
 |  |  |     margin-bottom: 22px; | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   .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; | 
 |  |  |     } | 
 |  |  |     color: boleGetCssVar('text-color', 'primary'); | 
 |  |  |   } | 
 |  |  |  | 
 |  |  |   .taskCheckDetail-time { | 
 |  |  |     font-weight: 400; | 
 |  |  |     font-size: 24px; | 
 |  |  |     color: boleGetCssVar('text-color', 'regular'); | 
 |  |  |     line-height: 36px; | 
 |  |  |   .personal-info-wrapper { | 
 |  |  |     padding-top: 52px; | 
 |  |  |     padding-bottom: 36px; | 
 |  |  |     border-bottom: 1px solid #d9d9d9; | 
 |  |  |     margin-bottom: 22px; | 
 |  |  |   } | 
 |  |  | } |