直播

README.md

@@ -66,6 +66,8 @@
 
 ​	My_BannerSwiper -- banner轮播
 
+​	My_showModel -- 自定义模态框
+
 # 缓存
 
 ​	userData -- 用户基本数据 -- 保存数据：index-用户列表下标，token，fisadministrator--是否主账号，tagentsid，tenterpriseid，userid

app.json

@@ -68,7 +68,8 @@
         "My_DisplayBox": "/components/My_DisplayBox/index",
         "My_VerticalBox": "/components/My_VerticalBox/index",
         "My_NavTabs": "/components/My_NavTabs/index",
-        "My_BannerSwiper": "/components/My_BannerSwiper/index"
+        "My_BannerSwiper": "/components/My_BannerSwiper/index",
+        "My_showModel": "/components/My_showModel/index"
     },
     "window": {
         "backgroundTextStyle": "light",

components/My_NavTabs/index.js

@@ -15,20 +15,13 @@ Component({
         /* 回调 */
         setIndex: {
             type: Function
-        },
-        /* 下载直播客户端 */
-        liveDownload: {
-            type: Boolean,
-            value: false
         }
     },
 
     /**
      * 组件的初始数据
      */
-    data: {
-        informShow: false
-    },
+    data: {},
 
     /**
      * 组件的方法列表
@@ -42,23 +35,6 @@ Component({
                 tabsIndex: index
             })
             this.triggerEvent("setIndex", index)
-        },
-        /* 开播指引 */
-        downloadApp() {
-            this.setData({
-                informShow: true
-            });
-            setTimeout(() => {
-                this.setData({
-                    informShow: false
-                });
-            }, 3000)
-        },
-        /* 关闭提示 */
-        inform() {
-            this.setData({
-                informShow: false
-            });
         }
     }
 })

components/My_NavTabs/index.json

@@ -1,6 +1,4 @@
 {
     "component": true,
-    "usingComponents": {
-        "van-transition": "@vant/weapp/transition/index"
-    }
+    "usingComponents": {}
 }

components/My_NavTabs/index.wxml

@@ -2,15 +2,4 @@
     <view class="tbas_list" bindtap="setTabsIndex">
         <view wx:for="{{tabsList}}" data-index="{{index}}" class="{{tabsIndex==index?'active':''}}">{{item}}</view>
     </view>
-    <view wx:if="{{liveDownload}}" class="live-download">
-        <view catchtap="downloadApp">开播指引
-            <van-icon name="arrow" />
-            <van-icon style="margin-left: -15rpx;" name="arrow" />
-        </view>
-    </view>
-</view>
-<van-transition show="{{ informShow }}" custom-class="block">
-    <view catchtap="inform" class="inform">
-        复制web端开播地址到电脑浏览器，即可开启直播
-    </view>
-</van-transition>
+</view>

components/My_NavTabs/index.wxss

@@ -41,29 +41,4 @@
     bottom: 0;
     left: 50%;
     transform: translate(-50%, 0);
-}
-
-/* 下载直播客户端 */
-.live-download {
-    font-size: 20rpx;
-    height: 60rpx;
-    line-height: 32rpx;
-    color: #4CBECF;
-    margin-right: 22rpx;
-}
-
-.inform {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #FFFFFF;
-    position: fixed;
-    font-size: 28rpx;
-    width: 100vw;
-    height: 80rpx;
-    background-color: #ce192e;
-    top: 0;
-    left: 0;
-    border-radius: 0 0 30rpx 30rpx;
-    opacity: 0.95;
 }

components/My_liveAccountMsg/index.js

@@ -4,25 +4,17 @@ import {
 const _Http = new ApiModel;
 Component({
     options: {
-        addGlobalClass: true
+        addGlobalClass: true,
+        multipleSlots: true
     },
     /**
      * 组件的属性列表
      */
     properties: {
-        /* 直播账号状态 */
-        accountStatus: {
-            type: Number
+        /* 标题 */
+        title: {
+            type: String
         },
-        /* 直播账号信息 */
-        accountMsg: {
-            type: Object
-        },
-        /* 是否私域 */
-        isSY: {
-            type: Boolean,
-            value: true
-        }
     },
 
     /**
@@ -34,48 +26,7 @@ Component({
      * 组件的方法列表
      */
     methods: {
-        /* 申请直播账号 */
-        applyForLive() {
-            _Http.basic({
-                "accesstoken": wx.getStorageSync('userData').token,
-                "classname": "customer.live.live",
-                "method": "applySYLive",
-                "content": {}
-            }).then(res => {
-                console.log(res)
-                if (res.code == 1) {
-                    wx.showToast({
-                        title: res.msg,
-                        icon: "none"
-                    })
-                    this.setData({
-                        accountStatus: 2
-                    })
-                } else {
-                    if (res.data == '私域直播已申请') return wx.showModal({
-                        title: "提示",
-                        content: "您的私域直播账号正在申请中"
-                    })
-                }
-            })
-        },
-        /* 复制地址 */
-        copyTheAddress(e) {
-            console.log(e)
-            const {
-                url
-            } = e.target.dataset
-            wx.setClipboardData({
-                data: url,
-                success(res) {
-                    wx.getClipboardData({
-                        success(res) {
-                            console.log('内容已复制') // data
-                        }
-                    })
-                }
-            })
-        }
+        
     },
 
 })

components/My_liveAccountMsg/index.wxml

@@ -1,47 +1,11 @@
 <view class="msgBox">
     <!-- 标题和按钮 -->
     <view class="msgBox-title-and-but">
-        <view class="msgBox-title">直播账号信息</view>
-        <slot wx:if="{{accountMsg.fliveshowurl}}"></slot>
-    </view>
-    <!-- 直播信息 -->
-    <view wx:if="{{accountStatus==1}}" class="account-information">
-        <view class="account-information-row">
-            <view>
-                <view class="title" style="margin-right: 8rpx;">密码</view>{{accountMsg.channelpasswd}}
-            </view>
-            <view>
-                <view class="title">观看地址</view>
-                <view class="chained-address u-line-1">{{accountMsg.fliveshowurl}}</view>
-                <view data-url="{{accountMsg.fliveshowurl}}" class="chained-address-copy" bindtap="copyTheAddress">复制</view>
-            </view>
-        </view>
-        <view class="account-information-row">
-            <view>
-                <view class="title">助教地址</view>
-                <view class="chained-address u-line-1">{{accountMsg.fassistanturl}}</view>
-                <view data-url="{{accountMsg.fassistanturl}}" class="chained-address-copy" bindtap="copyTheAddress">复制</view>
-            </view>
-        </view>
-        <view class="account-information-row">
-            <view>
-                <view class="title">客户端开播地址</view>
-                <view class="chained-address u-line-1">{{accountMsg.fliveurl_client}}</view>
-                <view data-url="{{accountMsg.fliveurl_client}}" class="chained-address-copy" bindtap="copyTheAddress">复制</view>
-            </view>
-        </view>
-        <view class="account-information-row">
-            <view>
-                <view class="title">web端开播地址</view>
-                <view class="chained-address u-line-1">{{accountMsg.fliveurl_web}}</view>
-                <view data-url="{{accountMsg.fliveurl_web}}" class="chained-address-copy" bindtap="copyTheAddress">复制</view>
-            </view>
-        </view>
-    </view>
-    <view wx:if="{{accountStatus!=1 && isSY}}" class="go-to-apply-for" catchtap="applyForLive">
-        {{accountStatus==3?'暂无账号 点击申请 ':'直播申请中'}}<image wx:if="{{accountStatus==3}}" style="width: 20rpx; height: 22rpx; margin-left: 8rpx;" src="/static/icon-07.png"></image>
-    </view>
-    <view wx:if="{{accountStatus!=1 && isSY==false}}" class="go-to-apply-for">
-        暂无展会直播账号
+        <view class="msgBox-title">{{title}}</view>
+        <slot name='but'></slot>
     </view>
+    <!-- 内容 -->
+    <slot name='con'>
+
+    </slot>
 </view>

components/My_liveAccountMsg/index.wxss

@@ -51,50 +51,6 @@
     padding-left: 0 !important;
     padding-right: 0 !important;
 }
-
-/* 账号信息 */
-.account-information {
-    width: 100%;
-    font-size: 20rpx;
-    font-family: HelveticaNeue;
-    color: rgba(0, 0, 0, 0.65);
-    padding: 0 20rpx;
-    box-sizing: border-box;
-}
-
-.account-information-row:first-child {
-    margin-top: 18rpx;
-}
-
-.account-information-row {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    height: 44rpx;
-    font-size: 20rpx;
-    font-family: HelveticaNeue;
-    color: rgba(0, 0, 0, 0.65);
-    line-height: 44rpx;
-    margin-top: 10rpx;
-}
-
-.account-information-row>view {
-    display: flex;
-}
-
-.account-information-row .chained-address {
-    max-width: 400rpx;
-    padding: 0 8rpx;
-}
-
-.chained-address-copy {
-    color: #4DC2D4;
-}
-
-.account-information-row:first-child .chained-address {
-    width: 350rpx;
-}
-
 /* 去申请 */
 .go-to-apply-for {
     display: flex;
@@ -105,7 +61,7 @@
     border-radius: 10rpx;
     border: 2rpx solid rgba(0, 0, 0, 0.85);
     box-sizing: border-box;
-    margin: 30rpx auto 10rpx;
+    margin: 56rpx auto 50rpx;
     font-size: 24rpx;
     color: rgba(0, 0, 0, 0.85);
 }

components/My_showModel/index.js

@@ -0,0 +1,64 @@
+// components/My_showModel/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        isShow: {
+            type: Boolean,
+            value: false
+        },
+        /* 标题 */
+        title: {
+            type: String,
+            value: "通知"
+        },
+        /* 内容 */
+        content: {
+            type: String
+        },
+        /* 确定按钮 */
+        confirm: {
+            type: String,
+            value: "确定"
+        },
+        /* 取消按钮 */
+        cancel: {
+            type: String,
+            value: "取消"
+        },
+        /* 隐藏取消按钮 */
+        hideCancel: {
+            type: Boolean,
+            value: false
+        },
+        /* 按钮回调 */
+        callBack: {
+            type: Function
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        catchtouchmove() {},
+        butClick(e) {
+            const {
+                value
+            } = e.target.dataset;
+            if (value == undefined) return;
+            this.setData({
+                isShow: false
+            });
+            this.triggerEvent('callBack', value);
+        },
+    }
+})

components/My_showModel/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "van-transition": "@vant/weapp/transition/index"
+    }
+}

components/My_showModel/index.wxml

@@ -0,0 +1,12 @@
+<van-transition show="{{ isShow }}" custom-class="block">
+    <view class="showmodel-bg" catchtouchmove="catchtouchmove">
+        <view class="showmodel-box">
+            <view class="model-title">{{title}}</view>
+            <view class="model-content" style="word-break:break-all;">{{content}}</view>
+            <view class="model-but" catchtap="butClick">
+                <van-button data-value='false' wx:if="{{!hideCancel}}" color='#F3F3F3' round custom-class='custom-class-but cancel'>{{cancel}}</van-button>
+                <van-button data-value='true' color='#4DC2D4' round custom-class='custom-class-but'>{{confirm}}</van-button>
+            </view>
+        </view>
+    </view>
+</van-transition>

components/My_showModel/index.wxss

@@ -0,0 +1,65 @@
+.showmodel-bg {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.6);
+    top: 0;
+    left: 0;
+    z-index: 9999999;
+}
+
+.showmodel-box {
+    position: absolute;
+    width: 558rpx;
+    background: #FFFFFF;
+    border-radius: 20rpx;
+    z-index: 999999999;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 0 30rpx;
+    box-sizing: border-box;
+    text-align: center;
+}
+
+.model-title {
+    font-family: PingFangSC-Medium, PingFang SC;
+    height: 50rpx;
+    line-height: 50rpx;
+    font-size: 36rpx;
+    font-weight: 550;
+    color: #000000;
+    margin-top: 50rpx;
+}
+
+.model-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    line-height: 40rpx;
+    min-height: 90rpx;
+    font-size: 28rpx;
+    color: rgba(0, 0, 0, .4);
+    margin-top: 20rpx;
+}
+
+.model-but {
+    width: 95%;
+    display: flex;
+    justify-content: space-around;
+    height: 56rpx;
+    margin: 30rpx auto 40rpx;
+}
+
+.custom-class-but {
+    font-size: 24rpx !important;
+    font-family: PingFangSC-Regular, PingFang SC !important;
+    width: 180rpx !important;
+    height: 56rpx !important;
+    background: #F3F3F3;
+}
+
+.cancel {
+    color: #888888 !important;
+}

pages/liveStreaming/index.js

@@ -3,7 +3,6 @@ import {
 } from "../../utils/api";
 const _Http = new ApiModel;
 Page({
-
   /**
    * 页面的初始数据
    */
@@ -11,7 +10,7 @@ Page({
     dataTypes: 0, //0-全部数据 1-单独数据
     tabsList: ["私域直播", "展会直播"], //tabs列表
     tabsIndex: 0, //tabs下标
-    accountStatus: null, //直播账号状态 1-账号正常 2-账号审核中 3-没有账号
+    accountStatus: -1, //直播账号状态 1-账号正常 2-账号审核中 3-没有账号
     liveDataCount: {}, //实时数据统计
     liveDataCountForSession: {}, //单场次数据统计
     liveSessionList: [], //直播场次列表
@@ -21,6 +20,8 @@ Page({
     userPageNumber: 1, //用户当前页码
     userPageTotal: 1, //用户总列表
     optionRow: -1, //列表选中项
+    isSy: true, //是否为私域直播
+    myShowModel: false, //自定义model
   },
 
   /**
@@ -30,6 +31,57 @@ Page({
     //获取直播账号
     this.getLiveInfo()
   },
+  /* 自定义model回调 */
+  showModelCallBack({
+    detail
+  }) {
+    if (detail == 'true') this.copyTheAddress(this.data.accountMsg.fliveurl_web);
+  },
+  /* 显示自定义model */
+  showMyModel() {
+    this.setData({
+      myShowModel: true
+    })
+  },
+  /* 申请直播账号 */
+  applyForLive() {
+    _Http.basic({
+      "accesstoken": wx.getStorageSync('userData').token,
+      "classname": "customer.live.live",
+      "method": "applySYLive",
+      "content": {}
+    }).then(res => {
+      console.log(res)
+      if (res.code == 1) {
+        wx.showToast({
+          title: res.msg,
+          icon: "none"
+        })
+        this.setData({
+          accountStatus: 2
+        })
+      } else {
+        if (res.data == '私域直播已申请') return wx.showModal({
+          title: "提示",
+          content: "您的私域直播账号正在申请中"
+        })
+      }
+    })
+  },
+  /* 复制地址 */
+  copyTheAddress(e) {
+    const url = (typeof e == "string" || typeof e == String) ? e : e.target.dataset.url;
+    wx.setClipboardData({
+      data: url,
+      success(res) {
+        wx.getClipboardData({
+          success(res) {
+            console.log('内容已复制') // data
+          }
+        })
+      }
+    })
+  },
   /* 获取直播账号详情 */
   getLiveInfo() {
     const method = (this.data.tabsIndex == 0) ? 'getSYLiveInfo' : 'getLiveInfo';
@@ -39,9 +91,12 @@ Page({
       "method": method,
       "content": {}
     }).then(res => {
+      console.log("直播账号信息", res)
+      const isSy = (method == "getSYLiveInfo") ? true : false;
       this.setData({
         accountStatus: res.code,
-        accountMsg: res.data[0]
+        accountMsg: res.data[0],
+        isSy
       })
       /* 直播数据统计 */
       this.getLiveDataCount()
@@ -61,6 +116,7 @@ Page({
         "channelid": this.data.accountMsg.channelid
       }
     }).then(res => {
+      console.log("直播数据统计", res)
       if (res.msg != '成功') return wx.showToast({
         title: res.data,
         icon: "none"
@@ -84,7 +140,7 @@ Page({
         "channelid": this.data.accountMsg.channelid
       }
     }).then(res => {
-      console.log(res)
+      console.log("直播场次查询", res)
       if (res.msg != '成功') return wx.showToast({
         title: res.data,
         icon: "none"
@@ -99,7 +155,6 @@ Page({
       })
     })
   },
-
   /* 查看场次详情 */
   viewDetails(e) {
     const {
@@ -119,7 +174,7 @@ Page({
         "sessionid": sessionid
       }
     }).then(res => {
-      console.log(res)
+      console.log("场次详情统计", res)
       if (res.msg != '成功') wx.showToast({
         title: '数据统计获取失败，请稍后再试',
         icon: "none"
@@ -133,7 +188,6 @@ Page({
       dataTypes: 1
     })
   },
-
   /* 观看用户列表 */
   LiveUserList() {
     /* 用户观看列表 */
@@ -150,7 +204,7 @@ Page({
         "channelid": this.data.accountMsg.channelid
       }
     }).then(res => {
-      console.log(res)
+      console.log("观看用户列表", res)
       if (res.msg != '成功') wx.showToast({
         title: '观看列表获取失败，请稍后再试',
         icon: "none"
@@ -242,7 +296,6 @@ Page({
     })
     this.getLiveInfo();
   },
-
   /**
    * 生命周期函数--监听页面初次渲染完成
    */

pages/liveStreaming/index.wxml

@@ -1,16 +1,48 @@
 <view style="height: 14rpx;"></view>
-<My_NavTabs tabsList="{{tabsList}}" tabsIndex="{{tabsIndex}}" bindsetIndex="setIndex" liveDownload="{{accountStatus==1}}" />
-<!-- 私域直播 -->
-<My_liveAccountMsg wx:if="{{tabsIndex==0}}" accountStatus="{{accountStatus}}" accountMsg="{{accountMsg}}">
-    <view class="msgBox-but">
-        <van-button open-type='share' custom-class="custom-class-msgBox-but">一键分享</van-button>
+<My_NavTabs tabsList="{{tabsList}}" tabsIndex="{{tabsIndex}}" bindsetIndex="setIndex" />
+<!-- 直播账号信息 -->
+<My_liveAccountMsg title='直播账号信息'>
+    <view slot='but' wx:if="{{accountStatus==1}}" class="msgBox-but">
+        <van-button custom-class="custom-class-msgBox-but" catchtap="showMyModel">我要开播</van-button>
+    </view>
+    <view slot='con'>
+        <view wx:if="{{accountStatus==1}}" class="live-msg">
+            <view class="live-msg-row">
+                <view class="row-title">直播账号</view>
+                <view class="row-content u-line-1">{{accountMsg.channelid}}</view>
+            </view>
+            <view class="live-msg-row">
+                <view class="row-title">账号密码</view>
+                <view class="row-content u-line-1">{{accountMsg.channelpasswd}}</view>
+            </view>
+            <view class="live-msg-row">
+                <view class="row-title">web端开播地址</view>
+                <view class="row-content u-line-1">{{accountMsg.fliveurl_web}}</view>
+                <view class="row-title copy" data-url='{{accountMsg.fliveurl_web}}' catchtap="copyTheAddress">复制</view>
+            </view>
+        </view>
+        <view wx:if="{{accountStatus!=1 && isSy}}" class="go-to-apply-for" catchtap="applyForLive">
+            {{accountStatus==3?'暂无账号 点击申请 ':'正在申请中 请稍等 '}}<image style="width: 20rpx; height: 22rpx; margin-left: 8rpx;" src="/static/icon-07.png"></image>
+        </view>
+        <view wx:if="{{accountStatus!=1 && !isSy}}" class="go-to-apply-for">
+            暂无展会直播账号
+        </view>
     </view>
 </My_liveAccountMsg>
-<!-- 展会直播 -->
-<My_liveAccountMsg wx:else accountStatus="{{accountStatus}}" accountMsg="{{accountMsg}}" isSY="{{false}}">
-    <view class="msgBox-but">
+<!-- 观看信息 -->
+<My_liveAccountMsg wx:if="{{accountStatus==1}}" title='观看信息'>
+    <view slot='but' class="msgBox-but">
         <van-button open-type='share' custom-class="custom-class-msgBox-but">一键分享</van-button>
     </view>
+    <view slot='con'>
+        <view class="live-msg">
+            <view class="live-msg-row">
+                <view class="row-title">观看地址</view>
+                <view class="row-content u-line-1">{{accountMsg.fliveshowurl}}</view>
+                <view class="row-title copy" data-url='{{accountMsg.fliveshowurl}}' catchtap="copyTheAddress">复制</view>
+            </view>
+        </view>
+    </view>
 </My_liveAccountMsg>
 <!-- 数据 -->
 <view wx:if="{{accountStatus==1}}" class="msgBox clearfix" style="white-space:nowrap;">
@@ -143,4 +175,6 @@
             </view>
         </view>
     </view>
-</view>
+</view>
+<!-- 自定义model -->
+<My_showModel isShow='{{myShowModel}}' title='提示' content="直播地址:+{{accountMsg.fliveurl_web}}" confirm='一键复制' cancel='知道了' bindcallBack='showModelCallBack' />

pages/liveStreaming/index.wxss

@@ -168,8 +168,48 @@
 .custom-class-msgBox-but {
     width: 116rpx !important;
     height: 44rpx !important;
-    background: #4DC2D4 !important;
+    background: #FFB600 !important;
     border-radius: 22rpx;
     font-size: 20rpx !important;
     font-family: PingFangSC-Medium, PingFang SC;
+    border: 0 !important;
+}
+
+/* 直播账号信息 */
+.live-msg {
+    width: 100%;
+    padding: 18rpx 25rpx 0rpx;
+    box-sizing: border-box;
+}
+
+.row-title {
+    flex-shrink: 0;
+}
+
+.live-msg-row {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    width: 100%;
+    height: 44rpx;
+    font-size: 24rpx;
+    color: rgba(0, 0, 0, 0.85);
+    margin-top: 10rpx;
+}
+
+.live-msg-row:first-child {
+    margin-top: 0;
+}
+
+.row-content {
+    font-size: 20rpx !important;
+    font-family: PingFangSC-Regular, PingFang SC !important;
+    color: rgba(0, 0, 0, 0.65);
+    padding-left: 8rpx;
+}
+
+.copy {
+    font-size: 20rpx;
+    color: #4DC2D4;
+    padding-left: 4rpx;
 }