直播

app.wxss

@@ -1,36 +1,44 @@
 page {
-    font-family: PingFangSC-Medium, PingFang SC;
-    background-color: #F6F7F8;
-    padding-bottom: 80rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  background-color: #F6F7F8;
+  padding-bottom: 80rpx;
+}
+/* 清除浮动 */
+.clearfix::after {
+  content: "";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
 }
 
 /* 灰色矩形盒子 */
-.grey_rectangle{
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 28rpx;
-    background-color: #F6F7F8;
-    border-radius: 10rpx;
-    box-sizing: border-box;
-    margin-bottom: 30rpx;
+.grey_rectangle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 28rpx;
+  background-color: #F6F7F8;
+  border-radius: 10rpx;
+  box-sizing: border-box;
+  margin-bottom: 30rpx;
 }
 
 /* start--文本行数限制--start */
 .u-line-1 {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  
-  .u-line-2 {
-    -webkit-line-clamp: 2;
-  }
-  
-  .u-line-2 {
-    overflow: hidden;
-    word-break: break-all;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-  }
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.u-line-2 {
+  -webkit-line-clamp: 2;
+}
+
+.u-line-2 {
+  overflow: hidden;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}

pages/liveStreaming/index.js

@@ -11,6 +11,10 @@ Page({
     tabsList: ["私域直播", "展会直播"], //tabs列表
     tabsIndex: 0, //tabs下标
     accountStatus: null, //直播账号状态 1-账号正常 2-账号审核中 3-没有账号
+    liveDataCount: {}, //实时数据统计
+    liveSessionList: {}, //直播场次列表
+    pageNumber: 1, //当前页码
+    pageTotal: 1, //列表总页数
   },
 
   /**
@@ -33,12 +37,31 @@ Page({
           this.setData({
             accountMsg: res.data[0]
           })
+          /* 直播数据统计 */
+          _Http.basic({
+            "accesstoken": wx.getStorageSync('userData').token,
+            "classname": "customer.live.live",
+            "method": "getSYLiveDataCount",
+            "content": {
+              "channelid": res.data[0].channelid
+            }
+          }).then(res => {
+            if (res.msg != '成功') return wx.showToast({
+              title: res.data,
+              icon: "none"
+            });
+            this.setData({
+              liveDataCount: res.data
+            })
+          })
+          /* 私域直播场次列表查询 */
+          this.getSYLiveSessionList()
           break;
         case 2:
           console.log(2)
           break;
         case 3:
-          console.log(2)
+          console.log(3)
           break;
         default:
           wx.showToast({
@@ -48,6 +71,56 @@ Page({
       }
     })
   },
+  /* 私域直播场次列表查询 */
+  getSYLiveSessionList() {
+    _Http.basic({
+      "accesstoken": wx.getStorageSync('userData').token,
+      "classname": "customer.live.live",
+      "method": "getSYLiveSessionList",
+      "content": {
+        "getdatafromdbanyway": true,
+        "pageNumber": this.data.pageNumber,
+        "pageSize": 10,
+        "channelid": this.data.accountMsg.channelid
+      }
+    }).then(res => {
+      console.log(res)
+      if (res.msg != '成功') return wx.showToast({
+        title: res.data,
+        icon: "none"
+      });
+      for (let i = 0; i < res.data.length; i++) {
+        let checkdate = res.data[i].starttime;
+        res.data[i].starttime = checkdate.slice(0, checkdate.lastIndexOf('.'));
+      }
+      this.setData({
+        liveSessionList: res.data,
+        pageTotal: res.pageTotal
+      })
+    })
+  },
+  /* 下一页 */
+  buttonRightClick() {
+    if (this.data.pageNumber == this.data.pageTotal) return wx.showToast({
+      title: '已经到达最后一页',
+      icon: "none"
+    });
+    this.setData({
+      pageNumber: this.data.pageNumber + 1
+    })
+    this.getSYLiveSessionList()
+  },
+  /* 上一页 */
+  buttonLifeClick() {
+    if (this.data.pageNumber == 1) return wx.showToast({
+      title: '已经在第一页了哦',
+      icon: "none"
+    });
+    this.setData({
+      pageNumber: this.data.pageNumber - 1
+    })
+    this.getSYLiveSessionList()
+  },
   /* 申请直播账号 */
   applyForLive() {
     _Http.basic({
@@ -56,6 +129,7 @@ Page({
       "method": "applySYLive",
       "content": {}
     }).then(res => {
+      console.log(res)
       if (res.code == 1) {
         wx.showToast({
           title: res.msg,

pages/liveStreaming/index.wxml

@@ -47,7 +47,7 @@
     </view>
 </view>
 <!-- 数据 -->
-<view wx:if="{{accountStatus==1}}" class="msgBox" style="white-space:nowrap;">
+<view wx:if="{{accountStatus==1}}" class="msgBox clearfix" style="white-space:nowrap;">
     <!-- 标题和按钮 -->
     <view class="msgBox-title-and-but">
         <view class="msgBox-title">直播数据</view>
@@ -56,52 +56,59 @@
     <view class="data-grid">
         <view>
             <view class="title">观看次数(次)</view>
-            <view class="number">123</view>
+            <view class="number">{{liveDataCount.viewCounts}}</view>
         </view>
         <view>
             <view class="title">观看人数(人)</view>
-            <view class="number">123</view>
+            <view class="number">{{liveDataCount.viewers}}</view>
         </view>
         <view>
             <view class="title">观看时长(分钟)</view>
-            <view class="number">123</view>
+            <view class="number">{{liveDataCount.viewDuration}}</view>
         </view>
         <view>
             <view class="title">人均观看次数(次)</view>
-            <view class="number">123</view>
+            <view class="number">{{liveDataCount.viewCountsAvg}}</view>
         </view>
         <view>
             <view class="title">人均观看时长(分钟)</view>
-            <view class="number">123</view>
+            <view class="number">{{liveDataCount.viewDurationAvg}}</view>
         </view>
     </view>
     <!-- 数据表格 -->
     <scroll-view scroll-x="{{true}}" class="data-formlist">
         <!-- 表头 -->
         <view class="data-formlist-header">
-            <view class="the-first-column">用户名称</view>
-            <view class="the-second-series">用户id</view>
-            <view class="the-second-series">观看时长</view>
-            <view class="the-fourth-column">进入时间</view>
-            <view class="the-word">地区</view>
-            <view class="the-word">城市</view>
-            <view class="the-first-column">观众IP</view>
-            <view class="the-second-series">观看终端</view>
-            <view class="the-second-series">场次</view>
-            <view class="the-second-series">观看类型</view>
+            <view class="w200rpx">开始时间</view>
+            <view style="width: 180rpx;">直播id</view>
+            <view style="width: 160rpx;">观看次数(次)</view>
+            <view style="width: 200rpx;">观看时长(分钟)</view>
+            <view style="width: 240rpx;">描述</view>
         </view>
         <!-- 表格 -->
-        <view wx:for="{{3}}" class="data-formlist-row">
-            <view class="the-first-column">好吃的薯片</view>
-            <view class="the-second-series">1234533</view>
-            <view class="the-second-series">6小时</view>
-            <view class="the-fourth-column">2021-12-23 17:00:34</view>
-            <view class="the-word">浙江</view>
-            <view class="the-word">嘉兴</view>
-            <view class="the-first-column">192.168.0.1</view>
-            <view class="the-second-series">终端1</view>
-            <view class="the-second-series">10场</view>
-            <view class="the-second-series">直播</view>
+        <view wx:for="{{liveSessionList}}" class="data-formlist-row">
+            <view class="w200rpx">{{item.starttime}}</view>
+            <view style="width: 180rpx;">{{item.sessionid}}</view>
+            <view style="width: 160rpx;">{{item.liveuv}}</view>
+            <view style="width: 200rpx;">{{item.duration}}</view>
+            <view style="width: 240rpx; display: flex; align-items: center;">
+                <input disabled="{{true}}" style="width: 100%; text-align: center;" type="text" value="{{item.description==null?'暂无':item.description}}" />
+            </view>
         </view>
     </scroll-view>
+    <view class="paging-button">
+        <view>
+            <van-button custom-class="paging-button-class" catchtap="buttonRightClick"></van-button>
+            <view class="paging-button-icon icon-right">
+                <van-icon name="arrow" />
+            </view>
+        </view>
+        <text>{{pageNumber}}</text>
+        <view>
+            <van-button custom-class="paging-button-class" catchtap="buttonLifeClick"></van-button>
+            <view class="paging-button-icon icon-left">
+                <van-icon name="arrow-left" />
+            </view>
+        </view>
+    </view>
 </view>

pages/liveStreaming/index.wxss

@@ -133,16 +133,15 @@
 
 /* 数据表 */
 .data-formlist {
-    min-width: 680rpx;
+    float: left;
     border-radius: 8rpx;
     overflow: hidden;
 }
 
 .data-formlist-header {
-    display: flex;
-    align-items: center;
-    width: 200%;
+    min-width: 1030rpx;
     height: 66rpx;
+    line-height: 66rpx;
     padding: 0 20rpx;
     background: #F6F7F8;
     box-sizing: border-box;
@@ -150,6 +149,7 @@
 }
 
 .data-formlist-header>view {
+    float: left;
     text-align: center;
     font-size: 24rpx;
     font-weight: 600;
@@ -157,30 +157,78 @@
 }
 
 .data-formlist-row {
-    display: flex;
-    align-items: center;
-    width: 200%;
-    height: 56rpx;
     font-size: 20rpx;
     color: rgba(0, 0, 0, 0.65);
+    min-width: 1030rpx;
     padding: 0 20rpx;
     box-sizing: border-box;
     border-bottom: 2rpx solid #e8e8e8;
     text-align: center;
+    height: 56rpx !important;
+}
+
+.data-formlist-row>view {
+    float: left;
+    line-height: 56rpx !important;
+}
+
+.w200rpx {
+    width: 200rpx !important;
+}
+
+/* 分页按钮 */
+.paging-button {
+    float: right;
+    width: 100%;
+    height: 30rpx;
+    margin-top: 30rpx;
+    margin-bottom: 20rpx;
+}
+
+.paging-button>view {
+    position: relative;
+    float: right;
+    width: 30rpx !important;
+    height: 30rpx !important;
+    margin-right: 10rpx;
+    overflow: hidden;
+}
+
+.paging-button-icon {
+    position: absolute;
+    font-size: 20rpx;
+    color: rgba(0, 0, 0, 0.5);
+    top: 2rpx;
+    pointer-events: none;
 }
 
-.data-formlist .the-first-column {
-    width: 150rpx;
+.icon-left {
+    left: 4rpx;
 }
 
-.data-formlist .the-second-series {
-    width: 130rpx;
+.icon-right {
+    left: 6rpx;
 }
 
-.data-formlist .the-fourth-column {
-    width: 200rpx;
+.paging-button>text {
+    float: right;
+    display: block;
+    height: 30rpx;
+    line-height: 30rpx;
+    background: #4DC2D4;
+    border-radius: 4rpx;
+    font-size: 20rpx;
+    font-weight: 550;
+    color: #FFFFFF;
+    padding: 0 10rpx;
+    margin-right: 10rpx;
 }
 
-.the-word {
-    width: 90rpx;
+/* 分页按钮外部样式表 */
+.paging-button-class {
+    width: 100%;
+    height: 100%;
+    background: #F6F7F8 !important;
+    border-radius: 4rpx !important;
+    border: 0 !important;
 }