新增聊天窗口语音消息
This commit is contained in:
唐明明
@@ -7,13 +7,18 @@
|
||||
<view class="chat-item-article" :class="item.messageDirection == 1 ? 'right' : 'left'">
|
||||
<view class="chat-msg">
|
||||
<view class="chat-msg-text">{{ item.content.content }}</view>
|
||||
<view class="chat-msg-audio">
|
||||
<image src="@/static/icon/audio_ green.png" mode="widthFix"></image>
|
||||
10"
|
||||
<image src="@/static/icon/audio_white.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<!-- 预留一些图片，语音表情包等位置 -->
|
||||
</view>
|
||||
<view class="chat-status" :class="{'hide': item.sentStatus == 50}"
|
||||
v-if="item.messageDirection == 1">{{ item.sentStatus == 50 ? '已读': '未读'}}</view>
|
||||
<view class="chat-avatar">
|
||||
<u-avatar v-if="item.messageDirection == 2" bg-color="#ffffff" :src="userInfo.portraitUrl" @click="showFriend(targetId)"></u-avatar>
|
||||
<u-avatar v-else @click="showMine" bg-color="#ffffff" :src="$store.getters.sender.portraitUrl" />
|
||||
<u-avatar v-if="item.messageDirection == 2" shape="square" bg-color="#ffffff" :src="userInfo.portraitUrl" @click="showFriend(targetId)"></u-avatar>
|
||||
<u-avatar v-else @click="showMine" shape="square" bg-color="#ffffff" :src="$store.getters.sender.portraitUrl" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="chat-item-time" :id="'chatId_'+index">
|
||||
@@ -22,17 +27,35 @@
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="chat-footer">
|
||||
<input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send"
|
||||
cursor-spacing="10" />
|
||||
<view class="chat-footer">
|
||||
<view class="msg-type" @click="msgType">
|
||||
<image src="@/static/icon/key-icon.png" v-if="importTabs === 0" mode="widthFix"></image>
|
||||
<image src="@/static/icon/msg-icon.png" v-if="importTabs === 1" mode="widthFix"></image>
|
||||
</view>
|
||||
<block v-if="importTabs === 0">
|
||||
<button type="default" class="chat-mp3" hover-class="chat-hover" @touchstart="startAudio" @touchend="chendAudio">按住 说话</button>
|
||||
</block>
|
||||
<block v-if="importTabs === 1">
|
||||
<input class="chat-input" type="text" v-model="inputTxt" confirm-type="发送" @confirm="send" cursor-spacing="10" />
|
||||
</block>
|
||||
<button class="chat-push" :disabled="disabled" size="mini" @click="send">发送</button>
|
||||
</view>
|
||||
|
||||
<!-- 录音中提示 -->
|
||||
<view class="audio-transcribe" v-if="showAudioTranscribe">
|
||||
<image src="@/static/icon/record-icon.png" mode="widthFix"></image>
|
||||
<view class="text">录音中 {{transcribeTime}} s</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as RongIMLib from '@rongcloud/imlib-uni'
|
||||
import im from '@/utils/im/index.js'
|
||||
import im from '@/utils/im/index.js'
|
||||
import permision from "@/js_sdk/wa-permission/permission.js"
|
||||
|
||||
var transcribe
|
||||
var recorderManager = uni.getRecorderManager()
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -47,7 +70,10 @@
|
||||
name: '',
|
||||
userId: '',
|
||||
portraitUrl: ''
|
||||
}
|
||||
},
|
||||
importTabs: 0,
|
||||
showAudioTranscribe:false,
|
||||
transcribeTime: 60
|
||||
}
|
||||
},
|
||||
onLoad(e) {
|
||||
@@ -79,6 +105,12 @@
|
||||
if (res.targetId == this.targetId) {
|
||||
this.getMessageList()
|
||||
}
|
||||
})
|
||||
|
||||
// 监听录音结束
|
||||
recorderManager.onStop(res => {
|
||||
console.log('------------------获取到了录音的临时路径---------------')
|
||||
console.log(res.tempFilePath)
|
||||
})
|
||||
},
|
||||
onUnload() {
|
||||
@@ -118,7 +150,53 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
methods: {
|
||||
// 检查录制权限
|
||||
async getAndroidPermission(){
|
||||
return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
|
||||
},
|
||||
// 切换聊天信息
|
||||
msgType(){
|
||||
this.importTabs = this.importTabs === 1 ? 0: 1
|
||||
},
|
||||
// 录制语音消息
|
||||
startAudio(e){
|
||||
this.getAndroidPermission().then(code => {
|
||||
console.log(code)
|
||||
switch (code){
|
||||
case 1:
|
||||
this.showAudioTranscribe = true
|
||||
recorderManager.start()
|
||||
transcribe = setInterval(() => {
|
||||
this.transcribeTime -= 1
|
||||
if(this.transcribeTime === 0){
|
||||
this.chendAudio()
|
||||
}
|
||||
},1000)
|
||||
break;
|
||||
case 0:
|
||||
uni.showToast({
|
||||
title: '暂无麦克风权限，请前往应用设置开启麦克风',
|
||||
icon : 'none'
|
||||
})
|
||||
break;
|
||||
case -1:
|
||||
uni.showToast({
|
||||
title: '应用权限错误',
|
||||
icon : 'none'
|
||||
})
|
||||
break;
|
||||
}
|
||||
})
|
||||
},
|
||||
// 结束录音
|
||||
chendAudio(e){
|
||||
if(!this.showAudioTranscribe) return
|
||||
recorderManager.stop()
|
||||
clearInterval(transcribe)
|
||||
this.transcribeTime = 60
|
||||
this.showAudioTranscribe = false
|
||||
},
|
||||
getMessageList() {
|
||||
// 获取消息列表
|
||||
const objectNames = [
|
||||
@@ -193,7 +271,32 @@
|
||||
<style lang="scss" scoped>
|
||||
.chat-content {
|
||||
height: 100vh;
|
||||
background: $window-color;
|
||||
background: $window-color;
|
||||
|
||||
.audio-transcribe{
|
||||
background: rgba($color: #000000, $alpha: .6);
|
||||
position: fixed;
|
||||
height: 200rpx;
|
||||
width: 300rpx;
|
||||
border-radius: $radius;
|
||||
color: white;
|
||||
z-index: 99;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -200rpx;
|
||||
margin-left: -150rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
image{
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
}
|
||||
.text{
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-scrool {
|
||||
height: calc(100vh - 140rpx);
|
||||
@@ -224,13 +327,22 @@
|
||||
|
||||
.chat-msg {
|
||||
overflow: hidden;
|
||||
|
||||
.chat-msg-text {
|
||||
display: inline-block;
|
||||
padding: ($padding - 10) $padding;
|
||||
color: $text-color;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
.chat-msg-audio{
|
||||
@extend .chat-msg-text;
|
||||
width: 50%;
|
||||
image{
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -247,14 +359,14 @@
|
||||
.chat-avatar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
background: white;
|
||||
background: white;
|
||||
border-radius: $radius-m;
|
||||
}
|
||||
|
||||
&.left {
|
||||
.chat-avatar {
|
||||
left: $margin;
|
||||
}
|
||||
|
||||
.chat-msg {
|
||||
.chat-msg-text {
|
||||
background-color: white;
|
||||
@@ -270,7 +382,6 @@
|
||||
|
||||
.chat-msg {
|
||||
text-align: right;
|
||||
|
||||
.chat-msg-text {
|
||||
border-radius: $radius*2 0 $radius*2 $radius*2;
|
||||
background: $main-color;
|
||||
@@ -288,11 +399,22 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 140rpx;
|
||||
padding: 20rpx ($padding + 150rpx) 40rpx $padding;
|
||||
padding: 20rpx ($padding + 150rpx) 40rpx ($padding + 94rpx);
|
||||
background: white;
|
||||
box-sizing: border-box;
|
||||
z-index: 99;
|
||||
|
||||
.msg-type{
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: $padding;
|
||||
line-height: 80rpx;
|
||||
image{
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
.chat-input {
|
||||
background: $window-color;
|
||||
height: 80rpx;
|
||||
@@ -300,6 +422,23 @@
|
||||
font-size: $title-size-m;
|
||||
padding: 0 $padding;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.chat-mp3{
|
||||
background: $window-color;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
border-radius: $radius-lg;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: $title-size-m;
|
||||
&::after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-hover{
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.chat-push[size='mini'] {
|
||||
@@ -318,7 +457,7 @@
|
||||
font-weight: bold;
|
||||
|
||||
&[disabled] {
|
||||
background: $uni-bg-color-grey;
|
||||
background: rgba($color: $main-color, $alpha: .5);
|
||||
}
|
||||
|
||||
&::after {
|
||||
|
||||
Reference in New Issue
Block a user