提交 94c35b4c 编写于 作者: DCloud_JSON's avatar DCloud_JSON

删除 多余的文件

上级 c8235760
<template>
<!-- 设置导航栏标题,如与谁对话,群人数为几人等 -->
<!-- #ifndef H5 -->
<page-meta>
<navigation-bar :title="navTitle" background-color="#f8f8f8" front-color="#000000" />
</page-meta>
<!-- #endif -->
<!-- #ifdef H5 -->
<view v-if="isWidescreen">
<text style="position: absolute;z-index: 999;top: -45px;left: 15px;" :selectable="true">{{ navTitle }}</text>
</view>
<page-meta v-else>
<navigation-bar :title="navTitle" background-color="#f8f8f8" front-color="#000000" />
</page-meta>
<!-- #endif -->
<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>
<!-- nvue不支持id选择器,所以需要写两个 -->
<view id="bottom-el" class="bottom-el"></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>
/* #ifndef APP-NVUE */
view {
display: flex;
flex-direction: column;
box-sizing: border-box;
}
page {
background-color: #efefef;
}
/* #endif */
.page {
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
/* #ifndef APP-NVUE */
height: calc(100vh - 45px);
/* #endif */
/* #ifndef APP-NVUE */
background-color: #efefef;
/* #endif */
// border: solid 5px #2faf4c;
}
/* #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 */
.bottom-el {
height: 1px;
}
.message-list {
/* #ifndef APP-NVUE */
height: calc(100% - 30px);
/* #endif */
}
.uni-im-msg ::v-deep .msg-content {
/* #ifndef APP-NVUE */
width: calc(95% - 40px);
/* #endif */
}
.float-info {
align-items: flex-end;
position: absolute;
top: 0;
right: 0px;
font-size: 12px;
color: #999;
padding: 10px;
}
.enter-fragment {
/* #ifdef APP-NVUE */
// 因为nvue不支持 display:none;
width: 0;
height: 0;
/* #endif */
/* #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>
此差异已折叠。
<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>
.chat-fragment {
padding: 5px;
background-color: #efefef;
}
.message-list {
/* #ifndef APP-NVUE */
height: calc(100% - 30px);
/* #endif */
}
.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-list-chat
:avatar="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: ''
}
}
}
},
props: {
conversation_id: {
default () {
return false
}
},
},
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)
},
async mounted() {
if (uniIm.isWidescreen) {
this.load({ conversation_id: this.conversation_id })
}
},
methods: {
async load(options) {
console.log('options',options);
// 如果只传了user_id,需要先获取conversation_id
if(options.user_id && !options.conversation_id){
options.conversation_id = await uniIm.utils.getConversationId(options.user_id)
console.log('options.conversation_id',options.conversation_id);
}
let conversation = await uniIm.conversation.get(options.conversation_id)
this.conversation = conversation
options.user_id = conversation.friend_uid
this.friend_uid = options.user_id
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>
.container {
width: 750rpx;
align-items: center;
/* #ifndef APP-NVUE */
height: 100vh;
/* #endif */
flex: 1;
background-color: #fff;
}
.list {
width: 750rpx;
border-bottom: 1px solid #ececec;
}
/* #ifdef H5 */
.list ::v-deep .uni-list-chat__content-note,
.list ::v-deep .big{
cursor: text;
user-select: text;
}
.list ::v-deep .uni-list-item + .uni-list-item{
cursor: pointer;
}
/* #endif */
.btn {
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">
.video-box,.video{
width: 750rpx;
/* #ifndef APP-NVUE */
width: 100vw;
height: 100vh;
/* #endif */
flex: 1;
}
.close-icon{
position: absolute;
top: 80rpx;
left: 30rpx;
z-index: 9999;
/* #ifndef APP-NVUE */
text-shadow: 0 0 15px black;
cursor: pointer;
/* #endif */
}
.is-float-mode,
.is-float-mode .video{
position: fixed;
top: 10vh;
/* #ifndef APP-NVUE */
left: calc(10vw + 250px);
width: calc(80vw - 220px) !important;
height: 80vh !important;
z-index: 9999;
/* #endif */
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
</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">
.text-box,
.code-view {
flex: 1;
width: 750rpx;
/* #ifndef APP-NVUE */
width: 100vw;
height: 100vh;
/* #endif */
}
</style>
\ No newline at end of file
<template>
<view>
<uni-nav-bar color="#999" :fixed="true" background-color="#ffffff" status-bar left-icon="left" @clickLeft="back">
<view class="segmented-box">
<uni-segmented-control :current="current" :values="items" @clickItem="setActiveIndex" styleType="button" activeColor="#5fc08e" style="width:120px;"></uni-segmented-control>
</view>
</uni-nav-bar>
<view class="content">
<uni-search-bar :placeholder="activeIndex?'搜索群名称/群号':'搜索手机号/用户名/用户昵称'" :radius="100"
class="search-bar"
bgColor="#eeeeee"
v-model="keyword"
@confirm="doSearch"
@focus="searchFocus = true"
@blur="searchFocus = false"
@cancel="doClear"
@clear="doClear"
></uni-search-bar>
<view v-if="activeIndex === 0">
<!-- 搜索 -->
<uni-list v-if="usersList.length">
<uni-list-chat v-for="(item,index) in usersList" :key="index"
:title="item.nickname" :avatarCircle="true"
:avatar="item.avatar_file&&item.avatar_file.url ? item.avatar_file.url : '/uni_modules/uni-im/static/avatarUrl.png'"
>
<text v-if="item.isFriend" class="chat-custom-right grey">已添加</text>
<text v-else @click="addUser(index)" class="chat-custom-right">加为好友</text>
</uni-list-chat>
<!--
v-if="keyword.length"
<template v-else>
<uni-list-item v-for="(tab,index) in tabs" :key="index"
class="tab-item" :title="tab.title"
:to="tab.url" showArrow :border="false"
></uni-list-item>
</template> -->
</uni-list>
<uni-im-load-state v-else :status="loading?'loading':(hasMore?'hasMore':'noMore')"></uni-im-load-state>
</view>
<view v-if="activeIndex === 1">
<uni-list v-if="groupList.length">
<uni-list-chat v-for="(item,index) in groupList" :key="index"
:title="item.name"
:avatar="item.avatar_file && item.avatar_file.url ? item.avatar_file.url : '/uni_modules/uni-im/static/avatarUrl.png'"
>
<text v-if="item.isExist" class="chat-custom-right grey">已加入</text>
<text v-else @click="addUser(index)" class="chat-custom-right">申请加入</text>
</uni-list-chat>
</uni-list>
<uni-im-load-state v-else :status="loading?'loading':(hasMore?'hasMore':'noMore')"></uni-im-load-state>
</view>
</view>
<uni-popup ref="popup" type="dialog">
<uni-popup-dialog mode="input" :title="activeIndex?'申请加群':'申请添加好友'"
placeholder="请输入验证信息" confirmText="发送" message="成功消息"
:duration="2000" :before-close="true" :value="value"
@close="close" @confirm="confirm"
></uni-popup-dialog>
</uni-popup>
</view>
</template>
<script>
import uniIm from '@/uni_modules/uni-im/sdk/index.js';
const db = uniCloud.database();
export default {
data() {
return {
current:0,
loading:true,
hasMore: false,
activeIndex:0,
value:'',
items: ['找人', '找群'],
searchFocus:false,//是否展示搜索列表
keyword:'',
tabs:[
{
'title':'添加手机联系人',
'url':''
},
{
'title':'扫一扫加好友',
'url':''
},
{
'title':'查找陌生人',
'url':''
}
],
usersData: [],
checkIndex:'',//申请加的群index
groupData:[]
}
},
computed: {
usersList() {
let current_uid = uniCloud.getCurrentUserInfo().uid
let friendList = uniIm.friend.dataList
return this.usersData.map(item => {
const isFriend = friendList.find(i=>i._id == item._id)
return {
...item,
isFriend
}
})
},
groupList() {
let groupList = uniIm.group.dataList
console.log('已经加入的groupList',groupList);
console.log('查到的groupList',this.groupData);
// return this.groupData.filter(item=> groupList.find(i=>i._id == item._id))
return this.groupData.map(item => {
const isExist = groupList.find(i=>i._id == item._id)
return {
...item,
isExist
}
})
}
},
onLoad(param) {
this.setParam(param)
},
methods: {
setParam(param){
console.log("param: ",param);
if(param.group_id){
this.current = 1
this.setActiveIndex({currentIndex: 1})
this.keyword = param.group_id
return this.doSearch()
}
this.getUserList()
this.getGroupsList()
},
async getGroupsList(){
const limit = 1000
const skip = this.groupData.length/limit + 1
const res = await db.collection('uni-im-group')
.where(`"user_id" != "${uniCloud.getCurrentUserInfo().uid}"`)
.field('_id,name,avatar_file')
.orderBy('create_date', 'desc')
.limit(limit)
.skip(skip)
.get()
// console.log("uni-im-group: ",res);
if(res.result.data.length){
this.loading = false
this.hasMore = true
this.groupData = res.result.data
}
},
async getUserList(){
try{
let res = await db.collection('uni-id-users')
.field('_id,nickname,avatar_file')
.get()
let data = res.result.data
// console.log("data: ",data);
if(data.length){
this.loading = false
this.hasMore = true
this.usersData = data
}
}catch(e){
console.log(e);
}
},
back() {
uni.navigateBack()
},
async doSearch(e){
console.log("doSearch: ",e,this.keyword);
uni.showLoading({
title: '搜索中'
})
if(this.activeIndex){
let res = await db.collection('uni-im-group')
.where(`
/${this.keyword}/.test(name) ||
"_id" == "${this.keyword}"
`)
.get()
console.log(res);
this.groupData = res.result.data
}else{
const whereString = [
"_id",
"username",
"nickname",
"email",
"mobile"
].map(item => `"${item}" == "${this.keyword}"`).join(' || ')
// console.log('whereString',whereString);
let res = await db.collection('uni-id-users')
.where(whereString)
.field('_id,nickname,avatar_file')
.get()
// tip:用户表数据少,或者已做好优化,可以使用:/${this.keyword}/.test(nickname) 模糊匹配用户昵称
console.log(res);
this.usersData = res.result.data
}
uni.hideLoading()
},
doClear() {
if(this.keyword){
this.keyword = ''
this.usersData = []
this.groupData = []
this.getUserList()
this.getGroupsList()
}
},
setActiveIndex(e) {
// console.log("activeIndex: ",e);
if (this.activeIndex != e.currentIndex) {
this.activeIndex = e.currentIndex;
}
},
addUser(index){
this.checkIndex = index
this.$refs.popup.open()
},
async confirm(value){
// if(!value){
// uni.showToast({
// title: '验证信息不能为空!',
// icon:'none'
// });
// return
// }
// console.log('提供的验证信息',value);
this.value = value
this.$refs.popup.close()
if(this.activeIndex === 0){
//添加好友
const uniImCo = uniCloud.importObject("uni-im-co")
await uniImCo.addFriendInvite({
"to_uid": this.usersList[this.checkIndex]._id,
"message": this.value
}).then((res)=>{
console.log("res: ",res);
uni.showToast({
title: '已申请',
icon: 'none'
});
}).catch((err) => {
uni.showModal({
content: err.message || '请求服务失败',
showCancel: false
})
})
}else{
// console.log('1233123132123132',this.groupData,this.checkIndex);
//申请加群
db.collection('uni-im-group-join').add({
"group_id":this.groupList[this.checkIndex]._id,
"message":this.value
}).then((res) => {
console.log("res: ",res);
uni.showToast({
icon: 'none',
title: '已申请'
})
}).catch((err) => {
uni.showModal({
content: err.message || '请求服务失败',
showCancel: false
})
})
}
setTimeout(()=> {
this.value = ''
}, 100);
},
close(){
console.log('取消了');
this.$refs.popup.close()
}
}
}
</script>
<style lang="scss" scoped>
.segmented-box{
flex: 1;
justify-content: center;
align-items: center;
}
/* #ifdef H5 */
@media screen and (min-device-width:960px){
.content {
height: calc(100vh - 175px);
overflow: auto;
}
::v-deep .uni-navbar__header-btns-left,
::v-deep .uni-navbar__placeholder,
{
display: none;
}
::v-deep .uni-navbar--fixed{
position: relative;
left: 0
}
}
/* #endif */
.content{
/* #ifdef APP-NVUE */
margin-top: 75px;
/* #endif */
}
.tab-item{
border-bottom: #f5f5f5 solid 1px;
height:60px;
justify-content: center;
padding: 0 15rpx;
}
.uni-list-item{
width:720rpx;
}
.background{
background-color: #f5f5f5;
}
.grey{
color: #ddd;
}
.chat-custom-right {
width:70px;
height:30px;
line-height: 30px;
color: #666;
font-size: 12px;
text-align: center;
background-color: #efefef;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
border-radius: 100px;
}
.border{
border: #ddd solid 1px;
}
.state-text{
text-align: center;
font-size: 28rpx;
}
</style>
<template>
<view @click="hiddenDeleteBtn" class="contacts-pages">
<uni-list :border="false" class="menu-list-box" v-if="showMenu">
<uni-list-item v-for="(menu,menuIndex) in menuList" :key="menuIndex" :title="menu.title" link
@click="openPages(menu)" :showBadge="true" :class="{activeMenu:isOpenItemTitle === menu.title}">
<template v-slot:header>
<view class="slot-icon-box green">
<image class="slot-icon" :src="'/uni_modules/uni-im/static/noticeIcon/' + menu.srcName + '.png'"
mode="widthFix"></image>
</view>
</template>
</uni-list-item>
<uni-list-item v-for="(item,index) in noticeList" :key="item.id" :title="item.title" :showBadge="true"
:badgeText="item.badge" :badgeStyle="item.badgeStyle" link @click="openPages(item)" :border="false"
:class="{activeMenu:isOpenItemTitle === item.title}">
<template v-slot:header>
<view class="slot-icon-box blue">
<image class="slot-icon" :src="item.icon" mode="widthFix"></image>
</view>
</template>
</uni-list-item>
</uni-list>
<text class="title">好友列表</text>
<uni-list v-if="showUser" :border="false" class="user-list-box" :scroll-y="true">
<uni-list-item v-for="(item, index) in friendList" :key="item._id" :customStyle="{padding:0}"
class="user-list-item">
<template v-slot:body>
<scroll-view scroll-x="true" @scroll="scroll" :scroll-left="activeIndex === index ?'':scrollLeft[index]"
:show-scrollbar="false" :scroll-with-animation="true" class="user-list-item-scroll-view">
<view class="user-list-item-scroll-view-item" @click="toChat(item)"
@touchstart.passive="activeIndex = index">
<image class="avatar"
:src="item.avatar_file&&item.avatar_file.url ? item.avatar_file.url : '/uni_modules/uni-im/static/avatarUrl.png'"
mode="widthFix"></image>
<text class="username">{{item.nickname}}</text>
<button @click.stop="deleteItem(item,index,$event)" class="delete-btn" size="mini"
type="warn">删除</button>
</view>
</scroll-view>
</template>
</uni-list-item>
<uni-list-item :customStyle="{padding:0,backgroundColor:'#FFFFFF'}">
<template v-slot:body>
<uni-im-load-state :status="friendHasMore?'loading':'noMore'"></uni-im-load-state>
</template>
</uni-list-item>
</uni-list>
</view>
</template>
<script>
import uniIm from '@/uni_modules/uni-im/sdk/index.js';
const db = uniCloud.database()
export default {
emits: ['clickMenu'],
props: {
// pc端时会控制隐藏
showMenu: {
type: Boolean,
default: true
},
// pc端时会控制隐藏
showUser: {
type: Boolean,
default: true
},
},
data() {
return {
isOpenItemTitle: '',
scrollLeft: {
0: 0,
1: 1
},
activeIndex: false,
menuList: [{
title: '加人/加群',
path: './addPeopleGroups/addPeopleGroups',
srcName: 'search'
},
{
title: '群聊列表',
path: './groupList/groupList',
srcName: 'group'
},
{
title: '创建群聊',
path: './createGroup/createGroup',
srcName: 'createGroup'
}
]
}
},
computed: {
//是否为pc宽屏(width>960px)
isWidescreen() {
return uniIm.isWidescreen
},
friendList() {
return uniIm.friend.dataList
},
friendHasMore() {
return uniIm.friend.hasMore
},
noticeList() {
return [{
title: "新朋友",
param: {
type: ['uni-im-friend-invite']
},
icon: "/uni_modules/uni-im/static/noticeIcon/newFriend.png"
},
{
title: "群通知",
param: {
type: ['uni-im-group-join-request']
},
icon: "/uni_modules/uni-im/static/noticeIcon/groupNotice.png"
},
{
title: "系统通知",
param: {
excludeType: ['uni-im-group-join-request', 'uni-im-friend-invite']
},
icon: "/uni_modules/uni-im/static/noticeIcon/notification.png"
}
].reduce((sum, item, index) => {
let {
param: filterNotice,
title
} = item,
param = {
filterNotice,
title
}
// console.log('param----',param);
sum.push({
title: item.title,
badge: this.getUnreadCount(item.param),
badgeStyle: {
backgroundColor: '#d60000'
},
path: "./notification/notification?param=" + encodeURIComponent(JSON.stringify(param)),
param,
icon: item.icon,
id: Date.now() + '-' + index
})
return sum
}, [])
}
},
onPullDownRefresh() {
this.$refs.udb.loadData({
clear: true
}, () => {
uni.stopPullDownRefresh()
})
},
onReachBottom() {
// this.$refs.udb.loadMore()
},
mounted() {},
methods: {
openPages(item) {
this.isOpenItemTitle = item.title
// #ifdef H5
if (this.isWidescreen) {
let componentName = 'uni-im-' + item.path.split('/')[1],
param = item.param
return this.$emit('clickMenu', {
componentName,
param,
title: item.title
})
}
// #endif
// console.log('item',item);
uni.navigateTo({
url: item.path,
fail: (e) => {
console.error(e, item.path);
}
})
},
getUnreadCount(param) {
return uniIm.notification.unreadCount(param)
},
toChat(item) {
uniIm.toChat({user_id: item._id})
},
hiddenDeleteBtn() {
this.activeIndex = false
this.$nextTick(() => {
for (let i in this.scrollLeft) {
this.$set(this.scrollLeft, i, 0)
// this.scrollLeft[i] = 0
}
})
},
async deleteItem(item, index, event) {
uni.showModal({
title: '确认要删除好友吗',
content: '此操作不可撤销',
showCancel: true,
cancelText: '取消',
confirmText: '确认',
complete: async (e) => {
if (e.confirm) {
uni.showLoading({
mask: true
});
await db.collection('uni-im-friend').where({
friend_uid: item._id,
user_id: uniCloud.getCurrentUserInfo().uid
}).remove()
uni.hideLoading()
// 收到push消息后会自动,将此用户从列表中移除
}
}
});
this.hiddenDeleteBtn()
event.stopPropagation()
event.preventDefault()
},
scroll(e) {
// console.log(this.inMove);
this.$set(this.scrollLeft, this.activeIndex, e.detail.scrollLeft)
// this.scrollLeft[this.activeIndex] = e.detail.scrollLeft
for (let i in this.scrollLeft) {
if (i != this.activeIndex) {
this.$set(this.scrollLeft, i, 0)
// this.scrollLeft[i] = 0
}
}
},
handleItemClick(id) {
uni.navigateTo({
url: './detail?id=' + id
})
},
fabClick() {
// 打开新增页面
uni.navigateTo({
url: './add',
events: {
// 监听新增数据成功后, 刷新当前页面数据
refreshData: () => {
this.$refs.udb.loadData({
clear: true
})
}
}
})
}
}
}
</script>
<style lang="scss" scoped>
.contacts-pages {
flex: 1;
position: relative;
}
/* #ifdef H5 */
@media screen and (min-device-width:960px) {
.contacts-pages {
height: 100%;
}
.user-list-box {
overflow: auto;
}
}
/* #endif */
.title {
padding: 8px;
font-size: 14px;
}
.user-list-box {
flex: 1;
}
.user-list-item {
padding: 0;
}
.user-list-item-scroll-view {
width: 750rpx;
background-color: #ffffff;
}
.user-list-item-scroll-view-item {
width: 880rpx;
position: relative;
height: 60px;
align-items: center;
padding: 8px 15px;
flex-direction: row;
border-bottom: 1px solid #f0f0f0;
}
.avatar {
background-color: #fefefe;
width: 40px;
height: 40px;
border-radius: 5px;
}
.username {
line-height: 30px;
margin-left: 30rpx;
font-size: 16px;
}
.delete-btn {
border-radius: 0;
position: absolute;
right: 0;
top: 0;
height: 60px;
line-height: 60px;
width: 130rpx;
font-size: 26rpx;
padding: 0;
}
.slot-icon-box {
width: 45px;
height: 45px;
align-items: center;
justify-content: center;
border-radius: 10rpx;
margin-right: 20rpx;
}
.slot-icon {
width: 25px;
height: 25px;
}
.warn {
background-color: #FA9E3B;
}
.green {
background-color: #08C060;
}
.blue {
background-color: #5DBAFF;
}
@media screen and (min-device-width:960px) {
.activeMenu {
background-color: #f5f5f5 !important;
}
}
</style>
\ No newline at end of file
<template>
<view class="create-group-box" :class="{'join-grpop':group_id}">
<view class="header-box">
<uni-search-bar v-model="keyword" placeholder="搜索" bgColor="#fff" :radius="100"
@cancel="doClear();isFocus = true" @clear="doClear" :isFocus="isFocus" @focus="isFocus = true" @blur="isFocus = false" ></uni-search-bar>
</view>
<uni-list class="content-box">
<uni-list-chat @click="checkboxChange(item._id)" v-for="(item,index) in friendList" :key="index" :avatar-circle="true" :title="item.nickname" :border="false" :clickable="true"
:avatar="item.avatar_file && item.avatar_file.url ? item.avatar_file.url : '/uni_modules/uni-im/static/avatarUrl.png'">
<template v-slot:left>
<view class="checkbox">
<uni-icons type="checkmarkempty" color="#007aff" v-if="checkFriendIds.includes(item._id)"></uni-icons>
</view>
</template>
</uni-list-chat>
<uni-im-load-state :status="loading?'loading':(hasMore?'hasMore':'noMore')"
:contentText='{"contentnomore": friendList.length?"没有更多好友":"没有可以选择的好友"}'></uni-im-load-state>
<uni-list-item style="height: 60px;" :border="false">
<!-- 占位,用于此元素上方显示 操作按钮 -->
</uni-list-item>
</uni-list>
<view class="foot-box">
<!-- 创建新群可以不选择好友直接创建,邀请好友进群必须选择好友 -->
<button :disabled="group_id? !checkFriendIds.length : false " class="btn" type="primary"
@click="createGroup">{{btnText}}{{checkFriendNum}}</button>
</view>
</view>
</template>
<script>
import uniIm from '@/uni_modules/uni-im/sdk/index.js';
const db = uniCloud.database();
export default {
data() {
return {
loading: true,
hasMore: false,
keyword: '',
checkFriendIds: [],
friendData: [],
groupMemberUid: [], //选人进群时,已经在群里的人的id
group_id: false,
isFocus: false
}
},
computed: {
friendList() {
return this.friendData.filter(item => {
//转小写筛选
return !this.groupMemberUid.includes(item._id)
&&
(this.keyword == '' || item.nickname.toLowerCase().includes(this.keyword.toLowerCase()))
})
},
checkFriendNum() {
return this.checkFriendIds.length > 0 ? '(' + this.checkFriendIds.length + ')' : ''
},
btnText() {
return this.group_id ? '立即邀请' : '立即创建'
},
checkFriendsWidth() {
return this.checkFriendIds.length > 6 ? '100%' : this.checkFriendIds.length * 80 + 'px'
},
// checkFriendsSearchWidth() {
// return this.checkFriendIds.length > 6 ? '360' : 720 - (this.checkFriendIds.length * 60)
// },
translateXWidth() {
return this.checkFriendIds.length > 6 ? this.checkFriendIds.length * 65 : '60'
},
checkFriendImg() {
return this.friendList.reduce((sum, current) => {
if (this.checkFriendIds.includes(current._id)) {
sum.push(current)
}
return sum
}, []).map(item => item.avatar_file)
}
},
async onLoad(options) {
this.setParam(options)
},
methods: {
async setParam(options = {}) {
console.log("group_id", options);
if (options.group_id) {
this.group_id = options.group_id
uni.setNavigationBarTitle({
title: '邀请新成员'
})
//查本群,成员,
let res = await db.collection('uni-im-group-member').where({
group_id: options.group_id
})
.get()
console.log("res:查本群,成员 ", res);
this.groupMemberUid = res.result.data.map(item => item.user_id)
console.log('this.groupMemberUid', this.groupMemberUid);
}
this.getFriendsData()
},
async getFriendsData() {
let whereString = {}
if (this.keyword) {
whereString = `
"_id" == "${this.keyword}" ||
"username" == "${this.keyword}" ||
"nickname" == "${this.keyword}" ||
"email" == "${this.keyword}" ||
"mobile" == "${this.keyword}"
`
}
let res = await db.collection(
db.collection('uni-im-friend').where('"user_id" == $cloudEnv_uid').field('friend_uid,mark,class_name')
.getTemp(),
db.collection('uni-id-users').where(whereString).field('_id,nickname,avatar_file').getTemp()
).get()
// console.log(res);
let data = res.result.data
data.forEach((item, index) => {
if (item.friend_uid[0]) {
data[index] = item.friend_uid[0]
} else {
delete data[index]
}
})
this.friendData = data
this.loading = false
this.hasMore = this.friendList.length != 0
},
doClear() {
this.keyword = ''
this.getFriendsData()
},
checkboxChange(user_id) {
console.log("checkboxChange-value",user_id);
this.checkFriendIds = this.checkFriendIds.includes(user_id) ? this.checkFriendIds.filter(item => item != user_id) : this.checkFriendIds.concat(user_id)
console.log("checkboxChange",this.checkFriendIds);
},
async createGroup() {
// console.log('创建', this.checkFriendIds.length)
const uniImCo = uniCloud.importObject("uni-im-co")
let res = await uniImCo.chooseUserIntoGroup({
user_ids: this.checkFriendIds,
group_id: this.group_id
})
this.checkFriendIds = []
// console.log('createGroup',res);
if (this.group_id) {
uni.navigateBack({
delta: 1
})
} else {
// #ifdef H5
if (uniIm.isWidescreen) {
uni.$emit('uni-im-toChat', 'group_' + res.data.group_id)
} else {
uni.redirectTo({
url: '/uni_modules/uni-im/pages/chat/chat?conversation_id=' + 'group_' + res.data.group_id,
animationDuration: 300,
fail: (e) => {
console.log(e);
}
})
}
// #endif
// #ifndef H5
uni.redirectTo({
url: '/uni_modules/uni-im/pages/chat/chat?conversation_id=' + 'group_' + res.data.group_id,
animationDuration: 300,
complete: (e) => {
console.log(e);
}
})
// #endif
}
}
}
}
</script>
<style lang="scss" scoped>
.create-group-box {
position: relative;
background-color: #F9F9F9;
flex: 1;
}
.header-box {
flex-direction: column;
background-color: #F9F9F9;
}
.content-box {
/* #ifndef APP-NVUE */
width: 100%;
overflow: auto;
/* #endif */
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
}
.label-box {
flex-direction: row;
align-items: center;
background-color: #FFF;
padding: 5px 0;
}
.checkbox {
margin: 12px 10px 0 0;
border: 1px solid #DDD;
width: 20px;
height: 20px;
justify-content: center;
align-items: center;
border-radius: 3px;
}
.foot-box {
position: fixed;
bottom: 0;
/* #ifdef APP-NVUE */
width: 750rpx;
/* #endif */
// 注意:此页面可能显示在pc端所以不能用750rpx,而用100%
/* #ifndef APP-NVUE */
width: 100%;
/* #endif */
height: 60px;
justify-content: center;
align-items: center;
}
/* #ifdef H5 */
@media screen and (min-device-width:960px){
.create-group-box {
width: 100%;
margin: 10px auto;
}
.join-grpop {
width: 800px;
}
.content-box {
height: calc(95vh - 200px);
}
.content-box ::v-deep .uni-list--border {
display: none;
}
.content-box ::v-deep .uni-list-chat {
width: 100%;
}
.content-box ::v-deep .uni-list-chat__container {
padding-left: 10px;
}
.foot-box {
position: absolute;
}
}
/* #endif */
.foot-box .btn {
width: 300px;
}
</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>
<uni-list class="uni-list">
<uni-list-chat 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-list-chat>
</uni-list>
<uni-im-load-state :status="groupHasMore?'loading':'noMore'"></uni-im-load-state>
</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>
/* #ifdef H5 */
@media screen and (min-device-width:960px){
.uni-list {
height: calc(100vh - 185px);
overflow: auto;
}
}
/* #endif */
</style>
<template>
<view class="notification-box">
<text class="tips" v-if="tips">{{tips}}</text>
<uni-list :border="false">
<template v-if="notificationDatas && notificationDatas.length">
<uni-list-chat v-for="(item,index) in notificationDatas" :key="item.id" :avatarCircle="true"
:clickable="true" :badge-text="item.is_read?'':'dot'" badgePositon="left"
:title="item.payload.title||item.title" :note="item.payload.content||item.content||'无'"
:avatar="item.payload.avatar_file&&item.payload.avatar_file.url ? item.payload.avatar_file.url : '/uni_modules/uni-im/static/noticeIcon/notification2.png'"
@click.native="clickHandle(index,item)" direction="column" :time="friendlyTime(item.create_time)">
<view class="handle-box">
<template v-if="item.payload.state">
<text class="handle done">
{{'已'+(item.payload.state == 'confirm'?item.payload.confirmText:item.payload.cancelText)}}
</text>
</template>
<template v-else>
<text class="handle" @click.stop="doAction(index,0)"
v-if="item.payload.cancelText">{{item.payload.cancelText}}</text>
<text class="handle" @click.stop="doAction(index,1)"
v-if="item.payload.confirmText">{{item.payload.confirmText}}</text>
<uni-icons v-if="!item.payload.cancelText && !item.payload.confirmText && item.path" type="right"
color="#cccccc"></uni-icons>
</template>
</view>
</uni-list-chat>
</template>
<uni-list-item v-else class="load-more">
<template v-slot:body>
<uni-im-load-state :contentText="contentText" class="tip" :status="hasMore?'loading':'noMore'"></uni-im-load-state>
</template>
</uni-list-item>
</uni-list>
</view>
</template>
<script>
import uniIm from '@/uni_modules/uni-im/sdk/index.js';
import action from './action.js';
const db = uniCloud.database();
export default {
data() {
return {
contentText: {
"contentrefresh": "加载中...",
"contentnomore": "- 暂无相关数据 -"
},
filterNotice: {},
tips: "",
hasMore: true
// notificationDatas:[]
}
},
async onLoad({
param
}) {
// console.log(param,decodeURIComponent(param))
param = JSON.parse(decodeURIComponent(param))
// console.log(param)
this.setParam(param)
},
computed: {
//是否为pc宽屏(width>960px)
isWidescreen() {
return uniIm.isWidescreen
},
notificationDatas() {
let notificationDatas = uniIm.notification.get(this.filterNotice)
if (notificationDatas.length == 0) {
setTimeout(() => {
this.hasMore = false
}, 100);
}
return notificationDatas
}
},
mounted() {
this.hasMore = uniIm.notification.hasMore
},
methods: {
setParam({
filterNotice,
title
}) {
if (typeof filterNotice == 'string') {
filterNotice = JSON.parse(decodeURIComponent(filterNotice))
}
this.filterNotice = filterNotice
console.log('filterNotice', filterNotice)
uni.setNavigationBarTitle({
title
})
if (title == '新朋友' && !this.isWidescreen) {
this.tips = '好友请求通知'
}
},
async setItem({
_id
}, param) {
const datas = uniIm.notification.get(this.filterNotice)
for (let i = 0; i < datas.length; i++) {
if (datas[i]._id == _id) {
datas[i] = deepAssign(datas[i], param)
uniIm.notificationDatas = datas
console.log('uniIm.notificationDatas', uniIm.notificationDatas)
break;
}
}
let ares = await db.collection('uni-im-notification')
.where(`"_id" == "${_id}" && "user_id" == $cloudEnv_uid`)
.get()
// console.log(13231,ares);
let res = await db.collection('uni-im-notification')
.where(`"_id" == "${_id}" && "user_id" == $cloudEnv_uid`)
.update(param)
// console.log('res---66666',param,res.result.updated);
/**
*判断对象是否是一个纯粹的对象
*/
function isPlainObject(obj) {
return typeof obj === 'object' && Object.prototype.toString.call(obj) === '[object Object]'
}
/**
*深度合并多个对象的方法
*/
function deepAssign() {
let len = arguments.length,
target = arguments[0]
if (!isPlainObject(target)) {
target = {}
}
for (let i = 1; i < len; i++) {
let source = arguments[i]
if (isPlainObject(source)) {
for (let s in source) {
if (s === '__proto__' || target === source[s]) {
continue
}
if (isPlainObject(source[s])) {
target[s] = deepAssign(target[s], source[s])
} else {
target[s] = source[s]
}
}
}
}
return target
}
},
async clickHandle(index, item) {
// console.log('index',index,item);
//如果未读,设置为已读
if (!item.is_read) {
this.setItem(item, {
is_read: true
})
}
//存在链接就跳转
let path = item.path || item.payload.path
if (path) {
uni.navigateTo({
url: path,
fail: (e) => {
console.error(e);
}
})
}
// let item = this.notificationDatas[index]
// item.data.is_read = true
// this.notificationDatas[index] = Object.assign({},item)
// console.log(this.notificationDatas);
},
doAction(index, type) {
let item = this.notificationDatas[index]
let e = {
subType: item.payload.subType,
confirm: type === 1,
cancel: type === 0,
item
}
action(e, data => {
console.log('doAction', data)
this.setItem(item, {
is_read: true,
payload: {
state: type === 1 ? 'confirm' : 'cancel'
}
})
})
// console.log(index);
},
friendlyTime(timestamp) {
return uniIm.utils.toFriendlyTime(timestamp)
},
handleText(state) {
switch (state) {
case 0:
return '同意'
break;
case 100:
return '已同意'
break;
case -100:
return '已拒绝'
break;
default:
return '其他'
break;
}
}
}
}
</script>
<style lang="scss" scoped>
.notification-box {
/* #ifndef APP-NVUE */
height: 100vh;
// width: 750rpx;
/* #endif */
/* #ifdef APP-NVUE */
flex: 1;
/* #endif */
background-color: #f5f5f5;
}
.tips {
height: 40px;
line-height: 40px;
padding-left: 20rpx;
font-size: 26rpx;
color: #666;
}
.handle-box {
flex-direction: row;
height: 40px;
align-items: center;
}
.handle {
width: 50px;
text-align: center;
height: 25px;
line-height: 25px;
background-color: #efefef;
border-radius: 50px;
font-size: 12px;
margin: 0 5px;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.done {
width: 50px;
background-color: #FFF;
color: #aaa;
/* #ifdef H5 */
cursor: default;
/* #endif */
}
.load-more {
background-color: #f5f5f5 !important;
justify-content: center;
}
.tip {
position: relative;
left: -15px;
width: 750rpx;
/* #ifndef APP-NVUE */
/* pc宽屏时需要使用100vw */
width: 100%;
/* #endif */
}
/* #ifdef MP-WEIXIN */
.load-more ::v-deep .uni-list-item {
background-color: #f5f5f5 !important;
}
/* #endif */
</style>
\ No newline at end of file
<template>
<view class="container">
<view class="qr-code">
<view class="code-info">
<text class="group-name">{{name}}</text>
<text class="group-id" @click="copyGroupID">群号:{{group_id}}</text>
<!--uqrcode 组件来源,插件Sansnn-uQRCode 链接地址:https://ext.dcloud.net.cn/plugin?id=1287 -->
<!-- #ifndef MP-WEIXIN -->
<!-- <uqrcode ref="uqrcode" :start="false" :size="200" canvas-id="qrcode" :value="qrcodeData"></uqrcode> -->
<!-- #endif -->
</view>
<!-- #ifndef APP-NVUE -->
<image class="group-avatar" :src="avatar_file || '/uni_modules/uni-im/static/avatarUrl.png'" mode="">
</image>
<!-- #endif -->
</view>
<!-- #ifdef APP-NVUE -->
<image class="group-avatar" :src="avatar_file || '/uni_modules/uni-im/static/avatarUrl.png'" mode=""></image>
<!-- #endif -->
<!-- <view class="btn-box">
<view class="btn-item" @click="save">
<uni-icons type="arrow-down" size="30"></uni-icons>
<text class="btn-text">保存</text>
</view>
<view class="btn-item" @click="share">
<uni-icons type="paperplane" size="30"></uni-icons>
<text class="btn-text">分享</text>
</view>
</view> -->
</view>
</template>
<script>
import uqrcode from "@/uni_modules/Sansnn-uQRCode/components/uqrcode/uqrcode"
export default {
components: {
uqrcode
},
data() {
return {
group_id: '',
name: '',
avatar_file: ''
}
},
computed: {
qrcodeData() {
let data = {
"type": "uni-im",
"subType": "groupInfo",
"data": {
group_id: this.group_id,
name: this.name,
avatar_file: this.avatar_file
}
}
return JSON.stringify(data)
}
},
onLoad(options) {
// console.log("options: ",options);
this.group_id = options.id
this.name = options.name
this.avatar_file = options.avatar_file
},
onReady(){
setTimeout(()=>{
this.$refs.uqrcode.make({
success: () => {
// console.log('生成成功');
},
fail: err => {
// console.log(err)
}
});
},1000)
},
methods: {
copyGroupID() {
uni.setClipboardData({
data: this.group_id,
success: function() {
console.log('success');
}
});
},
save() {
console.log('保存');
},
share() {
console.log('分享');
}
}
}
</script>
<style lang="scss" scoped>
.container {
/* #ifndef APP-NVUE */
height: 100vh;
/* #endif */
flex: 1;
padding-top: 200rpx;
// justify-content: center;
align-items: center;
background-color: #f5f5f5;
}
.qr-code {
width: 550rpx;
height: 780rpx;
align-items: center;
justify-content: center;
border-radius: 20rpx;
background-color: #fff;
position: relative;
}
.code-info {
align-items: center;
justify-content: center;
}
.group-avatar {
width: 150rpx;
height: 150rpx;
border-radius: 100rpx;
position: absolute;
/* #ifdef APP-NVUE */
top: 150rpx;
/* #endif */
/* #ifndef APP-NVUE */
top: -60rpx;
/* #endif */
}
.group-name {
width: 400rpx;
font-size: 46rpx;
/* #ifdef APP-NVUE */
lines: 1;
/* #endif */
/* #ifndef APP-PLUS */
white-space: nowrap;
overflow: hidden;
/* #endif */
text-overflow: ellipsis;
margin-top: 120rpx;
text-align: center;
}
.group-id {
margin: 40rpx 0;
font-size: 30rpx;
}
.btn-box {
flex-direction: row;
margin-top: 100rpx;
}
.btn-item {
align-items: center;
justify-content: center;
width: 130rpx;
height: 130rpx;
border-radius: 100rpx;
background-color: #fff;
margin: 0 80rpx;
border: 1px solid #eee;
}
.btn-text {
font-size: 28rpx;
}
</style>
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册