web-portal/src/views/corp/index.vue

<template>
  <div id="index">
    <recruitdetail-layout :needRight="false">
      <template v-slot:mainInfoTop>
        <el-row>
          <el-col :span="24">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">
                <i class="el-icon-s-home"></i>
                <span>网站首页</span>
              </el-breadcrumb-item>
              <el-breadcrumb-item class="webDetail">企业详情</el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
        </el-row>
        <share></share>
      </template>
      <template v-slot:mainLeft>
        <el-row class="webMessage" type="flex">
          <el-col :span="24">企业信息</el-col>
        </el-row>
        <el-row type="flex" class="baseRow">
          <el-col :span="3">
            <el-image style="width:5.25rem;height:5.25rem;" :src="corpInfo.logo_url" fit="fill"></el-image>
          </el-col>
          <el-col :span="18">
            <el-row id="corpname">
              <el-col :span="24">{{ corpInfo.corpname }}</el-col>
            </el-row>
            <el-row id="industry">
              <el-col :span="8">
                行业:<span>{{ corpInfo.industry }}</span>
              </el-col>
              <el-col :span="12">
                规模:<span>{{ corpInfo.scale }}</span>
              </el-col>
            </el-row>
            <el-row id="address">
              <el-col :span="8">
                城市:<span>{{ corpInfo.province }}-{{ corpInfo.city }}</span>
              </el-col>
              <el-col :span="16">
                地址:<span>{{ corpInfo.address }}</span>
              </el-col>
            </el-row>
            <el-row id="content1">
              <el-col :span="8">
                联系电话:<span>{{ corpInfo.job_tel }}</span>
              </el-col>
            </el-row>
            <el-row id="content2">
              <el-col :span="24">
                邮箱:<span>{{ corpInfo.job_email }}</span>
              </el-col>
            </el-row>
            <el-row id="other">
              <el-col :span="8">
                注册资金:<span>{{ corpInfo.reg_capital }}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                企业标签:
                <el-tag v-for="(item, index) in corpInfo.tags" :key="index">{{ item }}</el-tag>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" v-if="corpInfo.url">
                <el-link :underline="false" href="corpInfo.url">企业官网</el-link>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="3">
            <el-col :span="24">
              <el-button type="primary" @click="guanzhuAdd()">{{ guanzhu ? '关注企业' : '取消关注' }}</el-button>
            </el-col>
          </el-col>
        </el-row>
        <web-intro title="单位简介" :info="corpInfo"></web-intro>
        <web-jobs title="招聘职位" :info="jobList" @search="searchJobs"> </web-jobs>
      </template>
    </recruitdetail-layout>
    <toLogin :display="loginDialog" @close="loginDialog = false" title="请登录"></toLogin>
  </div>
</template>

<script>
import recruitdetailLayout from '@/layout/recruitdetail-layout.vue';
import toLogin from '@/components/to-login.vue';
import share from '@/layout/share.vue';
import webIntro from '@/layout/detail/web-intro.vue';
import webJobs from '@/layout/detail/web-jobs.vue';
import { mapActions, mapState } from 'vuex';
export default {
  name: 'index',
  props: {},
  components: {
    recruitdetailLayout,
    share,
    webIntro,
    webJobs,
    toLogin,
  },
  data: () => ({
    corpInfo: {},
    jobList: [],
    loginDialog: false,
    guanzhuData: [],
    guanzhu: true,
  }),
  created() {
    this.search();
    if (this.user.id) this.ticketSearch();
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    ...mapActions(['corpOperation', 'postOperation', 'userOperation', 'stucorpOperation']),
    async search() {
      if (!this.$route.query.id) return;
      let result = await this.corpOperation({ type: 'component', data: { corpid: this.$route.query.id } });
      if (`${result.errcode}` === '0') {
        this.$set(this, 'corpInfo', result.data);
        this.$set(this.corpInfo, `id`, this.$route.query.id);
      } else {
        this.$message.error(result.errmsg ? result.errmsg : 'error');
      }
    },
    async searchJobs(query) {
      console.log(query);
      let result = await this.postOperation({ type: 'list', data: { corpid: this.$route.query.id, ...query } });
      if (`${result.errcode}` === '0') {
        this.$set(this, `jobList`, result);
      }
    },
    async ticketSearch() {
      let result = await this.stucorpOperation({ type: 'search', data: { studid: this.user.id, corpid: this.$route.query.id } });
      this.$set(this, `guanzhuData`, result.data[0]);
      if (result.data && result.data.length > 0) {
        this.guanzhu = false;
      } else {
        this.guanzhu = true;
      }
    },
    async getTicket() {
      if (!this.user.id) {
        this.loginDialog = true;
        return false;
      } else {
        this.ticketSearch();
      }
    },
    async guanzhuAdd() {
      if (this.guanzhu) {
        let query = {};
        let result = await this.userOperation({ type: 'search', data: { studid: this.user.id } });
        let info = result.data.info;
        let body = {};
        body.studid = this.user.id;
        body.corpid = this.corpInfo.id;
        body.corpname = this.corpInfo.corpname;
        body.studname = info.xm;
        body.studschool = info.yx;
        result = await this.stucorpOperation({ type: 'add', data: { query: query, body: body } });
        this.$set(this, `guanzhuData`, result.data);
        this.$message.success('关注成功');
        this.guanzhu = false;
      } else {
        let result = await this.stucorpOperation({ type: 'delete', data: { id: this.guanzhuData.id } }); //this.guanzhuData.id
        if (`${result.errcode}` === '0') {
          this.$message.success('取消关注成功');
          this.ticketSearch();
        } else {
          this.$message.error(result.errmsg ? result.errmsg : '取消关注失败');
        }
        this.guanzhu = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.webMessage {
  border-left: 0.1875rem solid #850000;
  font-size: 1rem;
  line-height: 1.875rem;
  height: 1.875rem;
  padding: 0 0.9375rem;
  margin: 0 0 0 -0.9375rem;
}
.baseRow {
  padding: 1.25rem;
  font-size: 0.875rem;
  color: #333333;
  span {
    padding-left: 0.5rem;
  }
}
</style>