nyx weapp: 页面更新

1. 调整live及share的前端

app/nyx-dev/config.js

@@ -3,7 +3,7 @@
 //  env = 0; //本地java测试，需要启动java后台
 //  env = 1; //阿里云服务器测试版本
 //  env = 2; //阿里云服务器生产版本
-var env = 1;
+var env = 0;
 
 var debug = 0; //是否打印调试信息
 var host_key  = "https://fun.hisuhong.com";
@@ -82,5 +82,6 @@ var config={
   image_url: host_key + "/images/",
   redis_update_like_url: host_key + "/api/nyx/redis/update/like",
   redis_query_like_url: host_key + "/api/nyx/redis/search/like",
+  live_query_url: host_key + "/api/nyx/live/query",
 }
 module.exports=config;
\ No newline at end of file

app/nyx-dev/pages/live/live-info/live-info.js

@@ -47,7 +47,7 @@ Page({
     //格式示例数据，可为空
     allContentList: [],
     num: 0,
-    sid: "key",
+    sid: "",
     chatUserInfo: {},
     scrollTop: 0,
 
@@ -70,6 +70,7 @@ Page({
     */
     selected : '@',
     likeUrl: "../../../icon/activity/like_selected.png", // like图标的url
+    redUrl: "../../../icon/live/red.png", // 在线图标的url
     //directly to redis
     rankData_raw_like: {
       '@叁年间' : 100,
@@ -96,6 +97,8 @@ Page({
     tabBarHeight: 0,
 
     streamer_name: "",
+    title: "",
+    num_watcher: "",
 
   },
 
@@ -149,13 +152,17 @@ Page({
     //step2: 获取上一页面传入的数据
     var sid = _this.__data__.sid
     var streamer_name = _this.__data__.streamer_name
+    var title = _this.__data__.title
+    var num_watcher = _this.__data__.num_watcher
     if ( options.sid != "") 
     {
       sid = options.sid;
+      title = options.title;
+      num_watcher = options.num_watcher;
       streamer_name = options.streamer_name;
 
     }
-    _this.setData({ sid, streamer_name })    
+    _this.setData({ sid, streamer_name, title, num_watcher })    
 
     //初始化socket
     if (app.globalData.socketTask.readyState != 1 && app.globalData.socketTask.readyState != 0) {

app/nyx-dev/pages/live/live-info/live-info.wxml

 <!--pages/share/share.wxml-->
 <view class="page">
 <!-- start key view -->
-<view class="page__hd" style="position:fixed; top:0;width: 750rpx;">
+<view class="page__hd" style="position:fixed; top:0;width: 100%;">
   <view class="tab-title">
     <view class="{{selected=='@'?'border-tottom':'default'}}" id="@" bindtap="selected">热度商家榜</view>
     <view class="{{selected=='#'?'border-tottom':'default'}}" id="#" bindtap="selected">活跃主播榜</view>
@@ -15,7 +15,7 @@
       <view class="rank">
         <view class="rank-left">{{item.name}}</view>
         <view class="rank-right">
-          <view class="rank-row"><image src="{{likeUrl}}"></image> {{item.like}}</view>
+          <view class="rank-row"><image src="{{likeUrl}}"></image> {{item.like}}在线</view>
         </view>
       </view>
     </view> 
@@ -27,10 +27,16 @@
 <!--end key view -->
 
 <!--公屏view-->
-<view style="height:{{chatHeight}}rpx;position:fixed; bottom:0;">
+<view style="height:{{chatHeight}}rpx;position:fixed; bottom:0; width:100%">
 <view class="weui-cell weui-cell_access">
-    <view class="weui-cell__bd">{{streamer_name}}</view>
+    <view class="live">
+      <view class="live-left">{{title}}</view>
+      <view class="live-right">
+        <view class="live-row"><image src="{{redUrl}}"></image> {{num_watcher}}在线</view>
+      </view>
+    </view>    
 </view>
+
 <scroll-view scroll-y="true" scroll-top="{{scrollTop}}" style="height:{{chatHeight-80}}rpx;position:fixed; bottom:0;">
 <view class="wrapper {{isShowAdd?'media-padd':''}} {{isEmotion?'emotion-padd':''}}" id="wrapperCon" bindtap="cancelShow" >
   <!-- 消息列表 -->

app/nyx-dev/pages/live/live-info/live-info.wxss

@@ -55,7 +55,7 @@ padding-bottom: 100rpx;
 }
 
 .message-list {
-margin: 10rpx 30rpx 30rpx;
+margin: 10rpx 32rpx 32rpx 32rpx;
 }
 
 .chat {
@@ -305,7 +305,7 @@ vertical-align: middle;
 height: 60rpx;
 background: #fff;
 border-top: 1px solid #fafafa; 
-padding: 16rpx; 
+padding: 16rpx 32rpx 16rpx 32rpx; 
 line-height: 60rpx;
 display:flex;
 flex-direction: row;
@@ -315,9 +315,9 @@ flex:auto;
 text-align:center;
 }
 .tab-content{
-height: 60rpx;
-background: #fff;
-padding: 16rpx;
+  height: 60rpx;
+  background: #fff;
+  padding: 16rpx 0rpx 16rpx 16rpx; /* top right bottom (left)*/
 }
 .rank-info{
 background: #fff;
@@ -342,4 +342,21 @@ font-size: 0;
 .rank-row{
 display: flex;
 flex-direction: row;
-}
\ No newline at end of file
+align-items: center;
+}
+
+/* live-info */
+/* top right bottom; 缺少了left,根据原则,则left的值有right来代替 */
+.live{width: 100%; display: flex; margin-top: 0rpx; align-items: center;margin-bottom: 12rpx;}
+.live-left{width: 65%; }
+.live-right{width: 35%; display: flex;}
+.live-right image{
+width: 40rpx;
+height: 40rpx;
+font-size: 0;
+}
+.live-row{
+display: flex;
+flex-direction: row;
+align-items: center;
+}

app/nyx-dev/pages/live/live.wxml

@@ -84,11 +84,11 @@
     <view class="item stamp stamp01">
         <!-- 商品信息 -->
         <view class="note-row">
-          <navigator url='live-info/live-info?sid={{item.sid}}&streamer_name={{item.streamer_name}}' >
+          <navigator url='{{item.url_live}}' >
             <image class="writer-image" src="{{item.note_image}}"/>
           </navigator>
             <view class="note-column">
-              <navigator url='live-info/live-info?sid={{item.sid}}&streamer_name={{item.streamer_name}}' >
+              <navigator url='{{item.url_live}}' >
               <!-- 商家信息 -->
               <text>{{item.title}}</text>
               <!-- 商品价格 -->
@@ -101,7 +101,7 @@
               <!-- 商家名称 -->
               <view class="note-row align">                
                 <view class="desc-member-left">
-                <image src="{{item.note_image}}"/>{{item.streamer_name}}</view>
+                <image src="{{item.avatarUrl}}"/>{{item.streamer_name}}</view>
                 <!-- todo 店铺功能尚未实现 -->
                 <!-- <view class="desc-member-right">进店 ></view> -->
               </view>

app/nyx-dev/pages/share/share.js

@@ -71,6 +71,7 @@ Page({
     */
     selected : '@',
     likeUrl: "../../icon/activity/like_selected.png", // like图标的url
+    redUrl: "../../icon/live/red.png", // 在线图标的url
     //directly to redis
     rankData_raw_like: {
       '@叁年间' : 100,

app/nyx-dev/pages/share/share.wxml

 <!--pages/share/share.wxml-->
 <view class="page">
 <!-- start key view -->
-<view class="page__hd" style="position:fixed; top:0;width: 750rpx;">
+<view class="page__hd" style="position:fixed; top:0;width: 100%;">
   <view class="tab-title">
     <view class="{{selected=='@'?'border-tottom':'default'}}" id="@" bindtap="selected">热度商家榜</view>
     <view class="{{selected=='#'?'border-tottom':'default'}}" id="#" bindtap="selected">活跃主播榜</view>
@@ -27,9 +27,14 @@
 <!--end key view -->
 
 <!--公屏view-->
-<view style="height:{{chatHeight}}rpx;position:fixed; bottom:0;">
+<view style="height:{{chatHeight}}rpx;position:fixed; bottom:0;width: 100%">
 <view class="weui-cell weui-cell_access">
-    <view class="weui-cell__bd">公屏发言</view>
+    <view class="live">
+      <view class="live-left">公屏发言</view>
+      <view class="live-right">
+        <view class="live-row"><image src="{{redUrl}}"></image>100在线</view>
+      </view>
+    </view>     
 </view>
 <scroll-view scroll-y="true" scroll-top="{{scrollTop}}" style="height:{{chatHeight-80}}rpx;position:fixed; bottom:0;">
 <view class="wrapper {{isShowAdd?'media-padd':''}} {{isEmotion?'emotion-padd':''}}" id="wrapperCon" bindtap="cancelShow" >

app/nyx-dev/pages/share/share.wxss

@@ -305,7 +305,7 @@
   height: 60rpx;
   background: #fff;
   border-top: 1px solid #fafafa; 
-  padding: 16rpx; 
+  padding: 16rpx 32rpx 16rpx 32rpx; 
   line-height: 60rpx;
   display:flex;
   flex-direction: row;
@@ -317,7 +317,7 @@
 .tab-content{
   height: 60rpx;
   background: #fff;
-  padding: 16rpx;
+  padding: 16rpx 0rpx 16rpx 16rpx; /* top right bottom (left)*/
 }
 .rank-info{
   background: #fff;
@@ -329,10 +329,10 @@
 .hidden{display:none;}
 
 /* rank-info */
-.rank{width: 100%; display: flex; margin-top: 0rpx; align-items: center;}
+.rank{width: 100%; display: flex; margin-top: 0rpx; align-items: center;margin-bottom: 12rpx;}
 /* .rank-left{width: 50%; text-align: center;}
 .rank-right{width: 50%; display: flex; justify-content: center;} */
-.rank-left{width: 50%; padding-left:100rpx; margin-bottom: 12rpx;}
+.rank-left{width: 50%; padding-left:100rpx;}
 .rank-right{width: 50%; display: flex; padding-left:100rpx;}
 .rank-right image{
   width: 40rpx;
@@ -342,4 +342,21 @@
 .rank-row{
   display: flex;
   flex-direction: row;
-}
\ No newline at end of file
+  align-items: center;
+}
+
+/* live-info */
+/* top right bottom; 缺少了left,根据原则,则left的值有right来代替 */
+.live{width: 100%; display: flex; margin-top: 0rpx; align-items: center;}
+.live-left{width: 50%; padding-right: 116rpx;}
+.live-right{width: 50%; display: flex; padding-left: 100rpx;}
+.live-right image{
+width: 40rpx;
+height: 40rpx;
+font-size: 0;
+}
+.live-row{
+display: flex;
+flex-direction: row;
+align-items: center;
+}