live-mobile/src/views/live/roomDetail.vue

<template>
  <div id="roomsDetail">
    <el-row>
      <el-col :span="24" class="video"> </el-col>
    </el-row>
    <van-overlay :show="show" style="{ height: oheight, width: '100%' }">
      <div id="transformid" class="wrapper" :style="{ transform: transform, height: vheight, width: vwidth, padding: vpadding, position: 'absolute' }">
        <div :style="{ height: lheight, width: lwidth }" id="look-video-left" class="video-box col-div look-video-left"></div>
        <div id="look-video-right" :style="{ height: rheight, width: rwidth }" class="video-box col-div look-video-right"></div>
      </div>
      <div class="videoBtn" id="videobtnid" :style="{ top: btop, right: bright }">
        <el-button type="warning" round @click="full()" size="mini"><i class="el-icon-rank"></i></el-button>
      </div>
    </van-overlay>
    <el-row class="chatrow">
      <el-col :span="24" class="info">
        <el-col :span="12" class="num">
          <span>观看：{{ total }}</span>
        </el-col>
        <el-col :span="12" class="meetBtn">
          <el-button v-show="switchbtn" type="warning" round size="small" @click="roomMeetBtn()">互动<i class="el-icon-camera el-icon--right"></i></el-button>
        </el-col>
      </el-col>
    </el-row>
    <van-tabs type="card" @click="tabsClick">
      <van-tab title="会议简介">
        <van-col :span="24">
          <van-col class="content">{{ roomInfos.content }}</van-col>
        </van-col>
        <van-col :span="24">
          <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(advert, index) in roomInfos.adverts" :key="index">
              <img width="100%" height="100px" v-lazy="advert.imgdir" @click="imgclick(advert.imgurl)" />
            </van-swipe-item>
          </van-swipe>
        </van-col>
      </van-tab>
      <van-tab title="互动留言">
        <el-row>
          <el-col :span="24" class="info">
            <el-col :span="24" class="chat">
              <el-col :span="24" class="chatInfo" id="chatSell">
                <el-col :span="24" class="list" v-for="(item, index) in dataList" :key="index">
                  <p>
                    <span :class="item.sendname == user.name ? 'selfColor' : ''">{{ item.sendname }}:</span>
                    <span>{{ item.content }}</span>
                  </p>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="submit">
              <el-col :span="19" class="input">
                <el-input type="textarea" maxlength="5000" show-word-limit v-model="content"></el-input>
              </el-col>
              <el-col :span="5" class="btn">
                <el-button type="primary" size="mini" @click="chatCreate">发送</el-button>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
      </van-tab>
      <van-tab title="参与成员">
        <van-col :span="24" class="userList">
          <van-grid :column-num="3">
            <van-grid-item v-for="(item, index) in userList" :key="index" icon="manager" :text="item.username" />
          </van-grid>
        </van-col>
      </van-tab>
      <van-tab title="申请评分">
        <van-col :span="24">
          <van-field v-model="isxf" name="isxf" left-icon="star-o" label="学分" type="number" placeholder="请填写需要授予学分" />
        </van-col>
        <van-col :span="24" style="text-align:center">
          <van-button icon="star-o" type="primary" @click="sqClick">
            申请
          </van-button>
        </van-col>
      </van-tab>
    </van-tabs>
    <van-popup v-model="showQuest" position="bottom">
      <van-col :span="24" class="questtitle">
        <span>{{ questInfo.name }}</span>
      </van-col>
      <van-col class="questpopup" :span="24" v-for="(item, index) in questInfo.question" :key="index">
        <p style="margin:5px 0;">
          {{ index + 1 }}({{ item.type == '0' ? '单选' : item.type == '1' ? '多选' : item.type == '2' ? '问答' : '未识别' }})、{{ item.topic }}
        </p>
        <span v-if="item.type == '0'">
          <van-radio-group v-model="item.answer">
            <van-radio v-for="(i, ri) in item.option" :key="`${index}-${ri}`" :name="i.opname">{{ i.opname }}</van-radio>
          </van-radio-group>
        </span>
        <span v-if="item.type == '1'">
          <van-checkbox-group v-model="item.answer">
            <van-checkbox shape="square" v-for="(i, ci) in item.option" :key="`${index}-${ci}`" :name="i.opname">{{ i.opname }}</van-checkbox>
          </van-checkbox-group>
        </span>
        <span v-if="item.type == '2'">
          <van-field v-model="item.answer" type="textarea" rows="2" autosize placeholder="请输入" maxlength="200" show-word-limit />
        </span>
      </van-col>
      <van-col :span="24" class="questbtn">
        <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)" @click="submitQuest">提交</van-button>
      </van-col>
    </van-popup>
  </div>
</template>

<script>
import TRTC from 'trtc-js-sdk';
import { mapState, createNamespacedHelpers } from 'vuex';
import Vue from 'vue';
import { Swipe, SwipeItem, Lazyload } from 'vant';
import { Image as VanImage } from 'vant';
import wx from 'weixin-js-sdk';
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(VanImage);
Vue.use(Lazyload);
const { mapActions: uploadquestion } = createNamespacedHelpers('uploadquestion');
const { mapActions: gensign } = createNamespacedHelpers('gensign');
const { mapActions: room } = createNamespacedHelpers('room');
const { mapActions: quest } = createNamespacedHelpers('quest');
const { mapActions: chat } = createNamespacedHelpers('chat');
export default {
  name: 'roomsDetail',
  props: {},
  components: {},
  data: function() {
    return {
      client_: null,
      localStream_: null,
      sdkAppId_: '1400380125',
      userId_: '',
      roomInfos: {},
      sendmemo: '',
      total: 0,
      transform: 'rotate(0)',
      oheight: '200px',
      vwidth: '100%',
      vheight: '200px',
      rheight: '200px',
      rwidth: '30%',
      lheight: '200px',
      lwidth: '70%',
      show: true,
      vpadding: '0',
      btop: '167px',
      bright: '10px',
      isscreen: false,
      content: '',
      dataList: [],
      lvideoid_: '',
      rvideoid_: '',
      userList: [],
      isxf: '',
      showQuest: false,
      queid: '',
      questInfo: {},
      switchbtn: false,
    };
  },
  created() {
    this.initclient();
    this.lookuserSearch();
    this.lookusercountsel();
    this.chatSearch();
    this.userswichrole();
  },
  mounted() {
    this.channel();
  },
  destroyed() {
    const that = this;
    window.addEventListener('pagehide', function() {
      console.log('页面要关闭了');
      that.recordSave();
    });
  },
  methods: {
    ...gensign(['gensignFetch']),
    ...room(['lookuserFetch', 'fetch', 'lookusercount', 'lookquery', 'lookupdate', 'lookrecord', 'lookuserswichrole']),
    ...chat(['query', 'create']),
    ...quest(['questfetch']),
    ...uploadquestion({ upcreate: 'create', upquery: 'query' }),
    async recordSave() {
      console.log(2121);
      let data = {};
      data.type = '1';
      data.roomid = this.id;
      data.roomname = this.roomname;
      data.userid = this.user.uid;
      data.username = this.user.name;
      const res = await this.lookrecord(data);
    },
    async sqClick() {
      let data = {};
      data.roomid = this.id;
      data.isxf = this.isxf;
      data.userid = this.user.uid;
      const res = await this.lookupdate(data);
      if (this.$checkRes(res)) {
        console.log(res.data);
        this.$message({
          message: '操作成功',
          type: 'success',
        });
      }
    },
    async tabsClick(name, title) {
      if (title === '参与成员') {
        this.lookuserQuery();
      }
    },
    async lookuserQuery({ skip = 0, limit = 1000 } = {}) {
      const info = { roomid: this.id };
      let res = await this.lookquery({ skip, limit, ...info });
      this.$set(this, `userList`, res.data);
    },
    async chatSearch({ skip = 0, limit = 1000 } = {}) {
      const info = { roomid: this.id };
      let res = await this.query({ skip, limit, ...info });
      this.$set(this, `dataList`, res.data);
    },
    async chatCreate() {
      let data = {};
      data.roomid = this.id;
      data.type = '0';
      data.content = this.content;
      data.sendid = this.user.uid;
      data.sendname = this.user.name;
      const res = await this.create(data);
      if (this.$checkRes(res)) {
        //this.$message('发送成功');
        this.content = '';
      }
    },
    channel() {
      console.log('in function:');
      this.$stomp({
        [`/exchange/public_chat_` + this.id]: this.onMessage,
      });
      this.$stomp({
        [`/exchange/quest_publish_` + this.id]: this.onQueMessage,
      });
      this.$stomp({
        [`/exchange/switch_role_` + this.user.uid]: this.onSwichMessage,
      });
    },
    onMessage(message) {
      // console.log('receive a message: ', message.body);
      let body = _.get(message, 'body');
      if (body) {
        body = JSON.parse(body);
        this.dataList.push(body);
        this.content = '';
      }
      this.$nextTick(() => {
        document.getElementById('chatSell').scrollTop = document.getElementById('chatSell').scrollHeight + 275;
      });
    },
    onQueMessage(message) {
      // console.log('receive a message: ', message.body);
      this.showQuest = true;
      let body = _.get(message, 'body');
      if (body) {
        body = JSON.parse(body);
        this.queid = body.queid;
        this.questSearch();
      }
    },
    onSwichMessage(message) {
      // console.log('receive a message: ', message.body);
      let body = _.get(message, 'body');
      if (body) {
        body = JSON.parse(body);
        if (body.switchrole === 'anchor' && body.userid === this.user.uid) {
          this.switchbtn = true;
          this.roomMeetBtn();
        } else {
          this.switchbtn = false;
        }
      }
    },
    async userswichrole() {
      // 根据房间id查询房间详细信息
      let result = await this.lookuserswichrole({ roomid: this.id, userid: this.user.uid });
      if (this.$checkRes(result)) {
        if (result.data && result.data.switchrole === 'anchor') {
          this.switchbtn = true;
        }
      }
    },
    roomMeetBtn() {
      const url = '/pages/meeting/meeting?uid=' + this.user.uid + '&username=' + this.user.name + '&rid=' + this.id + '&roomname=' + this.roomname;
      console.log(url);
      wx.miniProgram.navigateTo({ url });
    },
    async questSearch() {
      if (this.queid) {
        const result = await this.questfetch(this.queid);
        if (this.$checkRes(result)) {
          console.log(result.data);
          this.$set(this, `questInfo`, result.data);
        }
      }
    },
    async submitQuest() {
      let form = { roomid: this.id, userid: this.user.uid, questionnaireid: this.queid };
      let answers = [];
      for (const question of this.questInfo.question) {
        answers.push({ questionid: question._id, answer: JSON.stringify(question.answer) });
      }
      form.answers = answers;
      console.log(form);
      let res = await this.upcreate(form);
      if (res.errcode == '0') {
        this.showQuest = false;
      }
    },
    async lookuserSearch() {
      if (this.user.uid) {
        let data = {};
        data.roomid = this.id;
        data.roomname = this.roomname;
        data.userid = this.user.uid;
        data.username = this.user.name;
        const res = await this.lookuserFetch(data);
      }
      // 根据房间id查询房间详细信息
      let result = await this.fetch(this.id);
      if (this.$checkRes(result)) {
        console.log(result.data);
        this.$set(this, `roomInfos`, result.data);
        // 根据房间信息判断是否回答问卷
        if (result.data.isque === '1') {
          const info = { roomid: this.id, userid: this.user.uid, questionnaireid: result.data.queid };
          const skip = 0;
          const limit = 10;
          const upres = await this.upquery({ skip, limit, ...info });
          if (this.$checkRes(upres)) {
            if (upres.data.length === 0) {
              this.showQuest = true;
              this.queid = result.data.queid;
              this.questSearch();
            }
          }
        }
      }
    },
    async lookusercountsel() {
      // 根据房间id查询房间详细信息
      let result = await this.lookusercount({ roomname: this.roomname });
      if (this.$checkRes(result)) {
        console.log(result.total);
        this.$set(this, `total`, result.total);
      }
    },
    onSubmit() {
      console.log(this.sendmemo);
    },
    async initclient() {
      this.userId_ = this.user.uid;
      const res = await this.gensignFetch({ userid: this.userId_ });
      if (this.$checkRes(res)) {
        this.client_ = TRTC.createClient({
          mode: 'live',
          sdkAppId: this.sdkAppId_,
          userId: this.userId_,
          userSig: res.data,
        });
        await this.client_.join({ roomId: this.roomname, role: 'audience' });
        this.client_.on('stream-subscribed', event => {
          const remoteStream = event.stream;
          // 远端流订阅成功，播放远端音视频流
          console.log(remoteStream);
          this.show = true;
          console.log('111' + remoteStream.getType());
          console.log('111' + remoteStream.getUserId());
          console.log('111' + remoteStream.getId());
          const userid_ = remoteStream.getUserId();
          const res_ = userid_.indexOf('-');
          if (res_ === -1) {
            this.rvideoid_ = 'video_' + remoteStream.getId();
            remoteStream
              .play('look-video-right')
              .then(() => {
                // autoplay success
              })
              .catch(e => {
                const errorCode = e.getCode();
                if (errorCode === 0x4043) {
                  // PLAY_NOT_ALLOWED,引导用户手势操作恢复音视频播放
                  remoteStream.resume();
                }
              });
          } else {
            this.lvideoid_ = 'video_' + remoteStream.getId();
            remoteStream
              .play('look-video-left')
              .then(() => {
                // autoplay success
                // 播放成功时调用css属性
                const _lvideoid_ = document.getElementById(this.lvideoid_);
                const style = 'width: 100%; height: 100%; position: absolute; transform: rotateY(0); object-fit: fill';
                _lvideoid_.style.cssText = style;
              })
              .catch(e => {
                const errorCode = e.getCode();
                if (errorCode === 0x4043) {
                  // PLAY_NOT_ALLOWED,引导用户手势操作恢复音视频播放
                  remoteStream.resume();
                }
              });
          }
        });
        // 监听远端流增加事件
        this.client_.on('stream-added', event => {
          const remoteStream = event.stream;
          console.log('222' + remoteStream.getType());
          // 订阅远端音频和视频流
          this.client_.subscribe(remoteStream, { audio: true, video: true }).catch(e => {
            console.error('failed to subscribe remoteStream');
          });
        });
        this.client_.on('stream-removed', event => {
          const remoteStream = event.stream;
          console.log('stop----');
          remoteStream.stop();
        });
      }
    },
    imgclick(url) {
      location.href = url;
    },
    full() {
      this.show = true;
      const width = document.documentElement.clientWidth;
      const height = document.documentElement.clientHeight;
      if (!this.isscreen) {
        console.log('全屏');
        this.isscreen = true;
        this.oheight = height;
        const transformid_ = document.getElementById('transformid');
        let style = 'width:' + height + 'px;';
        style += 'height:' + width + 'px;';
        style += '-webkit-transform: rotate(90deg); transform: rotate(90deg);';
        // 注意旋转中点的处理
        style += '-webkit-transform-origin: ' + width / 2 + 'px ' + width / 2 + 'px;';
        style += 'transform-origin: ' + width / 2 + 'px ' + width / 2 + 'px;';
        transformid_.style.cssText = style;
        this.transform = 'rotate(90deg)';
        // this.vwidth = height;
        console.log(height);
        this.vheight = `${width}px`;
        this.vwidth = `${height}px`;
        this.lheight = `${width}px`;
        this.rheight = `${width}px`;

        this.btop = `${height - 40}px`;
        this.bright = `${width - 50}px`;
      } else {
        console.log('退出全屏');
        this.isscreen = false;
        this.oheight = '200px';
        const transformid_ = document.getElementById('transformid');
        let style = 'width:' + width + 'px;';
        style += 'height: 200px;';
        transformid_.style.cssText = style;
        this.transform = 'rotate(0deg)';
        // this.vwidth = height;
        console.log(height);
        this.vheight = `200px`;
        this.vwidth = `${width}px`;
        this.lheight = `200px`;
        this.rheight = `200px`;

        this.btop = `167px`;
        this.bright = `10px`;
      }
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
    roomname() {
      return this.$route.query.roomname;
    },
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.video {
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
}
.content {
  padding: 10px;
}
.info {
  .title {
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
    font-weight: bold;
  }
  .num {
    padding: 10px 0;
    font-size: 16px;
  }
  .advert {
    background: #fff;
    padding: 10px;
  }
  .chat {
    min-height: 21px;
    max-height: 395px;
    overflow-y: auto;
    padding: 0 0 50px 0;
    .chatInfo {
      .list {
        margin: 10px 0 10px 0;
        span:first-child {
          float: left;
          width: 17%;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          // font-weight: bold;
        }
        span:last-child {
          float: right;
          width: 82%;
        }
      }
    }
  }
  .submit {
    width: 100%;
    position: absolute;
    bottom: 0px;
    .el-button {
      width: 100%;
      padding: 20px 0;
    }
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 120px;
  text-align: center;
  background-color: #39a9ed;
}
/deep/.video-js {
  height: 190px !important;
  border-radius: 10px;
}
.look-video-left {
  float: left;
  background: #000;
  grid-area: 1/1/3/4;
  justify-content: flex-end;
}
.look-video-right {
  float: right;
  background: #000;
  grid-area: 1/1/3/4;
  justify-content: flex-end;
}
.wrapper {
  background: #000;
  position: absolute;
  width: 100%;
}
.van-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 200px;
  background-color: rgba(0, 0, 0, 0.7);
}
.videoBtn {
  z-index: 999;
  position: absolute;
}
.userList {
  height: 380px;
  min-height: 380px;
  overflow-y: auto;
  padding: 0 10px;
  margin: 0 0 10px 0;
}
.questpopup {
  padding: 10px 10px;
}
.questpopup div {
  padding: 8px 0 0 5px;
}
.questtitle {
  padding: 8px 0 0 5px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
.questbtn {
  text-align: center;
  padding: 10px 0 15px 0;
}
/deep/.van-cell {
  padding: 25px 16px;
  font-size: 16px;
}
</style>