@aochuang/client-sdk 1.0.278

package/components/chat-room-profile/chat-room-profile.vue

@@ -0,0 +1,103 @@
+<template>
+    <div class="sdk-chat-room-profile">
+        <template v-if="loading">
+            <span class="sdk-chat-room-profile__loading">数据加载中...</span>
+        </template>
+        <template v-else-if="roomData">
+            <div class="sdk-chat-room-profile__row">
+                <div class="sdk-chat-room-profile__col">
+                    <span class="sdk-chat-room-profile__name">
+                        <slot name="name" :data="roomData"></slot>
+                    </span>
+                </div>
+                <div class="sdk-chat-room-profile__col" v-if="$slots['head-left']">
+                    <slot name="head-left" :data="roomData"></slot>
+                </div>
+            </div>
+        </template>
+        <template v-else>
+            <div class="sdk-chat-room-profile__exception">未找到群聊数据</div>
+        </template>
+    </div>
+</template>
+<script>
+export default {
+    name: 'SdkChatRoomProfile',
+    props: {
+        id: {
+            type: String,
+            required: true
+        },
+        queryMethod: {
+            type: Function,
+            required: true
+        }
+    },
+    data () {
+        return {
+            loading: false,
+            roomData: null
+        }
+    },
+    watch: {
+        id () {
+            this.refreshData()
+        }
+    },
+    created () {
+        this.refreshData()
+    },
+    methods: {
+        refreshData () {
+            this.loading = true
+            this.queryMethod().then(rs => {
+                this.roomData = rs
+            }).finally(() => {
+                this.loading = false
+            })
+        }
+    }
+}
+</script>
+<style>
+.sdk-chat-room-profile{
+    line-height: 1.5em;
+}
+.sdk-chat-room-profile__loading{
+    min-height: 32px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+.sdk-chat-room-profile__row{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    max-width: 100%;
+    min-height: 32px;
+}
+.sdk-chat-room-profile__row:not(:last-child) {
+    margin-bottom: 3px;
+}
+.sdk-chat-room-profile__col{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-width: 0;
+}
+.sdk-chat-room-profile__col:last-child {
+    min-width: 0;
+}
+.sdk-chat-room-profile__col:not(:first-child){
+    margin-left: 12px;
+}
+.sdk-chat-room-profile__name{
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.sdk-chat-room-profile__exception{
+    color: #999;
+}
+</style>

package/components/chat-room-profile/index.js

@@ -0,0 +1,3 @@
+import ChatRoomProfile from './chat-room-profile.vue'
+
+export default ChatRoomProfile

package/components/contacts-friend-select/contacts-friend-select-skeleton.vue

@@ -0,0 +1,41 @@
+<template>
+    <div clas="sdk-contacts-friend-select-skeleton">
+        <div
+            class="sdk-contacts-friend-select-skeleton__item"
+            v-for="index in 20"
+            :key="index"    
+        >
+            <div class="sdk-contacts-friend-select-skeleton__item-avatar">
+                <ui-skeleton width="32px" height="32px"></ui-skeleton>
+            </div>
+            <div class="sdk-contacts-friend-select-skeleton__item-main">
+                <ui-skeleton width="100%" height="18px"></ui-skeleton>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import UiSkeleton from '@aochuang/common/components/skeleton'
+
+export default {
+    name: 'SdkContactsFriendSelectSkeleton',
+    components: {
+        UiSkeleton
+    }
+}
+</script>
+<style lang="less">
+.sdk-contacts-friend-select-skeleton__item{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 12px;
+}
+.sdk-contacts-friend-select-skeleton__item-avatar{
+    margin-right: 12px;
+}
+.sdk-contacts-friend-select-skeleton__item-main {
+    flex: 1;
+    min-width: 0;
+}
+</style>

package/components/contacts-friend-select/contacts-friend-select.vue

@@ -0,0 +1,204 @@
+<template>
+    <div class="sdk-contacts-friend-select">
+        <sdk-scroll-load-more
+            ref="loadMore"
+            :data="data"
+            :query-method="handleQueryFriendData"
+        >
+            <template slot="loading">
+                <div class="sdk-contacts-friend-select__skeleton">
+                    <contacts-friend-select-skeleton></contacts-friend-select-skeleton>
+                </div>
+            </template>
+            <div 
+                class="sdk-contacts-friend-select__list"
+                v-if="data && data.length"
+            >
+                <div 
+                    class="sdk-contacts-friend-select__item" 
+                    v-for="friend in data" 
+                    :key="friend.id" 
+                    :class="{'is-active': valueMap[friend.id], 'is-disabled': handleRenderDisabled(friend)}"
+                    @click="handleFriendClick(friend)"
+                    @contextmenu="handleFriendItemContext(friend, $event)"
+                >
+                    <div class="sdk-contacts-friend-select__item-main">
+                        <sdk-friend-avatar class="sdk-contacts-friend-select__item-avatar" :src="friend.avatar" :name="friend.nickname"></sdk-friend-avatar>
+                        <span class="sdk-contacts-friend-select__item-name">
+                            <slot name="name" :data="friend">
+                                {{friend.conRemark || friend.nickname}}
+                            </slot>
+                        </span>
+                    </div>
+                    <template v-if="$scopedSlots.addon">
+                        <slot name="addon" :data="friend"></slot>
+                    </template>
+                </div>
+            </div>
+        </sdk-scroll-load-more>
+    </div>
+</template>
+<script>
+import SdkScrollLoadMore from '../../common/scroll-load-more'
+import SdkFriendAvatar from '../../common/friend-avatar'
+import ContactsFriendSelectSkeleton from './contacts-friend-select-skeleton.vue'
+
+export default {
+    name: 'SdkContactsFriendSelect',
+    components: {
+        SdkFriendAvatar,
+        SdkScrollLoadMore,
+        ContactsFriendSelectSkeleton
+    },
+    props: {
+        data: {
+            type: Array
+        },
+        multiple: {
+            type: Boolean,
+            default: false
+        },
+        value: {
+            type: [String, Array]
+        },
+        disabledMethod: { 
+            type: Function
+        },
+        queryMethod: {
+            type: Function
+        }
+    },
+    data () {
+        return {
+            loading: false
+        }
+    },
+    computed: {
+        valueMap () {
+            if (!this.value) {
+                return {}
+            }
+            if (this.multiple) {
+                if (!Array.isArray(this.value)) {
+                    return {}
+                } else {
+                    return this.value.reduce((rs, v) => {
+                        rs[v] = true
+                        return rs
+                    }, {})
+                }
+            } else {
+                return {
+                    [this.value]: true
+                }
+            }
+        }
+    },
+    methods: {
+        handleFriendClick (item) {
+            if (this.disabledMethod && this.disabledMethod({
+                item
+            })) {
+                return
+            }
+            this.$emit('select', {
+                item
+            })
+        },
+        handleFriendItemContext (item, evt) {
+            this.$emit('item-contextmenu', item, evt)
+        },
+        handleQueryFriendData (evt) {
+            if (evt.pageIndex === 0) {
+                this.reloading = true
+            }
+            this.loading = true
+            return this.queryMethod(evt).finally(() => {
+                this.loading = false
+            })
+        },
+        handleRenderDisabled (item) {
+            if (!this.disabledMethod) {
+                return false
+            }
+            return this.disabledMethod({
+                item
+            })
+        },
+        reload () {
+            return this.$refs.loadMore && this.$refs.loadMore.reload()
+        }
+    }
+}
+</script>
+<style lang="less">
+.sdk-contacts-friend-select{
+    height: 100%;
+    position: relative;
+}
+.sdk-contacts-friend-select__item{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 8px 16px;
+	position: relative;
+    line-height: 1.5em;
+	transition: all .25s;
+    &.is-disabled {
+        cursor: not-allowed;
+        opacity: .5;
+    }
+    &:not(.is-disabled) {
+        cursor: pointer;
+        &:hover {
+            background-color: rgba(0,0,0,.03);
+        }
+        &.is-active {
+            background-color: #e0eafe;
+        }
+    }
+}
+.sdk-contacts-friend-select__item-main{
+    flex: 1;
+    min-width: 0;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+.sdk-contacts-friend-select__item:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 54px;
+    right: 12px;
+    border-bottom: 1px solid #f8f8f8;
+}
+.sdk-contacts-friend-select__item-avatar {
+	margin-right: 8px;
+	border-radius: 3px;
+	min-width: 32px;
+	height: 32px;
+	background-color: #eee;
+	border-radius: 3px;
+}
+.sdk-contacts-friend-select__skeleton{
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	overflow: hidden;
+	background: #fff;
+	z-index: 10;
+}
+.sdk-contacts-friend-select__item-name{
+    min-width: 0;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-break: break-all;
+}
+</style>

package/components/contacts-friend-select/index.js

@@ -0,0 +1,3 @@
+import ContactsFriendSelect from './contacts-friend-select.vue'
+
+export default ContactsFriendSelect

package/components/contacts-group-select/contacts-group-select-item.vue

@@ -0,0 +1,98 @@
+<template>
+	<div 
+		class="sdk-contacts-group-select-item" 
+		@click="handleRoomGroupClick"
+	>
+		<div class="sdk-contacts-group-select-item__icon">
+			<ui-icon name="folder-fill" :size="18"></ui-icon>
+		</div>
+		<div class="sdk-contacts-group-select-item__text">{{ data.groupName }}</div>
+		<div class="sdk-contacts-group-select-item__count">
+			<template v-if="loading">
+				<ui-loading size="mini"></ui-loading>
+			</template>
+			<template v-else>
+				{{ data.num }}				
+			</template>
+		</div>
+	</div>
+</template>
+
+<script>
+import UiIcon from '@aochuang/common/components/icon'
+import UiLoading from '@aochuang/common/components/loading'
+
+export default {
+	name: 'SdkContactsGroupSelectItem',
+	components: {
+		UiIcon,
+		UiLoading
+	},
+	props: {
+		data: {
+			type: Object,
+			required: true
+		},
+		type: {
+			type: String,
+			validator (value) {
+				return ['room', 'friend'].includes(value)
+			}
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		accountId: {
+			type: String
+		}
+	},
+	methods: {
+		handleRoomGroupClick () {
+			this.$emit('click')
+		}
+	}
+}
+</script>
+
+<style lang="less">
+.sdk-contacts-group-select-item{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 6px 24px 6px 6px;
+	position: relative;
+	cursor: pointer;
+	border-radius: 4px;
+	transition: all .25s;
+	&:after {
+		content: '';
+		width: 8px;
+		height: 8px;
+		border: 1px solid #ccc;
+		transform: translateY(-50%) rotate(45deg);
+		border-left: 0;
+		border-bottom: 0;
+		position: absolute;
+		right: 10px;
+		top: 50%;
+	}
+	&:hover {
+		background-color: rgba(0,0,0,.03);
+	}
+}
+.sdk-contacts-group-select-item__icon{
+	margin-right: 8px;
+	width: 32px;
+	height: 32px;
+	border-radius: 4px;
+	background-color: #edeceb;
+	color: #bab9b9;
+	text-align: center;
+	line-height: 32px;
+}
+.sdk-contacts-group-select-item__text{
+	flex: 1;
+	min-width: 0;
+}
+</style>

package/components/contacts-group-select/contacts-group-select-skeleton.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="sdk-contacts-group-select-skeleton">
+        <div class="sdk-contacts-group-select-skeleton__group">
+            <div class="sdk-contacts-group-select-skeleton__group-head">
+                <ui-skeleton height="18px" width="130px"></ui-skeleton>
+            </div>
+            <div class="sdk-contacts-group-select-skeleton__group-body">
+                <div class="sdk-contacts-group-select-skeleton__list">
+                    <div 
+                        class="sdk-contacts-group-select-skeleton__item"
+                        v-for="index in 6"
+                        :key="index"
+                    >
+                        <div class="sdk-contacts-group-select-skeleton__item-avatar">
+                            <ui-skeleton width="32px" height="32px"></ui-skeleton>
+                        </div>
+                        <div class="sdk-contacts-group-select-skeleton__item-name">
+                            <ui-skeleton width="75%" height="18px"></ui-skeleton>
+                        </div>
+                        <div class="sdk-contacts-group-select-skeleton__item-total">
+                            <ui-skeleton width="30px" height="18px"></ui-skeleton>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="sdk-contacts-group-select-skeleton__group">
+            <div class="sdk-contacts-group-select-skeleton__group-head">
+                <ui-skeleton height="18px" width="130px"></ui-skeleton>
+            </div>
+            <div class="sdk-contacts-group-select-skeleton__group-body">
+                <div class="sdk-contacts-group-select-skeleton__list">
+                    <div 
+                        class="sdk-contacts-group-select-skeleton__item"
+                        v-for="index in 20"
+                        :key="index"
+                    >
+                        <div class="sdk-contacts-group-select-skeleton__item-avatar">
+                            <ui-skeleton width="32px" height="32px"></ui-skeleton>
+                        </div>
+                        <div class="sdk-contacts-group-select-skeleton__item-name">
+                            <ui-skeleton width="75%" height="18px"></ui-skeleton>
+                        </div>
+                        <div class="sdk-contacts-group-select-skeleton__item-total">
+                            <ui-skeleton width="30px" height="18px"></ui-skeleton>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import UiSkeleton from '@aochuang/common/components/skeleton'
+
+export default {
+    name: 'SdkContactsGroupSelectSkeleton',
+    components: {
+        UiSkeleton
+    }
+}
+</script>
+<style lang="less">
+.sdk-contacts-group-select-skeleton__group{
+    margin: 12px;
+}
+.sdk-contacts-group-select-skeleton__item{
+    display: flex;
+    flex-direction: row;
+    align-items: center;  
+    margin-top: 12px;
+    margin-bottom: 12px; 
+}
+.sdk-contacts-group-select-skeleton__item-avatar{
+    margin-right: 12px;
+}
+.sdk-contacts-group-select-skeleton__item-name{
+    flex: 1;
+    min-width: 0;
+}
+</style>