EmploymentSite/h5app/src/views/pages/company/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.companyName }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>统一信用代码</ion-label>
          <ion-text>{{ dataModel.companyCode }}</ion-text>
        </div>
        <div class="form-detail">
          <ion-label>企业地址</ion-label>
          <ion-text>{{ dataModel.companyAddress }}</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.userName }}</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.companyDesc }}</ion-text>
        </div>
      </div>
    </ion-content>
    <ion-footer>
    </ion-footer>
  </ion-page>
</template>
<script lang="ts">
import {defineComponent, ref, reactive, watch, toRefs} from "vue";
import {getCompanyById} from "@/api/company";
import {useRoute, useRouter} from "vue-router";
import {onIonViewDidEnter} from "@ionic/vue";
import {arrowBackOutline} from 'ionicons/icons';


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

    const onPathForward = (pathValue:string,statusValue:any)=>{
      router.push({path: pathValue, query: {reload:1,id:formData.dataModel.companyID,status:statusValue}});
    };

    const loadData = async (companyID:any)=>{
      loading.value = true;
      const reqData = await getCompanyById(companyID,"60ea0d5b-a75c-11ed-a6c5-7085c2a9999e");
      formData.dataModel = reqData;
      console.log("dataModel",formData.dataModel);
      loading.value = false;
    };

    const reload = (companyID:any) => {
      loadData(companyID);
    };

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

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


    return {
      ...toRefs(formData),
      arrowBackOutline,
      route,
      loading,
      onPathForward,
      onBack,
      loadData,
      router,
    }
  },
  mounted() {
    const companyID = this.route.query.id;
    this.loadData(companyID);
  }
});
</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>