menduner-uniapp/pagesB/companyDetail/index.vue

<template>
  <view class="ss-p-b-30">
    <view class="mar p-tb ss-m-x-30">
      <view class="f-horizon">
        <image class="r-avatar" style="width: 80px; height: 80px;" :src="info.logoUrl || 'https://minio.citupro.com/dev/menduner/company-avatar.png'"></image>
        <view class="f-straight ss-m-l-10" style="flex: 1;position: relative;">
          <view class="title-des font-weight-bold" style="max-width: 45vw;">{{ info.anotherName }}</view>
          <view class="color-999 ellipsis font-size-14" style="max-width: 60vw;">
            <span>{{ !!info.industryName? info.industryName : ''}}</span>
            <span class="ss-m-x-10" v-if="info?.industryName && info?.scaleName"> | </span>
            <span>{{ info.scaleName || '' }}</span>
          </view>
          <view class="collect-icon" @click="handleFollow">
            <uni-icons :type="isCollection ? 'heart-filled' : 'heart'" color="#fc6d5e" size="25"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <view class="ss-m-t-30" style="background-color: #fff;">
      <uni-segmented-control :current="current" :values="items" @clickItem="changeControl" styleType="text" activeColor="#00897B"></uni-segmented-control>
    </view>

    <view v-if="current === 0" style="height: 20rpx; background-color: #f8f8fa;"></view>

    <!-- 企业信息 -->
    <view v-if="current === 0" class="ss-m-t-30 ss-m-x-30 ss-p-b-30">
      <uni-tag v-for="(tag, i) in info.tagList" :key="i" class="ss-m-r-10" :text="tag" inverted="false" 
      size="default" custom-style="background-color: #eef1f7;color:#7f828b;border-color:#eef1f7;display: inline-block;"/>
      <!-- 简介 -->
      <view class="ss-m-t-30">
        <h4>企业简介</h4>
        <view v-if="info.introduce" class="ss-m-t-20" style="color: #606371;" v-html="info.introduce?.replace(/\n/g, '</br>')"></view>
        <view v-else></view>
      </view>
      <!-- 福利标签 -->
      <view class="topLine"></view>
      <view >
        <h4>企业福利标签</h4>
        <view class="ss-m-t-20" v-if="info?.welfareList?.length">
          <uni-tag v-for="(tag, i) in info.welfareList" :key="i" class="ss-m-r-10 ss-m-b-10" :text="tag" inverted="false" 
          size="default" custom-style="background-color: #eef1f7;color:#7f828b;border-color:#eef1f7; display: inline-block;"/>
        </view>
        <view v-else></view>
      </view>
      <!-- 网址 -->
      <view class="topLine"></view>
      <view>
        <h4>企业网址</h4>
        <view class="ss-m-t-20">
          <uni-link v-if="info.website" :href="info.website" :text="info.website" color="#00897B"></uni-link>
          <view v-else></view>
        </view>
      </view>
      <view class="topLine"></view>
      <!-- 工商信息 -->
      <view>
        <h4>工商信息</h4>
        <view v-if="info.business && Object.keys(info.business).length">
          <view class="ss-m-y-15" v-for="k in business" :key="k.value">
            <view>{{ k.name }}</view>
            <view class="color-666 ss-m-t-5">
              {{ info.business[k.value] ? k.value === 'establishmentTime' ? timesTampChange(info.business[k.value], 'Y-M-D') : info.business[k.value] : '' }}
            </view>
          </view>
        </view>
        <view v-else></view>
      </view>
      <!-- 地址 -->
      <view class="topLine"></view>
      <view>
        <h4>企业地址</h4>
        <view class="ss-m-t-20" v-if="info?.business?.address">
          <uni-icons type="map-pin-ellipse" color="#00897B" size="20"></uni-icons>
          <span class="color-666 font-size-15">{{ info?.business?.address }}</span>
        </view>
        <view v-else></view>
      </view>
      <view class="topLine"></view>
      <!-- 企业相册 -->
      <view>
        <h4>企业相册</h4>
        <view class="ss-m-t-20" v-if="info?.albumList">
          <swiper class="swiper-box" :indicator-dots="true" indicator-active-color="#fff">
            <swiper-item v-for="(item ,index) in info?.albumList" :key="index" style="overflow-x:hidden;overflow-y: auto;">
              <image v-if="checkIsImage(item)" class="ac-imgs" :src="item" @click="previewImage(index)"></image>
              <video v-else :id="'albumListVideo'+index" class="ac-imgs" :src="item" @error="videoErrorCallback" controls></video>
            </swiper-item>
          </swiper>
        </view>
        <view v-else></view>
      </view>
    </view>

    <!-- 招聘岗位 -->
    <view v-if="current == 1">
      <scroll-view class="scrollBox defaultBgc" scroll-y="true" @scrolltolower="loadingMore">
        <view v-if="positionList.length > 0">
          <PositionList class="pb-10" :list="positionList" :noMore="false"></PositionList>
          <uni-load-more :status="status" />
        </view>
        <view v-else class="nodata-img-parents">
          <image src="https://minio.citupro.com/dev/static/nodata.png" mode="widthFix" class="nodata-img-child"></image>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getEnterpriseDetails, enterpriseClick, getEnterpriseSubscribeCheck, getEnterpriseUnsubscribe, getEnterpriseSubscribe } from '@/api/user'
import { dealDictObjData } from '@/utils/position'
import { timesTampChange } from '@/utils/date'
import { getJobAdvertisedSearch } from '@/api/position'
import { getAccessToken } from '@/utils/request'
import PositionList from '@/components/PositionList'
import { checkIsImage } from '@/utils'

const current = ref(0)
const items = ['企业介绍', '招聘职位']
const info = ref({})
let id = ref(null)
const business = [
  { name: '成立日期', value: 'establishmentTime' },
  { name: '注册资金', value: 'registeredCapital' },
  { name: '统一社会信用代码', value: 'code' },
]
const status = ref('more')
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  enterpriseId: id.value
})
const positionList = ref([])

// 预览
const previewImage = (i) => {
  uni.previewImage({
    current: i,
    urls: info.value.albumList
  })
}

// 企业埋点
const enterpriseClickFn = async () => {
  if (!id.value) return
  await enterpriseClick({ id: id.value })
}
enterpriseClickFn()

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

// 关注&取消关注企业
const handleFollow = async () => {
  if (!id.value) return
  const api = isCollection.value ? getEnterpriseUnsubscribe : getEnterpriseSubscribe
  await api(isCollection.value ? id.value : { enterpriseId: id.value })
  getCollectionStatus()
}

// 企业详情
const getData = async () => {
  const { data } = await getEnterpriseDetails(id.value)
  info.value = data.enterprise ? { ...data, ...dealDictObjData({}, data.enterprise) } : data
  getCollectionStatus()
}

// 招聘职位列表
const getPositionList = async () => {
  queryParams.value.enterpriseId = id.value
  const { data } = await getJobAdvertisedSearch(queryParams.value)
  const list = data?.list || []
  if (list?.length) {
    list.forEach(e => {
      e.job = { ...e.job, ...dealDictObjData({}, e.job) }
      e.enterprise = { ...e.enterprise, ...dealDictObjData({}, e.enterprise)}
    })
    positionList.value = positionList.value.concat(list)
  }
  status.value = list?.length < queryParams.value.pageSize ? 'noMore' : 'more'
}

const loadingMore = () => {
  status.value = 'loading'
  queryParams.value.pageNo++
  getPositionList()
}

onLoad((options) => {
  id.value = options?.id || ''
  if (id.value) {
    getData()
  }
})

const changeControl = (e) =>{
  current.value = e.currentIndex
  if (current.value === 0) getData()
  else getPositionList()
}
const videoErrorCallback = (e) =>{
  uni.showToast({
    title: e?.target?.errMsg || '播放错误',
    icon: 'none'
  })
}
</script>

<style scoped lang="scss">
.title-des {
  color: #37576c;
  font-size: 20px;
  margin-right: 30px;
  margin-top: 1px;
  vertical-align: middle;
  flex: 1;
}
.title-text{
  font-weight: 700;
  font-size: 18px;
}
.topLine {
  border-top: 1px solid #EDEDED;
  margin: 20px 0;
}
.swiper-box {
	height: 29vh;
}
.ac-imgs{
  width: 100%;
  height: 29vh;
  border-radius: 20px;
}
.collect-icon {
  position: absolute;
  top: 3px;
  right: 10px;
}
</style>