更新

src/tenant/ranking-list/index.module.less

@@ -1,3 +1,40 @@
+.rankListPage {
+  background: linear-gradient(270deg, #FBE3F6 0%, #FFDFD0 100%);
+  min-height: 100vh;
+
+  :global {
+
+    .van-calendar__day--end,
+    .van-calendar__day--start,
+    .van-calendar__day--start-end,
+    .van-calendar__day--multiple-middle,
+    .van-calendar__day--multiple-selected {
+      background: #FF5074;
+    }
+
+    .van-overlay,
+    .van-popup {
+      z-index: 99999999 !important;
+    }
+  }
+
+  .timeRange {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: rgba(19, 20, 21, 0.6);
+
+    .iconArrow {
+      display: inline-block;
+      width: 9px;
+      height: 5px;
+      margin-left: 3px;
+      background: url('./images/icon-arrow.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+}
+
 .bgImg {
   position: fixed;
   top: 0;
@@ -15,6 +52,18 @@
       background-size: 100% 214px;
     }
   }
+
+  .backArrow {
+    position: absolute;
+    z-index: 10;
+    display: inline-block;
+    font: 0.37333rem/1 vant-icon;
+    font-size: inherit;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    margin-right: var(--van-padding-base);
+    font-size: var(--van-nav-bar-arrow-size);
+  }
 }
 
 .rankLevel {
@@ -27,6 +76,13 @@
     width: 112px;
     text-align: center;
 
+    &::after {
+      content: ' ';
+      display: block;
+      width: 112px;
+      height: 124px;
+    }
+
     .levelUserImg {
       position: relative;
       width: 86px;
@@ -55,6 +111,7 @@
     }
 
     h2 {
+      padding-top: 5px;
       font-size: 16px;
       font-weight: 600;
       color: #131415;
@@ -65,15 +122,25 @@
       font-size: 12px;
       color: #000000;
       line-height: 17px;
+      padding: 2px 0 8px;
     }
   }
 
   .level1 {
+    &::after {
+      height: 142px;
+      background: url('./images/level-1-bg.png') no-repeat center;
+      background-size: contain;
+    }
+
     .levelUserImg {
       width: 92px !important;
       height: 88px !important;
-      background: url('./images/level-1-header.png') no-repeat center;
-      background-size: contain;
+
+      &::after {
+        background: url('./images/level-1-header.png') no-repeat center;
+        background-size: contain;
+      }
     }
 
     .img {
@@ -83,16 +150,43 @@
   }
 
   .level2 {
-    .levelUserImg {
-      background: url('./images/level-2-header.png') no-repeat center;
+    margin-top: 30px;
+
+    &::after {
+      background: url('./images/level-2-bg.png') no-repeat center;
       background-size: contain;
     }
+
+    .levelUserImg {
+      &::after {
+        background: url('./images/level-2-header.png') no-repeat center;
+        background-size: contain;
+      }
+    }
   }
 
   .level3 {
-    .levelUserImg {
-      background: url('./images/level-3-header.png') no-repeat center;
+    margin-top: 30px;
+
+    &::after {
+      background: url('./images/level-3-bg.png') no-repeat center;
       background-size: contain;
     }
+
+    .levelUserImg {
+      &::after {
+        background: url('./images/level-3-header.png') no-repeat center;
+        background-size: contain;
+      }
+    }
   }
+}
+
+.rankList {
+  background: rgba(255, 255, 255, 0.7);
+  border-radius: 20px 20px 0px 0px;
+  border: 2px solid #FFFFFF;
+  backdrop-filter: blur(6px);
+  min-height: 40vh;
+  margin: 0 13px;
 }

src/tenant/ranking-list/index.tsx

@@ -1,15 +1,70 @@
 import TheSticky from '@/components/the-sticky'
-import { defineComponent } from 'vue'
+import { defineComponent, reactive } from 'vue'
+import { useRoute } from 'vue-router'
 import styles from './index.module.less'
 import ColHeader from '@/components/col-header'
 import bgImg from '../images/bg-image.png'
-import { Tabs, Tab, Image } from 'vant'
+import { Tabs, Tab, Image, Icon, Calendar } from 'vant'
+import dayjs from 'dayjs'
+import isBetween from 'dayjs/plugin/isBetween'
+dayjs.extend(isBetween)
 
 export default defineComponent({
   name: 'ranking-list',
   setup() {
+    const route = useRoute()
+    const state = reactive({
+      showPopoverTime: false,
+      currentDate: [dayjs().format('YYYY'), dayjs().format('MM')],
+      isClick: false,
+      practiceMonthName: route.query.practiceMonthName
+        ? route.query.practiceMonthName
+        : dayjs().format('YYYY') + '年' + dayjs().format('MM') + '月',
+      userTrainOverView: {
+        trainDays: 0,
+        trainNum: 0,
+        trainTime: 0,
+        avgTrainTime: 0
+      },
+      userTrainChartData: [] as any,
+      myChart: null as any
+    })
+
+    // 初始化周一
+    const formatWeekDays = (time?: any) => {
+      const week = dayjs(time).day()
+      let startTime = ''
+      let endTime = ''
+      if (week === 0) {
+        // 星期天
+        startTime = dayjs(time).subtract(6, 'day').format('YYYY-MM-DD')
+        endTime = dayjs(time).format('YYYY-MM-DD')
+      } else if (week === 1) {
+        // 星期一
+        startTime = dayjs(time).format('YYYY-MM-DD')
+        endTime = dayjs(time).add(6, 'day').format('YYYY-MM-DD')
+      } else {
+        startTime = dayjs(time)
+          .subtract(week - 1, 'day')
+          .format('YYYY-MM-DD')
+        endTime = dayjs(time)
+          .add(7 - week, 'day')
+          .format('YYYY-MM-DD')
+      }
+      return {
+        startTime,
+        endTime
+      }
+    }
+
+    const forms = reactive({
+      ...formatWeekDays(),
+      page: 1,
+      rows: 20
+    })
+
     return () => (
-      <div class={styles.activationCode}>
+      <div class={styles.rankListPage}>
         <div class={styles.sticky}>
           <TheSticky position="top">
             <ColHeader
@@ -18,11 +73,19 @@ export default defineComponent({
               border={false}
               title=" "
               color="#131415"
-            />
-            <Tabs lineWidth={22} lineHeight={4}>
-              <Tab title="时长榜" name="timeBill"></Tab>
-              <Tab title="天数榜" name="dayBill"></Tab>
-            </Tabs>
+            >
+              {{
+                content: () => (
+                  <>
+                    <Icon name="arrow-left" class={styles.backArrow} />
+                    <Tabs lineWidth={22} lineHeight={4}>
+                      <Tab title="时长榜" name="timeBill"></Tab>
+                      <Tab title="天数榜" name="dayBill"></Tab>
+                    </Tabs>
+                  </>
+                )
+              }}
+            </ColHeader>
           </TheSticky>
           <img class={styles.bgImg} src={bgImg} />
         </div>
@@ -68,7 +131,55 @@ export default defineComponent({
               <p class={[styles.levelTime, 'van-ellipsis']}>竖笛-240分钟</p>
             </div>
           </div>
+
+          <div class={styles.rankList}>
+            <div class={styles.rankTitle}>
+              <div>训练时长榜</div>
+              <span
+                class={styles.timeRange}
+                onClick={() => (state.showPopoverTime = true)}
+              >
+                {dayjs(forms.startTime).format('YYYY-MM-DD')}至
+                {dayjs(forms.endTime).format('YYYY-MM-DD')}
+                <i class={styles.iconArrow}></i>
+              </span>
+            </div>
+          </div>
         </div>
+
+        <Calendar
+          v-model:show={state.showPopoverTime}
+          firstDayOfWeek={1}
+          showConfirm={false}
+          type="range"
+          title="周期选择"
+          maxRange={7}
+          minDate={new Date('2023-02-27')}
+          defaultDate={[
+            dayjs(forms.startTime).toDate(),
+            dayjs(forms.endTime).toDate()
+          ]}
+          style={{
+            height: '70%'
+          }}
+          onSelect={(item: any) => {
+            forms.startTime = ''
+            forms.endTime = ''
+            if (
+              !dayjs(item[0]).isBetween(
+                dayjs(forms.startTime),
+                dayjs(forms.endTime)
+              )
+            ) {
+              const times = formatWeekDays(item[0])
+              forms.startTime = times.startTime
+              forms.endTime = times.endTime
+            }
+            state.showPopoverTime = false
+            // refreshing.value = true
+            // getList()
+          }}
+        />
       </div>
     )
   }