开发排行榜切换日期样式

pages/ranking/index.js

@@ -10,44 +10,54 @@ Page({
      */
     data: {
         userList: [],
-        ranking:'',
+        ranking: '',
         //2：邀新榜，3：热播榜，4：挑战pk榜
         rankingType: '',
         icon: '',
         podiumBoxBg: '',
         historyList: [],
-        day: '',
+        selector: {
+            currentDay: '',
+            next: true,
+            previous: true,
+        },
+        backgroundColor: ''
     },
     /**
      * 生命周期函数--监听页面加载
      */
     async onLoad(options) {
         let historyList = await getRankedDay()
-        console.log(historyList);
         this.setData({
             historyList,
-            day: historyList[historyList.length - 1]
+            selector: {
+                currentDay: historyList.length - 1,
+                next: false,
+                previous: historyList.length - 1 > 0
+            }
         }, () => {
             this.getRankInfo(options)
         })
 
     },
     async getRankInfo(options) {
+        let backgroundColor = options.type == '2' ? '#50AE75' : options.type == '3' ? '#FF7E6C' : '#8468FA';
         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',
+            backgroundColor
         })
         wx.setNavigationBarColor({
             frontColor: '#ffffff',
-            backgroundColor: options.type == '2' ? '#50AE75' : options.type == '3' ? '#FF7E6C' : '#8468FA',
+            backgroundColor
         })
         let {
             userList,
             ranking
         } = await getRankingData({
             type: options.type,
-            day: this.data.day
+            day: this.data.historyList[this.data.selector.currentDay]
         })
         this.setData({
             userList,
@@ -64,9 +74,22 @@ Page({
             })
         }
     },
-    bindDateChange(e) {
+    bindDateChange({
+        currentTarget
+    }) {
+        let type = currentTarget.dataset.type
+        let currentDay = this.data.selector.currentDay
+        if (type == 'next' && currentDay < this.data.historyList.length - 1) {
+            currentDay = ++currentDay
+        } else if (type == 'previous' && currentDay > 0) {
+            currentDay = --currentDay
+        }
         this.setData({
-            day: e.detail.value
+            selector: {
+                currentDay,
+                next: currentDay < this.data.historyList.length - 1,
+                previous: currentDay > 0
+            }
         })
         this.getRankInfo({
             type: this.data.rankingType

pages/ranking/index.less

@@ -4,6 +4,43 @@
     display: flex;
     flex-direction: column;
 
+    .selectDay {
+        width: 100%;
+        height: 100rpx;
+
+        .swiperBox {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin: 23rpx auto;
+            width: 311rpx;
+            height: 60rpx;
+            padding: 0 23rpx;
+            box-sizing: border-box;
+            background: rgba(0, 0, 0, 0.23);
+            border-radius: 30rpx;
+
+            .daySwiper {
+                flex: 1;
+                height: 60rpx;
+                line-height: 60rpx;
+                color: white;
+                text-align: center;
+                font-size: 30rpx;
+            }
+
+            .keys {
+                padding: 10rpx;
+                width: 13rpx;
+                height: 24rpx;
+            }
+
+            .leftKey {
+                transform: rotate(180deg);
+            }
+        }
+    }
+
     .podiumBox {
         position: relative;
         height: 540rpx;
@@ -33,29 +70,6 @@
             }
         }
 
-        .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;
@@ -186,7 +200,9 @@
             margin: 80rpx auto;
             text-align: center;
             font-size: 34rpx;
-                 margin-bottom: 20rpx;
+
+            .nullImg {
+                margin-bottom: 20rpx;
                 width: 223rpx;
                 height: 176rpx;
             }

pages/ranking/index.wxml

@@ -1,5 +1,19 @@
 <wxs src="../../utils/filter.wxs" module="filters" />
 <view class="rankingBox">
+    <view class="selectDay" style="background-color: {{backgroundColor}};">
+        <view class="swiperBox">
+            <image src="/static/rbtn.png" class="keys leftKey" bindtap="bindDateChange" data-type='next'
+                wx:if="{{selector.next}}" />
+            <swiper class="daySwiper" current="{{selector.currentDay}}">
+                <block wx:for="{{historyList}}" wx:key="*this">
+                    <swiper-item>
+                        {{item}}
+                    </swiper-item>
+                </block>
+            </swiper>
+            <image src="/static/rbtn.png" class="keys" bindtap="bindDateChange" data-type='previous'  wx:if="{{selector.previous}}" />
+        </view>
+    </view>
     <view class="podiumBox {{podiumBoxBg}}">
         <view class="switchType" bindtap="switchType">
             <view class="ilk {{rankingType=='3'?'current tips2':''}}" data-type='3'>
@@ -12,13 +26,6 @@
                 邀新榜
             </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

@@ -4,6 +4,38 @@
   display: flex;
   flex-direction: column;
 }
+.rankingBox .selectDay {
+  width: 100%;
+  height: 100rpx;
+}
+.rankingBox .selectDay .swiperBox {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 23rpx auto;
+  width: 311rpx;
+  height: 60rpx;
+  padding: 0 23rpx;
+  box-sizing: border-box;
+  background: rgba(0, 0, 0, 0.23);
+  border-radius: 30rpx;
+}
+.rankingBox .selectDay .swiperBox .daySwiper {
+  flex: 1;
+  height: 60rpx;
+  line-height: 60rpx;
+  color: white;
+  text-align: center;
+  font-size: 30rpx;
+}
+.rankingBox .selectDay .swiperBox .keys {
+  padding: 10rpx;
+  width: 13rpx;
+  height: 24rpx;
+}
+.rankingBox .selectDay .swiperBox .leftKey {
+  transform: rotate(180deg);
+}
 .rankingBox .podiumBox {
   position: relative;
   height: 540rpx;
@@ -30,26 +62,6 @@
   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/request.js

@@ -6,13 +6,13 @@ const {
         envVersion
     }
 } = wx.getAccountInfoSync();
-/* if (envVersion == 'develop') {
+if (envVersion == 'develop') {
     baseUrl = 'https://reader-api.efunbox.cn/wx'
     oldUrl = 'https://reader-api.efunbox.cn'
-} else { */
+} else {
     baseUrl = 'https://reader-api.ai160.com/wx'
     oldUrl = 'https://reader-api.ai160.com'
-// }
+}
 
 function request(url, method, data, oldBaseUrl = false, intercept = true) {
     let header = {