EmploymentSite/h5app/src/views/pages/wxMessage/companyInfo.vue

<template>
  <ion-content>
    <div class="user_info_title">
      您好！惠州就业驿站给您推荐《{{jobMgrModel.qzProfessionName}}》的岗位，请查阅！
    </div>
    <div class="user_panel user_baseinfo">
      <div class="user_info_img">
        <div class="user_text">
          <h4>{{companyInfo.companyName}}</h4>
          <p>{{jobMgrModel.zpProfessionName}}</p>
        </div>
      </div>
      <div class="user_info_flex">
        <div>
          <h6>{{postInfo.minSalary}} ~ {{postInfo.maxSalary}}</h6>
          <p>薪资</p>
        </div>
        <div>
          <h6>{{postInfo.cultureLevelName}}</h6>
          <p>学历</p>
        </div>
      </div>
      <div class="user_info_text">
        <span>{{companyInfo.companyAddress}}</span>
      </div>
    </div>
    <div class="user_panel user_baseinfo">
      <div class="user_panel_title">
        <h6>联系方式</h6>
      </div>
      <div class="user_info_label user_info_border">
        <ion-label>联系人</ion-label>
        <ion-text>{{companyInfo.userName}}</ion-text>
      </div>
      <div class="user_info_label">
        <ion-label>联系电话</ion-label>
        <ion-text><a :href="'tel://' + companyInfo.userMobile">{{companyInfo.userMobile}}</a></ion-text>
      </div>
    </div>
    <div class="user_panel user_baseinfo">
      <div class="user_panel_title">
        <h6>岗位要求</h6>
      </div>
      <div class="user_info_label2">
        <p>{{postInfo.postDesc}}</p>
      </div>
    </div>
  </ion-content>
</template>
<script>
import {defineComponent, ref} from "vue";
import {getListById} from "../../../api/recommendmgt";
import {getUrlParams} from "../../../utils/urlUtils";
import {alertController} from "@ionic/vue";
import dayjs from "dayjs";
import {getCompanyById} from "../../../api/company";
import {getPostByID} from "../../../api/post";

const presentAlert = async (message) => {
  const alert = await alertController.create({
    header: '错误！',
    message: message,
    buttons: [
      '确定'
    ],
  });

  await alert.present();
}

export default defineComponent({
  name: "wxMessage_jobUserInfo",
  setup() {
    const loading = ref(true);
    const urlParams = getUrlParams();
    const recommendmgtid = urlParams["recommendmgtid"];
    const jobMgrModel = ref({});
    const companyInfo = ref({});
    const postInfo = ref({});
    const getMgrData = async (id) => {
      loading.value = true;
      getListById(id).then((data) => {
        jobMgrModel.value = data;
        getCompanyInfo(jobMgrModel.value.companyId);
        getPostByInfo(jobMgrModel.value.postID);
      })
      loading.value = false;
    };

    const getCompanyInfo = async (id) => {
      getCompanyById(id).then((data) => {
        companyInfo.value = data;
      });
    };

    const getPostByInfo = async (id) => {
      getPostByID(id).then((data) => {
        postInfo.value = data;
      });
    };

    if (recommendmgtid) {
      getMgrData(recommendmgtid);
    } else {
      presentAlert("未获取到岗位推荐ID");
    }

    return {
      jobMgrModel,
      companyInfo,
      postInfo,
      dayjs
    }
  }
});
</script>
<style lang="less">
@border_color: #f1f5f7;
@p_color: #8c8f93;

.user_info_title {
  padding: 20px 20px 10px 20px;
  text-indent: 2em;
}

.user_panel {
  border: 1px solid @border_color;
  border-radius: 10px;
  margin: 10px;

  .user_panel_title {
    padding: 12px 10px 10px 10px;
    margin: 0 10px;
    border-bottom: 1px solid @border_color;

    h6 {
      margin: 0px;
    }
  }
}

.user_baseinfo {
  .user_info_img {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 10px;

    .user_text {
      padding-left: 10px;

      p {
        color: @p_color;
        font-size: 14px;
      }
    }
  }

  .user_info_flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
    vertical-align: middle;
    padding: 10px;
    margin: 0 10px;
    border-top: 1px solid @border_color;
    border-bottom: 1px solid @border_color;

    div {
      text-align: center;

      h6 {
        padding: 5px 0px;
        margin: 0px;
      }

      p {
        font-size: 14px;
        color: @p_color;
        padding: 5px 0px;
        margin: 0px;
      }
    }
  }

  .user_info_text {
    margin: 13px 20px;
    color: @p_color;
  }

  .user_info_label {
    display: flex;
    justify-content: space-between;
    vertical-align: middle;
    padding: 10px;
    margin: 0 10px;

    ion-label {
      min-width: 80px;
      padding: 0 5px 0 0;
    }

    ion-text {
      color: @p_color;
    }
  }

  .user_info_label2 {
    padding: 0 10px;
    margin: 0 10px;

    p {
      color: @p_color;
      font-size: 14px;
    }
  }

  .user_info_border {
    border-bottom: 1px solid @border_color;
  }
}
</style>