ZhongRuan-ImProject/im-uniapp/components/group-rtc-join/group-rtc-join.vue

<template>
	<uni-popup ref="popup" type="center">
		<uni-popup-dialog mode="base" message="成功消息" :duration="2000" title="是否加入通话?" confirmText="加入"
			@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">
								<head-image :name="user.nickName" :url="user.headImage" :size="80"></head-image>
							</view>
						</view>
					</scroll-view>
				</div>
			</div>
		</uni-popup-dialog>
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				rtcInfo: {}
			}
		},
		props: {
			groupId: {
				type: Number
			}
		},
		methods: {
			open(rtcInfo) {
				this.rtcInfo = rtcInfo;
				this.$refs.popup.open();
			},
			onOk() {
				let users = this.rtcInfo.userInfos;
				let mine = this.$store.state.userStore.userInfo;
				// 加入自己的信息
				if(!users.find((user)=>user.id==mine.id)){
					users.push({
						id: mine.id,
						nickName: mine.nickName,
						headImage: mine.headImageThumb,
						isCamera: false,
						isMicroPhone: true
					})
				}
				const userInfos = encodeURIComponent(JSON.stringify(users));
				uni.navigateTo({
					url: `/pages/chat/chat-group-video?groupId=${this.groupId}&isHost=false
						&inviterId=${mine.id}&userInfos=${userInfos}`
				})
			}
		}
	}
</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>