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

【更新】IM页面逻辑完善

Browse Source
This commit is contained in:
Jason.Chen
2022-01-21 12:15:45 +08:00
parent 92c6b37229
commit 21bee49729
8 changed files with 430 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
pages/im/private/setting.vue
View File

@@ -1,39 +1,41 @@
<template>
<view class="content">
<!-- 聊天信息 -->
<view class="set-user">
<u-avatar
src="https://cdn.uviewui.com/uview/album/1.jpg"
size="48"
></u-avatar>
<view class="set-user-nickname">唐明明</view>
</view>
<!-- 聊天设置 -->
<view class="set-group">
<view class="group-flex">
<label>消息免打扰</label>
<u-switch activeColor="#34CE98" size="22"></u-switch>
</view>
<view class="group-flex">
<label>置顶会话</label>
<u-switch v-model="isTop" activeColor="#34CE98" size="22"></u-switch>
</view>
</view>
<view class="set-group">
<view class="group-flex" @click="cleanConversation">
<label>清空聊天记录</label>
<u-icon name="arrow-right" color="#999" size="16"></u-icon>
</view>
</view>
</view>
<template>
<view class="content">
<!-- 聊天信息 -->
<view class="set-user" @click="showFriend">
<u-avatar :src="userInfo.portraitUrl" size="48"></u-avatar>
<view class="set-user-nickname">{{ userInfo.name }}</view>
</view>
<!-- 聊天设置 -->
<view class="set-group">
<view class="group-flex">
<label>消息免打扰</label>
<u-switch activeColor="#34CE98" size="22"></u-switch>
</view>
<view class="group-flex">
<label>置顶会话</label>
<u-switch v-model="isTop" activeColor="#34CE98" size="22"></u-switch>
</view>
</view>
<view class="set-group">
<view class="group-flex" @click="cleanConversation">
<label>清空聊天记录</label>
<u-icon name="arrow-right" color="#999" size="16"></u-icon>
</view>
</view>
</view>
</template>
<script>
import * as RongIMLib from '@rongcloud/imlib-uni'
import {
getUserInfo
} from '@/apis/interfaces/im.js'
export default {
data() {
return {
userInfo: {},
targetId: '',
conversationType: 1,
isTop: false,
@@ -44,6 +46,11 @@
this.targetId = e.targetId
this.conversationType = e.conversationType
getUserInfo(e.targetId).then(res => {
console.log(res);
this.userInfo = res
})
RongIMLib.getConversation(this.conversationType, this.targetId, ({
conversation
}) => {
@@ -57,6 +64,11 @@
})
},
methods: {
showFriend() {
uni.navigateTo({
url: '/pages/im/friends/info?targetId=' + this.targetId
})
},
setStatus() {
RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({
status
@@ -74,62 +86,79 @@
this.isTop = conversation.isTop
})
})
},
// 清空聊天记录
cleanConversation() {
RongIMLib.deleteMessages(this.conversationType, this.targetId, ({code}) => {
if (code === 0) {
console.log('chenggong ');
}
})
},
// 清空聊天记录
cleanConversation() {
uni.showModal({
title: '清空聊天记录',
success: (res) => {
if (res.confirm) {
RongIMLib.deleteMessages(this.conversationType, this.targetId, ({
code
}) => {
if (code === 0) {
uni.showToast({
title: '聊天记录已清空'
})
}
})
}
}
})
}
}
}
</script>
<style lang="scss" scoped>
.content{
min-height: 100vh;
background: $window-color;
// 用户信息
.set-user{
background: white;
padding: $padding;
display: flex;
align-items: center;
.set-user-nickname{
padding-left: $padding;
flex: 1;
line-height: 70rpx;
font-size: $title-size + 6;
}
}
// 聊天设置
.set-group{
margin: $margin 0;
background: white;
.group-flex{
position: relative;
display: flex;
justify-content: space-between;
height: 90rpx;
line-height: 90rpx;
padding: 0 $padding;
font-size: $title-size;
align-items: center;
&::after{
content: " ";
position: absolute;
left: $margin;
right: 0;
bottom: 0;
height: 1rpx;
background-color: $border-color;
}
&:last-child::after{
display: none;
}
}
}
}
<style lang="scss" scoped>
.content {
min-height: 100vh;
background: $window-color;
// 用户信息
.set-user {
background: white;
padding: $padding;
display: flex;
align-items: center;
.set-user-nickname {
padding-left: $padding;
flex: 1;
line-height: 70rpx;
font-size: $title-size + 6;
}
}
// 聊天设置
.set-group {
margin: $margin 0;
background: white;
.group-flex {
position: relative;
display: flex;
justify-content: space-between;
height: 90rpx;
line-height: 90rpx;
padding: 0 $padding;
font-size: $title-size;
align-items: center;
&::after {
content: " ";
position: absolute;
left: $margin;
right: 0;
bottom: 0;
height: 1rpx;
background-color: $border-color;
}
&:last-child::after {
display: none;
}
}
}
}
</style>