From bac352d245c6a5b6f29324fa5ad89271bde31a81 Mon Sep 17 00:00:00 2001
From: "xie.bx" <Blue_Xie@epam.com>
Date: Tue, 8 Nov 2022 16:43:05 +0800
Subject: [PATCH] =?UTF-8?q?=E6=AD=A3=E5=9C=A8=E5=BC=80=E5=8F=91=E8=AF=AD?=
 =?UTF-8?q?=E8=A8=80=E4=BC=A0=E8=BE=93=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 im-ui/src/components/chat/ChatBox.vue   |  23 +++++-
 im-ui/src/components/chat/ChatVoice.vue | 100 ++++++++++++++++++++++++
 im-ui/src/view/Home.vue                 |   8 +-
 3 files changed, 123 insertions(+), 8 deletions(-)
 create mode 100644 im-ui/src/components/chat/ChatVoice.vue

diff --git a/im-ui/src/components/chat/ChatBox.vue b/im-ui/src/components/chat/ChatBox.vue
index ec4a92d..14bf987 100644
--- a/im-ui/src/components/chat/ChatBox.vue
+++ b/im-ui/src/components/chat/ChatBox.vue
@@ -20,7 +20,6 @@
 				<el-footer height="25%" class="im-chat-footer">
 					<div class="chat-tool-bar">
 						<div title="表情" class="el-icon-eleme" ref="emotion" @click="switchEmotionBox()">
-							<emotion v-show="showEmotion" :pos="emoBoxPos" @emotion="handleEmotion"></Emotion>
 						</div>
 						<div title="发送图片">
 							<file-upload :action="imageAction" :maxSize="5*1024*1024" :fileTypes="['image/jpeg', 'image/png', 'image/jpg', 'image/webp','image/gif']"
@@ -34,6 +33,8 @@
 								<i class="el-icon-wallet"></i>
 							</file-upload>
 						</div>
+						<div title="发送语音" class="el-icon-microphone" @click="showVoiceBox()">
+						</div>
 						<div title="聊天记录" class="el-icon-chat-dot-round"></div>
 					</div>
 					<textarea v-model="sendText" ref="sendBox" class="send-text-area" @keydown.enter="sendTextMessage()"></textarea>
@@ -46,6 +47,8 @@
 				<chat-group-side :group="group" :groupMembers="groupMembers" @reload="loadGroup(group.id)"></chat-group-side>
 			</el-aside>
 		</el-container>
+		<emotion v-show="showEmotion" :pos="emoBoxPos" @emotion="handleEmotion"></Emotion>
+		<chat-voice :visible="showVoice" @close="closeVoiceBox()"></chat-voice>
 	</el-container>
 </template>
 
@@ -54,6 +57,7 @@
 	import MessageItem from "./MessageItem.vue";
 	import FileUpload from "../common/FileUpload.vue";
 	import Emotion from "../common/Emotion.vue";
+	import ChatVoice from "./ChatVoice.vue";
 
 	export default {
 		name: "chatPrivate",
@@ -61,7 +65,8 @@
 			MessageItem,
 			FileUpload,
 			ChatGroupSide,
-			Emotion
+			Emotion,
+			ChatVoice
 		},
 		props: {
 			chat: {
@@ -74,6 +79,7 @@
 				group: {},
 				groupMembers: [],
 				sendText: "",
+				showVoice: false, // 是否显示语音录制弹窗
 				showSide: false, // 是否显示群聊信息栏
 				showEmotion: false, // 是否显示emoji表情
 				emoBoxPos: { // emoji表情弹出位置
@@ -83,6 +89,7 @@
 			}
 		},
 		methods: {
+
 			handleImageSuccess(res, file) {
 				let msgInfo = {
 					recvId: file.raw.targetId,
@@ -213,9 +220,17 @@
 			},
 			handleEmotion(emoText) {
 				this.sendText += emoText;
+				this.showEmotion = false;
 				// 保持输入框焦点
 				this.$refs.sendBox.focus();
 			},
+			showVoiceBox() {
+				this.showVoice = true;
+
+			},
+			closeVoiceBox(){
+				this.showVoice = false;
+			},
 			setTargetId(msgInfo, targetId) {
 				if (this.chat.type == "GROUP") {
 					msgInfo.groupId = targetId;
@@ -336,7 +351,7 @@
 		watch: {
 			chat: {
 				handler(newChat, oldChat) {
-					if(newChat.targetId > 0 && (newChat.type != oldChat.type || newChat.targetId != oldChat.targetId)){
+					if (newChat.targetId > 0 && (newChat.type != oldChat.type || newChat.targetId != oldChat.targetId)) {
 						if (this.chat.type == "GROUP") {
 							this.loadGroup(this.chat.targetId);
 						} else {
@@ -346,7 +361,7 @@
 						this.sendText = "";
 						// 保持输入框焦点
 						this.$refs.sendBox.focus();
-					}		
+					}
 				},
 				deep: true
 			}
diff --git a/im-ui/src/components/chat/ChatVoice.vue b/im-ui/src/components/chat/ChatVoice.vue
new file mode 100644
index 0000000..a18250e
--- /dev/null
+++ b/im-ui/src/components/chat/ChatVoice.vue
@@ -0,0 +1,100 @@
+<template>
+	<el-dialog class="chat-voice" title="语言录制" :visible.sync="visible" width="35%" :before-close="handleClose">
+		<div>
+			录音时长:{{duration}}
+		</div>
+
+		<el-row>
+			<el-button round type="primary" v-show="state=='STOP'" @click="handleStartRecord()">开始录音</el-button>
+			<el-button round type="warning" v-show="state=='RUNNING'" @click="handlePauseRecord()">暂停录音</el-button>
+			<el-button round type="primary" v-show="state=='PAUSE'" @click="handleResumeRecord()">继续录音</el-button>
+			<el-button round type="danger" v-show="state=='RUNNING'||state=='PAUSE'" @click="handleCompleteRecord()">结束录音</el-button>
+			<el-button round type="success" v-show="state=='COMPLETE'" @click="handlePlayRecord()">播放录音</el-button>
+			<el-button round type="primary" v-show="state=='COMPLETE'" @click="handleRestartRecord()">重新录音</el-button>
+			<el-button round type="primary" v-show="state=='COMPLETE'" @click="handleSendRecord()">立即发送</el-button>
+		</el-row>
+
+	</el-dialog>
+
+</template>
+
+<script>
+	import Recorderx, {
+		ENCODE_TYPE
+	} from 'recorderx';
+
+	export default {
+		name: 'chatVoice',
+		props: {
+			visible: {
+				type: Boolean
+			}
+		},
+		data() {
+			return {
+				rc: new Recorderx(),
+				state: 'STOP', //STOP、RUNNING、PAUSE、COMPLETE
+				duration: 0
+			}
+		},
+		methods: {
+			handleClose() {
+				this.$emit("close");
+			},
+			handleStartRecord() {
+				this.rc.start().then(() => {
+					this.$message.success("开始录音");
+				}).catch(error => {
+					this.$message.error("录音失败" + error.message);
+				});
+				console.log(this.rc)
+				this.state = 'RUNNING';
+			},
+			handlePauseRecord() {
+				this.state = 'PAUSE';
+			},
+			handleResumeRecord() {
+				this.state = 'RUNNING';
+			},
+			handleCompleteRecord() {
+				this.rc.pause()
+				let wav = this.rc.getRecord({
+					encodeTo: ENCODE_TYPE.WAV,
+				});
+				console.log(wav);
+				this.state = 'COMPLETE';
+			},
+			handlePlayRecord() {
+
+			},
+			handleRestartRecord() {
+				this.state = 'RUNNING';
+			},
+			handleSendRecord() {
+				this.upload();
+			},
+			upload() {
+				let wav = this.rc.getRecord({
+					encodeTo: ENCODE_TYPE.WAV,
+				});
+				let name = new Date().getDate() + '.wav';
+				var formData = new window.FormData()
+				formData.append('file', wav, name);
+				this.$http({
+					url: '/file/upload',
+					data: formData,
+					method: 'post',
+					headers: {
+						'Content-Type': 'multipart/form-data'
+					}
+				}).then((url)=>{
+					this.$message.success("上传成功");
+					console.log(url);
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/im-ui/src/view/Home.vue b/im-ui/src/view/Home.vue
index f654c7d..85f6d84 100644
--- a/im-ui/src/view/Home.vue
+++ b/im-ui/src/view/Home.vue
@@ -23,7 +23,7 @@
 					</router-link>
 				</el-menu-item>
 
-				<el-menu-item title="设置" @click="onClickSetting()">
+				<el-menu-item title="设置" @click="showSetting()">
 					<span class="el-icon-setting"></span>
 				</el-menu-item>
 			</el-menu>
@@ -34,7 +34,7 @@
 		<el-main class="content-box">
 			<router-view></router-view>
 		</el-main>
-		<setting :visible="showSettingDialog" @close="onCloseSetting()"></setting>
+		<setting :visible="showSettingDialog" @close="closeSetting()"></setting>
 		<user-info v-show="uiStore.userInfo.show" 
 		:pos="uiStore.userInfo.pos" 
 		:user="uiStore.userInfo.user"
@@ -166,10 +166,10 @@
 					location.href = "/";
 				})
 			},
-			onClickSetting() {
+			showSetting() {
 				this.showSettingDialog = true;
 			},
-			onCloseSetting() {
+			closeSetting() {
 				this.showSettingDialog = false;
 			}
 		},