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