IM测试，下一步页面调整
This commit is contained in:
49
pages.json
49
pages.json
@@ -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,21 +375,58 @@
|
||||
}
|
||||
},
|
||||
{
|
||||
"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",
|
||||
"name": "WalletAdd",
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,7 +1,20 @@
|
||||
<template>
|
||||
<div>
|
||||
好友资料，
|
||||
<u-button @click="toPrivate">发送消息</u-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toPrivate() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/im/private/index?targetId=10047&conversationType=1'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
我的资料，也就展示个二维码吧
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
11
pages/im/friends/pending.vue
Normal file
11
pages/im/friends/pending.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<div>
|
||||
好友搜索，好友申请列表 都会在这个页面
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
20
pages/im/group/index.vue
Normal file
20
pages/im/group/index.vue
Normal 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>
|
||||
@@ -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>
|
||||
@@ -51,6 +51,8 @@
|
||||
getImToken().then(res => {
|
||||
im.syncFriends()
|
||||
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
|
||||
})
|
||||
}
|
||||
@@ -129,6 +138,7 @@
|
||||
.name {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: $uni-font-size-base;
|
||||
|
||||
.time {
|
||||
font-size: $uni-font-size-sm;
|
||||
@@ -138,6 +148,7 @@
|
||||
|
||||
.u-line-1 {
|
||||
color: $u-info;
|
||||
font-size: $uni-font-size-sm;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
@@ -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
68
pages/im/private/setting.vue
Normal 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>
|
||||
Reference in New Issue
Block a user