yijianbao_user_uniapp/pages_im/pages/common/meetingDetails/index.vue

<template>
  <view class="page_container">
    <custom-nav-bar title="会议详情">
      <view class="right_content" slot="more">
        <image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/meeting_details_share.png" @click="shareMeeting" />
        <image class="more_icon" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/common_more.png" @click="showMoreAction = true" v-if="isHost" />
      </view>
    </custom-nav-bar>

    <view class="meeting_info">
      <view class="meeting_title">
        {{ meetingData.info.creatorDefinedMeeting.title }}
      </view>
      <view class="time_line">
        <view class="time_point">
          <view class="title">
            {{ startTime }}
          </view>
          <view class="sub_title">
            {{ startDate }}
          </view>
        </view>
        <view class="duration">
          <view class="state_icon" :style="{
            'background-color':
              beginState !== '已开始' ? '#0089FF' : '#FFB300'
          }">
            {{ beginState }}
          </view>
          <view class="duration_details">
            {{ duration }}
          </view>
        </view>
        <view class="time_point">
          <view class="title">
            {{ endTime }}
          </view>
          <view class="sub_title">
            {{ endDate }}
          </view>
        </view>
      </view>
    </view>

    <view class="meeting_more">
      <view class="more_item">
        <text>会议号：{{ meetingData.info.systemGenerated.meetingID, }}</text>
        <image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/meeting_copy.png" @click="copyMeetingID" />
      </view>
      <view class="more_item">
        <text>发起人：{{ meetingData.info.systemGenerated.creatorNickname }}</text>
      </view>
    </view>

    <view class="action_row">
      <u-button type="primary" text="进入会议" @click="tryJoinMeeting"></u-button>
    </view>

    <u-action-sheet safeAreaInsetBottom :actions="moreList" cancelText="取消" closeOnClickOverlay
      :closeOnClickAction="true" :show="showMoreAction" @select="clickMoreAction" @close="showMoreAction = false" />
  </view>
</template>

<script>
import CustomNavBar from "../../../components/CustomNavBar/index.vue";
import dayjs from "dayjs";
import { ContactChooseTypes } from "../../../constant";
import { toastWithCallback } from "../../../util/common";
import { meetingModule, meetingErrorHandle } from "../../../util/imCommon";
import { mapGetters } from "vuex";
import config from "../../../common/config";
import { joinMeeting, endMeeting } from '../../../api/meeting'

const secondsToTime = {
  1800: "30分钟",
  3600: "1小时",
  5400: "1.5小时",
  7200: "2小时",
};
export default {
  components: {
    CustomNavBar,
  },
  data() {
    return {
      showMoreAction: false,
      meetingData: {},
      moreList: [
        {
          name: "修改会议信息",
          idx: 0,
        },
        {
          name: "取消会议",
          idx: 1,
        },
      ],
    };
  },
  computed: {
    ...mapGetters(["storeSelfInfo"]),
    startTime() {
      return dayjs(this.meetingData.info?.creatorDefinedMeeting?.scheduledTime * 1000).format("HH:mm");
    },
    startDate() {
      return dayjs(this.meetingData.info?.creatorDefinedMeeting?.scheduledTime * 1000).format("YYYY年M月D日");
    },
    endTime() {
      return dayjs((this.meetingData.info?.creatorDefinedMeeting?.scheduledTime + this.meetingData.info?.creatorDefinedMeeting?.meetingDuration) * 1000).format("HH:mm");
    },
    endDate() {
      return dayjs((this.meetingData.info?.creatorDefinedMeeting?.scheduledTime + this.meetingData.info?.creatorDefinedMeeting?.meetingDuration) * 1000).format("YYYY年M月D日");
    },
    duration() {
      return secondsToTime[
        this.meetingData.info?.creatorDefinedMeeting?.meetingDuration
      ];
    },
    beginState() {
      const nowDate = (Date.now() / 1000).toFixed();
      if (this.meetingData.info?.creatorDefinedMeeting?.scheduledTime > nowDate) {
        return "未开始";
      }
      if ((this.meetingData.info?.creatorDefinedMeeting?.scheduledTime + this.meetingData.info?.creatorDefinedMeeting?.meetingDuration) > nowDate) {
        return "已开始";
      }
      return "已结束";
    },
    isHost() {
      return (
        this.meetingData.info?.systemGenerated?.creatorUserID === this.$store.getters.storeSelfInfo.userID
      );
    },
  },
  onLoad(options) {
    this.meetingData = JSON.parse(options.meetingData);
    console.log(this.meetingData);
  },
  methods: {
    clickMoreAction({ idx }) {
      if (idx) {
        endMeeting({
          meetingID: this.meetingData.info?.systemGenerated?.meetingID,
          userID: this.storeSelfInfo.userID,
        })
          .then(() => toastWithCallback("取消成功！", () => uni.navigateBack()))
          .catch(() => uni.$u.toast("操作失败！"));
        return;
      }
      uni.$u.route("/pages_im/pages/common/reserveMeeting/index", {
        isUpdate: true,
        meetingData: JSON.stringify(this.meetingData),
      });
      this.showMoreAction = false;
    },
    copyMeetingID() {
      uni.setClipboardData({
        data: this.meetingData.info?.systemGenerated?.meetingID,
        success: () => {
          uni.hideToast();
          this.$nextTick(() => {
            uni.$u.toast("复制成功");
          });
        },
      });
    },
    tryJoinMeeting() {
      const params = {
        meetingID: this.meetingData.info?.systemGenerated?.meetingID,
        userID: this.storeSelfInfo.userID,
        password: "",
      };
      joinMeeting(params)
        .then((data) => {
          const meetingData = {
            liveURL: data.liveKit?.url,
            token: data.liveKit?.token,
            roomID: this.meetingData.info?.systemGenerated?.meetingID,
            imToken: uni.getStorageSync("IMToken"),
            baseURL: config.getApiUrl()
          };
          meetingModule.startMeeting(meetingData);
        })
        .catch(meetingErrorHandle);
    },
    shareMeeting() {
      uni.$u.route("/pages_im/pages/common/contactChoose/index", {
        type: ContactChooseTypes.InviteMeeting,
        forwardMessage: encodeURIComponent(JSON.stringify({
          inviterFaceURL: this.$store.getters.storeSelfInfo.faceURL,
          id: this.meetingData.info?.systemGenerated?.meetingID,
          duration: this.meetingData.info?.creatorDefinedMeeting?.meetingDuration,
          inviterNickname: this.$store.getters.storeSelfInfo.nickname,
          inviterUserID: this.$store.getters.storeSelfInfo.userID,
          subject: this.meetingData.info?.creatorDefinedMeeting?.title,
          start: this.meetingData.info?.systemGenerated?.startTime,
        })),
      });
    },
  },
};
</script>

<style lang="scss">
.page_container {
  background-color: #f6f6f6;

  .right_content {
    margin-right: 24rpx;

    .more_icon {
      margin-left: 12rpx;
    }

    image {
      width: 36px;
      height: 36px;
    }
  }

  .meeting_info {
    padding: 32rpx;
    margin: 24rpx 0;
    background-color: #fff;

    .meeting_title {
      font-size: 34rpx;
      color: #16191c;
      margin-bottom: 24rpx;
    }

    .time_line {
      display: flex;
      justify-content: space-between;

      .time_point {
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
          font-size: 40rpx;
          color: #16191c;
          margin-bottom: 8rpx;
        }

        .sub_title {
          color: rgba(22, 25, 28, 0.4);
          font-size: 28rpx;
        }
      }

      .duration {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;

        .state_icon {
          color: #fff;
          font-size: 24rpx;
          background-color: #0089ff;
          padding: 4rpx 20rpx;
          border-radius: 24rpx;
          margin-bottom: 10rpx;
        }

        .duration_details {
          color: rgba(22, 25, 28, 0.4);
          font-size: 28rpx;
        }
      }
    }
  }

  .meeting_more {
    background-color: #fff;

    .more_item {
      display: flex;
      align-items: center;
      padding: 24rpx 32rpx;

      image {
        width: 12px;
        height: 13px;
        margin-left: 24rpx;
      }
    }
  }

  .action_row {
    margin-top: 10vh;
    padding: 0 24%;
  }
}
</style>