私域直播

app.js

@@ -1,12 +1,27 @@
-// app.js
+import {
+  ApiModel
+} from "./utils/api";
+const _Http = new ApiModel();
 App({
   onLaunch() {
+    //轮播图
+    _Http.basic({
+      "classname": "publicmethod.bannermag.bannermag",
+      "method": "query_bannerlocationlist",
+      "content": {
+        "siteid": "BWJ",
+        "fclienttype": "MOBILE"
+      }
+    }).then(res => {
+      console.log(res)
+    })
+
     /* 计算tabbar+iphone安全距离  tabbar页面+100rpx*/
     let safeAreaBottom = 0,
       capsule = wx.getMenuButtonBoundingClientRect(),
       height = 200,
       that = this;
-      
+
     wx.getSystemInfo({
       success(res) {
         //计算底部安全距离高度

pages/liveStreaming/index.js

@@ -8,13 +8,18 @@ Page({
    * 页面的初始数据
    */
   data: {
+    dataTypes: 0, //0-全部数据 1-单独数据
     tabsList: ["私域直播", "展会直播"], //tabs列表
     tabsIndex: 0, //tabs下标
     accountStatus: null, //直播账号状态 1-账号正常 2-账号审核中 3-没有账号
     liveDataCount: {}, //实时数据统计
-    liveSessionList: {}, //直播场次列表
+    liveDataCountForSession: {}, //单场次数据统计
+    liveSessionList: [], //直播场次列表
+    liveUserList: [], //直播用户观看记录
     pageNumber: 1, //当前页码
     pageTotal: 1, //列表总页数
+    userPageNumber: 1, //用户当前页码
+    userPageTotal: 1, //用户总列表
     optionRow: -1, //列表选中项
   },
 
@@ -100,35 +105,132 @@ Page({
       })
     })
   },
+  /* 场次列表选中 */
   optionItemIndex(e) {
     const {
       index
     } = e.currentTarget.dataset;
+    if (index == this.data.optionRow) return this.setData({
+      optionRow: -1
+    });
     this.setData({
       optionRow: index
     })
   },
-  /* 下一页 */
-  buttonRightClick() {
-    if (this.data.pageNumber == this.data.pageTotal) return wx.showToast({
-      title: '已经到达最后一页',
-      icon: "none"
+  /* 查看场次详情 */
+  viewDetails(e) {
+    const {
+      index
+    } = e.currentTarget.dataset;
+    const sessionid = this.data.liveSessionList[index].sessionid;
+    this.setData({
+      showStartTime: this.data.liveSessionList[index].starttime,
+      sessionid
+    })
+    /* 场次详情统计 */
+    _Http.basic({
+      "accesstoken": wx.getStorageSync('userData').token,
+      "classname": "customer.live.live",
+      "method": "getSYLiveDataCountForSession",
+      "content": {
+        "sessionid": sessionid
+      }
+    }).then(res => {
+      console.log(res)
+      if (res.msg != '成功') wx.showToast({
+        title: '数据统计获取失败，请稍后再试',
+        icon: "none"
+      })
+      this.setData({
+        liveDataCountForSession: res.data
+      })
     });
+    this.LiveUserList();
     this.setData({
-      pageNumber: this.data.pageNumber + 1
+      dataTypes: 1
     })
-    this.getSYLiveSessionList()
   },
-  /* 上一页 */
-  buttonLifeClick() {
-    if (this.data.pageNumber == 1) return wx.showToast({
-      title: '已经在第一页了哦',
-      icon: "none"
+  /* 观看用户列表 */
+  LiveUserList() {
+    /* 用户观看列表 */
+    _Http.basic({
+      "accesstoken": wx.getStorageSync('userData').token,
+      "classname": "customer.live.live",
+      "method": "getSYLiveUserList",
+      "content": {
+        "getdatafromdbanyway": true,
+        "pageNumber": this.data.userPageNumber,
+        "pageSize": 10,
+        "sessionid": this.data.sessionid,
+        "channelid": this.data.accountMsg.channelid
+      }
+    }).then(res => {
+      console.log(res)
+      if (res.msg != '成功') wx.showToast({
+        title: '观看列表获取失败，请稍后再试',
+        icon: "none"
+      })
+      for (let i = 0; i < res.data.length; i++) {
+        const index = res.data[i].datetime.lastIndexOf('.');
+        res.data[i].datetime = res.data[i].datetime.slice(0, index)
+      }
+      this.setData({
+        userPageTotal: res.pageTotal,
+        liveUserList: res.data
+      })
     });
+  },
+  /* 返回场次列表 */
+  returnLiveData() {
     this.setData({
-      pageNumber: this.data.pageNumber - 1
+      dataTypes: 0,
+      userPageNumber: 1,
+      userPageTotal: 1
     })
-    this.getSYLiveSessionList()
+  },
+  /* 下一页 */
+  buttonRightClick() {
+    if (this.data.dataTypes == 0) {
+      if (this.data.pageNumber == this.data.pageTotal) return wx.showToast({
+        title: '已经到达最后一页',
+        icon: "none"
+      });
+      this.setData({
+        pageNumber: this.data.pageNumber + 1
+      })
+      this.getSYLiveSessionList()
+    } else {
+      if (this.data.userPageNumber == this.data.userPageTotal) return wx.showToast({
+        title: '已经到达最后一页',
+        icon: "none"
+      });
+      this.setData({
+        userPageNumber: this.data.userPageNumber + 1
+      })
+      this.LiveUserList()
+    }
+  },
+  /* 上一页 */
+  buttonLifeClick() {
+    if (this.data.dataTypes == 0) {
+      if (this.data.pageNumber == 1) return wx.showToast({
+        title: '已经在第一页了哦',
+        icon: "none"
+      });
+      this.setData({
+        pageNumber: this.data.pageNumber - 1
+      })
+      this.getSYLiveSessionList()
+    } else {
+      if (this.data.userPageNumber == 1) return wx.showToast({
+        title: '已经在第一页了哦',
+        icon: "none"
+      });
+      this.setData({
+        userPageNumber: this.data.userPageNumber - 1
+      })
+      this.LiveUserList()
+    }
   },
   /* 申请直播账号 */
   applyForLive() {

pages/liveStreaming/index.wxml

@@ -50,55 +50,118 @@
 <view wx:if="{{accountStatus==1}}" class="msgBox clearfix" style="white-space:nowrap;">
     <!-- 标题和按钮 -->
     <view class="msgBox-title-and-but">
-        <view class="msgBox-title">直播数据</view>
-    </view>
-    <!-- 数据宫格 -->
-    <view class="data-grid">
-        <view>
-            <view class="title">观看次数(次)</view>
-            <view class="number">{{liveDataCount.viewCounts}}</view>
-        </view>
-        <view>
-            <view class="title">观看人数(人)</view>
-            <view class="number">{{liveDataCount.viewers}}</view>
-        </view>
-        <view>
-            <view class="title">观看时长(分钟)</view>
-            <view class="number">{{liveDataCount.viewDuration}}</view>
-        </view>
-        <view>
-            <view class="title">人均观看次数(次)</view>
-            <view class="number">{{liveDataCount.viewCountsAvg}}</view>
-        </view>
-        <view>
-            <view class="title">人均观看时长(分钟)</view>
-            <view class="number">{{liveDataCount.viewDurationAvg}}</view>
+        <view wx:if="{{dataTypes==0}}" class="msgBox-title">直播数据</view>
+        <view wx:else class="msgBox-title">直播场次:{{showStartTime}}</view>
+        <view wx:if="{{dataTypes==1}}" class="dataReturn" catchtap="returnLiveData">
+            <van-icon style="margin-right: -10rpx;" name="arrow-left" />
+            <van-icon style="margin-right: -5rpx;" name="arrow-left" />
+            返回场次列表
         </view>
     </view>
     <!-- 数据表格 -->
-    <scroll-view scroll-x="{{true}}" class="data-formlist">
-        <!-- 表头 -->
-        <view class="data-formlist-header">
-            <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 hidden="{{dataTypes!=0}}">
+        <!-- 数据宫格 -->
+        <view class="data-grid">
+            <view>
+                <view class="title">观看次数(次)</view>
+                <view class="number">{{liveDataCount.viewCounts}}</view>
+            </view>
+            <view>
+                <view class="title">观看人数(人)</view>
+                <view class="number">{{liveDataCount.viewers}}</view>
+            </view>
+            <view>
+                <view class="title">观看时长(分钟)</view>
+                <view class="number">{{liveDataCount.viewDuration}}</view>
+            </view>
+            <view>
+                <view class="title">人均观看次数(次)</view>
+                <view class="number">{{liveDataCount.viewCountsAvg}}</view>
+            </view>
+            <view>
+                <view class="title">人均观看时长(分钟)</view>
+                <view class="number">{{liveDataCount.viewDurationAvg}}</view>
+            </view>
         </view>
-        <!-- 表格 -->
-        <view wx:for="{{liveSessionList}}" class="data-formlist-row {{optionRow==index?'option-row':''}}" data-index="{{index}}" catchtap="optionItemIndex">
-            <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 class="more-but-box" wx:if="{{optionRow==index}}">
-                <view class="more-but">更多</view>
+        <scroll-view scroll-x="{{true}}" class="data-formlist">
+            <!-- 表头 -->
+            <view class="data-formlist-header">
+                <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="{{liveSessionList}}" wx:key="index" class="data-formlist-row {{optionRow==index?'option-row':''}}" data-index="{{index}}" catchtap="optionItemIndex">
+                <view class="w200rpx u-line-1">{{item.starttime}}</view>
+                <view class="u-line-1" style="width: 180rpx;">{{item.sessionid}}</view>
+                <view class="u-line-1" style="width: 160rpx;">{{item.liveuv}}</view>
+                <view class="u-line-1" style="width: 200rpx;">{{item.duration}}</view>
+                <view class="u-line-1" 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 class="more-but-box" wx:if="{{optionRow==index}}">
+                    <view class="more-but" data-index="{{index}}" catchtap="viewDetails">更多</view>
+                </view>
+            </view>
+        </scroll-view>
+    </view>
+    <!-- 场次详情数据 -->
+
+    <!-- 数据宫格 -->
+    <view hidden="{{dataTypes!=1}}">
+        <view class="data-grid">
+            <view>
+                <view class="title">观看次数(次)</view>
+                <view class="number">{{liveDataCountForSession.viewCounts}}</view>
+            </view>
+            <view>
+                <view class="title">观看人数(人)</view>
+                <view class="number">{{liveDataCountForSession.viewers}}</view>
+            </view>
+            <view>
+                <view class="title">观看时长(分钟)</view>
+                <view class="number">{{liveDataCountForSession.viewDuration}}</view>
+            </view>
+            <view>
+                <view class="title">人均观看次数(次)</view>
+                <view class="number">{{liveDataCountForSession.viewCountsAvg}}</view>
+            </view>
+            <view>
+                <view class="title">人均观看时长(分钟)</view>
+                <view class="number">{{liveDataCountForSession.viewDurationAvg}}</view>
             </view>
         </view>
-    </scroll-view>
+        <scroll-view scroll-x="{{true}}" class="data-formlist">
+            <!-- 表头 -->
+            <view class="data-formlist-header live-for-details">
+                <view class="w200rpx">用户名称</view>
+                <view style="width: 180rpx;">用户id</view>
+                <view style="width: 160rpx;">观看时长</view>
+                <view style="width: 240rpx;">进入时间</view>
+                <view style="width: 140rpx;">地区</view>
+                <view style="width: 140rpx;">城市</view>
+                <view style="width: 200rpx;">观众ip</view>
+                <view style="width: 180rpx;">观看终端</view>
+                <view style="width: 140rpx;">场次</view>
+                <view style="width: 180rpx;">观看类型</view>
+            </view>
+            <!-- 表格 -->
+            <view wx:for="{{liveUserList}}" class="data-formlist-row live-for-details">
+                <view class="w200rpx u-line-1">{{item.name}}</view>
+                <view class="u-line-1" style="width: 180rpx;">{{item.userid}}</view>
+                <view class="u-line-1" style="width: 160rpx;">{{item.playduration}}</view>
+                <view class="u-line-1" style="width: 240rpx;">{{item.datetime}}</view>
+                <view class="u-line-1" style="width: 140rpx;">{{item.province}}</view>
+                <view class="u-line-1" style="width: 140rpx;">{{item.city}}</view>
+                <view class="u-line-1" style="width: 200rpx;">{{item.ipaddress}}</view>
+                <view class="u-line-1" style="width: 180rpx;">{{item.ismobile=='Y'?'手机':'电脑'}}</view>
+                <view class="u-line-1" style="width: 140rpx;">{{item.viewcount}}</view>
+                <view class="u-line-1" style="width: 180rpx;">{{item.viewtype=='live'?'直播':'回放'}}</view>
+            </view>
+        </scroll-view>
+    </view>
     <view class="paging-button">
         <view>
             <van-button custom-class="paging-button-class" catchtap="buttonRightClick"></van-button>
@@ -106,7 +169,7 @@
                 <van-icon name="arrow" />
             </view>
         </view>
-        <text>{{pageNumber}}</text>
+        <text>{{dataTypes==0?pageNumber:userPageNumber}}</text>
         <view>
             <van-button custom-class="paging-button-class" catchtap="buttonLifeClick"></van-button>
             <view class="paging-button-icon icon-left">

pages/liveStreaming/index.wxss

@@ -23,11 +23,22 @@
 
 /* 标题 */
 .msgBox-title {
+    height: 40rpx;
+    line-height: 40rpx;
     font-size: 28rpx;
-    font-weight: 500;
+    font-weight: 550;
     color: rgba(0, 0, 0, 0.85);
 }
 
+.msgBox-title>text {
+    font-size: 26rpx;
+}
+
+.dataReturn {
+    font-size: 20rpx;
+    color: #4CBECF;
+}
+
 /* 一键开播按钮 */
 .custom-class-msgBox-but {
     width: 116rpx !important;
@@ -167,7 +178,8 @@
     text-align: center;
     height: 56rpx !important;
 }
-.option-row{
+
+.option-row {
     background-color: #FAFAFA;
 }
 
@@ -200,6 +212,11 @@
     width: 200rpx !important;
 }
 
+/* 直播详情 */
+.live-for-details {
+    min-width: 1800rpx !important;
+}
+
 /* 分页按钮 */
 .paging-button {
     float: right;