|
|
@@ -1,95 +1,85 @@
|
|
|
<template>
|
|
|
- <a-upload
|
|
|
- v-model:file-list="avatarFile"
|
|
|
- name="file"
|
|
|
- accept=".png,.jpg,.jpeg"
|
|
|
- :show-upload-list="false"
|
|
|
- :action="baseURL + '/takelook/upload/file'"
|
|
|
- :max-count="1"
|
|
|
- class="uploader"
|
|
|
- :headers="{
|
|
|
- authorization: 'authorization-text'
|
|
|
- }"
|
|
|
- :disabled="avatarFile.length > 0"
|
|
|
- @change="handleAvatarChange"
|
|
|
- :before-upload="handleAvatarBeforeUpload"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="add-item-icon scene-sign"
|
|
|
- v-if="avatarFile.length > 0 && avatarFile[0].response"
|
|
|
- >
|
|
|
- <a-image class="avatar" :src="avatarFile[0].response.data" alt="avatar" />
|
|
|
- <span class="delete-scene" @click="deleteAvatar(avatarFile[0])">
|
|
|
+ <div class="uploader">
|
|
|
+ <div class="add-item-icon scene-sign" v-if="avatarImage">
|
|
|
+ <a-image class="avatar" :src="avatarImage" alt="avatar" />
|
|
|
+ <span class="delete-scene" @click="deleteAvatar">
|
|
|
<close-outlined class="delete-scene-icon" />
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="add-item-icon" v-else>
|
|
|
- <a-button shape="circle" class="button" type="primary">
|
|
|
+ <a-button
|
|
|
+ shape="circle"
|
|
|
+ class="button"
|
|
|
+ type="primary"
|
|
|
+ @click="showAvatarUploader"
|
|
|
+ >
|
|
|
<plus-outlined class="add-room-icon" />
|
|
|
</a-button>
|
|
|
</div>
|
|
|
- </a-upload>
|
|
|
+
|
|
|
+ <my-upload
|
|
|
+ field="file"
|
|
|
+ name="file"
|
|
|
+ img-format=".png,.jpg,.jpeg"
|
|
|
+ :url="baseURL + '/takelook/upload/file'"
|
|
|
+ :headers="{
|
|
|
+ authorization: 'authorization-text'
|
|
|
+ }"
|
|
|
+ :disabled="file.length > 0"
|
|
|
+ :lang-type="getLocale"
|
|
|
+ v-model="isShowAvatarModel"
|
|
|
+ @crop-upload-success="handleAvatarUpload"
|
|
|
+ @crop-success="cropSuccess"
|
|
|
+ >
|
|
|
+ </my-upload>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
import { ref } from 'vue'
|
|
|
-import { message, type UploadChangeParam } from 'ant-design-vue'
|
|
|
-import type { FileItem } from './album-list.vue'
|
|
|
import { baseURL } from '@/env'
|
|
|
import { watchEffect } from 'vue'
|
|
|
+import myUpload from 'vue-image-crop-upload'
|
|
|
import { useI18n } from '@/hook/useI18n'
|
|
|
+import { useLocale } from '@/locales/useLocale'
|
|
|
+
|
|
|
const emit = defineEmits(['sync'])
|
|
|
-const avatarFile = ref<any[]>([])
|
|
|
+const file = ref<any[]>([])
|
|
|
+const avatarImage = ref('')
|
|
|
const props = defineProps<{ value: string | undefined }>()
|
|
|
const { t } = useI18n()
|
|
|
+const isShowAvatarModel = ref(false)
|
|
|
+const { getLocale } = useLocale()
|
|
|
|
|
|
watchEffect(() => {
|
|
|
if (props.value?.length) {
|
|
|
- const tempData = {} as FileItem
|
|
|
- tempData.uid = `data-0`
|
|
|
- tempData.response = {
|
|
|
- data: props.value,
|
|
|
- ok: 0
|
|
|
- }
|
|
|
- if (!avatarFile.value?.length) {
|
|
|
- console.log('mapper', tempData)
|
|
|
- avatarFile.value = [tempData]
|
|
|
- }
|
|
|
- } else {
|
|
|
- avatarFile.value = []
|
|
|
+ debugger
|
|
|
}
|
|
|
})
|
|
|
|
|
|
-const handleAvatarChange = (info: UploadChangeParam) => {
|
|
|
- if (info.file.status === 'done') {
|
|
|
- const { code, data } = info.file.response
|
|
|
- if (code === 0) {
|
|
|
- emit('sync', data || '')
|
|
|
- }
|
|
|
- } else if (info.file.status === 'error') {
|
|
|
- message.error(`${info.file.name} file upload failed.`)
|
|
|
- }
|
|
|
+const handleAvatarUpload = (res: any) => {
|
|
|
+ const { data } = res
|
|
|
+ console.log('avatarImage', data)
|
|
|
+ avatarImage.value = data
|
|
|
+ // setTimeout(() => {
|
|
|
+ // isShowAvatarModel.value = false
|
|
|
+ // }, 1500)
|
|
|
}
|
|
|
-const deleteAvatar = (item: any) => {
|
|
|
- const index = avatarFile.value.findIndex(i => i.uid === item.uid)
|
|
|
- if (index > -1) {
|
|
|
- avatarFile.value.splice(index, 1)
|
|
|
- }
|
|
|
- emit('sync', '')
|
|
|
+const cropSuccess = (res: any) => {
|
|
|
+
|
|
|
}
|
|
|
-const handleAvatarBeforeUpload = (file: File) => {
|
|
|
- const max = file.size / 1024 / 1024 <= 1
|
|
|
- if (!max) {
|
|
|
- message.error(t('room.oneMPicLimit'))
|
|
|
- // debugger;
|
|
|
- setTimeout(() => {
|
|
|
- avatarFile.value = []
|
|
|
- }, 50)
|
|
|
- return false
|
|
|
- } else {
|
|
|
- return true
|
|
|
- }
|
|
|
+const cropUploadFail = (res: any) => {
|
|
|
+ console.log('cropUploadFail', res)
|
|
|
+}
|
|
|
+
|
|
|
+const showAvatarUploader = () => {
|
|
|
+ isShowAvatarModel.value = true
|
|
|
+ console.log('show')
|
|
|
+}
|
|
|
+const deleteAvatar = () => {
|
|
|
+ avatarImage.value = ''
|
|
|
}
|
|
|
</script>
|
|
|
+<style lang="scss"></style>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.add-item-icon {
|
|
|
@@ -181,4 +171,15 @@ const handleAvatarBeforeUpload = (file: File) => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+// .vue-image-crop-upload {
|
|
|
+// .vicp-wrap .vicp-operate {
|
|
|
+// color: #0076f6 !important;
|
|
|
+// }
|
|
|
+// }
|
|
|
+</style>
|
|
|
+<style>
|
|
|
+.vue-image-crop-upload .vicp-wrap .vicp-operate a {
|
|
|
+ color: #0076f6;
|
|
|
+}
|
|
|
</style>
|
gemercheung