add banners

2026-02-21 20:24:59 +03:30
parent c01c1da7e4
commit 68e98b1ac0
8 changed files with 329 additions and 3 deletions
@@ -0,0 +1,123 @@
+<template>
+  <div style="overflow: hidden">
+    <a-upload
+      class="relative fix-capture"
+      name="file"
+      :show-upload-list="false"
+      list-type="picture-card"
+      :action="url"
+      :headers="fileHeader"
+      accept="image/*"
+      @change="handelChange"
+    >
+      <div
+        @click="deleteAvatar"
+        v-if="imageUrl"
+        style="position: absolute; bottom: 10px; left: 0; z-index: 10"
+      >
+        <BaseIcon icon="vuesax-linear:trash" class="text-red-600 cursor-pointer" />
+      </div>
+      <div class="relative" v-if="imageUrl">
+        <img
+          :src="imageUrl"
+          alt="avatar"
+          style="min-width: 104px; max-height: 104px; object-fit: cover; display: inline"
+        />
+      </div>
+      <div v-if="!imageUrl" class="flex flex-col items-center">
+          <span>
+            <slot name="TitlePic">افزودن عکس</slot>
+          </span>
+        <div v-if="loading" class="flex gap-4 items-center mt-2">
+          <loading-outlined></loading-outlined>
+          <span>{{ percent }} %</span>
+        </div>
+      </div>
+    </a-upload>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { uploadURL } from '@root/config'
+import { onMounted, ref, watch, computed } from 'vue'
+import { LoadingOutlined } from '@ant-design/icons-vue'
+import { message } from 'ant-design-vue'
+import { getToken } from '@/utils'
+
+const loading = ref<boolean>(false)
+const percent = ref<number>(0)
+const url = ref<string | undefined>(`${uploadURL}`)
+const fileHeader = computed(() => ({
+  Authorization: `Bearer ${getToken()}`
+}))
+
+interface Props {
+  imageUrl?: string
+  compressed?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  compressed: false
+})
+const imageUrl = ref('')
+
+const emit = defineEmits<{
+  (e: 'remove'): void
+  (e: 'upload', file: any): void
+  (e: 'startUpload'): void
+  (e: 'errorUpload'): void
+}>()
+
+function handelChange({ file, fileList }) {
+  if (Object.hasOwn(file, 'percent')) {
+    percent.value = Math.floor(file.percent)
+  }
+  fixUpload()
+
+  if (file.status === 'uploading') {
+    loading.value = true
+    emit('startUpload')
+    return
+  }
+
+  if (file.status === 'error') {
+    loading.value = false
+    emit('errorUpload')
+    message.error('خطا در آپلود فایل')
+  }
+  if (file.status == 'done') {
+    imageUrl.value = file.response.full_src
+    loading.value = false
+    emit('upload', file.response)
+    message.success('فایل با موفقیت آپلود شد')
+  } else if (fileList.status == 'removed') {
+  }
+}
+
+function fixUpload() {
+  document.querySelectorAll('.fix-capture input').forEach((item) => {
+    item.removeAttribute('capture')
+  })
+}
+
+onMounted(() => {
+  fixUpload()
+})
+
+function deleteAvatar(e) {
+  imageUrl.value = null
+  emit('remove')
+  e.stopPropagation()
+}
+
+watch(
+  () => props.imageUrl,
+  () => {
+    imageUrl.value = props.imageUrl
+  },
+  { immediate: true }
+)
+</script>
+
+<style></style>
+