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

调整聊天窗口

Browse Source
This commit is contained in:
唐明明
2022-02-18 17:03:26 +08:00
parent 88c6a85d07 780ffd647a
commit 18f0332fa2
25 changed files with 570 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
pages/im/chatDemo.nvue
View File

@@ -1,28 +0,0 @@
<template>
<view class="">
<input placeholder="输入内容" />
</view>
</template>
<script>
export default {
onShow() {
},
onLoad() {
},
data() {
return {
};
},
methods: {
}
};
</script>
<style>
</style>

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

@@ -6,11 +6,12 @@
</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='qun'>[群]</text></view>
<view class="time">{{ item.sentTime|timeCustomCN }}</view>
</view>
<message-preview class="preview" :msg="item.latestMessage" :conversationType="item.conversationType"
:user="item.latestMessage.userInfo" />
<message-preview class="preview" :msg="item.latestMessage" :draft="item.draft"
:conversationType="item.conversationType" :user="item.latestMessage.userInfo" />
</view>
</view>
</template>
@@ -26,6 +27,9 @@
return {}
}
}
},
mounted() {
console.log(this.item);
},
computed: {
contact() {
@@ -58,7 +62,7 @@
box-sizing: border-box;
position: relative;
flex: 1;
border-bottom-width: 0.5px !important;
border-color: #f9f9f9 !important;

78
pages/im/components/messagePreview.vue
View File

@@ -1,32 +1,37 @@
<template>
<view>
<view class="preview" v-if="msg.objectName=='RC:TxtMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>{{ msg.content || '' }}
</view>
<view class="preview" v-if="msg.objectName=='RC:HQVCMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[语音]
</view>
<view class="preview" v-if="msg.objectName=='RC:ImgMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[图片]
</view>
<view class="preview" v-if="msg.objectName=='RC:GIFMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[表情]
</view>
<view class="preview" v-if="msg.objectName=='RC:FileMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[文件]
</view>
<view class="preview" v-if="msg.objectName=='RC:LBSMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[位置]
</view>
<view class="preview" v-if="msg.objectName=='RC:AudioMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[语音通话]
</view>
<view class="preview" v-if="msg.objectName=='RC:VideoMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[视频通话]
<view>
<view class="preview" v-if="draft">
<text class="draft">[草稿]</text> {{ draft }}
</view>
<view class="preview" v-if="msg.objectName=='RC:GrpNtf'">
[{{ msg.message }}]
</view>
<block v-else>
<view class="preview" v-if="msg.objectName=='RC:TxtMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>{{ msg.content || '' }}
</view>
<view class="preview" v-if="msg.objectName=='RC:HQVCMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[语音]
</view>
<view class="preview" v-if="msg.objectName=='RC:ImgMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[图片]
</view>
<view class="preview" v-if="msg.objectName=='RC:GIFMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[表情]
</view>
<view class="preview" v-if="msg.objectName=='RC:FileMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[文件]
</view>
<view class="preview" v-if="msg.objectName=='RC:LBSMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[位置]
</view>
<view class="preview" v-if="msg.objectName=='RC:AudioMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[语音通话]
</view>
<view class="preview" v-if="msg.objectName=='RC:VideoMsg'">
<text v-if="conversationType == 3">{{ user.name }}：</text>[视频通话]
</view>
<view class="preview" v-if="msg.objectName=='RC:GrpNtf'">
[{{ msg.message }}]
</view>
</block>
</view>
</template>
@@ -36,10 +41,14 @@
msg: {
type: Object,
default: {}
},
conversationType: {
type: Number,
default: 0
},
conversationType: {
type: Number,
default: 0
},
draft: {
type: String,
default: ''
},
user: {
type: Object,
@@ -63,6 +72,11 @@
height: 32rpx;
line-height: 32rpx;
width: 520rpx;
@extend .nowrap;
@extend .nowrap;
.draft {
color: $text-price;
padding-right: 10rpx;
}
}
</style>

40
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">
@@ -60,23 +60,25 @@
}
</script>
<style lang="scss" scoped>
.footer {
background: white;
padding: 20rpx 30rpx;
display: flex;
justify-content: space-between;
flex-direction: row;
.msg-type {
width: 70rpx;
height: 70rpx;
.icon {
margin: 5rpx;
width: 60rpx;
height: 60rpx;
}
}
<style lang="scss" scoped>
.messageBar{
border-radius: ($radius*2) ($radius*2) 0 0;
background: white;
.footer {
padding: 20rpx 30rpx;
display: flex;
justify-content: space-between;
flex-direction: row;
.msg-type {
width: 70rpx;
height: 70rpx;
.icon {
margin: 5rpx;
width: 60rpx;
height: 60rpx;
}
}
}
}
</style>

21
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>
<text class="name" v-if="!guest && name">{{ name }}</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;
color: $text-gray-m;
display: inline-block;
}
.im--text {
max-width: 508rpx;
padding: 20rpx;
line-height: 46rpx;
font-size: 32rpx;
color: $text-color;
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;

11
pages/im/friends/index.vue
View File

@@ -20,7 +20,7 @@
:src="contact(friendItem.targetId).portraitUrl" />
<view class="info">
<view class="name">{{ contact(friendItem.targetId).name }}</view>
<!-- <view class="address">Hash:{{ friendItem.address }}</view> -->
<!-- <view class="address">地址:{{ friendItem.address }}</view> -->
</view>
</view>
</u-index-item>
@@ -66,13 +66,8 @@
})
},
checkNewFriendPending() {
// 获取是否有新的好友申请
RongIMLib.getConversationList([RongIMLib.ConversationType.SYSTEM], 1000, 0, (res) => {
if (res.code === 0) {
this.pendingCount = res.conversations.filter((item) => {
return item.objectName == RongIMLib.ObjectName.ContactNotification
}).length
}
im.getPendingList((pendings) => {
this.pendingCount = pendings.length
})
},
toGroup() {

40
pages/im/friends/info.vue
View File

@@ -6,7 +6,7 @@
bg-color="#fff"></u-avatar>
<view class="info-text">
<view class="nickname">{{ userInfo.name }}</view>
<view class="address" @longpress="copyAddress">Hash：{{ userInfo.address }}</view>
<view class="address" @longpress="copyAddress">地址：{{ userInfo.address }}</view>
</view>
</view>
<!-- 用户资料 -->
@@ -106,7 +106,8 @@
name: '视频通话'
}
],
callShow: false
callShow: false,
hasPeding: false
}
},
onLoad(e) {
@@ -201,36 +202,35 @@
},
// 申请好友
toBeFriend() {
pedingFriend(this.targetId).then(res => {
if (this.hasPeding) {
uni.showToast({
icon: 'none',
title: '请不要频繁操作'
})
return
}
pedingFriend(this.targetId, 'message').then(res => {
uni.showToast({
title: ` 申请成功,等待审核 `,
icon: 'none',
duration: 3000,
mask: true
});
this.hasPeding = true
})
.catch(err => {
// if(err.status_code === 6001){
// this.userInfo.friendship = 'accepted'
// }else{
uni.showToast({
icon: 'error',
title: err.message,
duration: 2000,
mask: true
})
// }
uni.showToast({
icon: 'error',
title: err.message,
duration: 2000,
mask: true
})
})
},
singleCall(e) {
uni.showToast({
icon: 'none',
title: '功能正在开发中'
uni.redirectTo({
url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type
})
// CallLib.startSingleCall(this.targetId, e.type, '');
// uni.redirectTo({
// url: '/pages/im/private/call?targetId=' + this.targetId + '&mediaType=' + e.type
// })
}
}
}

2
pages/im/friends/pending.vue
View File

@@ -15,7 +15,7 @@
<script>
import applyCell from '../components/friendApplyCell'
import im from '@/utils/im/index.js'
export default {
components: {
applyCell

6
pages/im/friends/search.vue
View File

@@ -11,16 +11,14 @@
<!-- 搜索 、 -->
<u-sticky>
<view class="header-search">
<u-search placeholder="输入用户账号、手机号" height="74" searchIcon="search" @custom="search"
v-model="searchValue" @search="search" bgColor="#f9f9f9" :focus="focused" />
<u-search placeholder="输入用户账号、手机号" height="74" searchIcon="search" @custom="search" v-model="searchValue" @search="search" bgColor="#f9f9f9" :focus="focused" />
</view>
</u-sticky>
<block v-if="searchResult.length > 0">
<applyFriend :lists="searchResult" :isApply="true" @action="action" />
</block>
<view class="no-lists" v-else>
<u-image class="cover" radius="4" width="400rpx" height="400rpx"
:src="require('@/static/imgs/no-search.png')" :lazy-load="true" />
<u-image class="cover" radius="4" width="400rpx" height="400rpx" :src="require('@/static/imgs/no-search.png')" :lazy-load="true" />
<span>暂无匹配内容~</span>
</view>
</view>

24
pages/im/group/announceCreate.vue
View File

@@ -1,8 +1,8 @@
<template>
<view class="create">
<u--textarea v-model="content" count height="200" maxlength="200" placeholder="请输入公告内容"></u--textarea>
<u-button type="primary" text="发布" :disabled="disabled" @click="onCreate" color="#34CE98"></u-button>
<view class="create-title">公告内容</view>
<u--textarea v-model="content" count height="240" maxlength="240" placeholder="请输入公告内容" />
<u-button type="primary" text="发布" :disabled="disabled" @click="onCreate" color="#34CE98" />
</view>
</template>
@@ -52,7 +52,23 @@
<style lang="scss" scoped>
.create {
padding: $padding;
.create-title{
font-size: $title-size + 4;
padding: $padding - 10 0 $padding - 10 $padding - 10 ;
color: $text-color;
font-weight: 800;
position: relative;
&::before{
content:"";
position: absolute;
width: 10rpx;
height: 34rpx;
background-color: $main-color;
left: 0;
top: 26rpx;
}
}
.u-button {
margin-top: $padding;
}

31
pages/im/group/announcement.vue
View File

@@ -1,9 +1,9 @@
<template>
<view class="announce">
<u-skeleton rows="2" :loading="loading" avatar :rows="5">
<view v-for="(item,index) in announcements" :key="index" class="item">
<u-skeleton rows="2" :loading="loading" avatar :rows="5" v-if="announcements.length>0">
<view v-for="(item,index) in announcements" :key="index" class="item" >
<view class="header">
<u-avatar :src="item.user.portraitUrl"></u-avatar>
<u-avatar :src="item.user.portraitUrl" />
<view class="user">
<view class="name">{{ item.user.name }}</view>
<view class="time">{{ item.created_at }}</view>
@@ -13,6 +13,10 @@
<view class="content">{{ item.content }}</view>
</view>
</u-skeleton>
<view class="no-lists" v-else>
<u-image class="cover" radius="4" width="400rpx" height="400rpx" :src="require('@/static/imgs/no-level-list.png')" :lazy-load="true" />
<span>暂无公告内容~</span>
</view>
</view>
</template>
@@ -85,7 +89,20 @@
<style lang="scss" scoped>
.announce {
padding: 0 $padding $padding $padding;
.no-lists {
padding-top: $padding * 5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: $title-size-m;
color: $text-gray-m;
span {
padding-top: $padding;
}
}
.item {
border-bottom: solid 1rpx #f9f9f9 !important;
padding-top: $padding;
@@ -117,8 +134,10 @@
}
.content {
padding: $padding;
font-size: 34rpx;
padding: 20rpx $padding;
font-size: $title-size;
color: $text-gray;
max-width: 100%;
}
}
}

31
pages/im/group/apply.vue
View File

@@ -1,24 +1,16 @@
<template>
<view class="apply" v-if="loaded">
<u-avatar :src="group.cover || require('@/static/user/cover.png')" size="128" shape="square" />
<view class="name">
{{ group.name }}
</view>
<u-button class="apply-btn" v-if="group.can_join" @click="applyGroup" text="申请加群" :disabled="disabled"
color="#34CE98" />
<view class="name"> {{ group.name }} </view>
<u-button class="apply-btn" v-if="group.can_join" @click="modalShow = true" text="申请加群" :disabled="disabled" color="#34CE98" />
<view class="" v-else>
<view class="" v-if="group.is_full">群已满员</view>
<view class="" v-if="group.deny_apply">禁止申请</view>
<u-button class="apply-btn2" v-if="group.state === 'accepted'" color="#34CE98" text="进入群聊"
@click="toGroupChat" />
<u-button class="apply-btn2" v-if="group.state === 'accepted'" color="#34CE98" text="进入群聊" @click="toGroupChat" />
</view>
<u-modal negativeTop="300" :show="modalShow" title="申请原因" showCancelButton @cancel="onHideModal"
@confirm="onJoinGroup">
<view class="slot-content">
<u--input placeholder="申请原因" border="surround" focus v-model="message" />
</view>
<u-modal negativeTop="300" :show="modalShow" title="申请原因" showCancelButton @cancel="onHideModal" @confirm="onJoinGroup">
<view class="slot-content"> <u--input placeholder="申请原因" border="surround" focus v-model="message" /> </view>
</u-modal>
</view>
</template>
@@ -41,10 +33,9 @@
}
},
onLoad(e) {
console.log(e, 'e。。。。。。')
this.targetId = e.targetId
// this.targetId = "TG2"
joinGroupPre(this.targetId).then(res => {
console.log(res, 'res.返回群的基本信息')
this.group = res
this.loaded = true
}).catch(err => {
@@ -62,9 +53,6 @@
url: '/pages/im/group/chat?targetId=' + this.targetId
})
},
applyGroup() {
this.modalShow = true
},
onHideModal() {
this.message = ''
this.modalShow = false
@@ -75,8 +63,8 @@
uni.showToast({
icon: 'none',
title: '申请成功',
duration:2000,
mast:true
duration: 2000,
mast: true
})
setTimeout(() => {
this.$Router.back()
@@ -118,7 +106,8 @@
width: 80%;
font-size: $title-size;
}
.apply-btn2{
.apply-btn2 {
padding: 0 100rpx;
}
}

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

@@ -99,15 +99,10 @@
url: '/pages/im/group/info?targetId=' + this.targetId
})
},
<<<<<<< HEAD:pages/im/group/chat.nvue
methods: {
onScroll(e){
this.$refs.messageBar.onHidePopus()
},
=======
methods: {
// 转到好友资料页面
>>>>>>> 6c0feb9cb60e7c756df3bbe34e36fbe467b90d27:pages/im/group/chat.vue
toUser(item) {
if (item.senderUserId == '__system__') {
return
@@ -176,12 +171,10 @@
background: $window-color;
height: 100vh;
display: flex;
flex-direction: column;
flex-direction: column;
overflow: scroll;
.body {
overflow: scroll;
flex: 1;
.cell {
padding: 10rpx 30rpx;

8
pages/im/group/info.vue
View File

@@ -7,6 +7,7 @@
<u-cell-group class="cells" :border="false" >
<u-cell :border="false" class="u-border-bottom" isLink title="群公告" :label="announcement" @click="toAnnouncement" />
<u-cell :border="false" class="u-border-bottom" isLink title="二维码" @click="showGroupQrCode" />
<u-cell :border="false" class="u-border-bottom" v-if="group.can_makesure" isLink title="群聊邀请确认" @click="showGroupsSure" />
<u-cell :border="false" class="u-border-bottom" title="聊天置顶">
<u-switch slot="value" size="20" v-model="isTop" activeColor="#34CE98" @change="setTop" />
</u-cell>
@@ -105,6 +106,7 @@
methods: {
initData() {
getGroupInfo(this.targetId).then(res => {
console.log(res,'群信息。。。。。')
this.group = res.group
this.groupName = res.group.name
this.announcement = res.announcement
@@ -150,6 +152,12 @@
showGroupQrCode() {
this.qrCodeShow = true
},
// 群聊邀请待确认
showGroupsSure(){
uni.navigateTo({
url:"/pages/im/group/reviewed?id="+this.targetId
})
},
onGroupName() {
this.modalShow = true
},

92
pages/im/group/invite.vue
View File

@@ -1,5 +1,32 @@
<template>
<view>
<!-- <u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
<view class="search">
<u--input class="search-input" placeholder="搜索" border="none" prefixIcon="search" v-model="searchTxt"
disabledColor="#Fff" prefixIconStyle="font-size: 22px;color: #909399" />
</view>
<block v-if="friends.length > 0">
<u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
<u-index-item v-for="(item, fkey) in friends" :key="fkey">
<u-index-anchor :text="indexs[fkey]" bgColor="#ededed" height="20" size="12" color="#666"
style="padding:10rpx 30rpx" />
<view v-for="(friendItem, index) in item" :key="index" class="friend-flex"
@click="selectFriend(friendItem.targetId)">
<u-checkbox :customStyle="{marginBottom: '8px'}" :name="friendItem.targetId" />
<u-avatar class="avatar-img" size="40" shape="square" :src="contact(friendItem.targetId).portraitUrl" />
<view class="info">
<view class="name">{{ contact(friendItem.targetId).name }}</view>
</view>
</view>
</u-index-item>
</u-checkbox-group>
</block>
<view class="no-lists" v-else>
<u-image class="cover" radius="4" width="400rpx" height="400rpx"
:src="searchTxt=== '' ? require('@/static/imgs/no-friend.png') :require('@/static/imgs/no-search.png')"
:lazy-load="true" />
<span>{{searchTxt=== ''?'暂无好友列表~':'暂无搜索内容~'}}</span>
</view> -->
<button type="default" @click="onInvite">确定</button>
<u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
<u-checkbox-group v-if="friends.length > 0" v-model="checkboxValue" placement="column">
@@ -26,12 +53,18 @@
import {
getFriendsLetter,
inviteGroupUser
} from '@/apis/interfaces/im';
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
export default {
data() {
return {
// indexs: [],
// friends: [],
// pendingCount: 0,
// searchTxt: '',
// checkboxValue: [],
targetId: '',
indexs: [],
friends: [],
@@ -45,6 +78,19 @@
}
}
},
// onLoad() {
// this.getFriendList()
// this.checkNewFriendPending()
// uni.$on('onContactNotification', this.checkNewFriendPending)
// },
// methods: {
// // group事件
// checkboxChange(n) {
// console.log('change', n);
// },
// getFriendList() {
// getFriendsLetter().then(res => {
// console.log(res)
onLoad(e) {
this.targetId = e.targetId
this.getFriendList()
@@ -56,6 +102,22 @@
this.friends = res.itemArr
})
},
// selectFriend(targetId) {
// console.log(targetId,typeof targetId)
// let arr = this.checkboxValue
// let index = arr.findIndex(item => item === targetId)
// if(index>0){
// console.log('选择了再次点击清除数据le')
// }else{
// console.log('没有选择过，添加数据')
// }
// console.log(this.checkboxValue,index)
// console.log('奥克兰打开',targetId)
// },
addContact(targetId) {
if (!this.checkboxValue.find(item => item == targetId)) {
this.checkboxValue.push(targetId)
@@ -74,8 +136,9 @@
})
})
}
}
}
};
</script>
<style lang="scss" scoped>
@@ -134,4 +197,31 @@
line-height: 24px;
background-color: #fff;
}
.search {
background-color: #fff;
padding: 30rpx;
.search-input {
padding: 10rpx $padding;
width: 100%;
}
.searchTxt {}
}
.no-lists {
padding-top: $padding * 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: $title-size-m;
color: $text-gray-m;
span {
padding-top: $padding;
}
}
</style>

78
pages/im/group/reviewed.vue Normal file
View File

@@ -0,0 +1,78 @@
<!-- 群聊邀请确认列表页面 -->
<template>
<view class="reviewed">
<view class="reviewed-item">
<u-avatar class="avatar" src="require('@/static/user/cover.png')" shape="square" size="36" />
<view style="flex:1;">
<view class="nickname"><span>{{`艾米的猫儿 `}}</span>想邀请<span>{{` 艾米的猫儿洛基艾米`}}</span>加入群聊</view>
<view> 申请原因：{{`呵呵哒。。`}}</view>
</view>
<view class="sure" @click="sure(2)"> 去确认 </view>
</view>
</view>
</template>
<script>
import {
getGroupMakeSure,
getGroupMakeSureAllow
} from "@/apis/interfaces/im.js"
export default {
data() {
return {
lists: [],
};
},
methods: {
sure(id) {
console.log(id, '....')
uni.navigateTo({
url: "/pages/im/group/reviewedInfo?id=" + id
})
}
}
};
</script>
<style lang="scss" scoped>
.reviewed {
.reviewed-item {
margin: $padding - 10;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
box-sizing: border-box;
border-bottom: solid 1rpx #f9f9f9;
font-size: $title-size-m - 2;
padding-bottom: 20rpx;
color: $text-gray-m;
.avatar {
background-color: $main-color;
border-radius: 6rpx;
margin-right: 20rpx;
}
.nickname {
font-size: $title-size-m;
span {
color: $text-color;
}
}
.sure {
background-color: $main-color;
color: #Fff;
text-align: center;
font-size: $title-size-m;
padding: 6rpx 20rpx;
border-radius: 10rpx;
margin-left: 10rpx;
}
}
}
</style>

62
pages/im/group/reviewedInfo.vue Normal file
View File

@@ -0,0 +1,62 @@
<!-- 群聊邀请确认列表页面 -->
<template>
<view class="reviewed">
确认信息页面
</view>
</template>
<script>
export default {
data() {
return {
lists: [],
};
},
onLoad() {
},
methods: {
sure(id) {
uni.navigateTo({
url:"/pages/im/group/reviewedInfo?id="+id
})
}
}
};
</script>
<style lang="scss" scoped>
.reviewed {
.reviewed-item {
margin: $padding;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
border-bottom: solid 1rpx #f9f9f9;
font-size: $title-size-m;
padding-bottom: 20rpx;
color: $text-gray;
.add-icon {
background-color: $main-color;
padding: 10rpx;
border-radius: 6rpx;
margin-right: 20rpx;
}
.sure {
// width: 140rpx;
// background-color: $main-color;
color: $main-color;
text-align: center;
font-size: $title-size-m;
padding: 6rpx 20rpx;
border-radius: 10rpx;
}
}
}
</style>

8
pages/im/index.vue
View File

@@ -17,7 +17,7 @@
</view>
</view>
</view>
</view>
</view>
<!-- content -->
<view v-if="$store.state.token !== ''">
<connection-status :connection="connection" />
@@ -38,7 +38,7 @@
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import im from '@/utils/im/index.js'
import userAuth from '@/public/userAuth'
import conversationList from './components/conversationList'
import conversationList from './components/conversationList'
import connectionStatus from './components/connectionStatus'
export default {
@@ -50,7 +50,7 @@
}
},
components: {
conversationList,
conversationList,
connectionStatus
},
onLoad() {
@@ -105,7 +105,7 @@
code,
conversations
}) => {
if (code === 0) {
if (code === 0) {
this.conversations = conversations
}
})

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

@@ -1,36 +1,88 @@
<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">
<!-- chat -->
<scroll-view class="body" scroll-y>
<view class="cell" v-for="(item, index) in messages" :key="index">
<view class="time">{{ customCN(item.sentTime) }}</view>
<view :class="['cell-item', item.messageDirection == 1 ? 'right' : 'left']">
<u-avatar class="avatar" size="40" shape="square" @click="showUser(targetId, 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 class="cell-footer" ref="chatBottom"></view>
</scroll-view>
<sent-message-bar :conversationType="conversationType" :targetId="targetId" @onSuccess="getNewMessage()" />
<view class="chat">
<!-- chat -->
<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>
<script>
import {
timeCustomCN
} from '@/utils/filters.js'
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
import im from '@/utils/im/index.js'
import showVoice from '../components/showVoice'
@@ -38,8 +90,6 @@
import showText from '../components/showText'
import sentMessageBar from '../components/sentMessageBar'
const ChatList = uni.requireNativePlugin('dom')
export default {
components: {
sentMessageBar,
@@ -62,7 +112,7 @@
computed: {
latestMessage() {
if (this.messages.length) {
return this.messages[this.messages.length - 1]
return this.messages[0]
} else {
return {
sentTime: 0
@@ -75,7 +125,7 @@
}
}
},
onLoad(e) {
onLoad(e) {
this.targetId = e.targetId
this.userInfo = this.$store.getters.contactInfo(this.targetId)
uni.setNavigationBarTitle({
@@ -106,9 +156,6 @@
uni.$off('onReadReceiptReceived')
},
methods: {
customCN(val) {
return timeCustomCN(val)
},
getNewMessage() {
im.getMessageList(
this.conversationType,
@@ -116,10 +163,10 @@
this.latestMessage.sentTime || 0,
1,
false,
(messages) => {
(messages) => {
console.log(messages);
this.messages = this.messages.concat(messages)
this.scrollBottom()
this.messages.unshift(...messages)
// this.scrollBottom()
})
},
// 获取消息列表
@@ -131,9 +178,8 @@
100,
true,
(messages) => {
console.log(messages);
this.messages = messages.reverse()
this.scrollBottom()
this.messages = messages
// this.scrollBottom()
})
},
// 展示好友信息, type 1 是自己， 2 是对方
@@ -144,7 +190,7 @@
})
},
// 滚动到底部
scrollBottom(type) {
scrollBottom(type) {
if (this.latestMessage) {
// 清理当前会话，未读消息数量
RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, this.latestMessage
@@ -153,8 +199,9 @@
RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, this.latestMessage.sentTime)
// 更新badge提醒数量
im.setNotifyBadge()
}
setTimeout(() => {
}
setTimeout(() => {
let el = this.$refs.chatBottom
ChatList.scrollToElement(el, {
offset: 0,
@@ -165,69 +212,4 @@
}
}
</script>
<style scoped lang="scss">
/* 窗口 */
.chat {
background: $window-color;
height: 100vh;
display: flex;
flex-direction: column;
.body {
flex: 1;
overflow: scroll;
.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>