TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

音视频组件展示

Browse Source
This commit is contained in:
Jason.Chen
2022-02-22 17:44:15 +08:00
parent 6e2414f160
commit 36f70e1b5e
3 changed files with 254 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
pages/im/components/show/showCall.vue
View File

@@ -1,10 +1,9 @@
<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>
@@ -16,24 +15,33 @@
export default {
name: 'showText',
props: {
msg: {
message: {
type: Object,
default: () => {
return {}
}
},
name: {
type: String,
default: ''
},
guest: {
isGroup: {
type: Boolean,
default: true
default: false
}
},
mounted() {
},
computed: {
message() {
return JSON.parse(this.msg.message)
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) {

68
pages/im/components/show/showImage.vue
View File

@@ -1,8 +1,16 @@
<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 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>
@@ -84,27 +92,49 @@
</script>
<style scoped lang="scss">
.name {
font-size: 24rpx;
color: $text-gray-m;
}
.msg--image {
.img {
width: 180rpx;
}
display: flex;
align-items: flex-end;
&.left {
.img {
border-radius: 0 10rpx 10rpx 10rpx;
.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;
}
}
&.right {
.img {
border-radius: 10rpx 0 10rpx 10rpx;
}
.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>

126
pages/im/components/show/showVoice.vue
View File

@@ -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>
@@ -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;
}
}
}
}