开发联调

api/global.js

@@ -14,6 +14,8 @@ module.exports = {
     getActivities: data => request('/v3/activity', 'get', data),
     // 获取排行榜详情
     getRankingData: data => request('/v3/activity/rank', 'get', data),
+    // 获取排行榜个人排名
+    getSelfRanking: data => request('/v3/activity/currentRank', 'get', data),
     // 获取排行榜可选日期 
     getRankedDay: data => request('/v3/rank/statistics/day', 'get', data),
     // 获取朗读赛详情

pages/ranking/index.js

@@ -1,5 +1,6 @@
 import {
     getRankingData,
+    getSelfRanking,
     getRankedDay
 } from '~/api/global'
 import event from '~/mixins/event'
@@ -14,7 +15,8 @@ Page({
         rankingType: '',
         icon: '',
         podiumBoxBg: '',
-        historyList: []
+        historyList: [],
+        day: '',
     },
     /**
      * 生命周期函数--监听页面加载
@@ -23,8 +25,9 @@ Page({
         let historyList = await getRankedDay()
         console.log(historyList);
         this.setData({
-            historyList
-        },()=>{
+            historyList,
+            day: historyList[historyList.length - 1]
+        }, () => {
             this.getRankInfo(options)
         })
 
@@ -39,14 +42,15 @@ Page({
             frontColor: '#ffffff',
             backgroundColor: options.type == '2' ? '#50AE75' : options.type == '3' ? '#FF7E6C' : '#8468FA',
         })
-        console.log(this.data.historyList);
-        let {
-            userList,
-        } = await getRankingData({
+        let userList = await getRankingData({
+            type: options.type,
+            day: this.data.day
+        })
+        let self = await getSelfRanking({
             type: options.type,
-            day: this.data.historyList[this.data.historyList.length - 1]
+            day: this.data.day
         })
-     
+        console.log(self);
         this.setData({
             userList,
         })
@@ -61,6 +65,14 @@ Page({
             })
         }
     },
+    bindDateChange(e) {
+        this.setData({
+            day: e.detail.value
+        })
+        this.getRankInfo({
+            type: this.data.rankingType
+        })
+    },
     jumpIndex() {
         wx.switchTab({
             url: '/pages/index/index',

pages/ranking/index.less

@@ -33,6 +33,29 @@
             }
         }
 
+        .selectDay {
+            position: absolute;
+            right: 0;
+            margin: 38rpx 0;
+            display: flex;
+            align-items: center;
+            padding: 8rpx 20rpx 8rpx 26rpx;
+            background: rgba(0, 0, 0, 0.28);
+            border-radius: 25rpx 0rpx 0rpx 25rpx;
+
+            .day {
+                margin-right: 10rpx;
+                font-size: 26rpx;
+                color: #FFFFFF;
+            }
+
+            .rIcon {
+                width: 15rpx;
+                height: 20rpx;
+                transform: rotate(90deg);
+            }
+        }
+
         .podiumContent {
             position: absolute;
             top: 252rpx;

pages/ranking/index.wxml

@@ -1,3 +1,4 @@
+<wxs src="../../utils/filter.wxs" module="filters" />
 <view class="rankingBox">
     <view class="podiumBox {{podiumBoxBg}}">
         <view class="switchType" bindtap="switchType">
@@ -11,6 +12,13 @@
                 邀新榜
             </view>
         </view>
+        <view class="selectDay">
+            <picker mode="date" fields="month" value="{{day}}" bindchange="bindDateChange" start="{{historyList[0]}}"
+                end="{{historyList[historyList.length-1]}}">
+                <view class="day">{{filters.textSlice(day)}}月</view>
+            </picker>
+            <image src="/static/rbtn.png" class="rIcon" />
+        </view>
         <view class="podiumContent">
             <view class="user first">
                 <image src="{{userList[0].avatar}}" class="avatar" bindtap="jumpUserInfo"

pages/ranking/index.wxss

@@ -30,6 +30,26 @@
   background: #FFFFFF;
   border-radius: 30rpx;
 }
+.rankingBox .podiumBox .selectDay {
+  position: absolute;
+  right: 0;
+  margin: 38rpx 0;
+  display: flex;
+  align-items: center;
+  padding: 8rpx 20rpx 8rpx 26rpx;
+  background: rgba(0, 0, 0, 0.28);
+  border-radius: 25rpx 0rpx 0rpx 25rpx;
+}
+.rankingBox .podiumBox .selectDay .day {
+  margin-right: 10rpx;
+  font-size: 26rpx;
+  color: #FFFFFF;
+}
+.rankingBox .podiumBox .selectDay .rIcon {
+  width: 15rpx;
+  height: 20rpx;
+  transform: rotate(90deg);
+}
 .rankingBox .podiumBox .podiumContent {
   position: absolute;
   top: 252rpx;

utils/filter.wxs

@@ -15,6 +15,7 @@ function formatDate(time, flag) {
     }
     var time = time * 1
     var t = getDate(time);
+    console.log(t, 'zz');
     var tf = function (i) {
         return (i < 10 ? '0' : '') + i
     };
@@ -88,10 +89,15 @@ function showPennant(count, num) {
         return '/static/pennant.png'
     }
 }
+
+function textSlice(text) {
+    return text.slice(5)
+}
 module.exports = {
     formatDate: formatDate,
     gradeFilter: gradeFilter,
     numFilter: numFilter,
     twoDecimal: twoDecimal,
+    textSlice: textSlice,
     showPennant: showPennant
 }