更新

src/student/leaderboard/index.tsx

@@ -9,6 +9,9 @@ import {
 } from 'vue'
 import styles from './index.module.less'
 import IconTrophy from './image/icon-trophy.png'
+import IconLevel from '../share-active/track-review-activity/images/icon_level.png'
+import IconLevel2 from '../share-active/track-review-activity/images/icon_level2.png'
+import IconLevel3 from '../share-active/track-review-activity/images/icon_level3.png'
 import IconEmtry from './image/icon-emtry.png'
 import IconAvator from '@/common/images/icon_teacher.png'
 import request from '@/helpers/request'
@@ -73,7 +76,7 @@ export default defineComponent({
         if (Array.isArray(data.rankingList)) {
           state.musicList[state.tabIndex].rankingList = data.rankingList
         }
-        if (data.userActivityRankingVo){
+        if (data.userActivityRankingVo) {
           state.score = data.userActivityRankingVo.score
         }
       } catch (error) {}
@@ -152,7 +155,10 @@ export default defineComponent({
                     <div
                       class={[
                         styles.tabContent,
-                        user.value.userId && (!state.isSignup || !state.isChallenge || user.value.join)
+                        user.value.userId &&
+                        (!state.isSignup ||
+                          !state.isChallenge ||
+                          user.value.join)
                           ? styles.hasUser
                           : null
                       ]}
@@ -170,7 +176,10 @@ export default defineComponent({
                           return (
                             <div class={styles.item}>
                               <div class={styles.left}>
-                                {index == 0 ? <Image src={IconTrophy} /> : t}
+                                {index == 0 && <Image src={IconLevel} />}
+                                {index == 1 && <Image src={IconLevel2} />}
+                                {index == 2 && <Image src={IconLevel3} />}
+                                {index != 0 && index != 1 && index != 2 && t}
                               </div>
                               <div class={styles.center}>
                                 <Image
@@ -216,90 +225,95 @@ export default defineComponent({
               })}
             </Tabs>
           )}
-          {user.value.userId && (!state.isSignup ? (
-            <div
-              ref={userRef}
-              class={[styles.activeUser, 'van-safe-area-bottom']}
-            >
-              <Cell
-                center
-                title={user.value.username}
-                label="您尚未报名参赛"
-                v-slots={{
-                  icon: () => (
-                    <Image
-                      class={styles.avator}
-                      fit="cover"
-                      round
-                      src={user.value.heardUrl || IconAvator}
-                    />
-                  )
-                }}
-              />
-            </div>
-          ) : !state.isChallenge ? (
-            <div
-              ref={userRef}
-              class={[styles.activeUser, 'van-safe-area-bottom']}
-            >
-              <Cell
-                center
-                title={user.value.username}
-                label="您尚未评测哦!"
-                v-slots={{
-                  icon: () => (
-                    <Image
-                      class={styles.avator}
-                      fit="cover"
-                      round
-                      src={user.value.heardUrl || IconAvator}
-                    />
-                  )
-                }}
-              />
-            </div>
-          ) : user.value.join ? (
-            <div
-              ref={userRef}
-              class={[styles.activeUser, 'van-safe-area-bottom']}
-            >
-              <Cell
-                center
-                title={user.value.username}
-                v-slots={{
-                  icon: () => (
-                    <Image
-                      class={styles.avator}
-                      fit="cover"
-                      round
-                      src={user.value.heardUrl || IconAvator}
-                    />
-                  ),
-                  label: () => {
-                    if (user.value.isTop) {
+          {user.value.userId &&
+            (!state.isSignup ? (
+              <div
+                ref={userRef}
+                class={[styles.activeUser, 'van-safe-area-bottom']}
+              >
+                <Cell
+                  center
+                  title={user.value.username}
+                  label="您尚未报名参赛"
+                  v-slots={{
+                    icon: () => (
+                      <Image
+                        class={styles.avator}
+                        fit="cover"
+                        round
+                        src={user.value.heardUrl || IconAvator}
+                      />
+                    )
+                  }}
+                />
+              </div>
+            ) : !state.isChallenge ? (
+              <div
+                ref={userRef}
+                class={[styles.activeUser, 'van-safe-area-bottom']}
+              >
+                <Cell
+                  center
+                  title={user.value.username}
+                  label="您尚未评测哦!"
+                  v-slots={{
+                    icon: () => (
+                      <Image
+                        class={styles.avator}
+                        fit="cover"
+                        round
+                        src={user.value.heardUrl || IconAvator}
+                      />
+                    )
+                  }}
+                />
+              </div>
+            ) : user.value.join ? (
+              <div
+                ref={userRef}
+                class={[styles.activeUser, 'van-safe-area-bottom']}
+              >
+                <Cell
+                  center
+                  title={user.value.username}
+                  v-slots={{
+                    icon: () => (
+                      <Image
+                        class={styles.avator}
+                        fit="cover"
+                        round
+                        src={user.value.heardUrl || IconAvator}
+                      />
+                    ),
+                    label: () => {
+                      if (user.value.isTop) {
+                        return (
+                          <div>
+                            您的评测已上榜! 当前排名
+                            <span style={{ color: '#FA6400' }}>
+                              {' '}
+                              {user.value.step}
+                            </span>
+                          </div>
+                        )
+                      } else {
+                        return <div>您的评测暂未上榜，快去挑战吧！</div>
+                      }
+                    },
+                    value: () => {
+                      if (!user.value.score && !state.score) {
+                        return
+                      }
                       return (
-                        <div>
-                          您的评测已上榜! 当前排名
-                          <span style={{ color: '#FA6400' }}>
-                            {' '}
-                            {user.value.step}
-                          </span>
-                        </div>
+                        <span class={styles.num}>
+                          {user.value.score || state.score}分
+                        </span>
                       )
-                    } else {
-                      return <div>您的评测暂未上榜，快去挑战吧！</div>
-                    }
-                  },
-                  value: () => {
-                    if (!user.value.score && !state.score){
-                      return
                     }
-                    return <span class={styles.num}>{user.value.score || state.score}分</span>
-                  }
-                }}
-              />
-            </div>
-          ) : null)}
+                  }}
+                />
+              </div>
+            ) : null)}
         </div>
       </div>
     )

src/student/share-active/track-review-activity/index.module.less

@@ -100,13 +100,30 @@
   }
 }
 
-.prize {
+.prizeTitle {
+  padding: 0 16px 3px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #ff5252;
   display: flex;
   align-items: center;
+  .prizeLevel {
+    height: 17px;
+    margin-right: 5px;
+  }
+}
+
+.prizeSection {
   margin: 0 10px 10px;
-  padding: 10px;
   background-color: #ffffff;
   border-radius: 12px;
+}
+.prize {
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  margin: 0 10px;
+  border-bottom: 1px solid #ffe4e4;
 
   img {
     width: 74px;
@@ -193,7 +210,7 @@
 
     .iconLevel {
       position: absolute;
-      bottom: -8px;
+      bottom: -6px;
       left: 50%;
       margin-left: -12px;
       width: 24px;

src/student/share-active/track-review-activity/index.tsx

@@ -2,7 +2,16 @@ import ColSticky from '@/components/col-sticky'
 import request from '@/helpers/request'
 import { browser, removeAuth } from '@/helpers/utils'
 import { postMessage } from '@/helpers/native-message'
-import { Button, Cell, CellGroup, Dialog, Image, Notify, Popup, Toast } from 'vant'
+import {
+  Button,
+  Cell,
+  CellGroup,
+  Dialog,
+  Image,
+  Notify,
+  Popup,
+  Toast
+} from 'vant'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
 import logo from '@/common/images/logo.png'
@@ -13,6 +22,7 @@ import dayjs from 'dayjs'
 import { orderStatus } from '@/views/order-detail/orderStatus'
 import { difficulty } from '@/constant'
 import { state } from '@/state'
+import iconTeacher from '@/common/images/icon_teacher.png'
 
 export const getAssetsHomeFile = (fileName: string) => {
   const path = `./images/${fileName}`
@@ -49,6 +59,22 @@ export default defineComponent({
         }
       })
       return status
+    },
+    // this.activeInfo.activityRewardList
+    rewardList() {
+      const activityRewardList = this.activeInfo.activityRewardList
+      console.log(activityRewardList)
+      let list = activityRewardList || []
+      if (activityRewardList && activityRewardList.length > 0) {
+        const last = activityRewardList.sort((a: any, b: any) => {
+          return Number(a.group) < Number(b.group) ? -1 : 1
+        })
+        list = this.groupBy(last, (item: any) => {
+          return [item.group]
+        })
+        console.log(list, 'list')
+      }
+      return list || []
     }
   },
   async mounted() {
@@ -89,6 +115,18 @@ export default defineComponent({
     document.removeEventListener(visibilityChangeEvent, this.onVisibilityChange)
   },
   methods: {
+    groupBy(array: any, f: any) {
+      const groups = {}
+      array.forEach(function (o) {
+        //注意这里必须是forEach 大写
+        const group = JSON.stringify(f(o))
+        groups[group] = groups[group] || []
+        groups[group].push(o)
+      })
+      return Object.keys(groups).map(function (group) {
+        return groups[group]
+      })
+    },
     onVisibilityChange() {
       if (!document[this.hiddenProperty]) {
         this.getMusicInfo()
@@ -305,21 +343,64 @@ export default defineComponent({
                 活动奖品
               </span>
 
-              <img
+              {/* <img
                 src={getAssetsHomeFile('star_bg.png')}
                 class={styles.iconStar}
-              />
+              /> */}
+              <span
+                class={styles.titleTips}
+                onClick={() =>
+                  this.$router.push({
+                    path: '/leaderboard',
+                    query: { id: this.id }
+                  })
+                }
+              >
+                查看挑战排行榜
+                <img
+                  style={{ width: '16px', marginLeft: '4px' }}
+                  src={getAssetsHomeFile('icon-lv.png')}
+                />
+              </span>
             </h2>
-            {this.activeInfo.activityRewardList &&
-              this.activeInfo.activityRewardList.map((item: any) => (
-                <div class={styles.prize}>
-                  <Image src={item.imgUrl} />
-                  <div class={styles.prizeContainer}>
-                    <div class={styles.prizeName}>{item.rewardName}</div>
-                    <div class={styles.prizeDesc}>{item.rewardDescribe}</div>
-                  </div>
+            {this.rewardList.map((item: any, index: number) => (
+              <>
+                <div class={styles.prizeTitle}>
+                  {index === 0 && (
+                    <Image
+                      class={styles.prizeLevel}
+                      src={getAssetsHomeFile('icon_level.png')}
+                    />
+                  )}
+                  {index === 1 && (
+                    <Image
+                      class={styles.prizeLevel}
+                      src={getAssetsHomeFile('icon_level2.png')}
+                    />
+                  )}
+                  {index === 2 && (
+                    <Image
+                      class={styles.prizeLevel}
+                      src={getAssetsHomeFile('icon_level3.png')}
+                    />
+                  )}
+                  第{++index}名奖品
                 </div>
-              ))}
+                <div class={styles.prizeSection}>
+                  {item.map((child: any) => (
+                    <div class={[styles.prize]}>
+                      <Image src={child.imgUrl} />
+                      <div class={styles.prizeContainer}>
+                        <div class={styles.prizeName}>{child.rewardName}</div>
+                        <div class={styles.prizeDesc}>
+                          {child.rewardDescribe}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </>
+            ))}
           </div>
 
           <div class={[styles.section]} style={{ backgroundColor: '#fff' }}>
@@ -328,10 +409,8 @@ export default defineComponent({
                 <i class={styles.titlePrefix}></i>
                 活动曲目
               </span>
-
-              <span class={styles.titleTips} onClick={() => this.$router.push({path: '/leaderboard', query:{id: this.id}})}>
-                查看挑战排行榜
-                <img style={{width: '16px', marginLeft: '4px'}} src={getAssetsHomeFile('icon-lv.png')} />
+              <span class={styles.titleTips}>
+                共{this.activityMusic.length || 0}首曲目
               </span>
             </h2>
 
@@ -378,7 +457,7 @@ export default defineComponent({
                             {item.userId ? (
                               <>
                                 <Image
-                                  src={item.userAvatar}
+                                  src={item.userAvatar || iconTeacher}
                                   class={styles.userLogo}
                                   fit="cover"
                                 />
@@ -483,7 +562,7 @@ export default defineComponent({
               <img
                 src={getAssetsHomeFile('icon_close.png')}
                 class={styles.popupClose}
-                onClick={()=>this.popupStatus = false}
+                onClick={() => (this.popupStatus = false)}
               />
             </div>
 

src/teacher/leaderboard/index.tsx

@@ -1,7 +1,17 @@
 import { Button, Cell, Empty, Image, Tab, Tabs } from 'vant'
-import { computed, defineComponent, nextTick, onMounted, reactive, ref } from 'vue'
+import {
+  computed,
+  defineComponent,
+  nextTick,
+  onMounted,
+  reactive,
+  ref
+} from 'vue'
 import styles from './index.module.less'
 import IconTrophy from './image/icon-trophy.png'
+import IconLevel from '../share-page/track-review-activity/images/icon_level.png'
+import IconLevel2 from '../share-page/track-review-activity/images/icon_level2.png'
+import IconLevel3 from '../share-page/track-review-activity/images/icon_level3.png'
 import IconEmtry from './image/icon-emtry.png'
 import IconAvator from '@/common/images/icon_teacher.png'
 import request from '@/helpers/request'
@@ -30,7 +40,7 @@ export default defineComponent({
     const getMusicList = async () => {
       try {
         const {
-          data: { activityMusicVoList, shareUrl,subjectUrl }
+          data: { activityMusicVoList, shareUrl, subjectUrl }
         } = await request.post(
           `/api-student/open/activity/info/${route.query.id}`
         )
@@ -94,7 +104,7 @@ export default defineComponent({
                   imgHeight.value = imgRef.value?.offsetHeight || 100
                 })
               }}
-              onError={(err) => {
+              onError={err => {
                 console.log(err)
               }}
             />
@@ -128,7 +138,11 @@ export default defineComponent({
                           return (
                             <div class={styles.item}>
                               <div class={styles.left}>
-                                {index == 0 ? <Image src={IconTrophy} /> : t}
+                                {/* {index == 0 ? <Image src={IconTrophy} /> : t} */}
+                                {index == 0 && <Image src={IconLevel} />}
+                                {index == 1 && <Image src={IconLevel2} />}
+                                {index == 2 && <Image src={IconLevel3} />}
+                                {index != 0 && index != 1 && index != 2 && t}
                               </div>
                               <div class={styles.center}>
                                 <Image
@@ -140,7 +154,9 @@ export default defineComponent({
                                 />
                                 <div class={styles.user}>
                                   <div class={styles.userContent}>
-                                    <span class={styles.name}>{n.username}</span>
+                                    <span class={styles.name}>
+                                      {n.username}
+                                    </span>
                                     <span class={styles.tag}>
                                       {n.userSubject}
                                     </span>
@@ -150,7 +166,9 @@ export default defineComponent({
                               </div>
                               <div class={styles.right}>
                                 <div class={styles.fraction}>{n.score}分</div>
-                                <div class={styles.time}>第 {n.times} 次评测</div>
+                                <div class={styles.time}>
+                                  第 {n.times} 次评测
+                                </div>
                               </div>
                             </div>
                           )

src/teacher/share-page/track-review-activity/index.module.less

@@ -102,13 +102,30 @@
   }
 }
 
-.prize {
+.prizeTitle {
+  padding: 0 16px 3px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #ff5252;
   display: flex;
   align-items: center;
+  .prizeLevel {
+    height: 17px;
+    margin-right: 5px;
+  }
+}
+
+.prizeSection {
   margin: 0 10px 10px;
-  padding: 10px;
   background-color: #ffffff;
   border-radius: 12px;
+}
+.prize {
+  display: flex;
+  align-items: center;
+  padding: 10px 0;
+  margin: 0 10px;
+  border-bottom: 1px solid #ffe4e4;
 
   img {
     width: 74px;

src/teacher/share-page/track-review-activity/index.tsx

@@ -29,6 +29,21 @@ export default defineComponent({
     activityMusic() {
       const activeInfo: any = this.activeInfo
       return activeInfo.activityMusicVoList || []
+    },
+    rewardList() {
+      const activityRewardList = this.activeInfo.activityRewardList
+      console.log(activityRewardList)
+      let list = activityRewardList || []
+      if (activityRewardList && activityRewardList.length > 0) {
+        const last = activityRewardList.sort((a: any, b: any) => {
+          return Number(a.group) < Number(b.group) ? -1 : 1
+        })
+        list = this.groupBy(last, (item: any) => {
+          return [item.group]
+        })
+        console.log(list, 'list')
+      }
+      return list || []
     }
   },
   async mounted() {
@@ -38,6 +53,18 @@ export default defineComponent({
     this.checkActivityTime()
   },
   methods: {
+    groupBy(array: any, f: any) {
+      const groups = {}
+      array.forEach(function (o) {
+        //注意这里必须是forEach 大写
+        const group = JSON.stringify(f(o))
+        groups[group] = groups[group] || []
+        groups[group].push(o)
+      })
+      return Object.keys(groups).map(function (group) {
+        return groups[group]
+      })
+    },
     async getMusicInfo() {
       try {
         // 获取活动基本信息
@@ -130,12 +157,67 @@ export default defineComponent({
                 活动奖品
               </span>
 
-              <img
+              {/* <img
                 src={getAssetsHomeFile('star_bg.png')}
                 class={styles.iconStar}
-              />
+              /> */}
+              <span
+                class={styles.titleTips}
+                onClick={() =>
+                  this.$router.push({
+                    path: '/leaderboard',
+                    query: { id: this.id }
+                  })
+                }
+              >
+                查看挑战排行榜
+                <img
+                  style={{ width: '16px', marginLeft: '4px' }}
+                  src={getAssetsHomeFile('icon-lv.png')}
+                />
+                {/* 共{this.activityMusic.length || 0}
+                首曲目 */}
+              </span>
             </h2>
-            {this.activeInfo.activityRewardList &&
+            {this.rewardList.map((item: any, index: number) => (
+              <>
+                <div class={styles.prizeTitle}>
+                  {index === 0 && (
+                    <Image
+                      class={styles.prizeLevel}
+                      src={getAssetsHomeFile('icon_level.png')}
+                    />
+                  )}
+                  {index === 1 && (
+                    <Image
+                      class={styles.prizeLevel}
+                      src={getAssetsHomeFile('icon_level2.png')}
+                    />
+                  )}
+                  {index === 2 && (
+                    <Image
+                      class={styles.prizeLevel}
+                      src={getAssetsHomeFile('icon_level3.png')}
+                    />
+                  )}
+                  第{++index}名奖品
+                </div>
+                <div class={styles.prizeSection}>
+                  {item.map((child: any) => (
+                    <div class={[styles.prize]}>
+                      <Image src={child.imgUrl} />
+                      <div class={styles.prizeContainer}>
+                        <div class={styles.prizeName}>{child.rewardName}</div>
+                        <div class={styles.prizeDesc}>
+                          {child.rewardDescribe}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </>
+            ))}
+            {/* {this.activeInfo.activityRewardList &&
               this.activeInfo.activityRewardList.map((item: any) => (
                 <div class={styles.prize}>
                   <Image src={item.imgUrl} />
@@ -144,7 +226,7 @@ export default defineComponent({
                     <div class={styles.prizeDesc}>{item.rewardDescribe}</div>
                   </div>
                 </div>
-              ))}
+              ))} */}
           </div>
 
           <div class={[styles.section]} style={{ backgroundColor: '#fff' }}>
@@ -154,11 +236,21 @@ export default defineComponent({
                 活动曲目
               </span>
 
-              <span class={styles.titleTips}  onClick={() => this.$router.push({path: '/leaderboard', query:{id: this.id}})}>
-                查看挑战排行榜
-                <img style={{width: '16px', marginLeft: '4px'}} src={getAssetsHomeFile('icon-lv.png')} />
-                {/* 共{this.activityMusic.length || 0}
-                首曲目 */}
+              <span
+                class={styles.titleTips}
+                // onClick={() =>
+                //   this.$router.push({
+                //     path: '/leaderboard',
+                //     query: { id: this.id }
+                //   })
+                // }
+              >
+                {/* 查看挑战排行榜
+                <img
+                  style={{ width: '16px', marginLeft: '4px' }}
+                  src={getAssetsHomeFile('icon-lv.png')}
+                /> */}
+                共{this.activityMusic.length || 0}首曲目
               </span>
             </h2>