wupengfei
5 天以前 6244c26cd11f6446b39c0ad50c8223b379e5258a
apps/cMiniApp/src/subpackages/task/taskDetail/InnerPage.vue
@@ -1,72 +1,54 @@
<template>
  <LoadingLayout :loading="isLoading" :error="isError" :loadError="refetch">
    <ContentScrollView style="background-color: transparent">
      <Cell :title="'客房服务员'" titleSize="large">
      <TaskDetailView :detail="detail">
        <template #title-right>
          <img :src="IconAttentioActive" class="taskDetail-attention-icon" />
          <img
            v-if="from === 'apply'"
            :src="detail.isCollected ? IconAttentioActive : IconAttention"
            class="taskDetail-attention-icon"
            @click="handleAttention"
          />
          <div
            v-if="from === 'sign'"
            :style="{ color: GetPersonalApplyTaskInfosQueryStatusColor[detail.applyButton] }"
          >
            {{ GetTaskInfoQueryResultApplyButtonText[detail.applyButton] }}
          </div>
          <div
            v-if="from === 'hire'"
            :style="{ color: GetPersonalHireTaskInfosQueryStatusColor[detail.hireButton] }"
          >
            {{ GetTaskInfoQueryResultHireButtonText[detail.hireButton] }}
          </div>
          <div v-if="from === 'cancel'" :style="{ color: '#999999' }">已取消</div>
        </template>
        <div class="taskDetail-time">2025年2月5日 至 2025年3月5日</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>
          <TaskPrice :value="212" />
        </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>
          <div class="taskDetail-address-info-wrapper">
            <div class="taskDetail-address-info">宁波市鄞州区东钱湖大堰路188号宁波柏悦酒店</div>
            <RectRight :size="8" class="taskDetail-address-info-icon" />
          </div>
        </div>
      </Cell>
      <Cell :show-title="false">
        <CellChunk title="福利信息">
          <div class="taskDetail-welfare-list">
            <TaskDetailWelfareItem />
            <TaskDetailWelfareItem />
            <TaskDetailWelfareItem />
            <TaskDetailWelfareItem />
            <TaskDetailWelfareItem />
          </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>
            <div class="taskDetail-limit-list-item">
              <div class="taskDetail-limit-list-item-label">性别:</div>
              <div class="taskDetail-limit-list-item-text">不限</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>
          </div>
        </CellChunk>
        <CellChunk title="发布者信息">
          <CompanyDesc @click="goCompanyDetail"></CompanyDesc>
        </CellChunk>
      </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 #companyDesc>
          <CellChunk title="发布者信息">
            <CompanyDesc
              @click="goCompanyDetail"
              :enterpriseName="detail?.enterpriseName ?? ''"
              :taskCount="detail?.taskCount ?? 0"
              :isReal="detail?.isReal ?? false"
              :supplierEnterpriseName="detail?.supplierEnterpriseName ?? ''"
            ></CompanyDesc>
          </CellChunk>
        </template>
        <div class="safe-cell-content">
          该信息由用户自主发布,如遇虚假信息、诈骗、传销等违法违规行为,请立即
          <div class="safe-cell-content-btn" @click="goComplaint">投诉举报</div>
        </div>
      </Cell>
        <template #footer>
          <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>
        </template>
      </TaskDetailView>
    </ContentScrollView>
    <PageFooter>
      <PageFooterAction
@@ -75,8 +57,47 @@
        :isFlex="false"
        openType="share"
      ></PageFooterAction>
      <PageFooterAction :icon="IconPhone" text="手机" :isFlex="false"></PageFooterAction>
      <PageFooterBtn type="primary">报名(5人已报名)</PageFooterBtn>
      <PageFooterAction
        :icon="IconPhone"
        text="手机"
        :isFlex="false"
        @click="handleCall"
      ></PageFooterAction>
      <PageFooterBtn
        v-if="from === 'sign' && !!detail?.applyButton"
        type="primary"
        :disabled="detail?.applyButton === GetTaskInfoQueryResultApplyButton.WaitHire"
        @click="handleSign"
      >
        {{ GetTaskInfoQueryResultApplyButtonText[detail.applyButton] }}
      </PageFooterBtn>
      <PageFooterBtn
        v-if="
          from === 'hire' &&
          !(
            isContainCheckIn &&
            detail?.hireButton === GetTaskInfoQueryResultHireButton.ApplyCheckReceive
          )
        "
        type="primary"
        :disabled="detail?.hireButton !== GetTaskInfoQueryResultHireButton.ApplyCheckReceive"
        @click="handleHire"
      >
        {{ GetTaskInfoQueryResultHireButtonText[detail.hireButton] }}
      </PageFooterBtn>
      <template v-if="from === 'apply'">
        <PageFooterBtn
          v-if="detail?.releaseStatus === EnumTaskReleaseStatus.InProcess"
          type="primary"
          @click="handleApply"
          :disabled="!!detail?.hireStatus"
          >{{ `报名(${detail?.applyCount ?? 0}人已报名)` }}</PageFooterBtn
        >
        <PageFooterBtn v-if="detail.releaseStatus === EnumTaskReleaseStatus.Stopped" color="#999999"
          >已停止</PageFooterBtn
        >
      </template>
    </PageFooter>
  </LoadingLayout>
</template>
@@ -84,59 +105,136 @@
<script setup lang="ts">
import Taro from '@tarojs/taro';
import { useQuery } from '@tanstack/vue-query';
import * as orderServices from '@12333/services/api/Order';
import * as taskServices from '@12333/services/apiV2/task';
import * as taskUserServices from '@12333/services/apiV2/taskUser';
import { useToggle } from 'senin-mini/hooks';
import { TaskPrice } from '@12333/components';
import { TaskDetailView, Cell, CellChunk } from '@12333/components';
import IconAttention from '@/assets/task/icon-attention.png';
import IconAttentioActive from '@/assets/task/icon-attention-active.png';
import { RectRight } from '@nutui/icons-vue-taro';
import IconShare from '@/assets/task/icon-share.png';
import IconPhone from '@/assets/task/icon-phone.png';
import IconSafe from '@/assets/task/icon-safe.png';
import IconLocaltion from '@/assets/task/icon-localtion.png';
import './taskDetail.scss';
import TaskDetailWelfareItem from '../components/TaskDetailWelfareItem.vue';
import CompanyDesc from '../components/CompanyDesc.vue';
import { Message } from '@12333/utils';
import {
  EnumTaskReleaseStatus,
  GetPersonalApplyTaskInfosQueryStatusColor,
  GetTaskInfoQueryResultApplyButtonText,
  GetPersonalHireTaskInfosQueryStatusColor,
  GetTaskInfoQueryResultHireButtonText,
  GetTaskInfoQueryResultHireButton,
  GetTaskInfoQueryResultApplyButton,
  EnumTaskCheckReceiveMethod,
} from '@12333/constants';
import { useAccessLogin } from '@/hooks';
import { useTaskInfo } from '@12333/hooks';
import _ from 'lodash';
defineOptions({
  name: 'InnerPage',
});
/**
 * TODO 缺少 投诉举报接口
 */
const { userDetail } = useUser();
const router = Taro.useRouter();
const taskId = router.params?.id ?? '';
const id = router.params?.id ?? '';
const from = router.params?.from ?? '';
const {
  isLoading,
  isError,
  data: detail,
  refetch,
} = useQuery({
  queryKey: ['orderServices/getOrdeForDetail', taskId],
  queryFn: async () => {
    return await orderServices.getOrdeForDetail(
      { id: taskId },
      {
        showLoading: false,
      }
    );
  },
  placeholderData: () => ({} as API.OrderInfoDto),
  onSuccess(data) {
    if (data.isExistTradeChatRecord) setTrue();
  },
});
const { isLoading, isError, detail, refetch, isContainCheckIn } = useTaskInfo({ id });
const { isCollapse, setTrue } = useToggle();
function goComplaint() {
const goComplaint = useAccessLogin(() => {
  Taro.navigateTo({
    url: `${RouterPath.complaint}?id=${taskId}`,
    url: `${RouterPath.complaint}?id=${id}`,
  });
});
const goCompanyDetail = useAccessLogin(() => {
  if (detail.value.enterpriseId) {
    Taro.navigateTo({
      url: `${RouterPath.companyDetail}?id=${detail.value.enterpriseId}&supplierEnterpriseId=${
        detail.value.supplierEnterpriseId ?? ''
      }`,
    });
  }
});
const handleApply = _.debounce(
  useAccessReal(
    async () => {
      try {
        let params: API.ApplyTaskCommand = {
          ids: [id],
        };
        let res = await taskUserServices.applyTask(params);
        if (res) {
          Message.success('报名成功');
          refetch({ type: 'inactive' });
        }
      } catch (error) {}
    },
    { message: '实名成功后才可报名,请前往实名认证' }
  ),
  1000,
  {
    leading: true,
    trailing: false,
  }
);
const handleAttention = useAccessLogin(async () => {
  try {
    // await Message.confirm({
    //   message: `确定${detail.value?.isCollected ? '取消收藏' : '收藏'}吗?`,
    // });
    let params: API.CollectTaskCommand = {
      ids: [id],
      isCollect: !detail.value?.isCollected,
    };
    let res = await taskUserServices.collectTask(params);
    if (res) {
      refetch({ type: 'inactive' });
      // Message.success('操作成功', {
      //   onClosed() {
      //     refetch({ type: 'inactive' });
      //   },
      // });
    }
  } catch (error) {}
});
const handleCall = useAccessLogin(() => {
  if (detail.value.contactPhoneNumber) {
    Taro.makePhoneCall({
      phoneNumber: detail.value.contactPhoneNumber,
    });
  }
});
function handleHire() {
  Taro.navigateTo({
    url: `${RouterPath.taskSubmitCheck}?id=${id}`,
  });
}
const handleSign = useAccessReal(() => {
  Taro.navigateTo({
    url: `${RouterPath.mineAgreementSignDetail}?id=${detail.value?.enterpriseEmployeeId}`,
  });
});
function goMap() {
  Taro.openLocation({
    latitude: detail.value?.latitude,
    longitude: detail.value?.longitude,
    scale: 18,
  });
}
function goCompanyDetail() {
  Taro.navigateTo({
    url: `${RouterPath.companyDetail}?id=${taskId}`,
  });
}
Taro.useDidShow(() => {
  refetch();
});
</script>