From 536089f55ef7399af9ce9e77cacd9a1d002a7d36 Mon Sep 17 00:00:00 2001
From: xsx <825657193@qq.com>
Date: Sun, 16 Jun 2024 15:00:53 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=9A=E4=BA=BA=E9=9F=B3=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/group/GroupMemberItem.vue  |  70 ++++++++
 .../components/group/GroupMemberSelector.vue  | 161 ++++++++++++++++++
 im-ui/src/components/rtc/RtcGroupVideo.vue    |  42 +++++
 3 files changed, 273 insertions(+)
 create mode 100644 im-ui/src/components/group/GroupMemberItem.vue
 create mode 100644 im-ui/src/components/group/GroupMemberSelector.vue
 create mode 100644 im-ui/src/components/rtc/RtcGroupVideo.vue

diff --git a/im-ui/src/components/group/GroupMemberItem.vue b/im-ui/src/components/group/GroupMemberItem.vue
new file mode 100644
index 0000000..1af7943
--- /dev/null
+++ b/im-ui/src/components/group/GroupMemberItem.vue
@@ -0,0 +1,70 @@
+<template>
+    <div class="group-member-item" :style="{'height':height+'px'}">
+        <div class="member-avatar">
+            <head-image :size="headImageSize" :name="member.aliasName" 
+				:url="member.headImage" :online="member.online"> </head-image>
+        </div>
+        <div class="member-name" :style="{'line-height':height+'px'}">
+            <div>{{ member.aliasName }}</div>
+        </div>
+		<slot></slot>
+    </div>
+</template>
+
+<script>
+import HeadImage from "../common/HeadImage.vue";
+export default {
+    name: "groupMember",
+    components: { HeadImage },
+    data() {
+        return {};
+    },
+    props: {
+        member: {
+            type: Object,
+            required: true
+        },
+        height:{
+            type: Number,
+            default: 50
+        }
+    },
+    computed:{
+        headImageSize(){
+            return Math.ceil(this.height * 0.75)
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.group-member-item {
+    display: flex;
+    margin-bottom: 1px;
+    position: relative;
+    padding: 0 15px;
+    align-items: center;
+    background-color: #fafafa;
+    white-space: nowrap;
+    box-sizing: border-box;
+
+    &:hover {
+        background-color: #eeeeee;
+    }
+
+    &.active {
+        background-color: #eeeeee;
+    }
+
+    .member-name {
+		flex:1;
+        padding-left: 10px;
+        height: 100%;
+        text-align: left;
+        white-space: nowrap;
+        overflow: hidden;
+        font-size: 14px;
+        font-weight: 600;
+    }
+}
+</style>
diff --git a/im-ui/src/components/group/GroupMemberSelector.vue b/im-ui/src/components/group/GroupMemberSelector.vue
new file mode 100644
index 0000000..138d79b
--- /dev/null
+++ b/im-ui/src/components/group/GroupMemberSelector.vue
@@ -0,0 +1,161 @@
+<template>
+	<el-dialog title="选择成员" :visible.sync="isShow" width="50%">
+		<div class="group-member-selector">
+			<div class="left-box">
+				<el-input placeholder="搜索" v-model="searchText">
+					<i class="el-icon-search el-input__icon" slot="suffix"> </i>
+				</el-input>
+				<el-scrollbar style="height:400px;">
+					<div v-for="m in members" :key="m.userId">
+						<group-member-item v-show="!m.quit&&m.aliasName.startsWith(searchText)"
+							:member="m" @click.native="onClickMember(m)">
+							<el-checkbox :disabled="m.locked" v-model="m.checked" @change="onChange(m)"
+								@click.native.stop=""></el-checkbox>
+						</group-member-item>
+					</div>
+				</el-scrollbar>
+			</div>
+			<div class="arrow el-icon-d-arrow-right"></div>
+			<div class="right-box">
+				<div class="select-tip"> 已勾选{{checkedMembers.length}}位成员</div>
+				<div class="checked-member-list">
+					<div v-for="m in members" :key="m.userId">
+						<group-member class="member-item" v-if="m.checked" :member="m"></group-member>
+					</div>
+				</div>
+			</div>
+		</div>
+		<span slot="footer" class="dialog-footer">
+			<el-button @click="close()">取 消</el-button>
+			<el-button type="primary" @click="ok()">确 定</el-button>
+		</span>
+	</el-dialog>
+</template>
+
+<script>
+	import GroupMemberItem from './GroupMemberItem.vue';
+	import GroupMember from './GroupMember.vue';
+
+	export default {
+		name: "addGroupMember",
+		components: {
+			GroupMemberItem,
+			GroupMember
+		},
+		data() {
+			return {
+				isShow: false,
+				searchText: "",
+				maxSize: -1,
+				members: []
+			}
+		},
+		props: {
+			groupId: {
+				type: Number
+			}	
+		},
+		methods: {
+			open(maxSize, checkedIds, lockedIds) {
+				this.maxSize = maxSize;
+				this.isShow = true;
+				this.loadGroupMembers(checkedIds, lockedIds);
+			},
+			loadGroupMembers(checkedIds, lockedIds) {
+				this.$http({
+					url: `/group/members/${this.groupId}`,
+					method: 'get'
+				}).then((members) => {
+					members.forEach((m) => {
+						// 默认选择和锁定的用户
+						m.checked = checkedIds.indexOf(m.userId) >= 0;
+						m.locked = lockedIds.indexOf(m.userId) >= 0;
+					});
+					this.members = members;
+				});
+			},
+			onClickMember(m) {
+				if (!m.locked) {
+					m.checked = !m.checked;
+				}
+				if (this.checkedMembers.length > this.maxSize) {
+					this.$message.error(`最多选择${this.maxSize}位成员`)
+					m.checked = false;
+				}
+			},
+			onChange(m) {
+				if (this.checkedMembers.length > this.maxSize) {
+					this.$message.error(`最多选择${this.maxSize}位成员`)
+					m.checked = false;
+				}
+			},
+			ok() {
+				this.$emit("complete", this.checkedMembers);
+				this.isShow = false;
+			},
+			close() {
+				this.isShow = false;
+			}
+		},
+		computed: {
+			checkedMembers() {
+				let ids = [];
+				this.members.forEach((m) => {
+					if (m.checked) {
+						ids.push(m);
+					}
+				})
+				return ids;
+			}
+		}
+
+	}
+</script>
+
+<style lang="scss">
+	.group-member-selector {
+		display: flex;
+
+		.left-box {
+			width: 48%;
+			border: #587FF0 solid 1px;
+			border-radius: 5px;
+			overflow: hidden;
+		}
+
+
+		.arrow {
+			display: flex;
+			align-items: center;
+			font-size: 20px;
+			padding: 10px;
+			font-weight: 600;
+			color: #687Ff0;
+		}
+
+		.right-box {
+
+			width: 48%;
+			border: #587FF0 solid 1px;
+			border-radius: 5px;
+
+			.select-tip {
+				text-align: left;
+				height: 40px;
+				line-height: 40px;
+				text-indent: 5px;
+			}
+
+			.checked-member-list {
+				padding: 10px;
+				display: flex;
+				flex-direction: row;
+				flex-wrap: wrap;
+
+				.member-item {
+					padding: 2px;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/im-ui/src/components/rtc/RtcGroupVideo.vue b/im-ui/src/components/rtc/RtcGroupVideo.vue
new file mode 100644
index 0000000..ef83b3c
--- /dev/null
+++ b/im-ui/src/components/rtc/RtcGroupVideo.vue
@@ -0,0 +1,42 @@
+<template>
+	<el-dialog v-dialogDrag top="5vh" title="语音通话" :close-on-click-modal="false" :close-on-press-escape="false"
+		:visible.sync="isShow" width="50%">
+		<div class='rtc-group-video'>
+			<div style="padding-top:30px;font-weight: 600; text-align: center;font-size: 16px;">
+				多人音视频通话为付费功能，有需要请联系作者...
+			</div>
+			<div style="padding-top:50px; text-align: center;font-size: 16px;">
+				点击下方文档了解详细信息:
+			</div>
+			<div style="padding-top:10px; text-align: center;font-size: 16px;">
+				<a href="https://www.yuque.com/u1475064/mufu2a/vi7engzluty594s2" target="_blank">
+					付费-音视频通话源码
+				</a>
+			</div>
+
+		</div>
+	</el-dialog>
+</template>
+
+<script>
+	export default {
+		name: "rtcGroupVideo",
+		data() {
+			return {
+				isShow: false
+			}
+		},
+		methods: {
+			open() {
+				this.isShow = true;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.rtc-group-video {
+		height: 300px;
+		background-color: #E8F2FF;
+	}
+</style>
\ No newline at end of file