修改图片

feige

2025-03-18 5f36b05f0eb2327c43c6a0c39558ebc5ece4b831

 ruoyi-ui/src/views/meeting/Home.vue

@@ -6,33 +6,33 @@
<template>
  <div id="app1">
    <!-- 头部栏 -->
   1222222222222222222
    <comp-nav></comp-nav>
   <!-- 1222222222222222222 -->
    <!-- <comp-nav></comp-nav> -->
   <div class="content" :class="$isMobile && 'content-mobile'">
      <!-- quick demo 使用指引 -->
     <comp-guidance></comp-guidance>
     <!-- <comp-guidance></comp-guidance> -->
      <!-- sdkAppId、secretKey、userId、roomId 参数输入区域 -->
     <p class="label">{{ $t('Params') }}</p>
      <div class="param-container" :class="$isMobile && 'param-container-mobile'">
        <comp-info-input
     <!-- <p class="label">{{ $t('基本信息') }}</p> -->
     <div class="param-container" :class="$isMobile && 'param-container-mobile'">
<!--        <comp-info-input
          label="sdkAppId" type="number" @change="handleValueChange($event, 'sdkAppId')"></comp-info-input>
        <comp-info-input
          label="secretKey" @change="handleValueChange($event, 'secretKey')"></comp-info-input>
        <comp-info-input
          label="userId" @change="handleValueChange($event, 'userId')"></comp-info-input>
        <comp-info-input
          label="roomId" type="number" @change="handleValueChange($event, 'roomId')"></comp-info-input>
          label="secretKey" @change="handleValueChange($event, 'secretKey')"></comp-info-input> -->
<!--        <comp-info-input
          label="用户名" @change="handleValueChange($event, 'userId')"></comp-info-input> -->
<!--        <comp-info-input
          label="房间号" type="number" @change="handleValueChange($event, 'roomId')"></comp-info-input> -->
      </div>
     <div class='alert'>
<!--     <div class='alert'>
        <el-alert
          type="error"
          :closable="false"
        >
          <span>{{ $t("Alert")}} <a target="_blank" :href="$t('Url')">{{ $t("Click")}}</a></span>
        </el-alert>
      </div>
      </div> -->
     <!-- 设备选择区域 -->
      <p class="label">{{ $t('Device Select') }}</p>
      <p class="label">{{ $t('会议设置') }}</p>
      <div class="param-container" :class="$isMobile && 'param-container-mobile'">
        <comp-device-select
          deviceType="camera" @change="handleValueChange($event, 'cameraId')"></comp-device-select>
@@ -40,13 +40,16 @@
          deviceType="microphone" @change="handleValueChange($event, 'microphoneId')"></comp-device-select>
      </div>
      <!-- rtc 房间 -->
      <div v-if="showComponent" v-loading="loading">
     <comp-room
        ref="child"
        :sdkAppId="Number(sdkAppId)"
        :secretKey="secretKey"
        :userId="userId"
        :roomId="Number(roomId)"
        :cameraId="cameraId"
        :microphoneId="microphoneId"></comp-room>
        </div>
   </div>
  </div>
</template>
@@ -57,8 +60,13 @@
import compInfoInput from '@/components/comp-info-input.vue';
import compDeviceSelect from '@/components/comp-device-select.vue';
import compRoom from '@/components/comp-room.vue';
// const compRoom = () => import('@/components/comp-room.vue');
// import { clearUrlParam } from '@/utils/utils';

import { getIndividualList } from "@/api/self";
import { Loading } from 'element-ui'
  //导入接口函数  --接好了
  import { getWebcastInfo } from "@/api/meeting/index";
export default {
  name: '6666',
  components: {
@@ -70,15 +78,95 @@
  },
  data() {
    return {
      sdkAppId: 0,
      secretKey: '',
      user:{},
      showComponent: false,
      time:undefined,
      loading: true,
      // 会议基本信息
      sdkAppId: 1600032250,
      secretKey: 'abedcf588654e18888eff65dfdfde240a882c611710c6ed10e1044fb44818a89',
      userId: '',
      roomId: 0,
      roomId: '',
      cameraId: '',
      microphoneId: '',
    };
  },
  created() {
    this.getRoomId();
    this.getUser();
  },

computed: {
    isStartExercise() {
      let roomId = this.roomId;
      let userId = this.userId;
      let time = this.time
      return { roomId, userId, time };
    }
},

watch: {

    isStartExercise: {
      immediate: true,
      handler(n) {
        if (n.roomId && n.userId) {
          // 判断这两个值同时存在
          this.loading = false;
          this.showComponent = true;
        }
        if(n.time == false){
          this.showComponent = false;
        }
      },
    }

  },
  methods: {
    // 获取房间号
    getRoomId(){
      const id = this.$route.params && this.$route.params.id;
      getWebcastInfo(id).then(response => {
        this.roomId = response.data.roomId
        console.log(response.data,'datadtaadadsd')

        let time = response.data.startTime.split(' ')[0]
        // let now = new Date();
        // let dateStr = now.toLocaleDateString().replaceAll('/','-'); // 本地格式的日期字符串
        const now = new Date();
        const year = now.getFullYear();
        const month = (now.getMonth() + 1).toString().padStart(2, '0');
        const day = now.getDate().toString().padStart(2, '0');
        let dateStr = `${year}-${month}-${day}`;
        if(time == dateStr){
          this.time = true
        }else{
          this.time = false
          this.$modal.msgSuccess("不在直播时间范围！");
        }

      })
    },
    // 获取用户名
    getUser(id) {
      getIndividualList().then(response => {
        this.user = response.data;
        this.userId = this.user.nickName
        // alert(this.userId)
        // alert(this.roomId)
      });

      // setTimeout(() => {
      //   this.loading = false;
      //   this.showComponent = true;
      // }, 5000);
      // if(this.userId !== '' && this.roomId !== ''){
      //   alert(123)
      //   this.loading = false;
      //   this.showComponent = true;
      // }

    },
    handleValueChange(value, key) {
      this[key] = value;
    },