save

src/api/room.ts

@@ -64,7 +64,6 @@ export interface Room {
   freeRoamLock?: number
   takeLookLock?: number
   userObjList?: AuthUser[],
-  scenesAvatar?: string
   scenesAlbum?: string[]
   scenesVideo?: string
   gps?: string
@@ -88,7 +87,7 @@ const serverToLocal = (sroom: SRoom): Room => ({
   visitPassword: sroom.visitPassword,
   userObjList: sroom.userObjList,
   scenesAlbum: sroom.image,
-  scenesAvatar: sroom.head,
+  // scenesAvatar: sroom.head,
   scenesVideo: sroom.video?.length ? sroom.video[0] : '',
 })
 const localToServer = (room: Room): SRoom => ({
@@ -108,7 +107,7 @@ const localToServer = (room: Room): SRoom => ({
   freeRoamLock: room.freeRoamLock || 0,
   userObjList: room.userObjList,
   image: room.scenesAlbum,
-  head: room.scenesAvatar,
+  head: room.head,
   video: [room.scenesVideo || ''],
 })
 

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

@@ -37,14 +37,14 @@ import { baseURL } from '@/env'
 import { watchEffect } from 'vue'
 const emit = defineEmits(['sync'])
 const avatarFile = ref<any[]>([])
-const props = defineProps<{ data: string | undefined }>()
+const props = defineProps<{ value: string | undefined }>()
 
 watchEffect(() => {
-  if (props.data?.length) {
+  if (props.value?.length) {
     const tempData = {} as FileItem
     tempData.uid = `data-0`
     tempData.response = {
-      data: props.data,
+      data: props.value,
       ok: 0
     }
     if (!avatarFile.value?.length) {

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

@@ -133,8 +133,11 @@
             />
           </a-form-item>
 
-          <a-form-item label="头像" name="title">
-            <EditAvatar :data="current.scenesAvatar" @sync="handleAvatarSync" />
+          <a-form-item label="头像" name="head">
+            <EditAvatar
+              v-model:value.trim="current.head"
+              @sync="handleAvatarSync"
+            />
           </a-form-item>
           <!-- 相册 -->
           <!-- <a-form-item label="相册" name="title">
@@ -186,7 +189,7 @@
             style="margin-bottom: 2px"
           >
             <v-otp-input
-               ref="otpInput"
+              ref="otpInput"
               v-model:value="current.visitPassword"
               class="otp-container"
               input-classes="otp-input"
@@ -340,9 +343,15 @@ import timezone from 'dayjs/plugin/timezone'
 import { addAuthUser, checkRoomEditOrDel } from '@/api'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
 import { useScript } from '@/hook/useScript'
-import { onMounted, onBeforeUnmount } from 'vue'
 import type { UploadChangeParam } from 'ant-design-vue'
-import { watchEffect } from 'vue'
+import {
+  watchEffect,
+  getCurrentInstance,
+  onMounted,
+  onBeforeUnmount
+} from 'vue'
+import { nextTick } from 'vue'
+
 // import '@wangeditor/editor/dist/css/style.css' // 引入 css
 // import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 
@@ -389,7 +398,9 @@ export default defineComponent({
     const isRoomEnd = computed(() => props.room?.roomStatus === 2)
     const { getLocale } = useLocale()
     const { t } = useI18n()
-
+    const {
+      proxy: { $forceUpdate }
+    }: any = getCurrentInstance()
     const avatarFile = ref<any[]>([])
     const isLive = ref(false)
     const returnLocale = computed(() => {
@@ -403,15 +414,10 @@ export default defineComponent({
     const otpInput = ref('')
     const formRef = ref<FormInstance>()
     const current = reactive({
-      ...createRoom(props.room || {}),
-      scenesAvatar: ''
+      ...createRoom(props.room || {})
     })
 
     watchEffect(async () => {
-      if (props.room?.head) {
-        // debugger
-        current.scenesAvatar = props.room.head
-      }
       if (current.useTimeList?.length) {
         // debugger
         current.useTimeList = current.useTimeList
@@ -468,7 +474,6 @@ export default defineComponent({
         current.visitPassword.length > 0 &&
         current.visitPassword.length < 4
       ) {
-
         // otpInput.value?.clearInput();
         return message.error(t('room.passwordError'))
       } else {
@@ -483,6 +488,7 @@ export default defineComponent({
       props.onSave && props.onSave(current)
       visible.value = false
     }
+
     // const startSync = () => {
     //   window.open(roomStore.getShareUrl({
 
@@ -682,7 +688,7 @@ export default defineComponent({
         if (info.file.response) {
           const { code, data } = info.file.response
           if (code === 0) {
-            current.scenesAvatar = data
+            current.head = data
           }
         }
         // message.success(`${info.file.name} file uploaded successfully`)
@@ -700,8 +706,10 @@ export default defineComponent({
       current.scenesVideo = link
     }
     const handleAvatarSync = (avatarURL: string) => {
-      console.log('avatarURL', avatarURL)
-      current.scenesAvatar = avatarURL
+      if (unref(formRef)) {
+        current.head = avatarURL || ''
+        console.log('avatarURL-更新后', unref(formRef)?.getFieldsValue())
+      }
     }
     const handleEditorCreated = (editor: any) => {
       editorRef.value = editor // 记录 editor 实例，重要！