nvue-vue

pages/im/group/invite.vue

@@ -1,21 +1,137 @@
 <template>
-    <view class="">
-
+    <view>
+        <button type="default" @click="onInvite">确定</button>
+        <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]" 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" />
+                        <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 class="address">Hash:{{ friendItem.address }}</view> -->
+                        </view>
+                    </view>
+                </u-index-item>
+            </u-checkbox-group>
+        </u-index-list>
     </view>
 </template>
 
 <script>
+    import {
+        getFriendsLetter,
+        inviteGroupUser
+    } from '@/apis/interfaces/im';
+    import * as RongIMLib from '@/uni_modules/RongCloud-IMWrapper/js_sdk/index'
+
     export default {
         data() {
             return {
-                targetId: ''
+                targetId: '',
+                indexs: [],
+                friends: [],
+                checkboxValue: []
+            };
+        },
+        computed: {
+            contact() {
+                return function(targetId) {
+                    return this.$store.getters.contactInfo(targetId)
+                }
             }
         },
         onLoad(e) {
             this.targetId = e.targetId
+            this.getFriendList()
+        },
+        methods: {
+            getFriendList() {
+                getFriendsLetter().then(res => {
+                    this.indexs = res.indexList
+                    this.friends = res.itemArr
+                })
+            },
+            addContact(targetId) {
+                if (!this.checkboxValue.find(item => item == targetId)) {
+                    this.checkboxValue.push(targetId)
+                } else {
+                    const index = this.checkboxValue.findIndex(item => item == targetId)
+                    this.checkboxValue = this.checkboxValue.splice(index, 1)
+                }
+            },
+            onInvite() {
+                inviteGroupUser(this.targetId, this.checkboxValue).then(res => {
+                    uni.navigateBack()
+                }).catch(err => {
+                    uni.showToast({
+                        icon: 'none',
+                        title: err.message
+                    })
+                })
+            }
         }
     }
 </script>
 
-<style>
+<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;
+    }
 </style>