menduner/src/views/recruit/personal/jobFair/enterprise/index.vue

<template>
  <div class="default-width banner px-6">
    <div v-if="Object.keys(info).length">
      <div class="banner-title pt-3" v-if="Object.keys(info).length">
        <div class="float-left d-flex align-center">
          <v-img width="60" height="60" :src="info.enterprise.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'"></v-img>
          <div class="ml-4">
            <div class="contact-name">{{ formatName(info.enterprise.anotherName || info.enterprise.name) }}</div>
            <div class="contact-info">
              {{ info.scaleName }}
              <span v-if="info.industryName && info.scaleName">·</span> 
              {{ info.industryName }}
            </div>
          </div>
        </div>
        <div class="float-right d-flex">
          <v-btn color="primary" variant="text" size="large" @click.stop="handleReturn" prepend-icon="mdi-chevron-triple-left">返回上一页</v-btn>
        </div>
      </div>
      <div class="text-end mb-3">
        <v-tooltip location="bottom">
          <template v-slot:activator="{ props }">
            <v-icon v-bind="props" class="ml-5 mr-2" size="25" :color="isCollection ? 'error' : ''" @click.stop="handleFollow">{{ isCollection ? 'mdi-heart' : 'mdi-heart-outline' }}</v-icon>
          </template>
          <span>关注该企业</span>
        </v-tooltip>
      </div>
      <v-divider></v-divider>
      <div class="mt-3">
        <div class="d-flex" v-if="Object.keys(info).length">
          <div class="content-left">
            <recruitmentPositions :info="info"/>
          </div>
          <div class="content-right">
            <div class="welfare mb-3">
              <h4>福利</h4>
              <div v-if="info?.enterprise?.welfareList?.length" class="welfare-tags mt-3">
                <v-chip size="small" label v-for="(k, i) in info?.enterprise?.welfareList?.slice(0, 6)" :key="i" class="mb-2 welfare-tags-item ellipsis" color="primary">{{ k }}</v-chip>
              </div>
              <div v-else class="color-666 font-size-14 mt-3">暂无</div>
            </div>
            <div class="welfare">
              <h4>工商信息</h4>
              <div :class="['mt-2', 'business-item']" v-for="val in businessList" :key="val.value">
                <div>{{ val.label }}</div>
                <div class="business-value ellipsis">
                  {{ info?.business ? info.business[val.value] : '暂无' }}
                  <span v-if="info?.business && val.value === 'registeredCapital' && info?.business[val.value] && info?.business[val.value].indexOf('万元') === -1">万元</span>
                </div>
                <div :class="['my-3']"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 快速登录 -->
    <loginPage v-if="showLogin" @loginSuccess="loginSuccess" @close="loginClose"></loginPage>
  </div>
</template>

<script setup>
defineOptions({name: 'jobFair-enterprise'})
import { ref } from 'vue'
import {
  getEnterpriseDetails,
  getEnterpriseSubscribeCheck,
  getEnterpriseSubscribe,
  getEnterpriseUnsubscribe
} from '@/api/enterprise'
import { dealDictObjData } from '@/utils/position'
import { timesTampChange } from '@/utils/date'
import { useRouter } from 'vue-router'; const router = useRouter()
import { formatName } from '@/utils/getText'
import { getToken } from '@/utils/auth'
import loginPage from '@/views/common/loginDialog.vue'
import Snackbar from '@/plugins/snackbar'
import recruitmentPositions from './positions.vue'

const { id } = router.currentRoute.value.params

// 企业详情
const info = ref({})
const getDetails = async () => {
  if (!id) return
  const data = await getEnterpriseDetails({ id })
  // 成立日期
  if (data?.business?.establishmentTime) {
    data.business.establishmentTime = timesTampChange(data.business.establishmentTime, 'Y-M-D')
  }

  info.value = { ...data, ...dealDictObjData({}, data.enterprise) }
  getCollectionStatus(id)
}
getDetails()

// 返回上一页
const handleReturn = () => {
  if (window.history.state.back) {
    router.back()
  } else router.push('/recruit/personal/jobFair')
}

// 效验求职者是否关注该企业
const isCollection = ref(false)
const getCollectionStatus = async (id) => {
  if (!getToken()) return isCollection.value = false
  const data = await getEnterpriseSubscribeCheck({ enterpriseId: id })
  isCollection.value = data
}

// 关注&取消关注企业
const handleFollow = async () => {
  if (!getToken()) {
    showLogin.value = true // 打开快速登录弹窗
    Snackbar.warning('您还未登录，请先登录后再试')
    nextFunc.value = handleFollow // 登录成功后要执行的操作
    loginCloseWarningWord = '您已取消登录，无法关注企业' // 取消登录提示语
    return
  }
  const api = isCollection.value ? getEnterpriseUnsubscribe : getEnterpriseSubscribe
  await api(isCollection.value ? id : { enterpriseId: id })
  getCollectionStatus(id)
}

const showLogin = ref(false)
const nextFunc = ref(null)
let loginCloseWarningWord = ''
// 快速登录
const loginSuccess = () => {
  showLogin.value = false
  Snackbar.success('登录成功')
  if (nextFunc.value) nextFunc.value()
}

const loginClose = () => {
  showLogin.value = false
  Snackbar.warning(loginCloseWarningWord)
}

</script>
<style lang="scss" scoped>
.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: 28px;
  font-weight: 700;
  color: #37576c;
  line-height: 28px;
}
.contact-info {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-222);
  line-height: 21px;
  margin-top: 8px;
}
.tools-box {
  height: 80px;
  width: 80px;
  background-color: var(--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: var(--color-f3);
  border-radius: 8px;
  padding: 12px;
}
.welfare-tags {
  display: flex;
  width: 242px;
  flex-wrap: wrap;
  height: 100px;
  overflow: hidden;
  text-align: center;
}
.welfare-tags-item {
  display: block;
  width: 117px;
  max-width: 117px;
  text-align: center;
  line-height: 26px;
  margin-right: 8px;
  &:nth-child(2n) {
    margin-right: 0;
  }
}
.business-item {
  font-size: 14px;
  color: var(--color-666);
  font-weight: 600;
}
.business-value {
  width: 228px;
  color: #000;
  font-weight: 500;
}
.business-source {
  font-size: 14px;
  color: var(--color-666);
}
.desc {
  width: 180px;
  color: var(--color-666);
  font-weight: 500;
  font-size: 12px;
}
.position-name {
  width: 180px;
  font-size: 14px;
  font-weight: 600;
}
</style>