Merge branch 'dev' of https://git.citupro.com/zhengnaiwen_citu/menduner into dev

src/views/recruit/enterprise/informationManagement/informationSettingsComponents/enterpriseLogo.vue

@@ -10,9 +10,9 @@
         </div>
         <div class="d-flex flex-column justify-space-between">
           <div class="my-3">
-            <div class="uploadPrompt">LOGO大小：200*130像素</div>
+            <div class="uploadPrompt">LOGO大小：130*130像素</div>
             <div class="uploadPrompt">仅支持JPG、JPEG、PNG常见图片类</div>
-            <div class="uploadPrompt">型，且文件小于10M</div>
+            <div class="uploadPrompt">型，且文件大于10M</div>
           </div>
           <div>
             <v-btn prepend-icon="mdi mdi-upload" color="primary" @click.stop="openFileInput">
@@ -30,6 +30,15 @@
       </div>
     </div>
   </div>
+
+  <ImgCropper 
+    :visible="isShowCopper" 
+    :image="selectPic" 
+    :cropBoxResizable="true"
+    @submit="handleHideCopper" 
+    :aspectRatio="1 / 1" 
+    @close="isShowCopper = false; selectPic = ''"
+  ></ImgCropper>
 </template>
 
 <script setup>
@@ -43,6 +52,9 @@ import Snackbar from '@/plugins/snackbar'
 
 const { t } = useI18n()
 let squareImageUrl = ref('')
+const selectPic = ref('')
+const isShowCopper = ref(false)
+
 const getInfo = async () => {
   const data = await getEnterpriseBaseInfo()
   if (data && data?.logoUrl) {
@@ -62,11 +74,30 @@ const openFileInput = () => {
   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)
+    uploadFile(formData).then(async ({ data }) => {
+      if (!data) return
+      Snackbar.success(t('common.uploadSucMsg'))
+      await updateEnterpriseLogo(data)
+      getInfo()
+    })
+  }
+}
+
 // 上传
 const typeList = ['png', 'jpg', '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) > 10) {
     Snackbar.warning(t('common.fileSizeExceed'))
@@ -77,13 +108,28 @@ const handleUploadFile = async (e) => {
     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()
+
+  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)
+      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>