14

2025-12-17 08:47:58 +08:00
parent 916cb22ecc
commit cf1ad1c24b
68 changed files with 2423 additions and 6104 deletions
@@ -1,24 +1,144 @@
 <template>
 	<view class="voice_message_container bg_container">
-		消息
+		<view @tap="handleAudio"
+			:class="{'content-audio-container':true,'chat-audio-container-me':true}"
+			:style="'width:'+((message.soundElem.duration)*2+130)+'rpx'">
+			<view class="voice_icon" 
+					:class="[ 
+							{ voice_icon_right: isSender },
+							{ voice_icon_left: !isSender },
+							{ voice_icon_right_an: isSender && message.clientMsgID == storeCurrentMsg.clientMsgID},
+							{ voice_icon_left_an: !isSender && message.clientMsgID == storeCurrentMsg.clientMsgID }
+					]">
+			</view>
+			<view class="">{{message.soundElem.duration}}s</view>
+		</view>
 	</view>
 </template>v

 <script>
+	import {mapGetters,mapActions} from "vuex";
+	import util from "@/util"
+	import md5 from "md5";
 	export default {
 		name: "VoiceMessageRender",
 		components: {},
 		props: {
 			message: Object,
+			isSender: {
+				type: Boolean,
+				default: false,
+			},
 			conversationID:String,
 		},
 		data() {
-			return {};
+			console.log(this.message);
+			return {
+				src:"",
+			};
+		},
+		computed:{
+			...mapGetters(["storeCurrentMsg"]),	
+		},
+		created() {
+			this.init();
 		},
 		methods: {
-
+			async init(){
+				console.log(this.message);
+				const self = this;
+				let audio = this.message.soundElem;
+				//soundPath
+				// 如果有远程 snapshotUrl，则下载到 cachePath
+				const snapshotUrl = audio.sourceUrl;
+				const key = md5(snapshotUrl || '');
+				const save_file_name = `audio_${key}.${audio.soundType}`;
+				const cachePath = `${this.conversationID}/${save_file_name}`;
+				if (typeof plus === 'undefined' || !cachePath) return;
+				util.cacheFile(snapshotUrl,cachePath,(fn)=>{
+					self.src = fn;
+					console.log(fn);
+				},(e)=>{
+					console.log(e);
+				},(e)=>{
+					console.log(e);
+				});
+			},
+			handleAudio(){
+				const event = {
+					message:this.message,
+					src:this.src,
+					type:'audio_msg_click'
+				};
+				this.$emit("messageEvent",event);
+			}
 		},
 	};
 </script>

-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+	//语音信息样式
+	.content-audio-container {
+		border-radius: 10rpx;
+		padding: 0 20rpx;
+		/* #ifndef APP-NVUE */
+		max-width: 500rpx;
+		/* #endif */
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+
+		.voice_icon {
+			height: 34rpx;
+			width: 34rpx;
+			background-repeat: no-repeat;
+			background-size: 100%;
+		}
+
+		.voice_icon_right {
+			background-image: url('@/static/images/chat/voice/voice-left-3.png');
+			margin-left: 10rpx;
+		}
+
+		.voice_icon_left {
+			background-image: url('@/static/images/chat/voice/voice-right-3.png');
+			margin-right: 10rpx;
+		}
+
+		.voice_icon_right_an {
+			animation: voiceAn_right 1s linear alternate infinite;
+		}
+
+		.voice_icon_left_an {
+			animation: voiceAn_left 1s linear alternate infinite;
+		}
+
+		@keyframes voiceAn_right {
+			0% {
+				background-image: url('@/static/images/chat/voice/voice-left-1.png');
+			}
+
+			50% {
+				background-image: url('@/static/images/chat/voice/voice-left-2.png');
+			}
+
+			100% {
+				background-image: url('@/static/images/chat/voice/voice-left-3.png');
+			}
+		}
+
+		@keyframes voiceAn_left {
+			0% {
+				background-image: url('@/static/images/chat/voice/voice-right-1.png');
+			}
+
+			50% {
+				background-image: url('@/static/images/chat/voice/voice-right-2.png');
+			}
+
+			100% {
+				background-image: url('@/static/images/chat/voice/voice-right-3.png');
+			}
+		}
+	}
+</style>