280 lines
9.3 KiB
Vue
280 lines
9.3 KiB
Vue
<template>
|
|
<view class="invite">
|
|
<view class="search u-border-bottom">
|
|
<u--input class="search-input" placeholder="搜索好友" border="none" prefixIcon="search" v-model="searchTxt"
|
|
disabledColor="#Fff" prefixIconStyle="font-size: 22px;color: #909399" @change="onSearch" />
|
|
</view>
|
|
<block v-if="friends.length > 0">
|
|
<u-index-list :index-list="indexs" inactiveColor="#666" activeColor="#34CE98">
|
|
<u-checkbox-group v-if="friends.length > 0" v-model="checkboxValue" placement="column">
|
|
<u-index-item v-for="(item, fkey) in friends" :key="fkey">
|
|
<u-index-anchor :text="indexs[fkey]" v-if="indexs[fkey]" bgColor="#ededed" height="20" size="12"
|
|
color="#666" style="padding:10rpx 30rpx" />
|
|
<view v-for="(friendItem, index) in item" :key="index" class="friend-flex"
|
|
@click="addContact(friendItem.targetId)">
|
|
<u-checkbox :name="friendItem.targetId" shape="circle" activeColor="#34ce98"
|
|
style="margin-right: 20rpx;" :disabled="canSelect(friendItem.targetId)"
|
|
:checked="canSelect(friendItem.targetId)" />
|
|
<u-avatar class="avatar-img" size="40" shape="square"
|
|
:src="contact(friendItem.targetId).portraitUrl" />
|
|
<view class="info">
|
|
<view class="name">{{ contact(friendItem.targetId).name }}</view>
|
|
</view>
|
|
</view>
|
|
</u-index-item>
|
|
</u-checkbox-group>
|
|
</u-index-list>
|
|
<view class="bottom">
|
|
<span class="onInvite" @click="onInvite">完成<span>{{`(${checkboxValue.length})` || ''}}</span></span>
|
|
</view>
|
|
</block>
|
|
<view class="no-lists" v-else>
|
|
<u-image class="cover" radius="4" width="400rpx" height="400rpx"
|
|
:src="searchTxt=== '' ? require('@/static/imgs/no-friend.png') :require('@/static/imgs/no-search.png')"
|
|
:lazy-load="true" />
|
|
<span>{{searchTxt=== ''?'暂无好友列表~':'暂无搜索内容~'}}</span>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getFriendsLetter,
|
|
inviteGroupUser,
|
|
getGroupUsers
|
|
} from '@/apis/interfaces/im';
|
|
import utils from '@/utils/index.js'
|
|
|
|
import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
searchTxt: '',
|
|
targetId: '',
|
|
indexs: [],
|
|
orignalIndexs: [],
|
|
friends: [],
|
|
orignalFriends: [],
|
|
checkboxValue: [],
|
|
selectValue: []
|
|
};
|
|
},
|
|
computed: {
|
|
contact() {
|
|
return function(targetId) {
|
|
return this.$store.getters.contactInfo(targetId)
|
|
}
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
this.targetId = e.targetId
|
|
this.getFriendList()
|
|
},
|
|
methods: {
|
|
onSearch() {
|
|
if (this.searchTxt) {
|
|
this.friends = this.orignalFriends.map((list, index) => {
|
|
const resList = list.filter(item => {
|
|
return item.name.indexOf(this.searchTxt) >= 0
|
|
})
|
|
return resList
|
|
})
|
|
this.indexs = this.orignalIndexs.map((t, i) => {
|
|
if (this.friends[i].length > 0) {
|
|
return t
|
|
}
|
|
})
|
|
} else {
|
|
this.friends = this.orignalFriends
|
|
this.indexs = this.orignalIndexs
|
|
}
|
|
},
|
|
canSelect(targetId) {
|
|
return utils.inArray(targetId, this.selectValue)
|
|
},
|
|
getFriendList() {
|
|
getFriendsLetter().then(res => {
|
|
this.indexs = res.indexList
|
|
this.friends = res.itemArr
|
|
this.orignalFriends = res.itemArr
|
|
this.orignalIndexs = res.indexList
|
|
})
|
|
getGroupUsers(this.targetId).then(res => {
|
|
res.map(res => {
|
|
console.log(res)
|
|
this.checkboxValue.push(String(res.targetId))
|
|
this.selectValue.push(String(res.targetId))
|
|
})
|
|
})
|
|
},
|
|
// 点击名字新增或删除选中数据
|
|
addContact(targetId) {
|
|
const index = this.checkboxValue.findIndex(item => item == targetId)
|
|
if (utils.inArray(targetId, this.selectValue)) {
|
|
|
|
} else {
|
|
if (index === -1) {
|
|
this.checkboxValue.push(targetId)
|
|
} else {
|
|
this.checkboxValue.splice(index, 1)
|
|
}
|
|
}
|
|
|
|
},
|
|
onInvite() {
|
|
console.log(this.checkboxValue,'userIds.....')
|
|
console.log(this.selectValue,'userIds.....')
|
|
// let userIds = []
|
|
// this.checkboxValue.filter(item=>{
|
|
// if(!utils.inArray(item, this.selectValue)){
|
|
// userIds.push(item)
|
|
// }
|
|
// })
|
|
// console.log(userIds)
|
|
inviteGroupUser(this.targetId, this.checkboxValue).then(res => {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
animationType: 'pop-out',
|
|
animationDuration: 200
|
|
});
|
|
uni.$emit('groupInvitedUser')
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: err.message
|
|
})
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 页面空
|
|
.pages-null {
|
|
height: 70vh;
|
|
}
|
|
|
|
// 好友列表
|
|
.friend-flex {
|
|
position: relative;
|
|
padding: 0 $padding 0 $padding;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
|
|
.avatar-img {
|
|
box-shadow: 0 0 20rpx rgba($color: $main-color, $alpha: 0.2);
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
margin-left: $padding;
|
|
border-bottom: solid 1rpx #f9f9f9;
|
|
height: 120rpx;
|
|
line-height: 120rpx;
|
|
|
|
.name {
|
|
font-size: $title-size;
|
|
color: #454545 !important;
|
|
@extend .nowrap;
|
|
}
|
|
|
|
.address {
|
|
color: $text-gray-m;
|
|
font-size: $title-size-m - 3;
|
|
padding-top: 10rpx;
|
|
word-break: break-word;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
width: 600rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-cell {
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
padding: 10px 24rpx;
|
|
overflow: hidden;
|
|
color: #323233;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.invite {
|
|
position: relative;
|
|
padding: 100rpx 0;
|
|
box-sizing: border-box;
|
|
z-index: 0;
|
|
|
|
.bottom {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 120rpx;
|
|
background-color: $window-color;
|
|
z-index: 100;
|
|
color: #fff;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
box-sizing: border-box;
|
|
padding-right: 30rpx;
|
|
padding-bottom: 10rpx;
|
|
|
|
.onInvite {
|
|
background-color: $main-color;
|
|
font-size: $title-size;
|
|
display: inline-block;
|
|
padding: 10rpx 30rpx;
|
|
border-radius: 10rpx;
|
|
|
|
span {
|
|
font-size: $title-size - 2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.search {
|
|
background-color: #fff;
|
|
padding: 30rpx;
|
|
position: fixed;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
top: 0;
|
|
z-index: 100;
|
|
|
|
.search-input {
|
|
padding: 10rpx $padding;
|
|
width: 100%;
|
|
}
|
|
|
|
.searchTxt {}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.no-lists {
|
|
padding-top: $padding * 3;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
font-size: $title-size-m;
|
|
color: $text-gray-m;
|
|
|
|
span {
|
|
padding-top: $padding;
|
|
}
|
|
}
|
|
</style>
|