|
@@ -2,42 +2,29 @@
|
|
<template>
|
|
<template>
|
|
<div>
|
|
<div>
|
|
<div class="topTip">温馨提示:上传企业LOGO,可以获得更多的关注,提升招聘效果哦!</div>
|
|
<div class="topTip">温馨提示:上传企业LOGO,可以获得更多的关注,提升招聘效果哦!</div>
|
|
- <div class="logoBox d-flex py-4">
|
|
|
|
- <div class="logoItem">
|
|
|
|
- <span class="typeTitle">矩形LOGO</span>
|
|
|
|
- <div class="d-flex mt-8">
|
|
|
|
- <div class="file-item mr-4" style="width: 200px;">
|
|
|
|
- <v-img v-if="rectangleImageUrl" width="100%" height="100%" :src="rectangleImageUrl"></v-img>
|
|
|
|
- <span class="logo">LOGO</span>
|
|
|
|
- </div>
|
|
|
|
- <div class="d-flex flex-column justify-space-between">
|
|
|
|
- <div>
|
|
|
|
- <div class="uploadPrompt">LOGO大小:200*130像素</div>
|
|
|
|
- <div class="uploadPrompt">仅支持JPG、JPEG、PNG常见图片类</div>
|
|
|
|
- <div class="uploadPrompt">型,且文件小于5M</div>
|
|
|
|
- </div>
|
|
|
|
- <div>
|
|
|
|
- <v-btn prepend-icon="mdi mdi-upload" color="warning mb-1" @click="{}">{{ $t('common.uploadPictures') }}</v-btn>
|
|
|
|
- </div>
|
|
|
|
- </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>
|
|
- </div>
|
|
|
|
- <div class="logoItem">
|
|
|
|
- <span class="typeTitle">正方形LOGO</span>
|
|
|
|
- <div class="d-flex 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 class="logo">LOGO</span>
|
|
|
|
|
|
+ <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>
|
|
- <div class="d-flex flex-column justify-space-between">
|
|
|
|
- <div>
|
|
|
|
- <div class="uploadPrompt">LOGO大小:200*130像素</div>
|
|
|
|
- <div class="uploadPrompt">仅支持JPG、JPEG、PNG常见图片类</div>
|
|
|
|
- <div class="uploadPrompt">型,且文件小于5M</div>
|
|
|
|
- </div>
|
|
|
|
- <div>
|
|
|
|
- <v-btn prepend-icon="mdi mdi-upload" color="warning mb-1" @click="{}">{{ $t('common.uploadPictures') }}</v-btn>
|
|
|
|
- </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>
|
|
</div>
|
|
@@ -46,14 +33,56 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
-import { ref } from 'vue';
|
|
|
|
-
|
|
|
|
defineOptions({name: 'informationSettingsComponents-enterpriseLogo'})
|
|
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
|
|
|
|
+}
|
|
|
|
|
|
// 上传
|
|
// 上传
|
|
-let rectangleImageUrl = ref('') // 矩形
|
|
|
|
-let squareImageUrl = ref('') // 正方形
|
|
|
|
|
|
+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>
|
|
</script>
|
|
|
|
+
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
.topTip {
|
|
.topTip {
|
|
background-color: #f7f8fa;
|
|
background-color: #f7f8fa;
|
|
@@ -64,7 +93,6 @@ let squareImageUrl = ref('') // 正方形
|
|
}
|
|
}
|
|
.uploadPrompt { font-size: 14px; line-height: 24px; }
|
|
.uploadPrompt { font-size: 14px; line-height: 24px; }
|
|
.logoBox {
|
|
.logoBox {
|
|
- .logoItem { width: 50%; padding-right: 10px; }
|
|
|
|
.typeTitle {
|
|
.typeTitle {
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
@@ -73,7 +101,6 @@ let squareImageUrl = ref('') // 正方形
|
|
height: 130px;
|
|
height: 130px;
|
|
border-radius: 5px;
|
|
border-radius: 5px;
|
|
margin-right: 8px;
|
|
margin-right: 8px;
|
|
- // margin-top: 24px;
|
|
|
|
border: 1px solid rgba(188, 188, 188, 0.5);
|
|
border: 1px solid rgba(188, 188, 188, 0.5);
|
|
text-align: center;
|
|
text-align: center;
|
|
.logo {
|
|
.logo {
|