im-ui-mobile 0.0.98 → 0.1.0

package/components/im-group-member-selector/im-group-member-selector.vue

@@ -1,203 +1,203 @@
-<template>
-	<u-popup ref="popup" mode="bottom">
-		<view class="group-member-selector">
-			<view class="top-bar">
-				<view class="top-tip">选择成员</view>
-				<button class="top-btn" size="mini" @click="onClean()">清空 </button>
-				<button class="top-btn" size="mini" @click="onOk()">确定({{ checkedIds.length }})
-				</button>
-			</view>
-			<scroll-view v-show="checkedIds.length > 0" scroll-x="true" scroll-left="120">
-				<view class="checked-users">
-					<view v-for="m in checkedMembers" class="user-item" :key="m.userId">
-						<im-avatar :name="m.showNickName" :url="m.headImage" :size="60" />
-					</view>
-				</view>
-			</scroll-view>
-			<view class="search-bar">
-				<u-search v-model="searchText" :show-action="false" placeholder="搜索"></u-search>
-			</view>
-			<view class="member-items">
-				<im-virtual-scroller :items="showMembers">
-					<template v-slot="{ item }">
-						<view class="member-item" @click="onSwitchChecked(item)">
-							<im-avatar :name="item.showNickName" :online="item.online" :url="item.headImage"
-								:size="90" />
-							<view class="member-name">{{ item.showNickName }}
-							</view>
-							<view class="member-checked">
-								<radio :checked="item.checked" :disabled="item.locked"
-									@click.stop="onSwitchChecked(item)" />
-							</view>
-						</view>
-					</template>
-				</im-virtual-scroller>
-			</view>
-		</view>
-	</u-popup>
-</template>
-
-
-<script setup lang="ts">
-import { ref, computed } from 'vue'
-import ImAvatar from '../im-avatar/im-avatar.vue'
-import ImVirtualScroller from '../im-virtual-scroller/im-virtual-scroller.vue'
-
-interface Props {
-	group?: any;
-	members?: any[];
-	maxSize?: number;
-}
-
-interface Emits {
-	(e: 'complete', userIds: number[]): void;
-}
-
-interface Member {
-	userId: number;
-	checked?: boolean;
-	locked?: boolean;
-	hide?: boolean;
-	quit?: boolean;
-	showNickName: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	members: () => [],
-	maxSize: 50
-});
-
-const emit = defineEmits<Emits>();
-
-const searchText = ref("");
-const popup = ref() // 组件引用
-
-const init = (checkedIds: number[], lockedIds: number[], hideIds: number[]) => {
-	props.members.forEach((m: Member) => {
-		m.checked = checkedIds.includes(m.userId);
-		m.locked = lockedIds.includes(m.userId);
-		m.hide = hideIds.includes(m.userId);
-	});
-};
-
-const open = () => {
-	popup.value.open();
-};
-
-const onSwitchChecked = (m: Member) => {
-	if (!m.locked) {
-		m.checked = !m.checked;
-	}
-	// 达到选择上限
-	if (props.maxSize > 0 && checkedIds.value.length > props.maxSize) {
-		m.checked = false;
-		uni.showToast({
-			title: `最多选择${props.maxSize}位用户`,
-			icon: "none"
-		});
-	}
-};
-
-const onClean = () => {
-	props.members.forEach((m: Member) => {
-		if (!m.locked && m.checked) {
-			m.checked = false;
-		}
-	});
-};
-
-const onOk = () => {
-	// this.$refs.popup.close();
-	emit("complete", checkedIds.value);
-};
-
-const checkedIds = computed(() => {
-	return checkedMembers.value.map(m => m.userId);
-});
-
-const checkedMembers = computed(() => {
-	return props.members.filter((m: Member) => !m.quit && !m.hide && m.checked);
-});
-
-const showMembers = computed(() => {
-	return props.members.filter((m: Member) =>
-		!m.quit && !m.hide && m.showNickName.includes(searchText.value)
-	);
-});
-
-defineExpose({
-	init,
-	open
-})
-</script>
-
-
-<style lang="scss" scoped>
-.group-member-selector {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	background-color: white;
-	padding: 10rpx;
-	border-radius: 15rpx 15rpx 0 0;
-	overflow: hidden;
-
-	.top-bar {
-		display: flex;
-		align-items: center;
-		height: 70rpx;
-		padding: 10rpx 30rpx;
-
-		.top-tip {
-			flex: 1;
-		}
-
-		.top-btn {
-			margin-left: 10rpx;
-		}
-	}
-
-	.checked-users {
-		display: flex;
-		align-items: center;
-		height: 90rpx;
-		padding: 0 30rpx;
-
-		.user-item {
-			padding: 3rpx;
-		}
-	}
-
-	.member-items {
-		position: relative;
-		flex: 1;
-		overflow: hidden;
-
-		.member-item {
-			height: 120rpx;
-			display: flex;
-			position: relative;
-			padding: 0 30rpx;
-			align-items: center;
-			background-color: white;
-			white-space: nowrap;
-
-			.member-name {
-				display: flex;
-				align-items: center;
-				flex: 1;
-				padding-left: 20rpx;
-				font-size: 30rpx;
-				font-weight: 600;
-				line-height: 60rpx;
-				white-space: nowrap;
-				overflow: hidden;
-
-				.uni-tag {
-					margin-left: 5rpx;
-				}
-			}
-		}
-	}
-}
+<template>
+	<u-popup ref="popup" mode="bottom">
+		<view class="group-member-selector">
+			<view class="top-bar">
+				<view class="top-tip">选择成员</view>
+				<button class="top-btn" size="mini" @click="onClean()">清空 </button>
+				<button class="top-btn" size="mini" @click="onOk()">确定({{ checkedIds.length }})
+				</button>
+			</view>
+			<scroll-view v-show="checkedIds.length > 0" scroll-x="true" scroll-left="120">
+				<view class="checked-users">
+					<view v-for="m in checkedMembers" class="user-item" :key="m.userId">
+						<im-avatar :name="m.showNickName" :url="m.headImage" :size="60" />
+					</view>
+				</view>
+			</scroll-view>
+			<view class="search-bar">
+				<u-search v-model="searchText" :show-action="false" placeholder="搜索"></u-search>
+			</view>
+			<view class="member-items">
+				<im-virtual-list :data="showMembers">
+					<template v-slot="{ item }">
+						<view class="member-item" @click="onSwitchChecked(item)">
+							<im-avatar :name="item.showNickName" :online="item.online" :url="item.headImage"
+								:size="90" />
+							<view class="member-name">{{ item.showNickName }}
+							</view>
+							<view class="member-checked">
+								<radio :checked="item.checked" :disabled="item.locked"
+									@click.stop="onSwitchChecked(item)" />
+							</view>
+						</view>
+					</template>
+				</im-virtual-list>
+			</view>
+		</view>
+	</u-popup>
+</template>
+
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import ImAvatar from '../im-avatar/im-avatar.vue'
+import ImVirtualList from '../im-virtual-list/im-virtual-list.vue'
+
+interface Props {
+	group?: any;
+	members?: any[];
+	maxSize?: number;
+}
+
+interface Emits {
+	(e: 'complete', userIds: number[]): void;
+}
+
+interface Member {
+	userId: number;
+	checked?: boolean;
+	locked?: boolean;
+	hide?: boolean;
+	quit?: boolean;
+	showNickName: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	members: () => [],
+	maxSize: 50
+});
+
+const emit = defineEmits<Emits>();
+
+const searchText = ref("");
+const popup = ref() // 组件引用
+
+const init = (checkedIds: number[], lockedIds: number[], hideIds: number[]) => {
+	props.members.forEach((m: Member) => {
+		m.checked = checkedIds.includes(m.userId);
+		m.locked = lockedIds.includes(m.userId);
+		m.hide = hideIds.includes(m.userId);
+	});
+};
+
+const open = () => {
+	popup.value.open();
+};
+
+const onSwitchChecked = (m: Member) => {
+	if (!m.locked) {
+		m.checked = !m.checked;
+	}
+	// 达到选择上限
+	if (props.maxSize > 0 && checkedIds.value.length > props.maxSize) {
+		m.checked = false;
+		uni.showToast({
+			title: `最多选择${props.maxSize}位用户`,
+			icon: "none"
+		});
+	}
+};
+
+const onClean = () => {
+	props.members.forEach((m: Member) => {
+		if (!m.locked && m.checked) {
+			m.checked = false;
+		}
+	});
+};
+
+const onOk = () => {
+	// this.$refs.popup.close();
+	emit("complete", checkedIds.value);
+};
+
+const checkedIds = computed(() => {
+	return checkedMembers.value.map(m => m.userId);
+});
+
+const checkedMembers = computed(() => {
+	return props.members.filter((m: Member) => !m.quit && !m.hide && m.checked);
+});
+
+const showMembers = computed(() => {
+	return props.members.filter((m: Member) =>
+		!m.quit && !m.hide && m.showNickName.includes(searchText.value)
+	);
+});
+
+defineExpose({
+	init,
+	open
+})
+</script>
+
+
+<style lang="scss" scoped>
+.group-member-selector {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	background-color: white;
+	padding: 10rpx;
+	border-radius: 15rpx 15rpx 0 0;
+	overflow: hidden;
+
+	.top-bar {
+		display: flex;
+		align-items: center;
+		height: 70rpx;
+		padding: 10rpx 30rpx;
+
+		.top-tip {
+			flex: 1;
+		}
+
+		.top-btn {
+			margin-left: 10rpx;
+		}
+	}
+
+	.checked-users {
+		display: flex;
+		align-items: center;
+		height: 90rpx;
+		padding: 0 30rpx;
+
+		.user-item {
+			padding: 3rpx;
+		}
+	}
+
+	.member-items {
+		position: relative;
+		flex: 1;
+		overflow: hidden;
+
+		.member-item {
+			height: 120rpx;
+			display: flex;
+			position: relative;
+			padding: 0 30rpx;
+			align-items: center;
+			background-color: white;
+			white-space: nowrap;
+
+			.member-name {
+				display: flex;
+				align-items: center;
+				flex: 1;
+				padding-left: 20rpx;
+				font-size: 30rpx;
+				font-weight: 600;
+				line-height: 60rpx;
+				white-space: nowrap;
+				overflow: hidden;
+
+				.uni-tag {
+					margin-left: 5rpx;
+				}
+			}
+		}
+	}
+}
 </style>

package/components/im-group-rtc-join/im-group-rtc-join.vue

@@ -1,113 +1,113 @@
-<template>
-	<u-popup ref="popup" mode="center">
-		<u-modal :show="true" :zoom="false" :async-close="false" title="是否加入通话?" confirm-text="加入" @confirm="onOk">
-			<div class="group-rtc-join">
-				<div class="host-info">
-					<div>发起人</div>
-					<im-avatar :name="rtcInfo.host.nickName" :url="rtcInfo.host.headImage" :size="80" />
-				</div>
-				<div class="user-info">
-					<div>{{ rtcInfo.userInfos.length + '人正在通话中' }}</div>
-					<scroll-view scroll-x="true" scroll-left="120">
-						<view class="user-list">
-							<view v-for="user in rtcInfo.userInfos" class="user-item" :key="user.id">
-								<im-avatar :name="user.nickName" :url="user.headImage" :size="80" />
-							</view>
-						</view>
-					</scroll-view>
-				</div>
-			</div>
-		</u-modal>
-	</u-popup>
-</template>
-
-<script setup lang="ts">
-import ImAvatar from '../im-avatar/im-avatar.vue'
-import { ref } from 'vue';
-import { UserInfo } from '../../libs';
-
-interface Props {
-	groupId?: number;
-}
-
-interface RtcInfo {
-	userInfos: Array<{
-		id: number;
-		nickName: string;
-		headImage: string;
-		isCamera?: boolean;
-		isMicroPhone?: boolean;
-	}>,
-	host: any
-}
-
-const props = defineProps<Props>();
-
-const rtcInfo = ref<RtcInfo>({ userInfos: [], host: {} });
-const userInfo = ref<UserInfo>()
-
-interface Emits {
-	(e: 'ok', groupId: number, inviterId: number, userInfos: string): void
-}
-const emit = defineEmits<Emits>()
-
-const open = (userInfo1: UserInfo, rtcInfoData: RtcInfo) => {
-	userInfo.value = userInfo1;
-	rtcInfo.value = rtcInfoData;
-};
-
-const onOk = () => {
-	const users = [...rtcInfo.value.userInfos];
-	const mine = userInfo.value as UserInfo // useUserStore().userInfo;
-
-	// 加入自己的信息
-	if (!users.find((user) => user.id === mine.id)) {
-		users.push({
-			id: mine.id,
-			nickName: mine.nickName,
-			headImage: String(mine.headImageThumb),
-			isCamera: false,
-			isMicroPhone: true
-		});
-	}
-
-	const userInfos = encodeURIComponent(JSON.stringify(users));
-
-	// TODO:组件化
-	// uni.navigateTo({
-	// 	url: `/pages-chat/pages/chat/chat-group-video?groupId=${props.groupId}&isHost=false&inviterId=${mine.id}&userInfos=${userInfos}`
-	// });
-
-	emit('ok', Number(props.groupId), mine.id, userInfos)
-};
-
-defineExpose({
-	open
-})
-</script>
-
-<style lang="scss" scoped>
-.group-rtc-join {
-	width: 100%;
-
-	.host-info {
-		font-size: 16px;
-		padding: 10px;
-	}
-
-	.user-info {
-		font-size: 16px;
-		padding: 10px;
-	}
-
-	.user-list {
-		display: flex;
-		align-items: center;
-		height: 90rpx;
-
-		.user-item {
-			padding: 3rpx;
-		}
-	}
-}
+<template>
+	<u-popup ref="popup" mode="center">
+		<u-modal :show="true" :zoom="false" :async-close="false" title="是否加入通话?" confirm-text="加入" @confirm="onOk">
+			<div class="group-rtc-join">
+				<div class="host-info">
+					<div>发起人</div>
+					<im-avatar :name="rtcInfo.host.nickName" :url="rtcInfo.host.headImage" :size="80" />
+				</div>
+				<div class="user-info">
+					<div>{{ rtcInfo.userInfos.length + '人正在通话中' }}</div>
+					<scroll-view scroll-x="true" scroll-left="120">
+						<view class="user-list">
+							<view v-for="user in rtcInfo.userInfos" class="user-item" :key="user.id">
+								<im-avatar :name="user.nickName" :url="user.headImage" :size="80" />
+							</view>
+						</view>
+					</scroll-view>
+				</div>
+			</div>
+		</u-modal>
+	</u-popup>
+</template>
+
+<script setup lang="ts">
+import ImAvatar from '../im-avatar/im-avatar.vue'
+import { ref } from 'vue';
+import { UserInfo } from '../../libs';
+
+interface Props {
+	groupId?: number;
+}
+
+interface RtcInfo {
+	userInfos: Array<{
+		id: number;
+		nickName: string;
+		headImage: string;
+		isCamera?: boolean;
+		isMicroPhone?: boolean;
+	}>,
+	host: any
+}
+
+const props = defineProps<Props>();
+
+const rtcInfo = ref<RtcInfo>({ userInfos: [], host: {} });
+const userInfo = ref<UserInfo>()
+
+interface Emits {
+	(e: 'ok', groupId: number, inviterId: number, userInfos: string): void
+}
+const emit = defineEmits<Emits>()
+
+const open = (userInfo1: UserInfo, rtcInfoData: RtcInfo) => {
+	userInfo.value = userInfo1;
+	rtcInfo.value = rtcInfoData;
+};
+
+const onOk = () => {
+	const users = [...rtcInfo.value.userInfos];
+	const mine = userInfo.value as UserInfo // useUserStore().userInfo;
+
+	// 加入自己的信息
+	if (!users.find((user) => user.id === mine.id)) {
+		users.push({
+			id: mine.id,
+			nickName: mine.nickName,
+			headImage: String(mine.headImageThumb),
+			isCamera: false,
+			isMicroPhone: true
+		});
+	}
+
+	const userInfos = encodeURIComponent(JSON.stringify(users));
+
+	// TODO:组件化
+	// uni.navigateTo({
+	// 	url: `/pages-chat/pages/chat/chat-group-video?groupId=${props.groupId}&isHost=false&inviterId=${mine.id}&userInfos=${userInfos}`
+	// });
+
+	emit('ok', Number(props.groupId), mine.id, userInfos)
+};
+
+defineExpose({
+	open
+})
+</script>
+
+<style lang="scss" scoped>
+.group-rtc-join {
+	width: 100%;
+
+	.host-info {
+		font-size: 16px;
+		padding: 10px;
+	}
+
+	.user-info {
+		font-size: 16px;
+		padding: 10px;
+	}
+
+	.user-list {
+		display: flex;
+		align-items: center;
+		height: 90rpx;
+
+		.user-item {
+			padding: 3rpx;
+		}
+	}
+}
 </style>