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

<template>
  <view class="meeting_wrap" @click="tryJoinMeeting">
    <view class="title">
      <image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/meeting_icon.png" />
      <view class="subject">{{ data.subject }}</view>
    </view>
    <ul>
      <li>开始时间：{{ startTimeStr }}</li>
      <li>会议时长：{{ durationStr }}</li>
      <li>会议号：{{ data.id }}</li>
    </ul>
    <view class="join_tip">
      <text>进入会议</text>
      <image style="width: 24px; height: 24px; margin-left: 4px" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/meeting_join_arrow.png" />
    </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,
  },
  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;
  border-radius: 12rpx;
  background-color: #fff;
  position: relative;
  border-radius: 12rpx;
  border: 1px solid #ececec;
  overflow: hidden;

  .title {
    display: flex;
    align-items: center;

    image {
      min-width: 20px;
      width: 20px;
      height: 20px;
      margin-right: 4px
    }

    .subject {
      @include nomalEllipsis();
    }
  }

  ul {
    margin-top: 16rpx;
    padding-left: 36rpx;
    color: #131f41;

    li {
      margin-bottom: 12rpx;
    }
  }

  .join_tip {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e74de;
    margin-top: 6px;
  }

  &:before {
    content: "";
    position: absolute;
    left: 4px;
    top: 4px;
    border-width: 5px;
    border-style: solid;
    border-color: #1e74de transparent transparent #1e74de;
  }
}
</style>