|
|
@@ -1,5 +1,5 @@
|
|
|
import TheSticky from '@/components/the-sticky'
|
|
|
-import { defineComponent, reactive } from 'vue'
|
|
|
+import { computed, defineComponent, onMounted, reactive } from 'vue'
|
|
|
import { useRoute } from 'vue-router'
|
|
|
import styles from './index.module.less'
|
|
|
import ColHeader from '@/components/col-header'
|
|
|
@@ -11,26 +11,30 @@ import { Tabs, Tab, Image, Icon, Calendar, Cell } from 'vant'
|
|
|
import dayjs from 'dayjs'
|
|
|
import isBetween from 'dayjs/plugin/isBetween'
|
|
|
dayjs.extend(isBetween)
|
|
|
-
|
|
|
+import request from '@/helpers/request'
|
|
|
+import { state as baseState } from '@/state'
|
|
|
+import studentLogo from '@/common/images/icon_student.png'
|
|
|
+import emptyLogo from './images/empty-logo.png'
|
|
|
+import ColResult from '@/components/col-result'
|
|
|
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
|
|
|
+ tabActive: 'timeBill',
|
|
|
+ firstInfo: {} as any,
|
|
|
+ secondInfo: {} as any,
|
|
|
+ threeInfo: {} as any,
|
|
|
+ myInfo: {} as any,
|
|
|
+ list: [] as any,
|
|
|
+ loading: false,
|
|
|
+ beforListShow: true,
|
|
|
+ listShow: true // 是否显示
|
|
|
+ })
|
|
|
+
|
|
|
+ const isDayRank = computed(() => {
|
|
|
+ return state.tabActive === 'dayBill'
|
|
|
})
|
|
|
|
|
|
// 初始化周一
|
|
|
@@ -62,12 +66,56 @@ export default defineComponent({
|
|
|
|
|
|
const forms = reactive({
|
|
|
...formatWeekDays(),
|
|
|
+ studentIds: baseState.user.data?.userId,
|
|
|
+ name: 0,
|
|
|
page: 1,
|
|
|
rows: 20
|
|
|
})
|
|
|
|
|
|
+ const getList = async () => {
|
|
|
+ state.loading = true
|
|
|
+ try {
|
|
|
+ const { data } = await request.post(
|
|
|
+ '/api-tenant/studentMusicCompareRecord/rankingList',
|
|
|
+ {
|
|
|
+ data: {
|
|
|
+ ...forms
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ state.beforListShow = data.detail && data.detail.length > 0
|
|
|
+ state.myInfo = data.head || {}
|
|
|
+ state.myInfo.trainTime = state.myInfo.trainTime
|
|
|
+ ? Math.floor(state.myInfo.trainTime / 60)
|
|
|
+ : 0
|
|
|
+ state.list = data.detail || []
|
|
|
+ state.list.forEach((item: any) => {
|
|
|
+ item.trainTime = item.trainTime ? Math.floor(item.trainTime / 60) : 0
|
|
|
+ })
|
|
|
+ state.firstInfo =
|
|
|
+ state.list.length > 0 ? state.list.splice(0, 1)[0] : {}
|
|
|
+ state.secondInfo =
|
|
|
+ state.list.length > 0 ? state.list.splice(0, 1)[0] : {}
|
|
|
+ state.threeInfo =
|
|
|
+ state.list.length > 0 ? state.list.splice(0, 1)[0] : {}
|
|
|
+
|
|
|
+ state.listShow = state.list.length > 0
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ state.loading = false
|
|
|
+ }
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ getList()
|
|
|
+ })
|
|
|
return () => (
|
|
|
- <div class={styles.rankListPage}>
|
|
|
+ <div
|
|
|
+ class={[
|
|
|
+ styles.rankListPage,
|
|
|
+ isDayRank.value ? styles.rankListDay : styles.rankListTime
|
|
|
+ ]}
|
|
|
+ >
|
|
|
<div class={styles.sticky}>
|
|
|
<TheSticky position="top">
|
|
|
<ColHeader
|
|
|
@@ -81,7 +129,21 @@ export default defineComponent({
|
|
|
content: () => (
|
|
|
<>
|
|
|
<Icon name="arrow-left" class={styles.backArrow} />
|
|
|
- <Tabs lineWidth={22} lineHeight={4}>
|
|
|
+ <Tabs
|
|
|
+ lineWidth={22}
|
|
|
+ lineHeight={4}
|
|
|
+ shrink
|
|
|
+ v-model:active={state.tabActive}
|
|
|
+ onChange={(val: string) => {
|
|
|
+ if (val === 'dayBill') {
|
|
|
+ forms.name = 2
|
|
|
+ } else {
|
|
|
+ forms.name = 0
|
|
|
+ }
|
|
|
+
|
|
|
+ getList()
|
|
|
+ }}
|
|
|
+ >
|
|
|
<Tab title="时长榜" name="timeBill"></Tab>
|
|
|
<Tab title="天数榜" name="dayBill"></Tab>
|
|
|
</Tabs>
|
|
|
@@ -90,91 +152,193 @@ export default defineComponent({
|
|
|
}}
|
|
|
</ColHeader>
|
|
|
</TheSticky>
|
|
|
- <img class={styles.bgImg} src={bgImg} />
|
|
|
+ <img class={styles.bgImg} src={isDayRank.value ? bgImg2 : bgImg} />
|
|
|
</div>
|
|
|
|
|
|
- <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'
|
|
|
- }
|
|
|
- />
|
|
|
+ {/* {state.beforListShow && ( */}
|
|
|
+ <div class={styles.rankContainer}>
|
|
|
+ <div class={styles.rankLevel}>
|
|
|
+ <div class={[styles.levelItem, styles.level2]}>
|
|
|
+ {state.secondInfo.userId ? (
|
|
|
+ <>
|
|
|
+ <div class={styles.levelUserImg}>
|
|
|
+ <Image
|
|
|
+ class={styles.img}
|
|
|
+ src={state.secondInfo.avatar || studentLogo}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <h2 class={'van-ellipsis'}>
|
|
|
+ {state.secondInfo.studentName}
|
|
|
+ </h2>
|
|
|
+ <p class={[styles.levelTime, 'van-ellipsis']}>
|
|
|
+ {state.secondInfo.subjectName}-
|
|
|
+ {state.secondInfo.trainTime}
|
|
|
+ 分钟
|
|
|
+ </p>
|
|
|
+ </>
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ <div class={styles.levelUserImg}>
|
|
|
+ <Image class={styles.img} src={emptyLogo} />
|
|
|
+ </div>
|
|
|
+ <h2 class={'van-ellipsis'}>虚位以待</h2>
|
|
|
+ <p class={[styles.levelTime, 'van-ellipsis']}> </p>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
</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 class={[styles.levelItem, styles.level1]}>
|
|
|
+ {state.firstInfo.userId ? (
|
|
|
+ <>
|
|
|
+ <div class={styles.levelUserImg}>
|
|
|
+ <Image
|
|
|
+ class={styles.img}
|
|
|
+ src={state.firstInfo.avatar || studentLogo}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <h2 class={'van-ellipsis'}>{state.firstInfo.studentName}</h2>
|
|
|
+ <p class={[styles.levelTime, 'van-ellipsis']}>
|
|
|
+ {state.firstInfo.subjectName}-{state.firstInfo.trainTime}分钟
|
|
|
+ </p>
|
|
|
+ </>
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ <div class={styles.levelUserImg}>
|
|
|
+ <Image class={styles.img} src={emptyLogo} />
|
|
|
+ </div>
|
|
|
+ <h2 class={'van-ellipsis'}>虚位以待</h2>
|
|
|
+ <p class={[styles.levelTime, 'van-ellipsis']}> </p>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
</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 class={[styles.levelItem, styles.level3]}>
|
|
|
+ {state.threeInfo.userId ? (
|
|
|
+ <>
|
|
|
+ <div class={styles.levelUserImg}>
|
|
|
+ <Image
|
|
|
+ class={styles.img}
|
|
|
+ src={state.threeInfo.avatar || studentLogo}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <h2 class={'van-ellipsis'}>
|
|
|
+ {state.threeInfo.studentName}
|
|
|
+ </h2>
|
|
|
+ <p class={[styles.levelTime, 'van-ellipsis']}>
|
|
|
+ {state.threeInfo.subjectName}-{state.threeInfo.trainTime}
|
|
|
+ 分钟
|
|
|
+ </p>
|
|
|
+ </>
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ <div class={styles.levelUserImg}>
|
|
|
+ <Image class={styles.img} src={emptyLogo} />
|
|
|
+ </div>
|
|
|
+ <h2 class={'van-ellipsis'}>虚位以待</h2>
|
|
|
+ <p class={[styles.levelTime, 'van-ellipsis']}> </p>
|
|
|
+ </>
|
|
|
+ )}
|
|
|
</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 class={styles.rankList}>
|
|
|
+ <div class={styles.rankTitle}>
|
|
|
+ <div class={styles.titleName}>
|
|
|
+ <img src={isDayRank.value ? dayTitle : 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>
|
|
|
- <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>
|
|
|
+
|
|
|
+ {state.list.map((item: any) => (
|
|
|
+ // i == 4 && styles.active
|
|
|
+ <Cell
|
|
|
+ class={[
|
|
|
+ styles.rankItem,
|
|
|
+ state.myInfo.userId === item.userId ? styles.active : ''
|
|
|
+ ]}
|
|
|
+ border={false}
|
|
|
+ center
|
|
|
+ >
|
|
|
+ {{
|
|
|
+ icon: () => (
|
|
|
+ <>
|
|
|
+ <span class={styles.num}>{item.rankNum}</span>
|
|
|
+ <Image
|
|
|
+ class={styles.userImg}
|
|
|
+ src={item.avatar || studentLogo}
|
|
|
+ />
|
|
|
+ </>
|
|
|
+ ),
|
|
|
+ title: () => (
|
|
|
+ <div class={styles.userInfo}>
|
|
|
+ <p class={styles.userName}>{item.studentName}</p>
|
|
|
+ <p class={styles.subjectName}>{item.subjectName}</p>
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ value: () => (
|
|
|
+ <div class={styles.times}>
|
|
|
+ <span>{item.trainTime}</span>分钟
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Cell>
|
|
|
+ ))}
|
|
|
+
|
|
|
+ {!state.loading && !state.listShow && (
|
|
|
+ <ColResult tips="暂无数据" btnStatus={false} />
|
|
|
+ )}
|
|
|
</div>
|
|
|
+ {state.myInfo?.userId ? (
|
|
|
+ <TheSticky position="bottom">
|
|
|
+ <Cell class={styles.selfInfo} border={false} center>
|
|
|
+ {{
|
|
|
+ icon: () => (
|
|
|
+ <>
|
|
|
+ <span class={styles.num}>
|
|
|
+ {state.myInfo.rankNum == -1
|
|
|
+ ? '-'
|
|
|
+ : state.myInfo.rankNum}
|
|
|
+ </span>
|
|
|
+ <Image
|
|
|
+ src={state.myInfo.avatar || studentLogo}
|
|
|
+ class={styles.userImg}
|
|
|
+ />
|
|
|
+ </>
|
|
|
+ ),
|
|
|
+ title: () => (
|
|
|
+ <div class={styles.userInfo}>
|
|
|
+ <p class={styles.userName}>
|
|
|
+ {state.myInfo.studentName}
|
|
|
+ </p>
|
|
|
+ <p class={styles.subjectName}>
|
|
|
+ {state.myInfo.subjectName}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ ),
|
|
|
+ value: () => (
|
|
|
+ <div class={styles.times}>
|
|
|
+ <span>{state.myInfo.trainTime}</span>分钟
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </Cell>
|
|
|
+ </TheSticky>
|
|
|
+ ) : (
|
|
|
+ ''
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ // )}
|
|
|
|
|
|
- {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15].map(() => (
|
|
|
- <Cell class={styles.rankItem}>
|
|
|
- {{
|
|
|
- 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>
|
|
|
- ))}
|
|
|
+ {/* {!state.loading && !state.beforListShow && (
|
|
|
+ <div class={styles.emptyResult}>
|
|
|
+ <ColResult tips="暂无数据" btnStatus={false} />
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ )} */}
|
|
|
|
|
|
<Calendar
|
|
|
v-model:show={state.showPopoverTime}
|
|
|
@@ -205,6 +369,8 @@ export default defineComponent({
|
|
|
forms.endTime = times.endTime
|
|
|
}
|
|
|
state.showPopoverTime = false
|
|
|
+
|
|
|
+ getList()
|
|
|
}}
|
|
|
/>
|
|
|
</div>
|
