开发pk榜、热播榜

app.json

@@ -1,7 +1,7 @@
 {
   "pages": [
-    "pages/pkPage/index",
     "pages/index/index",
+    "pages/pkPage/index",
     "pages/ranking/index",
     "pages/pkResult/index",
     "pages/userWorks/index",

components/banner/index.js

@@ -38,6 +38,16 @@ Component({
             url: '/pages/ranking/index?type=2&title=邀新榜',
           })
           break;
+        case 3:
+          wx.navigateTo({
+            url: '/pages/ranking/index?type=3&title=热播榜',
+          })
+          break;
+        case 4:
+          wx.navigateTo({
+            url: '/pages/ranking/index?type=4&title=挑战榜',
+          })
+          break;
         default:
       }
     },

pages/ranking/index.js

@@ -7,7 +7,8 @@ Page({
   data: {
     //2：邀新榜，3：热播榜，4：挑战pk榜
     rankingType: '',
-    mainColor:'#FF7E6C'
+    icon: '',
+    podiumBoxBg: ''
   },
 
   /**
@@ -16,14 +17,17 @@ Page({
   onLoad(options) {
     console.log(options);
     this.setData({
-      rankingType: options.type
+      rankingType: options.type,
+      icon: options.type == '2' ? '/static/yx.png' : options.type == '3' ? '/static/play.png' : '/static/win.png',
+      podiumBoxBg: options.type == '2' ? 'invitation' : options.type == '3' ? 'hot' : 'pk',
     })
+
     wx.setNavigationBarTitle({
       title: options.title
     })
     wx.setNavigationBarColor({
       frontColor: '#ffffff',
-      backgroundColor: '#ff7f6c',
+      backgroundColor: options.type == '2' ? '#ff7f6c' : options.type == '3' ? '#6D9FFE' : '#967DFF',
     })
   },
 

pages/ranking/index.less

@@ -7,6 +7,7 @@
   .podiumBox {
     position: relative;
     height: 362rpx;
+    background-size: cover;
 
     .podiumContent {
       width: 100%;
@@ -188,5 +189,28 @@
 
 .invitation {
   background: url('http://reader-wx.ai160.com/images/reader/v3/podium-1.jpg')no-repeat;
-  background-size: cover;
+
+  .tips2 {
+    color: #FF7F6C;
+  }
+}
+
+.hot {
+  background: url('http://reader-wx.ai160.com/images/reader/v3/podium-2.jpg')no-repeat;
+
+  .tips2 {
+    color: #6D9FFE;
+  }
+}
+
+.pk {
+  background: url('http://reader-wx.ai160.com/images/reader/v3/podium-3.jpg')no-repeat;
+
+  .tips2 {
+    color: #967DFF;
+  }
+}
+
+.iconPk {
+  width: 42rpx !important;
 }

pages/ranking/index.wxml

@@ -1,12 +1,12 @@
 <view class="rankingBox">
-  <view class="podiumBox {{rankingType=='2'?'invitation':''}}">
+  <view class="podiumBox {{podiumBoxBg}}">
     <view class="tips">榜单说明</view>
-    <view class="tips2" style="color: {{mainColor}};">周榜</view>
+    <view class="tips2">周榜</view>
     <view class="podiumContent">
       <view class="user first">
         <image src="/static/tj2.png" class="avatar" />
         <view class="iconBox">
-          <image src="/static/yx.png" class="icon" />
+          <image src="{{icon}}" class="icon {{rankingType=='4'?'iconPk':''}}" />
           <view class="num">333</view>
         </view>
         <view class="nickName textOver">
@@ -16,7 +16,7 @@
       <view class="user second">
         <image src="/static/tj2.png" class="avatar" />
         <view class="iconBox">
-          <image src="/static/yx.png" class="icon" />
+          <image src="{{icon}}" class="icon {{rankingType=='4'?'iconPk':''}}" />
           <view class="num">333</view>
         </view>
         <view class="nickName textOver">
@@ -26,7 +26,7 @@
       <view class="user third">
         <image src="/static/tj2.png" class="avatar" />
         <view class="iconBox">
-          <image src="/static/yx.png" class="icon" />
+          <image src="{{icon}}" class="icon {{rankingType=='4'?'iconPk':''}}" />
           <view class="num">333</view>
         </view>
         <view class="nickName textOver">
@@ -44,7 +44,7 @@
           <view class="nickName textOver">奥克斯</view>
         </view>
         <view class="right">
-          <image src="/static/yx.png" class="icon" />
+          <image src="{{icon}}" class="icon {{rankingType=='4'?'iconPk':''}}" />
           <view class="num">333</view>
         </view>
       </view>

pages/ranking/index.wxss

@@ -7,6 +7,7 @@
 .rankingBox .podiumBox {
   position: relative;
   height: 362rpx;
+  background-size: cover;
 }
 .rankingBox .podiumBox .podiumContent {
   width: 100%;
@@ -158,5 +159,22 @@
 }
 .invitation {
   background: url('http://reader-wx.ai160.com/images/reader/v3/podium-1.jpg') no-repeat;
-  background-size: cover;
+}
+.invitation .tips2 {
+  color: #FF7F6C;
+}
+.hot {
+  background: url('http://reader-wx.ai160.com/images/reader/v3/podium-2.jpg') no-repeat;
+}
+.hot .tips2 {
+  color: #6D9FFE;
+}
+.pk {
+  background: url('http://reader-wx.ai160.com/images/reader/v3/podium-3.jpg') no-repeat;
+}
+.pk .tips2 {
+  color: #967DFF;
+}
+.iconPk {
+  width: 42rpx !important;
 }