开发

pages/activity/index.js

@@ -1,9 +1,26 @@
+import {
+    getActivities,
+} from '~/api/global'
+import {
+    createStoreBindings
+} from 'mobx-miniprogram-bindings'
+import {
+    store
+} from '~/store/index'
 Page({
     data: {
-
+        rankList: [],
     },
     onLoad(options) {
-
+        this.getLocUserInfo()
+        if (Object.keys(this.data.userInfo).length > 0) {
+            this.getRankList()
+        } else {
+            getApp().callBack = (res) => {
+                this.getLocUserInfo()
+                this.getRankList()
+            }
+        }
     },
     onShow() {
         if (typeof this.getTabBar === 'function') {
@@ -12,4 +29,23 @@ Page({
             })
         }
     },
+    async getRankList() {
+        let res = await getActivities({
+            classify: 2,
+            grade: this.data.userInfo.grade
+        })
+        console.log(res);
+        this.setData({
+            rankList: res
+        })
+    },
+    async getLocUserInfo() {
+        this.storeBindings = createStoreBindings(this, {
+            store,
+            fields: {
+                userInfo: 'userInfo'
+            },
+        })
+        this.storeBindings.updateStoreBindings()
+    },
 })

pages/activity/index.json

@@ -1,5 +1,7 @@
 {
     "usingComponents": {
-        "activityList": "/components/activityList/index"
-    }
+        "navigationBar": "/components/navigationBar/index"
+    },
+    "navigationStyle": "custom",
+    "enablePullDownRefresh": false
 }

pages/activity/index.less

@@ -1,5 +1,169 @@
 .activityBox {
     position: relative;
-    padding-top: 30rpx;
-    padding-bottom: calc(140rpx + env(safe-area-inset-bottom)) !important;
+    padding: 35rpx 25rpx calc(140rpx + env(safe-area-inset-bottom)) !important;
+
+    .rankList {
+        .headline {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 30rpx;
+            .left {
+                display: flex;
+                align-items: center;
+                font-size: 36rpx;
+                font-weight: 400;
+
+                .logo {
+                    margin-right: 10rpx;
+                    width: 49rpx;
+                    height: 42rpx;
+                }
+            }
+
+            .toAll {
+                font-size: 28rpx;
+                color: #333333;
+
+                .backIcon {
+                    width: 14rpx;
+                    height: 24rpx;
+                }
+            }
+        }
+
+        .ranking-class-2 {
+            margin-bottom: 20rpx;
+            width: 100%;
+            box-sizing: border-box;
+            border-radius: 30rpx;
+            overflow: hidden;
+            box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
+
+            .header {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 25rpx 30rpx;
+                box-sizing: border-box;
+
+                .left {
+                    display: flex;
+                    align-items: center;
+                    color: white;
+
+                    .icon {
+                        width: 28rpx;
+                        height: 30rpx;
+                    }
+
+                    .title {
+                        font-size: 30rpx;
+                        font-weight: bold;
+                        margin: 0rpx 10rpx;
+                    }
+                }
+
+                .toAll {
+                    font-size: 28rpx;
+                    color: white;
+
+                    .backIcon {
+                        width: 14rpx;
+                        height: 24rpx;
+                    }
+                }
+            }
+
+            .body {
+                width: 100%;
+                padding: 25rpx 20rpx;
+                box-sizing: border-box;
+
+                .row {
+                    padding: 14rpx 25rpx;
+                    border-radius: 14rpx;
+                    margin-bottom: 20rpx;
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    background-color: white;
+
+                    .left {
+                        display: flex;
+                        align-items: center;
+
+                        .stand {
+                            width: 36rpx;
+                            height: 36rpx;
+                        }
+
+                        .avatar {
+                            width: 72rpx;
+                            height: 72rpx;
+                            margin: 0rpx 30rpx;
+                            border-radius: 50%;
+                            background-color: #EBEBEB;
+                        }
+
+                        .nickName {
+                            width: 210rpx;
+                            font-size: 28rpx;
+                        }
+                    }
+
+                    .right {
+                        text-align: center;
+                        font-size: 0rpx;
+
+                        .playIcon {
+                            width: 34rpx;
+                            height: 34rpx;
+                        }
+
+                        .num {
+                            font-size: 28rpx;
+                        }
+                    }
+                }
+            }
+        }
+
+        .yxb {
+            .header {
+                background-color: #2DCE66;
+            }
+
+            .body {
+                background-image: linear-gradient(180deg, #4cd67c 0%, #66ec95 100%);
+            }
+        }
+
+        .rbb {
+            .header {
+                background-color: #FF7E6C;
+            }
+
+            .body {
+                background-image: linear-gradient(180deg, #FFB4A8 0%, #FFDCD7 100%);
+            }
+        }
+
+        .pkb {
+            .header {
+                background-color: #967DFF;
+            }
+
+            .body {
+                background-image: linear-gradient(180deg, #8265F9 0%, #B8A7FF 100%);
+            }
+
+
+
+            .playIcon {
+                width: 38rpx !important;
+                height: 34rpx !important;
+            }
+        }
+    }
 }

pages/activity/index.wxml

@@ -1,3 +1,47 @@
+<navigationBar bind:reload='requestAgain'></navigationBar>
 <view class="activityBox">
-    <activityList id="activityList" classify='{{4}}' />
+    <view class="rankList ">
+        <view class="headline">
+            <view class="left">
+                <image src="/static/ranking-i.png" class="logo" />
+                排行榜
+            </view>
+            <view class="toAll" bindtap="goRanking">查看更多
+                <image src="/static/black.png" class="backIcon" />
+            </view>
+        </view>
+        <block wx:for="{{rankList}}" wx:key="id">
+            <view class="ranking-class-2 {{item.type=='2'?'yxb':item.type=='3'?'rbb':'pkb'}}">
+                <view class="header">
+                    <view class="left">
+                        <image
+                            src="{{item.type=='2'?'/static/yxb.png':item.type=='3'?'/static/rbb.png':'/static/pkb.png'}}"
+                            class="icon" />
+                        <view class="title">{{item.title}}</view>
+                    </view>
+                    <view class="toAll" bindtap="activityEvent" data-info="{{item}}">查看全部
+                        <image src="/static/rbtn.png" class="backIcon" />
+                    </view>
+                </view>
+                <view class="body">
+                    <view class="row" wx:for="{{3}}" wx:key="index" wx:for-item='items' bindtap="jumpUserInfo"
+                        data-uid='{{item.userList[index].uid}}'>
+                        <view class="left">
+                            <image src="/static/{{index+1}}-1.png" class="stand" />
+                            <image src="{{item.userList[index].avatar||'/static/nullAvatar.png'}}" class="avatar" />
+                            <view class="nickName textOver">
+                                {{item.userList[index].nickName||item.userList[index].eid||'等你来占位'}}
+                            </view>
+                        </view>
+                        <view class="right">
+                            <image
+                                src="{{item.type=='2'?'/static/yx.png':item.type=='3'?'/static/play.png':'/static/win.png'}}"
+                                class="playIcon" />
+                            <view class="num">{{item.userList[index].count}}</view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+        </block>
+    </view>
 </view>

pages/activity/index.wxss

@@ -1,5 +1,132 @@
 .activityBox {
   position: relative;
-  padding-top: 30rpx;
-  padding-bottom: calc(140rpx + env(safe-area-inset-bottom)) !important;
+  padding: 35rpx 25rpx calc(140rpx + env(safe-area-inset-bottom)) !important;
+}
+.activityBox .rankList .headline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 30rpx;
+}
+.activityBox .rankList .headline .left {
+  display: flex;
+  align-items: center;
+  font-size: 36rpx;
+  font-weight: 400;
+}
+.activityBox .rankList .headline .left .logo {
+  margin-right: 10rpx;
+  width: 49rpx;
+  height: 42rpx;
+}
+.activityBox .rankList .headline .toAll {
+  font-size: 28rpx;
+  color: #333333;
+}
+.activityBox .rankList .headline .toAll .backIcon {
+  width: 14rpx;
+  height: 24rpx;
+}
+.activityBox .rankList .ranking-class-2 {
+  margin-bottom: 20rpx;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 30rpx;
+  overflow: hidden;
+  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;
+}
+.activityBox .rankList .ranking-class-2 .header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 25rpx 30rpx;
+  box-sizing: border-box;
+}
+.activityBox .rankList .ranking-class-2 .header .left {
+  display: flex;
+  align-items: center;
+  color: white;
+}
+.activityBox .rankList .ranking-class-2 .header .left .icon {
+  width: 28rpx;
+  height: 30rpx;
+}
+.activityBox .rankList .ranking-class-2 .header .left .title {
+  font-size: 30rpx;
+  font-weight: bold;
+  margin: 0rpx 10rpx;
+}
+.activityBox .rankList .ranking-class-2 .header .toAll {
+  font-size: 28rpx;
+  color: white;
+}
+.activityBox .rankList .ranking-class-2 .header .toAll .backIcon {
+  width: 14rpx;
+  height: 24rpx;
+}
+.activityBox .rankList .ranking-class-2 .body {
+  width: 100%;
+  padding: 25rpx 20rpx;
+  box-sizing: border-box;
+}
+.activityBox .rankList .ranking-class-2 .body .row {
+  padding: 14rpx 25rpx;
+  border-radius: 14rpx;
+  margin-bottom: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: white;
+}
+.activityBox .rankList .ranking-class-2 .body .row .left {
+  display: flex;
+  align-items: center;
+}
+.activityBox .rankList .ranking-class-2 .body .row .left .stand {
+  width: 36rpx;
+  height: 36rpx;
+}
+.activityBox .rankList .ranking-class-2 .body .row .left .avatar {
+  width: 72rpx;
+  height: 72rpx;
+  margin: 0rpx 30rpx;
+  border-radius: 50%;
+  background-color: #EBEBEB;
+}
+.activityBox .rankList .ranking-class-2 .body .row .left .nickName {
+  width: 210rpx;
+  font-size: 28rpx;
+}
+.activityBox .rankList .ranking-class-2 .body .row .right {
+  text-align: center;
+  font-size: 0rpx;
+}
+.activityBox .rankList .ranking-class-2 .body .row .right .playIcon {
+  width: 34rpx;
+  height: 34rpx;
+}
+.activityBox .rankList .ranking-class-2 .body .row .right .num {
+  font-size: 28rpx;
+}
+.activityBox .rankList .yxb .header {
+  background-color: #2DCE66;
+}
+.activityBox .rankList .yxb .body {
+  background-image: linear-gradient(180deg, #4cd67c 0%, #66ec95 100%);
+}
+.activityBox .rankList .rbb .header {
+  background-color: #FF7E6C;
+}
+.activityBox .rankList .rbb .body {
+  background-image: linear-gradient(180deg, #FFB4A8 0%, #FFDCD7 100%);
+}
+.activityBox .rankList .pkb .header {
+  background-color: #967DFF;
+}
+.activityBox .rankList .pkb .body {
+  background-image: linear-gradient(180deg, #8265F9 0%, #B8A7FF 100%);
+}
+.activityBox .rankList .pkb .playIcon {
+  width: 38rpx !important;
+  height: 34rpx !important;
 }

pages/index/index.wxml

@@ -11,7 +11,6 @@
     <view class="resourceBox">
         <authority wx:if="{{listOptions.sortList[0]=='recommendReadList'}}"
             worksList="{{listOptions.recommendReadList}}" />
-        <activityList classify='3' dataList='{{listOptions.activityList}}' />
         <authority wx:if="{{listOptions.sortList[1]=='recommendReadList'}}"
             worksList="{{listOptions.recommendReadList}}" />
     </view>