<template>
|
<PageLayoutWithBg title="订单详情" class="orderDetail-page-wrapper" :need-auth="false">
|
<LoadingLayout :loading="isLoading" :error="isError" :loadError="refetch">
|
<ContentScrollView style="background-color: transparent">
|
<Cell :title="detail?.orderName ?? ''" titleSize="large">
|
<template #title-right>
|
<div class="orderDetail-supplierRefund">
|
{{ detail?.integratedSalary ?? 0 }}元
|
<div class="orderDetail-supplierRefund-unit">
|
/{{ SalaryTimeTypeEnumUnitExact[detail?.salaryTimeType] }}
|
</div>
|
</div>
|
</template>
|
<div class="orderDetail-industryTypeName">
|
{{ detail?.industryTypeName ?? '' }}
|
</div>
|
<div class="detail-page-avatar-wrapper">
|
<CardAvatar
|
:src="detail?.avatarUrl"
|
:name="detail?.contact"
|
:jobTitle="detail?.jobTitle"
|
:isCertified="detail?.isCertified"
|
:userId="detail?.userId"
|
/>
|
<div class="detail-page-time">
|
发布于：{{ format(detail?.lastShelfTime, 'YYYY-MM-DD HH:mm') }}
|
</div>
|
</div>
|
</Cell>
|
<Cell title="基本信息">
|
<div class="detail-info-list">
|
<div class="detail-info-list-item">
|
<div class="detail-info-list-item-label">需求人数：</div>
|
<div class="detail-info-list-item-content">{{ _hireNumber }}人</div>
|
</div>
|
<div class="detail-info-list-item">
|
<div class="detail-info-list-item-label">年龄范围：</div>
|
<div class="detail-info-list-item-content">
|
{{ detail?.ageStart ?? 0 }}-{{ detail?.ageEnd ?? 0 }}周岁
|
</div>
|
</div>
|
<div class="detail-info-list-item">
|
<div class="detail-info-list-item-label">性别要求：</div>
|
<div class="detail-info-list-item-content">
|
{{ SexRequirementText[detail?.sexRequirement] }}
|
</div>
|
</div>
|
<div class="detail-info-list-item">
|
<div class="detail-info-list-item-label">需求城市：</div>
|
<div class="detail-info-list-item-content">{{ address }}</div>
|
</div>
|
</div>
|
<div class="order-detail-supplier-refund">
|
<div class="order-detail-supplier-refund-tag">合作</div>
|
<div class="order-detail-supplier-refund-text">
|
{{ supplierRefund }}，{{ rebateModeText }}
|
</div>
|
</div>
|
</Cell>
|
<Cell title="工作内容">
|
<div class="detail-introduction">
|
{{ detail?.jobIntroduction ?? '' }}
|
</div>
|
</Cell>
|
<Cell title="工作环境" v-if="imageList.length > 0">
|
<ImageGrid
|
class="friend-message-content-image-grid"
|
:imageList="imageList"
|
:columnNum="4"
|
/>
|
</Cell>
|
<Cell>
|
<template #title>
|
<div class="safe-cell-title-wrapper">
|
<img :src="IconSafe" class="safe-cell-title-icon" />
|
<div class="safe-cell-title">安全提示</div>
|
</div>
|
</template>
|
<div class="safe-cell-content">
|
该信息由用户自主发布，如遇虚假信息、诈骗、传销等违法违规行为，请立即
|
<div class="safe-cell-content-btn" @click="goComplaint">投诉举报</div>
|
</div>
|
</Cell>
|
</ContentScrollView>
|
<PageFooter>
|
<PageFooterAction
|
:icon="IconShare"
|
text="分享"
|
:isFlex="false"
|
openType="share"
|
></PageFooterAction>
|
|
<PageFooterBtn v-if="isSelf || isCollapse" type="primary" @click="makePhoneCall">{{
|
contactPhone
|
}}</PageFooterBtn>
|
<PageFooterBtn v-else type="primary" @click="handleGoAcontact">我要接单</PageFooterBtn>
|
</PageFooter>
|
</LoadingLayout>
|
</PageLayoutWithBg>
|
</template>
|
|
<script setup lang="ts">
|
import Taro from '@tarojs/taro';
|
import { useQuery } from '@tanstack/vue-query';
|
import * as orderServices from '@12333/services/api/Order';
|
import { OrderUtils, filterJoin, setOSSLink, format } from '@12333/utils';
|
import {
|
HireType,
|
SalaryTimeTypeEnumUnitExact,
|
SexRequirementText,
|
MatchMakingIdentityEnum,
|
} from '@12333/constants';
|
import { ImageGrid } from '@12333/components';
|
import IconSafe from '@/assets/order/icon-safe.png';
|
import IconShare from '@/assets/order/icon-share.png';
|
import {
|
useUser,
|
useAccessLogin,
|
useToggleMatchMakingIdentityOnLaunch,
|
useAccessPersonalInfo,
|
} from '@/hooks';
|
import { useToggle } from 'senin-mini/hooks';
|
|
defineOptions({
|
name: 'orderDetail',
|
});
|
|
const router = Taro.useRouter();
|
const orderId = router.params?.id ?? '';
|
|
const { userDetail } = useUser();
|
|
useToggleMatchMakingIdentityOnLaunch({
|
matchMakingIdentity: MatchMakingIdentityEnum.Contributors,
|
});
|
|
const {
|
isLoading,
|
isError,
|
data: detail,
|
refetch,
|
} = useQuery({
|
queryKey: ['orderServices/getOrdeForDetail', orderId],
|
queryFn: async () => {
|
return await orderServices.getOrdeForDetail(
|
{ id: orderId },
|
{
|
showLoading: false,
|
}
|
);
|
},
|
placeholderData: () => ({} as API.OrderInfoDto),
|
onSuccess(data) {
|
if (data.isExistTradeChatRecord) setTrue();
|
},
|
});
|
|
const isSelf = computed(() => userDetail.value?.userId === detail.value?.userId);
|
|
const _hireNumber = computed(() =>
|
OrderUtils.getHireNumber(
|
detail.value?.hireType,
|
detail.value?.hireNumber,
|
detail.value?.hireEndNumber
|
)
|
);
|
|
const supplierRefund = computed(() => {
|
if (detail.value?.orderSupplierRefundInfo) {
|
return OrderUtils.getSupplierRefund(detail.value?.orderSupplierRefundInfo);
|
}
|
return '';
|
});
|
|
const rebateModeText = computed(() => {
|
if (detail.value?.orderSupplierRefundInfo) {
|
return OrderUtils.getRebateModeText(detail.value?.orderSupplierRefundInfo);
|
}
|
return '';
|
});
|
|
const address = computed(() =>
|
filterJoin([detail.value.provinceName ?? '', detail.value.cityName ?? ''])
|
);
|
|
const imageList = computed(() => {
|
if (detail.value?.src?.length > 0) {
|
return detail.value?.src.map((item) => ({ fileUrl: setOSSLink(item) }));
|
}
|
|
return [];
|
});
|
|
const contactPhone = computed(() => {
|
if (detail.value) {
|
return detail.value?.parkOrHRSimpleInfo?.contactPhone
|
? detail.value?.parkOrHRSimpleInfo?.contactPhone
|
: detail.value?.contactNumber
|
? detail.value?.contactNumber
|
: '';
|
}
|
return '';
|
});
|
|
Taro.showShareMenu({
|
showShareItems: ['shareAppMessage', 'shareTimeline'],
|
});
|
|
Taro.useShareAppMessage((res) => {
|
return {
|
title: detail.value?.orderName ?? '',
|
};
|
});
|
|
function goComplaint() {
|
Taro.navigateTo({
|
url: `${RouterPath.complaint}?id=${orderId}`,
|
});
|
}
|
|
const { isCollapse, setTrue } = useToggle();
|
|
const handleGoAcontact = useAccessPersonalInfo(async () => {
|
try {
|
let res = await orderServices.addTradeChatRecord({
|
relationalId: orderId,
|
applyUserId: userDetail.value?.userId,
|
});
|
if (res) {
|
setTrue();
|
}
|
} catch (error) {}
|
});
|
|
const makePhoneCall = useAccessPersonalInfo(() => {
|
if (contactPhone.value) {
|
Taro.makePhoneCall({
|
phoneNumber: contactPhone.value,
|
});
|
}
|
});
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
@import './common.scss';
|
|
.orderDetail-page-wrapper {
|
.orderDetail-supplierRefund {
|
font-weight: 600;
|
font-size: 28px;
|
color: boleGetCssVar('color', 'primary');
|
line-height: 40px;
|
flex-shrink: 0;
|
|
.orderDetail-supplierRefund-unit {
|
color: boleGetCssVar('text-color', 'secondary');
|
display: inline;
|
font-size: 24px;
|
}
|
}
|
|
.order-detail-supplier-refund {
|
display: flex;
|
align-items: center;
|
|
.order-detail-supplier-refund-tag {
|
height: 40px;
|
background: #edf2ff;
|
border-radius: 4px;
|
padding: 0 8px;
|
margin-right: 16px;
|
font-weight: 400;
|
font-size: 24px;
|
color: boleGetCssVar('color', 'primary');
|
line-height: 34px;
|
flex-shrink: 0;
|
}
|
|
.order-detail-supplier-refund-text {
|
height: 40px;
|
background: #f9faff;
|
padding: 0 8px;
|
font-weight: 400;
|
font-size: 28px;
|
color: boleGetCssVar('text-color', 'primary');
|
line-height: 40px;
|
@include ellipsis;
|
}
|
}
|
}
|
</style>
|
