直播静态

components/My_NavTabs/index.js

@@ -4,15 +4,23 @@ Component({
      * 组件的属性列表
      */
     properties: {
+        /* 列表 */
         tabsList: {
             type: Array
         },
+        /* 下标 */
         tabsIndex: {
             type: Number,
             value: 0
         },
+        /* 回调 */
         setIndex: {
             type: Function
+        },
+        /* 下载直播客户端 */
+        liveDownload: {
+            type: Boolean,
+            value: false
         }
     },
 
@@ -34,7 +42,11 @@ Component({
             this.setData({
                 tabsIndex: index
             })
-            this.triggerEvent("setIndex",index)
+            this.triggerEvent("setIndex", index)
+        },
+        /* 下载app */
+        downloadApp(){
+            console.log("下载app")
         }
     }
 })

components/My_NavTabs/index.wxml

@@ -2,4 +2,5 @@
     <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 bindtap="downloadApp">下载直播客户端<van-icon name="arrow" /><van-icon style="margin-left: -15rpx;" name="arrow" /></view></view>
 </view>

components/My_NavTabs/index.wxss

@@ -40,5 +40,14 @@
     border-radius: 3rpx;
     bottom: 0;
     left: 50%;
-    transform: translate(-50%,0);
+    transform: translate(-50%, 0);
+}
+
+/* 下载直播客户端 */
+.live-download {
+    font-size: 20rpx;
+    height: 60rpx;
+    line-height: 32rpx;
+    color: #4CBECF;
+    margin-right: 22rpx;
 }

components/My_UploadFiles/index.wxml

@@ -1,4 +1,4 @@
-<van-uploader file-list="{{ upType!='userImage'?fileList:'' }}" disabled="{{fisadministrator}}" preview-size='{{previewSize}}' max-count="{{maxCount}}" bind:after-read="afterRead" deletable="{{ true }}" use-before-read bind:before-read="beforeRead" bind:delete="imagesDelete">
+<van-uploader multiple="{{true}}" file-list="{{ upType!='userImage'?fileList:'' }}" disabled="{{fisadministrator}}" preview-size='{{previewSize}}' max-count="{{maxCount}}" bind:after-read="afterRead" deletable="{{ true }}" use-before-read bind:before-read="beforeRead" bind:delete="imagesDelete">
     <!-- 默认样式 -->
     <view wx:if="{{UploadShow}}" style="height: 100%; display: flex; align-items: center;">
         <view class="upImage_ltem">

pages/liveStreaming/index.js

@@ -1,78 +1,89 @@
 // pages/liveStreaming/index.js
 Page({
 
-    /**
-     * 页面的初始数据
-     */
-    data: {
-        aa1:"小程序复制"
-    },
-
-    /**
-     * 生命周期函数--监听页面加载
-     */
-    onLoad: function (options) {
-
-    },
-    copyTheAddress(e){
-        wx.setClipboardData({
-            data: this.data.aa1,
-            success (res) {
-              wx.getClipboardData({
-                success (res) {
-                  console.log('内容已复制') // data
-                }
-              })
-            }
-          })
-    },
-
-    /**
-     * 生命周期函数--监听页面初次渲染完成
-     */
-    onReady: function () {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面显示
-     */
-    onShow: function () {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面隐藏
-     */
-    onHide: function () {
-
-    },
-
-    /**
-     * 生命周期函数--监听页面卸载
-     */
-    onUnload: function () {
-
-    },
-
-    /**
-     * 页面相关事件处理函数--监听用户下拉动作
-     */
-    onPullDownRefresh: function () {
-
-    },
-
-    /**
-     * 页面上拉触底事件的处理函数
-     */
-    onReachBottom: function () {
-
-    },
-
-    /**
-     * 用户点击右上角分享
-     */
-    onShareAppMessage: function () {
-
-    }
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    tabsList: ["私域直播", "展会直播"], //tabs列表
+    tabsIndex: 0,
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+  /* tabs回调 */
+  setIndex({
+    detail
+  }) {
+    this.setData({
+      tabsIndex: detail
+    })
+  },
+
+  /* 复制地址 */
+  copyTheAddress(e) {
+    wx.setClipboardData({
+      data: "321",
+      success(res) {
+        wx.getClipboardData({
+          success(res) {
+            console.log('内容已复制') // data
+          }
+        })
+      }
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
 })

pages/liveStreaming/index.wxml

@@ -1,4 +1,5 @@
-<view style="height: 20rpx;"></view>
+<view style="height: 14rpx;"></view>
+<My_NavTabs tabsList="{{tabsList}}" tabsIndex="{{tabsIndex}}" bindsetIndex="setIndex" liveDownload="{{true}}" />
 <view class="msgBox">
     <!-- 标题和按钮 -->
     <view class="msgBox-title-and-but">
@@ -9,20 +10,27 @@
     </view>
     <!-- 直播信息 -->
     <view wx:if="{{true}}" class="account-information">
-        <view class="account-information-left">
+        <view class="account-information-row">
             <view>
-                <text class="title">直播账号</text> 1000000000
+                <text class="title">密码</text> 321654
             </view>
             <view>
-                <text class="title">密码</text> 321432
+                <text class="title">直播间地址 </text> www.jfc001.com/zb001 <text class="copy" bindtap="copyTheAddress">复制</text>
             </view>
         </view>
-        <view class="account-information-right">
+        <view class="account-information-row">
             <view>
-                <text class="title">开播时间</text> 2021-12-23 17:00
+                <text class="title">助教地址 </text> www.jfc001.com/zb001 <text class="copy" bindtap="copyTheAddress">复制</text>
             </view>
+        </view>
+        <view class="account-information-row">
             <view>
-                <text class="title">直播间地址 </text><text class="copy" bindtap="copyTheAddress">www.jfc001.com/zb001</text>
+                <text class="title">客户端开播地址 </text> www.jfc001.com/zb001 <text class="copy" bindtap="copyTheAddress">复制</text>
+            </view>
+        </view>
+        <view class="account-information-row">
+            <view>
+                <text class="title">web端开播地址 </text> www.jfc001.com/zb001 <text class="copy" bindtap="copyTheAddress">复制</text>
             </view>
         </view>
     </view>
@@ -76,7 +84,7 @@
             <view class="the-second-series">观看类型</view>
         </view>
         <!-- 表格 -->
-        <view wx:for="{{5}}" class="data-formlist-row">
+        <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>
@@ -87,7 +95,6 @@
             <view class="the-second-series">终端1</view>
             <view class="the-second-series">10场</view>
             <view class="the-second-series">直播</view>
-
         </view>
     </scroll-view>
 </view>

pages/liveStreaming/index.wxss

@@ -8,6 +8,7 @@
     padding-bottom: 20rpx;
     box-sizing: border-box;
     margin-bottom: 30rpx;
+    margin-top: 20rpx;
 }
 
 .msgBox-title-and-but {
@@ -42,7 +43,6 @@
 
 /* 账号信息 */
 .account-information {
-    display: flex;
     width: 100%;
     font-size: 20rpx;
     font-family: HelveticaNeue;
@@ -51,32 +51,24 @@
     box-sizing: border-box;
 }
 
-.account-information-left view,
-.account-information-right view {
-    height: 44rpx;
-    line-height: 44rpx;
-}
-
-.account-information-left .title,
-.account-information-right .title {
-    font-size: 24rpx;
-    font-weight: 400;
-    color: rgba(0, 0, 0, 0.85);
-}
-
-.account-information-left {
-    width: 260rpx;
+.account-information-row:first-child {
     margin-top: 18rpx;
-    margin-bottom: 10rpx;
 }
 
-.account-information-right {
-    flex: 1;
-    margin-top: 18rpx;
-    margin-bottom: 10rpx;
+.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-right .copy {
+
+.copy {
     color: #4DC2D4;
 }