diff --git a/resources/assets/js/pages/manage/components/ChatInput/index.vue b/resources/assets/js/pages/manage/components/ChatInput/index.vue index 2b5a9b8f1..8b9534333 100755 --- a/resources/assets/js/pages/manage/components/ChatInput/index.vue +++ b/resources/assets/js/pages/manage/components/ChatInput/index.vue @@ -138,6 +138,10 @@ export default { type: Boolean, default: false }, + disabledRecord: { + type: Boolean, + default: false + }, loading: { type: Boolean, default: false @@ -532,44 +536,46 @@ export default { return delta }) - // Load recorder - $A.loadScriptS([ - 'js/recorder/recorder.mp3.min.js', - 'js/recorder/lib.fft.js', - 'js/recorder/frequency.histogram.view.js', - ], (e) => { - if (e !== null || typeof window.Recorder !== 'function') { - return; - } - this.recordRec = window.Recorder({ - type: "mp3", - bitRate: 32, - sampleRate: 16000, - onProcess: (buffers, powerLevel, duration, sampleRate, newBufferIdx, asyncEnd) => { - this.recordWave.input(buffers[buffers.length - 1], powerLevel, sampleRate); - this.recordDuration = duration; - if (duration >= 3 * 60 * 1000) { - // 最长录3分钟 - this.stopRecord(false); - } - } - }) - if (window.Recorder.Support()) { - this.recordReady = true; - this.$nextTick(_ => { - this.recordWave = window.Recorder.FrequencyHistogramView({ - elem: this.$refs.recwave, - lineCount: 90, - position: 0, - minHeight: 1, - stripeEnable: false - }) - }) - } - }); - // Ready event this.$emit('on-ready', this.quill) + + // Load recorder + if (!this.disabledRecord) { + $A.loadScriptS([ + 'js/recorder/recorder.mp3.min.js', + 'js/recorder/lib.fft.js', + 'js/recorder/frequency.histogram.view.js', + ], (e) => { + if (e !== null || typeof window.Recorder !== 'function') { + return; + } + this.recordRec = window.Recorder({ + type: "mp3", + bitRate: 32, + sampleRate: 16000, + onProcess: (buffers, powerLevel, duration, sampleRate, newBufferIdx, asyncEnd) => { + this.recordWave.input(buffers[buffers.length - 1], powerLevel, sampleRate); + this.recordDuration = duration; + if (duration >= 3 * 60 * 1000) { + // 最长录3分钟 + this.stopRecord(false); + } + } + }) + if (window.Recorder.Support()) { + this.recordReady = true; + this.$nextTick(_ => { + this.recordWave = window.Recorder.FrequencyHistogramView({ + elem: this.$refs.recwave, + lineCount: 90, + position: 0, + minHeight: 1, + stripeEnable: false + }) + }) + } + }); + } }, setText(value) { @@ -721,13 +727,10 @@ export default { } const reader = new FileReader(); reader.onloadend = () => { - this.$emit('on-send', { - type: 'record', - data: { - type: this.recordBlob.type, - base64: reader.result, - duration, - } + this.$emit('on-record', { + type: this.recordBlob.type, + base64: reader.result, + duration, }) }; reader.readAsDataURL(this.recordBlob); diff --git a/resources/assets/js/pages/manage/components/DialogWrapper.vue b/resources/assets/js/pages/manage/components/DialogWrapper.vue index e0cd35d7f..551040a65 100644 --- a/resources/assets/js/pages/manage/components/DialogWrapper.vue +++ b/resources/assets/js/pages/manage/components/DialogWrapper.vue @@ -120,6 +120,7 @@ @on-blur="onEventBlur" @on-more="onEventMore" @on-file="sendFileMsg" + @on-record="sendRecord" @on-send="sendMsg" @on-emoji-visible-change="onEventEmojiVisibleChange" :placeholder="$L('输入消息...')"/> @@ -330,11 +331,13 @@ export default { '$route': { handler (route) { if ($A.isJson(window.__sendDialogMsg) && window.__sendDialogMsg.time > $A.Time()) { - const {msgFile, msgText} = window.__sendDialogMsg; + const {msgFile, msgRecord, msgText} = window.__sendDialogMsg; window.__sendDialogMsg = null; this.$nextTick(() => { if ($A.isArray(msgFile) && msgFile.length > 0) { this.sendFileMsg(msgFile); + } else if ($A.isJson(msgRecord) && msgRecord.duration > 0) { + this.sendRecord(msgRecord); } else if (msgText) { this.sendMsg(msgText); } @@ -411,13 +414,6 @@ export default { * @param text */ sendMsg(text) { - if ($A.isJson(text)) { - if (text.type === 'record') { - // 发送录音 text.record - this.sendRecordMsg(text.data); - } - return; - } let msgText; if (typeof text === "string" && text) { msgText = text; @@ -465,7 +461,7 @@ export default { * 发送录音 * @param msg {base64, duration} */ - sendRecordMsg(msg) { + sendRecord(msg) { this.onToBottom(); this.onActive(); // diff --git a/resources/assets/js/pages/manage/components/TaskDetail.vue b/resources/assets/js/pages/manage/components/TaskDetail.vue index e9ef4898a..a385c4735 100644 --- a/resources/assets/js/pages/manage/components/TaskDetail.vue +++ b/resources/assets/js/pages/manage/components/TaskDetail.vue @@ -409,8 +409,9 @@ :placeholder="$L('输入消息...')" @on-more="onEventMore" @on-file="onSelectFile" + @on-record="onRecord" @on-send="onSend"/> - +
{{taskDetail.msg_num > 99 ? '99+' : taskDetail.msg_num}}
{{$L('拖动到这里发送')}}
@@ -492,6 +493,7 @@ export default { msgText: '', msgFile: [], + msgRecord: {}, navActive: 'dialog', logLoadIng: false, @@ -1106,8 +1108,10 @@ export default { window.__sendDialogMsg = { time: $A.Time() + 10, msgText: this.msgText, - msgFile: this.msgFile + msgFile: this.msgFile, + msgRecord: this.msgRecord }; + this.msgRecord = {}; this.msgFile = []; this.msgText = ""; this.goForward({name: 'manage-messenger', params: {dialogId: data.dialog_id}, query: {_: $A.randomString(6)}}); @@ -1173,6 +1177,11 @@ export default { this.msgDialog() }, + onRecord(row) { + this.msgRecord = row; + this.msgDialog() + }, + onSend() { this.$refs.chatInput && this.$refs.chatInput.hidePopover(); this.msgDialog(); diff --git a/resources/assets/sass/pages/components/task-detail.scss b/resources/assets/sass/pages/components/task-detail.scss index 782eff02c..501f3b017 100644 --- a/resources/assets/sass/pages/components/task-detail.scss +++ b/resources/assets/sass/pages/components/task-detail.scss @@ -571,7 +571,7 @@ position: relative; margin: 22px 0 0 36px; background-color: #F4F5F7; - padding: 10px 8px; + padding: 10px 4px 10px 6px; border-radius: 10px; .chat-input-box { .chat-input-wrapper { @@ -588,11 +588,21 @@ } .input-badge { position: absolute; - transform: scale(0.6) translateX(100%); + transform: scale(0.8) translateX(100%); transform-origin: right center; top: 2px; - right: 25px; + right: 22px; z-index: 2; + height: 20px; + border-radius: 10px; + min-width: 20px; + background: #ed4014; + color: #fff; + line-height: 20px; + text-align: center; + padding: 0 6px; + font-size: 12px; + white-space: nowrap; } } .drag-over {