menduner/src/views/enterprise/informationManagement/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大小：200*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>
  </div>
</template>

<script setup>
defineOptions({name: 'informationSettingsComponents-enterpriseLogo'})
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 { t } = useI18n()
let squareImageUrl = ref('')
const getInfo = async () => {
  const data = await getEnterpriseBaseInfo()
  if (data && data?.logoUrl) squareImageUrl.value = data.logoUrl
}
getInfo()

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

// 上传
const typeList = ['png', 'jpg', 'jpeg']
const handleUploadFile = async (e) => {
  const file = e.target.files[0]
  const size = file.size
  if (size / (1024*1024) > 10) {
    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 formData = new FormData()
  formData.append('file', file)
  const { data } = await uploadFile(formData)
  if (!data) return
  Snackbar.success(t('common.uploadSucMsg'))
  await updateEnterpriseLogo(data)
  getInfo()
}

</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>