@aochuang/client-sdk 1.0.278

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

@@ -0,0 +1,238 @@
+<template>
+	<view class="bi-chat-panel-chats-box" :class="['is-' + dir, {'is-recalled': recalled }]">
+		<view class="bi-chat-panel-chats-box__avatar">
+			<bi-avatar :src="userData ? userData.avatar : null"></bi-avatar>
+		</view>
+		<view class="bi-chat-panel-chats-box__main">
+			<view class="bi-chat-panel-chats-box__user">
+				<view class="bi-chat-panel-chats-box__user-name">
+					{{ userData ? userData.name : '--' }}
+				</view>
+			</view>
+			<view class="bi-chat-panel-chats-box__content">
+				<view class="bi-chat-panel-chats-box__extend">
+					<view class="bi-chat-panel-chats-box__extend-item" v-if="showMoreAction">
+						<bi-icon class="bi-chat-panel-chats-box__more" name="more-fill" @click="handleMoreActionClick"></bi-icon>
+					</view>
+					<slot name="append"></slot>
+				</view>
+				<view class="bi-chat-panel-chats-box__message">
+					<view class="bi-chat-panel-chats-box__message-arrow" :style="{'border-color': innerColor}"></view>
+					<view class="bi-chat-panel-chats-box__message-main">
+						<div class="bi-chat-panel-chats-box__message-content" :style="{'background-color': innerColor}">
+							<slot></slot>
+						</div>
+					</view>
+				</view>
+			</view>
+			<view class="bi-chat-panel-chats-box__addon">
+				<view class="bi-chat-panel-chats-box__date">{{ msgTimeText }}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { formatDate } from '../../utils/date.js'
+import BiAvatar from '@aochuang/common/uni-components/avatar/avatar.vue'
+import BiIcon from '@aochuang/common/uni-components/icon/icon.vue'
+import { error } from '@aochuang/common/uni-components/message/message.js'
+
+export default {
+	name: 'BiChatPanelChatsItem',
+	components: {
+		BiAvatar,
+		BiIcon
+	},
+	props: {
+		data: {
+			type: Object,
+			required: true
+		},
+		color: {
+			type: String
+		},
+		/**
+		 * {
+		 * 		avatar: null,
+		 * 		name: null
+		 * }
+		*/
+		fetchUserMethod: {
+			type: Function,
+			required: true
+		},
+		showMoreAction: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data () {
+		return {
+			userData: null
+		}
+	},
+	computed: {
+		dir () {
+			return this.data.isSend ? 'right' : 'left'
+		},
+		recalled () {
+			return !!this.data.recalled
+		},
+		innerColor () {
+			if (this.color) {
+				return this.color
+			}
+			if (this.dir === 'right') {
+				return '#c9e3fc' 
+			} else {
+				return '#ffffff'
+			}
+		},
+		msgTimeText () {
+			return formatDate(this.data.wechatTime)
+		},
+		isTimeout () {
+			if (!this.data.createTime) {
+			  return false
+			}
+			return Date.now() - new Date(this.data.createTime) > 10 * 60 * 1000; //超过5分钟，认为是失败
+		}
+	},
+	created () {
+		const rs = this.fetchUserMethod({
+			data: this.data
+		})
+		if (rs && rs.then) {
+			rs.then(data => {
+				this.userData = data
+			})
+		} else {
+			this.userData = rs
+		}
+	},
+	methods: {
+		handleErrorClick (errorMsg) {
+			error(errorMsg || '未知错误')
+		},
+		handleMoreActionClick () {
+			this.$emit('more-action-click')
+		}
+	}
+}
+</script>
+
+<style lang="less">
+.bi-chat-panel-chats-box{
+	display: flex;
+	flex-direction: row;
+	padding: 8px 12px;
+	&.is-left {
+		.bi-chat-panel-chats-box__avatar{
+			margin-right: 12px;
+		}
+		.bi-chat-panel-chats-box__content{
+			flex-direction: row-reverse;
+			justify-content: flex-end;
+		}
+		.bi-chat-panel-chats-box__message-arrow{
+			left: -8px;
+			transform: rotate(-90deg);
+		}
+	}
+	&.is-right {
+		flex-direction: row-reverse;
+		.bi-chat-panel-chats-box__avatar{
+			margin-left: 12px;
+		}
+		.bi-chat-panel-chats-box__main{
+			display: flex;
+			flex-direction: column;
+			align-items: flex-end;
+		}
+		.bi-chat-panel-chats-box__content{
+			flex-direction: row;
+			justify-content: flex-start;
+		}
+		.bi-chat-panel-chats-box__message-main{
+			display: flex;
+			flex-direction: row;
+			justify-content: flex-end;
+		}
+		.bi-chat-panel-chats-box__message-arrow{
+			right: -8px;
+			transform: rotate(90deg);
+		}
+	}
+	&.is-recalled {
+		.bi-chat-panel-chats-box__message-content{
+			opacity: .6;
+		}
+	}
+}
+.bi-chat-panel-chats-box__content{
+	display: flex;
+	align-items: center;
+	align-items: center;
+}
+.bi-chat-panel-chats-box__extend{
+	margin: 0 6px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+.bi-chat-panel-chats-box__extend-item{
+	margin: 0 6px;
+}
+.bi-chat-panel-chats-box__avatar{
+	width: 32px;
+	height: 32px;
+	background-color: #eee;
+	border-radius: 50%;
+	min-width: 32px;
+	margin-top: 27px;
+}
+.bi-chat-panel-chats-box__main{
+	min-width: 0;
+}
+.bi-chat-panel-chats-box__user{
+	margin-bottom: 3px;
+	height: 24px;
+	line-height: 24px;
+	max-width: 100%;
+}
+.bi-chat-panel-chats-box__user-name{
+	color: #999;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.bi-chat-panel-chats-box__content{
+	margin-bottom: 3px;
+}
+.bi-chat-panel-chats-box__date{
+	font-size: 12px;
+	color: #999;
+}
+.bi-chat-panel-chats-box__more{
+	color: #999;
+}
+.bi-chat-panel-chats-box__message{
+	position: relative;
+}
+.bi-chat-panel-chats-box__message-content {
+	border-radius: 3px;
+	position: relative;
+	display: inline-block;
+	vertical-align: top;
+}
+.bi-chat-panel-chats-box__message-arrow{
+	border: 6px solid transparent;
+	border-left-color: transparent!important;
+	border-right-color: transparent!important;
+	border-top: 0;
+	position: absolute;
+	top: 14px;
+	z-index: 10;
+}
+</style>

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

@@ -0,0 +1,273 @@
+<template>
+	<view class="bi-chat-panel-chats-forward">
+		<view class="bi-chat-panel-chats-forward__title">转发指定好友</view>
+		<view class="bi-chat-panel-chats-forward__select">
+			<view class="bi-chat-panel-chats-forward__select-filter">
+				<bi-search 
+					v-model="keyword"
+					placeholder="输入好友名称搜索" 
+					:show-action="false"
+					@input="handleSearchSubmit"
+				></bi-search>
+			</view>
+			<view class="bi-chat-panel-chats-forward__select-result">
+				<bi-scroll-load-more
+					ref="loadMore"
+					:data="contactsData"
+					@query="handleQueryContactsData"
+				>
+					<view 
+						class="bi-chat-panel-chats-forward__select-list"
+					>
+						<view 
+							class="bi-chat-panel-chats-forward__select-item" 
+							:class="{'is-selected': !!selectionMap[item.id]}"
+							v-for="(item, index) in contactsData" 
+							:key="item.id"
+							@click="handleFriendClick(item)"
+						>
+							<view class="bi-chat-panel-chats-forward__select-item-left">
+								<view class="bi-chat-panel-chats-forward__select-item-check"></view>
+								<template v-if="item.chatroomId">
+									<bi-room-avatar class="bi-chat-panel-chats-forward__select-item-avatar" :src="item.chatroomAvatar" :name="item.conRemark || item.nickname"></bi-room-avatar>
+									<text class="bi-chat-panel-chats-forward__select-item-name">{{item.conRemark || item.nickname}}</text>
+								</template>
+								<template v-else>
+									<bi-friend-avatar class="bi-chat-panel-chats-forward__select-item-avatar" :src="item.avatar" :name="item.conRemark || item.nickname"></bi-friend-avatar>
+									<text class="bi-chat-panel-chats-forward__select-item-name">{{item.conRemark || item.nickname}}</text>
+								</template>
+							</view>
+							<view class="bi-chat-panel-chats-forward__select-item-right">
+								<text class="bi-chat-panel-chats-forward__select-item-owner">{{ handleRenderWechatAccountText(item.wechatAccountId) }}</text>
+							</view>
+						</view>
+					</view>
+				</bi-scroll-load-more>
+			</view>
+		</view>
+		<view class="bi-chat-panel-chats-forward__toolbar">
+			<view class="bi-chat-panel-chats-forward__toolbar-item">
+				<uv-button @click="handleCancelClick">取消</uv-button>
+			</view>
+			<view class="bi-chat-panel-chats-forward__toolbar-item">
+				<uv-button type="primary" :loading="sending" @click="handleConfirmClick">确定</uv-button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import BiRoomAvatar from 'client-sdk/uni-common/room-avatar/room-avatar.vue'
+import BiFriendAvatar from 'client-sdk/uni-common/friend-avatar/friend-avatar.vue'
+import BiEmpty from '@aochuang/common/uni-components/empty/empty.vue'
+import BiSearch from '@aochuang/common/uni-components/search/search.vue'
+import BiScrollLoadMore from '@aochuang/common/uni-common/scroll-load-more/scroll-load-more.vue'
+import { loadContactsFriendData } from '@/apis/contacts.js'
+import { MESSAGE_TYPE } from 'client-sdk/uni-components/chat-control'
+import { toJson } from '@/utils/data'
+
+export default {
+	name: 'BiChatPanelChatsForward',
+	components: {
+		BiRoomAvatar,
+		BiFriendAvatar,
+		BiEmpty,
+		BiSearch,
+		BiScrollLoadMore
+	},
+	props: {
+		data: {
+			type: Array
+		},
+		sendMessageMethod: {
+			type: Function
+		}
+	},
+	data () {
+		return {
+			keyword: null,
+			sending: false,
+			selection: [],
+			contactsData: []
+		}
+	},
+	computed: {
+		wechatAccountMap () {
+			return (this.$clientChat.account.accountData || []).reduce((rs, v) => {
+				rs[v.id] = v
+				return rs
+			}, {})
+		},
+		selectionMap () {
+			return (this.selection || []).reduce((rs, v) => {
+				rs[v.id] = v
+				return rs
+			}, {})
+		}
+	},
+	methods: {
+		handleSearchSubmit () {
+			this.$refs.loadMore.reload()
+		},
+		handleQueryContactsData ({ setCallback }) {
+			setCallback(({ pageSize, isReload }) => {
+				if (isReload) {
+					this.contactsData = []
+				}
+				return loadContactsFriendData({
+					keyword: this.keyword,
+					size: pageSize,
+					total: isReload ? 0 : this.contactsData.length
+				}).then(rs => {
+					this.contactsData = [].concat(this.contactsData, rs.data)
+					return rs
+				})
+			})
+		},
+		handleRenderWechatAccountText (wechatAccountId) {
+			if (!this.wechatAccountMap[wechatAccountId]) {
+				return
+			}
+			return this.wechatAccountMap[wechatAccountId].memo || this.wechatAccountMap[wechatAccountId].nickname
+		},
+		handleFriendClick (item) {
+			if (this.selectionMap[item.id]) {
+				let index = -1
+				this.selection.some((v, i) => {
+					if (v.id === item.id) {
+						index = i
+						return true
+					}
+				})
+				if (index >= 0) {
+					this.selection.splice(index, 1)
+				}
+			} else {
+				this.selection.push(item)
+			}
+		},
+		handleCancelClick () {
+			this.$emit('cancel')
+		},
+		handleConfirmClick () {
+			let targets = [...this.selection]
+			let messages = [...this.data].sort((a, b) => {
+				return a.wechatTime - b.wechatTime
+			})
+			if (this.sendMessageMethod) {
+				this.sending = true
+				this.sendMessageMethod({
+					messages,
+					targets
+				}).then(rs => {
+					const errors = (rs || []).filter(v => v.status === 'rejected')
+					if (errors.length) {
+						this.$error('发送失败' + errors.length + '条')
+					} else {
+						this.$success('发送成功')
+						this.$emit('success')
+					}
+				}).finally(() => {
+					this.sending = false
+				})
+			}
+		}
+	}
+}
+</script>
+
+<style lang="less">
+.bi-chat-panel-chats-forward__title{
+	font-size: 14px;
+	height: 32px;
+	line-height: 32px;
+	padding: 4px 12px;
+	color: #999;
+}
+.bi-chat-panel-chats-forward__select-filter{
+	padding: 0 12px;
+}
+.bi-chat-panel-chats-forward__toolbar{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	padding: 12px;
+	border-top: 1px solid #eee;
+}
+.bi-chat-panel-chats-forward__toolbar-item{
+	margin: 0 8px;
+}
+.bi-chat-panel-chats-forward__select-result{
+	flex: 1;
+	min-height: 0;
+	overflow: auto;
+	height: 60vh;
+}
+.bi-chat-panel-chats-forward__select-item{
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	padding: 8px 16px;
+	position: relative;
+	&:after {
+		content: '';
+		position: absolute;
+		bottom: 0;
+		left: 12px;
+		right: 12px;
+		border-bottom: 1px solid #f8f8f8;
+	}
+	&.is-selected {
+		.bi-chat-panel-chats-forward__select-item-check{
+			background-color: #3c9cff;
+			border-color: #3c9cff;
+		}
+	}
+}
+.bi-chat-panel-chats-forward__select-item-left{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	flex: 1;
+	min-width: 0;
+	margin-right: 12px;
+}
+.bi-chat-panel-chats-forward__select-item-avatar {
+	margin-right: 8px;
+	border-radius: 3px;
+	min-width: 32px;
+	height: 32px;
+	background-color: #eee;
+	border-radius: 3px;
+}
+.bi-chat-panel-chats-forward__select-item-check{
+	width: 20px;
+	min-width: 20px;
+	height: 20px;
+	border: 1px solid #eee;
+	border-radius: 4px;
+	margin-right: 12px;
+	position: relative;
+	&:after {
+		content: '';
+		position: absolute;
+		left: 5px;
+		top: 5px;
+		width: 8px;
+		height: 5px;
+		border: 2px solid #fff;
+		border-right: 0;
+		border-top: 0;
+		transform: rotate(-45deg);
+	}
+}
+.bi-chat-panel-chats-forward__select-item-owner{
+	font-size: 12px;
+	color: #999;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+</style>