分页情况下查看图片

src/components/ChatInfo.vue

@@ -7,7 +7,7 @@
                 <div class="chat-name" v-if="flow == 'in'">{{ info.fromNick || info.fromNickName }}</div>
                 <van-image
                     :src="body.msg"
-                    @click="preview(body.msg)"
+                    @click="preview(info)"
                     fit="scale-down"
                     v-if="isImage"
                     :width="imgWidth"
@@ -180,8 +180,8 @@ const timeStr = computed(() => {
     });
 });
 
-const preview = url => {
-    emit('preview', url);
+const preview = info => {
+    emit('preview', info);
 };
 
 const imgWidth = ref(120);
@@ -209,8 +209,12 @@ onMounted(() => {
                     imgWidth.value = '';
                 }
             };
+            let _info = {
+                ...props.info,
+                body: body.value
+            };
 
-            emit('setImage', body.value.msg);
+            emit('setImage', _info);
         }
     });
 });

src/views/chat/Detail.vue

@@ -33,9 +33,11 @@
                 <div class="chat-list" ref="chatRef">
                     <chat-info
                         v-for="(item, index) in list"
-                        :key="index"
+                        :key="item.time"
                         :info="item"
                         :beforeTime="index > 0 ? list[index - 1].time : ''"
+                        @setImage="setImage"
+                        @preview="onPreview"
                     ></chat-info>
                 </div>
             </van-pull-refresh>
@@ -375,15 +377,20 @@ function onFocus(e) {
 
 const imgList = ref([]);
 function setImage(img) {
-    imgList.value.push(img);
+    console.log(img);
+    imgList.value = [...imgList.value, img].sort((a, b) => {
+        return a.time - b.time;
+    });
 }
 
-function onPreview(url) {
+function onPreview(info) {
     let index = imgList.value.findIndex(item => {
-        return item === url;
+        return item.time === info.time;
     });
     ImagePreview({
-        images: imgList.value,
+        images: imgList.value.map(item => {
+            return item.body.msg;
+        }),
         startPosition: index
     });
 }