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

merge

Browse Source
This commit is contained in:
唐明明
2022-02-23 16:50:26 +08:00
parent 00836ac209 c840e9ee6b
commit 29757fadeb
30 changed files with 777 additions and 513 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
pages/im/components/friendApplyCell.vue
View File

@@ -35,7 +35,7 @@
},
methods: {
resolve() {
resolveFriend(this.message.sourceUserId).then(res => {
resolveFriend(this.message.sourceUserId).then(res => {
this.clearMessages()
uni.showToast({
icon: 'none',
@@ -69,8 +69,10 @@
// 不管是通过还是拒绝，都要把相关的信息清理
clearMessages() {
RongIMLib.deleteMessages(RongIMLib.ConversationType.SYSTEM, this.message.sourceUserId)
this.$emit('success')
uni.$emit('onContactNotification')
this.$emit('success')
uni.$emit('onNewContactConversation', message)
uni.$emit('onNewContactFriends', message)
uni.$emit('onNewContactPendings', message)
}
}
}

9
pages/im/components/groupUserList.vue
View File

@@ -54,8 +54,8 @@
return {
users: [],
isOwner: false,
isAdmin: false,
canInvite:false,// 是否可以开启邀请
isAdmin: false,
canInvite: false, // 是否可以开启邀请
adminUid: 0,
members: 0,
actionShow: false,
@@ -82,8 +82,7 @@
},
mounted() {
this.initGroupInfo()
getGroupUsers(this.targetId, this.count).then(res => {
console.log("res..",res)
getGroupUsers(this.targetId, this.count).then(res => {
this.users = res
res.map(item => {
this.$store.dispatch('updateContact', item)
@@ -96,7 +95,7 @@
this.isOwner = res.is_owner
this.isAdmin = res.is_admin
this.adminUid = res.user_id
this.members = res.members
this.members = res.members
this.canInvite = res.can_invite
})
},

10
pages/im/components/messageCell.vue
View File

@@ -6,8 +6,10 @@
</view>
<view class="content">
<view class="header">
<view class="name">{{ contact(item.targetId).name }} <text v-if="item.conversationType === 3"
class='qun'>[群]</text></view>
<view class="name">
{{ contact(item.targetId).name }}
<text v-if="item.conversationType === 3" class='group'>[群]</text>
</view>
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
</view>
<message-preview class="preview" :msg="item.latestMessage" :draft="item.draft"
@@ -80,10 +82,8 @@
.name {
font-size: $title-size + 2;
color: #454545;
display: flex;
align-items: center;
.qun {
.group {
color: $main-color;
font-size: $title-size-m - 4;
margin-left: 4px;

37
pages/im/components/sentVoice.vue
View File

@@ -1,12 +1,14 @@
<template>
<view class="send--voice">
<view class="voice" hover-class="chat-hover" @touchstart="startRecord" @touchend="stopRecord">
<view class="voice" hover-class="chat-hover" @click="onShowLay">
<text class="button">按住说话</text>
</view>
<!-- 录音中提示 -->
<view class="modal" v-if="showRecordTip">
<image class="icon" src="@/static/icon/record-icon.png" mode="widthFix"></image>
<text class="text">录音中 {{recordTime}} s</text>
</view>
<!-- 录音中提示 -->
<view class="voice--lay" v-if="showRecordTip" @touchstart="startRecord" @touchend="stopRecord">
<view class="modal">
<image class="icon" src="@/static/icon/record-icon.png" mode="widthFix"></image>
<text class="text">录音中 {{recordTime}} s</text>
</view>
</view>
</view>
</template>
@@ -40,16 +42,24 @@
return this.$store.getters.sender
}
},
created() {
created() {
this.recorderManager = uni.getRecorderManager()
},
methods: {
methods: {
onShowLay(){
// this.showRecordTip = true
uni.vibrateShort({
complete: com => {
console.log(com)
}
})
},
// 检查安卓录制权限
async getAndroidPermission() {
return await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
},
// 录制语音消息
startRecord() {
startRecord() {
this.getAndroidPermission().then(code => {
switch (code) {
case 1:
@@ -114,6 +124,15 @@
font-size: 30rpx;
color: #333;
}
}
.voice--lay{
position: absolute;
left: 0;
bottom: 0;
background: rgba($color: #000000, $alpha: .2);
height: 100vh;
width: 100vw;
}
.modal {

81
pages/im/components/show/messageState.vue Normal file
View File

@@ -0,0 +1,81 @@
<template>
<view v-if="!isRemote">
<view class="state" v-if="isGroup">
<!-- 已发送 -->
<u-icon name="checkbox-mark" :size="iconSize" class="sent"
:color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
<!-- 已阅读 -->
<text class="readers">{{ readers }}</text>
</view>
<view class="state" v-else>
<!-- 已发送 -->
<u-icon name="checkbox-mark" :size="iconSize" class="sent"
:color="message.sentStatus >= 30 ? '#34CE98' : '#999999' " />
<!-- 已阅读 -->
<u-icon name="checkbox-mark" :size="iconSize" class="receive"
:color="message.sentStatus >= 50 ? '#34CE98' : '#999999' " />
</view>
</view>
</template>
<script>
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import utils from '@/utils/index.js'
export default {
name: 'showText',
props: {
message: {
type: Object,
default: () => {
return {}
}
},
isGroup: {
type: Boolean,
default: false
},
isRemote: {
type: Boolean,
default: false
}
},
computed: {
iconSize() {
return utils.rpx2px(28)
},
readers() {
if (this.message.extra) {
return JSON.parse(this.message.extra).readers || 0
}
return 0
}
}
}
</script>
<style scoped lang="scss">
.state {
padding: 10rpx;
border-radius: 30rpx;
background-color: #ddd;
display: flex;
margin-right: 10rpx;
.sent {
z-index: 2;
}
.receive {
z-index: 1;
margin-left: -20rpx;
}
.readers {
font-size: 20rpx;
margin-left: -6rpx;
color: $text-gray-m;
}
}
</style>

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

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

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

@@ -1,110 +1,106 @@
<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)
}
}
},
<template>
<view class="msg--image">
<message-state :message="message" :isGroup="isGroup" :isRemote="isRemote" />
<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'
import messageState from './messageState'
export default {
name: 'showImage',
props: {
message: {
type: Object,
default: () => {
return {}
}
},
isGroup: {
type: Boolean,
default: false
}
},
components: {
messageState
},
computed: {
isRemote() {
return this.message.messageDirection == 2
},
content() {
return this.message.content
},
contact() {
return function(targetId) {
return this.$store.getters.contactInfo(targetId)
}
}
},
methods: {
showImage(path) {
uni.previewImage({
urls: [
path
]
})
},
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);
},
if (this.content.local && this.content.local.indexOf('///data/user/') < 0) {
this.showImage(this.content.local)
} else {
RongIMLib.downloadMediaMessage(this.message.messageId, {
success: (path) => {
this.content.local = path
this.showImage(path)
},
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;
}
}
}
uni.showToast({
icon: 'none',
title: errorCode
})
}
})
}
}
}
}
</script>
<style scoped lang="scss">
.msg--image {
display: flex;
align-items: flex-end;
.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>

69
pages/im/components/show/showText.vue
View File

@@ -1,20 +1,16 @@
<template>
<view class="msg--text">
<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>
<message-state :message="message" :isGroup="isGroup" :isRemote="isRemote" />
<view class="">
<view class="name" v-if="isGroup && isRemote">{{ contact(message.senderUserId).name }}</view>
<view @longpress="backMessage" :class="['text', isRemote ? 'left': 'right']">{{ content }}</view>
<view :class="['text', isRemote ? 'left': 'right']">{{ content }}</view>
</view>
</view>
</template>
<script>
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import messageState from './messageState'
export default {
name: 'showText',
@@ -30,6 +26,9 @@
default: false
}
},
components: {
messageState
},
computed: {
isRemote() {
return this.message.messageDirection == 2
@@ -42,42 +41,6 @@
return this.$store.getters.contactInfo(targetId)
}
}
},
methods: {
// 撤回消息测试
backMessage() {
if (this.$store.getters.sender.userId != this.message.senderUserId) {
uni.showToast({
icon: 'none',
title: '不能撤回别人的消息'
})
return
}
// 判断时间超过了多久 就不能撤回 TODO
// this.message.sentTime
const pushContent = this.$store.getters.sender.name + '撤回了一条消息'
RongIMLib.recallMessage(this.message.messageId, pushContent,
({
code,
message
}) => {
if (code === 0) {
uni.showToast({
icon: 'none',
title: '消息撤回成功'
})
RongIMLib.getMessage(this.message.messageId, res => {
uni.$emit('onRecallMessage', res.message)
})
} else {
uni.showToast({
icon: 'none',
title: '撤回失败' + code
})
}
}
)
}
}
}
</script>
@@ -87,24 +50,6 @@
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;

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

@@ -1,22 +1,30 @@
<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">
<message-state :message="message" :isGroup="isGroup" :isRemote="isRemote" />
<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>
<script>
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import messageState from './messageState'
export default {
name: 'showVoice',
props: {
message: {
type: Object,
@@ -27,13 +35,16 @@
isGroup: {
type: Boolean,
default: false
}
}
},
components: {
messageState
},
data() {
return {
onPlay: false,
innerAC: null,
msgId : null
innerAC: null,
msgId: null
}
},
computed: {
@@ -47,13 +58,13 @@
return function(targetId) {
return this.$store.getters.contactInfo(targetId)
}
},
width() {
if (this.duration > 3) {
return (this.duration * 5) + 150
} else {
return 120
}
},
width() {
if (this.duration > 3) {
return (this.duration * 5) + 150
} else {
return 120
}
}
},
mounted() {
@@ -63,12 +74,7 @@
this.stopPlay()
}
})
},
created() {
console.log(this.message.messageId)
},
},
methods: {
// 播放语音消息
startPlay() {
@@ -77,8 +83,9 @@
this.stopPlay()
return
}
this.onPlay = true
// 如果下载到了本地，那么直接播放，否则调用下载语音消息接口，下载后再播放
if (this.message.content.local) {
if (this.message.content.local && this.message.content.local.indexOf('///data/user/') < 0) {
this.playVoice(this.message.content.local)
} else {
RongIMLib.downloadMediaMessage(this.message.messageId, {
@@ -88,27 +95,27 @@
},
progress: (progress, messageId) => {},
cancel: (messageId) => {},
error: (errorCode, messageId) => {
uni.showToast({
icon: 'none',
title: '语音播放失败'
})
error: (errorCode, messageId) => {
uni.showToast({
icon: 'none',
title: '语音播放失败'
})
}
})
}
},
playVoice(path) {
playVoice(path) {
console.log('准备播放', this.message.content);
this.innerAC = uni.createInnerAudioContext()
this.innerAC.src = path
this.innerAC.autoplay = false
this.msgId = this.message.messageId
this.innerAC.onCanplay(res => {
this.innerAC.autoplay = false
this.msgId = this.message.messageId
this.innerAC.onCanplay(res => {
console.log('onCanplay')
this.innerAC.play()
})
this.innerAC.onPlay(res => {
this.onPlay = true
})
this.innerAC.onPlay(res => {
console.log('onPlay')
uni.$emit('onVoiceMessagePlay', this.message.messageId)
})
this.innerAC.onEnded(res => {
@@ -117,11 +124,11 @@
this.innerAC.onStop(() => {
this.onPlay = false
this.innerAC.destroy()
this.innerAC = null
this.msgId = null
this.innerAC = null
this.msgId = null
uni.$emit('onVoiceMessageStop', this.message.messageId)
})
this.innerAC.onError(err => {
this.innerAC.onError(err => {
uni.showToast({
icon: 'none',
title: '语音播放失败'
@@ -129,87 +136,111 @@
})
},
stopPlay() {
// 停止播放语音消息
if (this.innerAC) {
this.innerAC.stop()
}
}
}
}
</script>
<style>
@keyframes playFlicker{
0%{
opacity: 1;
}
50%{
opacity: .5;
}
100%{
opacity: 1;
}
}
.videoFlicker{
animation: playFlicker 1s infinite;
}
</script>
<style>
@keyframes playFlicker {
0% {
opacity: 1;
}
50% {
opacity: .5;
}
100% {
opacity: 1;
}
}
.videoFlicker {
animation: playFlicker 1s infinite;
}
</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;
}
}
}
}

37
pages/im/components/showMessageCell.vue
View File

@@ -7,7 +7,7 @@
<view v-else :class="['cell-item', message.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" @click="toUser(message)" :size="avatarSize" shape="square"
:src="contact(message.senderUserId).portraitUrl" />
<view class="msg">
<view class="msg" @longpress="backMessage">
<show-text v-if="message.objectName === 'RC:TxtMsg'" :message="message" :isGroup="isGroup" />
<show-voice v-else-if="message.objectName === 'RC:HQVCMsg'" :message="message" :isGroup="isGroup" />
<show-image v-else-if="message.objectName === 'RC:ImgMsg'" :message="message" :isGroup="isGroup" />
@@ -22,6 +22,7 @@
</template>
<script>
import * as IMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import showVoice from './show/showVoice'
import showImage from './show/showImage'
import showText from './show/showText'
@@ -73,6 +74,40 @@
url: '/pages/im/friends/info?targetId=' + item.senderUserId
})
}
},
// 撤回消息测试
backMessage() {
if (this.$store.getters.sender.userId != this.message.senderUserId) {
uni.showToast({
icon: 'none',
title: '不能撤回别人的消息'
})
return
}
// 判断时间超过了多久 就不能撤回 TODO
// this.message.sentTime
const pushContent = this.$store.getters.sender.name + '撤回了一条消息'
IMLib.recallMessage(this.message.messageId, pushContent,
({
code,
message
}) => {
if (code === 0) {
uni.showToast({
icon: 'none',
title: '消息撤回成功'
})
IMLib.getMessage(this.message.messageId, res => {
uni.$emit('onRecallMessage', res.message)
})
} else {
uni.showToast({
icon: 'none',
title: '撤回失败' + code
})
}
}
)
}
}
}