<template> 
 | 
  <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="EnumTaskUserSignContractStatusSignText[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 { useQuery } from '@tanstack/vue-query'; 
 | 
import MineAgreementSignDetailCard from './MineAgreementSignDetailCard.vue'; 
 | 
import MineAgreementSignDetailItem from './MineAgreementSignDetailItem.vue'; 
 | 
import * as enterpriseEmployeeServices from '@12333/services/apiV2/enterpriseEmployee'; 
 | 
import { 
 | 
  EnumElectronSignAccess, 
 | 
  EnumTaskUserSignContractStatus, 
 | 
  EnumTaskUserSignContractStatusSignText, 
 | 
} from '@12333/constants'; 
 | 
import { format, hiddenPhone, Message, setOSSLink, openDocument } from '@12333/utils'; 
 | 
import Taro from '@tarojs/taro'; 
 | 
  
 | 
defineOptions({ 
 | 
  name: 'InnerPage', 
 | 
}); 
 | 
  
 | 
const { userDetail } = useUser(); 
 | 
const router = Taro.useRouter(); 
 | 
const options = Taro.getLaunchOptionsSync(); 
 | 
//灵工Id 
 | 
const id = router.params?.id; 
 | 
const code = router.params?.code || options?.query?.scene; 
 | 
  
 | 
const { 
 | 
  isLoading, 
 | 
  isError, 
 | 
  data: detail, 
 | 
  refetch, 
 | 
} = useQuery({ 
 | 
  queryKey: ['enterpriseEmployeeServices/getPersonalUserElectronSign', 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() { 
 | 
  if (detail?.value?.userSignContractStatus === EnumTaskUserSignContractStatus.Wait) { 
 | 
    goToSign(); 
 | 
  } 
 | 
  if ( 
 | 
    detail?.value?.userSignContractStatus === EnumTaskUserSignContractStatus.Stop || 
 | 
    detail?.value?.userSignContractStatus === EnumTaskUserSignContractStatus.Pass 
 | 
  ) { 
 | 
    if (!detail?.value?.contractUrl) { 
 | 
      Message.warning('协议无法查看,请稍后再试'); 
 | 
      return; 
 | 
    } 
 | 
    openDocument(setOSSLink(detail?.value?.contractUrl)); 
 | 
  } 
 | 
} 
 | 
  
 | 
const goToSign = useAccessReal(async () => { 
 | 
  try { 
 | 
    let params: API.PersonalUserElectronSignCommand = { 
 | 
      id: detail.value?.id, 
 | 
    }; 
 | 
    let res = await enterpriseEmployeeServices.personalUserElectronSign(params); 
 | 
    if (res) { 
 | 
      if (detail.value?.contractTemplateAccess === EnumElectronSignAccess.AlipaySign) { 
 | 
        try { 
 | 
          await Message.confirm({ 
 | 
            message: `签约短信已发送至您${hiddenPhone( 
 | 
              detail.value?.contactPhoneNumber 
 | 
            )}的手机,请及时查看并签约`, 
 | 
            cancelText: '未收到短信', 
 | 
          }); 
 | 
        } catch (error) { 
 | 
          goToSign(); 
 | 
        } 
 | 
      } else { 
 | 
        const encodedUrl = encodeURIComponent(res.signContractLongUrl); 
 | 
        Taro.navigateTo({ url: `${RouterPath.extraPage}?url=${encodedUrl}` }); 
 | 
      } 
 | 
    } 
 | 
  } catch (error) {} 
 | 
}); 
 | 
Taro.useDidShow(() => { 
 | 
  refetch(); 
 | 
}); 
 | 
</script> 
 | 
  
 | 
<style lang="scss"> 
 | 
@import '@/styles/common.scss'; 
 | 
  
 | 
.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> 
 |