feat: 打卡排行榜

pages.json

@@ -717,6 +717,17 @@
 					}
 				}
 			},
+			{
+				"path": "dailyPractice/rankList",
+				"style": {
+					"navigationBarTitleText": "打卡排行榜",
+					"navigationStyle": "custom", // 隐藏系统导航栏
+					"app-plus": {
+						"titleNView": false, //禁用原生导航栏 
+						"bounce": "none"
+					}
+				}
+			},
 			{
 				"path": "randomPractice/index",
 				"style": {

pages2/dailyPractice/index.vue

@@ -37,6 +37,10 @@
                     </view>
                     <view class="learn_btns">
                         <view class="toLearn" @click="goPractice()">{{ dayExamDetail.examRecord == 1 ? '今日已完成' : '今日打卡' }}</view>
+                        <view class="ranks" @click="toRank()">
+                            <text>打卡PK榜</text>
+                            <u-icon name="arrow-right" color="#677998" size="28"></u-icon>
+                        </view>
                     </view>
                 </view>
             </view>
@@ -223,6 +227,11 @@ export default {
                 +'&moduleId=' + moduleExamId + '&chapterId=' + chapterExamId + '&entryType=daily'
             })
         },
+        toRank() {
+            uni.navigateTo({
+                url: '/pages2/dailyPractice/rankList?goodsId=' + this.goodsId
+            })
+        },
         confirm() {
             this.$http({
                 url: '/bank/question/today/exam/subscription',
@@ -395,6 +404,8 @@ export default {
             }
         }
         .learn_btns {
+            display: flex;
+            align-items: center;
             padding-left: 40rpx;
             .toLearn {
                 width: 240rpx;
@@ -406,6 +417,12 @@ export default {
                 font-size: 30rpx;
                 font-weight: bold;
                 color: #FFFFFF;
+                margin-right: 32rpx;
+            }
+            .ranks {
+                font-size: 28rpx;
+                font-weight: 500;
+                color: #677998;
             }
         }
     }

pages2/dailyPractice/rankList.vue

@@ -0,0 +1,164 @@
+<template>
+    <view class="rank_list">
+        <nav-bar title="打卡排行榜"></nav-bar>
+        <view class="rank_bg">
+            <image src="/pages2/static/daily/rank_bg.png" class="rank_bg"></image>
+            <text class="tips">打卡PK榜</text>
+        </view>
+        <view class="contents">
+            <view class="header_cons">
+                <view class="header_left">
+                    <text class="rank">排名</text>
+                    <text>用户ID</text>
+                </view>
+                <view class="header_right">
+                    <text>打卡天数</text>
+                </view>
+            </view>
+            <view class="rank_con">
+                <view v-for="(item, index) in rankList" :key="index" class="rank_item">
+                    <view class="rank_left">
+                        <view class="rank_num">
+                            <image v-if="index == 0" src="/pages2/static/daily/rank_one.png" class="nums"></image>
+                            <image v-else-if="index == 1" src="/pages2/static/daily/rank_two.png" class="nums"></image>
+                            <image v-else-if="index == 2" src="/pages2/static/daily/rank_three.png" class="nums"></image>
+                            <text v-else>{{ '0' + (index + 1) }}</text>
+                        </view>
+                        <view class="header_name">
+                            <!-- <image :src="form.avatar ? $method.splitImgHost(form.avatar, true) : ''" class="avatar"></image> -->
+                            <text>{{ item.userName }}</text>
+                        </view>
+                    </view>
+                    <view class="rank_right">
+                        <text>{{ item.recordCount }}</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'rankList',
+    data() {
+        return {
+            rankList: [],
+            goodsId: '',
+        }
+    },
+    onLoad(option) {
+        this.goodsId = option.goodsId
+        this.getRank()
+    },
+    methods: {
+        getRank() {
+            this.$http({
+                url: `/bank/question/todayExam/tob/${this.goodsId}`,
+                method: 'get',
+            }).then((res) => {
+                if (res.data.code == 200) {
+                    this.rankList = res.data.data || []
+                }
+            })
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+.rank_bg {
+    width: 100%;
+    height: 280rpx;
+    position: relative;
+    top: 0rpx;
+    left: 0rpx;
+    .rank_bg {
+        width: 100%;
+        height: 280rpx;
+        position: absolute;
+        top: 0rpx;
+        left: 0rpx;
+    }
+    .tips {
+        position: absolute;
+        top: 68rpx;
+        left: 56rpx;
+        font-size: 52rpx;
+        font-weight: 800;
+        color: #33558F;
+    }
+}
+.contents {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    border-radius: 24rpx 24rpx 0rpx 0rpx;
+    padding: 40rpx 26rpx;
+    position: relative; 
+    top: -20rpx;
+    left: 0rpx;
+    .header_cons {
+        width: 100%;
+        height: 88rpx;
+        background: #F8F8FA;
+        border-radius: 24rpx;
+        padding: 0rpx 32rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .header_left, .header_right {
+        font-size: 28rpx;
+        font-weight: 500;
+        color: #888691;
+        .rank {
+            margin-right: 50rpx;
+        }
+    }
+    .rank_con {
+        width: 100%;
+        margin-top: 32rpx;
+    }
+    .rank_item {
+        width: 100%;
+        padding: 0rpx 32rpx;
+        margin-bottom: 48rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .rank_left {
+            display: flex;
+            align-items: center;
+            .rank_num {
+                font-size: 36rpx;
+                font-family: DIN Alternate-Bold, DIN Alternate;
+                font-weight: bold;
+                color: #6C7386;
+                margin-right: 56rpx;
+            }
+            .nums {
+                width: 50rpx;
+                height: 56rpx;
+            }
+            .header_name {
+                // .avatar {
+                //     width: 72rpx;
+                //     height: 72rpx;
+                //     border-radius: 50%;
+                // }
+                font-size: 28rpx;
+                font-weight: 500;
+                color: #222222;
+                height: 56rpx;
+                line-height: 45rpx;
+            }
+        }
+        .rank_right {
+            font-size: 40rpx;
+            font-family: DIN Alternate-Bold, DIN Alternate;
+            font-weight: bold;
+            color: #222222;
+        }
+    }
+}
+</style>