menduner/src/views/recruit/enterprise/enterpriseCenter/index.vue

<!-- 企业中心 -->
<template>
  <div class="default-width banner pa-6" style="position: relative;">
    <!-- header -->
    <div class="d-flex align-center">
      <v-avatar class="mx-4" size=80 :image="info?.avatar || 'https://minio.citupro.com/dev/menduner/7.png'"></v-avatar>
      <div>
        <div class="contact-name">
          <span>苏州识喜识谊酒店管理有限公司</span>
          <v-chip size="x-small" label class="ml-3" color="primary">已认证</v-chip>
          <span>
            <v-chip size="x-small" label class="ml-3" color="red">未认证</v-chip>
            <v-chip size="x-small" label class="ml-3" color="red" variant="flat">马上认证</v-chip>
          </span>
        </div>
        <div class="contact-info">{{ info.test1 }} · {{ info.test2 }} · {{ info.test3 }} · {{ info.test4 }}</div>
        <div class="contact-location" style="color: #000;">
          <v-icon size="20">mdi-map-marker</v-icon>
          <span>广东省广州市天河区天河路</span>
        </div>
      </div>
      <!-- <div style="flex: 1;text-align: right;"></div> -->
      <div style="position: absolute; right: 48px; top: 24px;">
        <v-btn class="button-item radius" color="primary" variant="outlined" @click="{}">{{ $t('common.edit') }}</v-btn>
      </div>
    </div>
    <!-- tab -->
    <v-divider class="mt-6"></v-divider>
    <div class="mt-3">
      <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f3f3f3" @update:model-value="handleTabClick">
        <v-tab :value="1">企业简介</v-tab>
        <v-tab :value="2">企业相册{{ info.count1 ? `(${info.count1})` : '' }}</v-tab>
        <v-tab :value="3">在招职位{{ info.count2 ? `(${info.count2})` : '' }}</v-tab>
      </v-tabs>
      <div class="pa-5" v-if="Object.keys(info).length">
        <m-introduction v-if="tab === 1" :info="info" />
        <m-video v-else-if="tab === 2" :info="info"/>
        <m-positions v-else :info="info"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import mIntroduction from './components/introduction.vue'
import mVideo from './components/video.vue'
import mPositions from './components/positions.vue'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute(); const router = useRouter()
defineOptions({name: 'enterprise-enterpriseCenter'})
let info = ref({
  test1: '企业',
  test2: '互联网',
  test3: '500人',
  test4: '天使轮',
  count1: '13',
  count2: '99',
  enterprise: {
    id: '1',
    introduce: '从事高级住宅小区、商业、办公楼等物业管理的专业大型公司。目前，公司在管 面积300余万平方米，遍及广州、北京、惠州、梅州、海南、新疆等城市。\n 为更好地开展与服务关联的各项工作，公司于2014年分别成立广州御家清洁服务有限公司、广州御茵园林工程有限公司、广州御科机电科技有限公司、广州御安置业有限公司四家专业公司。\n  一直以来，珠光物业默默地深耕物业服务行业，怀揣着“社区是个大家庭家”的理念，致力于将传统院落的文化内涵与社区管理相融合，营造“大家”爱“小家”的良好氛围， 将亲情融入到物业服务的点点滴滴，倡导融洽和睦的家庭观念、亲仁善邻的道德态度与醇厚善邻的邻里关系。',
    time: '早上8：00-下午18：00',
    restType: '双休',
    welfareList: ['五险一金','节日礼物','技能培训','带薪年假','岗位晋升','午餐补贴','住房补贴','话补','交通补助','美女多','帅哥多','领导好'],
    aboutUs: '“门”，是通向未来的起点；“墩”，意为坚实的基础；“门墩儿”，则是对门至关重要的承托之物——这一京派传统文化物件儿承载着人们吉祥美好的寄望。 门墩儿 (Menduner.com) 正是借用“门墩儿”的积极寓意，面向资深酒店从业者、酒店雇主和业主等有识之士，以及渴望在酒店行业有所建树的有志青年， 搭建起高品质的职业发展社交平台，夯实发展基础，承托职涯梦想，开启未来之门。田森先生(Simon Tian)拥有酒店管理学术背景，酒店从业经历超过 25 年。曾就职爱尔兰、瑞士日内瓦等地的多家国际品牌酒店。 曾任法国雅高集团旗下品牌总经理、大中华区酒店开业总经理，成功负责莱佛士、费尔蒙、索菲特、铂尔曼、诺富特等旗舰品牌 51 家酒店开业。 张洋先生(Dickson Zhang) 拥有16逾年的国际酒店和服务式公寓的从业经验，在运营管理及新酒店筹备开业方面拥有着丰富的经验。两位创始人及其团队希望凭借深厚的从业经验，为酒店行业培育、遴选人才，将国内酒店业的中层管理者和资深管理人才联系起来，创造优质职场社交环境。我们汇聚酒店行业资深人士，为经理或总监级以上的业界精英提供高品质的职业发展社交平台；我们也支持单枪匹马的青年英才，依托技术支持，提供定制职业规划，成为年轻人职业发展的加速器； 同时，我们更积极携手酒店管理公司及业主等企业客户，通过名誉顾问委员会和导师委员会，借助网络研发、人工智能、大数据等强大的信息技术，提供人才解决方案和战略建议， 从庞大的人才储备库中筛选最为匹配的人才，进一步扩大品牌影响力。门墩儿相信，我们多元的职业背景、丰富的从业经验以及广泛的人才网络定能助力客户实现愿景。期待与您同行！',
    albumList: [
      "https://img.bosszhipin.com/beijin/upload/com/img/20210113/9721a38a2ee987949634e03ebcbeeb768c9fa67a7309bcd3394445118f39eee3.jpg?x-oss-process=image/auto-orient,1/watermark,size_18,t_50,color_FFFFFF,text_QOacrOWbvueUseivpeWFrOWPuOazqOWGjOeUqOaIt-S4iuS8oA==,type_ZHJvaWRzYW5zZmFsbGJhY2s,image/resize,p_50", 
      "https://img.bosszhipin.com/beijin/upload/com/img/20210113/9721a38a2ee987949634e03ebcbeeb768c9fa67a7309bcd3394445118f39eee3.jpg?x-oss-process=image/auto-orient,1/watermark,size_18,t_50,color_FFFFFF,text_QOacrOWbvueUseivpeWFrOWPuOazqOWGjOeUqOaIt-S4iuS8oA==,type_ZHJvaWRzYW5zZmFsbGJhY2s,image/resize,p_50", 
      "https://img.bosszhipin.com/beijin/upload/com/img/20210113/9721a38a2ee987949634e03ebcbeeb768c9fa67a7309bcd3394445118f39eee3.jpg?x-oss-process=image/auto-orient,1/watermark,size_18,t_50,color_FFFFFF,text_QOacrOWbvueUseivpeWFrOWPuOazqOWGjOeUqOaIt-S4iuS8oA==,type_ZHJvaWRzYW5zZmFsbGJhY2s,image/resize,p_50", 
      "https://img.bosszhipin.com/beijin/upload/com/img/20210113/9721a38a2ee987949634e03ebcbeeb768c9fa67a7309bcd3394445118f39eee3.jpg?x-oss-process=image/auto-orient,1/watermark,size_18,t_50,color_FFFFFF,text_QOacrOWbvueUseivpeWFrOWPuOazqOWGjOeUqOaIt-S4iuS8oA==,type_ZHJvaWRzYW5zZmFsbGJhY2s,image/resize,p_50", 
      "https://img.bosszhipin.com/beijin/upload/com/img/20210113/9721a38a2ee987949634e03ebcbeeb768c9fa67a7309bcd3394445118f39eee3.jpg?x-oss-process=image/auto-orient,1/watermark,size_18,t_50,color_FFFFFF,text_QOacrOWbvueUseivpeWFrOWPuOazqOWGjOeUqOaIt-S4iuS8oA==,type_ZHJvaWRzYW5zZmFsbGJhY2s,image/resize,p_50", 
      "https://img.bosszhipin.com/beijin/upload/com/img/20210113/9721a38a2ee987949634e03ebcbeeb768c9fa67a7309bcd3394445118f39eee3.jpg?x-oss-process=image/auto-orient,1/watermark,size_18,t_50,color_FFFFFF,text_QOacrOWbvueUseivpeWFrOWPuOazqOWGjOeUqOaIt-S4iuS8oA==,type_ZHJvaWRzYW5zZmFsbGJhY2s,image/resize,p_50", 
      "https://zhipin-company-1251955568.file.myqcloud.com/zhipin-company/99/20231021/fpf81b1cdecd7a27dca3eeb40f661f1a3e_1a3cd48c41c942d0aa084b3dd0262681-OSS11.aac.s44100.stereo.1080x1920.b2000000.libx264.mp4?sign=d840267a7fb629df0a70cbc85702303e&t=1715917059", 
      "https://img.bosszhipin.com/beijin/upload/com/img/20210113/753ff7a19883590a242e1e3ff779e5f48c9fa67a7309bcd3394445118f39eee3.jpg?x-oss-process=image/auto-orient,1/watermark,size_18,t_50,color_FFFFFF,text_QOacrOWbvueUseivpeWFrOWPuOazqOWGjOeUqOaIt-S4iuS8oA==,type_ZHJvaWRzYW5zZmFsbGJhY2s,image/resize,p_50",
      "https://zhipin-company-1251955568.file.myqcloud.com/zhipin-company/99/20231021/fp3692be34c52d0ad19616e3b18f94cf83_3f6de97ce4f7480c9b9b921159a0c077-OSS11.aac.s44100.stereo.1080x606.b2000000.libx264.mp4?sign=b463389d85d317d95084aee80e52ff12&t=1715836781", 
    ],
  },
})

// tab
const tab = ref(1)
const tabList = ['mIntroduction', 'mVideo', 'mPositions']
const savedTab = new URLSearchParams(window.location.search).get('key')
if (savedTab) { // 刷新
  const keyIndex = tabList.findIndex(e => e === savedTab)
  if (keyIndex === -1) tab.value = 1; else tab.value = (keyIndex + 1)
}
const handleTabClick = () => {
  router.push(`${route.path}?key=${tabList[tab.value-1]}`)
}
</script>
<style lang="scss" scoped>
.banner {
  background-color: #fff;
  padding: 0 0 20px;
}
.contact-name {
  font-size: 15px;
  font-weight: 600;
  color: #37576c;
  line-height: 32px;
}
.contact-info {
  font-size: 14px;
  font-weight: 500;
  color: #222;
  line-height: 26px;
  margin-top: 8px;
}
.contact-location {
  font-size: 14px;
  font-weight: 500;
  color: #222;
  line-height: 26px;
  margin-top: 8px;
}
</style>