@aochuang/client-sdk 1.0.348 → 1.0.350

package/uni-components/chat-editor/chat-editor-chartlet/chat-editor-chartlet.vue

@@ -0,0 +1,85 @@
+<template>
+	<view class="sdk-chat-editor-chartlet">
+		<view class="sdk-chat-editor-chartlet__tabbar">
+			<ui-tabbar v-model="currentTabName">
+				<ui-tabbar-item name="default" text="默认"></ui-tabbar-item>
+				<ui-tabbar-item name="collect" text="收藏"></ui-tabbar-item>
+			</ui-tabbar>
+		</view>
+		<view class="sdk-chat-editor-chartlet__main">
+			<keep-alive>
+				<template v-if="currentTabName === 'default'">
+					<chat-editor-chartlet-system
+						@select="handleDefaultSelect"
+					></chat-editor-chartlet-system>
+				</template>
+				<template v-else-if="currentTabName === 'collect'">
+					<chat-editor-chartlet-collect
+						@select="handleCollectSelect"
+					></chat-editor-chartlet-collect>
+				</template>
+			</keep-alive>
+		</view>
+	</view>
+</template>
+
+<script>
+import { MESSAGE_TYPE } from 'client-sdk/uni-components/chat-control'
+import UiTabbar from '@aochuang/common/uni-components/tabbar/tabbar.vue'
+import UiTabbarItem from '@aochuang/common/uni-components/tabbar/tabbar-item.vue'
+import ChatEditorChartletSystem from './chat-editor-chartlet-system.vue'
+import ChatEditorChartletCollect from './chat-editor-chartlet-collect.vue'
+
+export default {
+	name: 'SdkChatEditorChartlet',
+	components: {
+		UiTabbar,
+		UiTabbarItem,
+		ChatEditorChartletSystem,
+		ChatEditorChartletCollect
+	},
+	props: {
+		insertTextMethod: {
+			type: Function,
+			required: true
+		},
+		submitMethod: {
+			type: Function,
+			required: true
+		}
+	},
+	data () {
+		return {
+			currentTabName: 'default'
+		}
+	},
+	methods: {
+		handleDefaultSelect ({ item }) {
+			if (!item) {
+				return
+			}
+			this.insertTextMethod(`[${item.label}]`)
+		},
+		handleCollectSelect ({ item }) {
+			return this.submitMethod({
+				data: {
+					messageType: MESSAGE_TYPE.CUSTOM_EXPRESSION,
+					content: item.data.url
+				}
+			})
+		}
+	}
+}
+</script>
+
+<style lang="less">
+.sdk-chat-editor-chartlet{
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+.sdk-chat-editor-chartlet__main{
+	flex: 1;
+	min-height: 0;
+}
+</style>

package/uni-components/chat-editor/chat-editor-func/chat-editor-func.vue

@@ -0,0 +1,157 @@
+<template>
+	<view class="bi-chat-editor-func">
+		<uv-grid :col="4">
+			<uv-grid-item>
+				<chat-editor-func-image
+					:upload-root-directory="uploadRootDirectory"
+					@confirm="handleSendImageConfirm"
+				></chat-editor-func-image>
+			</uv-grid-item>
+			<uv-grid-item>
+				<chat-editor-func-video
+					:upload-root-directory="uploadRootDirectory"
+					@confirm="handleSendVideoConfirm"
+				></chat-editor-func-video>
+			</uv-grid-item>
+			<uv-grid-item>
+				<chat-editor-func-file
+					:upload-root-directory="uploadRootDirectory"
+					@confirm="handleSendFileConfirm"
+				></chat-editor-func-file>
+			</uv-grid-item>
+			<template v-if="$slots.reply">
+				<uv-grid-item>
+					<slot name="reply"></slot>
+				</uv-grid-item>
+			</template>
+			<template v-if="$slots.atmember">
+				<uv-grid-item>
+					<slot name="atmember"></slot>
+				</uv-grid-item>
+			</template>
+			<template v-if="$slots.notread">
+				<uv-grid-item>
+					<slot name="notread"></slot>
+				</uv-grid-item>
+			</template>
+			<template v-if="$slots.material">
+				<uv-grid-item>
+					<slot name="material"></slot>
+				</uv-grid-item>
+			</template>
+		</uv-grid>
+		<uv-popup
+			ref="popup"
+			mode="center"
+			bgColor="none"
+		>
+			<chat-editor-message-send
+				v-if="showMessageSendPopup"
+				:send-target="sendTarget"
+				:message-type="currentMessageType"
+				:message-content="currentMessageContent"
+				:submit-method="handleSubmitMethod"
+				@cancel="handleCancelSend"
+			>
+			</chat-editor-message-send>
+		</uv-popup>
+	</view>
+</template>
+
+<script>
+import ChatEditorFuncFile from '../chat-editor-func-file/chat-editor-func-file.vue'
+import ChatEditorFuncImage from '../chat-editor-func-image/chat-editor-func-image.vue'
+import ChatEditorFuncVideo from '../chat-editor-func-video/chat-editor-func-video.vue'
+import ChatEditorFuncVoice from '../chat-editor-func-voice/chat-editor-func-voice.vue'
+import ChatEditorFuncAt from '../chat-editor-func-at/chat-editor-func-at.vue'
+import ChatEditorMessageSend from '../chat-editor-message-send/chat-editor-message-send.vue'
+import { MESSAGE_TYPE } from 'client-sdk/uni-components/chat-control/index.js'
+import { getNameByFileUrl } from '@/utils/file.js'
+
+export default {
+	name: 'BiChatEditorFunc',
+	components: {
+		ChatEditorFuncAt,
+		ChatEditorFuncFile,
+		ChatEditorFuncImage,
+		ChatEditorFuncVideo,
+		ChatEditorFuncVoice,
+		ChatEditorMessageSend
+	},
+	props: {
+		sendTarget: {
+			type: Object,
+			required: true
+		},
+		submitMethod: {
+			type: Function,
+			required: true
+		},
+		uploadRootDirectory: {
+			type: String
+		}
+	},
+	data () {
+		return {
+			showMessageSendPopup: false,
+			currentMessageType: null,
+			currentMessageContent: null
+		}
+	},
+	methods: {
+		handleSubmitMethod (evt) {
+			return this.submitMethod(evt).then(() => {
+				this.showMessageSendPopup = false
+				this.$refs.popup.close()
+			})
+		},
+		handleSendImageConfirm ({ data }) {
+			this.showMessageSendPopup = true
+			this.currentMessageType = MESSAGE_TYPE.IMAGE
+			this.currentMessageContent = data
+			this.$refs.popup.open()
+		},
+		handleSendVideoConfirm ({ data }) {
+			this.showMessageSendPopup = true
+			this.currentMessageType = MESSAGE_TYPE.VIDEO
+			this.currentMessageContent = data
+			this.$refs.popup.open()
+		},
+		handleSendFileConfirm ({ data, file }) {
+			const params = {}
+			if (file.type.indexOf('image') >= 0) {
+				params.msgType = MESSAGE_TYPE.IMAGE
+				params.content = data
+			} else if (file.type.indexOf('video') >= 0) {
+				params.msgType = MESSAGE_TYPE.VIDEO
+				params.content = data
+			} else {
+				params.msgType = MESSAGE_TYPE.URL
+				params.content = JSON.stringify({
+					type: 'file',
+					title: file.name,
+					url: data
+				})
+			}
+			this.showMessageSendPopup = true
+			this.currentMessageType = params.msgType
+			this.currentMessageContent = params.content
+			this.$refs.popup.open()
+		},
+		handleCancelSend () {
+			this.showMessageSendPopup = false
+			this.currentMessageType = null
+			this.currentMessageContent = null
+			this.$refs.popup.close()
+		}
+	}
+}
+</script>
+
+<style lang="less">
+.bi-chat-editor-func /deep/ {
+	.uv-grid-item--hover-class{
+		opacity: 1!important;
+	}
+}
+</style>

package/uni-components/chat-editor/chat-editor-func-at/chat-editor-func-at-panel.vue

@@ -0,0 +1,158 @@
+<template>
+	<view class="sdk-chat-editor-func-at">
+		<view class="sdk-chat-editor-func-at__result">
+			<bi-scroll-load-more
+				:data="showMemberData"
+				:page-size="false"
+				@query="handleQueryData"
+			>
+				<view
+					class="sdk-chat-editor-func-at__item"
+					v-for="item in showMemberData"
+					:key="item.id"
+					@click="handleMemberItemClick(item)"
+				>
+					<view class="sdk-chat-editor-func-at__item-avatar">
+						<ui-avatar :src="item.avatar"></ui-avatar>
+					</view>
+					<view class="sdk-chat-editor-func-at__item-main">
+						<view class="sdk-chat-editor-func-at__item-name">{{ item.nickname }}</view>
+					</view>
+				</view>
+			</bi-scroll-load-more>
+		</view>
+		<view class="sdk-chat-editor-func-at__search">
+			<ui-search
+				v-model="filters.keyword"
+				placeholder="输入群成员名称搜索"
+				immediate
+			></ui-search>
+		</view>
+	</view>
+</template>
+<script>
+import UiAvatar from '@aochuang/common/uni-components/avatar/avatar.vue'
+import UiSearch from '@aochuang/common/uni-components/search/search.vue'
+import BiScrollLoadMore from '@aochuang/common/uni-common/scroll-load-more/scroll-load-more.vue'
+
+export default {
+	name: 'ChatPanelEditorAtPanel',
+	components: {
+		UiAvatar,
+		UiSearch,
+		BiScrollLoadMore
+	},
+	props: {
+		queryMethod: {
+			type: Function,
+			required: true
+		},
+		confirmMethod: {
+			type: Function
+		}
+	},
+	data () {
+		return {
+			filters: {
+				keyword: null
+			},
+			selected: null,
+			roomMemberData: []
+		}
+	},
+	computed: {
+		roomMemberDataMap () {
+			return (this.roomMemberData || []).reduce((rs, v) => {
+				rs[v.id] = v
+				return rs
+			}, {})
+		},
+		showMemberData () {
+			if (!this.filters.keyword) {
+				return this.roomMemberData
+			}
+			return this.roomMemberData.filter(v => {
+				if (v.conRemark && v.conRemark.indexOf(this.filters.keyword) >= 0) {
+					return true
+				}
+				if (v.nickname && v.nickname.indexOf(this.filters.keyword) >= 0) {
+					return true
+				}
+				return false
+			})
+		}
+	},
+	methods: {
+		handleMemberItemClick (item) {
+			this.selected = item
+			this.confirmMethod && this.confirmMethod({
+				item
+			})
+		},
+		handleQueryData ({ setCallback }) {
+			setCallback(() => {
+				return this.queryMethod().then(rs => {
+					this.roomMemberData = rs
+					return rs
+				})
+			})
+		}
+	}
+}
+</script>
+<style lang="less">
+.sdk-chat-editor-func-at{
+	display: flex;
+	flex-direction: column;
+	height: 60vh;
+}
+.sdk-chat-editor-func-at__title{
+	height: 24px;
+	line-height: 24px;
+	padding: 6px 12px;
+	border-bottom: 1px solid #f3f3f3;
+	box-sizing: content-box;
+	font-weight: bold;
+}
+.sdk-chat-editor-func-at__search{
+  padding: 6px 12px;
+  background-color: #f8f8f8;
+  border-top: 1px solid #eee;
+}
+.sdk-chat-editor-func-at__result {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding-bottom: 6px;
+}
+.sdk-chat-editor-func-at__item{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 6px 12px;
+  transition: all .25s;
+  cursor: pointer;
+  position: relative;
+  &:hover {
+    background-color: #f8f8f8;
+  }
+  &.is-active {
+    background-color: #edf3fb;
+    &:after {
+      content: '';
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%) rotate(-45deg);
+      width: 7px;
+      height: 5px;
+      border: 1px solid #4387ff;
+      border-top: 0;
+      border-right: 0;
+    }
+  }
+}
+.sdk-chat-editor-func-at__item-avatar{
+  margin-right: 6px;
+}
+</style>

package/uni-components/chat-editor/chat-editor-func-at/chat-editor-func-at.vue

@@ -0,0 +1,61 @@
+<template>
+	<view class="bi-chat-editor-func-at">
+		<chat-editor-func-button text="@群成员" icon="at-line" @click="handleHandleClick"></chat-editor-func-button>
+		<ui-popup
+			ref="popup"
+			mode="bottom" 
+			title="@群成员"
+			v-model="showPopup"
+		>
+			<chat-editor-func-at-panel
+				:query-method="queryMethod"
+				:confirm-method="handleConfirmMethod"
+			></chat-editor-func-at-panel>
+		</ui-popup>
+	</view>
+</template>
+
+<script>
+import UiPopup from '@aochuang/common/uni-components/popup/popup.vue'
+import ChatEditorFuncButton from '../chat-editor-func-button/chat-editor-func-button.vue'
+import ChatEditorFuncAtPanel from './chat-editor-func-at-panel.vue'
+
+export default {
+	name: 'BiChatEditorFuncAt',
+	components: {
+		UiPopup,
+		ChatEditorFuncButton,
+		ChatEditorFuncAtPanel
+	},
+	props: {
+		queryMethod: {
+			type: Function
+		},
+		confirmMethod: {
+			type: Function
+		}
+	},
+	data () {
+		return {
+			showPopup: false
+		}
+	},
+	methods: {
+		handleHandleClick () {
+			this.showPopup = true
+		},
+		handleConfirmMethod (evt) {
+			if (!this.confirmMethod) {
+				return
+			}
+			const rs = this.confirmMethod(evt)
+			Promise.all([rs]).then(() => {
+				this.showPopup = false
+			})
+		}
+	}
+}
+</script>
+
+<style>
+</style>

package/uni-components/chat-editor/chat-editor-func-button/chat-editor-func-button.vue

@@ -0,0 +1,58 @@
+<template>
+	<view class="bi-chat-editor-func-button" @click="handleClick">
+		<view class="bi-chat-editor-func-button__icon">
+			<slot name="icon">
+				<bi-icon :name="icon" size="24px" color="#666"></bi-icon>
+			</slot>
+		</view>
+		<view class="bi-chat-editor-func-button__text">
+			{{ text }}
+		</view>
+	</view>
+</template>
+
+<script>
+import BiIcon from '@aochuang/common/uni-components/icon/icon.vue'
+
+export default {
+	name: 'BiChatEditorFuncButton',
+	components: {
+		BiIcon
+	},
+	props: {
+		text: {
+			type: String
+		},
+		icon: {
+			type: String
+		}
+	},
+	methods: {
+		handleClick () {
+			this.$emit('click')
+		}
+	}
+}
+</script>
+
+<style lang="less">
+.bi-chat-editor-func-button{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 12px;
+	color: #666;
+}
+.bi-chat-editor-func-button__icon{
+	width: 54px;
+	height: 54px;
+	background-color: #fff;
+	border-radius: 4px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 4px;
+}
+</style>

package/uni-components/chat-editor/chat-editor-func-file/chat-editor-func-file.vue

@@ -0,0 +1,54 @@
+<template>
+	<view class="bi-chat-editor-func-file">
+		<bi-oss-upload
+			source-type="file"
+			:root-directory="uploadRootDirectory"
+			:sub-directory="handleUploadSubDirectory"
+			@change="handleUploadFileSuccess"
+		>
+			<template slot="handle">
+				<chat-editor-func-button text="文件" icon="attachment-line"></chat-editor-func-button>
+			</template>
+		</bi-oss-upload>
+	</view>
+</template>
+
+<script>
+import BiOssUpload from '@/common/oss-upload/oss-upload.vue'
+import ChatEditorFuncButton from '../chat-editor-func-button/chat-editor-func-button.vue'
+import { error } from '@aochuang/common/uni-components/message/message.js'
+import { MESSAGE_TYPE } from 'client-sdk/uni-components/chat-control/index.js'
+
+export default {
+	name: 'BiChatEditorFuncFuncFile',
+	components: {
+		BiOssUpload,
+		ChatEditorFuncButton
+	},
+	props: {
+		uploadRootDirectory: {
+			type: String
+		}
+	},
+	methods: {
+		handleUploadSubDirectory ({ file }) {
+			if (file.type.indexOf('image') >= 0) {
+				return MESSAGE_TYPE.IMAGE
+			} else if (file.type.indexOf('video') >= 0) {
+				return MESSAGE_TYPE.VIDEO
+			} else {
+				return MESSAGE_TYPE.URL
+			}
+		},
+		handleUploadFileSuccess ({ value, file }) {
+			this.$emit('confirm', {
+				file,
+				data: value
+			})
+		}
+	}
+}
+</script>
+
+<style>
+</style>

package/uni-components/chat-editor/chat-editor-func-image/chat-editor-func-image.vue

@@ -0,0 +1,42 @@
+<template>
+	<view class="bi-chat-editor-func-image">
+		<bi-oss-upload
+			source-type="image"
+			sub-directory="3"
+			:root-directory="uploadRootDirectory"
+			@input="handleUploadImageSuccess"
+		>
+			<template slot="handle">
+				<chat-editor-func-button text="图片" icon="image-line"></chat-editor-func-button>
+			</template>
+		</bi-oss-upload>
+	</view>
+</template>
+
+<script>
+import BiOssUpload from '@/common/oss-upload/oss-upload.vue'
+import ChatEditorFuncButton from '../chat-editor-func-button/chat-editor-func-button.vue'
+
+export default {
+	name: 'BiChatEditorFuncImage',
+	components: {
+		BiOssUpload,
+		ChatEditorFuncButton
+	},
+	props: {
+		uploadRootDirectory: {
+			type: String
+		}
+	},
+	methods: {
+		handleUploadImageSuccess (value) {
+			this.$emit('confirm', {
+				data: value
+			})
+		}
+	}
+}
+</script>
+
+<style>
+</style>

package/uni-components/chat-editor/chat-editor-func-video/chat-editor-func-video.vue

@@ -0,0 +1,42 @@
+<template>
+	<view class="bi-chat-editor-func-video">
+		<bi-oss-upload
+			source-type="video"
+			sub-directory="43"
+			:root-directory="uploadRootDirectory"
+			@input="handleUploadVideoSuccess"
+		>
+			<template slot="handle">
+				<chat-editor-func-button text="视频" icon="vidicon-line"></chat-editor-func-button>	
+			</template>
+		</bi-oss-upload>
+	</view>
+</template>
+
+<script>
+import BiOssUpload from '@/common/oss-upload/oss-upload.vue'
+import ChatEditorFuncButton from '../chat-editor-func-button/chat-editor-func-button.vue'
+
+export default {
+	name: 'BiChatEditorFuncVideo',
+	components: {
+		BiOssUpload,
+		ChatEditorFuncButton
+	},
+	props: {
+		uploadRootDirectory: {
+			type: String
+		}
+	},
+	methods: {
+		handleUploadVideoSuccess (value) {
+			this.$emit('confirm', {
+				data: value
+			})
+		}
+	}
+}
+</script>
+
+<style>
+</style>

package/uni-components/chat-editor/chat-editor-func-voice/chat-editor-func-voice.vue

@@ -0,0 +1,25 @@
+<template>
+	<view class="bi-chat-editor-func-voice">
+		<chat-editor-func-button text="录音" icon="mic-line" @click="handleHandleClick"></chat-editor-func-button>
+	</view>
+</template>
+
+<script>
+import ChatEditorFuncButton from '../chat-editor-func-button/chat-editor-func-button.vue'
+import { error } from '@aochuang/common/uni-components/message/message.js'
+
+export default {
+	name: 'BiChatEditorFuncVoice',
+	components: {
+		ChatEditorFuncButton
+	},
+	methods: {
+		handleHandleClick () {
+			error('暂不支持')
+		}
+	}
+}
+</script>
+
+<style>
+</style>