|  |  |  | 
|---|
|  |  |  | <script setup lang="ts"> | 
|---|
|  |  |  | import { useQuery } from '@tanstack/vue-query'; | 
|---|
|  |  |  | import Taro from '@tarojs/taro'; | 
|---|
|  |  |  | import * as orderServices from '@12333/services/api/Order'; | 
|---|
|  |  |  | import * as flexWorkerServices from '@12333/services/api/FlexWorker'; | 
|---|
|  |  |  | import IconLocaltion from '@/assets/flexJob/icon-localtion.png'; | 
|---|
|  |  |  | import { TaskPrice, TaskDetailWelfareItem } from '@12333/components'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | // const props = withDefaults(defineProps<Props>(), {}); | 
|---|
|  |  |  | const router = Taro.useRouter(); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const taskId = router.params?.id ?? ''; | 
|---|
|  |  |  | const taskId = router.params?.id ?? 'c4cfe028-23e7-0be8-ee56-3a11e3743b9d'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const { | 
|---|
|  |  |  | isLoading, | 
|---|
|  |  |  | 
|---|
|  |  |  | data: detail, | 
|---|
|  |  |  | refetch, | 
|---|
|  |  |  | } = useQuery({ | 
|---|
|  |  |  | queryKey: ['orderServices/getOrdeForDetail', taskId], | 
|---|
|  |  |  | queryKey: ['flexWorkerServices/getOrdeForDetail', taskId], | 
|---|
|  |  |  | queryFn: async () => { | 
|---|
|  |  |  | return await orderServices.getOrdeForDetail( | 
|---|
|  |  |  | return await flexWorkerServices.getOrdeForDetail( | 
|---|
|  |  |  | { id: taskId }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | showLoading: false, | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style lang="scss"> | 
|---|
|  |  |  | @import '@/styles/common.scss'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .jobApplicationDetail-page-wrapper { | 
|---|
|  |  |  | .taskDetail-time { | 
|---|
|  |  |  | font-size: 24px; | 
|---|
|  |  |  | color: boleGetCssVar('text-color', 'regular'); | 
|---|
|  |  |  | line-height: 36px; | 
|---|
|  |  |  | margin-bottom: 16px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .task-card-welfare-wrapper { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: flex-start; | 
|---|
|  |  |  | padding-bottom: 48px; | 
|---|
|  |  |  | border-bottom: 1px solid #d9d9d9; | 
|---|
|  |  |  | margin-bottom: 12px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .task-card-welfare-list { | 
|---|
|  |  |  | flex: 1; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | min-width: 0; | 
|---|
|  |  |  | flex-wrap: wrap; | 
|---|
|  |  |  | min-height: 40px; | 
|---|
|  |  |  | row-gap: 6px; | 
|---|
|  |  |  | column-gap: 18px; | 
|---|
|  |  |  | margin-right: 10px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .task-card-welfare-list-item { | 
|---|
|  |  |  | font-size: 24px; | 
|---|
|  |  |  | color: #ff7d00; | 
|---|
|  |  |  | line-height: 36px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .taskDetail-address-wrapper { | 
|---|
|  |  |  | padding: 28px 32px 14px; | 
|---|
|  |  |  | background: #f9fbff; | 
|---|
|  |  |  | border-radius: 8px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .taskDetail-address-title-wrapper { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | margin-bottom: 22px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .taskDetail-address-title-icon { | 
|---|
|  |  |  | width: 40px; | 
|---|
|  |  |  | height: 40px; | 
|---|
|  |  |  | margin-right: 8px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .taskDetail-address-title { | 
|---|
|  |  |  | flex: 1; | 
|---|
|  |  |  | min-width: 0; | 
|---|
|  |  |  | @include ellipsis; | 
|---|
|  |  |  | font-size: 28px; | 
|---|
|  |  |  | color: boleGetCssVar('text-color', 'primary'); | 
|---|
|  |  |  | line-height: 42px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .taskDetail-address-info-wrapper { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .taskDetail-address-info { | 
|---|
|  |  |  | flex: 1; | 
|---|
|  |  |  | min-width: 0; | 
|---|
|  |  |  | @include ellipsis; | 
|---|
|  |  |  | font-weight: 400; | 
|---|
|  |  |  | font-size: 24px; | 
|---|
|  |  |  | color: boleGetCssVar('text-color', 'regular'); | 
|---|
|  |  |  | line-height: 36px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .taskDetail-address-info-icon { | 
|---|
|  |  |  | color: boleGetCssVar('text-color', 'secondary'); | 
|---|
|  |  |  | margin-left: 10px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .taskDetail-welfare-list { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-wrap: wrap; | 
|---|
|  |  |  | row-gap: 24px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|