...
 
Commits (20)
    https://gitcode.net/dcloud/uni-im/-/commit/1b8462d521bdf030c05778b1ef8f60fefb8f302e 修复 编译到 app 端报错的问题 2024-06-05T13:22:19+08:00 DCloud_JSON linju@dcloud.io https://gitcode.net/dcloud/uni-im/-/commit/4ccbc20746755f55b2f6a7601263f9a6019d7a44 3.0.5 2024-06-05T14:17:01+08:00 DCloud_JSON linju@dcloud.io https://gitcode.net/dcloud/uni-im/-/commit/eaf23db3a46c8b8053a8144ba3dc210682664c82 更新 push 推送结果不再返回给客户端 2024-06-17T17:28:45+08:00 DCloud_JSON linju@dcloud.io https://gitcode.net/dcloud/uni-im/-/commit/2a29fe9749cf28f66fc71d708332affcb13fcb18 更新 优化用户体验,把复制按钮和回复按钮换个位置,避免点回复误点成撤回 2024-06-17T17:28:45+08:00 DCloud_JSON linju@dcloud.io https://gitcode.net/dcloud/uni-im/-/commit/f5fc925f5c1c4fd5eafe1e5640d37fb274dea25f 优化 群公告的显示效果 2024-06-17T17:28:45+08:00 DCloud_JSON linju@dcloud.io https://gitcode.net/dcloud/uni-im/-/commit/beae4161ef74e82f73d6f8c8524114d3001c19b2 修复 当群公告被刷屏,导致后打开会话的用户看不到的问题 2024-06-17T17:28:45+08:00 DCloud_JSON linju@dcloud.io https://gitcode.net/dcloud/uni-im/-/commit/62d0da938db146de8dc0253e1d34cf0406cd42ee 修复 部分情况下富文本类型消息渲染出错的问题 2024-06-17T17:28:45+08:00 DCloud_JSON linju@dcloud.io https://gitcode.net/dcloud/uni-im/-/commit/75900adf634c0149e4e6ced3ff9ad2d8f2998207 优化 仅在会话列表点开“群”会话时显示 loading 2024-06-17T17:28:45+08:00 DCloud_JSON linju@dcloud.io https://gitcode.net/dcloud/uni-im/-/commit/255ae957b13c23456697726c648fb4af20addadd 修复 置顶会话存在未读公告,且此公告离当前会话最后一条消息在 30... 2024-06-17T17:28:45+08:00 DCloud_JSON linju@dcloud.io 修复 置顶会话存在未读公告,且此公告离当前会话最后一条消息在 30 条消息之前(这种公告会直接以弹窗展示),且此时快速切换到另一个会话(从插件市场点进来会自动切到指定会话)确会弹出置顶会话的公告内容,但点击后的关闭公告的逻辑不能同步到服务端的问题 https://gitcode.net/dcloud/uni-im/-/commit/acaaa53ae933cf27f16457d92bf25508ea971a1d 【重要更新】去掉所有nvue页面,消息输入框改用renderjs实现,消息列表改用翻转消息列表实现 2024-06-17T17:28:45+08:00 DCloud_JSON linju@dcloud.io https://gitcode.net/dcloud/uni-im/-/commit/a2811185a14c2d1f81b41ca0d5208bce218d6f52 修复 本地不存在的会话收到 1 条消息,角标会+2 的问题 2024-06-17T17:28:45+08:00 DCloud_JSON linju@dcloud.io https://gitcode.net/dcloud/uni-im/-/commit/d727d998182c8fb983c8d8a3cca8240eb02bf3a0 更新 修复草稿字样丢了的问题 2024-06-17T17:28:45+08:00 DCloud_JSON linju@dcloud.io https://gitcode.net/dcloud/uni-im/-/commit/21257be0af29e0dbe88b71d2f6146cc6c1c6da89 更新 优化样式 2024-06-17T17:28:45+08:00 DCloud_JSON linju@dcloud.io https://gitcode.net/dcloud/uni-im/-/commit/dbfac4fdb68023d4da2a58cac481887404760ac3 更新 新增群成员活跃时间(最后一场发消息时间)的字段 2024-06-17T17:28:45+08:00 DCloud_JSON linju@dcloud.io https://gitcode.net/dcloud/uni-im/-/commit/3eb19dc5aac211d9a96cd292c2f411f178360c21 更新 修复部分平台,会在较早的时机执行 onAppActivateStateChange内的逻辑,此时currentPage还未初始化完成,引起的报错问题 2024-06-17T20:20:16+08:00 DCloud_JSON linju@dcloud.io https://gitcode.net/dcloud/uni-im/-/commit/0ef754024d3b017b573cb17f293c94d81e2f066f 修复 部分情况下,插入的表情包的位置不正确的问题 2024-06-17T20:20:16+08:00 DCloud_JSON linju@dcloud.io https://gitcode.net/dcloud/uni-im/-/commit/c7240327250f8ea7ee7a49ad52e9b12e1951d0f6 更新 小程序端消息输入框,暂不支持富文本输入(包括:@用户、图片表情包等,@用户后续会支持) 2024-06-17T20:20:16+08:00 DCloud_JSON linju@dcloud.io https://gitcode.net/dcloud/uni-im/-/commit/b559574bc87fb11bfbef4c6d2fd170b63cda6485 更新 修复部分平台拖拽消息输入框高度的线层级不够的问题 2024-06-17T20:51:57+08:00 DCloud_JSON linju@dcloud.io https://gitcode.net/dcloud/uni-im/-/commit/36cf743363f8ba9f3bf8852588b0e4f34c84f222 更新 flex.scss 2024-06-17T20:51:57+08:00 DCloud_JSON linju@dcloud.io https://gitcode.net/dcloud/uni-im/-/commit/e8de928bf437bc4a2c789b06f8a0bd6b2d8b44df 3.1.0 2024-06-17T20:54:13+08:00 DCloud_JSON linju@dcloud.io
## 3.1.0(2024-06-17)
- 【重要】去掉所有nvue页面,消息输入框改用renderjs实现,消息列表改用翻转消息列表实现
- 更新 新增群成员活跃时间(最后一场发消息时间)的字段,后续将利用此字段时间优化群消息送达顺序,群会话打开速度等
- 修复 本地不存在的会话收到 1 条消息,角标会+2 的问题
## 3.0.5(2024-06-05)
修复 编译到App端报`Cannot assign to "fileType" because it is a constant`的问题
## 3.0.4(2024-05-09)
- 优化 对于含有图片的消息数据,新增了图片的宽高值,使图片加载前可以固定容器高度,从而避免列表抖动
- 优化 多个会话切换的草稿功能,提升性能消息输入的性能
......
export default `😀,😁,😂,🤣,😃,😄,😅,😆,😉,😊,😋,😎,😍,😘,😗,😙,😚,☺️,🙂,🤗,🤩,🤔,🤨,😐,😑,😶,🙄,😏,😣,😥,😮,🤐,😯,😪,😫,😴,😌,😛,😜,😝,🤤,😒,😓,😔,😕,🙃,🤑,😲,☹️,🙁,😖,😞,😟,😤,😢,😭,😦,😧,😨,😩,🤯,😬,😰,😱,😳,🤪,😵,😡,😠,🤬,😷,🤒,🤕,🤢,🤮,🤧,😇,🤠,🤡,🤥,🤫,🤭,🧐,🤓,😈,👿,👹,👺,💀,☠️,👻,👽,🤖,😺,😸,😹,😻,😼,😽,🙀,😿,😾,🙈,🙉,🙊,👶,🧒,👦,👧,🧑,👨,👩,🧓,👴,👵,👨‍⚕️,👩‍⚕️,👨‍🎓,👩‍🎓,👨‍🏫,👩‍🏫,👨‍⚖️,👩‍⚖️,👨‍🌾,👩‍🌾,👨‍🍳,👩‍🍳,👨‍🔧,👩‍🔧,👨‍🏭,👩‍🏭,👨‍💼,👩‍💼,👨‍🔬,👩‍🔬,👨‍💻,👩‍💻,👨‍🎤,👩‍🎤,👨‍🎨,👩‍🎨,👨‍✈️,👩‍✈️,👨‍🚀,👩‍🚀,👨‍🚒,👩‍🚒,👮,👮‍♂️,👮‍♀️,🕵️,🕵️‍♂️,🕵️‍♀️,💂,💂‍♂️,💂‍♀️,👷,👷‍♂️,👷‍♀️,🤴,👸,👳,👳‍♂️,👳‍♀️,👲,🧕,🧔,👱,👱‍♂️,👱‍♀️,🤵,👰,🤰,🤱,👼,🎅,🤶,🧙,🧙‍♀️,🧙‍♂️,🧚,🧚‍♀️,🧚‍♂️,🧛,🧛‍♀️,🧛‍♂️,🧜,🧜‍♀️,🧜‍♂️,🧝,🧝‍♀️,🧝‍♂️,🧞,🧞‍♀️,🧟,🧟‍♀️,🙍,🙍‍♂️,🙍‍♀️,🙎,🙎‍♂️,🙎‍♀️,🙅,🙅‍♂️,🙅‍♀️,🙆,🙆‍♂️,🙆‍♀️,💁,💁‍♂️,💁‍♀️,🙋,🙋‍♂️,🙋‍♀️,🙇,🙇‍♂️,🙇‍♀️,🤦,🤦‍♂️,🤦‍♀️,🤷,🤷‍♂️,🤷‍♀️,💆,💆‍♂️,💆‍♀️,💇,💇‍♂️,💇‍♀️,🚶,🚶‍♂️,🚶‍♀️,🏃,🏃‍♂️,🏃‍♀️,💃,🕺,👯,👯‍♂️,👯‍♀️,🧖,🧖‍♀️,🧖‍♂️,🧗,🧗‍♀️,🧗‍♂️,🧘,🧘‍♀️,🧘‍♂️,🕴️,👤,👥,👫,👬,👭,💏,👨‍❤️‍💋‍👨,👩‍❤️‍💋‍👩,💑,👨‍❤️‍👨,👩‍❤️‍👩,👪,👨‍👩‍👧,👨‍👩‍👧‍👦,👨‍👩‍👦‍👦,👨‍👩‍👧‍👧,👨‍👨‍👦,👨‍👨‍👧,👨‍👨‍👧‍👦,👨‍👨‍👦‍👦,👨‍👨‍👧‍👧,👩‍👩‍👦,👩‍👩‍👧,👩‍👩‍👧‍👦,👩‍👩‍👦‍👦,👩‍👩‍👧‍👧,👨‍👦,👨‍👧,👨‍👧‍👦,👨‍👧‍👧,👩‍👦‍👦,👩‍👧,👩‍👧‍👦,🤳,👃,👅,👄,💋,💘,❤️,💓,💔,💕,💖,💗,💙,💚,💛,🧡,💜,🖤,💝,💞,❣️,💌,💬,🌬️,☃️,⛄,🎎,🗿,👾,💩,🛀,🛌,💅,👂,👣,👀,👁️,🧠,💭,👓,👔,👕,👖,🧣,🧤,🧥,🧦,👗,👘,👙,👚,👛,👜,👝,🎒,👞,👟,👠,👡,👢,👑,👒,🎩,🎓,🧢,📿,💄,💍,💎,🥄,🔪,🏺,🗺️,🗾,🎠,🎡,🎢,💈,🎪,🛰️,🚀,🛸,🛎️,⌛,⏳,⌚,⏰,🕰️,🌡️,🌂,☂️,☔,⛱️,⚡,🎃,🎄,🎆,🎇,🎈,🎉,🎊,🎏,🎐,🎑,🎀,🎁,🎗️,🎟️,🎫,🔮,🎮,🕹️,🎰,🃏,🎴,🎭,🖼️,🎨,🔇,🔈,🔉,🔊,📢,📣,📯,🔔,🔕,🎼,🎵,🎶,🎙️,🎚️,🎛️,🎤,🎧,📻,🎷,🎸,🎹,🎺,🎻,🥁,📱,📲,☎️,📞,📟,📠,🔋,🔌,💻,🖥️,🖨️,⌨️,🖱️,🖲️,💽,💾,💿,📀,🎥,🎞️,📽️,🎬,📺,📷,📸,📹,📼,🔍,🔎,💡,🔦,🏮,📔,📕,📖,📗,📘,📙,📚,📓,📒,📃,📜,📄,📰,📑,🔖,💰,💴,💵,💶,💷,💸,💳,✉️,📧,📨,📩,📤,📥,📦,📫,📪,📬,📭,📮,✏️,✒️,📝,💼,📁,📂,📅,📆,📇,📈,📉,📊,📋,📌,📍,📎,📏,📐,✂️,🔒,🔓,🔏,🔐,🔑,🔨,🔫,🔧,🔩,🔬,🔭,📡,💉,💊,🚪,🚽,🚿,🛁,🛒,🚬,🔅,🔆,⚜️,🔱,📛,🚂,🚃,🚄,🚅,🚆,🚇,🚈,🚉,🚊,🚝,🚞,🚋,🚌,🚍,🚎,🚐,🚑,🚒,🚓,🚔,🚕,🚖,🚗,🚘,🚙,🚚,🚛,🚜,🚲,🛴,🛵,🚏,🛣️,🛤️,🛢️,⛽,🚨,🚥,🚦,🛑,🚧,⛵,🛶,🚤,🛳️,⛴️,🛥️,🚢,✈️,🛩️,🛫,🛬,💺,🚁,🚟,🚠,🚡,⚠️,⛔,🦗,🍇,🍈,🍉,🍊,🍋,🍌,🍍,🍎,🍏,🍐,🍑,🍒,🍓,🥝,🍅,🥥,🥑,🍆,🥔,🥕,🌽,🌶️,🥒,🥦,🥜,🍞,🥐,🥖,🥨,🥞,🧀,🍖,🍗,🥩,🥓,🍔,🍟,🍕,🌭,🥪,🌮,🌯,🥙,🥚,🍳,🥘,🍲,🥣,🥗,🍿,🥫,🍱,🍘,🍙,🍚,🍛,🍜,🍝,🍠,🍢,🍣,🍤,🍥,🍡,🥟,🥠,🥡,🍦,🍧,🍨,🍩,🍪,🎂,🍰,🥧,🍫,🍬,🍭,🍮,🍯,🍼,🥛,☕,🍵,🍶,🍾,🍷,🍸,🍹,🍺,🍻,🥂,🥃,🥤,🥢,🍽️,🍴`.split(',')
......@@ -87,22 +87,12 @@
setTimeout(() => {
// 根据实际渲染出的组件大小修正定位
// #ifdef APP-NVUE
const dom = weex.requireModule("dom");
const result = dom.getComponentRect(this.$refs.contextmenu, option => {
const {top, left, width, height} = option.size
this.style = calcPosition(top, left, width, height)
});
// #endif
// #ifndef APP-NVUE
const query = uni.createSelectorQuery().in(this)
query.select('.contextmenu').boundingClientRect(option => {
const { width, height } = option
this.style = calcPosition(top, left, width, height)
this.style.opacity = 1
}).exec()
// #endif
}, 0)
},
closeMe(){
......@@ -126,7 +116,7 @@
.contextmenu{
position: fixed;
background-color: #fff;
z-index: 99999;
z-index: 99;
border-radius: 10px;
box-shadow: 0 0 10px #888;
background-color:#FFF;
......@@ -143,15 +133,11 @@
margin: 5px;
opacity: 0.9;
text-align: left;
height: 40px;
align-content: center;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
/* #ifdef APP-NVUE */
width: 120px;
height: 40px;
/* #endif */
}
.item:hover{
......@@ -163,21 +149,9 @@
position: fixed;
top: 0;
left: 0;
width: 750rpx;
flex: 1;
height: 9000px;
/* #ifndef APP-NVUE */
width: 100vw;
height: 100vh;
z-index: 9999;
/* #endif */
/* #ifdef H5 */
// 解决:通过*选择器设置了最大宽高 引起的大小撑不开的问题
max-height:100vh;
max-width:100vw;
/* #endif */
z-index:10;
background-color: rgba(0,0,0,0.5);
}
</style>
<template>
<view>
<!-- #ifdef H5 -->
<scroll-view
<view class="root">
<scroll-view
ref="conversation-list"
class="conversation-list"
:class="{canCheck}"
:style="{'background-color': conversationList.length?'#FFF':''}"
:scroll-top="listScrollTop"
scroll-y="true"
@scrolltolower="loadMore()"
@scroll="onScroll"
>
<!-- #endif -->
<!-- #ifndef H5 -->
<uni-list
ref="conversation-list"
class="conversation-list"
:style="{'height':wHeight,'width':'750rpx'}"
:border="false"
<uni-im-conversation v-for="(item,index) in conversationList" :key="item.id"
class="conversation-list-item" :class="{'activeConversation':activeConversationId == item.id,'focus':item.focus}"
:conversation="item" :id="item.id"
@click="clickItem(item)" @contextmenu.prevent="openConversationMenu($event,index)"
@longpress="openConversationMenu($event,index)"
>
<!-- #endif -->
<!-- 注意:nvue下 list 内必须是 cell,所以元素都需要在uni-list-chat内 -->
<uni-im-conversation v-for="(item,index) in conversationList" :key="item.id" :id="item.id"
:conversation="item"
class="conversation-list-item" :class="{'activeConversation':activeConversationId == item.id,'focus':item.focus}"
@click="clickItem(item)"
@contextmenu.prevent.native="openConversationMenu($event,index)"
>
<template v-if="canCheck" #left>
<view style="justify-content: center;">
<view class="check-box" :class="{checked:isCheck(item)}">
<uni-icons
v-if="isCheck(item)"
color="#FFF"
type="checkmarkempty"
/>
</view>
<template v-if="canCheck" #left>
<view style="justify-content: center;">
<view class="check-box" :class="{checked:isCheck(item)}">
<uni-icons
v-if="isCheck(item)"
color="#FFF"
type="checkmarkempty"
/>
</view>
</template>
</uni-im-conversation>
</view>
</template>
</uni-im-conversation>
<!-- #ifdef APP-NVUE -->
<!-- nvue端appear(元素一旦显示在可视窗口中)就触发加载更多。-->
<cell v-if="conversationList.length" @appear="loadMore()" />
<!-- #endif -->
<uni-list-item :custom-style="{backgroundColor:'#f5f5f5',padding:0}" style="margin-top: 5px;" :border="false">
<template #body>
<template v-if="!keyword">
<uni-im-load-state
class="tip"
:content-text="loadMoreContentText"
:status="conversationHasMore?'loading':'noMore'"
/>
</template>
<template v-else>
<text v-if="conversationList.length === 0" style="text-align: center;flex: 1;margin: 8px;color: #aaa;">
没有相关数据
</text>
</template>
</template>
</uni-list-item>
<view style="margin-top: 5px;backgroundColor:'#f5f5f5'">
<template v-if="!keyword">
<uni-im-load-state
:content-text="loadMoreContentText"
:status="conversationHasMore?'loading':'noMore'"
/>
</template>
<text v-else-if="conversationList.length === 0"
style="text-align: center;flex: 1;margin: 8px;color: #aaa;"
>没有相关数据</text>
</view>
<!-- #ifndef H5 -->
</uni-list>
<!-- #endif -->
<!-- #ifdef H5 -->
</scroll-view>
<!-- #endif -->
<!-- #ifdef H5 -->
<uni-im-contextmenu ref="uni-im-contextmenu" />
<!-- #endif -->
</view>
</template>
......@@ -80,6 +52,7 @@ import uniIm from '@/uni_modules/uni-im/sdk/index.js';
const db = uniCloud.database();
let currentScrollTop = 0;
export default {
emits: ['change', 'clickItem', 'onScroll'],
props: {
keyword: {
type: String,
......@@ -107,11 +80,6 @@ export default {
conversationHasMore() {
return uniIm.conversation.hasMore
},
// #ifdef APP-NVUE
wHeight() {
return uni.getSystemInfoSync().windowHeight + 'px'
},
// #endif
loadMoreContentText() {
return {
contentrefresh: "正在加载...",
......@@ -190,13 +158,16 @@ export default {
this.$emit('clickItem', item)
},
openConversationMenu(e, index) {
// #ifdef H5
let conversation = this.conversationList[index]
conversation.focus = true
const myContextmenu = this.$refs['uni-im-contextmenu']
const clientY = e.clientY || e.changedTouches[0].clientY
const clientX = e.clientX || e.changedTouches[0].clientX
const position = {
"top": e.clientY + 35,
"left": e.clientX
"top": clientY + 35,
"left": clientX
}
let menuList = [{
"title": "置顶",
......@@ -247,7 +218,6 @@ export default {
myContextmenu.onClose(() => {
conversation.focus = false
})
// #endif
},
async loadMore() {
let data = await uniIm.conversation.loadMore()
......@@ -260,35 +230,32 @@ export default {
<style lang="scss" scoped>
.conversation-list,
.root {
height: 100%;
flex: 1;
}
.tip {
flex: 1;
}
.canCheck ::v-deep {
.note-box,
.time,
.state {
display: none;
}
.title {
font-size: 16px !important;
}
}
.conversation-list .conversation-list-item.focus {
border: 2px solid #1ab94e;
}
.conversation-list .conversation-list-item {
/* #ifdef H5 */
cursor: pointer;
/* #endif */
border: 2px solid transparent;
border-radius: 5px;
margin: 0 5px;
}
/* #ifdef H5 */
.conversation-list .conversation-list-item ::v-deep .uni-list-chat__content-title {
font-size: 14px;
}
.conversation-list ::v-deep .conversation-list-item .uni-list--border {
display: none;
}
.conversation-list ::v-deep .conversation-list-item .uni-list-chat__container {
padding: 8px 8px 8px 6px;
}
/* #endif */
.conversation-list .conversation-list-item.activeConversation {
background-color: #f1f1f1;
......
<template>
<uni-list-chat
:id="conversation.id"
:note="canCheck?'':conversation.note"
:show-badge="!canCheck && conversation.unread_count>0"
:badge-text="!canCheck ? conversation.unread_count : ''"
:title="conversation.title"
:avatar="avatarUrl"
:time="canCheck?'':friendlyTime(conversation.time)"
:is-pinned="conversation.pinned"
:is-mute="canCheck?false:conversation.mute"
:red-note="redNote"
:tags="conversation.tag"
<template>
<uni-im-info-card
:id="conversation.id"
@click="handleClick"
:title="conversation.title"
:note="conversation.note"
:red-note="conversation.hasDraft?'[草稿]&nbsp;':''"
:tags="conversation.tags"
:avatarUrl="avatarUrl"
:time="friendlyTime"
:badge="conversation.unread_count"
:mute="conversation.mute"
:pinned="conversation.pinned"
link
>
<template v-slot:left>
<slot name="left"></slot>
</template>
<template v-slot:over-avatar>
<template v-for="overlay in avatarOverlayList" :key="overlay.component.name">
<component
:is="overlay.component"
v-bind="overlay.props"
cementing="ConversationAvatarOverlay"
/>
</template>
</template>
</uni-list-chat>
>
<template #left>
<slot name="left"></slot>
</template>
<template #avatar-overlay-list>
<template v-for="overlay in avatarOverlayList" :key="overlay.component.name">
<component :is="overlay.component" v-bind="overlay.props" cementing="ConversationAvatarOverlay" />
</template>
</template>
</uni-im-info-card>
</template>
<script>
......@@ -40,26 +35,24 @@
conversation: {
type: Object,
default: () => {}
},
canCheck: {
type: Boolean,
default: false
}
},
emits: ['click'],
computed: {
redNote() {
if (this.canCheck) {
return ''
} else if (this.conversation.call_list.length > 0) {
return '[有人@我]'
} else if (this.conversation.hasDraft) {
return '[草稿]'
} else if (this.conversation.group_id && this.conversation.group_info.mute_all_members) {
return '[已禁言]'
friendlyTime() {
// 使得时间会随着心跳动态更新
let timestamp = this.conversation.time + uniIm.heartbeat * 0
let friendlyTime = uniIm.utils.toFriendlyTime(timestamp)
// console.log('friendlyTime',friendlyTime);
let friendlyTimeArr = friendlyTime.split(' ')
let friendlyTimeArrL = friendlyTimeArr.length
// 如果含 年/月(不在3天内,且不是同一周),去掉时间
if (friendlyTimeArrL == 3 && friendlyTime.includes('/')) {
friendlyTime = friendlyTimeArr[0]
}
return friendlyTime
}
},
emits: ['click'],
data() {
// 调用扩展点,扩展程序可以为该会话增加覆盖的图标元素。
let avatarOverlayList = uniIm.extensions
......@@ -90,23 +83,8 @@
methods: {
handleClick() {
this.$emit('click', this.conversation)
},
friendlyTime(timestamp) {
// 使得时间会随着心跳动态更新
timestamp = timestamp + uniIm.heartbeat * 0
let friendlyTime = uniIm.utils.toFriendlyTime(timestamp)
// console.log('friendlyTime',friendlyTime);
let friendlyTimeArr = friendlyTime.split(' ')
let friendlyTimeArrL = friendlyTimeArr.length
// 如果含 年/月(不在3天内,且不是同一周),去掉时间
if (friendlyTimeArrL == 3 && friendlyTime.includes('/')) {
friendlyTime = friendlyTimeArr[0]
}
return friendlyTime
}
}
};
</script>
<style lang="scss">
</style>
\ No newline at end of file
<template>
<view class="uni-im-editor-box">
<!-- #ifdef MP -->
<textarea class="uni-im-editor-mp" v-model="textareaValue" @input="oninput" auto-height :maxlength="maxlength"
:show-confirm-bar="false" :adjust-position="false" @blur="lastCursor = $event.detail.cursor"
></textarea>
<!-- #endif -->
<!-- #ifndef MP -->
<div class="uni-im-editor" contenteditable="true" ></div>
<!-- 与rmd通讯专用 -->
<view :change:prop="rdm.$callMethod" :prop="callRmdParam"></view>
<!-- #endif -->
</view>
</template>
<script>
import uniIm from '@/uni_modules/uni-im/sdk/index.js';
export default {
emits: ["input", "confirm"],
data() {
return {
callRmdParam: [],
// #ifdef MP
"textareaValue":this.modelValue,
lastCursor:this.modelValue.length
// #endif
}
},
props: {
modelValue: {
type: [String, Object],
default: ""
},
placeholder: {
type: String,
default: ""
},
maxlength: {
type: Number,
default: 140
}
},
mounted() {
// 与rmd通讯专用
this.callRmd = async (funcName, ...params) => {
// #ifdef MP
switch (funcName){
case '$setContent':
this.textareaValue = params[0]
break;
case '$addHtmlToCursor':
// 在第lastCursor位置添加内容
setTimeout(()=>{
this.textareaValue = this.textareaValue.slice(0,this.lastCursor) + params[0] + this.textareaValue.slice(this.lastCursor)
},300)
break;
default:
console.error('小程序暂不支持与rmd通讯',funcName,params)
break;
}
return
// #endif
this.callRmdParam = []
this.$nextTick(() => {
return new Promise((resolve, reject) => {
this.callRmdParam = [funcName, ...params,param=>{
resolve(param)
}]
})
})
}
// #ifndef H5
uni.onKeyboardHeightChange((res) => {
if(res.height === 0){
// console.error('@##键盘被收起,可以失去焦点')
// this.callRmd('$blur')
}
});
// #endif
// #ifdef H5
const uniImEditor = document.querySelector('.uni-im-editor')
uniIm.utils.appEvent.onAppActivate(() => {
// 主窗口激活时设置输入焦点到这里的文本编辑框
uniImEditor.focus()
})
let shiftIsDown = false;
window.addEventListener('keydown', (e) => {
if (e.key == 'Shift') {
shiftIsDown = true
}
})
window.addEventListener('keyup', (e) => {
if (e.key == 'Shift') {
shiftIsDown = false
}
})
let isComposing = false;
// 输入法开始输入
uniImEditor.addEventListener('compositionstart', () => {
isComposing = true
uniImEditor.isComposing = isComposing;
});
// 输入法结束输入
uniImEditor.addEventListener('compositionend', () => {
isComposing = false
uniImEditor.isComposing = isComposing;
});
uniImEditor.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
if (isComposing) {
console.log('输入法正在输入中,此时回车不发送消息')
event.preventDefault();
} else {
if (shiftIsDown) {
console.log('shift键处于按下状态,为换行不是confirm发送')
} else {
this.$emit('confirm');
// 防止,回车执行发送的同时执行换行
event.preventDefault();
}
}
}
});
uniImEditor.addEventListener('paste', async event => {
// console.log('粘贴', event);
if (event.clipboardData || event.originalEvent) {
//某些chrome版本使用的是event.originalEvent
let clipboardData = event.clipboardData || event.originalEvent.clipboardData;
// 获取粘贴的图片
let items = clipboardData.items;
for (const item of items) {
if (item.type.indexOf("image") !== -1) {
event.preventDefault();
const file = item.getAsFile();
const blobUrl = URL.createObjectURL(file)
console.log('blobUrl',blobUrl)
this.$addHtmlToCursor(`<img src="${blobUrl}" />`)
}
}
let htmlString = clipboardData.getData('text/html');
// console.log('htmlString111',htmlString);
if (htmlString) {
event.preventDefault();
htmlString = await filterHTML(htmlString);
// console.log('htmlString222', htmlString);
const tmpDom = document.createElement('div');
tmpDom.innerHTML = htmlString;
if (tmpDom.innerText.length > 50000) {
uni.showModal({
content: '你粘贴的文本长度超过50000,将被截断。',
complete: e => {
if (e.confirm) {
this.$addHtmlToCursor(htmlString.substring(0, 50000))
}
}
});
} else {
this.$addHtmlToCursor(htmlString)
}
// 检查图片加载失败,删除图片
const imgs = uniImEditor.querySelectorAll('img');
for (const img of imgs) {
img.onerror = () => {
img.remove();
}
}
} else {
let text = clipboardData.getData('text');
try {
let obj = JSON.parse(text)
this.$addHtmlToCursor(this.$arrDomJsonToHtml(obj['uni-im-rich-text-data']))
} catch (e) {
this.$addHtmlToCursor(text)
}
event.preventDefault();
}
}
})
async function filterHTML(htmlString) {
// 过滤html字符串,只保留:文字,图片,链接
// html字符串转dom对象,并深度遍历
let div = document.createElement('div');
div.innerHTML = htmlString;
let arr = [];
async function deep(node) {
if (node.nodeType === 1) {
if (node.tagName === 'IMG') {
// 只保留src属性
// 处理图片跨域问题
if (node.src.indexOf('blob:http') != 0 && !node.src.includes(
'https://im-res.dcloud.net.cn')) {
const uniImCo = uniCloud.importObject("uni-im-co", {
loadingOptions: { // loading相关配置
title: '处理跨域图片...',
mask: true
}
})
let res = await uniImCo.getImgBase64(node.src)
function base64ToBlob(base64) {
// 将Base64字符串分割为数据和应用信息
const byteChars = atob(base64.split(',')[1]);
// 创建一个长度为byteChars长度的数组
const byteArrays = new Array(byteChars.length);
// 将二进制字符串转换为Uint8Array
for (let i = 0; i < byteChars.length; i++) {
byteArrays[i] = byteChars.charCodeAt(i);
}
// 返回一个Blob对象
return new Blob([new Uint8Array(byteArrays)], {type: 'image/png'});
}
node.src = URL.createObjectURL( base64ToBlob(res.data) )
}
arr.push(`<img src="${node.src}" />`);
} else if (node.tagName === 'A') {
// 只保留href属性
arr.push(`<a href="${node.href}">${node.innerText}</a>`);
}
if (node.childNodes.length > 0) {
for (let i = 0; i < node.childNodes.length; i++) {
await deep(node.childNodes[i]);
}
}
} else if (node.nodeType === 3) {
arr.push(node.nodeValue);
}
}
await deep(div);
return arr.join('');
}
// #endif
},
methods: {
oninput(e) {
// #ifdef MP
let oldValue = this.oninput.oldValue || '';
// 当前输入框的值
const value = e.detail.value
// 本次输入的数据
const data = value.replace(oldValue, '')
this.oninput.oldValue = value
e = {
data,
value
}
// #endif
// console.error('input',e)
this.$emit('input', e)
}
}
}
</script>
<!-- #ifndef MP -->
<script module="rdm" lang="renderjs">
let uniImEditor,lastFocusNode,lastCursor;
// #ifdef APP
function setSoftinputTemporary() {
console.log('setSoftinputTemporary')
// 设置当前窗口键盘弹出后不做变化
const currentWebview = plus.webview.currentWebview();
currentWebview.setSoftinputTemporary({
mode:'nothing',
position:{top: 0,height: 0}
});
}
// #endif
export default {
name: 'uni-im-editor',
data() {
return {}
},
mounted() {
uniImEditor = document.querySelector('.uni-im-editor')
uniImEditor.addEventListener('input', e => {
setTimeout(()=>this.$oninput(e.data),0);
});
uniImEditor.addEventListener('click', e => {
// console.log('click', e);
// #ifdef APP
setSoftinputTemporary()
// #endif
});
uniImEditor.addEventListener('blur', e => {
// console.error('###blur', e);
setTimeout(this.$refreshLastCursor, 0);
});
// 键盘敲左右
uniImEditor.addEventListener('keydown', e => {
setTimeout(this.$refreshLastCursor, 0);
});
// 监听nickname后面的空格被删除(提醒此空格在margin-right: -3px;内,用于解决办法浏览器非文本节点后的光标定位不正确的问题)
const observer = new MutationObserver(function(mutations) {
mutations.forEach(mutation=> {
// 判断是否为删除节点的操作
const [removedNode] = mutation.removedNodes
if(removedNode){
if(removedNode && mutation?.previousSibling?.className === "nickname"){
mutation.previousSibling.remove()
}
}
});
})
.observe(uniImEditor, {
childList: true, // 监听子节点的变化
});
},
watch: {
modelValue(modelValue, oldModelValue) {
this.$nextTick(() => {
// console.log('modelValue', modelValue);
if (modelValue.length === 0) {
uniImEditor.innerHTML = ''
} else if (typeof modelValue === 'string' && modelValue != this.$inputText()) {
uniImEditor.innerHTML = modelValue
} else if (typeof modelValue === 'object' && modelValue.html != uniImEditor.innerHTML) {
uniImEditor.innerHTML = modelValue.html
}
});
},
},
methods: {
// 刷新光标信息
$refreshLastCursor() {
lastCursor = this.$getCursor();
lastFocusNode = window.getSelection().focusNode;
// console.log('刷新光标信息',{
// lastCursor,
// lastFocusNode
// });
},
$oninput(data){
this.$refreshLastCursor()
// 耗时计算
let start = new Date().getTime();
let param = '';
let val = uniImEditor.innerHTML;
const hasImg = uniImEditor.querySelector('img');
const hasNickname = uniImEditor.querySelector('.nickname');
const hasA = uniImEditor.querySelector('a');
if (hasImg || hasNickname || hasA) {
param = {
// "rich-text": //uniIm.utils.parseHtml( 执行比较消耗内存,改为chat页面 confirm时执行,
"html": val,
"text": uniImEditor.innerText,
"aboutUserIds": Array.from(uniImEditor.querySelectorAll('.nickname')).map(i=>i.getAttribute('uid'))
}
} else {
param = this.$inputText()
}
// 打印耗时
const spendTime = new Date().getTime() - start
if(spendTime > 10){
console.log('耗时', );
}
this.$ownerInstance.callMethod('oninput',{
data,// 本次输入的数据
value: param // 当前输入框的值
})
},
$callMethod([funcName, ...params]) {
// console.log('$callMethod funcName', funcName)
// console.log('$callMethod funcName', funcName === null)
// console.log('$callMethod params', params)
// console.log('$callMethod typeof funcName', typeof funcName)
try {
if(typeof funcName == 'string'){
const res = this[funcName](...params)
// console.log('res', res)
}
} catch (e) {
console.error("调用renderjs模块的方法失败", e,funcName,params)
}
},
$getCursor() {
const selection = window.getSelection();
return selection.focusOffset;
},
// 恢复光标位置
$restoreCursor(focus = true) {
this.$focus();
// 获取焦点时所在的子元素
try{
const range = document.createRange();
const sel = window.getSelection();
range.setStart(lastFocusNode || uniImEditor, lastCursor);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}catch(e){
console.error('恢复光标位置失败',e)
//TODO handle the exception
}
},
$deleteLeftChar(n = 1) {
this.$restoreCursor(true);
const selection = window.getSelection();
if (!selection.isCollapsed){
console.error('不要删除已选中的内容')
return;
}
const range = selection.getRangeAt(0).cloneRange();
if (range.startOffset > 0) {
range.setStart(range.startContainer, range.startOffset - n);
range.deleteContents();
selection.removeAllRanges();
selection.addRange(range);
} else if (range.startContainer.previousSibling) {
const container = range.startContainer;
const sibling = container.previousSibling;
range.setStart(sibling, sibling.length - n);
range.setEnd(sibling, sibling.length);
range.deleteContents();
selection.removeAllRanges();
selection.addRange(range);
}
lastCursor = this.$getCursor();
this.$oninput();
},
$addHtmlToCursor(html,focus = true) {
this.$restoreCursor(focus);
const selection = window.getSelection();
if (selection.getRangeAt && selection.rangeCount) {
let range = selection.getRangeAt(0);
range.deleteContents();
var ele = document.createElement("div");
ele.innerHTML = html;
var frag = document.createDocumentFragment(),
node, lastNode;
while ((node = ele.firstChild)) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
// 设置光标到插入内容之后的位置
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
selection.removeAllRanges(); // 清除现有的选择区域
selection.addRange(range); // 将更新后的范围添加回选择区域
}
}else{
uniImEditor.innerHTML += html;
}
this.$oninput(html);
},
$inputText() {
return uniImEditor.innerHTML.replace(/<br\s*\/?>/gi, "\n").replace(/<[^>]+>/g, "");
},
$focus() {
if(document.activeElement.className === 'uni-im-editor'){
document.activeElement.blur();
}
// #ifdef APP
setSoftinputTemporary()
// #endif
// console.error('获取焦点',document.activeElement.className);
uniImEditor.focus();
// console.error('获取焦点',document.activeElement.className);
},
$blur(){
// console.error('失去焦点1',document.activeElement.className);
uniImEditor.blur();
// console.error('失去焦点2',document.activeElement.className);
setTimeout(()=>{
// console.error('失去焦点3',document.activeElement.className);
},1000)
},
$onBlur() {
// this.$emit('update:focus', false);
// console.log('blur');
this.$emit('blur');
},
$onFocus() {
// console.log('$onFocus');
this.$emit('focus');
// this.$emit('update:focus', true);
},
$setContent(data) {
if (typeof data === 'string') {
uniImEditor.innerHTML = data
this.$oninput(data);
} else {
uniImEditor.innerHTML = this.$arrDomJsonToHtml(data);
this.$oninput(uniImEditor.innerHTML);
}
},
$arrDomJsonToHtml(arr) {
function parseItem(item) {
if (item.type === "text") {
return item.text;
}
let html = `<${item.name}`;
if (item.attrs) {
for (const key in item.attrs) {
html += ` ${key}="${item.attrs[key]}"`;
}
}
if (item.children) {
html += ">";
for (const child of item.children) {
html += parseItem(child);
}
html += `</${item.name}>`;
} else {
html += " />";
}
return html;
}
let result = "";
for (const item of arr) {
result += parseItem(item);
}
return result;
}
}
}
</script>
<!-- #endif -->
<style lang="scss" scoped>
/* #ifdef MP */
.uni-im-editor-mp {
width: 100%;
height: auto;
}
/* #endif */
.uni-im-editor {
min-height: 26px;
max-height: 110px;
overflow: auto;
// 解决ios下不能编辑的问题
-webkit-user-modify: read-write-plaintext-only;
/* #ifdef APP */
&,* {
-webkit-user-select:text;
}
/* #endif */
&:focus {
outline: none;
}
& ::v-deep {
img {
max-width: 90%;
display: block;
}
.nickname {
color: #0b65ff !important;
user-select: text;
margin-right: -3px;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
}
}
</style>
\ No newline at end of file
......@@ -8,7 +8,7 @@
<template v-if="matchedFriends.data?.length">
<view class="category-name">联系人</view>
<uni-list-chat
<uni-im-info-card
class="conversation-list-item"
v-for="item in matchedFriends.data"
:key="item.id"
......@@ -29,7 +29,7 @@
<template v-if="matchedGroups.data?.length">
<view class="category-name">群聊</view>
<uni-list-chat
<uni-im-info-card
class="conversation-list-item"
v-for="item in matchedGroups.data"
:key="item.id"
......@@ -51,7 +51,7 @@
<template v-if="matchedConversations.data?.length">
<view class="category-name">聊天记录</view>
<uni-list-chat
<uni-im-info-card
class="conversation-list-item"
v-for="item in matchedConversations.data"
:key="item.id"
......@@ -242,7 +242,9 @@
.tip {
flex: 1;
}
.conversation-list .conversation-list-item {
background-color: #fff;
}
.conversation-list .conversation-list-item.focus {
border: 2px solid #1ab94e;
}
......@@ -257,9 +259,6 @@
/* #endif */
}
/* #ifdef H5 */
.conversation-list .conversation-list-item ::v-deep .uni-list-chat__content-title {
font-size: 14px;
}
.conversation-list ::v-deep .conversation-list-item .uni-list--border {
display: none;
}
......
......@@ -5,7 +5,7 @@
<uni-icons size="26" type="sound-filled" color="#0cc8fa"></uni-icons>
<text class="title">群公告</text>
</view>
<text :selectable="true" :user-select="true" space="nbsp" :decode="true" class="content">{{notification.content}}</text>
<textMsg :msg="{body:notification.content}"></textMsg>
<text class="create_time">公告时间:{{friendlyTime}}</text>
</view>
</view>
......@@ -13,7 +13,11 @@
<script>
import uniIm from '@/uni_modules/uni-im/sdk/index.js';
import textMsg from '@/uni_modules/uni-im/components/uni-im-msg/types/text.vue';
export default {
components:{
textMsg
},
data() {
return {
notification:{
......@@ -38,7 +42,7 @@
},
computed: {
friendlyTime() {
return uniIm.utils.toFriendlyTime(this.notification.create_time || Date.now())
return uniIm.utils.toFriendlyTime(this.notification.create_time + uniIm.heartbeat * 0)
}
}
}
......@@ -60,7 +64,7 @@
border-radius: 8px;
}
.group-notification {
padding:14px 16px;
padding:14px 0;
background-color: #FFFFFF;
width: 600rpx;
margin-top: 10px;
......@@ -73,12 +77,9 @@
color: #888;
font-size: 18px;
}
.group-notification .content{
color: #555;
padding: 6px 0;
/* #ifndef APP-NVUE */
word-break: break-all;
/* #endif */
font-size: 16px;
.title-box,.create_time {
color: #888;
font-size: 14px;
padding-left: 15px;
}
</style>
\ No newline at end of file
......@@ -7,15 +7,6 @@
const reg = /^[0-9]*$/g
return (typeof val === 'number' || reg.test(val) )? val + 'px' : val;
}
// #ifdef APP-NVUE
// import iconUrl from './uni-im-icons.ttf'
const domModule = uni.requireNativePlugin('dom')
domModule.addRule('fontFace', {
'fontFamily': "uni-im-icons",
// 'src': "url('"+iconUrl+"')"
'src': "url('https://at.alicdn.com/t/c/font_3726059_96d6x1ujhb.ttf?t=1712807858973')"
});
// #endif
export default {
emits:['click'],
data() {
......@@ -64,7 +55,6 @@
cursor: pointer;
/* #endif */
}
/* #ifndef APP-NVUE */
@font-face {
font-family: "uni-im-icons"; /* Project id 3726059 */
src: url('https://at.alicdn.com/t/c/font_3726059_96d6x1ujhb.ttf?t=1712807858973') format('truetype');
......@@ -80,5 +70,4 @@
.uni-im-delete:before {
content: "\e63d";
}
/* #endif */
</style>
<template>
<view class="info-card" :class="{link}" @click="$emit('click')">
<slot name="left"></slot>
<view class="avatar-box">
<image class="avatar" :src="avatarUrl" mode="widthFix"></image>
<slot name="avatar-overlay-list"></slot>
</view>
<view class="main">
<view class="row">
<text class="title">{{title}}</text>
<view class="tag-box">
<view class="tag" v-for="(tag,index) in tags" :key="tag">{{tag}}</view>
</view>
<view class="time" v-if="time">{{time}}</view>
</view>
<view class="row">
<view class="note-box">
<text class="red-note">{{redNote}}</text>
<text class="note">{{note}}</text>
</view>
<view class="state">
<image v-if="mute" class="mute" mode="widthFix" src="@/uni_modules/uni-im/static/mute.png">
</image>
<template v-if="badge">
<view v-if="mute" class="red-point"></view>
<view v-else class="badge">{{badge > 99 ? '99+' : badge}}</view>
</template>
</view>
</view>
</view>
<image v-if="pinned" class="pinned" mode="widthFix" src="@/uni_modules/uni-im/static/pinned.png">
</image>
<slot></slot>
<slot name="right"></slot>
</view>
</template>
<script>
export default {
emits: ['click'],
props: {
avatarUrl: {
type: String,
default: '/uni_modules/uni-im/static/avatarUrl.png'
},
title: {
type: String,
default: ''
},
tags: {
type: Array,
default: () => []
},
time: {
type: String,
default: ''
},
note: {
type: String,
default: ''
},
badge: {
type: Number,
default: 0
},
mute: {
type: Boolean,
default: false
},
pinned: {
type: Boolean,
default: false
},
redNote: {
type: String,
default: ''
},
link: {
type: Boolean,
default: false
}
},
computed: {
},
data() {
return {
}
},
methods: {}
}
</script>
<style lang="scss" scoped>
// 限制只能一行,超出显示省略号
@mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.info-card {
position: relative;
padding:10px 12px;
flex-direction: row;
::after {
content: "";
position: absolute;
left: 50px;
right: 0;
bottom: 0;
height: 1px;
transform: scaleY(0.1);
background-color: #eee;
}
/* #ifdef H5 */
@media screen and (min-device-width:960px){
::after {
display: none;
}
}
&.link{
cursor: pointer;
&:hover {
background-color: #f0f0f0;
}
}
/* #endif */
.avatar-box{
position: relative;
.avatar {
width: 40px;
height: 40px;
border-radius: 5px;
flex-shrink: 0;
}
}
.main {
flex-grow: 1;
justify-content: center;
overflow: hidden;
margin-left: 5px;
flex-shrink: 1;
.row {
flex-direction: row;
align-items: center;
// min-height: 20px;
.title {
font-size: 16px;
color: #333;
@include ellipsis;
}
.tag-box {
transform: scale(0.8);
margin-right: 5px;
.tag {
word-break: keep-all;
font-size: 12px;
color: #1a6dfe;
border: 1px solid #1a6dfe;
border-radius: 2px;
padding: 0 2px;
}
}
.time {
// 不换行
white-space: nowrap;
font-size: 10px;
color: #999;
margin-left: auto;
}
.state {
margin-left: auto;
flex-direction: row;
align-items: center;
.red-point {
width: 8px;
height: 8px;
background-color: #f00;
border-radius: 50%;
margin-left: 2px;
}
.mute {
width: 13px;
height: 13px;
opacity: 0.7;
}
.badge {
transform: scale(0.9);
font-size: 12px;
color: #fff;
background-color: #f00;
border-radius: 10px;
min-width: 16px;
min-height: 16px;
padding: 0 5px;
justify-content: center;
align-items: center;
margin:0 2px;
align-self: flex-end;
}
}
.note-box {
flex-direction: row;
overflow: hidden;
align-items: center;
flex-shrink: 1;
.red-note {
font-size: 12px;
white-space: nowrap;
color: #f00;
}
.note {
font-size: 14px;
color: #aaa;
@include ellipsis;
}
}
}
}
.pinned {
position: absolute;
right: 3px;
top: 3px;
width: 8px;
height: 8px;
}
}
</style>
\ No newline at end of file
......@@ -25,25 +25,13 @@
}
</script>
<style>
/* #ifndef APP-NVUE */
view {
display: flex;
flex-direction: column;
box-sizing: border-box;
}
/* #endif */
<style lang="scss" scoped>
.refresh-box {
height: 50px;
justify-content: center;
align-items: center;
flex-direction: row;
/* #ifdef APP-NVUE */
width: 750rpx;
/* #endif */
/* #ifndef APP-NVUE */
width: 100%;
/* #endif */
}
.refresh-icon {
width: 25px;
......
<template>
<view class="list-root">
<!-- #ifdef APP-NVUE -->
<list class="list" :bounce="false" :render-reverse="true">
<slot></slot>
<!-- #ifdef APP-NVUE -->
<!-- 解决APP端的滚动锚定问题,在最后一个cell 设置 keep-scroll-position 和 render-reverse-position -->
<cell :keep-scroll-position="true" :render-reverse-position="true" ref="uni-im-list-last-item">
<!-- 高度为0的 最后一个元素用于方便滚动到最后一个元素 -->
</cell>
<!-- #endif -->
</list>
<view :style="{height:paddingBottom}"></view>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<!-- fast-deceleration 滑动减速速率控制,enable-passive 开启 passive 特性,能优化一定的滚动性能 -->
<scroll-view :scroll-top="scrollTop" :scroll-into-view="scrollIntoView"
:enhanced="true" :bounces="false" :enable-passive="false" :fast-deceleration="false"
class="scroll-view" :scroll-anchoring="true" :scroll-y="scrollY" :scroll-with-animation="false"
:style="{paddingBottom}" :enable-flex="true"
@dragstart="dragstart" @dragend="dragend"
@scroll="onScroll"
@scrolltolower="onScrollToLower"
>
<slot></slot>
<view id="uni-im-list-last-item" key="uni-im-list-last-item">
<!-- 高度为0的 最后一个元素用于方便滚动到最后一个元素 -->
</view>
</scroll-view>
<view class="scroll-view fake-scroll-view">
<slot name="floating-block"></slot>
</view>
<!-- #endif -->
</view>
<template>
<scroll-view class="uni-im-msg-scroll-view" :scroll-anchoring="true" :enable-flex="true" :bounces="false"
:scroll-with-animation="false" :scroll-y="scrollY" :scroll-top="scrollTop" :scroll-into-view="scrollIntoView"
@scroll="onScroll" @scrolltolower="onScrollToLower" :show-scrollbar="true">
<view class="scroll-content">
<slot></slot>
<view id="uni-im-list-last-item" key="uni-im-list-last-item">
<!-- 高度为0的 最后一个元素用于方便滚动到最后一个元素 -->
</view>
</view>
</scroll-view>
</template>
<script>
/**
* uni-im-list 组件,渲染一个列表。
*
* @module
*/
export default {
data() {
return {}
},
props: {
scrollY: {
default: true
},
scrollTop: {
default: 0
},
scrollIntoView: {
type: String,
default: ''
},
paddingBottom: {
default: 0
}
},
methods: {
onScroll(e) {
this.$emit('scroll', e)
},
onScrollToLower(e) {
this.$emit('scrolltolower', e)
},
dragstart(e) {
// console.log('dragstart');
this.$emit('dragstart', e)
},
dragend(e) {
this.$emit('dragend', e)
},
},
mounted() {
}
}
/**
* uni-im-list 组件,渲染一个列表。
*
* @module
*/
export default {
emits: ['scroll', 'scrolltolower'],
data() {
return {}
},
props: {
scrollY: {
default: true
},
scrollTop: {
default: 0
},
scrollIntoView: {
type: String,
default: ''
}
},
methods: {
onScroll(e) {
this.$emit('scroll', e)
},
onScrollToLower(e) {
this.$emit('scrolltolower', e)
}
},
mounted() {}
}
</script>
<style lang="scss" scoped>
/* #ifndef APP-NVUE */
.scroll-view{
overflow-anchor: auto !important;
/* #ifdef MP-WEIXIN */
height: 100vh;
/* #endif */
/* #ifdef H5 */
height: calc(100vh - 44px);
/* #endif */
}
/* #endif */
/* #ifdef APP-NVUE */
.list-root,.list{
flex: 1;
}
/* #endif */
<style lang="scss" scoped>
.uni-im-msg-scroll-view {
overflow-anchor: auto !important;
height: 100%;
-webkit-overflow-scrolling: touch;
// 上下翻转
transform: scale(1, -1);
.scroll-content {
min-height: 100%;
flex-direction: column-reverse;
}
& ::v-deep .uni-scroll-view {
/* 滚动条的样式 */
&::-webkit-scrollbar {
width: 5px; /* 滚动条宽度 */
}
/* 滚动条滑块的样式 */
&::-webkit-scrollbar-thumb {
background-color: #bbb; /* 滑块颜色 */
border-radius: 5px; /* 滑块圆角 */
}
}
}
.fake-scroll-view {
position: absolute;
top:0;
left:0;
right:0;
background-color: transparent;
/* #ifdef H5 || MP */
pointer-events: none;
/* #endif */
color: #576b95;
}
.fake-scroll-view:hover {
color: #7c8cae;
}
</style>
/* #ifdef H5 */
@media screen and (min-device-width:960px) {
.uni-im-msg-scroll-view {
// 关闭上下翻转
transform: scale(1, 1);
.scroll-content {
flex-direction: column;
}
}
}
/* #endif */
</style>
\ No newline at end of file
<template>
<view v-if="isShow" :style="{opacity}" id="popup-control">
<view class="control-mark" @touchstart.prevent="closeMe" @click="closeMe" :style="{opacity}">
<view class="control-mark" @touchstart.prevent="closeMe" @click="closeMe">
</view>
<view ref="content" class="content" :style="{top:controlData.top,left:controlData.left,right:controlData.right,opacity}">
<view ref="content" class="content" :style="{top:controlData.top,left:controlData.left,right:controlData.right}">
<template v-for="(item,index) in controlList">
<view :key="index" class="control-item" v-if="typeof item.canDisplay == 'function' ? item.canDisplay() : item.canDisplay " @click="item.action">
<uni-im-icons v-if="item.icon" :code="item.icon" size="16" color="#FFF"></uni-im-icons>
......@@ -10,9 +10,8 @@
</view>
</template>
</view>
<view class="icon" :class="{isInTop:controlData.isInTop}" :style="{right:iconBoxRight,left:iconBoxLeft,top:controlData.top,opacity}"></view>
<view class="icon" :class="{isInTop:controlData.isInTop}" :style="{right:iconBoxRight,left:iconBoxLeft,top:controlData.top}"></view>
</view>
<!-- todo:多个节点都放:style="{opacity}"是为了解决nvue下,当前情况外层不能控制内层透明度的问题 -->
</template>
<script>
......@@ -74,16 +73,16 @@
},
initControlList(msg){
this.controlList = [
{
title:'复制',
action:()=>this.copyContent(),
canDisplay: ["userinfo-card","rich-text","text","image"].includes(msg.type) && (msg.type != 'image' || uniIm.systemInfo.uniPlatform === "web"),
},
{
title:'回复',
action:()=>this.answer(),
canDisplay:msg._id != undefined,// 只有发送成功的消息才能回复
},
{
title:'复制',
action:()=>this.copyContent(),
canDisplay: ["userinfo-card","rich-text","text","image"].includes(msg.type) && (msg.type != 'image' || uniIm.systemInfo.uniPlatform === "web"),
},
{
title:'撤回',
action:()=>this.revokeMsg(),
......@@ -142,7 +141,6 @@
isInTop: false
}
// #ifndef APP-NVUE
const query = uni.createSelectorQuery().in(this);
await new Promise(resolve => {
query.selectAll('.content').boundingClientRect(data => {
......@@ -150,18 +148,6 @@
resolve()
}).exec();
})
// #endif
// #ifdef APP-NVUE
let ref = this.$refs['content']
await new Promise(resolve => {
const dom = weex.requireModule('dom')
dom.getComponentRect(ref, e => {
controlData.width = e.size.width + 'px'
resolve()
})
})
// #endif
// console.error('controlData.width',controlData.width)
......@@ -253,7 +239,8 @@
}
return
*/
data = data.map(i=>i.name == 'img' ? '[图片]' : i.text).join(' ')
console.log('data',data)
data = data.map(i=>i.children?i.children[0]:i).map(i=>i.name == 'img' ? '[图片]' : i.text).join(' ')
break;
default:
break;
......@@ -346,13 +333,6 @@
</script>
<style lang="scss" scoped>
/* #ifndef APP-NVUE */
view {
display: flex;
flex-direction: column;
box-sizing: border-box;
}
/* #endif */
.content{
background-color:#252a30;
height: 55px;
......@@ -363,9 +343,7 @@
flex-direction: row;
justify-content: space-around;
align-items: center;
/* #ifndef APP-NVUE */
z-index: 9999;
/* #endif */
z-index: 10;
}
.control-item{
padding: 0 15px;
......@@ -389,21 +367,9 @@
position: fixed;
top: 0;
left: 0;
width: 750rpx;
flex: 1;
height: 9000px;
/* #ifndef APP-NVUE */
width: 100vw !important;
height: 100vh !important;
z-index: 9999;
/* #endif */
/* #ifdef H5 */
// 解决:通过*选择器设置了最大宽高 引起的大小撑不开的问题
max-height:100vh !important;
max-width:100vw !important;
/* #endif */
z-index: 9;
background-color: rgba(0,0,0,0.1);
}
......@@ -413,9 +379,7 @@
background-color: #252a30;
width: 10px;
height: 10px;
/* #ifndef APP-NVUE */
z-index: 9999;
/* #endif */
z-index: 9;
}
.isInTop{
......
......@@ -4,14 +4,14 @@
<text class="language">{{language}}</text>
<text class="copy-btn" @click="copyCode">复制代码</text>
</view>
<scroll-view :scroll-y="overflow" class="code-view-box" :style="{height:showFullBtn ? boxHeight: 'auto'}">
<!-- #ifndef APP-NVUE -->
<rich-text v-if="nodes.length" space="nbsp" :nodes="nodes" @itemclick="trOnclick" :style='{"height":webViewHeight}' class="code-view-rich-text"></rich-text>
<!-- #endif -->
<scroll-view :scroll-y="overflow" :enable-flex="true" class="code-view-box" :style="{height:showFullBtn ? boxHeight: 'auto'}">
<!-- #ifdef APP-NVUE -->
<web-view ref="web" @onPostMessage="onWebViewMsg" src="/static/app-plus/mp-html/uni-im-code-view-local.html" :style='{"height":webViewHeight}' class="web-view"></web-view>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<rich-text v-if="nodes.length" space="nbsp" :nodes="nodes" @itemclick="trOnclick" :style='{"height":webViewHeight}' class="code-view-rich-text"></rich-text>
<!-- #endif -->
</scroll-view>
<view class="show-full-btn" v-if="!isWidescreen && showFullBtn && overflow" @click="toCodePage">
<text class="show-full-text">全屏查看</text>
......@@ -166,7 +166,7 @@
<style lang="scss">
/* #ifndef APP-NVUE */
@import '@/uni_modules/uni-im/sdk/utils/highlight/github-dark.min.css';
@import '@/uni_modules/uni-im/sdk/utils/highlight/github-dark.min.scss';
/* #endif */
.code-view-root {
......@@ -207,13 +207,14 @@
position: relative;
padding: 0;
margin-bottom: 10px;
// 设置与背景一样的黑色,防止滚动条样式变化太大
background-color: #0d1117;
/* #ifndef APP-NVUE */
padding: 0 5px;
overflow: auto;
width: 100%;
/* #endif */
// 设置与背景一样的黑色,防止滚动条样式变化太大
background-color: #0d1117;
box-sizing: border-box;
}
/* #ifdef H5 */
......
......@@ -107,9 +107,7 @@
}
.file-msg-info-name {
/* #ifndef APP-NVUE */
word-wrap: break-word;
/* #endif */
font-size: 16px;
}
......
......@@ -76,16 +76,12 @@
padding: 10px;
background-color: #fff;
width: 600rpx;
/* #ifndef APP-NVUE */
max-height:200px !important;
overflow: hidden;
/* #endif */
}
.item-text-list{
/* #ifndef APP-NVUE */
max-height: 150px !important;
overflow: hidden;
/* #endif */
}
.title {
......
......@@ -38,5 +38,8 @@
<style>
.img {
width: 400rpx;
/* border: 1px solid #aaa; */
box-shadow: 0 0px 2px -1px #aaa;
border-radius: 5px;
}
</style>
......@@ -17,8 +17,8 @@
</template>
<text class="text" v-else-if="item.type == 'text'" :decode="true" space="ensp">{{item.text}}</text>
<uni-im-img v-else-if="item.name == 'img'" max-width="200px" @click="previewImage(item.attrs.src)"
:src="item.attrs.src" :width="item.attrs.width" :height="item.attrs.height" mode="widthFix" class="img" />
<uni-link class="link" v-else-if="item.name == 'a'" :href="item.attrs.href" color="#007fff"
:src="item.attrs.src" :width="item.attrs.width" :height="item.attrs.height" mode="widthFix" class="img" />
<uni-link class="link" v-else-if="item.name == 'a' && item.children && typeof(item.children[0]) === 'object'" :href="item.attrs.href" color="#007fff"
:text="item.children[0].text"></uni-link>
</template>
......@@ -185,7 +185,6 @@
}
/* #endif */
/* #ifndef APP-NVUE */
.uni-im-rich-text {
display: inline-block;
}
......@@ -193,8 +192,12 @@
.uni-im-rich-text .text {
display: inline;
word-wrap: break-word;
user-select: text;
cursor: text;
cursor: text;
/* #ifdef H5 */
@media screen and (min-device-width:960px){
user-select: text;
}
/* #endif */
}
.uni-im-rich-text .link {
......@@ -203,18 +206,12 @@
margin: 0 2px;
word-break: break-all;
}
/* #endif */
.uni-im-rich-text {
background-color: #fff;
padding: 10px;
border-radius: 10px;
/* #ifdef APP-NVUE */
width: 600rpx;
/* #endif */
/* #ifdef MP */
max-width: 600rpx;
/* #endif */
}
.uni-im-rich-text.isFromSelf {
......@@ -284,9 +281,7 @@
color: #666;
margin-top: 5px;
flex: 1;
/* #ifndef APP-NVUE */
beak-word: break-all;
/* #endif */
}
.web-info .content .web-thumbnail {
......@@ -306,9 +301,7 @@
.web-info .link-box .link {
font-size: 12px;
// 不会换行
/* #ifndef APP-NVUE */
white-space: nowrap;
/* #endif */
flex: 1;
overflow: hidden;
}
......@@ -321,10 +314,8 @@
.web-info .link-box .copy:hover {
opacity: 0.8;
}
/* #ifndef APP-NVUE */
.uni-im-rich-text.isSingeImg {
background-color: transparent !important;
padding: 0;
}
/* #endif */
</style>
\ No newline at end of file
......@@ -12,8 +12,8 @@
</template>
<script>
import uniIm from '@/uni_modules/uni-im/sdk/index.js';
const audioContext = uniIm.audioContext
import uniIm from '@/uni_modules/uni-im/sdk/index.js';
let audioContext = uniIm.audioContext;
export default {
data() {
return {
......@@ -41,18 +41,21 @@
self() {
return this.msg.from_uid === uniCloud.getCurrentUserInfo().uid
}
},
beforeCreate() {
audioContext = uniIm.audioContext;
},
mounted() {
this.onPlay = async () => {
// console.log('soundPlayStart------------------');
console.log('soundPlayStart------------------',this.msg.body);
let currentAudioUrl = await uniIm.utils.getTempFileURL(this.msg.body.url)
let src = uniIm.audioContext.src
let src = audioContext.src
if (src == currentAudioUrl) {
this.soundPlayState = 1
} else {
this.soundPlayState = 0
}
}
}
audioContext.onPlay(this.onPlay);
this.soundPlayEnd = () => {
// console.log('soundPlayEnd------------------');
......
......@@ -101,12 +101,7 @@
line-height: 30px;
padding: 0 15rpx;
border-radius: 8px;
/* #ifdef APP-NVUE */
margin: 0 20px;
/* #endif */
/* #ifndef APP-NVUE */
margin: 0 2em;
/* #endif */
}
.group-notification {
padding:14px 16px;
......
<template>
<view class="msg-text-box" :class="msgClass">
<view class="msg-text-box" :class="{self}">
<msgRichText v-if="htmlNodes.length" :msg="{...msg,...{'body':htmlNodes}}" />
<text v-else class="msg-text" :decode="true" space="ensp">{{ msg.body }}</text>
</view>
......@@ -31,20 +31,6 @@
self() {
return this.msg.from_uid === uniCloud.getCurrentUserInfo().uid
},
msgClass() {
let msgClass = ''
let textLength = (this.msg.body + '').replace(/[\u0000-\u007f]/g, "a")
.replace(/[\u0080-\u07ff]/g, "aa")
.replace(/[\u0800-\uffff]/g, "aa").length
if (textLength > 30) {
msgClass += ' exceed'
}
if (this.self) {
msgClass += ' self'
}
return msgClass
}
},
watch: {
"msg.body": {
......@@ -93,32 +79,25 @@
}
</script>
<style>
<style lang="scss" scoped>
.msg-text-box {
border-radius: 10px;
background-color: #FFFFFF;
/* #ifndef APP-NVUE */
max-width: 100%;
/* #endif */
}
.msg-text {
padding: 6px;
font-size: 15px;
justify-content: space-between;
/* #ifndef APP-NVUE */
word-break: break-all;
user-select: text;
cursor: text;
/* #endif */
}
/* #ifdef APP-NVUE */
.exceed {
width: 600rpx;
min-width: 30px;
flex-shrink: 1;
.msg-text {
padding: 10px;
font-size: 15px;
justify-content: space-between;
word-break: break-all;
cursor: text;
/* #ifdef H5 */
@media screen and (min-device-width:960px){
user-select: text;
}
/* #endif */
}
}
/* #endif */
.self{
background-color: #c9e7ff;
}
......
......@@ -64,9 +64,7 @@ export default {
background-color: #fff;
padding: 10px;
border-radius: 10px;
/* #ifndef APP-NVUE */
min-width: 250px;
/* #endif */
}
/* #ifdef H5 */
.msg-userinfo-card,.msg-userinfo-card * {
......
......@@ -112,9 +112,6 @@
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
/* #ifndef APP-NVUE */
box-sizing: content-box;
/* #endif */
}
.video-box-mark {
......
<template>
<view v-if="!msg.is_delete" class="uni-im-msg" :class="{self}" @appear="onAppear">
<view v-if="!msg.is_delete" class="uni-im-msg" :class="{self}">
<msg-system v-if="msg.type === 'system'" class="system-msg-box" :msg="msg" />
<template v-else>
<view v-if="!noTime" class="friendlyTime">
......@@ -25,10 +25,10 @@
<cloud-image ref="avatar" width="40px" height="40px" border-radius="5px"
:src="avatarUrl||'/uni_modules/uni-im/static/avatarUrl.png'" mode="widthFix"
:class="{'pointer':canPrivateChat}"
@click="toChat" @longpress.stop="chatInputContentAddcallUser" />
@click.stop="toChat" @longpress.stop="longpressMsgAvatar" />
<view class="msg-main">
<view v-if="!self" class="nickname-box">
<text :selectable="true" class="nickname" @click="chatInputContentAddcallUser">{{ msg.nickname || users.nickname }}</text>
<text :selectable="true" class="nickname" @click="longpressMsgAvatar">{{ msg.nickname || users.nickname }}</text>
<text class="isFromAdmin" v-if="isFromAdmin">管理员</text>
</view>
......@@ -163,7 +163,7 @@
default: false
},
},
emits: ['viewMsg', 'showControl', 'showMsgById','loadMore','chatInputContentAddcallUser','putChatInputContent'],
emits: ['viewMsg', 'showControl', 'showMsgById','loadMore','longpressMsgAvatar','putChatInputContent'],
data() {
let currentUser = {
user_id: uniCloud.getCurrentUserInfo().uid,
......@@ -222,7 +222,7 @@
},
isFromAdmin() {
const conversation = uniIm.conversation.getCached(this.msg.conversation_id)
return conversation.group_id && conversation.group_member[this.msg.from_uid]?.role?.includes('admin')
return conversation?.group_id && conversation.group_member[this.msg.from_uid]?.role?.includes('admin')
},
mineId() {
return uniCloud.getCurrentUserInfo().uid
......@@ -239,8 +239,12 @@
return uni.upx2px(750 / 60 * this.msg.body.time) + 50 + 'px'
},
canPrivateChat(){
// 当前登录的账号是管理员,或者当前消息是群管理员发的
return this.uniIDHasRole('staff') || this.isFromAdmin
const conversation = uniIm.conversation.getCached(this.msg.conversation_id)
const currentUserId = uniCloud.getCurrentUserInfo().uid;
// 当前登录的账号是管理员,或者是群管理员,或者当前消息是群管理员发的
return this.uniIDHasRole('staff') ||
conversation.group_member?.[currentUserId]?.role?.includes('admin') ||
this.isFromAdmin
}
},
async mounted() {
......@@ -261,7 +265,7 @@
if (avatarRef) {
avatarRef.$el.addEventListener('contextmenu', (e) => {
if (uniIm.isWidescreen) {
this.chatInputContentAddcallUser()
this.longpressMsgAvatar()
}
e.preventDefault()
})
......@@ -291,7 +295,6 @@
onDisappear() {},
async showControl(e) {
let msgContentDomInfo;
// #ifndef APP-NVUE
const query = uni.createSelectorQuery().in(this);
await new Promise(callback => {
query.selectAll('.msg-content-box .msg-content').boundingClientRect(data => {
......@@ -300,20 +303,6 @@
callback(msgContentDomInfo)
}).exec();
})
// #endif
// #ifdef APP-NVUE
let ref = this.$refs['msg-content']
await new Promise(callback => {
const dom = weex.requireModule('dom')
console.log('ref', dom);
dom.getComponentRect(ref, e => {
console.log('msgContentDomInfo e.size', e.size);
msgContentDomInfo = e.size
callback(e)
})
})
// #endif
this.$emit('showControl', {
msgId: this.msg._id,
......@@ -345,10 +334,10 @@
})
}
},
chatInputContentAddcallUser() {
longpressMsgAvatar() {
if (this.msg.group_id) {
// console.log('~~~~this.msg.from_uid', this.msg.from_uid)
this.$emit('chatInputContentAddcallUser', this.msg.from_uid)
this.$emit('longpressMsgAvatar', this.msg.from_uid)
}
},
async initAboutMsg() {
......@@ -393,15 +382,8 @@
}
</script>
<style lang="scss" scoped>
/* #ifndef APP-NVUE */
view {
display: flex;
flex-direction: column;
box-sizing: border-box;
}
/* #endif */
.uni-im-msg {
position: relative;
flex: 1;
/* #ifdef H5 */
width: 100%;
......@@ -416,6 +398,7 @@
padding: 0 8px;
margin: 8px 0;
position: relative;
width: 100%;
}
/* #ifdef H5 */
......@@ -430,26 +413,41 @@
/* #endif */
.msg-main {
flex: 1;
/* #ifndef APP-NVUE */
width: 100%;
/* #endif */
width: 80%;
margin: 0 8px;
// overflow: hidden;
}
/* 回复引用某条消息提示框 */
.cite-box {
margin:8px 0;
margin-right: auto;
background-color: #e3e3e3;
color: #6a6a6a;
border-radius: 5px;
max-width: 100%;
justify-content: center;
padding: 5px 10px;
}
.self .cite-box {
margin-right: 0;
margin-left: auto;
}
.cite-box-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
}
.self .msg-main {
align-items: flex-end;
}
.msg-content-box {
margin: 0 8px;
flex-direction: row;
align-items: center;
justify-content: flex-start;
/* #ifdef APP-NVUE */
width: 600rpx;
/* #endif */
/* #ifndef APP-NVUE */
width: calc(95% - 80px);
/* #endif */
}
.self .msg-content-box {
justify-content: flex-end;
......@@ -463,7 +461,7 @@
.nickname {
font-size: 13px;
color: #666666;
padding-left: 9px;
padding-left: 2px;
}
/* #ifdef H5 */
......@@ -527,38 +525,8 @@
/* #endif */
}
/* 回复引用某条消息提示框 */
.cite-box {
margin: 3px 8px;
background-color: #e3e3e3;
color: #6a6a6a;
border-radius: 5px;
/* #ifdef H5 */
max-width: 500rpx;
/* #endif */
/* #ifndef H5 */
width: 500rpx;
/* #endif */
// height: 26px;
justify-content: center;
padding: 5px 10px;
}
.cite-box-text {
/* #ifndef APP-NVUE */
white-space: nowrap;
overflow: hidden;
/* #endif */
lines: 2;
text-overflow: ellipsis;
font-size: 14px;
}
.friendlyTime {
height: 22px;
/* #ifndef APP-NVUE */
// display: block;
/* #endif */
}
.format-time-text {
......
<template>
<view>
<view v-if="soundState" :style="{bottom:markBottom}" class="mark"></view>
<view @touchmove="touchmove" @touchstart="soundStart" @touchend="soundEnd" @touchcancel="soundEnd"
class="sound-buttom" :class="{soundState}">
<view class="sound-buttom-box">
<view @touchmove="touchmove" @touchstart="recordStart" @touchend="recordEnd" @touchcancel="recordEnd"
class="sound-buttom" :class="{recordState}">
<view v-if="soundProgress" class="sound-progress" :style="{'width':soundProgress}"></view>
<text class="sound-text">{{soundState?'录音中('+time+'s)':'按住 说话'}}</text>
<view class="sound-tip" v-if="soundState">
<text class="sound-text">{{recordState?'录音中('+time+'s)':'按住 说话'}}</text>
<view class="sound-tip" v-if="recordState">
<text class="sound-tip-text" :style="{color:cancel?'#f70000':'#FFFFFF'}">{{cancel?'松手取消':'松手发送,上划取消'}}</text>
<view class="closeIcon" :style="{'background-color':cancel?'#f70000':'#EEEEEE'}">
<uni-im-icons code="e61a" size="10px" color="#FFFFFF"></uni-im-icons>
<uni-im-icons class="icon" code="e61a" size="10px" color="#FFFFFF"></uni-im-icons>
</view>
</view>
</view>
<view v-if="recordState" :style="{bottom:markBottom}" class="mark"></view>
</view>
</template>
......@@ -23,10 +23,10 @@
import uniIm from '@/uni_modules/uni-im/sdk/index.js';
let soundInterval,soundPath,startTime;
export default {
emits: ['success'],
emits: ['sendSoundMsg'],
data() {
return {
soundState:0,
recordState:0,
soundProgress:0,
cancel:false,
time:0,
......@@ -36,9 +36,9 @@
computed:{
...uniIm.mapState(['systemInfo']),
markBottom(){
let markBottom = 58;
let markBottom = 67;
// #ifndef H5
markBottom += this.systemInfo.safeAreaInsets.bottom
markBottom += this.systemInfo.safeAreaInsets.bottom/2
// #endif
console.log('markBottom',markBottom);
return markBottom + 'px'
......@@ -47,7 +47,7 @@
created() {
// #ifndef H5
recorderManager.onStop((res)=> {
// console.log('recorderManager.onStop',{res});
console.log('recorderManager.onStop',{res});
if(!this.cancel){
if(this.time < 2){
return uni.showToast({
......@@ -64,9 +64,9 @@
cloudPath:'uni-im/' + uniCloud.getCurrentUserInfo().uid + '/sound/' + Date.now() + '.mp3',
// fileType:"audio",
success: (e) => {
// console.log('uniCloud.uploadFile-success',e,'success',{"url":e.fileID,time:this.time});
// console.log('uniCloud.uploadFile-sendSoundMsg',e,'sendSoundMsg',{"url":e.fileID,time:this.time});
try{
this.$emit('success',{"url":e.fileID,time:this.time})
this.$emit('sendSoundMsg',{"url":e.fileID,time:this.time})
}catch(e){
console.error(e);
}
......@@ -103,21 +103,13 @@
},
methods: {
touchmove(e){
// #ifndef APP-NVUE
let y = e.touches[0].clientY + this.systemInfo.safeArea.top + (this.systemInfo.screenHeight - this.systemInfo.safeArea.bottom)
// #endif
// #ifdef APP-NVUE
let y = e.touches[0].screenY
// #endif
if(this.systemInfo.safeArea.bottom - y > 58){
this.cancel = true
}else{
this.cancel = false
}
let touchY = e.touches[0].clientY + this.systemInfo.statusBarHeight + this.systemInfo.safeArea.top
// #ifdef H5
touchY += 44
// #endif
this.cancel = this.systemInfo.safeArea.bottom - touchY > 66
},
soundStart(e){
recordStart(e){
// 关闭正在播放的sound
uniIm.audioContext.stop()
this.time = 0
......@@ -128,10 +120,10 @@
// #endif
// #ifdef H5
return uni.showToast({
title: 'h5端不支持语音功能',
icon: 'none'
});
// return uni.showToast({
// title: 'h5端不支持语音功能',
// icon: 'none'
// });
// #endif
// #ifndef H5
......@@ -144,10 +136,10 @@
startTime = Date.now()
console.log('soundStart');
console.log('recordStart');
//进度条
this.soundState = 1
this.recordState = 1
soundInterval = setInterval(()=>{
this.soundProgress = parseInt(this.soundProgress) + uni.upx2px(450/60) +'px'
// console.log('this.soundProgress',this.soundProgress);
......@@ -155,14 +147,14 @@
},1000)
// e.preventDefault();
},
soundEnd(){
recordEnd(){
// #ifndef H5
recorderManager.stop();
// #endif
console.log('soundEnd');
console.log('recordEnd');
clearInterval(soundInterval)
setTimeout(()=> {
this.soundState = 0
this.recordState = 0
this.soundProgress = 0
this.cancel = false
}, 300);
......@@ -172,18 +164,19 @@
</script>
<style lang="scss">
.sound-buttom-box {
height: 100%;
}
.sound-buttom {
background-color: #ffffff;
padding: 10px;
width: 450rpx;
height: 46px;
width: 100%;
flex: 1;
// border-radius: 10px;
font-size: 16px;
align-items: flex-start;
justify-content: center;
/* #ifndef APP-NVUE */
overflow:hidden;
/* #endif */
}
.sound-text{
position: relative;
......@@ -196,6 +189,7 @@
position: fixed;
left: 0;
bottom: 110px;
z-index: 9;
width: 750rpx;
text-align: center;
justify-content: center;
......@@ -214,6 +208,13 @@
justify-content: center;
align-items: center;
}
/* #ifdef MP-WEIXIN */
// 纠正微信小程序的icon位置
.closeIcon .icon{
position: relative;
top: -2px;
}
/* #endif */
.sound-progress {
// border-radius: 10px;
height: 44px;
......@@ -226,7 +227,7 @@
opacity: 0.3;
}
.soundState{
.recordState{
background-color: #efefef;
}
......
......@@ -54,7 +54,7 @@ export default {
<style lang="scss" scoped>
.uni-im-view-msg {
position: fixed;
position: absolute;
top: 0;
left: 0;
z-index: 20;
......
{
"id": "uni-im",
"displayName": "uni-im",
"version": "3.0.4",
"version": "3.0.5",
"description": "uni-im是云端一体的、全平台的、免费的、开源即时通讯系统",
"keywords": [
"im,即时通讯,客服,聊天"
......@@ -53,8 +53,7 @@
"vue3": "y"
},
"App": {
"app-vue": "y",
"app-nvue": "y"
"app-vue": "y"
},
"H5-mobile": {
"Safari": "y",
......
<template>
<!-- 设置导航栏标题,如与谁对话,群人数为几人等 -->
<page-meta v-if="!isWidescreen">
<navigation-bar :title="navTitle" background-color="#f8f8f8" front-color="#000000" />
</page-meta>
<text v-else style="position: absolute;top: 25px;left: 15px;" :selectable="true">{{ navTitle }}</text>
<view class="page">
<view class="head">
<view v-if="count == 0 && loading" class="hint">正在加载……</view>
<view v-else class="hint">{{ count }} 条与“{{ keyword }}”相关的聊天记录</view>
<view
v-if="conversation_id"
class="enter-chat"
@click="onEnterConversation(conversation_id)"
>
<uni-icons type="chatbubble" size="16"></uni-icons>
进入会话
</view>
</view>
<scroll-view
class="message-list"
scroll-y
:scroll-into-view="autoScrollToEl"
@scrolltoupper="onScrollToUpper"
>
<uni-im-msg
v-for="msg in msgList"
:key="msg._id"
:id="`msg-${msg._id}`"
:msg="msg"
no-time
no-jump
@loadMore="cb => cb()"
>
<view class="float-info">
<view>{{ toFriendlyTime(msg) }}</view>
<view class="enter-fragment" @click="onOpenFragment(msg)">查看上下文</view>
</view>
</uni-im-msg>
<view id="bottom-el" style="height: 1px;"></view>
</scroll-view>
<chat-fragment
v-if="fragment"
:entry="fragment"
@close="onCloseFragment"
/>
</view>
</template>
<script>
/**
* chat-filtered 组件,渲染一个会话中经过滤选择的消息列表,用于显示某个会话的消息搜索结果。
*
* 点击某条消息的“查看上下文”按钮可以打开 {@link module:chat-fragment} 组件。
*
* @module
*/
const uniImCo = uniCloud.importObject("uni-im-co", {
customUI: true
})
import uniIm from '@/uni_modules/uni-im/sdk/index.js'
import ChatFragment from './cmp/chat-fragment'
export default {
components: {
ChatFragment,
},
emits: ['to-chat'],
data() {
return {
loading: true,
count: 0,
keyword: '',
msgList: [],
hasMore: true,
skip: Number.MAX_SAFE_INTEGER,
conversation_id: '',
autoScrollToEl: '',
// 当前会话对象
conversation: {},
// 聊天记录片段的入口消息
fragment: null,
};
},
computed: {
...uniIm.mapState(['isWidescreen']),
navTitle() {
let title = this.conversation.title
if (this.conversation.group_id) {
title += `(${Object.keys(this.conversation.group_member).length})`;
}
return title
}
},
async onLoad(param) {
// 调用load方法,因为pc宽屏时本页面是以组件形式展示,如 $refs.chatFiltered.load(conversation_id)
await this.load(param);
},
methods: {
async load({ keyword, count, conversation_id }) {
// 根据入口参数进行初始化
this.loading = true
this.count = count
this.keyword = keyword
this.msgList = []
this.hasMore = true
this.skip = Number.MAX_SAFE_INTEGER
this.conversation_id = conversation_id
this.conversation = await uniIm.conversation.get(conversation_id)
this.autoScrollToEl = ''
this.fragment = null
// 加载第一批匹配的聊天记录
this.loadData(() => {
// 自动滚动到底
this.autoScrollToEl = 'bottom-el'
})
},
async loadData(afterLoaded) {
this.loading = true
let result = await uniImCo.getFilteredMessageOfConversation({
keyword: this.keyword,
skip: this.skip,
conversation_id: this.conversation_id,
})
this.msgList.unshift(...result.data.reverse())
if (this.count < this.msgList.length) {
// 计数以传入的 count 为准,除非实际查询到的更多
this.count = this.msgList.length
}
this.hasMore = result.hasMore
this.skip = result.skip
this.loading = false
this.$nextTick(afterLoaded)
},
onScrollToUpper(evt) {
if (this.loading) return
if (!this.hasMore) return
let elId = 'bottom-el'
if (this.msgList.length > 0) {
elId = 'msg-' + this.msgList[0]._id
}
this.autoScrollToEl = ''
this.loadData(() => {
this.autoScrollToEl = elId
})
},
onEnterConversation(conversation_id) {
this.$emit('to-chat', { conversation_id })
},
onOpenFragment(msg) {
this.fragment = msg
},
onCloseFragment() {
this.fragment = null
},
toFriendlyTime(msg) {
return uniIm.utils.toFriendlyTime(msg.create_time || msg.client_create_time)
}
}
}
</script>
<style lang="scss" scoped>
@import "@/uni_modules/uni-im/static/flex.scss";
.page {
flex: 1;
height: 100%;
background-color: #efefef;
}
/* #ifdef H5 */
.pc {
// .pc内的元素只有pc端打开才显示,样式在index页面
display: none;
}
/* #endif */
.head {
flex-direction: row;
justify-content: space-between;
height: 30px;
line-height: 30px;
padding: 0px 15px;
font-size: 12px;
border-bottom: 1px solid #ddd;
}
.hint {
color: #999;
}
.enter-chat {
/* #ifdef H5 */
cursor: pointer;
/* #endif */
flex-direction: row;
padding: 0 5px;
}
/* #ifdef H5 */
.enter-chat:hover {
background-color: #ddd;
}
/* #endif */
.message-list {
height: calc(100% - 30px);
}
.uni-im-msg ::v-deep .msg-content {
width: calc(95% - 40px);
}
.float-info {
align-items: flex-end;
position: absolute;
top: 0;
right: 0px;
font-size: 12px;
color: #999;
padding: 10px;
}
.enter-fragment {
/* #ifdef H5 */
cursor: pointer;
/* #endif */
color: #576b95;
}
/* #ifdef H5 */
.enter-fragment:hover {
color: #7c8cae;
}
.uni-im-msg:hover .enter-fragment {
display: block;
}
/* #endif */
.chat-fragment {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: white;
}
</style>
......@@ -858,7 +858,7 @@
name,
size
} = tempFile;
const {fileType} = tempFile
let {fileType} = tempFile
if (!['image', 'video'].includes(fileType)) {
fileType = 'file'
}
......
此差异已折叠。
<template>
<view class="chat-fragment">
<view class="head">
<uni-icons class="btn-back" @click="onBack" type="arrow-left" size="20"></uni-icons>
</view>
<scroll-view
class="message-list"
scroll-y
:scroll-into-view="autoScrollToEl"
@scrolltoupper="onScrollToUpper"
@scrolltolower="onScrollToLower"
>
<uni-im-msg
v-for="(msg, index) in msgList"
:key="msg._id"
:id="`msg-${msg._id}`"
:msg="msg"
:equalPrevTime="equalPrevTime(index)"
no-jump
:class="{highlight:msg.highlight}"
@loadMore="cb => cb()"
/>
</scroll-view>
</view>
</template>
<script>
/**
* chat-fragment 组件,渲染会话中一个片段的消息列表,用于显示某条消息搜索结果的上下文列表。
*
* @module
*/
const uniImCo = uniCloud.importObject("uni-im-co", {
customUI: true
})
import uniIm from '@/uni_modules/uni-im/sdk/index.js';
export default {
emits: ['close'],
props: {
entry: {
type: Object
}
},
data() {
// 因为要修改 msg 对象的属性值,所以 clone 一下,以切断响应性,避免干扰原数据
let { ...cloneEntry } = this.entry
cloneEntry.highlight = true
return {
msgList: [cloneEntry],
hasMoreBackward: true,
skipBackward: this.entry.create_time,
hasMoreForward: true,
skipForward: this.entry.create_time,
autoScrollToEl: '',
};
},
mounted() {
this.loadDataForward(() => {
this.loadDataBackward(() => {
this.autoScrollToEl = 'msg-' + this.entry._id
}, 15)
}, 15)
},
methods: {
async loadDataForward(afterLoaded, limit = 30) {
this.loading = true
let result = await uniImCo.getFragmentMessageOfConversation({
conversation_id: this.entry.conversation_id,
skip: this.skipForward,
limit,
forward: true,
})
this.msgList.push(...result.data)
this.hasMoreForward = result.hasMore
this.skipForward = result.skip
this.loading = false
this.$nextTick(afterLoaded)
},
async loadDataBackward(afterLoaded, limit = 30) {
this.loading = true
let result = await uniImCo.getFragmentMessageOfConversation({
conversation_id: this.entry.conversation_id,
skip: this.skipBackward,
limit,
forward: false,
})
this.msgList.unshift(...result.data.reverse())
this.hasMoreBackward = result.hasMore
this.skipBackward = result.skip
this.loading = false
this.$nextTick(afterLoaded)
},
onScrollToUpper(evt) {
if (this.loading) return
if (!this.hasMoreBackward) return
let elId = 'msg-' + this.msgList[0]._id
this.autoScrollToEl = ''
this.loadDataBackward(() => {
this.autoScrollToEl = elId
})
},
onScrollToLower(evt) {
if (this.loading) return
if (!this.hasMoreForward) return
this.loadDataForward(() => {})
},
onBack() {
this.$emit('close')
},
equalPrevTime(index) {
if (index === 0) {
return false
} else if (index == this.msgList.length - 1) {
return false
} else {
const getFriendlyTime = (msg) => {
return uniIm.utils.toFriendlyTime(msg.create_time || msg.client_create_time)
}
return getFriendlyTime(this.msgList[index]) == getFriendlyTime(this.msgList[index - 1])
}
},
}
}
</script>
<style>
@import "@/uni_modules/uni-im/static/flex.scss";
.chat-fragment {
padding: 5px;
background-color: #efefef;
}
.message-list {
height: calc(100% - 30px);
}
.head {
flex-direction: row;
border-bottom: 1px solid #ddd;
}
.btn-back {
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.highlight {
background-color: #f9f3de;
}
</style>
<template>
<view class="container">
<uni-list :border="false" class="list">
<uni-im-info-card
:avatarUrl="friend_info.avatar_file ? friend_info.avatar_file.url:'/uni_modules/uni-im/static/avatarUrl.png'"
:title="friend_info.nickname"
:note="friend_info.nickname != friend_info.email ? friend_info.email : ''"
/>
<uni-list-item
title="消息免打扰"
:switch-checked="conversation.mute"
:show-switch="true"
@switchChange="changeConversationMute"
/>
<!-- #ifdef H5 -->
<!-- 发送名片消息(仅内部人员可用) -->
<uni-list-item
v-if="uniIDHasRole('staff')"
:link="true"
title="发送他(她)的名片"
@click="sendNameCard"
/>
<!-- #endif -->
<!-- 选择某个用户创建群聊(仅dcloud员工可用) -->
<uni-list-item
v-if="uniIDHasRole('staff') && friend_uid != currentUid"
:link="true"
title="选此用户创建群聊"
@click="createGroup"
/>
<template v-for="item in UserinfoMenu" :key="item.component.name">
<component :is="item.component" :conversation="conversation" cementing="UserinfoMenu" />
</template>
</uni-list>
<button
v-if="isFriend"
class="btn"
plain
type="warn"
@click="deteleFriend"
>
删除好友
</button>
<!-- #ifdef H5 -->
<uni-im-share-msg
ref="share-msg"
no-msg-list
no-comment
/>
<!-- #endif -->
</view>
</template>
<script>
const db = uniCloud.database();
import uniIm from '@/uni_modules/uni-im/sdk/index.js';
import { ref,markRaw } from "vue"
export default {
data() {
// 调用扩展点,扩展程序可以在消息输入框新增一个工具类的项
let UserinfoMenu = uniIm.extensions
.invokeExts("userinfo-menu-extra",)
.filter((result) => result && result.component)
.map((result) => {
return {
component: markRaw(result.component),
props: result.props
};
});
return {
UserinfoMenu,
conversation: {},
friend_uid: '',
friend_info: {
username: '',
nickname: '',
avatar_file: {
url: ''
}
}
}
},
computed: {
...uniIm.mapState(['isWidescreen']),
isFriend() {
let friendList = uniIm.friend.get()
return friendList.find(i => i._id == this.friend_uid)
},
currentUid() {
return uniCloud.getCurrentUserInfo().uid
}
},
async onLoad(options) {
this.load(options)
},
methods: {
async load(options) {
console.log('options',options);
let conversation_id = options.conversation_id || options.id
// 如果只传了user_id,需要先获取conversation_id
if(!conversation_id){
if(!options.user_id){
console.error('参数错误')
return uni.showToast({
title: '参数错误',
icon: 'none'
});
}
conversation_id = await uniIm.utils.getConversationId(options.user_id)
console.log('conversation_id',conversation_id);
}
let conversation = await uniIm.conversation.get(conversation_id)
this.conversation = conversation
this.friend_uid = conversation.friend_uid
let field = '_id,nickname,avatar_file'
if (this.uniIDHasRole('staff')) {
field += ',email'
}
let res = await db.collection('uni-id-users')
.doc(this.friend_uid)
.field(field)
.get()
// console.log("res: ",res);
this.friend_info = res.result.data[0]
},
changeConversationMute() {
console.log('changeConversationMute',this.conversation)
this.conversation.changeMute()
},
async deteleFriend() {
uni.showModal({
title: '确认要删除好友吗',
content: '此操作不可撤销',
showCancel: true,
cancelText: '取消',
confirmText: '确认',
complete: async (e) => {
if (e.confirm) {
uni.showLoading({
mask: true
});
try {
await db.collection('uni-im-friend').where({
friend_uid: this.friend_uid,
user_id: uniCloud.getCurrentUserInfo().uid
}).remove()
// 收到push消息后store会自动,将此用户从列表中移除
uni.navigateBack({ delta: 2 })
} catch (e) {
uni.showModal({
content: JSON.stringify(e.message),
showCancel: false
});
}
uni.hideLoading()
}
}
});
},
async createGroup(){
console.log('createGroup')
const user_ids = [this.friend_uid]
const uniImCo = uniCloud.importObject("uni-im-co")
let res = await uniImCo.chooseUserIntoGroup({
user_ids
})
uni.$emit('uni-im-toChat','group_'+res.data.group_id)
},
// #ifdef H5
async sendNameCard() {
let msg = {
type: 'userinfo-card',
body: {
user_id: this.conversation.friend_uid,
name: this.conversation.title,
},
from_uid: uniCloud.getCurrentUserInfo().uid,
create_time: Date.now(),
}
this.$refs['share-msg'].open([msg], false)
}
// #endif
}
}
</script>
<style lang="scss" scoped>
@import "@/uni_modules/uni-im/static/flex.scss";
.container {
width: 750rpx;
height: 100vh;
align-items: center;
background-color: #fff;
}
.list {
width: 750rpx;
border-bottom: 1px solid #ececec;
}
/* #ifdef H5 */
.list ::v-deep .info-card {
.title, .note {
cursor: text;
user-select: text;
}
}
.list ::v-deep .uni-list-item + .uni-list-item{
cursor: pointer;
}
/* #endif */
.btn {
margin-top: 15px;
width: 600rpx;
/* height: 45px; */
text-align: center;
line-height: 45px;
border-radius: 20rpx;
}
</style>
\ No newline at end of file
<template>
<view v-if="url" class="video-box" :class="{'is-float-mode':mode == 'float'}">
<view class="mask" v-if="mode == 'float'"></view>
<video @click="showCloseBtnFn" :src="url" :autoplay="true" :page-gesture="true" :show-mute-btn="true" :show-fullscreen-btn="mode == 'float'" class="video"></video>
<uni-icons v-if="showCloseBtn" @click="close" size="30px" color="#FFFFFF" type="closeempty" class="close-icon"></uni-icons>
</view>
</template>
<script>
import uniIm from '@/uni_modules/uni-im/sdk/index.js';
export default {
data() {
return {
url:"",
showCloseBtn:true,
// 全屏模式和小窗模式,fullscreen为全屏模式,float为小窗模式
mode: 'fullscreen',
};
},
onLoad({url}) {
// console.log({url});
this.url = url
setTimeout(()=> {
this.showCloseBtn = false
}, 1000);
},
mounted(){
// console.log('mounted');
uni.$on('uni-im-playVideo',(url)=>{
this.mode = 'float'
this.url = url
this.showCloseBtn = true
})
// 监听esc按键,关闭视频
// #ifdef H5
uniIm.utils.appEvent.onKeyDown(evt => this.onDownEscapeKey, {
order: 1000,
match: {
key: 'Escape',
altKey: false,
ctrlKey: false,
shiftKey: false,
}
})
// #endif
},
beforeDestroy(){
// #ifdef H5
uniIm.utils.appEvent.offKeyDown(this.onDownEscapeKey)
// #endif
},
methods:{
onDownEscapeKey() {
if (this.url.length) {
this.close()
}
return true
},
close(){
if(this.mode == 'fullscreen'){
uni.navigateBack()
}else{
this.url = ''
}
},
showCloseBtnFn(){
// console.log('showCloseBtnFn');
this.showCloseBtn = true
if(this.mode == 'fullscreen'){
setTimeout(()=> {
this.showCloseBtn = false
}, 5000);
}
}
}
}
</script>
<style lang="scss" scoped>
@import "@/uni_modules/uni-im/static/flex.scss";
page {
height: 100%;
}
.video-box,.video{
width: 100vw;
height: 100%;
}
.close-icon{
position: absolute;
top: 80rpx;
left: 30rpx;
z-index: 10;
text-shadow: 0 0 15px black;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.is-float-mode,
.is-float-mode .video{
position: fixed;
top: 10vh;
left: calc(10vw + 250px);
width: calc(80vw - 220px) !important;
height: 80vh !important;
z-index: 9;
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
</style>
<template>
<view class="code-view">
<!-- 默认不启用代码浏览模块,如有需要请关闭注释 -->
<uni-im-code-view :msg="msg" :showFullBtn="false"></uni-im-code-view>
</view>
</template>
<script>
import uniImCodeView from '@/uni_modules/uni-im/components/uni-im-msg/types/code.vue'
export default {
components: {
uniImCodeView
},
data() {
return {
msg: {
type: "code",
body: ""
}
}
},
onLoad({
code
}) {
console.log(code)
this.msg.body = JSON.parse(decodeURIComponent(code));
},
methods: {}
}
</script>
<style lang="scss">
@import "@/uni_modules/uni-im/static/flex.scss";
.text-box,
.code-view {
width: 750rpx;
height: 100vh;
}
</style>
\ No newline at end of file
此差异已折叠。
此差异已折叠。
此差异已折叠。
<template>
<view>
<uni-search-bar placeholder="搜索群号/群名称" :radius="100" bgColor="#eeeeee" v-model="keyword"
@cancel="doClear"
@clear="doClear"
></uni-search-bar>
<view class="uni-list">
<uni-im-info-card v-for="(item,index) in groupList" :key="index"
@click="toChat(item.group_info._id)" link
:title="item.group_info.name"
:avatar="item.group_info.avatar_file&&item.group_info.avatar_file.url ? item.group_info.avatar_file.url : '/uni_modules/uni-im/static/avatarUrl.png'">
</uni-im-info-card>
<uni-im-load-state :status="groupHasMore?'loading':'noMore'"></uni-im-load-state>
</view>
</view>
</template>
<script>
import uniIm from '@/uni_modules/uni-im/sdk/index.js';
export default {
data() {
return {
keyword: '',
groupData:false
}
},
computed: {
//是否为pc宽屏(width>960px)
isWidescreen(){
return uniIm.isWidescreen
},
groupList() {
let groupList = uniIm.group.get()
if(this.keyword){
return groupList.filter(item=>{
return item.group_info.name.includes(this.keyword) || item.group_info._id.includes(this.keyword)
})
}else{
return groupList
}
},
groupHasMore(){
return uniIm.group.hasMore
}
},
async onLoad(options) {
this.setParam(options)
},
methods: {
setParam(param = {}){
if(param.group_id){
this.keyword = param.group_id
}
},
doClear(){
this.keyword = ''
},
toChat(group_id) {
let conversation_id = 'group_' + group_id
uniIm.toChat({conversation_id})
}
}
}
</script>
<style lang="scss" scoped>
@import "@/uni_modules/uni-im/static/flex.scss";
/* #ifdef H5 */
@media screen and (min-device-width:960px){
.uni-list {
height: calc(100vh - 185px);
overflow: auto;
}
}
/* #endif */
</style>
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
<template>
<view>
<unicloud-db ref="udb" @load="handleLoad" v-slot:default="{ data, loading, pagination, error, options }"
collection="uni-id-users" field="_id,nickname,avatar_file" :where="udbWhere">
<view v-if="error" class="error">
<text>{{ error.message }}</text>
</view>
<uni-list v-else>
<uni-list-chat v-for="(item, index) in data" :key="item._id" link
<uni-im-info-card v-for="(item, index) in data" :key="item._id" link
:title="item.nickname"
:avatar="item.avatar_file ? item.avatar_file.url : '/uni_modules/uni-im/static/avatarUrl.png'"
@click="toChat(item._id)"></uni-list-chat>
@click="toChat(item._id)"></uni-im-info-card>
</uni-list>
<uni-im-load-state :status="loading ? 'loading' : loadMoreStatus"></uni-im-load-state>
</unicloud-db>
......@@ -110,4 +111,5 @@ import uniIm from '@/uni_modules/uni-im/sdk/index.js';
};
</script>
<style lang="scss" scoped>
@import "@/uni_modules/uni-im/static/flex.scss";
</style>
\ No newline at end of file
......@@ -17,7 +17,6 @@ uni-im是云端一体的、全平台的、免费的、开源即时通讯系统
## 特点优势
- 性价比高;前后端代码均免费开源,相比竞品使用uni-im仅需花费极少的托管在uniCloud(serverless服务器)产生的费用[详情查看](#cost)
- 全端可用
- App端支持nvue,更好的长列表性能。list组件性能优势[详情参考](https://uniapp.dcloud.net.cn/component/list.html)
- 中心化响应式数据管理,切换会话无需重新加载数据,更流畅的体验
- App端聚合多个手机厂商推送通道,app不在线也可以收到消息
......
......@@ -360,7 +360,7 @@ export default class Message {
//重新拉取 群成员
await uniIm.group.loadMember(_currentConversation.group_id)
// 获取群公告
_currentConversation.unreadGroupNotification = _currentConversation.group_info.notification
_currentConversation.has_unread_group_notification = !!_currentConversation.group_info.notification
}else{
// 将新成员加入到群成员列表
for (let i = 0; i < new_member_list.length; i++) {
......@@ -390,7 +390,7 @@ export default class Message {
const {notification} = data.body.updateData
if(data.action === "update-group-info-notification"){
console.log('收到群公告');
_currentConversation.unreadGroupNotification = notification
_currentConversation.has_unread_group_notification = true
}
}else if(data.action === "set-group-admin"){
const {user_id,addRole,delRole} = data.body
......
......@@ -16,8 +16,4 @@ export default (version)=>{
// console.log('clear history storage success');
}
// #endif
// #ifdef APP
console.log('APP端未实现checkVersion,待补充')
// #endif
}
\ No newline at end of file
此差异已折叠。
此差异已折叠。
......@@ -56,9 +56,9 @@ class Conversation {
}
return all
}, {})
this.tag = Object.keys(tags)
if (this.tag.length == 0) {
this.tag = ['群聊']
this.tags = Object.keys(tags)
if (this.tags.length == 0) {
this.tags = ['群聊']
}
// 3. 初始化字段:群简介、群公告、群头像
......
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
static/pinned.png

2.1 KB | W: | H:

static/pinned.png

2.6 KB | W: | H:

static/pinned.png
static/pinned.png
static/pinned.png
static/pinned.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -777,6 +777,7 @@ async function _processPush({ msgData, isMute, appId }) {
}
}
console.log('state : ============> ' + state);*/
res.data = {} // 不返回给客户端发送结果
} else if (msgData.group_id) {
// console.error('群聊消息*-----------------',pushParam);
// 如果是群聊则调用sendMsgToGroup云方法,递归发送(500个为用户一批)
......