直播静态

app.json

@@ -37,7 +37,8 @@
         "pages/tabbar-pages/message/index",
         "pages/tabbar-pages/user/index",
         "pages/tabbar-pages/supplyAndDemand/particulars",
-        "pages/tradeShow/index"
+        "pages/tradeShow/index",
+        "pages/liveStreaming/index"
     ],
     "usingComponents": {
         "van-button": "@vant/weapp/button/index",

components/My_navBar/index.js

@@ -10,10 +10,10 @@ Component({
         attached: function () {
             // 在组件实例进入页面节点树时执行
             //获取当前登录用户名
-            const userName = getApp().globalData.accountList[wx.getStorageSync('userIndex')].fname;
+            /* const userName = getApp().globalData.accountList[wx.getStorageSync('userIndex')].fname;
             this.setData({
                 userName
-            })
+            }) */
         },
         detached: function () {
             // 在组件实例被从页面节点树移除时执行

pages/liveStreaming/index.js

@@ -0,0 +1,66 @@
+// pages/liveStreaming/index.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad: function (options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide: function () {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload: function () {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh: function () {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom: function () {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage: function () {
+
+    }
+})

pages/liveStreaming/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/liveStreaming/index.wxml

@@ -0,0 +1,80 @@
+<view style="height: 20rpx;"></view>
+<view class="msgBox">
+    <!-- 标题和按钮 -->
+    <view class="msgBox-title-and-but">
+        <view class="msgBox-title">直播账号信息</view>
+        <view class="msgBox-but">
+            <van-button custom-class="custom-class-msgBox-but">一键开播</van-button>
+        </view>
+    </view>
+    <!-- 直播信息 -->
+    <view wx:if="{{true}}" class="account-information">
+        <view class="account-information-left">
+            <view>
+                <text class="title">直播账号</text> 1000000000
+            </view>
+            <view>
+                <text class="title">密码</text> 321432
+            </view>
+        </view>
+        <view class="account-information-right">
+            <view>
+                <text class="title">开播时间</text> 2021-12-23 17:00
+            </view>
+            <view>
+                <text class="title">直播间地址 </text><text class="copy">www.jfc001.com/zb001</text>
+            </view>
+        </view>
+    </view>
+    <view wx:else class="go-to-apply-for">
+        暂无账号 前往申请 >>
+    </view>
+</view>
+<!-- 数据 -->
+
+<view class="msgBox">
+    <!-- 标题和按钮 -->
+    <view class="msgBox-title-and-but">
+        <view class="msgBox-title">直播数据</view>
+    </view>
+    <!-- 数据宫格 -->
+    <view class="data-grid">
+        <view>
+            <view class="title">观看次数(次)</view>
+            <view class="number">123</view>
+        </view>
+        <view>
+            <view class="title">观看人数(人)</view>
+            <view class="number">123</view>
+        </view>
+        <view>
+            <view class="title">观看时长(分钟)</view>
+            <view class="number">123</view>
+        </view>
+        <view>
+            <view class="title">人均观看次数(次)</view>
+            <view class="number">123</view>
+        </view>
+        <view>
+            <view class="title">人均观看时长(分钟)</view>
+            <view class="number">123</view>
+        </view>
+    </view>
+    <!-- 数据表格 -->
+    <view class="data-formlist">
+        <!-- 表头 -->
+        <view class="data-formlist-header">
+            <view class="the-first-column">用户名称</view>
+            <view class="the-second-series">用户id</view>
+            <view class="the-third-column">观看时长</view>
+            <view class="the-fourth-column">进入时间</view>
+        </view>
+        <!-- 表格 -->
+        <view wx:for="{{5}}" class="data-formlist-row">
+            <view class="the-first-column">好吃的薯片</view>
+            <view class="the-second-series">1234533</view>
+            <view class="the-third-column">6小时</view>
+            <view class="the-fourth-column">2021-12-23 17:00:34</view>
+        </view>
+    </view>
+</view>

pages/liveStreaming/index.wxss

@@ -0,0 +1,181 @@
+/* 信息盒子 */
+.msgBox {
+    width: 702rpx;
+    background: #FFFFFF;
+    border-radius: 20rpx;
+    margin: 0 auto;
+    padding: 10rpx;
+    padding-bottom: 20rpx;
+    box-sizing: border-box;
+    margin-bottom: 30rpx;
+}
+
+.msgBox-title-and-but {
+    height: 68rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10rpx;
+    border-bottom: 2rpx solid rgba(151, 151, 151, .1);
+    box-sizing: border-box;
+}
+
+/* 标题 */
+.msgBox-title {
+    font-size: 28rpx;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.85);
+}
+
+/* 一键开播按钮 */
+.custom-class-msgBox-but {
+    width: 116rpx !important;
+    height: 44rpx !important;
+    background: #4DC2D4 !important;
+    border-radius: 22rpx !important;
+    font-size: 20rpx !important;
+    font-weight: 500;
+    color: #FFFFFF !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+/* 账号信息 */
+.account-information {
+    display: flex;
+    width: 100%;
+    font-size: 20rpx;
+    font-family: HelveticaNeue;
+    color: rgba(0, 0, 0, 0.65);
+    padding: 0 20rpx;
+    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;
+    margin-top: 18rpx;
+    margin-bottom: 10rpx;
+}
+
+.account-information-right {
+    flex: 1;
+    margin-top: 18rpx;
+    margin-bottom: 10rpx;
+}
+
+.account-information-right .copy {
+    color: #4DC2D4;
+}
+
+/* 去申请 */
+.go-to-apply-for {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 330rpx;
+    height: 74rpx;
+    border-radius: 10rpx;
+    border: 2rpx solid rgba(0, 0, 0, 0.85);
+    box-sizing: border-box;
+    margin: 30rpx auto 10rpx;
+    font-size: 24rpx;
+    color: rgba(0, 0, 0, 0.85);
+}
+
+/* 直播数据网格 */
+.data-grid {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    padding: 0 20rpx;
+    box-sizing: border-box;
+    margin: 20rpx 0;
+}
+
+.data-grid>view {
+    width: 33.33%;
+    text-align: center;
+}
+
+.data-grid>view:nth-child(-n+3) {
+    margin-bottom: 10rpx;
+}
+
+
+.data-grid>view .title {
+    font-size: 24rpx;
+    color: rgba(0, 0, 0, 0.85);
+}
+
+.data-grid>view .number {
+    font-size: 24rpx;
+    font-weight: 500;
+    color: #4DC2D4;
+    margin-top: 10rpx;
+}
+
+/* 数据表 */
+.data-formlist {
+    width: 100%;
+    border-radius: 8rpx;
+    overflow: hidden;
+}
+
+.data-formlist-header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 66rpx;
+    padding: 0 20rpx;
+    background: #F6F7F8;
+    box-sizing: border-box;
+    border-bottom: 2rpx solid #e8e8e8;
+}
+
+.data-formlist-header>view {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.85);
+}
+
+.data-formlist-row {
+    display: flex;
+    align-items: center;
+    height: 56rpx;
+    font-size: 20rpx;
+    color: rgba(0, 0, 0, 0.65);
+    padding: 0 20rpx;
+    box-sizing: border-box;
+    border-bottom: 2rpx solid #e8e8e8;
+}
+
+.data-formlist .the-first-column {
+    margin-left: 14rpx;
+    width: 160rpx;
+
+}
+
+.data-formlist .the-second-series {
+    width: 130rpx;
+}
+
+.data-formlist .the-third-column {
+    width: 130rpx;
+}
+
+.data-formlist .the-fourth-column {
+    flex: 1;
+}

pages/tabbar-pages/home/index.js

@@ -20,29 +20,17 @@ Page({
         }],
         /* 宫格列表 */
         gridList: [{
-            id: '001',
-            text: '寻找面料',
+            text: '开单',
             icon: '/static/login/Phone.png'
         }, {
-            id: '002',
-            text: '面料设计',
-            icon: '/static/login/identity.png'
-        }, {
-            id: '003',
-            text: '平面设计',
+            text: '产品资料',
             icon: '/static/login/username.png'
         }, {
-            id: '004',
-            text: '产品策划',
+            text: '私域直播',
             icon: '/static/login/verificationcode.png'
         }, {
-            id: '005',
-            text: '寻找主播',
+            text: '供需广场',
             icon: '/static/login/verificationcode.png'
-        }, {
-            id: '006',
-            text: '摄影摄像',
-            icon: '/static/login/identity.png'
         }],
         /* 圆角按钮tabs列表 */
         roundedList: [

pages/tabbar-pages/home/index.wxml

@@ -10,12 +10,12 @@
 </view>
 <!-- 宫格区域 -->
 <view class="grid_box">
-    <van-grid border="{{false}}" column-num="3" bindtap="gridJumpPage">
+    <van-grid border="{{false}}" column-num="4" bindtap="gridJumpPage">
         <van-grid-item wx:for="{{gridList}}" data-name="{{item.text}}" icon="{{item.icon}}" text="{{item.text}}" text-class="grid_text-class" />
     </van-grid>
 </view>
 <!-- 展示区域 -->
-<My_DisplayBox title="通告" bind:getExhibitionTitle="getExhibitionTitle">
+<My_DisplayBox wx:if="{{false}}" title="通告" bind:getExhibitionTitle="getExhibitionTitle">
     <!-- 标题前图片 -->
     <image slot="display-box-img" class="display-title_image" src="/static/icon-02.png" mode="aspectFit"></image>
     <!-- 列表展示区 -->

pages/tabbar-pages/home/index.wxss

@@ -23,7 +23,7 @@
 /* 宫格 */
 .grid_box {
     width: 100vw;
-    padding: 0 50rpx;
+    padding: 0 30rpx;
     box-sizing: border-box;
     background-color: #FFFFFF;
 }

project.private.config.json

@@ -83,6 +83,12 @@
                     "pathName": "pages/tabbar-pages/supplyAndDemand/particulars",
                     "query": "",
                     "scene": null
+                },
+                {
+                    "name": "直播",
+                    "pathName": "pages/liveStreaming/index",
+                    "query": "",
+                    "scene": null
                 }
             ]
         }