完成图片、文件兼容修改语音icon 回复头像显示

pages/conversation/chating/components/MessageItem/MediaMessageRender.vue

@@ -10,7 +10,16 @@
       @click="clickMediaItem"
     >
       <template v-slot:loading>
-        <u-loading-icon color="red"></u-loading-icon>
+        <view class="custom-loading" :style="{ width: '120px', height: maxHeight + 'px' }">
+          <view class="loading-content">
+            <view class="loading-spinner">
+              <view class="spinner-ring"></view>
+              <view class="spinner-ring"></view>
+              <view class="spinner-ring"></view>
+            </view>
+            <text class="loading-text">加载中...</text>
+          </view>
+        </view>
       </template>
     </u--image>
   </view>
@@ -28,13 +37,22 @@ export default {
     };
   },
   computed: {
-    getImgUrl() {
+
+   
+        getImgUrl() {
+      if (!this.message || !this.message.pictureElem) {
+        return '';
+      }
       return (
-        this.message.pictureElem.snapshotPicture?.url ??
-        this.message.pictureElem.sourcePath
-      );
+         this.message.pictureElem.snapshotPicture && this.message.pictureElem.snapshotPicture.url ?
+         this.getFixedSourceUrl(this.message.pictureElem.snapshotPicture.url) :
+         this.getFixedSourceUrl(this.message.pictureElem.sourcePicture.url)
+       );
     },
     maxHeight() {
+      if (!this.message || !this.message.pictureElem || !this.message.pictureElem.sourcePicture) {
+        return 120;
+      }
       const imageHeight = this.message.pictureElem.sourcePicture.height;
       const imageWidth = this.message.pictureElem.sourcePicture.width;
       const aspectRatio = imageHeight / imageWidth;
@@ -42,10 +60,20 @@ export default {
     },
   },
   methods: {
+    getFixedSourceUrl(url) {
+      if (typeof url === 'string' && url.startsWith('http://47.117.71.33/api/object/')) {
+        return url.replace('http://47.117.71.33/api/object/', 'http://47.117.71.33:15219/api/object/');
+      }
+      return url;
+    },
+
     clickMediaItem() {
+      if (!this.message || !this.message.pictureElem || !this.message.pictureElem.sourcePicture) {
+        return;
+      }
       uni.previewImage({
         current: 0,
-        urls: [this.message.pictureElem.sourcePicture.url],
+        urls: [this.getFixedSourceUrl(this.message.pictureElem.sourcePicture.url)],
         indicator: "none",
       });
     },
@@ -61,6 +89,7 @@ export default {
   position: relative;
   border-radius: 16rpx;
   overflow: hidden;
+  display: inline-block;
 
   .play_icon {
     width: 48px;
@@ -78,4 +107,71 @@ export default {
     color: #fff;
   }
 }
+
+.custom-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(4px);
+  border-radius: 16rpx;
+  box-sizing: border-box;
+}
+
+.loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-spinner {
+  position: relative;
+  width: 40px;
+  height: 40px;
+  margin-bottom: 8px;
+}
+
+.spinner-ring {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: 3px solid transparent;
+  border-top: 3px solid #4a9cfc;
+  border-radius: 50%;
+  animation: spin 1.2s linear infinite;
+  
+  &:nth-child(2) {
+    width: 80%;
+    height: 80%;
+    top: 10%;
+    left: 10%;
+    border-top-color: #6bb6ff;
+    animation-delay: -0.4s;
+  }
+  
+  &:nth-child(3) {
+    width: 60%;
+    height: 60%;
+    top: 20%;
+    left: 20%;
+    border-top-color: #8cc8ff;
+    animation-delay: -0.8s;
+  }
+}
+
+.loading-text {
+  font-size: 12px;
+  color: #666;
+  font-weight: 500;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>