开发

components/activityList/index.js

@@ -74,7 +74,6 @@
                         grade: this.data.userInfo.grade
                     })
                 }
-                console.log(activityList);
                 this.setData({
                     activityList,
                 })

pages/activity/index.js

@@ -10,15 +10,18 @@ import {
 Page({
     data: {
         rankList: [],
+        activityList: []
     },
     onLoad(options) {
         this.getLocUserInfo()
         if (Object.keys(this.data.userInfo).length > 0) {
             this.getRankList()
+            this.getActivityList()
         } else {
             getApp().callBack = (res) => {
                 this.getLocUserInfo()
                 this.getRankList()
+                this.getActivityList()
             }
         }
     },
@@ -39,6 +42,16 @@ Page({
             rankList: res
         })
     },
+    async getActivityList() {
+        let res = await getActivities({
+            classify: 3,
+            grade: this.data.userInfo.grade
+        })
+        console.log(res, 'bbbb');
+        this.setData({
+            activityList: res
+        })
+    },
     async getLocUserInfo() {
         this.storeBindings = createStoreBindings(this, {
             store,

pages/activity/index.json

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

pages/activity/index.less

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

pages/activity/index.wxml

@@ -10,38 +10,49 @@
                 <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}}'>
+        <scroll-view class="scrollView" scroll-x="true" enhanced show-scrollbar="{{false}}">
+            <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="/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>
+                                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>
+        </scroll-view>
+    </view>
+    <view class="activeyList">
+        <view class="headline">
+            <view class="left">
+                <image src="/static/huodong-3.png" class="logo" />
+                官方活动
             </view>
-        </block>
+        </view>
+        <activityList classify='3' dataList="{{activityList}}" />
     </view>
 </view>

pages/activity/index.wxss

@@ -2,74 +2,90 @@
   position: relative;
   padding: 35rpx 25rpx calc(140rpx + env(safe-area-inset-bottom)) !important;
 }
-.activityBox .rankList .headline {
+.activityBox .rankList,
+.activityBox .activeyList {
+  margin-bottom: 35rpx;
+}
+.activityBox .rankList .headline,
+.activityBox .activeyList .headline {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 30rpx;
 }
-.activityBox .rankList .headline .left {
+.activityBox .rankList .headline .left,
+.activityBox .activeyList .headline .left {
   display: flex;
   align-items: center;
   font-size: 36rpx;
   font-weight: 400;
 }
-.activityBox .rankList .headline .left .logo {
+.activityBox .rankList .headline .left .logo,
+.activityBox .activeyList .headline .left .logo {
   margin-right: 10rpx;
   width: 49rpx;
-  height: 42rpx;
+  height: 49rpx;
 }
-.activityBox .rankList .headline .toAll {
+.activityBox .rankList .headline .toAll,
+.activityBox .activeyList .headline .toAll {
   font-size: 28rpx;
   color: #333333;
 }
-.activityBox .rankList .headline .toAll .backIcon {
+.activityBox .rankList .headline .toAll .backIcon,
+.activityBox .activeyList .headline .toAll .backIcon {
   width: 14rpx;
   height: 24rpx;
 }
-.activityBox .rankList .ranking-class-2 {
-  margin-bottom: 20rpx;
+.activityBox .rankList .scrollView {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
   width: 100%;
+}
+.activityBox .rankList .scrollView .ranking-class-2 {
+  display: inline-block;
+  margin-right: 20rpx;
+  width: 630rpx;
   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 {
+.activityBox .rankList .scrollView .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 {
+.activityBox .rankList .scrollView .ranking-class-2 .header .left {
   display: flex;
   align-items: center;
   color: white;
 }
-.activityBox .rankList .ranking-class-2 .header .left .icon {
+.activityBox .rankList .scrollView .ranking-class-2 .header .left .icon {
   width: 28rpx;
   height: 30rpx;
 }
-.activityBox .rankList .ranking-class-2 .header .left .title {
+.activityBox .rankList .scrollView .ranking-class-2 .header .left .title {
   font-size: 30rpx;
   font-weight: bold;
   margin: 0rpx 10rpx;
 }
-.activityBox .rankList .ranking-class-2 .header .toAll {
+.activityBox .rankList .scrollView .ranking-class-2 .header .toAll {
   font-size: 28rpx;
   color: white;
 }
-.activityBox .rankList .ranking-class-2 .header .toAll .backIcon {
+.activityBox .rankList .scrollView .ranking-class-2 .header .toAll .backIcon {
   width: 14rpx;
   height: 24rpx;
 }
-.activityBox .rankList .ranking-class-2 .body {
+.activityBox .rankList .scrollView .ranking-class-2 .body {
   width: 100%;
   padding: 25rpx 20rpx;
   box-sizing: border-box;
 }
-.activityBox .rankList .ranking-class-2 .body .row {
+.activityBox .rankList .scrollView .ranking-class-2 .body .row {
   padding: 14rpx 25rpx;
   border-radius: 14rpx;
   margin-bottom: 20rpx;
@@ -78,55 +94,55 @@
   justify-content: space-between;
   background-color: white;
 }
-.activityBox .rankList .ranking-class-2 .body .row .left {
+.activityBox .rankList .scrollView .ranking-class-2 .body .row .left {
   display: flex;
   align-items: center;
 }
-.activityBox .rankList .ranking-class-2 .body .row .left .stand {
+.activityBox .rankList .scrollView .ranking-class-2 .body .row .left .stand {
   width: 36rpx;
   height: 36rpx;
 }
-.activityBox .rankList .ranking-class-2 .body .row .left .avatar {
+.activityBox .rankList .scrollView .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 {
+.activityBox .rankList .scrollView .ranking-class-2 .body .row .left .nickName {
   width: 210rpx;
   font-size: 28rpx;
 }
-.activityBox .rankList .ranking-class-2 .body .row .right {
+.activityBox .rankList .scrollView .ranking-class-2 .body .row .right {
   text-align: center;
   font-size: 0rpx;
 }
-.activityBox .rankList .ranking-class-2 .body .row .right .playIcon {
+.activityBox .rankList .scrollView .ranking-class-2 .body .row .right .playIcon {
   width: 34rpx;
   height: 34rpx;
 }
-.activityBox .rankList .ranking-class-2 .body .row .right .num {
+.activityBox .rankList .scrollView .ranking-class-2 .body .row .right .num {
   font-size: 28rpx;
 }
-.activityBox .rankList .yxb .header {
+.activityBox .rankList .scrollView .yxb .header {
   background-color: #2DCE66;
 }
-.activityBox .rankList .yxb .body {
+.activityBox .rankList .scrollView .yxb .body {
   background-image: linear-gradient(180deg, #4cd67c 0%, #66ec95 100%);
 }
-.activityBox .rankList .rbb .header {
+.activityBox .rankList .scrollView .rbb .header {
   background-color: #FF7E6C;
 }
-.activityBox .rankList .rbb .body {
+.activityBox .rankList .scrollView .rbb .body {
   background-image: linear-gradient(180deg, #FFB4A8 0%, #FFDCD7 100%);
 }
-.activityBox .rankList .pkb .header {
+.activityBox .rankList .scrollView .pkb .header {
   background-color: #967DFF;
 }
-.activityBox .rankList .pkb .body {
+.activityBox .rankList .scrollView .pkb .body {
   background-image: linear-gradient(180deg, #8265F9 0%, #B8A7FF 100%);
 }
-.activityBox .rankList .pkb .playIcon {
+.activityBox .rankList .scrollView .pkb .playIcon {
   width: 38rpx !important;
   height: 34rpx !important;
 }