EmploymentSite/h5app/src/views/pages/jobhunt/detail.vue

<template>
  <ion-page>
    <ion-header class="header-theme2">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-icon :icon="arrowBackOutline" @click="onBack"></ion-icon>
        </ion-buttons>
        <ion-title>
          求职人员详情
        </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <div class="bw-vue-form">
        <div class="form-detail">
          <ion-label>姓名</ion-label>
          <ion-text>{{ dataModel.name }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>身份证号码</ion-label>
          <ion-text>{{ dataModel.identityNumberShow }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>性别</ion-label>
          <ion-text>{{ dataModel.genderName }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>联系电话</ion-label>
          <ion-text>{{ dataModel.userMobile }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>所属驿站</ion-label>
          <ion-text>{{ dataModel.siteName }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>所属街道</ion-label>
          <ion-text>{{ dataModel.regionName+"-"+dataModel.streetName }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>居住地址</ion-label>
          <ion-text>{{ dataModel.address }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>就业状态</ion-label>
          <ion-text>{{ dataModel.jobStatusName }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>重点人员类别</ion-label>
          <ion-text>{{ dataModel.keyTypeName }}</ion-text>
        </div>

        <div class="form-detail">
          <ion-label>社会保障卡号</ion-label>
          <ion-text>{{ dataModel.socialSecurityCard }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>政治面貌</ion-label>
          <ion-text>{{ dataModel.politicsStatusName }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>民族</ion-label>
          <ion-text>{{ dataModel.nationName }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>毕业院校</ion-label>
          <ion-text>{{ dataModel.finishSchool }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>专业</ion-label>
          <ion-text>{{ dataModel.profession }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>是否非全日制</ion-label>
          <ion-text>{{ dataModel.isFullTimeName }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>职业资格类别</ion-label>
          <ion-text style="width: 52%;text-align:right;">{{ dataModel.occupationalCategoryName }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>职业资格等级</ion-label>
          <ion-text>{{ dataModel.occupationalLevelName }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>籍贯</ion-label>
          <ion-text>{{ dataModel.nativePlace }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>出生日期</ion-label>
          <ion-text v-if="dataModel.birthDay!=null">{{ dayjs(dataModel.birthDay).format("YYYY-MM-DD") }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>户口性质</ion-label>
          <ion-text>{{ dataModel.familyNatureName }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>最高学历</ion-label>
          <ion-text>{{ dataModel.cultureName}}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>健康状况</ion-label>
          <ion-text>{{ dataModel.healthName }}</ion-text>
        </div>
        <div class="form-detail" name="bloodTypeName">
          <ion-label>血型</ion-label>
          <ion-text>{{ dataModel.bloodTypeName }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>身高</ion-label>
          <ion-text v-if="dataModel.height!=null">{{ dataModel.height +"cm"}}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>视力</ion-label>
          <ion-text>{{ dataModel.vision}}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>体重</ion-label>
          <ion-text  v-if="dataModel.weight!=null">{{ dataModel.weight +"kg"}}</ion-text>
        </div>
        <div class="form-detail" name="maritalStatusName">
          <ion-label>婚姻状况</ion-label>
          <ion-text>{{ dataModel.maritalStatusName}}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>联系人</ion-label>
          <ion-text>{{ dataModel.userName}}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>电子邮箱</ion-label>
          <ion-text>{{ dataModel.email}}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>家庭住址</ion-label>
          <ion-text>{{ dataModel.familyAddress}}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>兴趣爱好</ion-label>
          <ion-text>{{ dataModel.hobby}}</ion-text>
        </div>
      </div>
    </ion-content>
    <ion-footer>
    </ion-footer>
  </ion-page>
</template>
<script lang="ts">
import {defineComponent, ref, reactive, toRefs} from "vue";
import {getJobUserById} from "@/api/jobUserInfo";
import {useRoute, useRouter} from "vue-router";
import {onIonViewDidEnter} from "@ionic/vue";
import {arrowBackOutline} from 'ionicons/icons';
import dayjs from "dayjs";

interface FormData{
  dataModel:any
}
export default defineComponent({
  name: 'UserDetail',
  setup() {
    const router = useRouter();
    const route = useRoute();
    const loading = ref<boolean>(false);
    const formData = reactive<FormData>({
      dataModel: {
      }
    });
    const onBack=()=>{
      router.push({path:'./list',query:{reload:1}});
    };

    const loadData = async (jobUserID:any,loginUserId:any)=>{
      loading.value = true;
      const reqData = await getJobUserById(jobUserID,loginUserId);
      formData.dataModel = reqData;
      const replaceStr =  formData.dataModel.identityNumber.substring(3,15);
      formData.dataModel.identityNumberShow = String(formData.dataModel.identityNumber).replace(replaceStr,'************');
      loading.value = false;
    };

    const reload = (jobUserID:any,loginUserID:any) => {
      loadData(jobUserID,loginUserID);
    };

    onIonViewDidEnter(() => {
      if (route.query.reload) {
        reload(route.query.id,route.query.loginUserID)
      }
    });


    return {
      ...toRefs(formData),
      arrowBackOutline,
      route,
      loading,
      onBack,
      loadData,
      router,
      dayjs,
    }
  }
});
</script>

<style lang="less">
ion-item {
  --border-width: 0;
  --border-style: none;

  ion-label, ion-input, ion-select, ion-datetime-button {
    font-size: 14px !important;
  }
}

.stepFlex {
  margin: 0;
  display: flex;
  width: 100%;

  .stepFlex-item {
    position: relative;
    flex: 1;
    text-align: center;
    margin-top: -10px;

    .stepFlex-item-label {
      padding-top: 60px;
      font-size: 14px;

      .stepFlex-item-label-title {
        margin-top: 30px;
      }

      .stepFlex-item-label-desc {
        margin-top: 5px;
        color: #b9b9bd;
      }
    }
  }

  .greenCircle {
    top: calc(50% - 15px);
    left: calc(50% - 4px);
    position: absolute;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #31A2FE;
  }

  .now {
    top: calc(50% - 18px);
    left: calc(50% - 8px);
    position: absolute;
    z-index: 3;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #31A2FE;
    border: 4px solid #c5e8f9;
  }

  .grayCircle {
    top: calc(50% - 15px);
    left: calc(50% - 4px);
    position: absolute;
    z-index: 2;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
  }

  .greenLine {
    width: 100%;
    top: calc(50% - 11px);
    left: calc(50% - 2px);
    height: 2px;
    background-color: #31A2FE;
    position: absolute;
  }

  .grayLine {
    height: 0;
    border: 1px dashed #ccc;
    width: 100%;
    top: calc(50% - 11px);
    left: calc(50% - 2px);
    position: absolute;
  }

}


</style>