veterans_company/src/views/jobdetails.vue

<template>
  <div class="">
    <Header />
    <Mainmenu />
    <section class="job-base">
      <div class="wrap">
        <div class="name">{{ companyInfo.companyName }}</div>
        <div class="position">{{ jobdetails.postName }}</div>
        <div class="details">
          <span
            >{{ jobdetails.lowestSalary }}K-{{
              jobdetails.highestSalary
            }}K</span
          >
          工作年限:{{ filterworkYear(jobdetails.workYear) }} /
          {{ filterEducations(jobdetails.educationBg) }}
        </div>
      </div>
    </section>
    <section class="page-con wrap">
      <div class="left-content">
        <div class="job-details">
          <div class="big-title">职位描述：</div>
          <div v-html="jobdetails.description"></div>
          <!-- <div class="block">
            <div class="title">岗位职责</div>
            <ul>
              <li>
                1. 有优秀互联网或成熟作品优先；熟悉 iOS、 Android 平台设计原则；
              </li>
              <li>
                2. 会使用AE等动画交互软件提交完整的视觉交互 demo，像素控；
              </li>
              <li>3. 会使用sketch软件；</li>
              <li>
                4.
                较强的自控力及自驱力，灵活的设计思维，优秀的自我成长及思考能力；
              </li>
              <li>
                5.
                具有一定美术功底、良好的设计创新、逻辑思维以及设计需求分析能力；
              </li>
            </ul>
          </div>
          <div class="block">
            <div class="title">任职资格</div>
            <ul>
              <li>
                1. 有优秀互联网或成熟作品优先；熟悉 iOS、 Android 平台设计原则；
              </li>
              <li>
                2. 会使用AE等动画交互软件提交完整的视觉交互 demo，像素控；
              </li>
              <li>3. 会使用sketch软件；</li>
              <li>
                4.
                较强的自控力及自驱力，灵活的设计思维，优秀的自我成长及思考能力；
              </li>
              <li>
                5.
                具有一定美术功底、良好的设计创新、逻辑思维以及设计需求分析能力；
              </li>
            </ul>
          </div>
          <div class="block">
            <div class="title">福利待遇</div>
            <ul>
              <li>五险一金、全勤奖、带薪年假、定期体检、员工旅游、节假福利</li>
            </ul>
          </div>
          <div class="block">
            <div class="title">工作地点</div>
            <ul>
              <li>贵阳市乌当区-水东路</li>
            </ul>
          </div> -->
        </div>
        <!-- job-details end -->
      </div>
      <div class="base-info">
        <div class="name">公司基本信息</div>
        <div class="base-info-item">
          <i class="el-icon-s-marketing"></i
          >{{ filterTradeStatus(companyInfo.trade) }}
        </div>
        <div class="base-info-item">
          <i class="el-icon-s-custom"></i
          >{{ filterScopeStatus(companyInfo.scope) }}
        </div>
        <div class="base-info-item">
          <i class="el-icon-location"></i>{{ companyInfo.companyAddress }}
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import Header from "@/components/header.vue";
import Mainmenu from "@/components/mainmenu.vue";
import {
  getCompanyInfo,
  getJobdetails,
  getTrade,
  getScope,
  getDicData,
} from "@/utils/api";
export default {
  name: "",
  components: {
    Header,
    Mainmenu,
  },
  data() {
    return {
      id: "",
      companyInfo: {},
      jobdetails: {},
      trade: [],
      scope: [],
      educations: [],
      workYear: [],
    };
  },
  computed: {
    filterEducations() {
      return function (value) {
        let v = "";
        for (let i = 0; i < this.educations.length; i++) {
          // console.log("value", value);
          // console.log("value", this.educations[i]);
          let item = this.educations[i];
          if (value == item.dictValue) {
            v = item.dictLabel;
            break;
          }
        }
        return v;
      };
    },
    filterTradeStatus() {
      return function (value) {
        let v = "";
        for (let i = 0; i < this.trade.length; i++) {
          let item = this.trade[i];
          if (value == item.value) {
            v = item.label;
            break;
          }
        }
        return v;
      };
    },
    filterScopeStatus() {
      return function (value) {
        let v = "";
        for (let i = 0; i < this.scope.length; i++) {
          let item = this.scope[i];
          if (value == item.value) {
            v = item.label;
            break;
          }
        }
        return v;
      };
    },
    filterworkYear() {
      return function (value) {
        let v = "";
        for (let i = 0; i < this.workYear.length; i++) {
          // console.log("value", value);
          // console.log("value", this.educations[i]);
          let item = this.workYear[i];
          if (value == item.dictValue) {
            v = item.dictLabel;
            break;
          }
        }
        return v;
      };
    },
  },
  created() {
    this.id = this.$route.query.id;
    this.handleGetJobdetails();
    this.getinfo();
    this.getEducations();
    this.getWorkYear();
  },
  mounted() {
    this.handelGetTrade();
    this.handelGetScope();
  },
  methods: {
    getWorkYear() {
      getDicData("work_year").then((res) => {
        this.workYear = res.data;
      });
    },
    getinfo() {
      getCompanyInfo()
        .then((res) => {
          console.log("fetchList", res);
          this.companyInfo = res.data;
        })
        .catch((err) => {
          console.log("fetchList err", err);
        });
    },
    handleGetJobdetails() {
      getJobdetails({ id: this.id })
        .then((res) => {
          console.log("getJobdetails", res);
          this.jobdetails = res.data;
        })
        .catch((err) => {
          console.log("getJobdetails err", err);
        });
    },
    getEducations() {
      getDicData("degr_educ").then((res) => {
        this.educations = res.data;
      });
    },
    handelGetTrade() {
      let that = this;
      getTrade()
        .then((res) => {
          console.log("getTrade", res);
          if (res.code == 200) {
            res.data.map(function (currentValue) {
              that.trade.push({
                value: currentValue.dictValue,
                label: currentValue.dictLabel,
              });
            });
          }
        })
        .catch((err) => {
          console.log("getTrade err", err);
        });
    },
    handelGetScope() {
      let that = this;
      getScope()
        .then((res) => {
          console.log("getScope", res);
          if (res.code == 200) {
            res.data.map(function (currentValue) {
              that.scope.push({
                value: currentValue.dictValue,
                label: currentValue.dictLabel,
              });
            });
          }
        })
        .catch((err) => {
          console.log("getScope err", err);
        });
    },
  },
};
</script>

<style lang='scss' scoped>
.left-content {
  padding-top: 0;
}
//@import url()
.job-base {
  background: #eee;
  padding: 32px 0 42px;
  .name {
    font-size: 14px;
    font-weight: 400;
    color: #717171;
    line-height: 20px;
    margin-bottom: 15px;
  }
  .position {
    font-size: 28px;
    font-weight: 400;
    color: #1f1f1f;
    line-height: 40px;
    letter-spacing: 1px;
    margin-bottom: 18px;
  }
  .details {
    font-size: 14px;
    font-weight: 400;
    color: #4d4d4d;
    line-height: 20px;
    span {
      color: #ff5900;
      margin-right: 10px;
    }
  }
}
.job-details {
  .big-title {
    font-size: 22px;
    font-weight: 500;
    color: #1c1c1c;
    line-height: 30px;
    letter-spacing: 1px;
    margin-bottom: 53px;
  }
  .block {
    margin-bottom: 20px;
    .title {
      font-size: 18px;
      font-weight: 500;
      color: #1c1c1c;
      line-height: 25px;
      margin-bottom: 6px;
    }
    ul {
      li {
        font-size: 14px;
        font-weight: 400;
        color: #464646;
        line-height: 30px;
      }
    }
  }
}
</style>