menduner/src/components/Enterprise/details.vue

<template>
  <div class="default-width banner px-6">
    <div class="banner-title" v-if="Object.keys(info).length">
      <div class="float-left d-flex align-center">
        <v-img width="60" height="60" src="https://img.bosszhipin.com/beijin/upload/com/workfeel/20230717/7bf6f160950405e9fc11e7a96d11653d52ec81818272dd47f295e2d75f5f151de5ea2c19108052a3.png"></v-img>
        <div class="ml-4">
          <div class="contact-name">
            {{ info.enterprise.name }}
            <v-icon color="primary" size="24">mdi-shield-check</v-icon>
          </div>
          <div class="contact-info">{{ info.business.type }} · 100-499人 · 科技推广与应用服务业</div>
        </div>
      </div>
      <div class="float-right d-flex">
        <div class="tools-box text-center">
          <div class="tools-box-number">{{ info.jobAdvertisedCount }}</div>
          <div class="tools-box-text">职位在招</div>
        </div>
        <v-icon class="ml-5 mr-2" size="25" :color="info.attention ? 'primary' : ''">{{ info.attention ? 'mdi-heart' : 'mdi-heart-outline' }}</v-icon>
        <v-icon size="25">mdi-alert-outline</v-icon> 
      </div>
    </div>
    <v-divider></v-divider>
    <div class="mt-3">
      <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f3f3f3">
        <v-tab :value="1">公司简介</v-tab>
        <v-tab :value="2">在招职位({{ info.jobAdvertisedCount }})</v-tab>
      </v-tabs>
      <div class="d-flex" v-if="Object.keys(info).length">
        <div class="content-left">
          <EnterpriseIntroduction v-if="tab === 1" :info="info" />
          <recruitmentPositions v-else />
        </div>
        <div class="content-right">
          <div class="welfare">
            <h4>公司福利</h4>
            <div class="mt-3 welfare-tags">
              <v-chip size="small" label v-for="(k, i) in info.enterprise.welfareList" :key="i" class="mr-1 mb-2" color="primary">{{ k }}</v-chip>
            </div>
          </div>
          <div class="welfare my-3">
            <h4>工商信息</h4>
            <div :class="['mt-2', 'business-item']" v-for="(val, index) in businessList" :key="val.value">
              <div>{{ val.label }}</div>
              <div class="business-value ellipsis">{{ info.business[val.value] }}</div>
              <div :class="['my-3', {'border-bottom-dashed': index === businessList.length - 1 }]"></div>
            </div>
            <div class="business-source">
              数据来源：企查查
            </div>
          </div>
          <div class="welfare">
            <h4>4位经理正在招聘</h4>
            <div class="d-flex mt-2" v-for="(val, i) in recruitmentSpecialist" :key="i">
              <v-avatar>
                <v-img :src="val.avatar"></v-img>
              </v-avatar>
              <div class="ml-2">
                <div class="position-name ellipsis">{{ val.name }} · {{ val.position }}</div>
                <div class="desc ellipsis">{{ val.desc }}</div>
              </div>
            </div>
            <div class="text-center mt-3">
              <v-btn class="buttons" color="primary" variant="outlined">{{ $t('position.allBtn') }}</v-btn>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'enterprise-details'})
import { ref } from 'vue'
import EnterpriseIntroduction from './components/introduction.vue'
import recruitmentPositions from './components/positions.vue'
import { getEnterpriseDetails } from '@/api/enterprise'

const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})
const tab = ref(1)

// 企业详情
const info = ref({})
const getDetails = async () => {
  const id = Number(props.id)
  if (!id) return
  const data = await getEnterpriseDetails({ id })
  info.value = data
  console.log(info.value, 'value')
}
getDetails()

// 工商信息
const businessList = [
  { label: '企业类型：', value: 'type' },
  { label: '统一社会信用代码：', value: 'code' },
  { label: '成立日期：', value: 'establishmentTime' },
  { label: '注册资本：', value: 'registeredCapital' }
]

// 企业招聘人员
const recruitmentSpecialist = [
  { name: '陈北方', position: '人事经理', desc: '正在招聘“运营专员”等职位11111', avatar: 'https://cdn.vuetifyjs.com/images/john.jpg' },
  { name: '蔡艳生', position: '人事经理', desc: '正在招聘“产品助理”等职位', avatar: 'https://avatars0.githubusercontent.com/u/9064066?v=4&s=460' },
  { name: '徐有道', position: '招聘专员', desc: '正在招聘“运营专员”等职位', avatar: 'https://cdn.vuetifyjs.com/images/john.jpg' },
  { name: '方晓', position: '人事经理', desc: '正在招聘“运营专员”等职位', avatar: 'https://avatars0.githubusercontent.com/u/9064066?v=4&s=460' }
]
</script>

<style scoped lang="scss">
.banner {
  background-color: #fff;
  padding: 0 0 20px;
}
.banner-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 125px;
}
.content-left {
  width: 844px;
  padding: 20px;
}
.content-right {
  flex: 1;
  padding: 20px 20px 0 0;
}
.contact {
  height: 60px;
  line-height: 60px;
}
.contact-name {
  font-size: 20px;
  font-weight: 700;
  color: #444;
  line-height: 28px;
}
.contact-info {
  font-size: 15px;
  font-weight: 500;
  color: #222;
  line-height: 21px;
  margin-top: 8px;
}
.tools-box {
  height: 80px;
  width: 80px;
  background-color: #d5e6e8;
  border-radius: 5px;
}
.tools-box-number {
  font-size: 30px;
  font-weight: 700;
  color: var(--v-primary-base);
}
.tools-box-text {
  color: var(--v-primary-base);
  font-size: 14px;
}
.welfare {
  background-color: #f3f3f3;
  border-radius: 8px;
  padding: 12px;
}
.welfare-tags {
  width: 100%;
  height: 100px;
  overflow: hidden;
}
.business-item {
  font-size: 14px;
  color: #777;
  font-weight: 600;
}
.business-value {
  width: 228px;
  color: #000;
  font-weight: 500;
}
.business-source {
  font-size: 14px;
  color: #777;
}
.desc {
  width: 180px;
  color: #666;
  font-weight: 500;
  font-size: 12px;
}
.position-name {
  width: 180px;
  font-size: 14px;
  font-weight: 600;
}
</style>