menduner/src/views/recruit/enterprise/entInfoSetting/informationSettingsComponents/enterpriseLogo.vue

<!-- 企业LOGO -->
<template>
  <div>
    <div class="topTip">温馨提示：上传企业LOGO，可以获得更多的关注，提升招聘效果哦！</div>
    <div class="logoBox d-flex py-4 align-center justify-center">
      <div class="mt-8">
        <div class="file-item mr-4" style="width: 130px;">
          <v-img v-if="squareImageUrl" width="100%" height="100%" :src="squareImageUrl"></v-img>
          <span v-else class="logo">LOGO</span>
        </div>
        <div class="d-flex flex-column justify-space-between">
          <div class="my-3">
            <div class="uploadPrompt">LOGO大小：130*130像素</div>
            <div class="uploadPrompt">仅支持JPG、JPEG、PNG常见图片类</div>
            <div class="uploadPrompt">型，且文件大于10M</div>
          </div>
          <div>
            <v-btn prepend-icon="mdi mdi-upload" color="primary" @click.stop="openFileInput">
              {{ $t('common.uploadPictures') }}
              <input
                type="file"
                ref="fileInput"
                accept="image/png, image/jpg, image/jpeg"
                style="display: none;"
                @change="handleUploadFile"
              />
            </v-btn>
          </div>
        </div>
      </div>
    </div>

    <ImgCropper 
      :visible="isShowCopper" 
      :image="selectPic" 
      :cropBoxResizable="true"
      @submit="handleHideCopper" 
      :aspectRatio="1 / 1" 
      @close="isShowCopper = false; selectPic = ''"
    ></ImgCropper>
  </div>
</template>

<script setup>
defineOptions({name: 'informationSettingsComponents-enterpriseLogo'})
import { useUserStore } from '@/store/user'; const userStore = useUserStore()
import { ref } from 'vue'
import { uploadFile } from '@/api/common'
import { useI18n } from '@/hooks/web/useI18n'
import { updateEnterpriseLogo, getEnterpriseBaseInfo } from '@/api/enterprise'
import Snackbar from '@/plugins/snackbar'
const emit = defineEmits(['complete'])

const { t } = useI18n()
let squareImageUrl = ref('')
const selectPic = ref('')
const isShowCopper = ref(false)

const getInfo = async () => {
  const data = await getEnterpriseBaseInfo()
  if (data && data?.logoUrl) {
    squareImageUrl.value = data.logoUrl
    // 完成度展示
    await userStore.getEnterpriseInfo() // 更新当前登录的企业用户信息
  }
  emit('complete', {
    totalCount: 10,
    completeCount: squareImageUrl?.value ? 10 : 0,
    id: 'enterpriseLogo'
  })
}
getInfo()

// 选择文件
const fileInput = ref()
const clicked = ref(false)
const openFileInput = () => {
  if (clicked.value) return
  clicked.value = true
  fileInput.value.click()
  clicked.value = false
}

// 图片裁剪成功上传
const handleHideCopper = (data) => {
  isShowCopper.value = false
  if (data) {
    const { file } = data
    if (!file) return

    const formData = new FormData()
    formData.append('file', file)
    formData.append('path', 'img')
    uploadFile(formData).then(async ({ data }) => {
      if (!data) return
      Snackbar.success(t('common.uploadSucMsg'))
      await updateEnterpriseLogo(data)
      getInfo()
    })
  }
}

// 上传
const typeList = ['jpg', 'png', 'jpeg']
const handleUploadFile = async (e) => {
  if (!e.target.files.length) return
  const file = e.target.files[0]

  const size = file.size
  if (size / (1024*1024) > 20) {
    Snackbar.warning(t('common.fileSizeExceed'))
    return
  }
  const arr = file.name.split('.')
  if (typeList.indexOf(arr[arr.length - 1]) < 0) {
    Snackbar.warning(t('common.fileFormatIncorrect'))
    return
  }

  const reader = new FileReader()
  reader.onload = (e) => {
    const img = new Image()
    img.onload = async () => {
      if (img.width > 130 || img.height > 130) {
        selectPic.value = String(reader.result)
        isShowCopper.value = true
        return
      }
      // 大小符合直接上传logo
      const formData = new FormData()
      formData.append('file', file)
      formData.append('path', 'img')
      const { data } = await uploadFile(formData)
      if (!data) return
      Snackbar.success(t('common.uploadSucMsg'))
      await updateEnterpriseLogo(data)
      getInfo()
    }
    img.src = e.target.result
  }
  reader.readAsDataURL(file)
}

</script>

<style lang="scss" scoped>
.topTip {
  background-color: #f7f8fa;
  color: #2f3640;
  padding: 12px 20px;
  margin: 10px 0 20px;
  font-size: 14px;
}
.uploadPrompt { font-size: 14px; line-height: 24px; }
.logoBox {
  .typeTitle {
    font-weight: bold;
  }
}
.file-item {
  height: 130px;
  border-radius: 5px;
  margin-right: 8px;
  border: 1px solid rgba(188, 188, 188, 0.5);
  text-align: center;
  .logo {
    font-size: 38px;
    font-weight: 900;
    color: rgba(188, 188, 188, 0.65);
    height: 100%;
    line-height: 130px;
  }
}
</style>