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

14
pages.json
View File

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

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

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

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

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

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

@@ -1,8 +1,8 @@
<template>
<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" />
<!-- <button class="button" size="mini" :disabled="disabled" @click="sent">发送</button> -->
<!-- <button class="button" size="mini" :disabled="disabled" @click="demo">{{focusState ? '失焦': '聚焦'}}</button> -->
</view>
</template>
@@ -45,6 +45,11 @@
console.log('销毁组件之前，保存草稿信息，但是没有执行', res);
})
},
data() {
return {
focusState: false,
}
},
methods: {
// 发送文本消息
sent() {
@@ -56,10 +61,16 @@
})
}
},
demo(){
console.log(this.focusState)
this.focusState = !this.focusState
},
focus() {
this.$emit('focus')
},
blur() {
uni.hideKeyboard()
this.$emit('blur')
}
}

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

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

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

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

6
pages/im/index.vue
View File

@@ -77,6 +77,12 @@
uni.$off('onReceiveMessage')
},
methods: {
onDemo(){
console.log('1111')
uni.navigateTo({
url: '/pages/im/chatDemo'
})
},
checkNewFriendPending() {
im.getPendingList((pendings) => {
this.hasNewFriends = pendings.length

176
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>
<view class="chat">
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
<!-- chat -->
<view class="body">
<view class="scroll">
<view class="cell" v-for="(item, index) in messages" :key="index">
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
<view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" size="40" shape="square"
@click="showUser(item.senderUserId, item.messageDirection)"
:src="contact(item.senderUserId).portraitUrl" />
<view class="msg">
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
:msg="item.content" />
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
:msg="item.content" />
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content" />
<view class="state" v-if="item.messageDirection == 1">
<text
:class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
</view>
<view class="chat-scroll">
<view class="cell" v-for="(item, index) in messages" :key="index">
<view class="time">
<text>{{ item.sentTime|timeCustomCN }}</text>
</view>
<view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" size="40" shape="square"
@click="showUser(item.senderUserId, item.messageDirection)"
:src="contact(item.senderUserId).portraitUrl" />
<view class="msg">
<show-voice v-if="item.objectName === 'RC:HQVCMsg'" :guest="item.messageDirection == 1"
:msg="item.content" />
<show-image v-if="item.objectName === 'RC:ImgMsg'" :guest="item.messageDirection == 1"
:msg="item.content" />
<show-text v-if="item.objectName === 'RC:TxtMsg'" :guest="item.messageDirection == 1"
:msg="item.content" />
<view class="state" v-if="item.messageDirection == 1">
<text :class="item.sentStatus === 50?'state-text':'state-text-active'">{{ item.sentStatus == 50 ? '已读': '未读'}}</text>
</view>
</view>
</view>
</view>
<view id="chatBottom"></view>
</view>
<!-- footer -->
<sent-message-bar class="message-bar" :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
</view>
</template>
@@ -146,82 +199,15 @@
// 更新badge提醒数量
im.setNotifyBadge()
}
setTimeout(() => {
let el = this.$refs.chatBottom
ChatList.scrollToElement(el, {
offset: 0,
animated: false
})
}, 50)
}
}
}
</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>