添加下拉刷新

src/views/im/chat/index.vue

@@ -17,120 +17,121 @@
       <div class="m-ellipsis">群公告：{{ wsStore.toUserInfo.notice }}</div>
       <svg-icon class="item-icon" name="right1" />
     </div>
-
     <!-- 聊天消息区域 -->
     <div class="chat-list" ref="chatListRef">
       <van-loading class="load-box" size="24px" v-if="wsStore.loading">加载中...</van-loading>
       <template v-else>
-      <div v-for="(item, index) in imMessages" :key="index">
-        <div class="chat-time">
-          {{ item.createDate || formatTime(Date.now()) }}
-        </div>
-        <div class="box" v-if="item.contentType !== MsgType.MSG_TYPE.NOTICE">
-          <div
-            class="list-item"
-            :class="isSender(item) ? '' : 'flex-reverse'"
-          >
-            <!-- 头像 -->
-            <van-image
-              class="list-img"
-              :class="isSender(item) ? 'mr12' : 'ml12'"
-              round
-              :src="formatAvatarUrl(item)"
-              @click="goToPage(item)"
-            />
-            <!-- 内容 -->
-            <div class="list-cont">
-              <div>{{ item.sender?item.sender.nickname: (item.nickname || item.fromUsername || "匿名用户") }}</div>
-
-              <div v-if="!item.isTemp || item.from == walletStore.account" style="position: relative;"> 
-                <!-- 文本消息 -->
-                <div class="content" v-if="item.contentType === MsgType.MSG_TYPE.TEXT" @click="onLongPress(item)">
-                  <span v-if="item.err" style="color: red;font-size: small;">{{item.messageType == MsgType.MESSAGE_TYPE_USER?'对方已不是您的好友':'您已不在群里'}}</span>
-                  {{ item.content }}
-                </div>
-
-                <!-- 图片消息 -->
-                <div
-                  class="img-message"
-                  v-else-if="item.contentType === MsgType.MSG_TYPE.IMAGE"
-                >
-                  <van-image
-                    :src="item?.localUrl || IM_PATH + item.url"
-                    style="max-width: 120px; border-radius: 8px"
-                    @click="previewImage(item)"
-                  />
-                </div>
-
-                <!-- 名片消息 -->
-                <div
-                  class="content card-message"
-                  v-else-if="item.contentType === 3"
-                >
-                  <div class="card-title">名片</div>
-                  <div class="card-name">{{ item.content }}</div>
-                </div>
+        <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh" style="overflow: initial;">
+        <div v-for="(item, index) in imMessages" :key="index">
+          <div class="chat-time">
+            {{ item.createDate || formatTime(Date.now()) }}
+          </div>
+          <div class="box" v-if="item.contentType !== MsgType.MSG_TYPE.NOTICE">
+            <div
+              class="list-item"
+              :class="isSender(item) ? '' : 'flex-reverse'"
+            >
+              <!-- 头像 -->
+              <van-image
+                class="list-img"
+                :class="isSender(item) ? 'mr12' : 'ml12'"
+                round
+                :src="formatAvatarUrl(item)"
+                @click="goToPage(item)"
+              />
+              <!-- 内容 -->
+              <div class="list-cont">
+                <div>{{ item.sender?item.sender.nickname: (item.nickname || item.fromUsername || "匿名用户") }}</div>
+
+                <div v-if="!item.isTemp || item.from == walletStore.account" style="position: relative;"> 
+                  <!-- 文本消息 -->
+                  <div class="content" v-if="item.contentType === MsgType.MSG_TYPE.TEXT" @click="onLongPress(item)">
+                    <span v-if="item.err" style="color: red;font-size: small;">{{item.messageType == MsgType.MESSAGE_TYPE_USER?'对方已不是您的好友':'您已不在群里'}}</span>
+                    {{ item.content }}
+                  </div>
 
-                <!-- 录音消息 -->
-                <div
-                  class="audio-message"
-                  v-else-if="item.contentType === MsgType.MSG_TYPE.AUDIO"
-                >
-                  <messageAudio
-                    :src="item?.localUrl || IM_PATH + item.url"
-                    :isSender="isSender(item)"
-                  />
-                </div>
-                <!-- 拍摄 -->
-                <video class="video-message" :isSender="isSender(item)" controls v-else-if="item.contentType === MsgType.MSG_TYPE.VIDEO" :src="item?.localUrl || IM_PATH + item.url"></video>
-
-                <!-- 语音消息 -->
-                <div class="content" v-if="item.contentType === Constant.REJECT_AUDIO_ONLINE || item.contentType === Constant.REJECT_VIDEO_ONLINE">[对方拒绝]</div>
-                <div class="content" v-if="item.contentType === Constant.CANCELL_AUDIO_ONLINE || item.contentType === Constant.CANCELL_VIDEO_ONLINE">[通话结束]</div>
-                
-                <div v-if="item.quote > 0" class="quotation">{{ item.quoteMsg?.content }}</div>
-              </div>
-              <!-- 阅后即焚消息 -->
-              <div
-                v-else
-                class="burn-message"
-                @click="viewBurnMessage(item)"
-              >
-                <!-- 未查看 -->
-                <div v-if="!item.view && item.content" class="burn-mask">
-                  阅后即焚，点击查看
-                </div>
+                  <!-- 图片消息 -->
+                  <div
+                    class="img-message"
+                    v-else-if="item.contentType === MsgType.MSG_TYPE.IMAGE"
+                  >
+                    <van-image
+                      :src="item?.localUrl || IM_PATH + item.url"
+                      style="max-width: 120px; border-radius: 8px"
+                      @click="previewImage(item)"
+                    />
+                  </div>
 
-                <!-- 已查看且正在倒计时 -->
-                <template v-else-if="item.view && item.countdown > 0 && item.content">
-                  <!-- 文本类型 -->
-                  <div v-if="item.contentType === MsgType.MSG_TYPE.TEXT" class="burn-content">
-                    {{ item.content }}
-                    <span class="burn-countdown">{{ item.countdown }}s</span>
+                  <!-- 名片消息 -->
+                  <div
+                    class="content card-message"
+                    v-else-if="item.contentType === 3"
+                  >
+                    <div class="card-title">名片</div>
+                    <div class="card-name">{{ item.content }}</div>
                   </div>
 
-                  <!-- 录音类型 -->
-                  <div v-else-if="item.contentType === MsgType.MSG_TYPE.AUDIO" class="burn-audio">
+                  <!-- 录音消息 -->
+                  <div
+                    class="audio-message"
+                    v-else-if="item.contentType === MsgType.MSG_TYPE.AUDIO"
+                  >
                     <messageAudio
                       :src="item?.localUrl || IM_PATH + item.url"
                       :isSender="isSender(item)"
                     />
-                    <span class="burn-countdown">{{ item.countdown }}s</span>
                   </div>
-                </template>
+                  <!-- 拍摄 -->
+                  <video class="video-message" :isSender="isSender(item)" controls v-else-if="item.contentType === MsgType.MSG_TYPE.VIDEO" :src="item?.localUrl || IM_PATH + item.url"></video>
+
+                  <!-- 语音消息 -->
+                  <div class="content" v-if="item.contentType === Constant.REJECT_AUDIO_ONLINE || item.contentType === Constant.REJECT_VIDEO_ONLINE">[对方拒绝]</div>
+                  <div class="content" v-if="item.contentType === Constant.CANCELL_AUDIO_ONLINE || item.contentType === Constant.CANCELL_VIDEO_ONLINE">[通话结束]</div>
+                  
+                  <div v-if="item.quote > 0" class="quotation">{{ item.quoteMsg?.content }}</div>
+                </div>
+                <!-- 阅后即焚消息 -->
+                <div
+                  v-else
+                  class="burn-message"
+                  @click="viewBurnMessage(item)"
+                >
+                  <!-- 未查看 -->
+                  <div v-if="!item.view && item.content" class="burn-mask">
+                    阅后即焚，点击查看
+                  </div>
 
-                <!-- 倒计时结束 -->
-                <div v-else class="burn-destroyed">
-                  该消息已焚毁
+                  <!-- 已查看且正在倒计时 -->
+                  <template v-else-if="item.view && item.countdown > 0 && item.content">
+                    <!-- 文本类型 -->
+                    <div v-if="item.contentType === MsgType.MSG_TYPE.TEXT" class="burn-content">
+                      {{ item.content }}
+                      <span class="burn-countdown">{{ item.countdown }}s</span>
+                    </div>
+
+                    <!-- 录音类型 -->
+                    <div v-else-if="item.contentType === MsgType.MSG_TYPE.AUDIO" class="burn-audio">
+                      <messageAudio
+                        :src="item?.localUrl || IM_PATH + item.url"
+                        :isSender="isSender(item)"
+                      />
+                      <span class="burn-countdown">{{ item.countdown }}s</span>
+                    </div>
+                  </template>
+
+                  <!-- 倒计时结束 -->
+                  <div v-else class="burn-destroyed">
+                    该消息已焚毁
+                  </div>
                 </div>
               </div>
             </div>
           </div>
+          <div class="chat-time" v-if="item.contentType === MsgType.MSG_TYPE.NOTICE">
+            {{ item.content }}
+          </div>
         </div>
-        <div class="chat-time" v-if="item.contentType === MsgType.MSG_TYPE.NOTICE">
-          {{ item.content }}
-        </div>
-      </div>
+      </van-pull-refresh>
       </template>
     </div>
     <!-- 群公告组件 -->
@@ -326,6 +327,7 @@ const rtcStore = useWebRTCStore();
 const text = ref("");
 
 // 状态管理
+const refreshLoading = ref(false);
 const keyboardHeight = ref(0);
 const showEmoji = ref(false);
 const showTools = ref(false);
@@ -357,6 +359,15 @@ const showActionSheet = ref(false)
 const actions = ref([])
 const chatVideo = ref(false);
 
+// 下拉刷新
+const onRefresh = async () => {
+  await wsStore.getMessages({
+    uuid: route.query.uuid,
+    messageType: wsStore.toUserInfo.type == 'user'?1:2, //1:个人  2:群组
+    friendUsername: walletStore.account
+  },true);
+};
+
 const formatAvatarUrl = (item) => {
   const url = item?.sender?.avatar || item?.fromAvatar || ''
   if (/^https?:\/\//.test(url)) {