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-18 16:31:01 +08:00
parent e85b9c2c0d
commit 070c6c729e
10 changed files with 326 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

49
pages.json
View File

@@ -356,14 +356,14 @@
"app-plus": {
"titleNView": {
"buttons": [{
"float": "right",
"float": "left",
"text": "\ue605",
"fontSrc": "/static/iconfont.ttf",
"color": "#000",
"fontSize": "20px"
},
{
"float": "left",
"float": "right",
"text": "\ue606",
"fontSrc": "/static/iconfont.ttf",
"color": "#000",
@@ -375,20 +375,57 @@
}
},
{
"path": "pages/im/detail",
"path": "pages/im/private/index",
"style": {
"navigationBarTitleText": "",
"navigationBarTitleText": "单聊",
"app-plus": {
"titleNView": {
"type": "default",
"buttons": [{
"float": "right",
"fontSrc": "/static/uniicons.ttf",
"text": "\ue607"
"fontSrc": "/static/iconfont.ttf",
"text": "\ue607",
"fontSize": "20px"
}]
}
}
}
},
{
"path": "pages/im/private/setting",
"style": {
"navigationBarTitleText": "设置"
}
},
{
"path": "pages/im/friends/index",
"style": {
"navigationBarTitleText": "我的好友"
}
},
{
"path": "pages/im/friends/pending",
"style": {
"navigationBarTitleText": "新的朋友"
}
},
{
"path": "pages/im/friends/info",
"style": {
"navigationBarTitleText": ""
}
},
{
"path": "pages/im/friends/mine",
"style": {
"navigationBarTitleText": "我的资料"
}
},
{
"path": "pages/im/group/index",
"style": {
"navigationBarTitleText": "我的群聊"
}
},
{
"path": "pages/wallet/add",

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

@@ -1,14 +1,139 @@
<template>
<div>
<view class="list">
<view class="list__item" @click="toPending">
<u-avatar shape="square" size="35" icon="man-add-fill" fontSize="26" randomBgColor></u-avatar>
<text class="list__item__user-name">新的朋友</text>
</view>
<u-line></u-line>
<view class="list__item" @click="toGroup">
<u-avatar shape="square" size="35" icon="chrome-circle-fill" fontSize="26" randomBgColor></u-avatar>
<text class="list__item__user-name">我的群聊</text>
</view>
<u-line></u-line>
</view>
<u-index-list :indexList="indexList">
<template v-for="(item, index) in itemArr">
<!-- #ifdef APP-NVUE -->
<u-index-anchor :text="indexList[index]" :key="index"></u-index-anchor>
<!-- #endif -->
<u-index-item :key="index">
<!-- #ifndef APP-NVUE -->
<u-index-anchor :text="indexList[index]"></u-index-anchor>
<!-- #endif -->
<view class="list" v-for="(item1, index1) in item" :key="index1">
<view class="list__item" @click="toInfo">
<image class="list__item__avatar" :src="item1.url"></image>
<text class="list__item__user-name">{{item1.name}}</text>
</view>
<u-line></u-line>
</view>
</u-index-item>
</template>
<view slot="footer" class="u-safe-area-inset--bottom">
<text class="list__footer">共305位好友</text>
</view>
</u-index-list>
</div>
</template>
<script>
const indexList = () => {
const indexList = []
const charCodeOfA = 'A'.charCodeAt(0)
indexList.push("↑")
indexList.push("☆")
for (let i = 0; i < 26; i++) {
indexList.push(String.fromCharCode(charCodeOfA + i))
}
indexList.push('#')
return indexList
}
export default {
data() {
return {
indexList: indexList(),
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/2.jpg',
'https://cdn.uviewui.com/uview/album/3.jpg',
'https://cdn.uviewui.com/uview/album/4.jpg',
'https://cdn.uviewui.com/uview/album/5.jpg',
'https://cdn.uviewui.com/uview/album/6.jpg',
'https://cdn.uviewui.com/uview/album/7.jpg',
'https://cdn.uviewui.com/uview/album/8.jpg',
'https://cdn.uviewui.com/uview/album/9.jpg',
'https://cdn.uviewui.com/uview/album/10.jpg',
],
names: ["勇往无敌", "疯狂的迪飙", "磊爱可", "梦幻梦幻梦", "枫中飘瓢", "飞翔天使",
"曾经第一", "追风幻影族长", "麦小姐", "胡格罗雅", "Red磊磊", "乐乐立立", "青龙爆风", "跑跑卡叮车", "山里狼", "supersonic超"
]
}
},
computed: {
itemArr() {
return this.indexList.map(item => {
const arr = []
for (let i = 0; i < 10; i++) {
arr.push({
name: this.names[uni.$u.random(0, this.names.length - 1)],
url: this.urls[uni.$u.random(0, this.urls.length - 1)]
})
}
return arr
})
}
},
methods: {
toPending() {
uni.navigateTo({
url: '/pages/im/friends/pending'
})
},
toGroup() {
uni.navigateTo({
url: '/pages/im/group/index',
fail: (err) => {
console.log(err);
}
})
},
toInfo() {
uni.navigateTo({
url: '/pages/im/friends/info'
})
}
}
}
</script>
<style lang="scss" scoped>
<style lang="scss">
.list {
&__item {
@include flex;
padding: 6px 12px;
align-items: center;
&__avatar {
height: 35px;
width: 35px;
border-radius: 3px;
}
&__user-name {
font-size: 16px;
margin-left: 10px;
color: $u-main-color;
}
}
&__footer {
color: $u-tips-color;
font-size: 14px;
text-align: center;
margin: 15px 0;
}
}
</style>

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

@@ -1,8 +1,21 @@
<template>
</template>
<template>
<div>
好友资料，
<u-button @click="toPrivate">发送消息</u-button>
</div>
</template>
<script>
</script>
<style>
export default {
methods: {
toPrivate() {
uni.navigateTo({
url: '/pages/im/private/index?targetId=10047&conversationType=1'
})
}
}
}
</script>
<style>
</style>

3
pages/im/friends/mine.vue
View File

@@ -1,4 +1,7 @@
<template>
<div>
我的资料，也就展示个二维码吧
</div>
</template>
<script>

11
pages/im/friends/pending.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<div>
好友搜索，好友申请列表 都会在这个页面
</div>
</template>
<script>
</script>
<style>
</style>

20
pages/im/group/index.vue Normal file
View File

@@ -0,0 +1,20 @@
<template>
<div>
<u-button @click="toIndex">会首页</u-button>
</div>
</template>
<script>
export default {
methods: {
toIndex() {
uni.switchTab({
url: '/pages/im/index'
})
}
}
}
</script>
<style>
</style>

25
pages/im/index.vue
View File

@@ -20,7 +20,7 @@
<u-loadmore status="nomore" />
</div>
<div v-else>
<button @click="toLogin">去登录</button>
<u-button @click="toLogin">去登录</u-button>
</div>
</div>
</template>
@@ -48,9 +48,11 @@
}
},
onLoad() {
getImToken().then(res => {
getImToken().then(res => {
im.syncFriends()
im.connect(res.token, res.userInfo)
im.connect(res.token, res.userInfo)
this.getConversationList()
})
},
onShow() {
@@ -61,7 +63,14 @@
this.isShown = false
},
onNavigationBarButtonTap(e) {
if (e.index == 0) {
if (e.index == 0) {}
if (e.index == 1) {
uni.navigateTo({
url: '/pages/im/friends/index',
fail: (err) => {
console.log(err);
}
})
}
},
watch: {
@@ -96,7 +105,7 @@
// 进入聊天的详情页面，清理未读消息数量
toDetail(item) {
uni.navigateTo({
url: '/pages/im/detail?targetId=' + item.targetId +
url: '/pages/im/private/index?targetId=' + item.targetId +
'&conversationType=' + item.conversationType
})
}
@@ -128,7 +137,8 @@
.name {
display: flex;
justify-content: space-between;
justify-content: space-between;
font-size: $uni-font-size-base;
.time {
font-size: $uni-font-size-sm;
@@ -137,7 +147,8 @@
}
.u-line-1 {
color: $u-info;
color: $u-info;
font-size: $uni-font-size-sm;
}
}
}

26
pages/im/detail.vue → pages/im/private/index.vue
View File

@@ -76,18 +76,18 @@
})
RongIMLib.clearMessagesUnreadStatus(this.conversationType, this.targetId, new Date().getTime())
im.setNotifyBadge()
im.setNotifyBadge()
RongIMLib.sendReadReceiptMessage(this.conversationType, this.targetId, new Date().getTime())
this.getMessageList()
// 监听消息回执
RongIMLib.addReadReceiptReceivedListener((result) => {
const res = result.data.message
if (res.targetId == this.targetId) {
this.getMessageList()
}
})
const res = result.data.message
if (res.targetId == this.targetId) {
this.getMessageList()
}
})
},
onUnload() {
RongIMLib.clearReadReceiptReceivedListener()
@@ -97,6 +97,14 @@
return this.inputTxt.length > 0
}
},
onNavigationBarButtonTap(e) {
if (e.index == 0) {
uni.navigateTo({
url: '/pages/im/private/setting?targetId=' + this.targetId +
'&conversationType=' + this.conversationType
})
}
},
watch: {
'$store.getters.newMessage': function(msg) {
if (msg.targetId == this.targetId) {
@@ -183,7 +191,7 @@
$footer-height: 55px;
.scroll {
height: calc(100vh - 55px);
height: calc(100vh - 55px);
width: 100vw;
padding: 0 $uni-spacing-col-lg;
}
@@ -245,7 +253,7 @@
.msg {
font-size: $uni-font-size-base;
margin: $uni-spacing-col-base;
padding: $uni-spacing-col-lg;
padding: $uni-spacing-col-base;
word-wrap: break-word;
width: 60%;
border-radius: $uni-border-radius-base;

68
pages/im/private/setting.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<div>
会话设置 {{ targetId}}
<div @click="setStatus">免打扰开关 {{status}}</div>
<div @click="setTop">置顶会话 {{isTop}}</div>
<u-button @click="toIndex">会首页</u-button>
</div>
</template>
<script>
import * as RongIMLib from '@rongcloud/imlib-uni'
export default {
data() {
return {
targetId: '',
conversationType: 1,
isTop: false,
status: 0 // 0 是免打扰，1是正常通知
}
},
onLoad(e) {
this.targetId = e.targetId
this.conversationType = e.conversationType
RongIMLib.getConversation(this.conversationType, this.targetId, ({
conversation
}) => {
this.isTop = conversation.isTop
})
RongIMLib.getConversationNotificationStatus(this.conversationType, this.targetId, ({
status
}) => {
this.status = status
})
},
methods: {
toIndex() {
uni.switchTab({
url: '/pages/im/index'
})
},
setStatus() {
RongIMLib.setConversationNotificationStatus(this.conversationType, this.targetId, this.status, ({
status
}) => {
this.status = status
})
},
setTop() {
RongIMLib.setConversationToTop(this.conversationType, this.targetId, !this.isTop, (res) => {
console.log(res);
RongIMLib.getConversation(this.conversationType, this.targetId, ({
conversation
}) => {
console.log(conversation.isTop);
this.isTop = conversation.isTop
})
})
}
}
}
</script>
<style>
</style>