企业相册

src/views/enterprise/informationManagement/informationSettingsComponents/enterpriseAlbum.vue

@@ -1,37 +1,121 @@
 <!-- 企业相册 -->
 <template>
-  <div v-if="!imgList?.length" class="mt-10 text-center">
-    <Empty></Empty>
-    <v-btn prepend-icon="mdi mdi-upload" color="warning mt-10" @click="{}">{{ $t('common.uploadPictures') }}</v-btn>
+  <div v-if="!imgList.length" class="text-center">
+    <Empty :elevation="false" message="您还没有企业相册，马上去上传图片吧！"></Empty>
+    <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, video/*"
+        style="display: none;"
+        @change="handleUploadFile"
+      />
+    </v-btn>
   </div>
   <div v-else>
-    <div><v-btn prepend-icon="mdi mdi-upload" color="warning mb-5" @click="{}">{{ $t('common.uploadPictures') }}</v-btn></div>
-    <div class="imgItem" v-for="(item, index) in imgList" :key="index">
-      <v-img width="100%" height="100%" :src="item?.url || defaultUrl"></v-img>
+    <div class="mb-3">
+      <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, video/*"
+          style="display: none;"
+          @change="handleUploadFile"
+        />
+      </v-btn>
+    </div>
+    <div class="imgItem" v-for="(item, index) in imgList" :key="index" @click="handleClick(index)">
+      <v-img v-if="checkIsImage(item)" width="100%" height="100%" :src="item"></v-img>
+      <video v-else class="videos-radius mr-3" :src="item" controls height="172" width="172" preload="preload"></video>
       <div class="operate">
-        <span style="font-size: 14px;">设置为封面</span>
-        <span class="mdi mdi-trash-can-outline"></span>
+        <span></span>
+        <span class="mdi mdi-trash-can-outline" @click="handleDelete(item)"></span>
       </div>
     </div>
   </div>
+  <PreviewImg v-if="showPreview" :current="current" :list="imgList" @close="showPreview = !showPreview"></PreviewImg>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-
 defineOptions({name: 'informationSettingsComponents-enterpriseAlbum'})
-const imgList = ref([{ url: false }, { url: 1}])
-const defaultUrl = 'https://minio.citupro.com/dev/menduner/company-avatar.png'
+import { ref } from 'vue'
+import { checkIsImage } from '@/utils'
+import { uploadFile } from '@/api/common'
+import { useI18n } from '@/hooks/web/useI18n'
+import { getEnterpriseBaseInfo, updateEnterpriseAlbum } from '@/api/enterprise'
+import Snackbar from '@/plugins/snackbar'
+import Confirm from '@/plugins/confirm'
+
+const { t } = useI18n()
+const imgList = ref([])
+
+const getInfo = async () => {
+  const data = await getEnterpriseBaseInfo()
+  if (!data) return
+  imgList.value = data.albumList
+}
+getInfo()
+
+// 预览
+const showPreview = ref(false)
+const current = ref(0)
+const handleClick = (index) => {
+  showPreview.value = !showPreview.value
+  current.value = index
+}
+
+// 删除
+const handleDelete = async (url) => {
+  const index = imgList.value.indexOf(url)
+  if (index === -1) return
+  imgList.value.splice(index, 1)
+  Confirm('系统提示', '是否确认删除？').then(async () => {
+    await updateEnterpriseAlbum({ albumList: imgList.value })
+  })
+}
+
+// 选择文件
+const fileInput = ref()
+const clicked = ref(false)
+const openFileInput = () => {
+  if (clicked.value) return
+  clicked.value = true
+  fileInput.value.click()
+  clicked.value = false
+}
+
+// 上传
+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 formData = new FormData()
+  formData.append('file', file)
+  const { data } = await uploadFile(formData)
+  if (!data) return
+  Snackbar.success(t('common.uploadSucMsg'))
+  imgList.value.push(data)
+  await updateEnterpriseAlbum({ albumList: imgList.value })
+  getInfo()
+}
 </script>
+
 <style lang="scss" scoped>
 .imgItem {
-  width: 172px; height: 172px;
+  width: 172px; 
+  height: 172px;
   border: 1px solid rgba(188, 188, 188, 0.5);
   border-radius: 5px;
   margin-right: 24px;
   margin-bottom: 24px;
   display: inline-block;
   position: relative;
+  cursor: pointer;
   .operate {
     display: none;
   }

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

@@ -58,7 +58,7 @@ const openFileInput = () => {
   clicked.value = false
 }
 
-// 上传附件
+// 上传
 const typeList = ['png', 'jpg', 'jpeg']
 const handleUploadFile = async (e) => {
   const file = e.target.files[0]