Merge branch 'teahcer-home' into online

src/views/music/music-detail/download.module.less

@@ -0,0 +1,43 @@
+.downloadContainer {
+  padding: 20px 18px;
+}
+
+.musicContainer {
+  text-align: center;
+  max-height: 520px;
+  overflow: hidden;
+  overflow-y: auto;
+
+  h2 {
+    font-size: 16px;
+    color: #1a1a1a;
+    line-height: 22px;
+  }
+
+  .musicImg {
+    min-height: 408px;
+  }
+}
+
+.num {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: #999;
+  padding: 0 0 12px;
+  .page {
+    font-size: 16px;
+    font-weight: 600;
+    color: #1a1a1a;
+    line-height: 22px;
+  }
+}
+
+.downloadBtn {
+  box-shadow: 0px 2px 7px 0px rgba(45, 199, 170, 0.25);
+  font-size: 14px;
+  font-weight: 600;
+  color: #ffffff;
+  line-height: 20px;
+}

src/views/music/music-detail/download.tsx

@@ -0,0 +1,120 @@
+import { defineComponent, reactive, ref } from 'vue'
+import styles from './download.module.less'
+import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
+import {
+  addMusicTitle,
+  addWatermark,
+  convasToImg,
+  imgToCanvas
+} from './imageFunction'
+import { Button, Swipe, SwipeItem, Toast, Image } from 'vant'
+
+export default defineComponent({
+  name: 'download',
+  props: {
+    imgList: {
+      type: Array,
+      default: () => []
+    },
+    musicSheetName: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props) {
+    const list = ref(props.imgList)
+    const acitveIndex = ref(0)
+    const saveLoading = ref<boolean>(false)
+    const image = ref('')
+    const onSaveImg = async () => {
+      // 判断是否在保存中...
+      if (saveLoading.value) {
+        return
+      }
+      saveLoading.value = true
+      // 判断是否已经生成图片
+      if (image.value) {
+        saveImg()
+      } else {
+        const tempCanvas = await imgToCanvas(
+          list.value[acitveIndex.value] as any
+        )
+        const titleCanvas = addMusicTitle(tempCanvas, {
+          title: props.musicSheetName,
+          size: 18
+        })
+        const canvas = await addWatermark(titleCanvas, '酷乐秀')
+        image.value = convasToImg(canvas)
+        await saveImg()
+      }
+    }
+
+    const saveImg = async () => {
+      Toast.loading({
+        message: '图片生成中...',
+        forbidClick: true
+      })
+      setTimeout(() => {
+        saveLoading.value = false
+      }, 100)
+      const res = await promisefiyPostMessage({
+        api: 'savePicture',
+        content: {
+          base64: image.value
+        }
+      })
+      if (res?.content?.status === 'success') {
+        Toast.success('保存成功')
+      } else {
+        Toast.fail('保存失败')
+      }
+    }
+    return () => {
+      return (
+        <div class={styles.downloadContainer}>
+          <div class={styles.musicContainer}>
+            <h2>{props.musicSheetName}</h2>
+            <div class={styles.musicImg}>
+              <Swipe
+                showIndicators={false}
+                loop={false}
+                onChange={(index: number) => {
+                  acitveIndex.value = index
+                  image.value = ''
+                }}
+              >
+                {list.value.length > 0 &&
+                  list.value.map((img: any) => (
+                    <SwipeItem>
+                      <Image src={img} />
+                    </SwipeItem>
+                  ))}
+              </Swipe>
+            </div>
+          </div>
+          <div class={styles.buttonGroup}>
+            <div class={styles.num}>
+              <span class={styles.page}>
+                {acitveIndex.value + 1}/{list.value.length}
+              </span>
+              <span class={styles.countPage}>（共{list.value.length}页）</span>
+            </div>
+
+            <Button
+              type="primary"
+              color="linear-gradient(180deg, #59E5D5 0%, #2DC7AA 100%)"
+              class={styles.downloadBtn}
+              block
+              round
+              onClick={() => onSaveImg()}
+              loading={saveLoading.value}
+              loadingText={'加载中...'}
+            >
+              下载当前页面
+            </Button>
+          </div>
+        </div>
+      )
+    }
+  }
+})

src/views/music/music-detail/index.module.less

@@ -159,7 +159,7 @@
     }
     span {
       padding-left: 8px;
-      max-width: 120px;
+      max-width: 60px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -171,10 +171,22 @@
     align-items: center;
     img {
       margin-top: -2px;
-      margin-left: 11px;
+      margin-left: 5px;
       width: 18px;
       height: 18px;
     }
+    :global {
+      .van-icon {
+        font-size: 20px;
+        margin-top: -2px;
+        margin-left: 5px;
+        color: var(--van-primary);
+      }
+    }
+
+    &:first-child {
+      margin-right: 14px;
+    }
   }
 }
 
@@ -435,3 +447,19 @@
     box-shadow: 0px 2px 7px 0px rgba(187, 156, 83, 0.25);
   }
 }
+
+.functionSection {
+  display: flex;
+}
+
+.empty {
+  margin: 0 auto;
+  font-size: 14px;
+  color: #999999;
+  line-height: 20px;
+  text-align: center;
+  padding-top: 60px;
+  .emptyImg {
+    width: 172px;
+  }
+}

src/views/music/music-detail/index.tsx

@@ -10,7 +10,7 @@ import umiRequest from 'umi-request'
 import { useRoute, useRouter } from 'vue-router'
 import request from '@/helpers/request'
 import ColHeader from '@/components/col-header'
-import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
+
 import {
   Button,
   Cell,
@@ -41,14 +41,10 @@ import iconCollect from './images/icon_collect.png'
 import iconCollectActive from './images/icon_collect_active.png'
 import iconListen from './images/icon_listen.png'
 import iconTeacher from '@common/images/icon_teacher.png'
-import {
-  addMusicTitle,
-  addWatermark,
-  convasToImg,
-  imgToCanvas
-} from './imageFunction'
+import emtpy from './images/emtpy.png'
 import Plyr from 'plyr'
 import 'plyr/dist/plyr.css'
+import Download from './download'
 
 export const getAssetsHomeFile = (fileName: string) => {
   const path = `../component/images/${fileName}`
@@ -71,8 +67,9 @@ export default defineComponent({
     const heightInfo = ref<any>('0')
     const musicDetail = ref<any>(null)
     const audioFileUrl = ref('')
-    const showImg = ref<string>('')
+    const showImg = ref<Array<any>>([])
     const accompanyUrl = ref<string>('')
+    const downloadStatus = ref<boolean>(false)
 
     const colors: any = {
       FREE: {
@@ -106,23 +103,23 @@ export default defineComponent({
         const background = res.data.background
         audioFileUrl.value =
           background && background.length > 0 ? background[0].audioFileUrl : ''
-
-        showImg.value = res.data.musicImg || ''
-
-        if (!showImg.value) {
-          setAccompanyUrl()
-          window.addEventListener(
-            'message',
-            async e => {
-              // 给图片设置背景色
-              const tempCanvas = await imgToCanvas(e.data)
-              const img = convasToImg(tempCanvas)
-              //  开始上传图片
-              uploadFunction(img)
-            },
-            false
-          )
-        }
+        // const arrImgs = res.data.musicImg ? res.data.musicImg.split(',') : []
+        showImg.value = res.data.musicImg ? res.data.musicImg.split(',') : []
+
+        // if (!showImg.value) {
+        // setAccompanyUrl()
+        // window.addEventListener(
+        //   'message',
+        //   async e => {
+        //     // 给图片设置背景色
+        //     const tempCanvas = await imgToCanvas(e.data)
+        //     const img = convasToImg(tempCanvas)
+        //     //  开始上传图片
+        //     uploadFunction(img)
+        //   },
+        //   false
+        // )
+        // }
       } catch (error) {
         isError.value = true
       }
@@ -194,7 +191,7 @@ export default defineComponent({
         await request.post(state.platformApi + '/open/music/sheet/img', {
           data: { musicSheetId: musicDetail.value.id, musicImg: imgurl }
         })
-        showImg.value = imgurl
+        // showImg.value = imgurl
       } catch (e) {
         console.log(e)
       }
@@ -287,48 +284,49 @@ export default defineComponent({
       }
     }
 
-    const saveLoading = ref<boolean>(false)
-    const image = ref('')
-    const onSaveImg = async () => {
-      // 判断是否在保存中...
-      if (saveLoading.value) {
-        return
-      }
-      saveLoading.value = true
-      // 判断是否已经生成图片
-      if (image.value) {
-        saveImg()
-      } else {
-        const tempCanvas = await imgToCanvas(showImg.value)
-        const titleCanvas = addMusicTitle(tempCanvas, {
-          title: musicDetail.value?.musicSheetName,
-          size: 18
+    const onAddCourse = async () => {
+      try {
+        const res = await request.post('/api-teacher/courseCourseware/submit', {
+          data: {
+            musicSheetId: musicDetail.value.id,
+            clientType: 'TEACHER',
+            userId: state.user.data?.userId
+          }
         })
-        const canvas = await addWatermark(titleCanvas, '酷乐秀')
-        image.value = convasToImg(canvas)
-        await saveImg()
+        console.log(res)
+        setTimeout(() => {
+          musicDetail.value.coursewareId = res.data.id || ''
+          Toast('添加成功')
+          musicDetail.value.coursewareStatus = 1
+        }, 100)
+      } catch {
+        //
       }
     }
-
-    const saveImg = async () => {
-      Toast.loading({
-        message: '图片生成中...',
-        forbidClick: true
-      })
-      setTimeout(() => {
-        saveLoading.value = false
-      }, 100)
-      const res = await promisefiyPostMessage({
-        api: 'savePicture',
-        content: {
-          base64: image.value
+    const removeCourse = async () => {
+      Dialog.confirm({
+        title: '提示',
+        message: '您是否确定移除课件',
+        confirmButtonColor: '#269a93',
+        cancelButtonText: '取消',
+        confirmButtonText: '确定'
+      }).then(async () => {
+        try {
+          await request.post(
+            '/api-teacher/courseCourseware/remove/' +
+              musicDetail.value.coursewareId,
+            {
+              data: {}
+            }
+          )
+          setTimeout(() => {
+            Toast('移除成功')
+            musicDetail.value.coursewareStatus = 0
+          }, 100)
+        } catch {
+          //
         }
       })
-      if (res?.content?.status === 'success') {
-        Toast.success('保存成功')
-      } else {
-        Toast.fail('保存失败')
-      }
     }
 
     const onBuy = async () => {
@@ -535,27 +533,33 @@ export default defineComponent({
                     </p>
                   </div>
                 ),
-                value: () => (
-                  <span class={styles.download} onClick={() => onSaveImg()}>
-                    <img src={iconDownload} />
-                    下载曲谱
-                  </span>
-                )
+                value: () =>
+                  showImg.value.length > 0 && (
+                    <span
+                      class={styles.download}
+                      onClick={() => {
+                        downloadStatus.value = true
+                      }}
+                    >
+                      <img src={iconDownload} />
+                      下载曲谱
+                    </span>
+                  )
               }}
             />
             <div class={styles.musicContent}>
-              <iframe
+              {/* <iframe
                 id="containerPrint"
                 ref="print"
                 style="width: 540px;page-break-after:always; height: 0;"
                 src={accompanyUrl.value}
-              />
+              /> */}
               <p class={styles.musicTitle}>
                 {musicDetail.value?.musicSheetName}
               </p>
-              {showImg.value ? (
-                <img src={showImg.value} alt="" class={styles.musicImg} />
-              ) : (
+              {showImg.value.length > 0 ? (
+                <img src={showImg.value[0]} alt="" class={styles.musicImg} />
+              ) : loading.value ? (
                 <>
                   <Vue3Lottie
                     animationData={AstronautJSON}
@@ -563,6 +567,11 @@ export default defineComponent({
                   ></Vue3Lottie>
                   <p class={styles.finchLoad}>加载中...</p>
                 </>
+              ) : (
+                <div class={styles.empty}>
+                  <Image src={emtpy} class={styles.emptyImg} />
+                  <p class={styles.emptyTip}>暂无乐谱预览图</p>
+                </div>
               )}
 
               <div class={styles.videoOperation}>
@@ -608,18 +617,43 @@ export default defineComponent({
                     <span>{musicDetail.value?.userName}</span>
                   </div>
 
-                  <div
-                    class={[styles.collectSection]}
-                    onClick={() => toggleFavorite()}
-                  >
-                    <span>{musicDetail.value?.favoriteCount}人收藏</span>
-                    <img
-                      src={
-                        musicDetail.value?.favorite
-                          ? iconCollectActive
-                          : iconCollect
-                      }
-                    />
+                  <div class={styles.functionSection}>
+                    <div
+                      class={[styles.collectSection]}
+                      onClick={() => toggleFavorite()}
+                    >
+                      <span>{musicDetail.value?.favoriteCount}人收藏</span>
+                      <img
+                        src={
+                          musicDetail.value?.favorite
+                            ? iconCollectActive
+                            : iconCollect
+                        }
+                      />
+                    </div>
+                    {state.platformType === 'TEACHER' && (
+                      <div
+                        class={[styles.collectSection]}
+                        onClick={() => {
+                          if (musicDetail.value?.coursewareStatus) {
+                            removeCourse()
+                          } else {
+                            onAddCourse()
+                          }
+                        }}
+                      >
+                        <span>
+                          {musicDetail.value?.coursewareStatus
+                            ? '移出课件'
+                            : '添加到课件'}
+                        </span>
+                        {musicDetail.value?.coursewareStatus ? (
+                          <Icon name="clear" />
+                        ) : (
+                          <Icon name="add" size={18} />
+                        )}
+                      </div>
+                    )}
                   </div>
                 </div>
               </div>
@@ -750,6 +784,13 @@ export default defineComponent({
               </div>
             </ColShare>
           </Popup>
+
+          <Popup v-model:show={downloadStatus.value} position="bottom" round>
+            <Download
+              imgList={showImg.value}
+              musicSheetName={musicDetail.value.musicSheetName}
+            />
+          </Popup>
         </div>
       )
     }