@aochuang/client-sdk 1.0.278

package/uni-components/chat-panel/chat-panel-chats.vue

@@ -0,0 +1,368 @@
+<template>
+	<scroll-view 
+		id="chatPanelChats"
+		class="bi-chat-panel-chats"
+		scroll-y="true" 
+		:scroll-into-view="scrollIntoMessageId"
+		@scrolltoupper="handleScrollTop"
+		@scrolltolower="handleScrollBottom"
+	>
+		<template v-if="reloading">
+			<view class="bi-chat-panel-chats__reloading">
+				<uv-loading-icon></uv-loading-icon>
+			</view>
+		</template>
+		<template v-else>
+			<template v-if="!isEmpty">
+				<template v-if="loading">
+					<view class="bi-chat-panel-chats__loading">
+						<view class="bi-chat-panel-chats__loading-icon">
+							<uv-loading-icon size="18px"></uv-loading-icon>
+						</view>
+						<view class="bi-chat-panel-chats__loading-text">
+							数据加载中...
+						</view>
+					</view>
+				</template>
+				<view v-else class="bi-chat-panel-chats__loadmore" @click="handleLoadMoreClick">
+					点击加载更多消息
+				</view>
+				<template v-for="day in messageData">
+					<template
+						v-for="milliseconds in day"
+					>
+						<template
+							v-for="message in milliseconds"
+						>
+							<chat-panel-chats-item
+								:id="`message-${message.id}`"
+								:key="message.id"
+								:data="message"
+								:fetch-user-method="fetchUserMethod"
+								@more-action-click="handleMoreActionClick"
+							>
+								<template slot="chat-append" slot-scope="scope">
+									<slot name="chat-append" v-bind="scope"></slot>
+								</template>
+								<template slot="chat-prefix" slot-scope="scope">
+									<slot name="chat-prefix" v-bind="scope"></slot>
+								</template>
+							</chat-panel-chats-item>
+						</template>
+					</template>
+				</template>
+			</template>
+			<template v-else>
+				<view class="bi-chat-panel-chats__empty">
+					<view class="bi-chat-panel-chats__empty-icon">
+						<bi-icon name="message-line" size="48px" color="#aaa"></bi-icon>
+					</view>
+					<view class="bi-chat-panel-chats__empty-text">暂无聊天数据</view>
+				</view>
+			</template>
+		</template>
+	</scroll-view>
+</template>
+
+<script>
+import ChatPanelChatsItem from './chat-panel-chats-item.vue'
+import { isEmptyObject } from '../../utils/util.js'
+import { unique } from '../../utils/string.js'
+import { formatDate } from '../../utils/date.js'
+
+export default {
+	name: 'BiChatPanelChats',
+	components: {
+		ChatPanelChatsItem
+	},
+	props: {
+		/**
+		 * {
+		 *		day: { // 按照天分组，这样的好处是就不用做排序了，用浏览器的机制
+		 *	  		milliseconds: [ // 按照毫秒分组，一般不可能毫秒级还有多条消息，这里用数组只是防止真的存在
+		 *  			// 消息数据
+		 * 				...
+		 *			]
+		 *		}, 	
+		 * }
+		*/
+		data: {
+			type: Object
+		},
+		queryMethod: {
+			type: Function
+		},
+		autoLoad: {
+			type: Boolean,
+			default: true
+		},
+		fetchUserMethod: {
+			type: Function,
+			required: true
+		}
+	},
+	data () {
+		return {
+			loading: false,
+			reloading: false,
+			messageData: this.data || {},
+			scrollIntoMessageId: null
+		}
+	},
+	computed: {
+		isEmpty () {
+			return isEmptyObject(this.messageData)
+		}
+	},
+	watch: {
+		data () {
+			this.messageData = this.data || {}
+		}
+	},
+	mounted () {
+		if (this.autoLoad) {
+			this.reload()
+		}
+		this.selectorQuery = uni.createSelectorQuery().in(this)
+	},
+	methods: {
+		handleDataChange () {
+			this._dataChangeTimer = setTimeout(() => {
+				this.checkScrollTop()
+			})
+		},
+		handleScrollTop () {
+			this.loadMoreData()
+		},
+		handleScrollBottom (evt) {
+			// console.log(evt)
+		},
+		scrollToMessage (messageId) {
+			this.scrollIntoMessageId = 'message-' + messageId
+		},
+		/**
+		 * 获取根DOM节点相关信息
+		*/
+		getRootElInfo () {
+			return Promise.all([
+				new Promise((resolve) => {
+					this.selectorQuery.select('#chatPanelChats').boundingClientRect(res => {
+						resolve(res)
+					}).exec()
+				}),
+				new Promise((resolve) => {
+					this.selectorQuery.select('#chatPanelChats').scrollOffset((res) => {
+						resolve(res)
+					}).exec()
+				})
+			]).then(rs => {
+				return rs.reduce((rs1, v) => {
+					rs1 = Object.assign({}, rs1, v)
+					return rs1
+				}, {})
+			})
+		},
+		/**
+		 * 检查滚动的位置
+		 * 如果消息发生了改变，并且当前滚动的距离不足一个窗口高度，那么自动滚动到最底部，否则不改变滚动距离
+		*/
+		checkScrollToBottom () {
+			this.$nextTick(() => {
+				this.getRootElInfo().then(rs => {
+					// 如果用户已经滚动了一些距离，那么就不定位到最新的消息上
+					if (rs.scrollHeight - rs.scrollTop - rs.height >= rs.height) {
+						return
+					}
+					const lastMessage = this.getLastMessage()
+					if (!lastMessage) {
+						return
+					}
+					this.scrollToMessage(lastMessage.id)
+				})
+			})
+		},
+		scrollToBottom () {
+			this.$nextTick(() => {
+				this.getRootElInfo().then(rs => {
+					const lastMessage = this.getLastMessage()
+					if (!lastMessage) {
+						return
+					}
+					this.scrollToMessage(lastMessage.id)
+				})
+			})
+		},
+		/**
+		 * 获取最后一条消息
+		*/
+		getLastMessage () {
+			const lastDayKey = Object.keys(this.messageData || {}).pop()
+			if (!lastDayKey) {
+				return
+			}
+			const lastMillisecondsKey = Object.keys(this.messageData[lastDayKey] || {}).pop()
+			if (!lastMillisecondsKey) {
+				return
+			}
+			return this.messageData[lastDayKey][lastMillisecondsKey][this.messageData[lastDayKey][lastMillisecondsKey].length - 1]
+		},
+		/**
+		 * 获取第一一条消息
+		*/
+		getFristMessage () {
+			const firstDayKey = Object.keys(this.messageData || {}).shift()
+			if (!firstDayKey) {
+				return
+			}
+			const firstMillisecondsKey = Object.keys(this.messageData[firstDayKey] || {}).shift()
+			if (!firstMillisecondsKey) {
+				return
+			}
+			return this.messageData[firstDayKey][firstMillisecondsKey][0]
+		},
+		getSortField (time) {
+			const step = 1000 * 60 * 60 * 24
+			const day = Math.floor(time / step)
+			const milliseconds = time - (day * step)
+			return {
+				day: day, // Math.abs(day - 1000000),
+				milliseconds: milliseconds // Math.abs(milliseconds - 86400000)
+			}
+		},
+		addMessageItem (data) {
+			const sortField = 'wechatTime'
+			if (!data || !data.id || !data[sortField]) {
+				throw new Error('缺少必须参数')
+			}
+			if (this.messageData[data.id]) {
+				return
+			}
+			const sortFields = this.getSortField(data[sortField])
+			if (!this.messageData[sortFields.day]) {
+				this.$set(this.messageData, sortFields.day, {})
+			}
+			if (!this.messageData[sortFields.day][sortFields.milliseconds]) {
+				this.$set(this.messageData[sortFields.day], sortFields.milliseconds, [])
+			}
+			if (this.messageData[sortFields.day][sortFields.milliseconds].some(v => v.id === data.id)) {
+				return
+			}
+			this.messageData[sortFields.day][sortFields.milliseconds].push(data)
+		},
+		loadData (params) {
+			if (!this.queryMethod) {
+				return Promise.reject('缺少queryMethod方法')
+			}
+			const endTime = Date.now()
+			const startTime = endTime - (1 * 1000 * 60 * 60 * 24 * 30)
+			return this.queryMethod(Object.assign({
+				bigWechatTime: endTime,
+				smallWechatTime: startTime,
+				pageSize: 20,
+				upward: true
+			}, params), { initLoaded: !this.getFristMessage() }).then(rs => {
+				this.$nextTick(() => {
+					// 如果外面没有传data过来，例如搜索消息的场景，那么组件内部构造messageData
+					if (!this.data) {
+						if (rs && rs.length) {
+							rs.forEach(v => {
+								this.addMessageItem(v)
+							})
+						} else {
+							if (params && params.bigWechatTime && params.smallWechatTime) {
+								this.addMessageItem({
+									id: unique(),
+									msgType: '_EMPTY_',
+									wechatTime: params.smallWechatTime - 1,
+									createTime: params.smallWechatTime - 1,
+									content: `${formatDate(params.smallWechatTime)}至${formatDate(params.bigWechatTime)}没有数据`
+								})
+							}
+						}
+					}
+				})
+			})
+		},
+		loadMoreData () {
+			if (this.loading || this.reloading) {
+				return
+			}
+			const firstMessage = this.getFristMessage()
+			const startTime = firstMessage ? firstMessage.wechatTime - 1000 * 60 * 60 * 24 * 15 : null
+			const endTime = firstMessage ? firstMessage.wechatTime : null
+			this.loading = true
+			this.loadData({
+				bigWechatTime: endTime,
+				smallWechatTime: startTime,
+				pageSize: 20,
+				upward: true
+			}).finally(() => {
+				this.loading = false
+			})
+		},
+		reload () {
+			this.reloading = true
+			this.messageData = {}
+			this.loadData().finally(() => {
+				this.reloading = false
+			})
+		},
+		handleLoadMoreClick () {
+			this.loadMoreData()
+		},
+		handleMoreActionClick (evt) {
+			this.$emit('more-action-click', evt)
+		}
+	},
+	beforeDestroy () {
+		clearTimeout(this._dataChangeTimer)
+	}
+}
+</script>
+
+<style lang="less">
+.bi-chat-panel-chats{
+	height: 100%;
+}
+.bi-chat-panel-chats__loading{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	color: #999;
+	height: 32px;
+	line-height: 32px;
+}
+.bi-chat-panel-chats__loading-icon {
+	margin-right: 6px;
+}
+.bi-chat-panel-chats__reloading{
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+}
+.bi-chat-panel-chats__empty{
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+.bi-chat-panel-chats__empty-text{
+	color: #999;
+	margin-top: 3px;
+}
+.bi-chat-panel-chats__loadmore{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	color: #999;
+	height: 32px;
+	line-height: 32px;
+	&:hover {
+		color: #244ac0;
+	}
+}
+</style>

package/uni-components/chat-panel/chat-panel.vue

@@ -0,0 +1,227 @@
+<template>
+	<view class="bi-chat-panel" :class="{'is-selectable': selectable}">
+		<view class="bi-chat-panel__main">
+			<chat-panel-chats
+				ref="chatPanelChats"
+				:data="data"
+				:auto-load="autoLoad"
+				:query-method="queryMethod"
+				:fetch-user-method="fetchUserMethod"
+				@more-action-click="handleMoreActionClick"
+			>
+				<template slot="chat-append" slot-scope="{ data }">
+					<chat-panel-chats-status :data="data"></chat-panel-chats-status>
+				</template>
+				<template slot="chat-prefix" slot-scope="{ data }">
+					<template v-if="selectable">
+					  <div class="bi-chat-panel__checkbox" :class="{'is-checked': checkMsgMap[data[keyField]]}" @click="handleMsgCheckboxChange(data)"></div>
+					</template>
+				</template>
+			</chat-panel-chats>
+		</view>
+		<view class="bi-chat-panel__toolbar">
+			<template v-if="selectable">
+			  <slot name="selection" :total="checkTotal" :unselect="handleUnSelectMethod" :get-selection-data="handleGetSelectionDataMethod"></slot>
+			</template>
+		</view>
+		<uv-action-sheet
+			ref="chatActionSheet"
+			:actions="chatActionSheetOptions"
+			@select="handleChatActionSheetSelect"
+		></uv-action-sheet>
+	</view>
+</template>
+
+<script>
+import ChatPanelChats from './chat-panel-chats.vue'
+import ChatPanelChatsStatus from './chat-panel-chats-status/chat-panel-chats-status.vue'
+import { copyText } from '../../utils/string'
+import { MESSAGE_TYPE } from '../chat-control'
+import { toJson } from '../../utils/data'
+
+export default {
+	name: 'BiChatPanel',
+	components: {
+		ChatPanelChats,
+		ChatPanelChatsStatus
+	},
+	props: {
+		keyField: {
+			type: String,
+			default: 'id'
+		},
+		/**
+		 * {
+		 *		day: { // 按照天分组，这样的好处是就不用做排序了，用浏览器的机制
+		 *	  		milliseconds: [ // 按照毫秒分组，一般不可能毫秒级还有多条消息，这里用数组只是防止真的存在
+		 *  			// 消息数据
+		 * 				...
+		 *			]
+		 *		}, 	
+		 * }
+		*/
+		data: {
+			type: Object
+		},
+		selectable: {
+			type: Boolean,
+			default: false
+		},
+		autoLoad: {
+			type: Boolean,
+			default: true
+		},
+		queryMethod: {
+			type: Function
+		},
+		fetchUserMethod: {
+			type: Function,
+			required: true
+		},
+		actionSheetOptionsMethod: {
+			type: Function
+		}
+	},
+	data () {
+		return {
+			currentChat: null,
+			checkMsgMap: {},
+			chatActionSheetOptions: []
+		}
+	},
+	computed: {
+		checkTotal () {
+		  return Object.keys(this.checkMsgMap).length
+		}
+	},
+	watch: {
+		selectable () {
+			if (!this.selectable) {
+				this.checkMsgMap = {}
+			}
+		}
+	},
+	methods: {
+		handleChatClassMethod () {
+			return {
+				'is-selectable': this.selectable
+			}
+		},
+		handleUnSelectMethod () {
+			this.checkMsgMap = {}
+		},
+		handleGetSelectionDataMethod () {
+			return Object.keys(this.checkMsgMap).map(key => {
+				return this.checkMsgMap[key]
+			})
+		},
+		handleMsgCheckboxChange (msg) {
+			const nextChecked = !this.checkMsgMap[msg[this.keyField]]
+			if (nextChecked) {
+				this.$set(this.checkMsgMap, msg[this.keyField], msg)
+			} else {
+				this.$delete(this.checkMsgMap, msg[this.keyField])
+			}
+		},
+		handleMoreActionClick ({ data }) {
+			this.currentChat = data
+			if (this.actionSheetOptionsMethod) {
+				this.chatActionSheetOptions = (this.actionSheetOptionsMethod({
+					item: data
+				}) || []).reduce((rs, v) => {
+					const text = typeof v.text === 'function' ? v.text() : v.text
+					const disabled = typeof v.disabled === 'function' ? v.disabled() : v.disabled
+					const visible = typeof v.visible === 'function' ? v.visible() : v.visible
+					if (visible !== false) {
+						rs.push({
+							name: text,
+							disabled,
+							click: v.click
+						})
+					}
+					return rs
+				}, [])
+			}
+			this.$refs.chatActionSheet.open()
+		},
+		handleChatActionSheetSelect (item) {
+			if (item.click) {
+				item.click()
+			}
+		},
+		scrollToMessage (messageId) {
+			this.$refs.chatPanelChats.scrollToMessage(messageId)
+		},
+		checkScrollToBottom () {
+			this.$refs.chatPanelChats.checkScrollToBottom()
+		},
+		scrollToBottom () {
+			this.$refs.chatPanelChats.scrollToBottom()
+		},
+		reload () {
+			this.$refs.chatPanelChats.reload()
+		},
+		copyMessage (msg) {
+			if (msg.msgType === MESSAGE_TYPE.QUOTE_MESSAGE) {
+				const quoteContent = toJson(msg.content) || {}
+				copyText(quoteContent.content).then(() => {
+					this.$success('复制成功')
+				})
+			} else if (msg.msgType === MESSAGE_TYPE.TEXT_WITH_AT) {
+				const atContent = toJson(msg.content) || {}
+				copyText(atContent.text).then(() => {
+					this.$success('复制成功')
+				})
+			} else {
+				copyText(msg.content).then(() => {
+					this.$success('复制成功')
+				})
+			}
+		}
+	}
+}
+</script>
+
+<style lang="less">
+.bi-chat-panel{
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	&.is-selectable {
+		/deep/ .bi-chat-panel-chats-item{
+			padding-left: 30px;
+			position: relative;
+		}
+	}
+}
+.bi-chat-panel__main{
+	flex: 1;
+	min-height: 0;
+}
+.bi-chat-panel__checkbox{
+	width: 16px;
+	height: 16px;
+	border: 1px solid #eee;
+	border-radius: 3px;
+	background-color: #fff;
+	position: absolute;
+	left: 12px;
+	top: 50%;
+	transform: translateY(-50%);
+	&.is-checked{
+		background-color: #3c9cff;
+		&:after {
+			content: '';
+			position: absolute;
+			width: 4px;
+			height: 6px;
+			border: 2px solid #fff;
+			border-left: 0;
+			border-top: 0;
+			left: 5px;
+			top: 2px;
+			transform: rotate(45deg);
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,85 @@
+<template>
+	<view 
+		class="bi-contacts-group-select-item" 
+		:class="{'is-selected': selected}"
+		@click="handleRoomGroupClick"
+	>
+		<view class="bi-contacts-group-select-item__icon">
+			<bi-avatar :name="data.groupName"></bi-avatar>
+		</view>
+		<view class="bi-contacts-group-select-item__text">{{ data.groupName }}</view>
+		<view class="bi-contacts-group-select-item__count">{{ data.num }}</view>
+	</view>
+</template>
+
+<script>
+import BiAvatar from '@aochuang/common/uni-components/avatar/avatar.vue'
+
+export default {
+	name: 'BiContactsGroupSelectItem',
+	components: {
+		BiAvatar
+	},
+	props: {
+		data: {
+			type: Object,
+			required: true
+		},
+		selected: {
+			type: Boolean,
+			default: false
+		},
+		type: {
+			type: String,
+			validator (value) {
+				return ['room', 'friend'].includes(value)
+			}
+		}
+	},
+	methods: {
+		handleRoomGroupClick () {
+			this.$emit('click')
+		}
+	}
+}
+</script>
+
+<style lang="less">
+.bi-contacts-group-select-item{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 6px 30px 6px 12px;
+	position: relative;
+	&:after {
+		content: '';
+		width: 8px;
+		height: 8px;
+		border: 1px solid #ccc;
+		transform: translateY(-50%) rotate(45deg);
+		border-left: 0;
+		border-bottom: 0;
+		position: absolute;
+		right: 16px;
+		top: 50%;
+	}
+	&:active {
+		background-color: rgba(0,0,0,.1);
+	}
+	&.is-selected {
+		background: #3c9cff;
+		color: #fff;
+		&:after {
+			border-right-color: #fff;
+			border-bottom-color: #fff;
+		}
+	}
+}
+.bi-contacts-group-select-item__icon{
+	margin-right: 8px;
+}
+.bi-contacts-group-select-item__text{
+	flex: 1;
+	min-width: 0;
+}
+</style>