ZhHealth/pages/im/group/invite.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 => {
                        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() {
                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>