im-ui-mobile 0.0.43 → 0.0.44

package/components/im-group-item/im-group-item.vue

@@ -0,0 +1,60 @@
+<template>
+	<view class="group-item" @click="showGroupInfo()">
+		<head-image :name="group.showGroupName" :url="group.headImageThumb" size="small"></head-image>
+		<view class="group-name">
+			<view>{{ group.showGroupName }}</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+	group?: any;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+	(e: 'click', targetId: number): void
+}
+
+const emit = defineEmits<Emits>()
+
+const showGroupInfo = () => {
+	// TODO:组件化
+	// uni.navigateTo({
+	// 	url: "/pages-contacts/pages/group/info?id=" + props.group?.id
+	// });
+
+	emit('click', props.group?.id)
+};
+</script>
+
+<style scope lang="scss">
+.group-item {
+	height: 90rpx;
+	display: flex;
+	margin-bottom: 2rpx;
+	position: relative;
+	padding: 18rpx 20rpx;
+	align-items: center;
+	background-color: white;
+	white-space: nowrap;
+
+	&:hover {
+		background-color: $im-bg-active;
+	}
+
+	&.active {
+		background-color: $im-bg-active;
+	}
+
+	.group-name {
+		font-size: $im-font-size;
+		padding-left: 20rpx;
+		text-align: left;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+}
+</style>

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

@@ -0,0 +1,199 @@
+<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">
+						<head-image :name="m.showNickName" :url="m.headImage" :size="60"></head-image>
+					</view>
+				</view>
+			</scroll-view>
+			<view class="search-bar">
+				<u-search v-model="searchText" :show-action="false" placeholder="搜索"></u-search>
+			</view>
+			<view class="member-items">
+				<virtual-scroller :items="showMembers">
+					<template v-slot="{ item }">
+						<view class="member-item" @click="onSwitchChecked(item)">
+							<head-image :name="item.showNickName" :online="item.online" :url="item.headImage"
+								:size="90"></head-image>
+							<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>
+				</virtual-scroller>
+			</view>
+		</view>
+	</u-popup>
+</template>
+
+
+<script setup lang="ts">
+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

@@ -0,0 +1,112 @@
+<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>
+					<head-image :name="rtcInfo.host.nickName" :url="rtcInfo.host.headImage" :size="80"></head-image>
+				</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">
+								<head-image :name="user.nickName" :url="user.headImage" :size="80"></head-image>
+							</view>
+						</view>
+					</scroll-view>
+				</div>
+			</div>
+		</u-modal>
+	</u-popup>
+</template>
+
+<script setup lang="ts">
+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>

package/components/im-head-image/im-head-image.vue

@@ -0,0 +1,122 @@
+<template>
+	<view class="head-image  none-pointer-events" @click="showUserInfo" :title="name">
+		<image v-if="url" class="avatar-image" :src="url" :style="avatarImageStyle" lazy-load="true"
+			mode="aspectFill" />
+		<view v-else class="avatar-text" :style="avatarTextStyle">
+			{{ name?.substring(0, 1).toUpperCase() }}
+		</view>
+		<view v-if="online" class="online" title="用户当前在线" />
+	</view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+	id?: number;
+	size?: number | string;
+	url?: string;
+	name?: string;
+	radius?: string;
+	online?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	size: 'default',
+	name: '',
+	radius: "50%",
+	online: false
+});
+
+interface Emits {
+	(e: 'click', id: number): void
+}
+const emit = defineEmits<Emits>()
+
+const colors = [
+	"#5daa31", "#c7515a", "#e03697", "#85029b",
+	"#c9b455", "#326eb6"
+];
+
+const showUserInfo = () => {
+	if (props.id && props.id > 0) {
+		// TODO:组件化
+		// uni.navigateTo({ url: "/pages/common/user-info?id=" + props.id });
+		emit('click', props.id)
+	}
+};
+
+const _size = computed(() => {
+	if (typeof props.size === 'number') {
+		return props.size;
+	} else if (typeof props.size === 'string') {
+		const sizeMap: Record<string, number> = {
+			'default': 96,
+			'small': 84,
+			'smaller': 72,
+			'mini': 60,
+			'minier': 48,
+			'lage': 108,
+			'lager': 120,
+		};
+		return sizeMap[props.size] || 96;
+	}
+	return 96;
+});
+
+const avatarImageStyle = computed(() => {
+	return `width:${_size.value}rpx;height:${_size.value}rpx;`;
+});
+
+const avatarTextStyle = computed(() => {
+	return `width: ${_size.value}rpx;
+          height:${_size.value}rpx;
+          background: linear-gradient(145deg,#ffffff20 25%,#00000060),${textColor.value};
+          font-size:${_size.value * 0.45}rpx;
+          border-radius: ${props.radius};`;
+});
+
+const textColor = computed(() => {
+	if (!props.name) {
+		return '#fff';
+	}
+	let hash = 0;
+	for (let i = 0; i < props.name.length; i++) {
+		hash += props.name.charCodeAt(i);
+	}
+	return colors[hash % colors.length];
+});
+</script>
+
+<style scoped lang="scss">
+.head-image {
+	position: relative;
+	cursor: pointer;
+
+	.avatar-image {
+		position: relative;
+		overflow: hidden;
+		border-radius: 50%;
+		vertical-align: bottom;
+	}
+
+	.avatar-text {
+		color: white;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.online {
+		position: absolute;
+		right: -10%;
+		bottom: 0;
+		width: 24rpx;
+		height: 24rpx;
+		background: limegreen;
+		border-radius: 50%;
+		border: 6rpx solid white;
+	}
+}
+</style>

package/components/im-image-upload/im-image-upload.vue

@@ -0,0 +1,90 @@
+<template>
+	<view @click="selectAndUpload()">
+		<slot></slot>
+	</view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+	maxCount?: number;
+	maxSize?: number;
+	sourceType?: string;
+	isPermanent?: boolean;
+	thumbSize?: number;
+	onBefore?: (file: any) => boolean;
+	onSuccess?: (file: any, data: any) => void;
+	onError?: (file: any, error: any) => void;
+	uploadUrl: string;
+	token?: string;
+}
+
+interface UploadResponse {
+	code: number;
+	message: string;
+	data?: any;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	maxCount: 1,
+	maxSize: 5 * 1024 * 1024,
+	sourceType: 'album',
+	isPermanent: false,
+	thumbSize: 50
+});
+
+const uploadHeaders = ref({
+	accessToken: uni.getStorageSync('loginInfo').accessToken
+});
+
+const selectAndUpload = () => {
+	uni.chooseImage({
+		count: props.maxCount,
+		sourceType: [props.sourceType],
+		sizeType: ['original'],
+		success: (res: any) => {
+			res.tempFiles.forEach((file: any) => {
+				if (!props.onBefore || props.onBefore(file)) {
+					// 调用上传图片的接口
+					uploadImage(file);
+				}
+			});
+		}
+	});
+};
+
+const uploadImage = (file: any) => {
+	const uploadUrl = props.uploadUrl + `?isPermanent=${props.isPermanent}&thumbSize=${props.thumbSize}`;
+
+	uni.uploadFile({
+		url: uploadUrl, //env.BaseApiUrl + action,
+		header: {
+			accessToken: props.token // getToken()
+		},
+		filePath: file.path,
+		name: 'file',
+		success: (res) => {
+			const data: UploadResponse = JSON.parse(res.data);
+			if (data.code !== 200) {
+				uni.showToast({
+					icon: "none",
+					title: data.message,
+				});
+				props.onError?.(file, data);
+			} else {
+				props.onSuccess?.(file, data);
+			}
+		},
+		fail: (err) => {
+			console.log(err);
+			props.onError?.(file, err);
+		}
+	});
+};
+
+// 暴露方法给父组件
+// defineExpose({
+// 	selectAndUpload
+// });
+</script>
+
+<style></style>

package/components/im-loading/im-loading.vue

@@ -0,0 +1,63 @@
+<template>
+	<view class="loading" :style="loadingStyle">
+		<view class="rotate iconfont icon-loading" :style="icontStyle"></view>
+		<slot></slot>
+	</view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+	size?: number;
+	iconColor?: string;
+	mask?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	size: 100,
+	iconColor: '',
+	mask: true
+});
+
+const icontStyle = computed(() => {
+	let style = `font-size:${props.size}rpx;`;
+	if (props.iconColor) {
+		style += `color: ${props.iconColor};`;
+	} else if (props.mask) {
+		style += 'color: #eee;';
+	}
+	return style;
+});
+
+const loadingStyle = computed(() => {
+	return props.mask ? "background: rgba(0, 0, 0, 0.3);" : "";
+});
+</script>
+
+<style lang="scss" scoped>
+.loading {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 10000;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.rotate {
+	animation: rotate 2s ease-in-out infinite;
+
+}
+
+@keyframes rotate {
+	from {
+		transform: rotate(0deg)
+	}
+
+	to {
+		transform: rotate(360deg)
+	}
+}
+</style>