heshanApp/pages_im/pages/conversation/chating/components/MessageItem/MeetingInviteMessageRender.vue

<template>
	<view class="meeting_wrap" @click="tryJoinMeeting">
		<view class="meeting_corner_mark"></view>
		<view class="title">
			<image class="meeting_icon" src="../../../../../static/images/meeting_icon.png" mode="aspectFit"></image>
			<text class="subject">{{ data.subject }}</text>
		</view>
		<view class="meeting_info_list">
			<view class="meeting_info_item">
				<text class="meeting_info_text">开始时间：{{ startTimeStr }}</text>
			</view>
			<view class="meeting_info_item">
				<text class="meeting_info_text">会议时长：{{ durationStr }}</text>
			</view>
			<view class="meeting_info_item">
				<text class="meeting_info_text">会议号：{{ data.id }}</text>
			</view>
		</view>
		<view class="join_tip">
			<text class="join_tip_text">进入会议</text>
			<image class="join_arrow" src="../../../../../static/images/meeting_join_arrow.png" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
import dayjs from "dayjs";
import { meetingModule, meetingErrorHandle } from "../../../../../util/imCommon";
import { mapGetters } from "vuex";
import config from "../../../../../common/config";
import { joinMeeting } from '../../../../../api/meeting'

const secondsToTime = {
	1800: "30分钟",
	3600: "1小时",
	5400: "1.5小时",
	7200: "2小时",
};

export default {
	name: "MeetingInviteMessageRender",
	components: {},
	props: {
		data: Object,
		isSender: {
			type: Boolean,
			default: false,
		}
	},
	data() {
		return {};
	},
	computed: {
		...mapGetters(["storeSelfInfo"]),
		startTimeStr() {
			return dayjs(this.data.start * 1000).format("M月D日 HH:mm");
		},
		durationStr() {
			return secondsToTime[this.data.duration];
		},
	},
	methods: {
		tryJoinMeeting() {
			const params = {
				meetingID: this.data.id,
				userID: this.storeSelfInfo.userID,
				password: "",
			};
			joinMeeting(params)
				.then((data) => {
					const meetingData = {
						liveURL: data.liveKit?.url,
						token: data.liveKit?.token,
						roomID: this.data.roomID,
						imToken: uni.getStorageSync("IMToken"),
						baseURL: config.getApiUrl()
					};
					meetingModule.startMeeting(meetingData);
				})
				.catch(meetingErrorHandle);
		},
	},
};
</script>

<style lang="scss" scoped>
.meeting_wrap {
	padding: 16rpx 26rpx;
	background-color: #fff;
	position: relative;
	border-radius: 12rpx;
	border-width: 1px;
	border-style: solid;
	border-color: #ececec;
	overflow: hidden;
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: column;
	/* #endif */
}

.meeting_corner_mark {
	position: absolute;
	left: 4px;
	top: 4px;
	width: 0;
	height: 0;
	border-width: 5px;
	border-style: solid;
	border-top-color: #1e74de;
	border-left-color: #1e74de;
	border-right-color: transparent;
	border-bottom-color: transparent;
}

.title {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.meeting_icon {
	width: 20px;
	height: 20px;
	margin-right: 4px;
}

.subject {
	font-size: 16px;
	color: #333;
	lines: 1;
	text-overflow: ellipsis;
	overflow: hidden;
	flex: 1;
}

.meeting_info_list {
	margin-top: 16rpx;
	padding-left: 36rpx;
}

.meeting_info_item {
	margin-bottom: 12rpx;
}

.meeting_info_text {
	color: #131f41;
	font-size: 14px;
}

.join_tip {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-top: 6px;
}

.join_tip_text {
	color: #1e74de;
	font-size: 14px;
}

.join_arrow {
	width: 24px;
	height: 24px;
	margin-left: 4px;
}
</style>