Merge branch 'master' of http://git.cc-lotus.info/service-platform/mobile-official

src/views/live/parts/roomsDetail.vue

@@ -62,16 +62,19 @@ export default {
           userId: this.userId_,
           userSig: res.data,
         });
-        await this.client_.join({ roomId: this.roomname, role: 'anchor' });
+        await this.client_.join({ roomId: this.roomname, role: 'audience' });
+        this.client_.set
         this.client_.on('stream-subscribed', event => {
           const remoteStream = event.stream;
           // 远端流订阅成功，播放远端音视频流
+          remoteStream.setVideoProfile({ width: '50%', height: 200, float: 'left', frameRate: 15, bitrate: 900 /* kpbs */});
           remoteStream.play('look-video');
         });
         // 监听远端流增加事件
         this.client_.on('stream-added', event => {
           const remoteStream = event.stream;
           // 订阅远端音频和视频流
+          remoteStream.setScreenProfile({ width: '50%', height: 200, float: 'left', frameRate: 5, bitrate: 1600 /* kbps */});
           this.client_.subscribe(remoteStream, { audio: false, video: true }).catch(e => {
             console.error('failed to subscribe remoteStream');
           });

src/views/onlive/roomInfo.vue

@@ -6,7 +6,22 @@
           <NavBar v-show="navShow" :title="title" :isleftarrow="isleftarrow"> </NavBar>
         </el-col>
         <el-col :span="24" class="main">
-          房间详情
+          <van-image :src="roomInfos.filedir" class="image"></van-image>
+          <van-count-down v-if="time > 0" class="time" :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
+          <el-col v-else-if="time <= 0" class="time">直播已开始</el-col>
+          <van-tabs v-model="active" line-width="50px" title-active-color="#ee0a24">
+            <van-tab title="简介">
+              <van-col :span="24" class="title">{{ roomInfos.title }}</van-col>
+              <van-col :span="24" class="starttime"><van-icon name="underway-o" />开始时间： {{ roomInfos.starttime }}</van-col>
+              <van-col :span="24" class="gap"></van-col>
+
+              <van-col :span="24">
+                <van-col :span="24" class="infotop"><span></span><span>活动简介</span> </van-col>
+                <van-col class="content">{{ roomInfos.content }}</van-col>
+              </van-col>
+            </van-tab>
+          </van-tabs>
+          <van-col :span="24" class="reserve">立即预约</van-col>
         </el-col>
       </el-col>
     </el-row>
@@ -17,6 +32,7 @@
 import { mapState, mapMutations, createNamespacedHelpers } from 'vuex';
 import NavBar from '@/layout/common/topInfo.vue';
 import footInfo from '@/layout/common/footInfo.vue';
+var moment = require('moment');
 const { mapActions: room } = createNamespacedHelpers('room');
 export default {
   name: 'roomInfo',
@@ -33,6 +49,8 @@ export default {
       // 返回
       navShow: true,
       roomInfos: {},
+      time: '',
+      active: 1,
     };
   },
   created() {
@@ -43,7 +61,12 @@ export default {
     async seachInfo() {
       let res = await this.roomfetch({ roomname: this.roomname });
       if (this.$checkRes(res)) {
+        console.log(res.data);
+
         this.$set(this, `roomInfos`, res.data);
+        const date = moment(res.data.starttime).format('x');
+        const now = moment(new Date()).format('x');
+        this.$set(this, `time`, date - now);
       }
     },
   },
@@ -76,4 +99,62 @@ export default {
 .main {
   min-height: 570px;
 }
+.image {
+  width: 100%;
+  height: 220px;
+}
+.time {
+  height: 40px;
+  line-height: 40px;
+  font-size: 16px;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: #ffffff;
+  text-align: center;
+  position: absolute;
+  top: 226px;
+  width: 100%;
+}
+.title {
+  font-size: 20px;
+  font-weight: bold;
+  padding: 10px;
+}
+.starttime {
+  padding: 10px;
+}
+/deep/.van-icon::before {
+  font-size: 13px;
+  margin-right: 5px;
+}
+.gap {
+  background-color: #f2f2f2;
+  height: 10px;
+}
+.infotop {
+  margin: 10px 5px;
+}
+.infotop span:first-child {
+  display: inline-block;
+  background-color: #ee0a24;
+  width: 3px;
+  height: 20px;
+  margin: 0 10px;
+}
+.infotop span:last-child {
+  font-size: 16px;
+  font-weight: bold;
+}
+.content {
+  padding: 10px;
+}
+.reserve {
+  background-color: #2c69fe;
+  position: absolute;
+  bottom: 0px;
+  height: 50px;
+  color: #ffffff;
+  text-align: center;
+  line-height: 50px;
+  font-weight: 600;
+}
 </style>