对话区添加loading

src/views/Student/components/DialoguePanel.vue

@@ -96,6 +96,9 @@
 				</div>
 			</div>
 		</div>
+    <div class="dialogueLoading" v-if="dialogueLoading">
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path fill="currentColor" d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"><animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>
+    </div>
 	</div>
 </template>
 
@@ -140,8 +143,12 @@ const messageList = reactive<Message[]>([
   },
 ])
 
+// 发送消息loading
 const sendMessageLoading = ref<boolean>(false)
 
+// 整个对话加载loading
+const dialogueLoading = ref<boolean>(false)
+
 // 输入框文本
 const inputText = ref('')
 
@@ -287,6 +294,7 @@ const getUserName = (uid:string | null) => {
 // 获取对话内容
 const getMessageList = () => {
   if (props.courseid && props.userid) {
+    dialogueLoading.value = true
     const params = {
       userid: props.userid,
       groupid: `602def61-005d-11ee-91d8-005056b8q12w`,
@@ -308,6 +316,9 @@ const getMessageList = () => {
           messageList.push(oldMessage)
         })
       }
+      dialogueLoading.value = false
+    }).catch(() => {
+      dialogueLoading.value = false
     })
   }
 }
@@ -325,6 +336,7 @@ onMounted(() => {
 	height: 100%;
 	display: flex;
 	flex-direction: column;
+  position: relative;
 	.dp_messageList {
 		width: 100%;
 		height: calc(100% - 60px - 10px);
@@ -463,5 +475,17 @@ onMounted(() => {
 			}
 		}
 	}
+  .dialogueLoading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
 }
 </style>