添加去练习

src/tenant/music/coursewarePlay/component/video-play.tsx

@@ -26,6 +26,7 @@ import {
 import TCPlayer from 'tcplayer.js'
 import 'tcplayer.js/dist/tcplayer.min.css'
 import { Slider, Toast } from 'vant'
+import { musicBuy } from '../../music'
 
 // 秒转分
 export const getSecondRPM = (second: number, type?: string) => {
@@ -326,6 +327,12 @@ export default defineComponent({
       return videoItem.value
     }
 
+    const gotoAccomany = (e: any) => {
+      // 去云练习完整版
+      e.stopPropagation()
+      musicBuy({ id: item.value.materialMusicId })
+    }
+
     expose({
       changePlayBtn,
       toggleHideControl,
@@ -412,6 +419,13 @@ export default defineComponent({
           </div>
         </div>
 
+        {item.value.materialMusicId && (
+          <div
+            class={[styles.goPractice, data.showBar ? '' : styles.hide]}
+            onClick={gotoAccomany}
+          ></div>
+        )}
+
         <div
           style={{
             display: data.speedControl ? 'block' : 'none'

src/tenant/music/coursewarePlay/index.module.less

@@ -251,7 +251,7 @@
       display: flex;
     }
 
-    .actionBtn > img {
+    .actionBtn>img {
       width: 30px;
       height: 30px;
       display: block;
@@ -269,6 +269,7 @@
 }
 
 :global {
+
   .top-enter-active,
   .top-leave-active {
     transition: transform 0.5s;
@@ -372,3 +373,21 @@
 .popupMore {
   background: rgba(0, 0, 0, 0.8);
 }
+
+
+.goPractice {
+  width: 89px;
+  height: 32px;
+  background: url('./image/btn_go_practice.png') no-repeat center;
+  background-size: contain;
+  position: absolute;
+  right: 12px;
+  bottom: 60px;
+  z-index: 11;
+  transition: all .5s ease;
+
+
+  &.hide {
+    transform: translateX(66px);
+  }
+}

src/tenant/music/coursewarePlay/index.tsx

@@ -45,6 +45,7 @@ import Tool, { ToolItem, ToolType } from './component/tool'
 import Pen from './component/tools/pen'
 // import VideoItem from './component/video-item';
 import VideoPlay from './component/video-play'
+import { musicBuy } from '../music'
 
 export default defineComponent({
   name: 'CoursewarePlay',
@@ -319,8 +320,14 @@ export default defineComponent({
               if (Array.isArray(n.materialList)) {
                 n.materialList = n.materialList.map((item: any) => {
                   index++
+                  const materialRefs = item.materialRefs
+                    ? item.materialRefs
+                    : []
+                  const materialMusicId =
+                    materialRefs.length > 0 ? materialRefs[0].resourceId : null
                   return {
                     ...item,
+                    materialMusicId,
                     content: item.content,
                     knowledgePointId: [item.knowledgePointId],
                     materialId: item.id,
@@ -952,7 +959,24 @@ export default defineComponent({
                         </div>
                       )}
                   </Transition>
-                  {isRender && m.typeCode === 'IMG' && <img src={m.content} />}
+                  {isRender && m.typeCode === 'IMG' && (
+                    <>
+                      <img src={m.content} />
+                      {m.materialMusicId && (
+                        <div
+                          class={[
+                            styles.goPractice,
+                            activeData.model ? '' : styles.hide
+                          ]}
+                          onClick={(e: any) => {
+                            // 去云练习完整版
+                            e.stopPropagation()
+                            musicBuy({ id: m.materialMusicId })
+                          }}
+                        ></div>
+                      )}
+                    </>
+                  )}
                   {isRender && m.typeCode === 'SONG' && (
                     <MusicScore
                       activeModel={activeData.model}