feat: 签约

wupengfei

21 小时以前 08740aaf0861ee8c11a8bf6a97a1219f7d198043

 apps/cMiniApp/src/subpackages/mine/mineAgreementSignDetail/InnerPage.vue

@@ -1,31 +1,137 @@
<template>
  <div class="mine-agreement-sign-detail">
    <MineAgreementSignDetailCard title="基本信息">
      <template #content>
        <MineAgreementSignDetailItem label="姓名" detail="姓名"></MineAgreementSignDetailItem>
      </template>
    </MineAgreementSignDetailCard>
  </div>
  <LoadingLayout>
    <ContentScrollView :paddingH="false" style="background-color: transparent">
      <div class="mine-agreement-sign-detail">
        <MineAgreementSignDetailCard title="基本信息">
          <template #content>
            <MineAgreementSignDetailItem
              label="协议编号"
              :detail="detail?.contractCode"
            ></MineAgreementSignDetailItem>
            <MineAgreementSignDetailItem
              label="协议状态"
              :detail="EnumTaskUserSignContractStatusText[detail?.userSignContractStatus]"
            ></MineAgreementSignDetailItem>
          </template>
        </MineAgreementSignDetailCard>
        <MineAgreementSignDetailCard title="签约方信息 - 员工">
          <template #content>
            <MineAgreementSignDetailItem
              label="员工姓名"
              :detail="detail?.name"
            ></MineAgreementSignDetailItem>
            <MineAgreementSignDetailItem
              label="证件类型"
              :detail="detail?.identityType"
            ></MineAgreementSignDetailItem>
            <MineAgreementSignDetailItem
              label="证件号码"
              :detail="detail?.identity"
            ></MineAgreementSignDetailItem>
            <MineAgreementSignDetailItem
              label="签约时间"
              :detail="format(detail?.userSignContractTime, 'YYYY-MM-DD')"
            ></MineAgreementSignDetailItem>
          </template>
        </MineAgreementSignDetailCard>
        <MineAgreementSignDetailCard title="签约方信息 - 公司主体">
          <template #content>
            <MineAgreementSignDetailItem
              label="主体类型"
              :detail="detail?.enterpriseType"
            ></MineAgreementSignDetailItem>
            <MineAgreementSignDetailItem
              label="签约主体"
              :detail="detail?.enterpriseName"
            ></MineAgreementSignDetailItem>
            <MineAgreementSignDetailItem
              label="签约时间"
              :detail="format(detail?.enterpriseSignContractTime, 'YYYY-MM-DD')"
            ></MineAgreementSignDetailItem>
          </template>
        </MineAgreementSignDetailCard>
        <MineAgreementSignDetailCard title="签约内容">
          <template #content>
            <MineAgreementSignDetailItem label="协议内容">
              <template #detail>
                <div class="detail-card-btn" @click="checkAgreement">查看协议</div>
              </template>
            </MineAgreementSignDetailItem>
          </template>
        </MineAgreementSignDetailCard>
      </div>
    </ContentScrollView>
    <PageFooter v-if="detail?.userSignContractStatus === EnumTaskUserSignContractStatus.Wait">
      <PageFooterBtn type="primary" @click="goToSign">去签约</PageFooterBtn>
    </PageFooter>
  </LoadingLayout>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/modules/user';
import { useQuery } from '@tanstack/vue-query';
import MineAgreementSignDetailCard from './MineAgreementSignDetailCard.vue';
import MineAgreementSignDetailItem from './MineAgreementSignDetailItem.vue';
import * as enterpriseEmployeeServices from '@12333/services/apiV2/enterpriseEmployee';
import {
  EnumTaskUserSignContractStatus,
  EnumTaskUserSignContractStatusText,
} from '@12333/constants';
import { format } from '@12333/utils';
import Taro from '@tarojs/taro';

defineOptions({
  name: 'InnerPage',
});

const queryState = reactive({});
const router = Taro.useRouter();
const id = router.params?.id;
const code = router.params?.code;

const userStore = useUserStore();
const {
  isLoading,
  isError,
  data: detail,
  refetch,
} = useQuery({
  queryKey: ['enterpriseEmployeeServices/getTaskInfo', id, code],
  queryFn: async () => {
    return await enterpriseEmployeeServices.getPersonalUserElectronSign(
      { id: id, code: code },
      {
        showLoading: false,
      }
    );
  },
  placeholderData: () => ({} as API.GetPersonalUserElectronSignQueryResult),
  onSuccess(data) {
    // if (data.isExistTradeChatRecord) setTrue();
  },
});

function checkAgreement() {
  const encodedUrl = encodeURIComponent(detail?.value?.contractUrl);
  Taro.navigateTo({
    url: `${RouterPath.mineAgreementSignDetail}?url=${encodedUrl}`,
  });
}

const goToSign = useAccessReal(() => {});
</script>

<style lang="scss">
@import '@/styles/common.scss';

.mine-agreement-sign-detail {
  padding: 20px 28px 0;
.mineAgreementSignDetail-page-wrapper {
  .mine-agreement-sign-detail {
    padding: 20px 28px 0;

    .mine-agreement-sign-detail-card {
      margin-bottom: 24px;
    }
  }

  .detail-card-btn {
    color: boleGetCssVar('color', 'primary');
  }
}
</style>