音视频组件展示
This commit is contained in:
@@ -1,47 +1,55 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="msg--call">
|
<view class="msg--call">
|
||||||
<view class="name" v-if="!guest && name">{{ name }}</view>
|
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
|
||||||
<view class="im--text" :class="guest ? 'right': 'left'">
|
<view class="im--text" :class="isRemote ? 'left': 'right'">
|
||||||
<u-icon name="camera" size="22" v-if="message.mediaType == 1"
|
<u-icon name="camera" size="22" v-if="msg.mediaType == 1" :label="label" />
|
||||||
:label="message.connected ? '通话时长：' + duration : '未接通'" />
|
<u-icon name="phone" size="22" v-else :label="label" />
|
||||||
<u-icon name="phone" size="22" v-else :label="message.connected ? '通话时长：' + duration : '未接通'" />
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import utils from '@/utils/index.js'
|
import utils from '@/utils/index.js'
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'showText',
|
name: 'showText',
|
||||||
props: {
|
props: {
|
||||||
msg: {
|
message: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => {
|
default: () => {
|
||||||
return {}
|
return {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
name: {
|
isGroup: {
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
guest: {
|
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
mounted() {
|
||||||
message() {
|
},
|
||||||
return JSON.parse(this.msg.message)
|
computed: {
|
||||||
},
|
msg() {
|
||||||
duration() {
|
return JSON.parse(this.message.content.message)
|
||||||
if (this.message.duration > 3600) {
|
},
|
||||||
return moment.utc(this.message.duration * 1000).format('HH:mm:ss')
|
label() {
|
||||||
} else {
|
return this.msg.connected ? '通话时长：' + duration : '未接通'
|
||||||
return moment.utc(this.message.duration * 1000).format('mm:ss')
|
},
|
||||||
}
|
isRemote() {
|
||||||
}
|
return this.message.messageDirection == 2
|
||||||
|
},
|
||||||
|
contact() {
|
||||||
|
return function(targetId) {
|
||||||
|
return this.$store.getters.contactInfo(targetId)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
duration() {
|
||||||
|
if (this.message.duration > 3600) {
|
||||||
|
return moment.utc(this.message.duration * 1000).format('HH:mm:ss')
|
||||||
|
} else {
|
||||||
|
return moment.utc(this.message.duration * 1000).format('mm:ss')
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,110 +1,140 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="">
|
<view class="msg--image">
|
||||||
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
|
<view class="state" v-if="!isGroup && !isRemote">
|
||||||
<view class="msg--image" :class="isRemote ? 'left': 'right'">
|
<!-- 已发送 -->
|
||||||
<image class="img" :src="content.thumbnail" @click="previewImage" mode="widthFix"></image>
|
<u-icon name="checkbox-mark" class="sent" :color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
|
||||||
</view>
|
<!-- 已阅读 -->
|
||||||
</view>
|
<u-icon name="checkbox-mark" class="receive" :color="message.sentStatus >= 50 ? '#34CE98' : '#999999' " />
|
||||||
</template>
|
</view>
|
||||||
|
<view class="">
|
||||||
<script>
|
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
|
||||||
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
|
<view class="image" :class="isRemote ? 'left': 'right'">
|
||||||
|
<image class="img" :src="content.thumbnail" @click="previewImage" mode="widthFix"></image>
|
||||||
export default {
|
</view>
|
||||||
name: 'showImage',
|
</view>
|
||||||
props: {
|
</view>
|
||||||
message: {
|
</template>
|
||||||
type: Object,
|
|
||||||
default: () => {
|
<script>
|
||||||
return {}
|
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
|
||||||
}
|
|
||||||
},
|
export default {
|
||||||
isGroup: {
|
name: 'showImage',
|
||||||
type: Boolean,
|
props: {
|
||||||
default: false
|
message: {
|
||||||
}
|
type: Object,
|
||||||
},
|
default: () => {
|
||||||
computed: {
|
return {}
|
||||||
isRemote() {
|
}
|
||||||
return this.message.messageDirection == 2
|
},
|
||||||
},
|
isGroup: {
|
||||||
content() {
|
type: Boolean,
|
||||||
return this.message.content
|
default: false
|
||||||
},
|
}
|
||||||
contact() {
|
},
|
||||||
return function(targetId) {
|
computed: {
|
||||||
return this.$store.getters.contactInfo(targetId)
|
isRemote() {
|
||||||
}
|
return this.message.messageDirection == 2
|
||||||
}
|
},
|
||||||
},
|
content() {
|
||||||
methods: {
|
return this.message.content
|
||||||
previewImage() {
|
},
|
||||||
if (this.content.local) {
|
contact() {
|
||||||
uni.previewImage({
|
return function(targetId) {
|
||||||
urls: [
|
return this.$store.getters.contactInfo(targetId)
|
||||||
this.content.local
|
}
|
||||||
],
|
}
|
||||||
success: (e) => {
|
},
|
||||||
console.log(e);
|
methods: {
|
||||||
},
|
previewImage() {
|
||||||
fail: (er) => {
|
if (this.content.local) {
|
||||||
console.log(er);
|
uni.previewImage({
|
||||||
}
|
urls: [
|
||||||
})
|
this.content.local
|
||||||
} else {
|
],
|
||||||
RongIMLib.downloadMediaMessage(this.messageId, {
|
success: (e) => {
|
||||||
success: (path) => {
|
console.log(e);
|
||||||
this.content.local = path
|
},
|
||||||
uni.previewImage({
|
fail: (er) => {
|
||||||
urls: [
|
console.log(er);
|
||||||
path
|
}
|
||||||
],
|
})
|
||||||
success: (e) => {
|
} else {
|
||||||
console.log(e);
|
RongIMLib.downloadMediaMessage(this.messageId, {
|
||||||
},
|
success: (path) => {
|
||||||
fail: (er) => {
|
this.content.local = path
|
||||||
console.log(er);
|
uni.previewImage({
|
||||||
}
|
urls: [
|
||||||
})
|
path
|
||||||
},
|
],
|
||||||
progress: (progress, messageId) => {
|
success: (e) => {
|
||||||
console.log('progress', progress);
|
console.log(e);
|
||||||
},
|
},
|
||||||
cancel: (messageId) => {
|
fail: (er) => {
|
||||||
console.log('cancel', messageId);
|
console.log(er);
|
||||||
},
|
}
|
||||||
error: (errorCode, messageId) => {
|
})
|
||||||
console.log('errorCode', errorCode);
|
},
|
||||||
}
|
progress: (progress, messageId) => {
|
||||||
})
|
console.log('progress', progress);
|
||||||
}
|
},
|
||||||
}
|
cancel: (messageId) => {
|
||||||
}
|
console.log('cancel', messageId);
|
||||||
}
|
},
|
||||||
</script>
|
error: (errorCode, messageId) => {
|
||||||
|
console.log('errorCode', errorCode);
|
||||||
<style scoped lang="scss">
|
}
|
||||||
.name {
|
})
|
||||||
font-size: 24rpx;
|
}
|
||||||
color: $text-gray-m;
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.msg--image {
|
</script>
|
||||||
.img {
|
|
||||||
width: 180rpx;
|
<style scoped lang="scss">
|
||||||
}
|
.msg--image {
|
||||||
|
display: flex;
|
||||||
&.left {
|
align-items: flex-end;
|
||||||
.img {
|
|
||||||
border-radius: 0 10rpx 10rpx 10rpx;
|
.state {
|
||||||
}
|
padding: 10rpx;
|
||||||
}
|
border-radius: 30rpx;
|
||||||
|
width: 40rpx;
|
||||||
&.right {
|
background-color: #ddd;
|
||||||
.img {
|
display: flex;
|
||||||
border-radius: 10rpx 0 10rpx 10rpx;
|
margin-right: 10rpx;
|
||||||
}
|
|
||||||
}
|
.sent {
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.receive {
|
||||||
|
z-index: 1;
|
||||||
|
margin-left: -20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: $text-gray-m;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image {
|
||||||
|
.img {
|
||||||
|
width: 180rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.left {
|
||||||
|
.img {
|
||||||
|
border-radius: 0 10rpx 10rpx 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.right {
|
||||||
|
.img {
|
||||||
|
border-radius: 10rpx 0 10rpx 10rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,16 +1,25 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="">
|
<view class="msg--voice">
|
||||||
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
|
<view class="state" v-if="!isGroup && !isRemote">
|
||||||
<view class="msg--voice">
|
<!-- 已发送 -->
|
||||||
<view :class="['voice', isRemote ? 'left': 'right', {'onPlay': onPlay}]" :style="{width: width + 'rpx'}"
|
<u-icon name="checkbox-mark" class="sent" :color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
|
||||||
@click="startPlay">
|
<!-- 已阅读 -->
|
||||||
<image v-if="isRemote" class="icon" :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }"
|
<u-icon name="checkbox-mark" class="receive" :color="message.sentStatus >= 50 ? '#34CE98' : '#999999' " />
|
||||||
src="@/static/icon/audio_green.png" mode="widthFix"></image>
|
</view>
|
||||||
<image v-else class="icon" :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }"
|
<view class="">
|
||||||
src="@/static/icon/audio_white.png" mode="widthFix"></image>
|
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
|
||||||
<text class="duration">{{ duration }}"</text>
|
<view class="msg-voice">
|
||||||
|
<view :class="['voice', isRemote ? 'left': 'right', {'onPlay': onPlay}]" :style="{width: width + 'rpx'}"
|
||||||
|
@click="startPlay">
|
||||||
|
<image v-if="isRemote" class="icon"
|
||||||
|
:class="{ 'videoFlicker' : onPlay && msgId == message.messageId }"
|
||||||
|
src="@/static/icon/audio_green.png" mode="widthFix"></image>
|
||||||
|
<image v-else class="icon" :class="{ 'videoFlicker' : onPlay && msgId == message.messageId }"
|
||||||
|
src="@/static/icon/audio_white.png" mode="widthFix"></image>
|
||||||
|
<text class="duration">{{ duration }}"</text>
|
||||||
|
</view>
|
||||||
|
<u-badge isDot :show="message.content.local =='' && isRemote" />
|
||||||
</view>
|
</view>
|
||||||
<u-badge isDot :show="message.content.local =='' && isRemote" />
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
@@ -79,8 +88,8 @@
|
|||||||
if (this.onPlay) {
|
if (this.onPlay) {
|
||||||
this.stopPlay()
|
this.stopPlay()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.onPlay = true
|
this.onPlay = true
|
||||||
// 如果下载到了本地，那么直接播放，否则调用下载语音消息接口，下载后再播放
|
// 如果下载到了本地，那么直接播放，否则调用下载语音消息接口，下载后再播放
|
||||||
if (this.message.content.local && this.message.content.local.indexOf('///data/user/') < 0) {
|
if (this.message.content.local && this.message.content.local.indexOf('///data/user/') < 0) {
|
||||||
this.playVoice(this.message.content.local)
|
this.playVoice(this.message.content.local)
|
||||||
@@ -162,59 +171,82 @@
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.name {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: $text-gray-m;
|
|
||||||
}
|
|
||||||
|
|
||||||
.msg--voice {
|
.msg--voice {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: flex-end;
|
||||||
|
|
||||||
.u-badge {
|
.state {
|
||||||
margin-left: 20rpx;
|
padding: 10rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
width: 40rpx;
|
||||||
|
background-color: #ddd;
|
||||||
|
display: flex;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
|
||||||
|
.sent {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.receive {
|
||||||
|
z-index: 1;
|
||||||
|
margin-left: -20rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.voice {
|
.name {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: $text-gray-m;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg-voice {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 84rpx;
|
|
||||||
padding: 0 30rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.icon {
|
.u-badge {
|
||||||
width: 38rpx;
|
margin-left: 20rpx;
|
||||||
height: 38rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.left {
|
.voice {
|
||||||
border-radius: 0 20rpx 20rpx 20rpx;
|
display: flex;
|
||||||
background: white;
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
height: 84rpx;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
&.onPlay {
|
.icon {
|
||||||
background-color: #EEEEEE;
|
width: 38rpx;
|
||||||
|
height: 38rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.duration {
|
&.left {
|
||||||
color: #333;
|
border-radius: 0 20rpx 20rpx 20rpx;
|
||||||
font-size: 30rpx;
|
background: white;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.right {
|
&.onPlay {
|
||||||
border-radius: 20rpx 0 20rpx 20rpx;
|
background-color: #EEEEEE;
|
||||||
background: $main-color;
|
}
|
||||||
flex-direction: row-reverse;
|
|
||||||
|
|
||||||
&.onPlay {
|
.duration {
|
||||||
background-color: darken($main-color, 10);
|
color: #333;
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.duration {
|
&.right {
|
||||||
color: white;
|
border-radius: 20rpx 0 20rpx 20rpx;
|
||||||
font-size: 30rpx;
|
background: $main-color;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
|
||||||
|
&.onPlay {
|
||||||
|
background-color: darken($main-color, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
.duration {
|
||||||
|
color: white;
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user