colexiu-project/src/views/muiscDetial/index.tsx

import {
  defineComponent,
  toRefs,
  reactive,
  onMounted,
  ref,
  watch,
  nextTick
} from 'vue'
import classes from './index.module.less'
import {
  ElButton,
  ElOption,
  ElSelect,
  ElScrollbar,
  ElMessageBox
} from 'element-plus'
import printIcon from './images/printIcon.png'
import noMore from './images/noMore.png'
import banner from './images/banner.png'
import colVideo from '@/components/col-video/index'
import iconClose from '@/views/login/images/icon_close.png'
import start from '@/components/albumItem/images/start.png'
import lineStart from '@/components/albumItem/images/lineStart.png'
import oStart from '@/common/images/oStart.png'
import oLineStart from '@/common/images/oLineStart.png'
import teacher from '@/views/videoDetailList/images/teacher.png'
import teacherHeader from '@/common/images/icon_teacher.png'
import musiceIcon from '@/views/videoDetailList/images/musiceIcon.png'
import music from '@/components/musicLIstItem/images/music.png'
import tagItem from '@/components/tagItem'
import code from '@/common/images/student_download.png'
import musicItem from './modals/musicItem'
import request from '@/helpers/request'
import { useRoute, useRouter } from 'vue-router'
import gou from './images/gou.png'
import member from './images/member.png'
import palyer from './images/palyer.png'
import vipIcon from '../images/vipIcon.png'
import {
  getUserType,
  vaildTeachingUrl,
  getAuth,
  setAuth
} from '@/helpers/utils'
import { state as states } from '@/state'
import {
  imgToCanvas,
  addWatermark,
  convasToImg,
  addMusicTitle
} from '@/helpers/imageFunction'
import arrow from '@/views/home/images/moreArrow.png'
import { Vue3Lottie } from 'vue3-lottie'
import 'vue3-lottie/dist/style.css'
import AstronautJSON from '@/common/animate/bigLoad.json'
import printJS from 'print-js'
const chargeTypes = {
  CHARGE: '点播',
  FREE: '免费',
  VIP: '会员'
}
const chargeImg = {
  CHARGE: palyer,
  FREE: gou,
  VIP: member
}
const chargeClass = {
  CHARGE: 'charge',
  FREE: 'gou',
  VIP: 'member'
}
export default defineComponent({
  name: 'muiscDetial',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  components: {
    colVideo,
    tagItem,
    musicItem,
    Vue3Lottie
  },
  setup(props, conent) {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      title: props.title,
      id: route.query.id,
      subjectId: '',
      subjectList: [],
      tagList: [],
      teacherDetail: {} as any,
      musicDetail: {} as any,
      musicList: [],
      mp3Type: '',
      activeRow: {} as any,
      showCode: false,
      userType: '',
      accompanyUrl: '',
      imgData: '',
      imgUrl: '',
      showImg: ''
    })
     nextTick(() => {
        // 禁用右键
         // @ts-ignore：无法被执行的代码的错误
        document.oncontextmenu  = new Function('event.returnValue=false')
         // @ts-ignore：无法被执行的代码的错误
        // 禁用选择
        document.onselectstart = new Function('event.returnValue=false')
         // @ts-ignore：无法被执行的代码的错误
        //禁止f12
        document.οnkeydοwn  = new Function('event.returnValue=false')
      })

      // 上面的禁止f12那段代码没有生效，但是加了下面这段就能生效。
      document.onkeydown = function (e) {
        if (e && e.keyCode === 123) {
          e.returnValue = false
          // e.keyCode = 0   //去掉也可以的，倘若要写，则需要setter 以及 getter配合使用，不配合，会报错
          return false
        }
      }
    const print = ref()
    const getMusicList = async () => {
      try {
        const res = await request.get(
          `/api-website/open/music/sheet/detail/${state.id}`,
          {}
        )

        state.musicDetail = res.data
        state.musicList = res.data.teacher.musicSheetList
        state.subjectList = res.data.background
        state.tagList = res.data.musicTagNames
          ? res.data.musicTagNames.split(',')
          : []
        state.mp3Type = res.data.audioType
        if (state.subjectList && state.subjectList.length > 0) {
          state.activeRow = res.data.background[0]
          state.subjectId = res.data.background[0].id
        }

        state.teacherDetail = res.data.teacher
        setAccompanyUrl()
      } catch (e) {
        console.log(e)
      }
    }
    const followVideo = async () => {
      try {
        const res = await request.get('/api-website/student/starOrUnStar', {
          params: {
            userId: state.teacherDetail.userId,
            starStatus: state.teacherDetail.star ? 0 : 1
          }
        })
        getMusicList()
        // state.otherVideoList = res.data
      } catch (e) {
        console.log(e)
      }
    }
    const getDetail = (val: string | number) => {
      state.id = val as string
      router.push({
        query: { ...route.query, id: state.id }
      })
      state.showImg = ''
      getMusicList()
    }
    watch(
      () => state.accompanyUrl,
      accompanyUrl => {
        state.accompanyUrl = accompanyUrl
      }
    )
    const setAccompanyUrl = () => {
      let url = vaildTeachingUrl()
      state.accompanyUrl =
        url +
        `/accompany/colxiu-website.html?id=${state.id}&part-index=${state.subjectId}`
      // state.accompanyUrl = `http://192.168.3.8:3000/colxiu-website.html?id=${state.id}&part-index=${state.subjectId}`
    }
    const setSvg = (val: any) => {
      console.log(val)
    }
    onMounted(() => {
      // window.setSvg = (val)=>{
      //   setSvg(val)
      // }
      window.addEventListener(
        'message',
        async e => {
          console.log(e)
          state.imgData = e.data
          // printHander()
          // alert(e.data);
          const tempCanvas = await imgToCanvas(state.imgData)
          const showImg = convasToImg(tempCanvas)
          state.showImg = showImg
        },
        false
      )
      state.userType = getUserType()
      state.showCode =
        state.userType == 'STUDENT' || !state.userType ? true : false
      // 拼链接
      getMusicList()
    })
    const printHander = async () => {
      const tempCanvas = await imgToCanvas(state.imgData)
      const showImg = convasToImg(tempCanvas)
      state.showImg = showImg
      const titleCanvas = addMusicTitle(tempCanvas, {
        title: state.musicDetail.musicSheetName,
        size: 18
      })
      const canvas = addWatermark(titleCanvas, '酷乐秀')
      const imgUrl = convasToImg(canvas)
      const link = document.createElement('a')
      link.setAttribute('download', state.musicDetail.musicSheetName + '.png')
      // 添加时间戳，防止浏览器缓存图片
      state.imgUrl = imgUrl
      link.href = imgUrl
      link.click()
    }
    const gotoMusic = () => {
      router.push({
        name: 'searchdetail',
        params: {
          search: state.teacherDetail.userName as string,
          type: 'music'
        }
      })
    }

    const favoriteMusic = async () => {
      const tockn = getAuth()
      if (!tockn) {
        states.loginPopupStatus = true
        return
      }
      ElMessageBox.confirm(
        `是否${state.musicDetail.favorite ? '取消收藏' : '收藏'}该曲目？`,
        '提示',
        {
          type: 'warning'
        }
      ).then(async () => {
        try {
          const res = await request.post(
            `/api-website/music/sheet/favorite/${state.id}`
          )
          getMusicList()
          // state.otherVideoList = res.data
        } catch (e) {
          console.log(e)
        }
      })
    }
    return () => (
      <>
      <div class={classes.wallWrap}>
        <div class={classes.wall}></div>
        <div class={classes.musicWraps}>
          <div class={[classes.width1200]}>
            <div class={[classes.musicWrap]}>
              <div class={classes.left}>
              <div class={classes.title}>
                  {/* <div class={classes.titleLeft}>
                    <p>声部：</p>
                    <ElSelect
                      class="w-full subjectChiose"
                      v-model={state.subjectId}
                      placeholder="请选择声部"
                      onChange={() => {
                        setAccompanyUrl()
                      }}
                    >
                      {state.subjectList.map((item: any) => (
                        <ElOption
                          key={item.id}
                          value={item.id}
                          label={item.track}
                        />
                      ))}
                    </ElSelect>
                  </div> */}
                  <div class={classes.titleRight} onClick={() => printHander()}>
                    <img src={printIcon} alt="" />
                    <p>下载乐谱</p>
                  </div>
                </div>

                <div class={classes.musicContent}>
                  {/*        id="iframe"       ref="iframe"*/}

                  <img
                    class={classes.musicStag}
                    src={chargeImg[state.musicDetail.chargeType]}
                    alt=""
                  />
                  <iframe
                    id="containerPrint"
                    ref="print"
                    style="width: 538px;page-break-after:always; "
                    src={state.accompanyUrl}
                    class={classes.iframe}
                  />
                  <p class={classes.musicTitle}>
                    {state.musicDetail.musicSheetName}
                  </p>
                  {state.showImg ? (
                    <img src={state.showImg} alt="" />
                  ) : (
                    <div>
                      <Vue3Lottie
                        animationData={AstronautJSON}
                        class={classes.finch}
                      ></Vue3Lottie>
                      <p class={classes.finchLoad}>加载中...</p>
                    </div>
                  )}
                </div>

                {state.mp3Type == 'MP3' ? (
                  <colVideo
                    src={state.activeRow.audioFileUrl}
                    styleValue={{
                      height: '68px',
                      bacground: '#333'
                    }}
                    type={'audto'}
                    settings={['captions', 'quality', 'speed', 'loop', 'title']}
                    class={classes.audios}
                    poster={state.activeRow.title}
                  ></colVideo>
                ) : (
                  <>
                    <div class={classes.noMoreWrap}>
                      <img src={noMore} alt="" />
                      <p>温馨提示：该曲目暂不支持播放喔～</p>
                    </div>
                  </>
                )}

                {state.showCode ? (
                  <div class={classes.showCode}>
                    <div class={classes.showCodeWrap}>
                      <img
                        class={classes.close}
                        src={iconClose}
                        alt=""
                        onClick={() => {
                          state.showCode = false
                        }}
                      />
                      <img class={classes.code} src={code} alt="" />
                      {/* <h2 class={classes.title}>酷乐秀</h2>
                  <p class={classes.conent}>扫码下载酷乐秀APP</p>
                  <p class={classes.subConent}>
                    使用小酷Ai即可智能练习本首曲目哦！
                  </p> */}
                      <img src={banner} class={classes.banner} alt="" />
                    </div>
                  </div>
                ) : null}
              </div>
              <div class={classes.right}>
                <div class={classes.musicInfo}>
                  <h2>
                    <span
                      class={[
                        classes.musicTag,
                        classes[chargeClass[state.musicDetail.chargeType]]
                      ]}
                    >
                      {chargeTypes[state.musicDetail.chargeType]}
                    </span>
                    {state.musicDetail.musicSheetName}
                  </h2>
                  <div class={classes.collectWrap}>
                    <div class={classes.masker} onClick={favoriteMusic}>
                      <img
                        src={state.musicDetail.favorite ? lineStart : start}
                        alt=""
                      />
                    </div>
                    <img src={music} class={classes.musiceIcon} alt="" />
                    <div>
                      <div class={classes.collect} onClick={favoriteMusic}>
                        <img
                          src={state.musicDetail.favorite ? oLineStart : oStart}
                          class={classes.start}
                          alt=""
                        />
                        <p>{state.musicDetail.favoriteNum}人收藏</p>
                      </div>

                      <div class={classes.tagList}>
                        {state.tagList.map((item: any) => {
                          return <div class={classes.tag}>{item}</div>
                        })}
                      </div>
                      <p class={classes.subTitle}>
                        作曲人：<span>{state.musicDetail.composer}</span>
                      </p>
                      <p class={classes.subTitle}>
                        声部：<span>{state.musicDetail.subjectNames}</span>
                      </p>
                    </div>
                  </div>
                </div>
                <div class={classes.btooom}>
                  {state.teacherDetail.userId ? (
                    <div class={classes.teacherInfo}>
                      <h2>上传者</h2>
                      <div class={classes.teacherHeadWrap}>
                        <div class={classes.teacherHeadLeft}>
                          <img
                            src={
                              state.teacherDetail.userAvatar
                                ? state.teacherDetail.userAvatar
                                : teacherHeader
                            }
                            alt=""
                            class={classes.teacherHeader}
                          />
                          <div class={classes.teacherHeadInfo}>
                            <div class={classes.teacherHeadName}>
                              <p>{state.teacherDetail.userName}</p>
                              {/* {!state.teacherDetail.entryFlag ? (
                            ''
                          ) : (
                            <img
                              src={teacher}
                              class={classes.teacherIcon}
                              alt=""
                            />
                          )}
                          {!state.teacherDetail.musicianFlag ? (
                            ''
                          ) : (
                            <img
                              src={musiceIcon}
                              class={classes.teacherIcon}
                              alt=""
                            />
                          )} */}
                              {state.userType == 'STUDENT' ? (
                                <div
                                  class={[
                                    classes.teacherHeadRight,
                                    state.teacherDetail.star
                                      ? classes.isStart
                                      : ''
                                  ]}
                                  onClick={() => followVideo()}
                                >
                                  {state.teacherDetail.star
                                    ? '已关注'
                                    : '+ 关注'}
                                </div>
                              ) : null}
                            </div>
                          </div>
                        </div>
                        <div>
                          <p class={classes.fensNum}>
                            {state.teacherDetail.fansNum}
                          </p>
                          <p class={classes.fens}>粉丝数</p>
                        </div>
                      </div>
                    </div>
                  ) : null}

                  <div class={classes.otherMusic}>
                    <div class={classes.videoNav}>
                      <h5>TA的曲谱</h5>
                      <div
                        class={classes.wrapRight}
                        onClick={() => gotoMusic()}
                      >
                        <span>更多</span>
                        <img class={classes.arrow} src={arrow} alt="" />
                      </div>
                    </div>

                    <div class={classes.otherMusicList}>
                      {state.musicList.map(item => {
                        return (
                          <musicItem
                            item={item}
                            onMusicDetail={val => getDetail(val)}
                          ></musicItem>
                        )
                      })}
                    </div>
                  </div>
                </div>
              </div>
              {/* <img src={state.imgUrl} alt="" /> */}
            </div>
          </div>
        </div>
        </div>
      </>
    )
  }
})