Merge branch 'liu-EventTracking' into dev

src/components/col-video/index.tsx

@@ -79,6 +79,16 @@ export default defineComponent({
       }
     })
   },
+  beforeUnmount(){
+    postMessage(
+      {
+        api: 'limitScreenRecord',
+        content: {
+          type: 0
+        }
+      }
+    )
+  },
   computed: {
     computedSeeStatus() {
       console.log(
@@ -192,6 +202,14 @@ export default defineComponent({
             }
           }
         )
+        postMessage(
+          {
+            api: 'limitScreenRecord',
+            content: {
+              type: 1
+            }
+          }
+        )
 
         this.onPlay && this.onPlay()
       })

src/teacher/my-sheetMusic/index.tsx

@@ -1,8 +1,55 @@
-import { defineComponent } from "vue";
+import { Tab, Tabs } from 'vant'
+import { defineComponent, onMounted, ref } from 'vue'
+import styles from './index.module.less'
+import { useEventTracking } from '@/helpers/hooks'
+import { getRandomKey } from '@/views/music/music'
+import Personal from '@/views/music/personal/personal'
+import Collection from '@/views/music/personal/collection'
+import Album from '@/views/music/personal/album'
 
 export default defineComponent({
     name: 'mySheetMusic',
-    setup(){
-        return () => <div>我的曲谱</div>
-    }
-})
+    setup() {
+        localStorage.setItem('behaviorId', getRandomKey())
+        const activeTab = ref('personal')
+        const personal = ref()
+        const collection = ref()
+        const practice = ref()
+        onMounted(() => {
+          useEventTracking('我的乐谱')
+        })
+        return () => {
+          return (
+            <div>
+              <Tabs
+                color="var(--van-primary)"
+                lineWidth={20}
+                v-model:active={activeTab.value}
+                onChange={val => (activeTab.value = val)}
+              >
+                <Tab title="购买单曲" name="personal"></Tab>
+                <Tab title="收藏单曲" name="collection"></Tab>
+                <Tab title="收藏专辑" name="album"></Tab>
+              </Tabs>
+              {activeTab.value === 'personal' && (
+                <Personal
+                  ref={personal}
+                  onFavorite={() => {
+                    practice.value?.reload?.()
+                  }}
+                />
+              )}
+              {activeTab.value === 'collection' && (
+                <Collection
+                  ref={collection}
+                  onFavorite={() => {
+                    practice.value?.reload?.()
+                  }}
+                />
+              )}
+              {activeTab.value === 'album' && <Album />}
+            </div>
+          )
+        }
+      }
+})

src/views/music/component/song/index.module.less

@@ -28,6 +28,9 @@
       padding: 2px 4px 0;
       border-radius: 4px;
     }
+    .tag:not(:first-child){
+      margin-left: 6px;
+    }
     .user {
       display: flex;
       align-items: center;

src/views/music/component/song/index.tsx

@@ -1,5 +1,5 @@
 import { CellGroup, Cell, Icon, Image, Popup, Tag, Toast } from 'vant'
-import { defineComponent, PropType, ref } from 'vue'
+import { computed, defineComponent, PropType, ref } from 'vue'
 import styles from './index.module.less'
 import IconPlay from '@/common/images/icon-play.png'
 import IconMore from '@/common/images/icon_more.png'
@@ -21,6 +21,10 @@ export default defineComponent({
     list: {
       type: Array as PropType<any[]>,
       default: () => []
+    },
+    showMore: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['detail'],
@@ -84,131 +88,143 @@ export default defineComponent({
       } catch {}
     }
 
-    return () => (
-      <div class={styles.theSong}>
-        {props.list.map((n: any) => (
-          <div class={styles.item} onClick={() => emit('detail', n)}>
-            <div class={styles.content}>
-              <div class={styles.top}>
-                <Tag
-                  style={{ color: colors[n.chargeType].color }}
-                  class={styles.tag}
-                  type="success"
-                  plain
-                >
-                  {colors[n.chargeType].text}
-                </Tag>
-                {n.exquisiteFlag === 1 && (
-                  <Image
-                    class={styles.exquisiteFlag}
-                    src={getAssetsHomeFile('icon_ exquisite.png')}
-                  />
-                )}
+    const list = computed(() => {
+      return props.list.map(n => {
+        if (typeof n.paymentType === 'string')
+          n.paymentType = n.paymentType.split(',')
+        return { ...n }
+      })
+    })
 
-                <span class={[styles.title, 'van-ellipsis']}>
-                  {n.musicSheetName}
-                </span>
-                <span class={[styles.singer, 'van-ellipsis']}>
-                  -{n.composer}
-                </span>
-              </div>
-              <div class={styles.user}>
-                {n.favorite === 1 && (
-                  <Image
-                    src={getAssetsHomeFile('collection_active.png')}
-                    class={styles.collection}
-                  />
-                )}
-                {n.addName ? (
-                  <span class={styles.name}>上传者：{n.addName}</span>
-                ) : (
-                  <span class={styles.name}>作曲：{n.composer}</span>
-                )}
-                <div class={styles.tags}>
-                  {n?.subjectNames.split(',').map((name: any) => (
-                    <span>{name}</span>
+    return () => {
+      return (
+        <div class={styles.theSong}>
+          {list.value.map((n: any) => (
+            <div class={styles.item} onClick={() => emit('detail', n)}>
+              <div class={styles.content}>
+                <div class={styles.top}>
+                  {n.paymentType.map(tag => (
+                    <Tag
+                      style={{ color: colors[tag].color }}
+                      class={styles.tag}
+                      type="success"
+                      plain
+                    >
+                      {colors[tag].text}
+                    </Tag>
                   ))}
+
+                  {n.exquisiteFlag === 1 && (
+                    <Image
+                      class={styles.exquisiteFlag}
+                      src={getAssetsHomeFile('icon_ exquisite.png')}
+                    />
+                  )}
+
+                  <span class={[styles.title, 'van-ellipsis']}>
+                    {n.musicSheetName}
+                  </span>
+                  <span class={[styles.singer, 'van-ellipsis']}>
+                    -{n.composer}
+                  </span>
+                </div>
+                <div class={styles.user}>
+                  {n.favorite === 1 && (
+                    <Image
+                      src={getAssetsHomeFile('collection_active.png')}
+                      class={styles.collection}
+                    />
+                  )}
+                  <span class={styles.name}>
+                    {n.addName ? `上传者：${n.addName}` : `作曲：${n.composer}`}
+                  </span>
+                  <div class={styles.tags}>
+                    {n?.subjectNames.split(',').map((name: any) => (
+                      <span>{name}</span>
+                    ))}
+                  </div>
                 </div>
               </div>
-            </div>
-            <div class={styles.play}>
-              <Icon name={IconPlay} size={28} />
+              <div class={styles.play}>
+                <Icon name={IconPlay} size={28} />
 
-              <span class={styles.moreSection}>
-                <Icon
-                  name={IconMore}
-                  size={18}
-                  onClick={(e: MouseEvent) => {
-                    e.stopPropagation()
-                    isMore.value = true
-                    moreData.value = n
-                  }}
-                />
-              </span>
+                {props.showMore && (
+                  <span class={styles.moreSection}>
+                    <Icon
+                      name={IconMore}
+                      size={18}
+                      onClick={(e: MouseEvent) => {
+                        e.stopPropagation()
+                        isMore.value = true
+                        moreData.value = n
+                      }}
+                    />
+                  </span>
+                )}
+              </div>
             </div>
-          </div>
-        ))}
+          ))}
 
-        <Popup v-model:show={isMore.value} position="bottom" round>
-          <CellGroup border={false}>
-            <Cell
-              center
-              class={styles.musicInfo}
-              v-slots={{
-                icon: () => (
-                  <Image class={styles.pImg} src={moreData?.value.titleImg} />
-                ),
-                title: () => (
-                  <div class={styles.info}>
-                    <h4 class="van-ellipsis">
-                      {moreData?.value.musicSheetName}
-                    </h4>
-                    <p
-                      style={{
-                        display: 'flex'
-                      }}
-                    >
-                      <Tag
+          <Popup v-model:show={isMore.value} position="bottom" round>
+            <CellGroup border={false}>
+              <Cell
+                center
+                class={styles.musicInfo}
+                v-slots={{
+                  icon: () => (
+                    <Image class={styles.pImg} src={moreData?.value.titleImg} />
+                  ),
+                  title: () => (
+                    <div class={styles.info}>
+                      <h4 class="van-ellipsis">
+                        {moreData?.value.musicSheetName}
+                      </h4>
+                      <p
                         style={{
-                          color: colors[moreData?.value.chargeType].color,
-                          marginRight: '6px'
+                          display: 'flex'
                         }}
-                        class={styles.tag}
-                        type="success"
-                        plain
                       >
-                        {colors[moreData?.value.chargeType].text}
-                      </Tag>
-                      <span style={{ paddingTop: '2px' }}>
-                        {moreData?.value.composer}
-                      </span>
-                    </p>
-                  </div>
-                )
-              }}
-            />
+                        <Tag
+                          style={{
+                            color: colors[moreData?.value.chargeType].color,
+                            marginRight: '6px'
+                          }}
+                          class={styles.tag}
+                          type="success"
+                          plain
+                        >
+                          {colors[moreData?.value.chargeType].text}
+                        </Tag>
+                        <span style={{ paddingTop: '2px' }}>
+                          {moreData?.value.composer}
+                        </span>
+                      </p>
+                    </div>
+                  )
+                }}
+              />
 
-            <Cell
-              border={false}
-              size="large"
-              title={moreData.value.favorite ? '取消收藏' : '收藏曲目'}
-              center
-              onClick={() => toggleFavorite()}
-              v-slots={{
-                icon: () => (
-                  <div class={styles.shareIcon}>
-                    <Image
-                      src={
-                        moreData.value.favorite
-                          ? collection_active
-                          : collection
-                      }
-                    />
-                  </div>
-                )
-              }}
-            />
-            <Cell
+              <Cell
+                border={false}
+                size="large"
+                title={moreData.value.favorite ? '取消收藏' : '收藏曲目'}
+                center
+                onClick={() => toggleFavorite()}
+                v-slots={{
+                  icon: () => (
+                    <div class={styles.shareIcon}>
+                      <Image
+                        src={
+                          moreData.value.favorite
+                            ? collection_active
+                            : collection
+                        }
+                      />
+                    </div>
+                  )
+                }}
+              />
+              <Cell
                 border={false}
                 size="large"
                 title={'分享曲目'}
@@ -226,88 +242,89 @@ export default defineComponent({
                 }}
               />
 
-            <Cell
-              border={false}
-              size="large"
-              center
-              title={`作曲：${moreData.value?.composer}`}
-              v-slots={{
-                icon: () => (
-                  <div class={styles.shareIcon}>
-                    <Image src={getAssetsHomeFile('icon_author.png')} />
-                  </div>
-                )
-              }}
-            />
-            <Cell
-              border={false}
-              size="large"
-              center
-              title={`上传：${moreData.value?.addName || '--'}`}
-              v-slots={{
-                icon: () => (
-                  <div class={styles.shareIcon}>
-                    <Image src={getAssetsHomeFile('icon_uploader.png')} />
-                  </div>
-                )
-              }}
-            />
-            <Cell
-              border={false}
-              size="large"
-              title={'小酷Ai练习'}
-              isLink
-              center
-              style={{ marginBottom: '100px' }}
-              onClick={() => {
-                isMore.value = false
-                emit('detail', moreData.value)
-              }}
-              v-slots={{
-                icon: () => (
-                  <div class={styles.shareIcon}>
-                    <Image src={getAssetsHomeFile('icon_ai.png')} />
-                  </div>
-                )
-              }}
-            />
-          </CellGroup>
-        </Popup>
+              <Cell
+                border={false}
+                size="large"
+                center
+                title={`作曲：${moreData.value?.composer}`}
+                v-slots={{
+                  icon: () => (
+                    <div class={styles.shareIcon}>
+                      <Image src={getAssetsHomeFile('icon_author.png')} />
+                    </div>
+                  )
+                }}
+              />
+              <Cell
+                border={false}
+                size="large"
+                center
+                title={`上传：${moreData.value?.addName || '--'}`}
+                v-slots={{
+                  icon: () => (
+                    <div class={styles.shareIcon}>
+                      <Image src={getAssetsHomeFile('icon_uploader.png')} />
+                    </div>
+                  )
+                }}
+              />
+              <Cell
+                border={false}
+                size="large"
+                title={'小酷Ai练习'}
+                isLink
+                center
+                style={{ marginBottom: '100px' }}
+                onClick={() => {
+                  isMore.value = false
+                  emit('detail', moreData.value)
+                }}
+                v-slots={{
+                  icon: () => (
+                    <div class={styles.shareIcon}>
+                      <Image src={getAssetsHomeFile('icon_ai.png')} />
+                    </div>
+                  )
+                }}
+              />
+            </CellGroup>
+          </Popup>
 
-        <Popup
-          v-model:show={shareStatus.value}
-          style={{ background: 'transparent' }}
-          teleport="body"
-        >
-          <ColShare
-            teacherId={moreData.value?.userId}
-            shareUrl={shareUrl.value}
-            shareType="music"
+          <Popup
+            v-model:show={shareStatus.value}
+            style={{ background: 'transparent' }}
+            teleport="body"
           >
-            <div class={styles.shareMate}>
-              {shareDiscount.value === 1 && (
-                <div class={styles.tagDiscount}>专属优惠</div>
-              )}
+            <ColShare
+              teacherId={moreData.value?.userId}
+              shareUrl={shareUrl.value}
+              shareType="music"
+            >
+              <div class={styles.shareMate}>
+                {shareDiscount.value === 1 && (
+                  <div class={styles.tagDiscount}>专属优惠</div>
+                )}
 
-              <img
-                class={styles.icon}
-                crossorigin="anonymous"
-                src={
-                  moreData.value?.titleImg +
-                    `@base@tag=imgScale&h=80&w=80&m=1?t=${+new Date()}` ||
-                  MusicIcon
-                }
-              />
-              <div class={styles.info}>
-                <h4 class="van-multi-ellipsis--l2">
-                  {moreData.value?.musicSheetName}
-                </h4>
-                <p>作曲人：{moreData.value?.composer}</p>
+                <img
+                  class={styles.icon}
+                  crossorigin="anonymous"
+                  src={
+                    moreData.value?.titleImg +
+                      `@base@tag=imgScale&h=80&w=80&m=1?t=${+new Date()}` ||
+                    MusicIcon
+                  }
+                />
+                <div class={styles.info}>
+                  <h4 class="van-multi-ellipsis--l2">
+                    {moreData.value?.musicSheetName}
+                  </h4>
+                  <p>作曲人：{moreData.value?.composer}</p>
+                </div>
               </div>
-            </div>
-          </ColShare>
-        </Popup>
-      </div>
-    )
+            </ColShare>
+          </Popup>
+        </div>
+      )
+    }
   }
 })

src/views/music/personal/personal.tsx

@@ -33,9 +33,11 @@ export default defineComponent({
       isError.value = false
       try {
         const res = await request('/music/sheet/my', {
+          method: state.platformType === 'TEACHER' ? 'POST' : 'GET',
           prefix:
             state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student',
-          params
+          params,
+          data: state.platformType === 'TEACHER' ? params : {}
         })
         rows.value = [...rows.value, ...res.data.rows]
         data.value = res.data
@@ -70,6 +72,7 @@ export default defineComponent({
           <div class={styles.personalSong}>
             <Song
               list={rows.value}
+              showMore={state.platformType === 'TEACHER' ? false : true}
               onDetail={(item: any) => {
                 musicBuy(item)
               }}