update

src/api/room.ts

@@ -34,7 +34,7 @@ export type SRoom = {
   image?: string[]
   head?: string
   gps?: string
-  video?: string
+  video?: string[]
 }
 
 export interface RoomScene {
@@ -89,7 +89,7 @@ const serverToLocal = (sroom: SRoom): Room => ({
   userObjList: sroom.userObjList,
   scenesAlbum: sroom.image,
   scenesAvatar: sroom.head,
-  scenesVideo: sroom.video,
+  scenesVideo: sroom.video?.length ? sroom.video[0] : '',
 })
 const localToServer = (room: Room): SRoom => ({
   roomId: room.id,
@@ -109,7 +109,7 @@ const localToServer = (room: Room): SRoom => ({
   userObjList: room.userObjList,
   image: room.scenesAlbum,
   head: room.scenesAvatar,
-  video: room.scenesVideo,
+  video: [room.scenesVideo],
 })
 
 export const fetchRomms = async (status: number = 1): Promise<Rooms> => {

src/components.d.ts

@@ -17,6 +17,7 @@ declare module '@vue/runtime-core' {
     AEmpty: typeof import('ant-design-vue/es')['Empty']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AImage: typeof import('ant-design-vue/es')['Image']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
     ALayout: typeof import('ant-design-vue/es')['Layout']

src/views/room/edit-room/album-list.vue

@@ -1,6 +1,14 @@
 <template>
   <a-list :grid="{ gutter: 20, column: 3 }" :data-source="current">
-    <template #renderItem="{ item }: { item: FileItem | typeof addMarked }">
+    <template
+      #renderItem="{
+        item,
+        index
+      }: {
+        item: string | typeof addMarked,
+        index: number
+      }"
+    >
       <a-list-item class="scene-item">
         <div v-if="item === addMarked" class="add-album">
           <a-upload
@@ -21,9 +29,9 @@
           </a-upload>
         </div>
 
-        <div v-else class="scene-sign" v-if="item.status === 'done'">
-          <img v-if="item.response" :src="item.response?.data" />
-          <span class="delete-scene" @click="deleteAblum(item)">
+        <div v-else class="scene-sign">
+          <a-image v-if="item" :src="item" />
+          <span class="delete-scene" @click="deleteAblum(index)">
             <close-outlined class="delete-scene-icon" />
           </span>
         </div>
@@ -38,7 +46,6 @@ import { Modal, message } from 'ant-design-vue'
 import type { UploadChangeParam } from 'ant-design-vue'
 import { useI18n } from '@/hook/useI18n'
 import { watchEffect } from 'vue'
-import { uniqBy } from 'lodash-es'
 
 export interface FileItem {
   uid: string
@@ -64,64 +71,37 @@ const props = defineProps<{ data: string[] }>()
 const addMarked = Symbol('add-album')
 const albumFile = ref<any[]>([])
 const albumFileExist = ref<any[]>([])
-const totalist = computed(() =>
-  uniqBy([albumFile.value, albumFileExist.value], 'response.data')
-)
-
-const current = computed(() => [
-  addMarked,
-  // ...totalist.value
-  // ...albumFileExist.value,
-  ...albumFile.value
-])
-const albumList = computed(() =>
-  Array.from(albumFile.value).reduce((prev, cur) => {
-    if (prev && cur.response?.data) {
-      return prev.concat(cur.response.data)
-    }
-  }, [])
-)
 
-const deleteAblum = (item: FileItem) => {
-  const index = albumFile.value.findIndex(i => i.uid === item.uid)
+const current = computed(() => [addMarked, ...albumFileExist.value])
 
-  if (index > -1) {
-    albumFile.value.splice(index, 1)
+const deleteAblum = (index: number) => {
+  console.log('index', index)
+  if (index - 1 > -1) {
+    albumFileExist.value.splice(index - 1, 1)
   }
-  const syncData = albumList.value ? albumList.value : []
-  console.log('sync', syncData)
+  const syncData = albumFileExist.value.length ? albumFileExist.value : []
   emit('syncList', syncData)
 }
 const emit = defineEmits(['syncList'])
+
 watchEffect(() => {
-  console.log('totalist', totalist)
   if (props.data?.length) {
-    const mapper = Array.from(props.data).map((i, index) => {
-      const tempData = {} as FileItem
-      tempData.uid = `data-${index}`
-      tempData.response = {
-        data: i,
-        ok: 0
-      }
-      tempData.status = 'done'
-      return tempData
-    })
-    albumFile.value = uniqBy(
-      albumFile.value.concat(mapper),
-      'response.data'
-    )
+    albumFileExist.value = props.data
   }
 })
 
 const handleABlumChange = (info: UploadChangeParam) => {
   if (info.file.status === 'done') {
-    const syncData = albumList.value ? albumList.value : []
-    console.log('sync', syncData)
+    const { code, data } = info.file.response
+    if (code === 0) {
+      albumFileExist.value.push(data)
+    }
+
+    const syncData = albumFileExist.value.length ? albumFileExist.value : []
     emit('syncList', syncData)
   } else if (info.file.status === 'error') {
     message.error(`${info.file.name} file upload failed.`)
   }
-  console.log('check', albumFile)
 }
 
 const handleBeforeUpload = (file: any) => {

src/views/room/edit-room/avatar.vue

@@ -17,7 +17,7 @@
       class="add-item-icon scene-sign"
       v-if="avatarFile.length > 0 && avatarFile[0].response"
     >
-      <img class="avatar" :src="avatarFile[0].response.data" alt="avatar" />
+      <a-image class="avatar" :src="avatarFile[0].response.data" alt="avatar" />
       <span class="delete-scene" @click="deleteAvatar(avatarFile[0])">
         <close-outlined class="delete-scene-icon" />
       </span>

src/views/room/edit-room/index.vue

@@ -128,7 +128,7 @@
           <a-form-item label="视频" name="title">
             <EditVideo
               :data="current.scenesVideo"
-              @sync-list="handleAlbumSync"
+              @sync="handleVideoSync"
             />
           </a-form-item>
 
@@ -629,6 +629,10 @@ export default defineComponent({
       current.scenesAlbum = list
       // console.log('handleAlbumSync', list)
     }
+    const handleVideoSync = (link: any) => {
+      // debugger
+      current.scenesVideo = link
+    }
     const handleAvatarSync = (avatarURL: string) => {
       console.log('avatarURL', avatarURL)
       current.scenesAvatar = avatarURL
@@ -665,7 +669,8 @@ export default defineComponent({
       avatarFile,
       handleAvatarChange,
       handleAlbumSync,
-      handleAvatarSync
+      handleAvatarSync,
+      handleVideoSync
     }
   }
 })

src/views/room/edit-room/video.vue

@@ -1,6 +1,6 @@
 <template>
   <a-upload
-    v-model:file-list="avatarFile"
+    v-model:file-list="videoFile"
     name="file"
     :show-upload-list="false"
     accept=".mp4"
@@ -10,15 +10,17 @@
     :headers="{
       authorization: 'authorization-text'
     }"
-    :disabled="avatarFile.length > 0"
+    :disabled="videoFile.length > 0"
     @change="handleAvatarChange"
+    @preview="handleVideoPreview"
   >
     <div
       class="add-item-icon scene-sign"
-      v-if="avatarFile.length > 0 && avatarFile[0].response"
+      v-if="videoFile.length > 0 && videoFile[0].response"
+      @click.stop="handleVideoPreview"
     >
-      <img class="avatar" :src="avatarFile[0].response.data" alt="avatar" />
-      <span class="delete-scene" @click="deleteAvatar(avatarFile[0])">
+      <video class="avatar" :src="videoFile[0].response.data" alt="video" />
+      <span class="delete-scene" @click.stop="deleteAvatar(videoFile[0])">
         <close-outlined class="delete-scene-icon" />
       </span>
     </div>
@@ -27,6 +29,14 @@
         <plus-outlined class="add-room-icon" />
       </a-button>
     </div>
+    <a-modal
+      :visible="showVideoPreview"
+      :footer="null"
+      width="800px"
+      @cancel="showVideoPreview = false"
+    >
+      <video controls id="previewVideo"></video>
+    </a-modal>
   </a-upload>
 </template>
 <script lang="ts" setup>
@@ -35,9 +45,12 @@ import { message, type UploadChangeParam } from 'ant-design-vue'
 import type { FileItem } from './album-list.vue'
 
 import { watchEffect } from 'vue'
+import { nextTick } from 'vue'
 const emit = defineEmits(['sync'])
-const avatarFile = ref<any[]>([])
+const videoFile = ref<any[]>([])
 const props = defineProps<{ data: string | undefined }>()
+const showVideoPreview = ref(false)
+const previewSrc = ref('')
 
 watchEffect(() => {
   if (props.data?.length) {
@@ -47,12 +60,12 @@ watchEffect(() => {
       data: props.data,
       ok: 0
     }
-    if (!avatarFile.value?.length) {
+    if (!videoFile.value?.length) {
       console.log('mapper', tempData)
-      avatarFile.value = [tempData]
+      videoFile.value = [tempData]
     }
   } else {
-    avatarFile.value = []
+    videoFile.value = []
   }
 })
 
@@ -60,6 +73,8 @@ const handleAvatarChange = (info: UploadChangeParam) => {
   if (info.file.status === 'done') {
     const { code, data } = info.file.response
     if (code === 0) {
+      console.log('syncVideo', data)
+      previewSrc.value = data
       emit('sync', data || '')
     }
   } else if (info.file.status === 'error') {
@@ -67,12 +82,24 @@ const handleAvatarChange = (info: UploadChangeParam) => {
   }
 }
 const deleteAvatar = (item: any) => {
-  const index = avatarFile.value.findIndex(i => i.uid === item.uid)
+  const index = videoFile.value.findIndex(i => i.uid === item.uid)
   if (index > -1) {
-    avatarFile.value.splice(index, 1)
+    videoFile.value.splice(index, 1)
   }
   emit('sync', '')
 }
+const handleVideoPreview = () => {
+  showVideoPreview.value = true
+  nextTick(() => {
+    const video = document.getElementById('previewVideo')
+    if (video) {
+      // debugger
+      const src = previewSrc.value || videoFile.value[0].response.data
+      console.log('src', src)
+      ;(video as any).src = src
+    }
+  })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -166,3 +193,9 @@ const deleteAvatar = (item: any) => {
   }
 }
 </style>
+<style lang="scss">
+#previewVideo {
+  width: 100%;
+  min-height: 500px;
+}
+</style>