<template>
|
<div class="job-application-card-wrapper">
|
<div class="job-application-card-title-wrapper">
|
<div class="job-application-card-title">{{ taskName }}</div>
|
<TaskPrice :value="fee" :unit="unit" v-if="mode === 'taskManage'" />
|
<div v-else class="job-application-card-title-more" @click.stop="handleMore">
|
<img :src="IconMore" class="more-btn-icon" />
|
</div>
|
</div>
|
<div class="job-application-card-line">
|
<div class="job-application-card-time">
|
{{
|
`${dayjs(startDate).format('YYYY年MM月DD日')}至${dayjs(endDate).format('YYYY年MM月DD日')}`
|
}}
|
</div>
|
<div class="job-application-card-status" v-if="mode === 'normal'">
|
{{ FlexTaskReleaseStatusEnumText[releaseStatus] }}
|
</div>
|
</div>
|
<div class="job-application-card-line">
|
<div class="job-application-card-company">
|
<div class="job-application-card-company-tag">H</div>
|
<div class="job-application-card-company-address">{{ address }}</div>
|
</div>
|
<div class="job-application-card-people" v-if="mode === 'normal'">
|
{{ `报名人数：${applyWorkerCount}` }}
|
</div>
|
</div>
|
<div class="job-application-card-line">
|
<div class="job-application-card-publish-time">
|
{{ `发布日期：${dayjs(creationTime).format('YYYY-MM-DD')}` }}
|
</div>
|
<slot name="footer-actions">
|
<div class="job-application-card-fee">
|
<TaskPrice :value="fee" :unit="unit" />
|
</div>
|
</slot>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { computed, h } from 'vue';
|
import IconMore from '../../assets/components/icon-more.png';
|
import { CommonTaskCardProps } from './card';
|
import { ActionSheet } from '@nutui/nutui-taro';
|
import { Portal } from 'senin-mini/components';
|
import { TaskPrice } from '@12333/components';
|
import dayjs from 'dayjs';
|
|
defineOptions({
|
name: 'JobApplicationCard',
|
});
|
|
enum ManageActions {
|
Edit = 1,
|
Detail,
|
Publish,
|
Stop,
|
Copy,
|
Delete,
|
}
|
|
enum FlexTaskReleaseStatusEnum {
|
/**
|
* 发布中
|
*/
|
Releasing = 10,
|
/**
|
* 已停止
|
*/
|
Stoping = 20,
|
}
|
|
const FlexTaskReleaseStatusEnumText = {
|
[FlexTaskReleaseStatusEnum.Releasing]: '发布中',
|
[FlexTaskReleaseStatusEnum.Stoping]: '已停止',
|
};
|
|
type Props = CommonTaskCardProps & {
|
showActions?: boolean;
|
status?: FlexTaskReleaseStatusEnum;
|
mode?: 'taskManage' | 'normal';
|
|
taskName?: string;
|
startDate?: string;
|
endDate?: string;
|
address?: string;
|
creationTime?: string;
|
fee?: number;
|
applyWorkerCount?: number;
|
unit?: string;
|
releaseStatus?: API.FlexTaskReleaseStatusEnum;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
showActions: true,
|
mode: 'normal',
|
});
|
|
const emit = defineEmits<{
|
(e: 'edit'): void;
|
(e: 'detail'): void;
|
(e: 'publish'): void;
|
(e: 'stop'): void;
|
(e: 'copy'): void;
|
(e: 'delete'): void;
|
}>();
|
|
const menuList = computed(() => {
|
let _menuList = [];
|
_menuList.push(
|
{
|
name: '编辑',
|
value: ManageActions.Edit,
|
},
|
{
|
name: '查看详情',
|
value: ManageActions.Detail,
|
}
|
);
|
if (props.releaseStatus === FlexTaskReleaseStatusEnum.Stoping) {
|
_menuList.push({
|
name: '发布',
|
value: ManageActions.Publish,
|
});
|
}
|
if (props.releaseStatus === FlexTaskReleaseStatusEnum.Releasing) {
|
_menuList.push({
|
name: '停止发布',
|
value: ManageActions.Stop,
|
});
|
}
|
_menuList.push(
|
{
|
name: '复制',
|
value: ManageActions.Copy,
|
},
|
{
|
name: '删除',
|
value: ManageActions.Delete,
|
}
|
);
|
|
return _menuList;
|
});
|
|
function handleMore() {
|
Portal.add((key) => {
|
return h(
|
Portal.Container,
|
{ keyNumber: key, delayOpen: true },
|
{
|
default: ({ open, onClose }) =>
|
// @ts-ignore
|
h(ActionSheet, {
|
visible: open.value,
|
'onUpdate:visible': () => onClose(),
|
menuItems: menuList.value,
|
onChoose: (item) => {
|
handleEmit(item);
|
onClose();
|
},
|
}),
|
}
|
);
|
});
|
}
|
|
function handleEmit(action: { name: string; value: number }) {
|
switch (action.value) {
|
case ManageActions.Edit:
|
emit('edit');
|
break;
|
case ManageActions.Detail:
|
emit('detail');
|
break;
|
case ManageActions.Publish:
|
emit('publish');
|
break;
|
case ManageActions.Stop:
|
emit('stop');
|
break;
|
case ManageActions.Copy:
|
emit('copy');
|
break;
|
case ManageActions.Delete:
|
emit('delete');
|
break;
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.job-application-card-wrapper {
|
padding: 24px 32px;
|
margin-bottom: 24px;
|
background-color: #fff;
|
border-radius: 12px;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.job-application-card-title-wrapper {
|
display: flex;
|
align-items: center;
|
margin-bottom: 30px;
|
justify-content: space-between;
|
|
.job-application-card-title {
|
@include ellipsis;
|
font-size: 30px;
|
color: boleGetCssVar('text-color', 'primary');
|
line-height: 42px;
|
font-weight: bold;
|
}
|
|
.job-application-card-title-more {
|
flex-shrink: 0;
|
|
.more-btn-icon {
|
width: 42px;
|
height: 42px;
|
}
|
}
|
}
|
|
.job-application-card-line {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 24px;
|
font-size: 24px;
|
line-height: 32px;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.job-application-card-time {
|
color: boleGetCssVar('text-color', 'regular');
|
}
|
|
.job-application-card-company {
|
display: inline-flex;
|
align-items: center;
|
|
.job-application-card-company-tag {
|
width: 32px;
|
height: 32px;
|
background: #2a9e1b;
|
margin-right: 8px;
|
border-radius: 8px;
|
text-align: center;
|
line-height: 32px;
|
color: #fff;
|
font-size: 22px;
|
}
|
|
.job-application-card-company-address {
|
font-size: 22px;
|
color: boleGetCssVar('text-color', 'regular');
|
line-height: 32px;
|
flex: 1;
|
min-width: 0;
|
@include ellipsis;
|
}
|
}
|
|
.job-application-card-people {
|
font-size: 20px;
|
color: boleGetCssVar('text-color', 'secondary');
|
}
|
|
.job-application-card-publish-time {
|
color: boleGetCssVar('text-color', 'regular');
|
}
|
|
.nut-button {
|
min-width: 144rpx;
|
height: 52rpx;
|
font-size: 24rpx;
|
}
|
}
|
}
|
</style>
|
