开发

api/global.js

@@ -13,7 +13,7 @@ module.exports = {
     // 获取官方活动
     getActivities: data => request('/v3/activity', 'get', data),
     // 获取排行榜详情
-    getRankingData: data => request(`/v3/activity/${data}`, 'get', data),
+    getRankingData: data => request('/v3/activity/rank', 'get', data),
     // 获取朗读赛详情
     getActivityInfo: data => request(`/v3/activity/info/${data}`, 'get', data),
     // 获取朗读赛范文

pages/ranking/index.js

@@ -14,7 +14,6 @@ Page({
         rankingType: '',
         icon: '',
         podiumBoxBg: '',
-        color: '',
         explain: ''
     },
 
@@ -22,35 +21,32 @@ Page({
      * 生命周期函数--监听页面加载
      */
     onLoad(options) {
+        this.getRankInfo(options)
+    },
+    async getRankInfo(options) {
         this.setData({
             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',
-            color: options.type == '2' ? '#2DCE66' : options.type == '3' ? '#FF7E6C' : '#967DFF',
         })
-
         wx.setNavigationBarColor({
             frontColor: '#ffffff',
             backgroundColor: options.type == '2' ? '#2DCE66' : options.type == '3' ? '#FF7E6C' : '#967DFF',
         })
-        this.getRankingData(options.id)
-    },
-    async getRankingData(id) {
         let {
             ranking,
             userList,
-            title,
             explain
-        } = await getRankingData(id)
-        wx.setNavigationBarTitle({
-            title
-        })
+        } = await getRankingData(options.id)
         this.setData({
             ranking,
             userList,
             explain
         })
     },
+    switchType(d) {
+        console.log(d);
+    },
     jumpIndex() {
         wx.switchTab({
             url: '/pages/index/index',

pages/ranking/index.json

@@ -1,4 +1,4 @@
 {
   "usingComponents": {},
-  "navigationBarTitleText": "排行榜"
+  "navigationBarTitleText": ""
 }

pages/ranking/index.less

@@ -3,203 +3,226 @@
     height: 100vh;
     display: flex;
     flex-direction: column;
-  
+
     .podiumBox {
-      position: relative;
-      height: 510rpx;
-      background-size: cover;
-  
-  
-      .podiumContent {
-        position: absolute;
-        top: 222rpx;
-        width: 100%;
-  
-        .user {
-          position: absolute;
-          width: 150rpx;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-  
-          .avatar {
-            width: 92rpx;
-            height: 92rpx;
-            border-radius: 50%;
-          }
-  
-          .iconBox {
-            margin: 8rpx 0rpx 4rpx;
+        position: relative;
+        height: 540rpx;
+        background-size: cover;
+
+        .switchType {
             display: flex;
             align-items: center;
-  
-            .icon {
-              width: 30rpx;
-              height: 30rpx;
+            justify-content: space-between;
+            margin: 20rpx auto;
+            width: 640rpx;
+
+            .ilk {
+                width: 180rpx;
+                text-align: center;
+                font-size: 30rpx;
+                font-weight: 600;
+                color: #FFFFFF;
             }
-  
-            .num {
-              margin-left: 6rpx;
-              color: white;
-              font-size: 28rpx;
+
+            .current {
+                width: 180rpx;
+                padding: 10rpx 0;
+                text-align: center;
+                background: #FFFFFF;
+                border-radius: 30rpx;
             }
-          }
-  
-          .nickName {
-            text-align: center;
-            font-size: 24rpx;
-            color: white;
-            width: 100%;
-          }
-        }
-  
-        .first {
-          top: 0rpx;
-          left: 304rpx;
-        }
-  
-        .second {
-          top: 53rpx;
-          left: 114rpx;
-  
-          .avatar {
-            width: 84rpx;
-            height: 84rpx;
-          }
         }
-  
-        .third {
-          top: 72rpx;
-          right: 112rpx;
-  
-          .avatar {
-            width: 84rpx;
-            height: 84rpx;
-          }
-        }
-      }
-    }
-  
-    .podiumList {
-      flex: 1;
-      overflow: hidden;
-  
-      .scrollBox {
-        height: 100%;
-        padding: 0rpx 30rpx;
-        box-sizing: border-box;
-  
-        .row {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding: 23rpx 0rpx;
-          border-bottom: 1rpx solid #ddd;
-  
-          .left {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-  
-            .num {
-              font-size: 37rpx;
-              width: 28rpx;
+
+        .podiumContent {
+            position: absolute;
+            top: 252rpx;
+            width: 100%;
+
+            .user {
+                position: absolute;
+                width: 150rpx;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .avatar {
+                    width: 92rpx;
+                    height: 92rpx;
+                    border-radius: 50%;
+                }
+
+                .iconBox {
+                    margin: 8rpx 0rpx 4rpx;
+                    display: flex;
+                    align-items: center;
+
+                    .icon {
+                        width: 30rpx;
+                        height: 30rpx;
+                    }
+
+                    .num {
+                        margin-left: 6rpx;
+                        color: white;
+                        font-size: 28rpx;
+                    }
+                }
+
+                .nickName {
+                    text-align: center;
+                    font-size: 24rpx;
+                    color: white;
+                    width: 100%;
+                }
             }
-  
-            .avatar {
-              margin: 0rpx 28rpx 0rpx 44rpx;
-              width: 78rpx;
-              height: 78rpx;
-              background-color: #EBEBEB;
-              border-radius: 50%;
+
+            .first {
+                top: 0rpx;
+                left: 300rpx;
             }
-  
-            .nickName {
-              font-size: 34rpx;
-              width: 240rpx;
+
+            .second {
+                top: 53rpx;
+                left: 71rpx;
+
+                .avatar {
+                    width: 84rpx;
+                    height: 84rpx;
+                }
             }
-          }
-  
-          .right {
-            text-align: center;
-  
-            .icon {
-              width: 30rpx;
-              height: 30rpx;
+
+            .third {
+                top: 73rpx;
+                right: 74rpx;
+
+                .avatar {
+                    width: 84rpx;
+                    height: 84rpx;
+                }
             }
-  
-            .num {
-              font-size: 32rpx;
-              color: #666;
+        }
+    }
+
+    .podiumList {
+        flex: 1;
+        overflow: hidden;
+
+        .scrollBox {
+            height: 100%;
+            padding: 0rpx 30rpx;
+            box-sizing: border-box;
+
+            .row {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 23rpx 0rpx;
+                border-bottom: 1rpx solid #ddd;
+
+                .left {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+
+                    .num {
+                        font-size: 37rpx;
+                        width: 28rpx;
+                    }
+
+                    .avatar {
+                        margin: 0rpx 28rpx 0rpx 44rpx;
+                        width: 78rpx;
+                        height: 78rpx;
+                        background-color: #EBEBEB;
+                        border-radius: 50%;
+                    }
+
+                    .nickName {
+                        font-size: 34rpx;
+                        width: 240rpx;
+                    }
+                }
+
+                .right {
+                    text-align: center;
+
+                    .icon {
+                        width: 30rpx;
+                        height: 30rpx;
+                    }
+
+                    .num {
+                        font-size: 32rpx;
+                        color: #666;
+                    }
+                }
             }
-          }
         }
-      }
     }
-  
+
     .footer {
-      width: 100%;
-      padding: 26rpx 60rpx 30rpx 90rpx;
-      box-sizing: border-box;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      background-color: white;
-      box-shadow: 0 2rpx 24rpx 0 rgba(0, 0, 0, 0.50);
-  
-      .left {
-        font-size: 26rpx;
-        font-weight: bold;
-  
-        text {
-          color: #4AC4FF;
-          font-size: 38rpx;
-          margin-left: 10rpx;
+        width: 100%;
+        padding: 26rpx 60rpx 30rpx 90rpx;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: white;
+        box-shadow: 0 2rpx 24rpx 0 rgba(0, 0, 0, 0.50);
+
+        .left {
+            font-size: 26rpx;
+            font-weight: bold;
+
+            text {
+                color: #4AC4FF;
+                font-size: 38rpx;
+                margin-left: 10rpx;
+            }
         }
-      }
-  
-      .rigth {
-        padding: 12rpx 34rpx;
-        padding-left: 26rpx;
-        border-radius: 50rpx;
-        background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
-        box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
-        color: white;
-        font-size: 26rpx;
-  
-        .share {
-          width: 26rpx;
-          height: 24rpx;
-          margin-right: 14rpx;
+
+        .rigth {
+            padding: 12rpx 34rpx;
+            padding-left: 26rpx;
+            border-radius: 50rpx;
+            background-image: linear-gradient(270deg, #33C3FF 0%, #81C7FF 100%, #14C962 100%);
+            box-shadow: 0 4rpx 10rpx 0 rgba(50, 197, 255, 0.46);
+            color: white;
+            font-size: 26rpx;
+
+            .share {
+                width: 26rpx;
+                height: 24rpx;
+                margin-right: 14rpx;
+            }
         }
-      }
     }
-  }
-  
-  .invitation {
-    background: url('http://reader-wx.ai160.com/images/reader/v3/podium-5.jpg')no-repeat;
-  
+}
+
+.invitation {
+    background: url('https://reader-wx.ai160.com/images/reader/v3/yx-bg.png')no-repeat;
+
     .tips2 {
-      color: #2DCE66;
+        color: #2DCE66;
     }
-  }
-  
-  .hot {
-    background: url('http://reader-wx.ai160.com/images/reader/v3/podium-4.jpg')no-repeat;
-  
+}
+
+.hot {
+    background: url('https://reader-wx.ai160.com/images/reader/v3/rb-bg.png')no-repeat;
+
     .tips2 {
-      color: #FF7F6C;
+        color: #FF7F6C !important;
     }
-  }
-  
-  .pk {
-    background: url('http://reader-wx.ai160.com/images/reader/v3/podium-6.jpg')no-repeat;
-  
+}
+
+.pk {
+    background: url('https://reader-wx.ai160.com/images/reader/v3/pk-bg.png')no-repeat;
+
     .tips2 {
-      color: #967DFF;
+        color: #967DFF  !important;
     }
-  }
-  
-  .iconPk {
+}
+
+.iconPk {
     width: 42rpx !important;
-  }
+}

pages/ranking/index.wxml

@@ -1,5 +1,16 @@
 <view class="rankingBox">
     <view class="podiumBox {{podiumBoxBg}}">
+        <view class="switchType"  bindtap="switchType">
+            <view class="ilk {{rankingType=='3'?'current tips2':''}}" data-type='1'>
+                热播榜
+            </view>
+            <view class="ilk {{rankingType=='4'?'current tips2':''}}">
+                挑战PK榜
+            </view>
+            <view class="ilk {{rankingType=='2'?'current tips2':''}}">
+                邀新榜
+            </view>
+        </view>
         <view class="podiumContent">
             <view class="user first">
                 <image src="{{userList[0].avatar}}" class="avatar" bindtap="jumpUserInfo"

pages/ranking/index.wxss

@@ -6,12 +6,33 @@
 }
 .rankingBox .podiumBox {
   position: relative;
-  height: 510rpx;
+  height: 540rpx;
   background-size: cover;
 }
+.rankingBox .podiumBox .switchType {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 20rpx auto;
+  width: 640rpx;
+}
+.rankingBox .podiumBox .switchType .ilk {
+  width: 180rpx;
+  text-align: center;
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #FFFFFF;
+}
+.rankingBox .podiumBox .switchType .current {
+  width: 180rpx;
+  padding: 10rpx 0;
+  text-align: center;
+  background: #FFFFFF;
+  border-radius: 30rpx;
+}
 .rankingBox .podiumBox .podiumContent {
   position: absolute;
-  top: 222rpx;
+  top: 252rpx;
   width: 100%;
 }
 .rankingBox .podiumBox .podiumContent .user {
@@ -48,19 +69,19 @@
 }
 .rankingBox .podiumBox .podiumContent .first {
   top: 0rpx;
-  left: 304rpx;
+  left: 300rpx;
 }
 .rankingBox .podiumBox .podiumContent .second {
   top: 53rpx;
-  left: 114rpx;
+  left: 71rpx;
 }
 .rankingBox .podiumBox .podiumContent .second .avatar {
   width: 84rpx;
   height: 84rpx;
 }
 .rankingBox .podiumBox .podiumContent .third {
-  top: 72rpx;
-  right: 112rpx;
+  top: 73rpx;
+  right: 74rpx;
 }
 .rankingBox .podiumBox .podiumContent .third .avatar {
   width: 84rpx;
@@ -147,22 +168,22 @@
   margin-right: 14rpx;
 }
 .invitation {
-  background: url('http://reader-wx.ai160.com/images/reader/v3/podium-5.jpg') no-repeat;
+  background: url('https://reader-wx.ai160.com/images/reader/v3/yx-bg.png') no-repeat;
 }
 .invitation .tips2 {
   color: #2DCE66;
 }
 .hot {
-  background: url('http://reader-wx.ai160.com/images/reader/v3/podium-4.jpg') no-repeat;
+  background: url('https://reader-wx.ai160.com/images/reader/v3/rb-bg.png') no-repeat;
 }
 .hot .tips2 {
-  color: #FF7F6C;
+  color: #FF7F6C !important;
 }
 .pk {
-  background: url('http://reader-wx.ai160.com/images/reader/v3/podium-6.jpg') no-repeat;
+  background: url('https://reader-wx.ai160.com/images/reader/v3/pk-bg.png') no-repeat;
 }
 .pk .tips2 {
-  color: #967DFF;
+  color: #967DFF !important;
 }
 .iconPk {
   width: 42rpx !important;