im-ui-mobile 0.0.98 → 0.0.99

package/components/im-mention-picker/im-mention-picker.vue

@@ -1,192 +1,192 @@
-<template>
-	<u-popup ref="popup" mode="bottom" @open="onChange" @close="onChange">
-		<view class="mention-picker">
-			<view class="chat-at-top">
-				<view class="chat-at-tip"> 选择要提醒的人</view>
-				<button class="chat-at-btn" size="mini" @click="onClean()">清空 </button>
-				<button class="chat-at-btn" size="mini" @click="onOk()">确定({{ atUserIds.length }})
-				</button>
-			</view>
-			<scroll-view v-show="atUserIds.length > 0" scroll-x="true" scroll-left="120">
-				<view class="at-user-items">
-					<view v-for="m in checkedMembers" class="at-user-item" :key="m.userId">
-						<im-avatar :name="m.showNickName" :url="m.headImage" size="mini" />
-					</view>
-				</view>
-			</scroll-view>
-			<view class="search-bar">
-				<u-search v-model="searchText" :show-action="false" shape="round" placeholder="搜索"></u-search>
-			</view>
-			<view class="member-items">
-				<im-virtual-scroller :items="memberItems">
-					<template v-slot="{ item }">
-						<view class="member-item" @click="onSwitchChecked(item)">
-							<im-avatar :name="item.showNickName" :online="item.online" :url="item.headImage"
-								size="small" />
-							<view class="member-name">{{ item.showNickName }}</view>
-							<radio :checked="item.checked" :disabled="item.locked"
-								@click.stop="onSwitchChecked(item)" />
-						</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'
-import { GroupMember } from '../../libs';
-
-interface Props {
-	ownerId?: number;
-	members?: any[];
-}
-
-interface Emits {
-	(e: 'complete', userIds: number[]): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	ownerId: 0,
-	members: () => []
-});
-
-const emit = defineEmits<Emits>();
-
-const searchText = ref("");
-const showMembers = ref<GroupMember[]>([]);
-const popup = ref()
-
-const init = (userId: number, atUserIds: number[]) => {
-	showMembers.value = [];
-	// const userId = useUserStore().userInfo.id;
-
-	if (props.ownerId === userId) {
-		showMembers.value.push({
-			userId: -1,
-			showNickName: "全体成员"
-		});
-	}
-
-	props.members.forEach((m: GroupMember) => {
-		if (!m.quit && m.userId !== userId) {
-			m.checked = atUserIds.includes(m.userId);
-			showMembers.value.push(m);
-		}
-	});
-};
-
-const open = () => {
-	// 需要根据实际的 popup 引用调整
-	popup.value.open();
-};
-
-const onSwitchChecked = (member: GroupMember) => {
-	member.checked = !member.checked;
-};
-
-const onClean = () => {
-	showMembers.value.forEach((m) => {
-		m.checked = false;
-	});
-};
-
-const onOk = () => {
-	popup.value.close();
-};
-
-const onChange = (e: any) => {
-	if (!e.show) {
-		emit("complete", atUserIds.value);
-	}
-};
-
-const atUserIds = computed(() => {
-	return showMembers.value.filter(m => m.checked).map(m => m.userId);
-});
-
-const checkedMembers = computed(() => {
-	return showMembers.value.filter(m => m.checked);
-});
-
-const memberItems = computed(() => {
-	return showMembers.value.filter(m => m.showNickName.includes(searchText.value));
-});
-
-defineExpose({
-	init,
-	open
-})
-</script>
-
-<style lang="scss" scoped>
-.mention-picker {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	background-color: white;
-	padding: 10rpx;
-	//border-radius: 15rpx;
-
-	.chat-at-top {
-		display: flex;
-		align-items: center;
-		height: 70rpx;
-		padding: 10rpx;
-
-		.chat-at-tip {
-			flex: 1;
-		}
-
-		.chat-at-btn {
-			margin-left: 10rpx;
-		}
-	}
-
-
-	.at-user-items {
-		display: flex;
-		align-items: center;
-		height: 90rpx;
-
-		.at-user-item {
-			padding: 3rpx;
-		}
-	}
-
-
-
-	.member-items {
-		position: relative;
-		flex: 1;
-		overflow: hidden;
-
-		.member-item {
-			height: 110rpx;
-			display: flex;
-			position: relative;
-			padding: 0 30rpx;
-			align-items: center;
-			background-color: white;
-			white-space: nowrap;
-			margin-bottom: 1px;
-
-			&:hover {
-				background-color: $im-bg-active;
-			}
-
-			.member-name {
-				flex: 1;
-				padding-left: 20rpx;
-				font-size: $im-font-size;
-				line-height: 60rpx;
-				white-space: nowrap;
-				overflow: hidden;
-			}
-		}
-	}
-}
+<template>
+	<u-popup ref="popup" mode="bottom" @open="onChange" @close="onChange">
+		<view class="mention-picker">
+			<view class="chat-at-top">
+				<view class="chat-at-tip"> 选择要提醒的人</view>
+				<button class="chat-at-btn" size="mini" @click="onClean()">清空 </button>
+				<button class="chat-at-btn" size="mini" @click="onOk()">确定({{ atUserIds.length }})
+				</button>
+			</view>
+			<scroll-view v-show="atUserIds.length > 0" scroll-x="true" scroll-left="120">
+				<view class="at-user-items">
+					<view v-for="m in checkedMembers" class="at-user-item" :key="m.userId">
+						<im-avatar :name="m.showNickName" :url="m.headImage" size="mini" />
+					</view>
+				</view>
+			</scroll-view>
+			<view class="search-bar">
+				<u-search v-model="searchText" :show-action="false" shape="round" placeholder="搜索"></u-search>
+			</view>
+			<view class="member-items">
+				<im-virtual-list :data="memberItems">
+					<template v-slot="{ item }">
+						<view class="member-item" @click="onSwitchChecked(item)">
+							<im-avatar :name="item.showNickName" :online="item.online" :url="item.headImage"
+								size="small" />
+							<view class="member-name">{{ item.showNickName }}</view>
+							<radio :checked="item.checked" :disabled="item.locked"
+								@click.stop="onSwitchChecked(item)" />
+						</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'
+import { GroupMember } from '../../libs';
+
+interface Props {
+	ownerId?: number;
+	members?: any[];
+}
+
+interface Emits {
+	(e: 'complete', userIds: number[]): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	ownerId: 0,
+	members: () => []
+});
+
+const emit = defineEmits<Emits>();
+
+const searchText = ref("");
+const showMembers = ref<GroupMember[]>([]);
+const popup = ref()
+
+const init = (userId: number, atUserIds: number[]) => {
+	showMembers.value = [];
+	// const userId = useUserStore().userInfo.id;
+
+	if (props.ownerId === userId) {
+		showMembers.value.push({
+			userId: -1,
+			showNickName: "全体成员"
+		});
+	}
+
+	props.members.forEach((m: GroupMember) => {
+		if (!m.quit && m.userId !== userId) {
+			m.checked = atUserIds.includes(m.userId);
+			showMembers.value.push(m);
+		}
+	});
+};
+
+const open = () => {
+	// 需要根据实际的 popup 引用调整
+	popup.value.open();
+};
+
+const onSwitchChecked = (member: GroupMember) => {
+	member.checked = !member.checked;
+};
+
+const onClean = () => {
+	showMembers.value.forEach((m) => {
+		m.checked = false;
+	});
+};
+
+const onOk = () => {
+	popup.value.close();
+};
+
+const onChange = (e: any) => {
+	if (!e.show) {
+		emit("complete", atUserIds.value);
+	}
+};
+
+const atUserIds = computed(() => {
+	return showMembers.value.filter(m => m.checked).map(m => m.userId);
+});
+
+const checkedMembers = computed(() => {
+	return showMembers.value.filter(m => m.checked);
+});
+
+const memberItems = computed(() => {
+	return showMembers.value.filter(m => m.showNickName.includes(searchText.value));
+});
+
+defineExpose({
+	init,
+	open
+})
+</script>
+
+<style lang="scss" scoped>
+.mention-picker {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	background-color: white;
+	padding: 10rpx;
+	//border-radius: 15rpx;
+
+	.chat-at-top {
+		display: flex;
+		align-items: center;
+		height: 70rpx;
+		padding: 10rpx;
+
+		.chat-at-tip {
+			flex: 1;
+		}
+
+		.chat-at-btn {
+			margin-left: 10rpx;
+		}
+	}
+
+
+	.at-user-items {
+		display: flex;
+		align-items: center;
+		height: 90rpx;
+
+		.at-user-item {
+			padding: 3rpx;
+		}
+	}
+
+
+
+	.member-items {
+		position: relative;
+		flex: 1;
+		overflow: hidden;
+
+		.member-item {
+			height: 110rpx;
+			display: flex;
+			position: relative;
+			padding: 0 30rpx;
+			align-items: center;
+			background-color: white;
+			white-space: nowrap;
+			margin-bottom: 1px;
+
+			&:hover {
+				background-color: $im-bg-active;
+			}
+
+			.member-name {
+				flex: 1;
+				padding-left: 20rpx;
+				font-size: $im-font-size;
+				line-height: 60rpx;
+				white-space: nowrap;
+				overflow: hidden;
+			}
+		}
+	}
+}
 </style>