添加活动

src/router/routes-common.ts

@@ -204,6 +204,14 @@ export const router = [
     meta: {
       title: '优惠券'
     }
+  },
+  {
+    path: '/track-subject-song',
+    component: () =>
+      import('@/views/share-page/track-review-activity/subject-song'),
+    meta: {
+      title: '活动声部曲目'
+    }
   }
 ]
 

src/router/routes-student.ts

@@ -14,15 +14,14 @@ const noLoginRouter = [
       title: '分享乐曲'
     }
   },
-      {
-        path: '/leaderboard',
-        component: () =>
-          import('@/student/leaderboard/index'),
-        meta: {
-          title: '曲目挑战排行榜',
-          // isExternal: true // 是否外部浏览器可以打开
-        }
-      }
+  {
+    path: '/leaderboard',
+    component: () => import('@/student/leaderboard/index'),
+    meta: {
+      title: '曲目挑战排行榜'
+      // isExternal: true // 是否外部浏览器可以打开
+    }
+  }
 ]
 
 export default [
@@ -130,6 +129,15 @@ export default [
           title: '曲目评测活动',
           isExternal: true // 是否外部浏览器可以打开
         }
+      },
+
+      {
+        path: '/track-song',
+        component: () =>
+          import('@/student/share-active/track-review-activity/track-song'),
+        meta: {
+          title: '评测曲目'
+        }
       }
     ]
   },

src/student/main.ts

@@ -14,8 +14,8 @@ import { browser } from '@/helpers/utils'
 
 const app = createApp(App)
 
-// import Vconsole from 'vconsole'
-// const vconsole = new Vconsole()
+import Vconsole from 'vconsole'
+const vconsole = new Vconsole()
 postMessage(
   {
     api: 'getVersion'

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

@@ -113,6 +113,9 @@
     margin-right: 5px;
   }
 }
+.prizeTitle_score {
+  padding: 6px 0;
+}
 
 .prizeSection {
   margin: 0 10px 10px;
@@ -379,3 +382,98 @@
     margin: 0 6%;
   }
 }
+
+.bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 215px;
+  background: linear-gradient(180deg, #ff2a00 0%, #f40d00 100%);
+  opacity: 0.68;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+.trackSong {
+  overflow: hidden;
+  min-height: 100vh;
+  background-color: #fff;
+}
+.trackScore {
+  position: relative;
+  z-index: 2;
+  padding: 30px 20px;
+
+  .trackCountScore {
+    font-size: 16px;
+    color: #ffffff;
+    line-height: 22px;
+    span {
+      font-size: 28px;
+      font-weight: bold;
+      color: #ffffff;
+      line-height: 32px;
+    }
+  }
+
+  .trackIf {
+    padding-top: 5px;
+    font-size: 14px;
+    color: #ffafaf;
+    line-height: 20px;
+  }
+
+  .trackImg {
+    width: 92px;
+    height: 59px;
+    position: absolute;
+    right: 27px;
+    bottom: 28px;
+  }
+}
+.cellGroup {
+  border-radius: 12px;
+  padding: 10px 0;
+  overflow: hidden;
+
+  :global {
+    .van-cell {
+      padding: 14px 20px;
+    }
+    .van-cell__title {
+      flex: 1 auto;
+    }
+  }
+
+  .musicPic {
+    width: 56px;
+    height: 56px;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-right: 10px;
+  }
+
+  .musicName {
+    font-size: 16px;
+    font-weight: 600;
+    color: #1a1a1a;
+    line-height: 22px;
+  }
+
+  .labelClass {
+    font-size: 14px;
+    color: #999999;
+    line-height: 17px;
+  }
+  .labelScore {
+    color: #ff4e19;
+  }
+
+  .valueClass {
+    :global {
+      .van-button {
+        border-radius: 10px;
+      }
+    }
+  }
+}

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

@@ -46,9 +46,17 @@ export default defineComponent({
     }
   },
   computed: {
+    rankingMethod() {
+      const activeInfo: any = this.activeInfo
+      return activeInfo.rankingMethod || ''
+    },
     activityMusic() {
       const activeInfo: any = this.activeInfo
-      return activeInfo.activityMusicVoList || []
+      const list =
+        activeInfo.rankingMethod === 'TOTAL_SCORE'
+          ? activeInfo.subjectInfos
+          : activeInfo.activityMusicVoList
+      return list || []
     },
     // 用户是否有中选的曲子
     userSelectMusic() {
@@ -63,17 +71,20 @@ export default defineComponent({
     // this.activeInfo.activityRewardList
     rewardList() {
       const activeInfo: any = this.activeInfo
-      // activityRewardList = activityRewardList?.activityRewardList
-      // console.log(activityRewardList)
       let list = activeInfo.activityRewardList || []
       if (list && list.length > 0) {
-        const last = list.sort((a: any, b: any) => {
-          return Number(a.group) < Number(b.group) ? -1 : 1
-        })
-        list = this.groupBy(last, (item: any) => {
-          return [item.group]
-        })
+        if (activeInfo.rankingMethod === 'TOTAL_SCORE') {
+          list = [list]
+        } else {
+          const last = list.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)
       return list || []
     }
   },
@@ -89,6 +100,7 @@ export default defineComponent({
       this.onBackDialog('请使用酷乐秀学生端扫码打开')
       return
     } else {
+      console.log(this.hiddenProperty, 'hidden property')
       this.hiddenProperty =
         'hidden' in document
           ? 'hidden'
@@ -108,16 +120,21 @@ export default defineComponent({
     this.checkActivityTime()
   },
   unmounted() {
-    const visibilityChangeEvent = this.hiddenProperty.replace(
-      /hidden/i,
-      'visibilitychange'
-    )
-    document.removeEventListener(visibilityChangeEvent, this.onVisibilityChange)
+    if (this.hiddenProperty) {
+      const visibilityChangeEvent = this.hiddenProperty.replace(
+        /hidden/i,
+        'visibilitychange'
+      )
+      document.removeEventListener(
+        visibilityChangeEvent,
+        this.onVisibilityChange
+      )
+    }
   },
   methods: {
     groupBy(array: any, f: any) {
       const groups = {}
-      array.forEach(function (o) {
+      array.forEach(o => {
         //注意这里必须是forEach 大写
         const group = JSON.stringify(f(o))
         groups[group] = groups[group] || []
@@ -246,13 +263,35 @@ export default defineComponent({
     async onOpenMusic() {
       try {
         const selectMusic = this.selectMusic
+        let evaluationId = ''
+        // 判断是否是总分评测
+        if (this.rankingMethod === 'TOTAL_SCORE') {
+          // 直接取第一首曲目的评测编号
+          const activityMusicVoList = this.activeInfo.activityMusicVoList || []
+          activityMusicVoList.forEach(item => {
+            console.log(item, selectMusic)
+            if (item.subjectId == selectMusic.subjectId && !evaluationId) {
+              evaluationId = item.evaluationId
+            }
+          })
+        } else {
+          evaluationId = selectMusic.evaluationId
+        }
         if (selectMusic.join !== 1) {
-          await request.post(
-            `/api-student/activity/evaluation/${selectMusic.evaluationId}`
-          )
+          await request.post(`/api-student/activity/evaluation/${evaluationId}`)
           this.selectMusic.join = 1
         }
         this.popupStatus = false
+        if (this.rankingMethod === 'TOTAL_SCORE') {
+          this.$router.push({
+            path: '/track-song',
+            query: {
+              subjectId: selectMusic.subjectId,
+              id: this.id
+            }
+          })
+          return
+        }
         const browserInfo = browser()
         const url = qs.stringifyUrl({
           url: location.origin + '/accompany',
@@ -342,11 +381,6 @@ export default defineComponent({
                 <i class={styles.titlePrefix}></i>
                 活动奖品
               </span>
-
-              {/* <img
-                src={getAssetsHomeFile('star_bg.png')}
-                class={styles.iconStar}
-              /> */}
               <span
                 class={styles.titleTips}
                 onClick={() =>
@@ -366,25 +400,34 @@ export default defineComponent({
             {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')}
-                    />
+                  {this.rankingMethod === 'TOTAL_SCORE' ? (
+                    <div class={styles.prizeTitle_score}>
+                      总评测分数达到 {this.activeInfo.rankingScore || 0}
+                      分即可获奖
+                    </div>
+                  ) : (
+                    <>
+                      {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}名奖品
+                    </>
                   )}
-                  第{++index}名奖品
                 </div>
                 <div class={styles.prizeSection}>
                   {item.map((child: any) => (
@@ -409,9 +452,25 @@ export default defineComponent({
                 <i class={styles.titlePrefix}></i>
                 活动曲目
               </span>
-              <span class={styles.titleTips}>
-                共{this.activityMusic.length || 0}首曲目
-              </span>
+              {this.rankingMethod === 'TOTAL_SCORE' ? (
+                <span
+                  class={styles.titleTips}
+                  onClick={() => {
+                    this.$router.push({
+                      path: '/track-subject-song',
+                      query: {
+                        id: this.id
+                      }
+                    })
+                  }}
+                >
+                  查看曲目
+                </span>
+              ) : (
+                <span class={styles.titleTips}>
+                  共{this.activityMusic.length || 0}首曲目
+                </span>
+              )}
             </h2>
 
             {this.activityMusic.map((item: any) => (
@@ -419,19 +478,42 @@ export default defineComponent({
                 <Cell
                   center
                   titleClass={styles.musicTitle}
+                  isLink
                   v-slots={{
                     icon: () => (
                       <Image
-                        src={getAssetsHomeFile('icon_music.png')}
+                        src={getAssetsHomeFile(
+                          this.rankingMethod === 'TOTAL_SCORE'
+                            ? 'icon_music.png'
+                            : 'icon_subject.png'
+                        )}
                         class={styles.iconMusic}
                       />
                     ),
                     title: () => (
                       <span class={styles.musicName}>
-                        {item.musicSheetName}
+                        {this.rankingMethod === 'TOTAL_SCORE'
+                          ? item.subjectName
+                          : item.musicSheetName}
                       </span>
                     ),
-                    value: () => <span>{item.musicSubject}</span>
+                    value: () => (
+                      <span
+                        onClick={() => {
+                          this.$router.push({
+                            path: '/track-subject-song',
+                            query: {
+                              id: this.id,
+                              subjectId: item.subjectId
+                            }
+                          })
+                        }}
+                      >
+                        {this.rankingMethod === 'TOTAL_SCORE'
+                          ? `共${item.musicNums}首活动曲目`
+                          : item.musicSubject}
+                      </span>
+                    )
                   }}
                 />
                 <Cell
@@ -500,7 +582,7 @@ export default defineComponent({
                             color="linear-gradient(180deg, #FFA200 0%, #FF6900 100%)"
                             disabled={
                               this.activeInfo.join === 0 ||
-                              (this.userSelectMusic && item.join !== 1)
+                              (this.userSelectMusic && item.join != 1)
                             }
                             onClick={() => {
                               if (!this.checkActivityTime()) {
@@ -508,7 +590,18 @@ export default defineComponent({
                               }
                               this.selectMusic = item
                               if (item.join === 1) {
-                                this.onOpenMusic()
+                                if (this.rankingMethod === 'TOTAL_SCORE') {
+                                  this.$router.push({
+                                    path: '/track-song',
+                                    query: {
+                                      id: this.id,
+                                      subjectId: item.subjectId,
+                                      subjectName: item.subjectName
+                                    }
+                                  })
+                                } else {
+                                  this.onOpenMusic()
+                                }
                               } else {
                                 this.popupStatus = true
                               }
@@ -569,16 +662,31 @@ export default defineComponent({
             <div class={styles.popupContent}>
               {browser().isApp ? (
                 <>
-                  <p>
-                    确定要参加<span>{this.selectMusic.musicSheetName}</span>评测
-                    <span>
-                      {difficulty[this.activeInfo.evaluationDifficulty]}
-                    </span>
-                    的比拼吗？
-                  </p>
-                  <p class={styles.popupTips}>
-                    每位用户仅可选择一首曲目的一个难度哦！
-                  </p>
+                  {this.rankingMethod === 'TOTAL_SCORE' ? (
+                    <>
+                      <p>
+                        确定要参加 <span>{this.selectMusic.subjectName}</span>
+                        （声部）的比拼吗？
+                      </p>
+                      <p class={styles.popupTips}>
+                        每位用户仅可选择一个声部参与挑战哦！
+                      </p>
+                    </>
+                  ) : (
+                    <>
+                      <p>
+                        确定要参加<span>{this.selectMusic.musicSheetName}</span>
+                        评测
+                        <span>
+                          {difficulty[this.activeInfo.evaluationDifficulty]}
+                        </span>
+                        的比拼吗？
+                      </p>
+                      <p class={styles.popupTips}>
+                        每位用户仅可选择一首曲目的一个难度哦！
+                      </p>
+                    </>
+                  )}
                 </>
               ) : (
                 <div class={styles.appOut}>

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

@@ -0,0 +1,182 @@
+import ColHeader from '@/components/col-header'
+import { useRect } from '@vant/use'
+import { useEventListener, useWindowScroll } from '@vueuse/core'
+import { defineComponent } from 'vue'
+import { Button, Cell, CellGroup, Image } from 'vant'
+import styles from './index.module.less'
+import { browser, getRandomKey } from '@/helpers/utils'
+import qs from 'query-string'
+import request from '@/helpers/request'
+import { postMessage } from '@/helpers/native-message'
+
+export const getAssetsHomeFile = (fileName: string) => {
+  const path = `./images/${fileName}`
+  const modules = import.meta.globEager('./images/*')
+  return modules[path].default
+}
+
+export default defineComponent({
+  name: 'track-song',
+  data() {
+    const query = this.$route.query
+    console.log(query)
+    const subjectName = query.subjectName || ''
+    return {
+      id: query.id,
+      subjectId: query.subjectId,
+      background: 'rgba(55, 205, 177, 0)',
+      headColor: '#fff',
+      height: 'auto' as any,
+      backIconColor: 'white',
+      title: subjectName + '曲目评测',
+      behaviorId: getRandomKey(),
+      musicList: [] as any
+    }
+  },
+  async mounted() {
+    useEventListener(document, 'scroll', () => {
+      const { y } = useWindowScroll()
+      if (y.value > 52) {
+        this.headColor = '#000'
+        this.background = '#fff'
+        this.backIconColor = 'black'
+      } else {
+        this.background = 'transparent'
+        this.headColor = '#fff'
+        this.backIconColor = 'white'
+      }
+    })
+    await this.getMusicInfo()
+  },
+  methods: {
+    async getMusicInfo() {
+      try {
+        const { data } = await request.post(
+          '/api-student/open/activity/info/' + this.id
+        )
+
+        const activityMusicVoList = data.activityMusicVoList || []
+        const musicList = activityMusicVoList.filter(
+          (activity: any) => activity.subjectId == this.subjectId
+        )
+        this.musicList = musicList
+      } catch {
+        //
+      }
+    },
+    onOpenMusic(item: any) {
+      try {
+        const browserInfo = browser()
+        const url = qs.stringifyUrl({
+          url: location.origin + '/accompany',
+          query: {
+            id: item.musicSheetId,
+            behaviorId: this.behaviorId,
+            client: browserInfo.isTeacher ? 'teacher' : 'student',
+            setting: JSON.stringify({
+              mode: 'EVALUATING',
+              resets: ['SPEED'],
+              difficulty: item.evaluationDifficulty,
+              feeType: 'FREE',
+              submitData: { evaluationId: item.evaluationId }
+            })
+          }
+        })
+        postMessage({
+          api: 'openAccompanyWebView',
+          content: {
+            url,
+            orientation: 0,
+            isHideTitle: true,
+            statusBarTextColor: false,
+            isOpenLight: true
+          }
+        })
+      } catch {
+        //
+      }
+    }
+  },
+  computed: {
+    allScore() {
+      const musicList = this.musicList || []
+      // let score = musicList.reduce((total, currentIndex3))
+
+      return 0
+    }
+  },
+  render() {
+    return (
+      <div class={styles.trackSong}>
+        <div ref="headers">
+          <ColHeader
+            title={this.title}
+            background={this.background}
+            border={false}
+            color={this.headColor}
+            backIconColor={this.backIconColor as any}
+            onHeaderBack={() => {
+              this.$nextTick(() => {
+                const { height } = useRect((this as any).$refs.headers)
+                this.height = height
+                // this.homeContaiterHeight = `calc(100vh - var(--van-tabs-line-height) - ${height}px - 15px)`
+              })
+            }}
+          >
+            <div class={styles.trackScore}>
+              <div class={styles.trackCountScore}>
+                我的总分 <span>196</span>
+              </div>
+              <div class={styles.trackIf}>距离要求分数还有94分，继续加油！</div>
+
+              <Image
+                class={styles.trackImg}
+                src={getAssetsHomeFile('icon_score.png')}
+              />
+            </div>
+          </ColHeader>
+        </div>
+        <div class={styles.bg}></div>
+
+        <CellGroup class={styles.cellGroup}>
+          {this.musicList.map((item: any) => (
+            <Cell
+              center
+              v-slots={{
+                icon: () => (
+                  <Image src={item.musicImage} class={styles.musicPic} />
+                ),
+                title: () => (
+                  <div class={styles.musicName}>{item.musicSheetName}</div>
+                ),
+                label: () =>
+                  item.userId ? (
+                    <div class={[styles.labelClass, styles.labelScore]}>
+                      我的评分：{item.score}
+                    </div>
+                  ) : (
+                    <div class={styles.labelClass}>暂无评分，快来挑战吧～</div>
+                  ),
+                value: () => (
+                  <div class={styles.valueClass}>
+                    <Button
+                      type="primary"
+                      size="small"
+                      round
+                      color="linear-gradient(180deg, #FFA200 0%, #FF6900 100%)"
+                      onClick={() => {
+                        this.onOpenMusic(item)
+                      }}
+                    >
+                      立刻挑战
+                    </Button>
+                  </div>
+                )
+              }}
+            />
+          ))}
+        </CellGroup>
+      </div>
+    )
+  }
+})

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

@@ -0,0 +1,43 @@
+.subjectSong {
+  overflow: hidden;
+}
+
+.subjectSearch {
+  margin: 12px 14px;
+  width: auto !important;
+  border-radius: 20px;
+}
+
+.cellGroup {
+  border-radius: 12px;
+  padding: 2px 0;
+  overflow: hidden;
+  margin: 0 14px;
+
+  :global {
+    .van-cell {
+      padding: 14px;
+    }
+  }
+
+  .musicPic {
+    width: 56px;
+    height: 56px;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-right: 10px;
+  }
+
+  .musicName {
+    font-size: 16px;
+    font-weight: 600;
+    color: #1a1a1a;
+    line-height: 22px;
+  }
+
+  .labelClass {
+    font-size: 12px;
+    color: #999999;
+    line-height: 17px;
+  }
+}

src/views/share-page/track-review-activity/subject-song.tsx

@@ -0,0 +1,57 @@
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+import { Cell, CellGroup, Picker, Popup, Sticky, Image } from 'vant'
+
+export default defineComponent({
+  name: 'subject-song',
+  data() {
+    return {
+      showSubject: false,
+      columns: ['长笛', '长号']
+    }
+  },
+  render() {
+    return (
+      <div class={styles.subjectSong}>
+        <Sticky position="top">
+          <Cell
+            class={styles.subjectSearch}
+            title="长笛声部"
+            isLink
+            arrowDirection="down"
+            onClick={() => {
+              this.showSubject = true
+            }}
+          />
+        </Sticky>
+
+        <CellGroup inset class={styles.cellGroup}>
+          {[1, 2, 3, 4].map(() => (
+            <Cell
+              center
+              v-slots={{
+                icon: () => <Image src="" class={styles.musicPic} />,
+                title: () => <div class={styles.musicName}>斯卡布罗集市斯</div>,
+                label: () => <div class={styles.labelClass}>作者：Alex Liu</div>
+              }}
+            />
+          ))}
+        </CellGroup>
+
+        <Popup position="bottom" round v-model:show={this.showSubject}>
+          <Picker
+            title="选择声部"
+            columns={this.columns}
+            onCancel={() => {
+              this.showSubject = false
+            }}
+            onConfirm={(val: any) => {
+              console.log(val)
+              this.showSubject = false
+            }}
+          />
+        </Popup>
+      </div>
+    )
+  }
+})