[新增]增加了直播列表

pages/shortVideo/index.js

@@ -14,6 +14,7 @@ Page({
         videoIndex  : 0, //当前播放视频的下标
         videoId     : "", //当前播放的视频id
         playState   : true, //视频播放状态
+        rooms       : [],   //直播列表
     },
 
     /**
@@ -29,6 +30,18 @@ Page({
         })
     },
 
+    /**
+     * 获取直播间列表
+     */
+    onShow(){
+        wx.$api.live.rooms().then(res=>{
+            console.log(res.list)
+            this.setData({
+                rooms: res.list
+            })
+        })
+    },
+
     /***
      * 视频的播放状态
      */

pages/shortVideo/index.wxml

@@ -1,13 +1,5 @@
 
-
-<navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=4">进入直播间</navigator>
-
-
-<view style="margin-top: 10vh">
-    <view bindtap="onId">改变全局id</view>
-</view>
-
-<view class="videos-content" wx:if="{{1 == 2}}">
+<view class="videos-content">
     <swiperViode
         wx:if="{{videoList.length > 0}}"
         class="swiper-viode"
@@ -18,6 +10,14 @@
         bind:swiperindex="swiperIndex"
     >
     </swiperViode>
+    <!-- 直播列表 -->
+    <view class="live-rooms">
+        <block wx:for="{{rooms}}" wx:key="rooms">
+            <navigator class="live-rooms-nav" url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{item.roomid}}">
+                <image class="live-rooms-cover" src="{{item.cover_img}}" mode="aspectFill"></image>
+            </navigator>
+        </block>
+    </view>
     <!-- 视频播放按钮 -->
     <view class="videoLayer-play {{!isPlay ? 'show': ''}}" src="/static/icons/play_icon.png"></view>
     <!-- 视频信息 -->

pages/shortVideo/index.wxss

@@ -7,7 +7,7 @@
 
 
  page{
-    /* background: #0e0c1a; */
+    background: #0e0c1a;
 }
 
 .videoSwiper{
@@ -19,13 +19,69 @@
 .videos-content{
     position: relative;
     height: 100vh;
-    display: none;
+    box-sizing: border-box;
+    padding-bottom: calc(48px + env(safe-area-inset-bottom));
+}
+
+/* 直播信息 */
+.live-rooms{
+    position: absolute;
+    top: calc(180rpx + env(safe-area-inset-bottom));
+    left: 30rpx;
+}
+
+.live-rooms-cover{
+    width: 98rpx;
+    height: 98rpx;
+    border-radius: 50%;
+    vertical-align: top;
+}
+
+.live-rooms-nav{
+    position: relative;
+    display: inline-block;
+    width: 98rpx;
+    height: 98rpx;
+    margin-left: 30rpx;
+}
+
+.live-rooms-nav:first-child{
+    margin-left: 0;
+}
+
+.live-rooms-nav::before,
+.live-rooms-nav::after{
+    position: absolute;
+    content: "";
+}
+
+.live-rooms-nav::before{
+    width: 98rpx;
+    height: 98rpx;
+    border:solid 4rpx #FF8C37;
+    border-radius: 50%;
+    box-sizing: border-box;
+}
+
+.live-rooms-nav::after{
+    content: "直播中";
+    position: absolute;
+    bottom: 0;
+    left: 10rpx;
+    width: 78rpx;
+    background: #FF8C37;
+    color: white;
+    height: 32rpx;
+    line-height: 32rpx;
+    font-size: 20rpx;
+    text-align: center;
+    border-radius: 16rpx;
 }
 
 /* 视频信息 */
 .video-info{
     position: absolute;
-    bottom: 50rpx;
+    bottom: calc(78px + env(safe-area-inset-bottom));
     left: 30rpx;
     width: calc(100% - 218rpx);
 }
@@ -51,7 +107,7 @@
 .video-tool{
     position: absolute;
     right: 30rpx;
-    bottom: 50rpx;
+    bottom: calc(78px + env(safe-area-inset-bottom));
 }
 
 .video-tool-item{