|  | @@ -1,206 +0,0 @@
 | 
	
		
			
				|  |  | -import { defineComponent, reactive } from 'vue'
 | 
	
		
			
				|  |  | -import styles from './index.module.less'
 | 
	
		
			
				|  |  | -import { Image, Calendar, Cell } from 'vant'
 | 
	
		
			
				|  |  | -import timeTitle from './images/time-title.png'
 | 
	
		
			
				|  |  | -import dayTitle from './images/day-title.png'
 | 
	
		
			
				|  |  | -import { useRoute } from 'vue-router'
 | 
	
		
			
				|  |  | -import dayjs from 'dayjs'
 | 
	
		
			
				|  |  | -import isBetween from 'dayjs/plugin/isBetween'
 | 
	
		
			
				|  |  | -dayjs.extend(isBetween)
 | 
	
		
			
				|  |  | -export default defineComponent({
 | 
	
		
			
				|  |  | -  name: 'rank-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.rankContainer}>
 | 
	
		
			
				|  |  | -          <div class={styles.rankLevel}>
 | 
	
		
			
				|  |  | -            <div class={[styles.levelItem, styles.level2]}>
 | 
	
		
			
				|  |  | -              <div class={styles.levelUserImg}>
 | 
	
		
			
				|  |  | -                <Image
 | 
	
		
			
				|  |  | -                  class={styles.img}
 | 
	
		
			
				|  |  | -                  src={
 | 
	
		
			
				|  |  | -                    'https://ks3-cn-beijing.ksyuncs.com/daya/16644378620311664437783089.jpg'
 | 
	
		
			
				|  |  | -                  }
 | 
	
		
			
				|  |  | -                />
 | 
	
		
			
				|  |  | -              </div>
 | 
	
		
			
				|  |  | -              <h2 class={'van-ellipsis'}>夏可可夏可可夏可可夏可可</h2>
 | 
	
		
			
				|  |  | -              <p class={[styles.levelTime, 'van-ellipsis']}>
 | 
	
		
			
				|  |  | -                夏可可夏可可竖笛-240分钟
 | 
	
		
			
				|  |  | -              </p>
 | 
	
		
			
				|  |  | -            </div>
 | 
	
		
			
				|  |  | -            <div class={[styles.levelItem, styles.level1]}>
 | 
	
		
			
				|  |  | -              <div class={styles.levelUserImg}>
 | 
	
		
			
				|  |  | -                <Image
 | 
	
		
			
				|  |  | -                  class={styles.img}
 | 
	
		
			
				|  |  | -                  src={
 | 
	
		
			
				|  |  | -                    'https://ks3-cn-beijing.ksyuncs.com/daya/16644378620311664437783089.jpg'
 | 
	
		
			
				|  |  | -                  }
 | 
	
		
			
				|  |  | -                />
 | 
	
		
			
				|  |  | -              </div>
 | 
	
		
			
				|  |  | -              <h2 class={'van-ellipsis'}>夏可可</h2>
 | 
	
		
			
				|  |  | -              <p class={[styles.levelTime, 'van-ellipsis']}>竖笛-240分钟</p>
 | 
	
		
			
				|  |  | -            </div>
 | 
	
		
			
				|  |  | -            <div class={[styles.levelItem, styles.level3]}>
 | 
	
		
			
				|  |  | -              <div class={styles.levelUserImg}>
 | 
	
		
			
				|  |  | -                <Image
 | 
	
		
			
				|  |  | -                  class={styles.img}
 | 
	
		
			
				|  |  | -                  src={
 | 
	
		
			
				|  |  | -                    'https://ks3-cn-beijing.ksyuncs.com/daya/16644378620311664437783089.jpg'
 | 
	
		
			
				|  |  | -                  }
 | 
	
		
			
				|  |  | -                />
 | 
	
		
			
				|  |  | -              </div>
 | 
	
		
			
				|  |  | -              <h2 class={'van-ellipsis'}>夏可可</h2>
 | 
	
		
			
				|  |  | -              <p class={[styles.levelTime, 'van-ellipsis']}>竖笛-240分钟</p>
 | 
	
		
			
				|  |  | -            </div>
 | 
	
		
			
				|  |  | -          </div>
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          <div class={styles.rankList}>
 | 
	
		
			
				|  |  | -            <div class={styles.rankTitle}>
 | 
	
		
			
				|  |  | -              <div class={styles.titleName}>
 | 
	
		
			
				|  |  | -                <img src={timeTitle} />
 | 
	
		
			
				|  |  | -              </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>
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].map(() => (
 | 
	
		
			
				|  |  | -              <Cell class={styles.rankItem} border={false} center>
 | 
	
		
			
				|  |  | -                {{
 | 
	
		
			
				|  |  | -                  icon: () => (
 | 
	
		
			
				|  |  | -                    <>
 | 
	
		
			
				|  |  | -                      <span class={styles.num}>4</span>
 | 
	
		
			
				|  |  | -                      <Image class={styles.userImg} />
 | 
	
		
			
				|  |  | -                    </>
 | 
	
		
			
				|  |  | -                  ),
 | 
	
		
			
				|  |  | -                  title: () => (
 | 
	
		
			
				|  |  | -                    <div class={styles.userInfo}>
 | 
	
		
			
				|  |  | -                      <p class={styles.userName}>李同学</p>
 | 
	
		
			
				|  |  | -                      <p class={styles.subjectName}>竖笛</p>
 | 
	
		
			
				|  |  | -                    </div>
 | 
	
		
			
				|  |  | -                  ),
 | 
	
		
			
				|  |  | -                  value: () => (
 | 
	
		
			
				|  |  | -                    <div class={styles.times}>
 | 
	
		
			
				|  |  | -                      <span>229</span>分钟
 | 
	
		
			
				|  |  | -                    </div>
 | 
	
		
			
				|  |  | -                  )
 | 
	
		
			
				|  |  | -                }}
 | 
	
		
			
				|  |  | -              </Cell>
 | 
	
		
			
				|  |  | -            ))}
 | 
	
		
			
				|  |  | -          </div>
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -          <TheSticky position="bottom">
 | 
	
		
			
				|  |  | -            <Cell class={styles.selfInfo} border={false} center>
 | 
	
		
			
				|  |  | -              {{
 | 
	
		
			
				|  |  | -                icon: () => (
 | 
	
		
			
				|  |  | -                  <>
 | 
	
		
			
				|  |  | -                    <span class={styles.num}>4</span>
 | 
	
		
			
				|  |  | -                    <Image class={styles.userImg} />
 | 
	
		
			
				|  |  | -                  </>
 | 
	
		
			
				|  |  | -                ),
 | 
	
		
			
				|  |  | -                title: () => (
 | 
	
		
			
				|  |  | -                  <div class={styles.userInfo}>
 | 
	
		
			
				|  |  | -                    <p class={styles.userName}>李同学</p>
 | 
	
		
			
				|  |  | -                    <p class={styles.subjectName}>竖笛</p>
 | 
	
		
			
				|  |  | -                  </div>
 | 
	
		
			
				|  |  | -                ),
 | 
	
		
			
				|  |  | -                value: () => (
 | 
	
		
			
				|  |  | -                  <div class={styles.times}>
 | 
	
		
			
				|  |  | -                    <span>229</span>分钟
 | 
	
		
			
				|  |  | -                  </div>
 | 
	
		
			
				|  |  | -                )
 | 
	
		
			
				|  |  | -              }}
 | 
	
		
			
				|  |  | -            </Cell>
 | 
	
		
			
				|  |  | -          </TheSticky>
 | 
	
		
			
				|  |  | -        </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
 | 
	
		
			
				|  |  | -          }}
 | 
	
		
			
				|  |  | -        />
 | 
	
		
			
				|  |  | -      </>
 | 
	
		
			
				|  |  | -    )
 | 
	
		
			
				|  |  | -  }
 | 
	
		
			
				|  |  | -})
 |