<template>
|
<Cell :title="detail?.name ?? ''" titleSize="large">
|
<template #title-right>
|
<slot name="title-right"></slot>
|
</template>
|
<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">
|
{{ EnumSettlementCycleText[detail.settlementCycle] }}
|
</div>
|
</div>
|
<TaskPrice
|
v-if="detail.releaseStatus !== EnumTaskReleaseStatus.Stopped"
|
:value="toThousand(detail.serviceFee ?? 0)"
|
:unit="BillingMethodEnumUnit[detail.billingMethod]"
|
:billingMethod="detail.billingMethod"
|
/>
|
</div>
|
<div class="taskDetail-address-wrapper" @click="goMap">
|
<div class="taskDetail-address-title-wrapper">
|
<img :src="IconLocaltion" class="taskDetail-address-title-icon" />
|
<div class="taskDetail-address-title">{{ detail?.addressName ?? '' }}</div>
|
</div>
|
<div class="taskDetail-address-info-wrapper">
|
<div class="taskDetail-address-info">{{ detail?.addressDetail ?? '' }}</div>
|
<RectRight :size="8" class="taskDetail-address-info-icon" />
|
</div>
|
</div>
|
</Cell>
|
<Cell :show-title="false">
|
<CellChunk title="福利信息">
|
<div class="taskDetail-welfare-list">
|
<TaskDetailWelfareItem
|
v-for="benefit in detail.benefits"
|
:key="benefit.benefitCode"
|
:icon="setOSSLink(benefit.benefitField2)"
|
:text="benefit.benefitContent"
|
/>
|
</div>
|
</CellChunk>
|
<CellChunk title="需求人数">
|
<div class="taskDetail-need-people">{{ detail?.needPeopleNumber ?? 0 }}人</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">
|
{{ 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">
|
{{ TaskUtils.getGenderText(detail.genderLimit) }}
|
</div>
|
</div>
|
<div class="taskDetail-limit-list-item">
|
<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>
|
<slot name="companyDesc"></slot>
|
</Cell>
|
<Cell title="任务描述">
|
<div class="safe-cell-content">{{ detail?.description ?? '' }}</div>
|
</Cell>
|
<slot name="footer"></slot>
|
</template>
|
|
<script setup lang="ts">
|
import Cell from '../Chunk/Cell.vue';
|
import CellChunk from '../Chunk/CellChunk.vue';
|
import dayjs from 'dayjs';
|
import {
|
EnumSettlementCycleText,
|
EnumTaskReleaseStatus,
|
BillingMethodEnumUnit,
|
} from '@12333/constants';
|
import { TaskUtils, toThousand, setOSSLink, Message } from '@12333/utils';
|
import Taro from '@tarojs/taro';
|
import IconLocaltion from '@/assets/task/icon-localtion.png';
|
import TaskPrice from '../Card/TaskPrice.vue';
|
import TaskDetailWelfareItem from '../Card/TaskDetailWelfareItem.vue';
|
import { RectRight } from '@nutui/icons-vue-taro';
|
|
defineOptions({
|
name: 'TaskDetailView',
|
});
|
|
type Props = {
|
detail: API.GetTaskInfoQueryResult;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {});
|
|
function goMap() {
|
Taro.openLocation({
|
latitude: props.detail?.latitude,
|
longitude: props.detail?.longitude,
|
scale: 18,
|
});
|
}
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
@import './taskDetail.scss';
|
</style>
|
