| | |
| | | <template> |
| | | <LoadingLayout :loading="isLoading" :error="isError" :loadError="refetch"> |
| | | <ContentScrollView style="background-color: transparent"> |
| | | <Cell :title="'客房服务员'" titleSize="large"> |
| | | <Cell :title="detail?.name ?? ''" titleSize="large"> |
| | | <template #title-right> |
| | | <img :src="IconAttentioActive" class="taskDetail-attention-icon" /> |
| | | <img |
| | | :src="detail.isCollected ? IconAttentioActive : IconAttention" |
| | | class="taskDetail-attention-icon" |
| | | /> |
| | | </template> |
| | | <div class="taskDetail-time">2025年2月5日 至 2025年3月5日</div> |
| | | <div class="taskDetail-time"> |
| | | {{ dayjs(detail?.beginTime).format('YYYY年MM月DD日') }} 至 |
| | | {{ dayjs(detail?.endTime).format('YYYY年MM月DD日') }} |
| | | </div> |
| | | <div class="task-card-welfare-wrapper"> |
| | | <div class="task-card-welfare-list"> |
| | | <div class="task-card-welfare-list-item">日结</div> |
| | | <div class="task-card-welfare-list-item">男女不限</div> |
| | | <div class="task-card-welfare-list-item">包三餐</div> |
| | | <div class="task-card-welfare-list-item"> |
| | | {{ EnumSettlementCycleText[detail.settlementCycle] }} |
| | | </div> |
| | | <!-- <div class="task-card-welfare-list-item"> |
| | | {{ TaskUtils.getGenderText(detail.genderLimit) }} |
| | | </div> --> |
| | | </div> |
| | | <TaskPrice :value="212" /> |
| | | <TaskPrice |
| | | :value="detail.serviceFee ?? 0" |
| | | :unit="BillingMethodEnumUnit[detail.billingMethod]" |
| | | /> |
| | | </div> |
| | | <div class="taskDetail-address-wrapper"> |
| | | <div class="taskDetail-address-title-wrapper"> |
| | | <img :src="IconLocaltion" class="taskDetail-address-title-icon" /> |
| | | <div class="taskDetail-address-title">宁波柏悦酒店</div> |
| | | <div class="taskDetail-address-title">{{ detail?.addressName ?? '' }}</div> |
| | | </div> |
| | | <div class="taskDetail-address-info-wrapper"> |
| | | <div class="taskDetail-address-info">宁波市鄞州区东钱湖大堰路188号宁波柏悦酒店</div> |
| | | <div class="taskDetail-address-info">{{ detail?.addressDetail ?? '' }}</div> |
| | | <RectRight :size="8" class="taskDetail-address-info-icon" /> |
| | | </div> |
| | | </div> |
| | |
| | | <Cell :show-title="false"> |
| | | <CellChunk title="福利信息"> |
| | | <div class="taskDetail-welfare-list"> |
| | | <TaskDetailWelfareItem :icon="IconAttentioActive" text="高温补贴" /> |
| | | <TaskDetailWelfareItem :icon="IconAttentioActive" text="高温补贴" /> |
| | | <TaskDetailWelfareItem :icon="IconAttentioActive" text="高温补贴" /> |
| | | <TaskDetailWelfareItem :icon="IconAttentioActive" text="高温补贴" /> |
| | | <TaskDetailWelfareItem :icon="IconAttentioActive" text="高温补贴" /> |
| | | <TaskDetailWelfareItem |
| | | v-for="benefit in detail.benefits" |
| | | :key="benefit.benefitCode" |
| | | :icon="IconAttentioActive" |
| | | :text="benefit.benefitContent" |
| | | /> |
| | | </div> |
| | | </CellChunk> |
| | | <CellChunk title="报名条件"> |
| | | <div class="taskDetail-limit-list"> |
| | | <div class="taskDetail-limit-list-item"> |
| | | <div class="taskDetail-limit-list-item-label">年龄:</div> |
| | | <div class="taskDetail-limit-list-item-text">18-45岁</div> |
| | | <div class="taskDetail-limit-list-item-text"> |
| | | {{ detail.ageMinLimit ?? 0 }}-{{ detail.ageMaxLimit ?? 0 }}岁 |
| | | </div> |
| | | </div> |
| | | <div class="taskDetail-limit-list-item"> |
| | | <div class="taskDetail-limit-list-item-label">性别:</div> |
| | | <div class="taskDetail-limit-list-item-text">不限</div> |
| | | <div class="taskDetail-limit-list-item-text"> |
| | | {{ TaskUtils.getGenderText(detail.genderLimit) }} |
| | | </div> |
| | | </div> |
| | | <div class="taskDetail-limit-list-item"> |
| | | <div class="taskDetail-limit-list-item-label">资格证书:</div> |
| | | <div class="taskDetail-limit-list-item-text">健康证</div> |
| | | <template v-if="detail?.credentialLimits?.length > 0"> |
| | | <div class="taskDetail-limit-list-item-label">资格证书:</div> |
| | | <div class="taskDetail-limit-list-item-text"> |
| | | {{ TaskUtils.getCredentialLimit(detail?.credentialLimits) }} |
| | | </div> |
| | | </template> |
| | | </div> |
| | | </div> |
| | | </CellChunk> |
| | | <CellChunk title="发布者信息"> |
| | | <CompanyDesc @click="goCompanyDetail"></CompanyDesc> |
| | | <CompanyDesc |
| | | @click="goCompanyDetail" |
| | | :enterpriseName="detail?.enterpriseName ?? ''" |
| | | :taskCount="detail?.taskCount ?? 0" |
| | | ></CompanyDesc> |
| | | </CellChunk> |
| | | </Cell> |
| | | <Cell> |
| | |
| | | <script setup lang="ts"> |
| | | import Taro from '@tarojs/taro'; |
| | | import { useQuery } from '@tanstack/vue-query'; |
| | | import * as flexWorkerServices from '@12333/services/api/FlexWorker'; |
| | | import * as taskServices from '@12333/services/apiV2/task'; |
| | | import { useToggle } from 'senin-mini/hooks'; |
| | | import { TaskPrice, TaskDetailWelfareItem } from '@12333/components'; |
| | | import IconAttention from '@/assets/task/icon-attention.png'; |
| | |
| | | import IconLocaltion from '@/assets/task/icon-localtion.png'; |
| | | import './taskDetail.scss'; |
| | | import CompanyDesc from '../components/CompanyDesc.vue'; |
| | | import dayjs from 'dayjs'; |
| | | import { TaskUtils } from '@12333/utils'; |
| | | import { EnumSettlementCycleText, BillingMethodEnumUnit } from '@12333/constants'; |
| | | import { useAccessLogin } from '@/hooks'; |
| | | |
| | | defineOptions({ |
| | | name: 'InnerPage', |
| | | }); |
| | | |
| | | /** |
| | | * TODO 缺少已报名人数 手机 投诉举报接口 |
| | | */ |
| | | |
| | | const router = Taro.useRouter(); |
| | | const taskId = router.params?.id ?? ''; |
| | |
| | | data: detail, |
| | | refetch, |
| | | } = useQuery({ |
| | | queryKey: ['flexWorkerServices/getOrdeForDetail', taskId], |
| | | queryKey: ['taskServices/getTaskInfo', taskId], |
| | | queryFn: async () => { |
| | | return await flexWorkerServices.getOrdeForDetail( |
| | | return await taskServices.getTaskInfo( |
| | | { id: taskId }, |
| | | { |
| | | showLoading: false, |
| | | } |
| | | ); |
| | | }, |
| | | placeholderData: () => ({} as API.OrderInfoDto), |
| | | placeholderData: () => ({} as API.GetTaskInfoQueryResult), |
| | | onSuccess(data) { |
| | | if (data.isExistTradeChatRecord) setTrue(); |
| | | // if (data.isExistTradeChatRecord) setTrue(); |
| | | }, |
| | | }); |
| | | |
| | | const { isCollapse, setTrue } = useToggle(); |
| | | |
| | | function goComplaint() { |
| | | const goComplaint = useAccessLogin(() => { |
| | | Taro.navigateTo({ |
| | | url: `${RouterPath.complaint}?id=${taskId}`, |
| | | }); |
| | | } |
| | | }); |
| | | |
| | | function goCompanyDetail() { |
| | | const goCompanyDetail = useAccessLogin(() => { |
| | | Taro.navigateTo({ |
| | | url: `${RouterPath.companyDetail}?id=${taskId}`, |
| | | }); |
| | | } |
| | | }); |
| | | </script> |