diff --git a/pages/im/components/sentText.vue b/pages/im/components/sentText.vue index efa4034..d6259a8 100644 --- a/pages/im/components/sentText.vue +++ b/pages/im/components/sentText.vue @@ -71,11 +71,10 @@ display: flex; flex-direction: row; justify-content: space-between; - .input { background: #F3F6FB; height: 70rpx; - width: 500rpx; + width: 460rpx; border-radius: 10rpx; margin-right: 15rpx; padding: 0 20rpx; diff --git a/pages/im/components/sentVoice.vue b/pages/im/components/sentVoice.vue index a7b4abb..80ac3aa 100644 --- a/pages/im/components/sentVoice.vue +++ b/pages/im/components/sentVoice.vue @@ -1,14 +1,18 @@ @@ -30,11 +34,14 @@ }, data() { return { - showRecordTip: false, + showRecordTip: false, + showConfirm: false, recordTime: 60, interval: 0, maxRecordTime: 60, - recorderManager: null + recorderManager: null, + mp3AudioSrc: null, + isBetaPlay: false } }, computed: { @@ -89,21 +96,63 @@ }, // 结束录音 stopRecord(e) { - if (!this.showRecordTip) return - this.recorderManager.stop() - clearInterval(this.interval) - // 监听录音结束 - this.recorderManager.onStop(res => { - im.sentVoice(this.conversationType, this.targetId, res.tempFilePath, (this.maxRecordTime - - this.recordTime), this.sender, () => { - setTimeout(() => { - this.$emit('success') - }, 500) - }) - this.recordTime = this.maxRecordTime - this.showRecordTip = false - }) - }, + if (!this.showRecordTip) return + // 延迟500毫秒结束录音 + setTimeout(()=> { + this.recorderManager.stop() + clearInterval(this.interval) + // 监听录音结束 + this.recorderManager.onStop(res => { + console.log(res) + this.mp3AudioSrc = res.tempFilePath + this.showConfirm = true + this.showRecordTip = false + }) + },500) + }, + // 发送语音消息 + senVoice(){ + if(this.mp3AudioSrc === null) { + uni.showToast({ + title: '发送失败, 暂无音频信息', + icon : 'none' + }) + return + } + im.sentVoice(this.conversationType, this.targetId, this.mp3AudioSrc, (this.maxRecordTime - + this.recordTime), this.sender, () => { + this.recordTime = this.maxRecordTime + this.mp3AudioSrc = null + this.showConfirm = false + setTimeout(() => { + this.$emit('success') + }, 500) + }) + }, + // 试听语音 + startPlay() { + let betaAudio = uni.createInnerAudioContext() + betaAudio.src = this.mp3AudioSrc; + // 在播放中 + if(this.isBetaPlay){ + betaAudio.stop() + betaAudio.onStop(() => { + this.isBetaPlay = false; + betaAudio.destroy() + }) + return + } + // 监听音频播放中 + betaAudio.play() + betaAudio.onPlay(() => { + this.isBetaPlay = true; + }) + // 监听音频结束 + betaAudio.onEnded(() => { + this.isBetaPlay = false; + betaAudio.destroy() + }) + } } } @@ -126,13 +175,36 @@ } } - .voice--lay{ + .lay{ position: absolute; left: 0; bottom: 0; - background: rgba($color: #000000, $alpha: .2); + z-index: 9; + background: rgba($color: #000000, $alpha: .5); height: 100vh; width: 100vw; + padding: 20vh 30rpx; + box-sizing: border-box; + display: flex; + justify-content: space-around; + align-items: flex-end; + flex-direction: row; + .item{ + height: 140rpx; + width: 140rpx; + text-align: center; + line-height: 140rpx; + border-radius: 50%; + background-color: white; + &.red{ + background: #e6576b; + color: white; + } + &.greed{ + background: #34CE98; + color: white; + } + } } .modal {