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

merge

Browse Source
This commit is contained in:
Jason.Chen
2022-02-18 17:09:54 +08:00
parent 3a90894351 4549d4871d
commit a03a991292
9 changed files with 177 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
App.vue
View File

@@ -5,7 +5,7 @@
import im from '@/utils/im/index.js' import im from '@/utils/im/index.js'
export default { export default {
onLaunch: function() { onLaunch: function() {
im.initIm('lmxuhwaglu76d') im.initIm('lmxuhwaglu76d')
return return
//#ifdef APP-PLUS //#ifdef APP-PLUS

18
pages.json
View File

@@ -373,12 +373,20 @@
{ {
"path": "pages/im/private/chat", "path": "pages/im/private/chat",
"style": { "style": {
"navigationBarTitleText": "聊天", "navigationBarBackgroundColor":"#FFFFFF",
"navigationBarBackgroundColor": "#F3F6FB", "disableScroll": false,
"app-plus": { "app-plus": {
"bounce": "none" "titleNView": {
"type": "default",
"buttons": [{
"float": "right",
"fontSrc": "/static/iconfont.ttf",
"text": "\ue607",
"fontSize": "20px"
}]
}
} }
} }
}, },
{ {
"path": "pages/im/private/call", "path": "pages/im/private/call",

48
pages/im/components/sentMessageBar.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<view class=""> <view class="messageBar">
<!-- footer --> <!-- footer -->
<view class="footer"> <view class="footer">
<view class="msg-type" @click="changeMessageType"> <view class="msg-type" @click="changeMessageType">
@@ -49,28 +49,36 @@
}, },
onSuccess() { onSuccess() {
this.$emit('onSuccess') this.$emit('onSuccess')
} },
// 处理弹出层
onHidePopus(){
if(this.showPopups){
this.showPopups = false
}
}
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.footer { .messageBar{
background: white; border-radius: ($radius*2) ($radius*2) 0 0;
padding: 20rpx 30rpx; background: white;
display: flex; .footer {
justify-content: space-between; padding: 20rpx 30rpx;
flex-direction: row; display: flex;
justify-content: space-between;
.msg-type { flex-direction: row;
width: 70rpx; .msg-type {
height: 70rpx; width: 70rpx;
height: 70rpx;
.icon {
margin: 5rpx; .icon {
width: 60rpx; margin: 5rpx;
height: 60rpx; width: 60rpx;
} height: 60rpx;
} }
}
}
} }
</style> </style>

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

@@ -104,14 +104,14 @@
this.callShow = true this.callShow = true
break; break;
case 'location': case 'location':
uni.showToast({ // uni.showToast({
icon: 'none', // icon: 'none',
title: '功能正在开发中' // title: '功能正在开发中'
}) // })
// uni.chooseLocation({ // uni.chooseLocation({
// success: res => { // success: res => {
// console.log(res); // console.log(res);
// this.success() // // this.success()
// } // }
// }) // })
break; break;

21
pages/im/components/sentText.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<view class="sent--text"> <view class="sent--text">
<input class="input" type="text" @focus="focus" @blur="blur" v-model="inputTxt" confirm-type="send" <input class="input" type="text" :auto-blur="true" @focus="focus" @blur="blur" :focus="focusState" v-model="inputTxt" confirm-type="send"
@confirm="sent" cursor-spacing="10" /> @confirm="sent" cursor-spacing="10" />
<!-- <button class="button" size="mini" :disabled="disabled" @click="sent">发送</button> --> <!-- <button class="button" size="mini" :disabled="disabled" @click="demo">{{focusState ? '失焦': '聚焦'}}</button> -->
</view> </view>
</template> </template>
@@ -44,6 +44,11 @@
RongIMLib.saveTextMessageDraft(this.conversationType, this.targetId, this.inputTxt, (res) => { RongIMLib.saveTextMessageDraft(this.conversationType, this.targetId, this.inputTxt, (res) => {
console.log('销毁组件之前，保存草稿信息，但是没有执行', res); console.log('销毁组件之前，保存草稿信息，但是没有执行', res);
}) })
},
data() {
return {
focusState: false,
}
}, },
methods: { methods: {
// 发送文本消息 // 发送文本消息
@@ -55,11 +60,17 @@
this.inputTxt = '' this.inputTxt = ''
}) })
} }
},
demo(){
console.log(this.focusState)
this.focusState = !this.focusState
}, },
focus() { focus() {
this.$emit('focus') this.$emit('focus')
}, },
blur() { blur() {
uni.hideKeyboard()
this.$emit('blur') this.$emit('blur')
} }
} }

21
pages/im/components/showText.vue
View File

@@ -1,7 +1,9 @@
<template> <template>
<view class="msg--text"> <view class="msg--text">
<text class="name" v-if="!guest && name">{{ name }}</text> <text class="name" v-if="!guest && name">{{ name }}</text>
<text class="im--text" :class="guest ? 'right': 'left'">{{ msg.content }}</text> <view>
<text class="im--text" :class="guest ? 'right': 'left'">{{ msg.content }}</text>
</view>
</view> </view>
</template> </template>
@@ -11,7 +13,9 @@
props: { props: {
msg: { msg: {
type: Object, type: Object,
default: {} default: () => {
return {}
}
}, },
name: { name: {
type: String, type: String,
@@ -29,22 +33,21 @@
.msg--text { .msg--text {
.name { .name {
font-size: 26rpx; font-size: 26rpx;
padding-bottom: 10rpx; color: $text-gray-m;
color: $text-gray-m; display: inline-block;
} }
.im--text { .im--text {
max-width: 508rpx; max-width: 508rpx;
padding: 20rpx; padding: 20rpx;
line-height: 46rpx; line-height: 46rpx;
font-size: 32rpx; font-size: 32rpx;
color: $text-color; color: $text-color;
display: inline-block;
word-break: break-all;
&.left { &.left {
border-radius: 0 20rpx 20rpx 20rpx; border-radius: 0 20rpx 20rpx 20rpx;
background: white; background: white;
} }
&.right { &.right {
border-radius: 20rpx 0 20rpx 20rpx; border-radius: 20rpx 0 20rpx 20rpx;
background: $main-color; background: $main-color;

4
pages/im/group/chat.vue
View File

@@ -102,7 +102,9 @@
}) })
}, },
methods: { methods: {
// 转到好友资料页面 onScroll(e) {
this.$refs.messageBar.onHidePopus()
},
toUser(item) { toUser(item) {
if (item.senderUserId == '__system__') { if (item.senderUserId == '__system__') {
return return

10
pages/im/index.vue
View File

@@ -19,7 +19,7 @@
</view> </view>
</view> </view>
<!-- content --> <!-- content -->
<view v-if="$store.state.token !== ''"> <view v-if="$store.state.token !== ''">
<connection-status :connection="connection" /> <connection-status :connection="connection" />
<conversation-list @refresh="getConversationList()" :conversations="conversations" /> <conversation-list @refresh="getConversationList()" :conversations="conversations" />
</view> </view>
@@ -76,7 +76,13 @@
onHide() { onHide() {
uni.$off('onReceiveMessage') uni.$off('onReceiveMessage')
}, },
methods: { methods: {
onDemo(){
console.log('1111')
uni.navigateTo({
url: '/pages/im/chatDemo'
})
},
checkNewFriendPending() { checkNewFriendPending() {
im.getPendingList((pendings) => { im.getPendingList((pendings) => {
this.hasNewFriends = pendings.length this.hasNewFriends = pendings.length

196
pages/im/private/chat.vue
View File

@@ -1,31 +1,84 @@
<style scoped lang="scss">
.chat {
height: 100vh;
overflow: scroll;
display: flex;
flex-direction: column;
.chat-scroll{
display: flex;
flex: 1;
flex-direction: column-reverse;
justify-content: flex-end;
.cell{
padding: $padding/2 $padding;
.time{
text-align: center;
text{
color: $text-gray;
font-size: $title-size-sm;
}
}
.cell-item{
display: flex;
align-items: flex-start;
&.left{
flex-direction: row-reverse;
.avatar{
margin-right: 20rpx;
}
}
&.right{
flex-direction: row-reverse;
.avatar{
margin-left: 20rpx;
}
.state{
text-align: right;
font-size: 24rpx;
}
}
}
}
}
.message-bar{
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
}
</style>
<template> <template>
<view class="chat"> <view class="chat">
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" /> <!-- chat -->
<!-- chat --> <view class="chat-scroll">
<view class="body"> <view class="cell" v-for="(item, index) in messages" :key="index">
<view class="scroll"> <view class="time">
<view class="cell" v-for="(item, index) in messages" :key="index"> <text>{{ item.sentTime|timeCustomCN }}</text>
<view class="time">{{ item.sentTime|timeCustomCN }}</view> </view>
<view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']"> <view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" size="40" shape="square" <u-avatar class="avatar" size="40" shape="square"
@click="showUser(item.senderUserId, item.messageDirection)" @click="showUser(item.senderUserId, item.messageDirection)"
:src="contact(item.senderUserId).portraitUrl" /> :src="contact(item.senderUserId).portraitUrl" />
<view class="msg"> <view class="msg">
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1" <show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
:msg="item.content" /> :msg="item.content" />
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1" <show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
:msg="item.content" /> :msg="item.content" />
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1" <show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content" /> :msg="item.content" />
<view class="state" v-if="item.messageDirection == 1"> <view class="state" v-if="item.messageDirection == 1">
<text <text :class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
:class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text> </view>
</view> </view>
</view> </view>
</view> </view>
</view> <view id="chatBottom"></view>
</view> </view>
</view> <!-- footer -->
<sent-message-bar class="message-bar" :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
</view> </view>
</template> </template>
@@ -72,7 +125,7 @@
} }
} }
}, },
onLoad(e) { onLoad(e) {
this.targetId = e.targetId this.targetId = e.targetId
this.userInfo = this.$store.getters.contactInfo(this.targetId) this.userInfo = this.$store.getters.contactInfo(this.targetId)
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
@@ -136,7 +189,7 @@
}) })
}, },
// 滚动到底部 // 滚动到底部
scrollBottom(type) { scrollBottom(type) {
if (this.latestMessage) { if (this.latestMessage) {
// 清理当前会话，未读消息数量 // 清理当前会话，未读消息数量
RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, this.latestMessage RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, this.latestMessage
@@ -145,83 +198,16 @@
RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, this.latestMessage.sentTime) RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, this.latestMessage.sentTime)
// 更新badge提醒数量 // 更新badge提醒数量
im.setNotifyBadge() im.setNotifyBadge()
} }
setTimeout(() => {
let el = this.$refs.chatBottom
ChatList.scrollToElement(el, {
offset: 0,
animated: false
})
}, 50)
} }
} }
} }
</script> </script>
<style scoped lang="scss">
/* 窗口 */
.chat {
background: $window-color;
height: 100vh;
display: flex;
flex-direction: column-reverse;
.body {
overflow: scroll;
flex: 1;
height: 0;
display: flex;
flex-direction: column-reverse;
.scroll {
display: flex;
flex-direction: column-reverse;
justify-content: flex-end;
.cell {
padding: 10rpx 30rpx;
.time {
text-align: center;
font-size: 24rpx;
color: #666;
}
.cell-item {
display: flex;
width: 690rpx;
justify-content: flex-start;
&.left {
flex-direction: row;
}
&.right {
flex-direction: row-reverse;
.state {
flex-direction: row;
justify-content: flex-end;
}
}
.msg {
margin: 0 20rpx;
.state {
padding-top: 10rpx;
.state-text {
font-size: $title-size-m - 2;
color: rgba($color: $main-color, $alpha: 0.3)
}
.state-text-active {
font-size: $title-size-m - 2;
color: #cecece;
}
}
}
}
.cell-footer {
height: 20rpx;
}
}
}
}
}
</style>