Merge remote-tracking branch 'origin/hqyDev' into online

src/components/MEmpty.vue

@@ -22,8 +22,8 @@ export default {
 
 .icon {
     width: 2rem;
-    height: 1.7rem;
-    margin: .5rem auto .05rem;
+    height: 1.26rem;
+    margin: 0.5rem auto 0.1rem;
 }
 .icon_nodata {
     background: url('../assets/images/icon_nodata.png') no-repeat center;
@@ -35,7 +35,6 @@ export default {
     text-align: center;
     line-height: .22rem;
     position: relative;
-    top: -.2rem;
 }
 .full {
     height: 100vh;

src/views/creation/api.js

@@ -17,13 +17,17 @@ export const api_openUserMusicDetail = (params) => {
     baseURL: "/api-student",
     method: "get",
     hideLoading: true,
+    hint: true
   });
 };
 
 /**  点赞分页 */
 export const api_userMusicStarPage = (params) => {
-  return request.post(`/userMusicStar/page`, {
-    ...params,
+  return request({
+    url: `/userMusicStar/page`,
+    method: "post",
+    data: params,
+    hideLoading: true
   });
 };
 
@@ -37,6 +41,7 @@ export const api_openUserMusicPage = (params) => {
     baseURL: "/api-student",
     method: "post",
     data: params,
+    hideLoading: true
   });
 };
 

src/views/creation/audioVisualDraw.js

@@ -0,0 +1,156 @@
+/**
+ * 音频可视化
+ * @param audioDom
+ * @param canvasDom
+ * @param fftSize  2的幂数，最小为32
+ * 注意   由于ios低版本必须在用户操作之后才能初始化 createMediaElementSource 所以必须在用户操作之后初始化
+ */
+export default function audioVisualDraw(audioDom, canvasDom, fftSize = 128) {
+   // canvas
+   const canvasCtx = canvasDom.getContext("2d")
+   let { width, height } = canvasDom.getBoundingClientRect()
+   // 向上取整，当with为小数或者小于当前dom时候，切换app之后 会出现黑边
+   width = Math.ceil(width)
+   height = Math.ceil(height)
+   canvasDom.width = width
+   canvasDom.height = height
+   // audio
+   //const audioCtx = new AudioContext()
+   //const source = audioCtx.createMediaElementSource(audioDom)
+   //const analyser = audioCtx.createAnalyser()
+   //analyser.fftSize = fftSize
+   //source?.connect(analyser)
+   //analyser.connect(audioCtx.destination)
+   //const dataArray = new Uint8Array(fftSize / 2)
+   const draw = (data, ctx, { lineGap, canvWidth, canvHeight, canvFillColor, lineColor }) => {
+      if (!ctx) return
+      const w = canvWidth
+      const h = canvHeight
+      fillCanvasBackground(ctx, w, h, canvFillColor)
+      // 可视化
+      const dataLen = data.length
+      let step = (w / 2 - lineGap * dataLen) / dataLen
+      step < 1 && (step = 1)
+      const midX = w / 2
+      const midY = h / 2
+      let xLeft = midX
+      for (let i = 0; i < dataLen; i++) {
+         const value = data[i]
+         const percent = value / 255 // 最大值为255
+         const barHeight = percent * midY
+         canvasCtx.fillStyle = lineColor
+         // 中间加间隙
+         if (i === 0) {
+            xLeft -= lineGap / 2
+         }
+         canvasCtx.fillRect(xLeft - step, midY - barHeight, step, barHeight)
+         canvasCtx.fillRect(xLeft - step, midY, step, barHeight)
+         xLeft -= step + lineGap
+      }
+      let xRight = midX
+      for (let i = 0; i < dataLen; i++) {
+         const value = data[i]
+         const percent = value / 255 // 最大值为255
+         const barHeight = percent * midY
+         canvasCtx.fillStyle = lineColor
+         if (i === 0) {
+            xRight += lineGap / 2
+         }
+         canvasCtx.fillRect(xRight, midY - barHeight, step, barHeight)
+         canvasCtx.fillRect(xRight, midY, step, barHeight)
+         xRight += step + lineGap
+      }
+   }
+   const fillCanvasBackground = (ctx, w, h, colors) => {
+      ctx.clearRect(0, 0, w, h)
+      ctx.fillStyle = colors
+      ctx.fillRect(0, 0, w, h)
+   }
+   const requestAnimationFrameFun = () => {
+      // requestAnimationFrame(() => {
+      //   //analyser?.getByteFrequencyData(dataArray)
+      //   draw(generateMixedData(48), canvasCtx, {
+      //     lineGap: 2,
+      //     canvWidth: width,
+      //     canvHeight: height,
+      //     canvFillColor: "transparent",
+      //     lineColor: "rgba(255, 255, 255, 0.7)"
+      //   })
+      //   if (!isPause) {
+      //     requestAnimationFrameFun()
+      //   }
+      // })
+      const _time = setInterval(() => {
+         if (isPause) {
+            clearInterval(_time)
+            return
+         }
+         //analyser?.getByteFrequencyData(dataArray)
+         draw(generateMixedData(48), canvasCtx, {
+            lineGap: 2,
+            canvWidth: width,
+            canvHeight: height,
+            canvFillColor: "transparent",
+            lineColor: "#ffffff"
+         })
+      }, 300)
+   }
+   let isPause = true
+   const playVisualDraw = () => {
+      //audioCtx.resume()  // 重新更新状态   加了暂停和恢复音频音质发生了变化  所以这里取消了
+      isPause = false
+      requestAnimationFrameFun()
+   }
+   const pauseVisualDraw = () => {
+      isPause = true
+      requestAnimationFrame(() => {
+         canvasCtx.clearRect(0, 0, width, height)
+      })
+      //audioCtx?.suspend()  // 暂停   加了暂停和恢复音频音质发生了变化  所以这里取消了
+      // source?.disconnect()
+      // analyser?.disconnect()
+   }
+   return {
+      playVisualDraw,
+      pauseVisualDraw
+   }
+}
+
+export function generateMixedData(size) {
+   const dataArray = new Uint8Array(size)
+   const baseNoiseAmplitude = 30
+   const minFrequency = 0.01
+   const maxFrequency = 0.2
+   const minAmplitude = 50
+   const maxAmplitude = 150
+
+   let lastAmplitude = maxAmplitude // 初始振幅设置为最大值
+   let lastFrequency = minFrequency + Math.random() * (maxFrequency - minFrequency)
+
+   for (let i = 0; i < size; i++) {
+      const decayFactor = 1 - i / size // 使振幅随时间递减
+      const amplitude = lastAmplitude * decayFactor + (Math.random() - 0.5) * 10
+      const frequency = lastFrequency + (Math.random() - 0.5) * 0.01
+      const wave = amplitude * (0.5 + 0.5 * Math.sin(frequency * i))
+      const noise = Math.floor(Math.random() * baseNoiseAmplitude) - baseNoiseAmplitude / 2
+      dataArray[i] = Math.min(255, Math.max(0, Math.floor(wave + noise)))
+      lastAmplitude += (amplitude - lastAmplitude) * 0.05
+      lastFrequency += (frequency - lastFrequency) * 0.05
+   }
+
+   return dataArray
+}
+
+export function vaildMusicScoreUrl() {
+   const url = window.location.hostname
+   let returnUrl = ""
+   if (/dev/.test(url) || /192.168/.test(url)) {
+      returnUrl = "https://test.gym.lexiaoya.cn"
+   } else if (/test/.test(url)) {
+      // test 环境
+      returnUrl = "https://test.gym.lexiaoya.cn"
+   } else {
+      returnUrl = "https://gym.lexiaoya.cn"
+   }
+   return returnUrl
+}

src/views/creation/edit/index.vue

@@ -1,383 +1,431 @@
 <template>
-  <div style="padding-top: .12rem; overflow: hidden; min-height: 100vh;">
-    <div class="section sectionVideo" v-if="playType === 'Video'">
-      <img :src="videoImg || videoBg" class="videoBg" />
-      <div class="btnGroup">
-        <MUpload class="muploader imgCover" cropper :previewImage="false" v-model="videoImg" :options="{ fixedNumber: [16, 9] }">
-          <template #default>
-            <div class="btnImg" @click="onCropper">
-              相册获取封面
-            </div>
-          </template>
-        </MUpload>
-
-        <div class="btnCropper" @click="onCropper">
-          视频截取封面
+  <div
+     class="creationEdit"
+     :style="{
+        '--navBarHeight': navBarHeight + 'px'
+     }"
+  >
+     <van-sticky>
+        <van-nav-bar class="nav" :fixed="false" title="编辑" left-arrow @click-left="goBack" />
+     </van-sticky>
+     <div class="section sectionFile ">
+        <div :class="['uploadImg2']">
+           <!-- <img class="muploader showImg" :src="img || this.musicBg" /> -->
+           <MUpload class="muploader mupload uploadSingleImg opacity" cropper :defaultImg="musicBg" v-model="img" :previewImage="true" />
         </div>
-      </div>
-    </div>
-
-    <div class="section">
-      <van-field :rows="4" autosize type="textarea" maxlength="150" placeholder="我发布了一首演奏作品，快来听听吧～" showWordLimit v-model="desc" />
-    </div>
-
-    <div class="section sectionFile ">
-      <div :class="['uploadImg2']">
-        <!-- <img class="muploader showImg" :src="img || this.musicBg" /> -->
-        <MUpload class="muploader mupload uploadSingleImg opacity" cropper :defaultImg="musicBg" v-model="img" :previewImage="true" />
-      </div>
-      <div class="musicDetail">
-        <p class="musicName">{{ musicDetail.musicSheetName }}</p>
-        <p class="username">{{ musicDetail.username }}</p>
-      </div>
-    </div>
-
-    <div class="btnGroup">
-      <van-button type="primary" round block color="#2DC7AA" @click="onSubmit">
-        {{ musicDetail.type === "FORMAL" ? "保存" : "发布" }}
-      </van-button>
-    </div>
+        <div class="musicDetail">
+           <p class="musicName">{{ musicDetail.musicSheetName }}</p>
+           <p class="username">{{ musicDetail.username }}</p>
+        </div>
+     </div>
+     <div class="section sectionVideo" v-if="playType === 'Video'">
+        <img :src="videoImg || videoBg" class="videoBg" />
+        <div class="btnGroup">
+           <MUpload class="muploader imgCover" cropper :previewImage="false" v-model="videoImg" :options="{ fixedNumber: [16, 9] }">
+              <template #default>
+                 <div class="btnImg" @click="onCropper">
+                    相册获取封面
+                 </div>
+              </template>
+           </MUpload>
+
+           <div class="btnCropper" @click="onCropper">
+              视频截取封面
+           </div>
+        </div>
+     </div>
+     <div class="section">
+        <van-field
+            class="fieldText"
+           :rows="4"
+           autosize
+           type="textarea"
+           maxlength="150"
+           placeholder="我发布了一首演奏作品，快来听听吧～"
+           showWordLimit
+           v-model="desc"
+        />
+     </div>
+     <div class="btnGroup">
+        <van-button class="subBtn" type="primary" round block color="#01C1B5" @click="onSubmit">
+           {{ musicDetail.type === "FORMAL" ? "保存" : "发布" }}
+        </van-button>
+     </div>
   </div>
 </template>
 
 <script>
-import { postMessage } from "@/helpers/native-message";
-import { api_userMusicSave, api_userMusicDetail } from "../api";
-import MUpload from "@/components/MUpload";
+import { postMessage } from "@/helpers/native-message"
+import { browser } from "@/common/common"
+import { api_userMusicSave, api_userMusicDetail } from "../api"
+import MUpload from "@/components/MUpload"
 export default {
-  name: "creation-edit",
-  components: { MUpload },
+  name: "creationEdit",
   data() {
-    return {
-      files: [],
-      id: this.$route.query.id,
-      musicDetail: {},
-      playType: "",
-      desc: "",
-      videoImg: "", // 视频封面
-      img: "",
-      videoBg: require("../img/video-bg.png"),
-      musicBg: require("../img/music_bg.png"),
-    };
-  },
-  async mounted() {
-    try {
-      const { data } = await api_userMusicDetail(this.id);
-      this.musicDetail = data;
-      this.desc = data.desc;
-      this.videoImg = data.videoImg;
-      this.img = data.img;
-
-      if (data?.videoUrl.lastIndexOf("mp4") !== -1) {
-        this.playType = "Video";
-      } else {
-        this.playType = "Audio";
-      }
-    } catch {
-      //
-    }
+     return {
+        navBarHeight: 0,
+        files: [],
+        id: this.$route.query.id,
+        musicDetail: {},
+        playType: "",
+        desc: "",
+        videoImg: "", // 视频封面
+        img: "",
+        videoBg: require("../img/video-bg.png"),
+        musicBg: require("../img/music_bg.png")
+     }
   },
+  components: { MUpload },
   methods: {
-    async onSubmit() {
-      try {
-        await api_userMusicSave({
-          id: this.id,
-          img: this.img,
-          videoImg: this.videoImg,
-          desc: this.desc || "我发布了一首演奏作品，快来听听吧～",
-          musicPracticeRecordId: this.musicDetail.musicPracticeRecordId,
-          type: "FORMAL",
-        });
-
-        this.$router.back();
-      } catch {
-        //
-      }
-    },
-    // 截图
-    onCropper() {
-      postMessage(
-        {
-          api: "videoCrop",
-          content: {
-            url: this.musicDetail.videoUrl,
-          },
-        },
-        (res) => {
-          if (res?.content.videoCover) {
-            this.videoImg = res.content.videoCover;
-          }
+     goBack() {
+        if (browser().isApp) {
+           postMessage({
+              api: "goBack"
+           })
+        } else {
+           this.$router.back()
         }
-      );
-    },
+     },
+     async onSubmit() {
+        try {
+           await api_userMusicSave({
+              id: this.id,
+              img: this.img,
+              videoImg: this.videoImg,
+              desc: this.desc || "我发布了一首演奏作品，快来听听吧～",
+              musicPracticeRecordId: this.musicDetail.musicPracticeRecordId,
+              type: "FORMAL"
+           })
+
+           this.$router.back()
+        } catch {
+           //
+        }
+     },
+     // 截图
+     onCropper() {
+        postMessage(
+           {
+              api: "videoCrop",
+              content: {
+                 url: this.musicDetail.videoUrl
+              }
+           },
+           res => {
+              if (res?.content.videoCover) {
+                 this.videoImg = res.content.videoCover
+              }
+           }
+        )
+     }
   },
-};
-</script>
-
-<style lang="less">
-.sectionVideo {
-  position: relative;
-  line-height: 0;
-  overflow: visible !important;
-  margin-bottom: 24px !important;
-
-  .videoBg {
-    width: 100%;
-    height: 160px;
-    object-fit: cover;
-    border-radius: 10px;
+  created() {
+     postMessage({ api: "getNavHeight" }, res => {
+        const { content } = res
+        const dpi = content.dpi || 2
+        if (content.navHeight) {
+           const navHeight = content.navHeight / dpi
+           this.navBarHeight = navHeight
+        }
+     })
+  },
+  async mounted() {
+     try {
+        const { data } = await api_userMusicDetail(this.id)
+        this.musicDetail = data
+        this.desc = data.desc
+        this.videoImg = data.videoImg
+        this.img = data.img
+
+        if (data?.videoUrl.lastIndexOf("mp4") !== -1) {
+           this.playType = "Video"
+        } else {
+           this.playType = "Audio"
+        }
+     } catch {
+        //
+     }
   }
+}
+</script>
 
-  .btnGroup {
-    position: absolute;
-    left: 50%;
-    bottom: -12px;
-    background: linear-gradient(180deg, rgba(128, 158, 200, 0.59) 0%, rgba(58, 101, 162, 0.59) 100%);
-    border-radius: 15px;
-    height: 30px;
-    // transform: translate(-50%);
-    display: flex;
-    align-items: center;
-    flex: 1;
-    font-size: 12px;
-    font-weight: 500;
-    color: #ffffff;
-    line-height: 17px;
-    width: 300px;
-    margin: 0 0 0 -150px;
-
-    & > div {
-      flex: 1;
-      text-align: center;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .btnCropper {
-      border-left: 1px solid #fff;
-      line-height: 1;
-
-      &::before {
-        content: "";
-        width: 16px;
-        height: 16px;
-        display: inline-block;
-        background: url("../img/icon-cropper.png") no-repeat center;
-        background-size: contain;
-        margin-right: 4px;
-      }
-    }
-
-    .imgCover {
-      .mcropperSection {
-        display: none;
-      }
-    }
-
-    .btnImg {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      margin: 0;
-      line-height: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &::before {
-        content: "";
-        width: 16px;
-        height: 16px;
-        display: inline-block;
-        background: url("../img/icon-image.png") no-repeat center;
-        background-size: contain;
-        margin-right: 4px;
-        vertical-align: text-top;
-      }
-
-      // &::after {
-      //   content: "相册获取封面";
-      //   font-size: 12px;
-      //   color: #fff;
-      // }
-
-      img {
+<style lang="less" scoped>
+.creationEdit {
+  min-height: 100vh;
+  overflow: hidden;
+  .nav {
+     padding-top: var(--navBarHeight, 0);
+     background: #f1f1f1;
+     &::after {
         display: none;
-      }
-    }
+     }
+     /deep/ .van-nav-bar__content {
+        height: 44px;
+        .van-icon {
+           font-size: 0.19rem;
+           color: #333333;
+        }
+        .van-nav-bar__title {
+           font-size: 0.18rem;
+           color: #333333;
+           font-weight: 500;
+        }
+     }
   }
-}
+  .sectionVideo {
+     position: relative;
+     line-height: 0;
+     overflow: visible !important;
+
+     .videoBg {
+        width: 100%;
+        height: 196px;
+        object-fit: cover;
+        border-radius: 10px;
+     }
+
+     .btnGroup {
+        position: absolute;
+        left: 50%;
+        bottom: 12px;
+        background: linear-gradient(180deg, rgba(128, 177, 200, 0.59) 0%, rgba(58, 152, 162, 0.59) 100%);
+        border-radius: 15px;
+        height: 30px;
+        // transform: translate(-50%);
+        display: flex;
+        align-items: center;
+        flex: 1;
+        font-size: 12px;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 17px;
+        width: 300px;
+        margin: 0 0 0 -150px;
+
+        & > div {
+           flex: 1;
+           text-align: center;
+           display: flex;
+           align-items: center;
+           justify-content: center;
+        }
 
-.section {
-  margin: 12px 13px;
-  background: #ffffff;
-  border-radius: 10px;
-  font-size: 16px;
+        .btnCropper {
+           border-left: 1px solid #fff;
+           line-height: 1;
+
+           &::before {
+              content: "";
+              width: 16px;
+              height: 16px;
+              display: inline-block;
+              background: url("../img/icon-cropper.png") no-repeat center;
+              background-size: contain;
+              margin-right: 4px;
+           }
+        }
+
+        /deep/.imgCover {
+           .mcropperSection {
+              display: none;
+           }
+        }
 
-  .van-field__control::placeholder {
-    color: #aaa;
+        .btnImg {
+           position: absolute;
+           top: 0;
+           left: 0;
+           right: 0;
+           bottom: 0;
+           margin: 0;
+           line-height: 1;
+           display: flex;
+           align-items: center;
+           justify-content: center;
+
+           &::before {
+              content: "";
+              width: 16px;
+              height: 16px;
+              display: inline-block;
+              background: url("../img/icon-image.png") no-repeat center;
+              background-size: contain;
+              margin-right: 4px;
+              vertical-align: text-top;
+           }
+
+           // &::after {
+           //   content: "相册获取封面";
+           //   font-size: 12px;
+           //   color: #fff;
+           // }
+
+           img {
+              display: none;
+           }
+        }
+     }
   }
-}
 
-.sectionFile {
-  padding: 12px;
-  display: flex;
+  .section {
+     margin: 12px 13px;
+     background: #ffffff;
+     border-radius: 10px;
+     font-size: 16px;
+     overflow: hidden;
+     .fieldText {
+         border-radius: 10px;
+         /deep/.van-field__control{
+            caret-color: #01C1B5;
+         }
+      }
 
-  .van-uploader {
-    border-radius: 8px;
-    overflow: hidden;
+     .van-field__control::placeholder {
+        color: #aaa;
+     }
   }
 
-  .van-uploader__upload,
-  .van-uploader__preview-image {
-    margin: 0;
-    width: 0.62rem !important;
-    height: 0.62rem !important;
-  }
+  .sectionFile {
+     padding: 12px;
+     display: flex;
+
+     .van-uploader {
+        border-radius: 8px;
+        overflow: hidden;
+     }
+
+     .van-uploader__upload,
+     .van-uploader__preview-image {
+        margin: 0;
+        width: 0.62rem !important;
+        height: 0.62rem !important;
+     }
+
+     /deep/.muploader {
+        position: relative;
+        z-index: 8;
+        width: 0.62rem;
+        height: 0.62rem;
+        border: none;
+        margin: 0;
+        border-radius: 8px;
+        background-color: #ffffff;
+     }
+
+     .uploadImg2 {
+        position: relative;
+        border-radius: 8px;
+        margin-right: 16px;
+
+        .showImg {
+           position: absolute;
+           left: 0;
+           top: 0;
+        }
+        .tip {
+           position: absolute;
+           bottom: 0;
+           left: 0;
+           right: 0;
+           z-index: 10;
+           background: #000000;
+           opacity: 0.37;
+           font-size: 13px;
+           color: #ffffff;
+           line-height: 18px;
+           text-align: center;
+           border-radius: 0 0 8px 8px;
+           pointer-events: none;
+        }
 
-  .muploader {
-    position: relative;
-    z-index: 8;
-    width: 0.62rem;
-    height: 0.62rem;
-    border: none;
-    margin: 0;
-    border-radius: 8px;
-    background-color: #ffffff;
-  }
+        &::before {
+           content: "";
+           background: url("../img/audio-pan.png") no-repeat center;
+           background-size: contain;
+           position: absolute;
+           top: 0;
+           right: -6px;
+           z-index: 4;
+           width: 60px;
+           height: 60px;
+        }
+     }
+
+     .musicDetail {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+
+        .musicName {
+           font-size: 16px;
+           font-weight: 600;
+           color: #131415;
+           line-height: 22px;
+        }
 
-  .uploadImg2 {
-    position: relative;
-    border-radius: 8px;
-    margin-right: 16px;
-
-    .showImg {
-      position: absolute;
-      left: 0;
-      top: 0;
-    }
-    .tip {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      z-index: 10;
-      background: #000000;
-      opacity: 0.37;
-      font-size: 13px;
-      color: #ffffff;
-      line-height: 18px;
-      text-align: center;
-      border-radius: 0 0 8px 8px;
-      pointer-events: none;
-    }
-
-    &::before {
-      content: "";
-      background: url("../img/audio-pan.png") no-repeat center;
-      background-size: contain;
-      position: absolute;
-      top: 0;
-      right: -6px;
-      z-index: 4;
-      width: 60px;
-      height: 60px;
-    }
+        .username {
+           padding-top: 4px;
+           font-size: 14px;
+           color: #777777;
+           line-height: 20px;
+        }
+     }
   }
 
-  .musicDetail {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-
-    .musicName {
-      font-size: 16px;
-      font-weight: 600;
-      color: #131415;
-      line-height: 22px;
-    }
-
-    .username {
-      padding-top: 4px;
-      font-size: 14px;
-      color: #777777;
-      line-height: 20px;
-    }
+  .showInfoImg {
+     width: 0.62rem;
+     height: 0.62rem;
   }
-}
-
-.showInfoImg {
-  width: 0.62rem;
-  height: 0.62rem;
-}
-
-.btnGroup {
-  margin: 32px 24px 12px;
-  font-weight: 500;
-  font-size: 16px;
-}
 
-.uploadSingleImg {
-  .mcropperSection,
-  .cropper {
-    width: 0.62rem !important;
-    height: 0.62rem !important;
-    border-radius: 6px !important;
-    overflow: hidden !important;
+  .btnGroup {
+     margin: 32px 24px 12px;
+     font-weight: 500;
+     font-size: 16px;
+     .subBtn /deep/.van-button__text{
+         font-size: 16px;
+      }
   }
 
-  .mcropperSection .uploadImg {
-    margin-right: 0;
-  }
-  .cropper::before {
-    content: "选封面";
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 10;
-    background: #000000;
-    opacity: 0.37;
-    line-height: 20px;
-    height: 20px;
-    font-size: 13px;
-    color: #ffffff;
-    line-height: 18px;
-    text-align: center;
-    border-radius: 0 0 8px 8px;
-    pointer-events: none;
-  }
-  &.opacity {
-    // &::before {
-    //   display: none;
-    // }
-
-    .upbtn > input {
-      width: 0.62rem !important;
-      height: 0.62rem !important;
-    }
+  /deep/.uploadSingleImg {
+     .mcropperSection,
+     .cropper {
+        width: 0.62rem !important;
+        height: 0.62rem !important;
+        border-radius: 6px !important;
+        overflow: hidden !important;
+     }
+
+     .mcropperSection .uploadImg {
+        margin-right: 0;
+     }
+     .cropper::before {
+        content: "选封面";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 10;
+        background: #000000;
+        opacity: 0.37;
+        line-height: 20px;
+        height: 20px;
+        font-size: 13px;
+        color: #ffffff;
+        line-height: 18px;
+        text-align: center;
+        border-radius: 0 0 8px 8px;
+        pointer-events: none;
+     }
+     &.opacity {
+        // &::before {
+        //   display: none;
+        // }
+
+        .upbtn > input {
+           width: 0.62rem !important;
+           height: 0.62rem !important;
+        }
+     }
   }
 }
-
-// .uploadShowImg::after {
-//   content: "选封面";
-//   position: absolute;
-//   bottom: 0;
-//   left: 0;
-//   right: 0;
-//   z-index: 10;
-//   background: #000000;
-//   opacity: 0.37;
-//   line-height: 20px;
-//   height: 20px;
-//   font-size: 13px;
-//   color: #ffffff;
-//   line-height: 18px;
-//   text-align: center;
-//   border-radius: 0 0 8px 8px;
-//   pointer-events: none;
-// }
 </style>

src/views/creation/index copy.vue

@@ -0,0 +1,953 @@
+<template>
+  <div class="creation">
+    <div class="playSection">
+      <videoTcplayer v-if="playType === 'Video'" :src="musicDetail.videoUrl" :poster="musicDetail.videoImg || videoBg" />
+      <div class="audioSection" v-if="playType === 'Audio'">
+        <div class="audioContainer">
+          <div class="waveActive" :style="{ width: audioWidth + '%' }"></div>
+          <div class="waveDefault"></div>
+        </div>
+
+        <div class="audioBox">
+          <div :class="['audioPan', paused ? 'imgRotate' : '']">
+            <van-image class="audioImg" :src="musicDetail.img || musicBg" />
+          </div>
+          <i class="audioPoint"></i>
+          <i :class="['audioZhen', paused && 'active']"></i>
+        </div>
+        <div class="controls" @click="onControls">
+          <div class="actions">
+            <div class="actionBtn" @click="onToggleAudio">
+              <img v-if="paused" src="./img/icon-play.png" />
+              <img v-else src="./img/icon-pause.png" />
+            </div>
+          </div>
+          <div class="slider">
+            <van-slider :step="0.01" class="timeProgress" v-model="currentTime" :max="duration" @input="handleChangeTime" @drag-start="dragStatus = true" @drag-end="dragStatus = false" />
+          </div>
+          <div class="time">
+            <div>{{ getSecondRPM(currentTime) }}</div>
+            <span>/</span>
+            <div>{{ getSecondRPM(duration) }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <van-cell class="userSection" center :border="false">
+      <template #icon>
+        <van-image class="userLogo" :src="musicDetail.avatar" />
+      </template>
+      <template #title>
+        <div class="userInfo">
+          <p class="name">
+            <span>{{ musicDetail.username }}</span>
+            <img v-if="musicDetail.vipFlag" src="./img/icon-member.png" class="iconMember" />
+          </p>
+          <p class="sub van-multi-ellipsis--l2">
+            {{ musicDetail.subjectName }}
+            {{ getGradeCh(musicDetail.currentGradeNum - 1) }}
+          </p>
+        </div>
+      </template>
+      <template #default>
+        <div :class="['zan', 'zanActive']">
+          <img src="./img/icon-zan-active.png" class="iconZan" />
+          {{ musicDetail.likeNum }}
+        </div>
+      </template>
+    </van-cell>
+
+    <div class="musicSection">
+      <div class="musicName">
+        <span class="musicTag">曲目名称</span>
+        {{ musicDetail.musicSheetName }}
+      </div>
+      <div class="musicDesc">{{ musicDetail.desc }}</div>
+    </div>
+
+    <div class="likeSection">
+      <div class="likeTitle">点赞记录</div>
+
+      <van-list v-if="listState.dataShow" class="container containerInformation" :finished="listState.finished" finished-text=" " :immediate-check="false" @load="getStarList()">
+        <!-- {state.list.map((item: any, index: number) => ( -->
+        <van-cell v-for="(item, index) in list" :key="index" class="likeItem" :border="list.length - 1 == index ? false : true">
+          <template #icon>
+            <van-image :src="item.userAvatar" class="userLogo" />
+          </template>
+          <template #title>
+            <div class="userInfo">
+              <p class="name">{{ item.userName }}</p>
+              <p class="sub">
+                {{ item.subjectName }}
+                {{ getGradeCh(item.currentGradeNum - 1) }}
+              </p>
+            </div>
+          </template>
+          <template #default>
+            <div class="time">
+              {{ onDayjs(item.createTime) }}
+            </div>
+          </template>
+        </van-cell>
+      </van-list>
+
+      <MEmpty v-else msg="暂无数据" style="margin-bottom: 0.5rem" />
+
+      <div class="sticky-section">
+        <div class="bottomSection">
+          <div class="bottomShare">
+            <p @click="onDownload">
+              <img src="./img/icon-download.png" />
+              <span>下载</span>
+            </p>
+            <p @click="shareStatus = true">
+              <img src="./img/icon-share.png" />
+              <span>分享</span>
+            </p>
+            <p @click="deleteStatus = true">
+              <img src="./img/icon-delete.png" />
+              <span>删除</span>
+            </p>
+          </div>
+          <van-button round class="btnEdit" type="primary" @click="onDetail"> 编辑 </van-button>
+        </div>
+      </div>
+    </div>
+
+    <van-popup position="bottom" v-model="shareStatus" style="background: transparent">
+      <ShareModel :musicDetail="musicDetail" @close="shareStatus = false" />
+    </van-popup>
+
+    <van-popup v-model="deleteStatus" round class="popupContainer">
+      <p class="popupContent">确定删除吗？</p>
+      <div class="popupBtnGroup">
+        <van-button round @click="() => (deleteStatus = false)"> 取消 </van-button>
+        <van-button round type="primary" @click="onDelete"> 确定 </van-button>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import dayjs from "dayjs";
+import { getSecondRPM, browser, getGradeCh } from "@/common/common";
+import videoTcplayer from "@/components/video-tcplayer";
+import MEmpty from "@/components/MEmpty";
+import { postMessage } from "@/helpers/native-message";
+import { api_userMusicRemove, api_userMusicDetail, api_userMusicStarPage } from "./api";
+import ShareModel from "./share-model";
+const audioDom = new Audio();
+audioDom.controls = true;
+audioDom.style.width = "100%";
+audioDom.className = "audio";
+export default {
+  components: { videoTcplayer, MEmpty, ShareModel },
+  data() {
+    return {
+      id: this.$route.query.id,
+      videoBg: require("./img/video-bg.png"),
+      musicBg: require("./img/music_bg.png"),
+      deleteStatus: false,
+      shareStatus: false,
+      playType: "", // 播放类型
+      musicDetail: {},
+      timer: null,
+      audioWidth: 0,
+      paused: true,
+      currentTime: 0,
+      duration: 0.1,
+      loop: false,
+      dragStatus: false, // 是否开始拖动
+      isClick: false,
+      list: [],
+      listState: {
+        dataShow: true, // 判断是否有数据
+        loading: false,
+        finished: false,
+      },
+      params: {
+        page: 1,
+        rows: 20,
+      },
+    };
+  },
+  async mounted() {
+    document.title = "作品详情";
+    try {
+      const res = await api_userMusicDetail(this.id);
+
+      this.musicDetail = res.data || {};
+
+      this.getStarList();
+      // 判断是视频还是音频
+      if (res.data.videoUrl.lastIndexOf("mp4") !== -1) {
+        this.playType = "Video";
+      } else {
+        this.playType = "Audio";
+        // 初始化
+        this.$nextTick(() => {
+          this.initAudio();
+        });
+      }
+    } catch (e) {
+      //
+      if (e.code === 999) {
+        this.$dialog
+          .alert({
+            message: e.msg,
+            theme: "round-button",
+            confirmButtonColor: "#2DC7AA",
+          })
+          .then(() => {
+            if (browser().isApp) {
+              postMessage({
+                api: "goBack",
+              });
+            } else {
+              this.$router.back();
+            }
+          });
+        return;
+      }
+    }
+    // 设置隐藏属性和改变可见属性的事件的名称
+    var hidden, visibilityChange;
+    if (typeof document.hidden !== "undefined") {
+      // Opera 12.10 and Firefox 18 and later support
+      hidden = "hidden";
+      visibilityChange = "visibilitychange";
+    } else if (typeof document.msHidden !== "undefined") {
+      hidden = "msHidden";
+      visibilityChange = "msvisibilitychange";
+    } else if (typeof document.webkitHidden !== "undefined") {
+      hidden = "webkitHidden";
+      visibilityChange = "webkitvisibilitychange";
+    }
+
+    // 如果页面是隐藏状态，则暂停视频
+    // 如果页面是展示状态，则播放视频
+    const that = this;
+    function handleVisibilityChange() {
+      if (document[hidden]) {
+        if (audioDom) {
+          audioDom.pause();
+          that.paused = audioDom.paused;
+        }
+      }
+    }
+
+    // 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告
+    if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
+      console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
+    } else {
+      // 处理页面可见属性的改变
+      document.addEventListener(visibilityChange, handleVisibilityChange, false);
+    }
+  },
+  methods: {
+    onDetail() {
+      if (audioDom) {
+        audioDom.pause();
+        this.paused = audioDom.paused;
+      }
+      this.$router.push({
+        path: "/creation-edit",
+        query: {
+          id: this.id,
+        },
+      });
+    },
+    /** 改变播放时间 */
+    handleChangeTime(val) {
+      this.currentTime = val;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        // audioRef.value.currentTime = val;
+        audioDom.currentTime = val;
+        this.timer = null;
+      }, 60);
+    },
+
+    // 切换音频播放
+    onToggleAudio(e) {
+      e.stopPropagation();
+      if (audioDom.paused) {
+        audioDom.play();
+      } else {
+        audioDom.pause();
+      }
+
+      this.paused = audioDom.paused;
+    },
+
+    // 获取列表
+    async getStarList() {
+      try {
+        if (this.isClick) return;
+        this.isClick = true;
+        const res = await api_userMusicStarPage({
+          userMusicId: this.id,
+          ...this.params,
+        });
+        this.listState.loading = false;
+        const result = res.data || {};
+        // 处理重复请求数据
+        if (this.list.length > 0 && result.current === 1) {
+          return;
+        }
+        this.list = this.list.concat(result.rows || []);
+        this.listState.finished = result.current >= result.pages;
+        this.params.page = result.current + 1;
+        this.listState.dataShow = this.list.length > 0;
+        this.isClick = false;
+      } catch {
+        this.listState.dataShow = false;
+        this.listState.finished = true;
+        this.isClick = false;
+      }
+    },
+
+    initAudio() {
+      audioDom.src = this.musicDetail.videoUrl;
+      audioDom.load();
+      audioDom.oncanplaythrough = () => {
+        this.paused = audioDom.paused;
+        this.duration = audioDom.duration;
+      };
+      // 播放时监听
+      audioDom.addEventListener("timeupdate", () => {
+        this.duration = audioDom.duration;
+        this.currentTime = audioDom.currentTime;
+        const rate = (this.currentTime / this.duration) * 100;
+        this.audioWidth = rate > 100 ? 100 : rate;
+      });
+      audioDom.addEventListener("ended", () => {
+        this.paused = audioDom.paused;
+      });
+    },
+    // 删除作品
+    async onDelete() {
+      try {
+        await api_userMusicRemove({ id: this.id });
+
+        setTimeout(() => {
+          this.deleteStatus = false;
+          this.$toast("删除成功");
+        }, 100);
+
+        setTimeout(() => {
+          if (browser().isApp) {
+            postMessage({
+              api: "back",
+            });
+          } else {
+            this.$router.back();
+          }
+        }, 1200);
+      } catch {
+        //
+      }
+    },
+    // 下载
+    async onDownload() {
+      postMessage({
+        api: "saveFile",
+        content: {
+          url: this.musicDetail.videoUrl,
+        },
+      });
+    },
+    onDayjs(time) {
+      return dayjs(time).format("YYYY-MM-DD HH:mm");
+    },
+    getGradeCh,
+    getSecondRPM,
+    onControls(e) {
+      e.stopPropagation();
+    },
+  },
+  destory() {
+    if (audioDom) {
+      audioDom.pause();
+      this.paused = audioDom.paused;
+    }
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.creation {
+  min-height: 100vh;
+  background-color: #f8f8f8;
+}
+
+/deep/ .vjs-poster {
+  background-size: cover;
+}
+
+/deep/ .video-js .vjs-progress-control:hover .vjs-progress-holder {
+  font-size: inherit !important;
+}
+
+/deep/ .tcp-skin .vjs-play-progress {
+  background-color: #01c1b5;
+}
+
+/deep/ .video-js .vjs-slider:focus {
+  box-shadow: none !important;
+  text-shadow: none !important;
+}
+
+.playSection {
+  min-height: 1.75rem;
+}
+
+@keyframes rotateImg {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.audioSection {
+  position: relative;
+  background: url("./img/audio-banner-bg.png") no-repeat top center;
+  background-size: cover;
+  height: 1.75rem;
+
+  .audioContainer {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 1.96rem;
+    height: 0.35rem;
+    transform: translate(-50%, 0.6rem);
+
+    .waveActive,
+    .waveDefault {
+      width: 100%;
+      height: 100%;
+    }
+
+    .waveDefault {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background: url("./img/wave-1.png") no-repeat center left;
+      background-size: cover;
+    }
+
+    .waveActive {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      background: url("./img/wave-2.png") no-repeat center left;
+      background-size: cover;
+    }
+  }
+
+  .audioBox {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 50%);
+    z-index: 2;
+    width: 0.74rem;
+    height: 0.75rem;
+    background: url("./img/audio-bg.png") no-repeat center;
+    background-size: contain;
+
+    .audioPan {
+      position: absolute;
+      left: 0.08rem;
+      top: 0.06rem;
+      z-index: 8;
+      width: 0.59rem;
+      height: 0.6rem;
+      background: url("./img/audio-pan.png") no-repeat center;
+      background-size: contain;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      animation: rotateImg 6s linear infinite;
+
+      &.imgRotate {
+        animation-play-state: paused;
+      }
+    }
+
+    .audioImg {
+      width: 0.32rem;
+      height: 0.32rem;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+
+    .audioPoint {
+      position: absolute;
+      z-index: 9;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 0.08rem;
+      height: 0.08rem;
+      background: url("./img/audio-point.png") no-repeat center;
+      background-size: contain;
+    }
+
+    .audioZhen {
+      position: absolute;
+      z-index: 9;
+      right: -0.04rem;
+      top: -0.33rem;
+      width: 0.26rem;
+      height: 0.87rem;
+      background: url("./img/audio-zhen.png") no-repeat center;
+      background-size: contain;
+      transition: transform 0.5s ease-in-out;
+
+      &.active {
+        transform: rotate(92deg) translate3d(0, 0, 3px);
+        transition: transform 0.5s ease-in-out;
+      }
+    }
+  }
+}
+
+.controls {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 0.44rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-direction: row;
+  transition: all 0.5s;
+  padding: 0 0.12rem;
+
+  & > div {
+    display: flex;
+    align-items: center;
+  }
+
+  &.hide {
+    transform: translateY(100%);
+  }
+
+  .actionBtn {
+    line-height: 0;
+    margin-right: 0.04rem;
+
+    img {
+      width: 0.14rem;
+      height: 0.14rem;
+      margin-bottom: -0.02rem;
+    }
+  }
+
+  .time {
+    display: flex;
+    justify-content: space-between;
+    flex: 1;
+    min-width: 0.86rem;
+    font-size: 0.12rem;
+    color: #131415;
+    line-height: 0.2rem;
+
+    span {
+      font-size: 0.12rem;
+      padding: 0 0.01rem;
+    }
+  }
+
+  .slider {
+    width: 100%;
+    margin: 0 0.12rem;
+    // --van-slider-bar-height: 4px;
+    // --van-slider-button-width: 0.13rem !important;
+    // --van-slider-button-height: 0.13rem !important;
+    // --van-slider-inactive-background: #fff;
+    // --van-slider-inactive-background-color: #fff;
+    // --van-slider-active-background: #2DC7AA !important;
+
+    /deep/ .van-slider {
+      height: 0.04rem;
+    }
+
+    /deep/ .van-slider__button {
+      width: 0.13rem;
+      height: 0.13rem;
+    }
+
+    /deep/ .van-loading {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.userSection {
+  padding: 0.15rem 0.12rem !important;
+  background-color: transparent !important;
+
+  .userLogo {
+    width: 0.44rem;
+    height: 0.44rem;
+    border: 0.01rem solid #ffffff;
+    margin-right: 0.1rem;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+
+  .userInfo {
+    .name {
+      display: flex;
+      align-items: center;
+      font-size: 0.16rem;
+      font-weight: 500;
+      color: #333333;
+      line-height: 0.22rem;
+
+      span {
+        display: inline-block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 1rem;
+      }
+    }
+
+    .sub {
+      padding-top: 0.01rem;
+      font-size: 0.12rem;
+      color: #777777;
+      line-height: 0.17rem;
+    }
+
+    .iconMember {
+      margin-left: 0.06rem;
+      width: 0.14rem;
+      height: 0.14rem;
+    }
+  }
+
+  .zan {
+    background: #ffffff;
+    border-radius: 0.13rem;
+    font-size: 0.14rem;
+    color: #777777;
+    line-height: 0.2rem;
+    padding: 0.04rem 0.09rem 0.03rem;
+    display: inline-flex;
+    align-items: center;
+
+    &.zanActive {
+      background: #f7eeee;
+      color: #ff6a6a;
+    }
+
+    .iconZan {
+      width: 0.18rem;
+      height: 0.18rem;
+      margin-right: 0.01rem;
+    }
+  }
+}
+
+.musicSection {
+  margin: 0 0.13rem 0.12rem;
+  padding: 0.14rem 0.12rem;
+  background: #ffffff;
+  border-radius: 0.1rem;
+
+  .musicName {
+    font-size: 0.15rem;
+    font-weight: 500;
+    color: #333333;
+    line-height: 0.21rem;
+    // display: flex;
+    // align-items: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+
+    .musicTag {
+      margin-right: 0.06rem;
+      padding: 0.01rem 0.06rem;
+      font-size: 0.12rem;
+      color: #ff7b31;
+      line-height: 0.17rem;
+      background: rgba(255, 166, 115, 0.07);
+      border-radius: 0.09rem;
+      border: 0.01rem solid #ffbf9a;
+      font-weight: 400;
+      vertical-align: text-bottom;
+      display: inline-block;
+    }
+  }
+
+  .musicDesc {
+    padding-top: 0.08rem;
+    font-size: 0.14rem;
+    color: #777777;
+    line-height: 0.2rem;
+  }
+}
+
+.likeSection {
+  margin: 0 0.13rem 0.12rem;
+  background: #ffffff;
+  border-radius: 0.1rem;
+  padding: 0.1rem 0.12rem;
+  margin-bottom: calc(0.77rem + env(safe-area-inset-bottom));
+
+  .likeTitle {
+    display: flex;
+    align-items: center;
+    font-size: 0.17rem;
+    font-weight: 600;
+    color: #333333;
+    line-height: 0.24rem;
+    padding-bottom: 0.08rem;
+
+    &::before {
+      display: inline-block;
+      content: "";
+      width: 0.04rem;
+      height: 0.14rem;
+      border-radius: 0.01rem;
+      background: linear-gradient(to bottom, #59e5d5, #2dc7aa);
+      margin-right: 0.06rem;
+    }
+  }
+}
+
+.likeItem {
+  padding: 0.16rem 0;
+
+  .userLogo {
+    border-radius: 50%;
+    overflow: hidden;
+    width: 0.42rem;
+    height: 0.42rem;
+    margin-right: 0.07rem;
+  }
+
+  .userInfo {
+    .name {
+      font-size: 0.16rem;
+      font-weight: 500;
+      color: #333333;
+      line-height: 0.22rem;
+    }
+
+    .sub {
+      padding-top: 0.01rem;
+      font-size: 0.13rem;
+      color: #777777;
+      line-height: 0.18rem;
+    }
+  }
+
+  .time {
+    font-size: 0.13rem;
+    color: #777777;
+    line-height: 0.18rem;
+  }
+}
+
+.bottomSection {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff;
+  padding: 0.15rem 0.12rem calc(0.15rem + env(safe-area-inset-bottom));
+
+  .bottomShare {
+    display: flex;
+    align-items: center;
+
+    p {
+      padding: 0 0.15rem;
+      text-align: center;
+      line-height: 0;
+
+      &:first-child {
+        padding-left: 0.05rem;
+      }
+    }
+
+    img {
+      width: 0.18rem;
+      height: 0.18rem;
+    }
+
+    span {
+      padding-top: 0.08rem;
+      font-size: 0.12rem;
+      color: #333333;
+      line-height: 0.17rem;
+      display: block;
+    }
+  }
+
+  .btnEdit {
+    font-size: 0.14rem;
+    font-weight: 500;
+    background: #2dc7aa;
+    color: #ffffff;
+    line-height: 0.22rem;
+    min-width: 0.8rem;
+    height: 0.3rem;
+    border: none;
+  }
+}
+
+.popupContainer {
+  width: 80%;
+
+  .popupContent {
+    padding: 0.29rem 0 0.25rem;
+    text-align: center;
+    font-size: 0.18rem;
+    font-weight: 500;
+    color: #333333;
+    line-height: 0.25rem;
+  }
+
+  .popupBtnGroup {
+    text-align: center;
+    margin-bottom: 0.22rem;
+
+    .van-button {
+      height: 0.4rem;
+      font-size: 0.16rem;
+      font-weight: 400 !important;
+      line-height: 0.22rem;
+      min-width: 1.22rem;
+
+      &:last-child {
+        margin-left: 0.1rem;
+        background: #2dc7aa;
+        border: none;
+      }
+    }
+  }
+}
+
+.cellGroup {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.cell {
+  // display: flex;
+  // flex-direction: column;
+  width: 0.96rem;
+  margin-right: 0.18rem;
+  margin-bottom: 0.18rem;
+
+  &:nth-child(3n + 3) {
+    margin-right: 0;
+  }
+
+  .cellImg {
+    position: relative;
+    width: 0.88rem;
+    height: 0.88rem;
+
+    &::before {
+      content: "";
+      position: absolute;
+      right: -0.06rem;
+      top: 0.03rem;
+      z-index: 8;
+      width: 0.84rem;
+      height: 0.84rem;
+      background: url("./img/audio-pan.png") no-repeat center;
+      background-size: contain;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .iconZan {
+      position: absolute;
+      bottom: 0.04rem;
+      left: 0.04rem;
+      z-index: 10;
+      padding: 0.03rem;
+      background: rgba(67, 67, 67, 0.3);
+      border-radius: 0.08rem;
+      backdrop-filter: blur(0.04rem);
+
+      font-size: 0.09rem;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 0.13rem;
+      display: flex;
+      align-items: center;
+
+      &::before {
+        content: "";
+        display: inline-block;
+        width: 0.12rem;
+        height: 0.12rem;
+        background: url("./img/icon-z.png") no-repeat center;
+        background-size: contain;
+      }
+    }
+  }
+
+  .cellImage {
+    position: relative;
+    width: 0.88rem;
+    height: 0.88rem;
+    border-radius: 0.12rem;
+    overflow: hidden;
+    z-index: 9;
+
+    img {
+      border-radius: 0.12rem;
+    }
+  }
+
+  .cellTitle {
+    font-size: 0.13rem;
+    color: #131415;
+    line-height: 0.18rem;
+    margin: 0.08rem 0 0.06rem;
+  }
+
+  .users {
+    display: flex;
+    align-items: center;
+
+    .userImg {
+      width: 0.2rem;
+      height: 0.2rem;
+      border-radius: 50%;
+      overflow: hidden;
+      margin-right: 0.04rem;
+      flex-shrink: 0;
+    }
+
+    .name {
+      font-size: 0.12rem;
+      color: #402424;
+      line-height: 0.14rem;
+    }
+  }
+}
+
+.sticky-section {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+</style>

src/views/creation/index-share copy.vue

@@ -0,0 +1,1046 @@
+<template>
+  <div class="creation">
+    <div class="playSection">
+      <videoTcplayer v-if="playType === 'Video'" :src="musicDetail.videoUrl" :poster="musicDetail.videoImg || videoBg" />
+      <div class="audioSection" v-if="playType === 'Audio'">
+        <div class="audioContainer">
+          <div class="waveActive" :style="{ width: audioWidth + '%' }"></div>
+          <div class="waveDefault"></div>
+        </div>
+
+        <div class="audioBox">
+          <div :class="['audioPan', paused ? 'imgRotate' : '']">
+            <van-image class="audioImg" :src="musicDetail.img || musicBg" />
+          </div>
+          <i class="audioPoint"></i>
+          <i :class="['audioZhen', paused && 'active']"></i>
+        </div>
+        <div class="controls" @click="onControls">
+          <div class="actions">
+            <div class="actionBtn" @click="onToggleAudio">
+              <img v-if="paused" src="./img/icon-play.png" />
+              <img v-else src="./img/icon-pause.png" />
+            </div>
+          </div>
+          <div class="slider">
+            <van-slider :step="0.01" class="timeProgress" v-model="currentTime" :max="duration" @input="handleChangeTime" @drag-start="dragStatus = true" @drag-end="dragStatus = false" />
+          </div>
+          <div class="time">
+            <div>{{ getSecondRPM(currentTime) }}</div>
+            <span>/</span>
+            <div>{{ getSecondRPM(duration) }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <van-cell class="userSection" center :border="false">
+      <template #icon>
+        <van-image class="userLogo" :src="musicDetail.avatar" />
+      </template>
+      <template #title>
+        <div class="userInfo">
+          <p class="name">
+            <span>{{ musicDetail.username }}</span>
+            <img v-if="musicDetail.vipFlag" src="./img/icon-member.png" class="iconMember" />
+          </p>
+          <p class="sub">
+            {{ musicDetail.subjectName }}
+            {{ getGradeCh(musicDetail.currentGradeNum - 1) }}
+          </p>
+        </div>
+      </template>
+      <template #default>
+        <div :class="['zan', musicDetail.starFlag && 'zanActive']" @click="onStarChange">
+          <img src="./img/icon-zan-active.png" v-if="musicDetail.starFlag" class="iconZan" />
+          <img src="./img/icon-zan.png" v-else class="iconZan" />
+
+          {{ musicDetail.likeNum }}
+        </div>
+      </template>
+    </van-cell>
+
+    <div class="musicSection">
+      <div class="musicName">
+        <span class="musicTag">曲目名称</span>
+        {{ musicDetail.musicSheetName }}
+      </div>
+      <div class="musicDesc">{{ musicDetail.desc }}</div>
+    </div>
+
+    <div class="likeSection">
+      <div class="likeTitle">推荐作品</div>
+
+      <van-list v-if="listState.dataShow" class="container containerInformation" :finished="listState.finished" finished-text=" " :immediate-check="false" @load="getStarList()">
+        <div class="cellGroup">
+          <div v-for="(item, index) in list" :key="index" class="cell" @click="onDetail(item)">
+            <div class="cellImg">
+              <van-image class="cellImage" :src="item.img || musicBg" fit="cover" />
+
+              <div class="iconZan">{{ item.likeNum }}</div>
+            </div>
+            <div class="cellTitle van-ellipsis">
+              {{ item.musicSheetName }}
+            </div>
+            <div class="users">
+              <van-image :src="item.avatar" class="userImg" />
+              <span class="name">{{ item.username }}</span>
+            </div>
+          </div>
+        </div>
+      </van-list>
+
+      <MEmpty v-else msg="暂无数据" />
+    </div>
+
+    <van-popup v-model="loginStatus" style="background: transparent; overflow: inherit">
+      <LoginModel @close="() => (this.loginStatus = false)" @confirm="onConfirm" />
+    </van-popup>
+
+    <van-popup v-model="messageStatus" class="wxPopupDialog">
+      <div class="popupContainer">
+        <p class="title1">温馨提示</p>
+        <p class="popupTips">{{ message }}</p>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import dayjs from "dayjs";
+import { getSecondRPM, browser, getGradeCh } from "@/common/common";
+import videoTcplayer from "@/components/video-tcplayer";
+import MEmpty from "@/components/MEmpty";
+import { postMessage } from "@/helpers/native-message";
+import { sessionStorage as storage } from "js-storage";
+import { api_userMusicRemove, api_openUserMusicPage, api_userMusicStar, api_openUserMusicDetail } from "./api";
+import LoginModel from "./login-model";
+const audioDom = new Audio();
+audioDom.controls = true;
+audioDom.style.width = "100%";
+audioDom.className = "audio";
+export default {
+  components: { videoTcplayer, MEmpty, LoginModel },
+  data() {
+    return {
+      videoBg: require("./img/video-bg.png"),
+      musicBg: require("./img/music_bg.png"),
+      id: this.$route.query.id,
+      loginTag: false, // 是否登录标识
+      loginStatus: false,
+      playType: "", // 播放类型
+      musicDetail: {},
+      timer: null,
+      paused: true,
+      audioWidth: 0,
+      currentTime: 0,
+      duration: 0.1,
+      loop: false,
+      dragStatus: false, // 是否开始拖动
+      isClick: false,
+      list: [],
+      listState: {
+        dataShow: true, // 判断是否有数据
+        loading: false,
+        finished: false,
+      },
+      params: {
+        page: 1,
+        rows: 20,
+      },
+      messageStatus: false,
+      message: "",
+    };
+  },
+  async mounted() {
+    document.title = "作品详情";
+    this.__init();
+
+    // window.onpagehide = function() {
+    //   if (audioDom) {
+    //     audioDom.pause();
+    //     this.paused = audioDom.paused;
+    //   }
+    // };
+
+    // 设置隐藏属性和改变可见属性的事件的名称
+    var hidden, visibilityChange;
+    if (typeof document.hidden !== "undefined") {
+      // Opera 12.10 and Firefox 18 and later support
+      hidden = "hidden";
+      visibilityChange = "visibilitychange";
+    } else if (typeof document.msHidden !== "undefined") {
+      hidden = "msHidden";
+      visibilityChange = "msvisibilitychange";
+    } else if (typeof document.webkitHidden !== "undefined") {
+      hidden = "webkitHidden";
+      visibilityChange = "webkitvisibilitychange";
+    }
+
+    // 如果页面是隐藏状态，则暂停视频
+    // 如果页面是展示状态，则播放视频
+    const that = this;
+    function handleVisibilityChange() {
+      if (document[hidden]) {
+        if (audioDom) {
+          audioDom.pause();
+          that.paused = audioDom.paused;
+        }
+      }
+    }
+
+    // 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告
+    if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
+      console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
+    } else {
+      // 处理页面可见属性的改变
+      document.addEventListener(visibilityChange, handleVisibilityChange, false);
+    }
+  },
+  methods: {
+    async __init() {
+      if (!this.loginTag) {
+        storage.remove("token");
+        window.localStorage.removeItem("userInfo"); // 删除用户信息
+        window.localStorage.removeItem("Authorization"); // 删除用户信息
+      }
+      try {
+        const res = await api_openUserMusicDetail(this.id);
+
+        this.musicDetail = res.data || {};
+
+        this.getStarList();
+        // 判断是视频还是音频
+        if (res.data.videoUrl.lastIndexOf("mp4") !== -1) {
+          this.playType = "Video";
+        } else {
+          this.playType = "Audio";
+          // 初始化
+          this.$nextTick(() => {
+            this.initAudio();
+          });
+        }
+      } catch (e) {
+        //
+        if (e.code === 999) {
+          this.messageStatus = true;
+          this.message = e.msg;
+        }
+      }
+    },
+    onDetail(item) {
+      if (audioDom) {
+        audioDom.currentTime = 0;
+        audioDom.pause();
+        this.paused = audioDom.paused;
+      }
+      this.$router.push({
+        path: "/shareCreation",
+        query: {
+          id: item.id,
+        },
+      });
+    },
+    /** 改变播放时间 */
+    handleChangeTime(val) {
+      this.currentTime = val;
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        // audioRef.value.currentTime = val;
+        audioDom.currentTime = val;
+        this.timer = null;
+      }, 60);
+    },
+
+    // 切换音频播放
+    onToggleAudio(e) {
+      e.stopPropagation();
+      if (audioDom.paused) {
+        audioDom.play();
+      } else {
+        audioDom.pause();
+      }
+
+      this.paused = audioDom.paused;
+    },
+    async onStarChange() {
+      try {
+        await api_userMusicStar({
+          userMusicId: this.id,
+          star: !this.musicDetail.starFlag,
+        });
+
+        this.musicDetail.starFlag = !this.musicDetail.starFlag;
+        if (this.musicDetail.starFlag) {
+          this.musicDetail.likeNum += 1;
+        } else {
+          this.musicDetail.likeNum -= 1;
+        }
+      } catch (e) {
+        //
+        if (e.code === 403) {
+          this.loginStatus = true;
+        }
+      }
+    },
+
+    // 获取列表
+    async getStarList() {
+      try {
+        if (this.isClick) return;
+        this.isClick = true;
+        const res = await api_openUserMusicPage({
+          type: "FORMAL",
+          exclusionId: this.id,
+          sort: 1,
+          ...this.params,
+        });
+        this.listState.loading = false;
+        const result = res.data || {};
+        // 处理重复请求数据
+        if (this.list.length > 0 && result.current === 1) {
+          return;
+        }
+        this.list = this.list.concat(result.rows || []);
+        this.listState.finished = result.current >= result.pages;
+        this.params.page = result.current + 1;
+        this.listState.dataShow = this.list.length > 0;
+        this.isClick = false;
+      } catch {
+        this.listState.dataShow = false;
+        this.listState.finished = true;
+        this.isClick = false;
+      }
+    },
+
+    initAudio() {
+      audioDom.src = this.musicDetail.videoUrl;
+      audioDom.load();
+      audioDom.oncanplaythrough = () => {
+        this.paused = audioDom.paused;
+        this.duration = audioDom.duration;
+      };
+      // 播放时监听
+      audioDom.addEventListener("timeupdate", () => {
+        this.duration = audioDom.duration;
+        this.currentTime = audioDom.currentTime;
+        const rate = (this.currentTime / this.duration) * 100;
+        this.audioWidth = rate > 100 ? 100 : rate;
+      });
+      audioDom.addEventListener("ended", () => {
+        this.paused = audioDom.paused;
+      });
+    },
+    async onConfirm(val) {
+      this.loginTag = val;
+      this.loginStatus = false;
+      const { data } = await api_openUserMusicDetail(this.id);
+      this.musicDetail = data;
+    },
+    // 删除作品
+    async onDelete() {
+      try {
+        await api_userMusicRemove({ id: this.id });
+
+        setTimeout(() => {
+          this.deleteStatus = false;
+          this.$toast("删除成功");
+        }, 100);
+
+        setTimeout(() => {
+          if (browser().isApp) {
+            postMessage({
+              api: "goBack",
+            });
+          } else {
+            this.$router.back();
+          }
+        }, 1200);
+      } catch {
+        //
+      }
+    },
+    // 下载
+    async onDownload() {
+      postMessage({
+        api: "saveFile",
+        content: {
+          url: this.musicDetail.videoUrl,
+        },
+      });
+    },
+    onDayjs(time) {
+      return dayjs(time).format("YYYY-MM-DD HH:mm");
+    },
+    getGradeCh,
+    getSecondRPM,
+    onControls(e) {
+      e.stopPropagation();
+    },
+  },
+  destory() {
+    if (audioDom) {
+      audioDom.pause();
+      this.paused = audioDom.paused;
+    }
+  },
+  watch: {
+    $route(to) {
+      this.id = to.query.id;
+      this.playType = "";
+      this.params.page = 1;
+      if (audioDom) {
+        audioDom.currentTime = 0;
+        audioDom.pause();
+        this.paused = audioDom.paused;
+      }
+      this.list = [];
+      this.__init();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+.creation {
+  min-height: 100vh;
+  background-color: #f8f8f8;
+}
+
+/deep/ .vjs-poster {
+  background-size: cover;
+}
+
+/deep/ .video-js .vjs-progress-control:hover .vjs-progress-holder {
+  font-size: inherit !important;
+}
+
+/deep/ .tcp-skin .vjs-play-progress {
+  background-color: #01c1b5;
+}
+
+/deep/ .video-js .vjs-slider:focus {
+  box-shadow: none !important;
+  text-shadow: none !important;
+}
+.playSection {
+  min-height: 1.75rem;
+
+  /deep/ .vjs-poster {
+    background-size: cover;
+  }
+
+  /deep/ .video-js .vjs-progress-control:hover .vjs-progress-holder {
+    font-size: inherit !important;
+  }
+
+  /deep/ .video-js .vjs-slider:focus {
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+}
+
+@keyframes rotateImg {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.audioSection {
+  position: relative;
+  background: url("./img/audio-banner-bg.png") no-repeat top center;
+  background-size: cover;
+  height: 1.75rem;
+
+  .audioContainer {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 1.96rem;
+    height: 0.35rem;
+    transform: translate(-50%, 0.6rem);
+
+    .waveActive,
+    .waveDefault {
+      width: 100%;
+      height: 100%;
+    }
+
+    .waveDefault {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background: url("./img/wave-1.png") no-repeat center left;
+      background-size: cover;
+    }
+
+    .waveActive {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      background: url("./img/wave-2.png") no-repeat center left;
+      background-size: cover;
+    }
+  }
+
+  .audioBox {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 50%);
+    z-index: 2;
+    width: 0.74rem;
+    height: 0.75rem;
+    background: url("./img/audio-bg.png") no-repeat center;
+    background-size: contain;
+
+    .audioPan {
+      position: absolute;
+      left: 0.08rem;
+      top: 0.06rem;
+      z-index: 8;
+      width: 0.59rem;
+      height: 0.6rem;
+      background: url("./img/audio-pan.png") no-repeat center;
+      background-size: contain;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      animation: rotateImg 6s linear infinite;
+
+      &.imgRotate {
+        animation-play-state: paused;
+      }
+    }
+
+    .audioImg {
+      width: 0.32rem;
+      height: 0.32rem;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+
+    .audioPoint {
+      position: absolute;
+      z-index: 9;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 0.08rem;
+      height: 0.08rem;
+      background: url("./img/audio-point.png") no-repeat center;
+      background-size: contain;
+    }
+
+    .audioZhen {
+      position: absolute;
+      z-index: 9;
+      right: -0.04rem;
+      top: -0.33rem;
+      width: 0.26rem;
+      height: 0.87rem;
+      background: url("./img/audio-zhen.png") no-repeat center;
+      background-size: contain;
+      transition: transform 0.5s ease-in-out;
+
+      &.active {
+        transform: rotate(92deg) translate3d(0, 0, 3px);
+        transition: transform 0.5s ease-in-out;
+      }
+    }
+  }
+}
+
+.controls {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 0.44rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-direction: row;
+  transition: all 0.5s;
+  padding: 0 0.12rem;
+
+  & > div {
+    display: flex;
+    align-items: center;
+  }
+
+  &.hide {
+    transform: translateY(100%);
+  }
+
+  .actionBtn {
+    line-height: 0;
+    margin-right: 0.04rem;
+
+    img {
+      width: 0.14rem;
+      height: 0.14rem;
+      margin-bottom: -0.02rem;
+    }
+  }
+
+  .time {
+    display: flex;
+    justify-content: space-between;
+    flex: 1;
+    min-width: 0.86rem;
+    font-size: 0.12rem;
+    color: #131415;
+    line-height: 0.2rem;
+
+    span {
+      font-size: 0.12rem;
+      padding: 0 0.01rem;
+    }
+  }
+
+  .slider {
+    width: 100%;
+    margin: 0 0.12rem;
+    // --van-slider-bar-height: 4px;
+    // --van-slider-button-width: 0.13rem !important;
+    // --van-slider-button-height: 0.13rem !important;
+    // --van-slider-inactive-background: #fff;
+    // --van-slider-inactive-background-color: #fff;
+    // --van-slider-active-background: #2DC7AA !important;
+
+    /deep/ .van-slider {
+      height: 0.04rem;
+    }
+
+    /deep/ .van-slider__button {
+      width: 0.13rem;
+      height: 0.13rem;
+    }
+
+    /deep/ .van-loading {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.userSection {
+  padding: 0.15rem 0.12rem !important;
+  background-color: transparent !important;
+
+  .userLogo {
+    width: 0.44rem;
+    height: 0.44rem;
+    border: 0.01rem solid #ffffff;
+    margin-right: 0.1rem;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+
+  .userInfo {
+    .name {
+      display: flex;
+      align-items: center;
+      font-size: 0.16rem;
+      font-weight: 500;
+      color: #333333;
+      line-height: 0.22rem;
+
+      span {
+        display: inline-block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 1rem;
+      }
+    }
+
+    .sub {
+      padding-top: 0.01rem;
+      font-size: 0.12rem;
+      color: #777777;
+      line-height: 0.17rem;
+    }
+
+    .iconMember {
+      margin-left: 0.06rem;
+      width: 0.14rem;
+      height: 0.14rem;
+    }
+  }
+
+  .zan {
+    background: #ffffff;
+    border-radius: 0.13rem;
+    font-size: 0.14rem;
+    color: #777777;
+    line-height: 0.2rem;
+    padding: 0.04rem 0.09rem 0.03rem;
+    display: inline-flex;
+    align-items: center;
+
+    &.zanActive {
+      background: #f7eeee;
+      color: #ff6a6a;
+    }
+
+    .iconZan {
+      width: 0.18rem;
+      height: 0.18rem;
+      margin-right: 0.01rem;
+    }
+  }
+}
+
+.musicSection {
+  margin: 0 0.13rem 0.12rem;
+  padding: 0.14rem 0.12rem;
+  background: #ffffff;
+  border-radius: 0.1rem;
+
+  .musicName {
+    font-size: 0.15rem;
+    font-weight: 500;
+    color: #333333;
+    line-height: 0.21rem;
+    // display: flex;
+    // align-items: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+
+    .musicTag {
+      margin-right: 0.06rem;
+      padding: 0.01rem 0.06rem;
+      font-size: 0.12rem;
+      color: #ff7b31;
+      line-height: 0.17rem;
+      background: rgba(255, 166, 115, 0.07);
+      border-radius: 0.09rem;
+      border: 0.01rem solid #ffbf9a;
+      font-weight: 400;
+      vertical-align: text-bottom;
+      display: inline-block;
+    }
+  }
+
+  .musicDesc {
+    padding-top: 0.08rem;
+    font-size: 0.14rem;
+    color: #777777;
+    line-height: 0.2rem;
+  }
+}
+
+.likeSection {
+  margin: 0 0.13rem 0.12rem;
+  background: #ffffff;
+  border-radius: 0.1rem;
+  padding: 0.1rem 0.12rem;
+
+  .likeTitle {
+    display: flex;
+    align-items: center;
+    font-size: 0.17rem;
+    font-weight: 600;
+    color: #333333;
+    line-height: 0.24rem;
+    padding-bottom: 0.08rem;
+
+    &::before {
+      display: inline-block;
+      content: "";
+      width: 0.04rem;
+      height: 0.14rem;
+      border-radius: 0.01rem;
+      background: linear-gradient(to bottom, #59e5d5, #2dc7aa);
+      margin-right: 0.06rem;
+    }
+  }
+}
+
+.likeItem {
+  padding: 0.16rem 0;
+
+  .userLogo {
+    border-radius: 50%;
+    overflow: hidden;
+    width: 0.42rem;
+    height: 0.42rem;
+    margin-right: 0.07rem;
+  }
+
+  .userInfo {
+    .name {
+      font-size: 0.16rem;
+      font-weight: 500;
+      color: #333333;
+      line-height: 0.22rem;
+    }
+
+    .sub {
+      padding-top: 0.01rem;
+      font-size: 0.13rem;
+      color: #777777;
+      line-height: 0.18rem;
+    }
+  }
+
+  .time {
+    font-size: 0.13rem;
+    color: #777777;
+    line-height: 0.18rem;
+  }
+}
+
+.bottomSection {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff;
+  padding: 0.15rem 0.12rem calc(0.15rem + env(safe-area-inset-bottom));
+
+  .bottomShare {
+    display: flex;
+    align-items: center;
+
+    p {
+      padding: 0 0.15rem;
+      text-align: center;
+      line-height: 0;
+
+      &:first-child {
+        padding-left: 0.05rem;
+      }
+    }
+
+    img {
+      width: 0.18rem;
+      height: 0.18rem;
+    }
+
+    span {
+      padding-top: 0.08rem;
+      font-size: 0.12rem;
+      color: #333333;
+      line-height: 0.17rem;
+      display: block;
+    }
+  }
+
+  .btnEdit {
+    font-size: 0.14rem;
+    font-weight: 500;
+    background: #2dc7aa;
+    color: #ffffff;
+    line-height: 0.22rem;
+    min-width: 0.8rem;
+    height: 0.3rem;
+    border: none;
+  }
+}
+
+.popupContainer {
+  width: 80%;
+
+  .popupContent {
+    padding: 0.29rem 0 0.25rem;
+    text-align: center;
+    font-size: 0.18rem;
+    font-weight: 500;
+    color: #333333;
+    line-height: 0.25rem;
+  }
+
+  .popupBtnGroup {
+    text-align: center;
+    margin-bottom: 0.22rem;
+
+    .van-button {
+      height: 0.4rem;
+      font-size: 0.16rem;
+      font-weight: 400 !important;
+      line-height: 0.22rem;
+      min-width: 1.22rem;
+
+      &:last-child {
+        margin-left: 0.1rem;
+        background: #2dc7aa;
+        border: none;
+      }
+    }
+  }
+}
+
+.cellGroup {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.cell {
+  // display: flex;
+  // flex-direction: column;
+  width: 0.96rem;
+  margin-right: 0.18rem;
+  margin-bottom: 0.18rem;
+
+  &:nth-child(3n + 3) {
+    margin-right: 0;
+  }
+
+  .cellImg {
+    position: relative;
+    width: 0.88rem;
+    height: 0.88rem;
+
+    &::before {
+      content: "";
+      position: absolute;
+      right: -0.06rem;
+      top: 0.03rem;
+      z-index: 8;
+      width: 0.84rem;
+      height: 0.84rem;
+      background: url("./img/audio-pan.png") no-repeat center;
+      background-size: contain;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .iconZan {
+      position: absolute;
+      bottom: 0.04rem;
+      left: 0.04rem;
+      z-index: 10;
+      padding: 0.03rem;
+      background: rgba(67, 67, 67, 0.3);
+      border-radius: 0.08rem;
+      backdrop-filter: blur(0.04rem);
+
+      font-size: 0.09rem;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 0.13rem;
+      display: flex;
+      align-items: center;
+
+      &::before {
+        content: "";
+        display: inline-block;
+        width: 0.12rem;
+        height: 0.12rem;
+        background: url("./img/icon-z.png") no-repeat center;
+        background-size: contain;
+      }
+    }
+  }
+
+  .cellImage {
+    position: relative;
+    width: 0.88rem;
+    height: 0.88rem;
+    border-radius: 0.12rem;
+    overflow: hidden;
+    z-index: 9;
+
+    img {
+      border-radius: 0.12rem;
+    }
+  }
+
+  .cellTitle {
+    font-size: 0.13rem;
+    color: #131415;
+    line-height: 0.18rem;
+    margin: 0.08rem 0 0.06rem;
+  }
+
+  .users {
+    display: flex;
+    align-items: center;
+
+    .userImg {
+      width: 0.2rem;
+      height: 0.2rem;
+      border-radius: 50%;
+      overflow: hidden;
+      margin-right: 0.04rem;
+      flex-shrink: 0;
+    }
+
+    .name {
+      font-size: 0.12rem;
+      color: #402424;
+      line-height: 0.14rem;
+    }
+  }
+}
+
+.sticky-section {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.wxPopupDialog {
+  // position: relative;
+  overflow: initial;
+  width: 88%;
+  background: transparent;
+
+  // margin-top: -160px;
+  &::before {
+    position: absolute;
+    content: " ";
+    top: -0.2rem;
+    left: 50%;
+    margin-left: -0.51rem;
+    display: inline-block;
+    background: url("./img/wx-no-top.png") no-repeat top center;
+    background-size: contain;
+    width: 1.02rem;
+    height: 0.84rem;
+  }
+}
+
+.popupContainer {
+  background: url("./img/wx-no-bg.png") no-repeat top center #fff;
+  background-size: cover;
+  border-radius: 0.2rem;
+  overflow: hidden;
+  padding-bottom: 0.16rem;
+  text-align: center;
+  width: 100%;
+
+  .title1 {
+    padding-top: 0.57rem;
+    text-align: center;
+    font-size: 0.18rem;
+    font-weight: 500;
+    color: #3b2300;
+  }
+
+  .popupTips {
+    padding-top: 0.16rem;
+    padding-bottom: 0.16rem;
+    text-align: center;
+    font-size: 0.15rem;
+    color: #777777;
+    line-height: 0.21rem;
+  }
+
+  .button {
+    padding: 0 0.32rem;
+    height: 0.3rem;
+    font-size: 0.16rem;
+    font-size: 0.14rem;
+    color: #777;
+    border-color: #e7e7e7;
+  }
+}
+</style>

src/views/creation/index-share.vue

@@ -1,1046 +1,13 @@
 <template>
-  <div class="creation">
-    <div class="playSection">
-      <videoTcplayer v-if="playType === 'Video'" :src="musicDetail.videoUrl" :poster="musicDetail.videoImg || videoBg" />
-      <div class="audioSection" v-if="playType === 'Audio'">
-        <div class="audioContainer">
-          <div class="waveActive" :style="{ width: audioWidth + '%' }"></div>
-          <div class="waveDefault"></div>
-        </div>
-
-        <div class="audioBox">
-          <div :class="['audioPan', paused ? 'imgRotate' : '']">
-            <van-image class="audioImg" :src="musicDetail.img || musicBg" />
-          </div>
-          <i class="audioPoint"></i>
-          <i :class="['audioZhen', paused && 'active']"></i>
-        </div>
-        <div class="controls" @click="onControls">
-          <div class="actions">
-            <div class="actionBtn" @click="onToggleAudio">
-              <img v-if="paused" src="./img/icon-play.png" />
-              <img v-else src="./img/icon-pause.png" />
-            </div>
-          </div>
-          <div class="slider">
-            <van-slider :step="0.01" class="timeProgress" v-model="currentTime" :max="duration" @input="handleChangeTime" @drag-start="dragStatus = true" @drag-end="dragStatus = false" />
-          </div>
-          <div class="time">
-            <div>{{ getSecondRPM(currentTime) }}</div>
-            <span>/</span>
-            <div>{{ getSecondRPM(duration) }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <van-cell class="userSection" center :border="false">
-      <template #icon>
-        <van-image class="userLogo" :src="musicDetail.avatar" />
-      </template>
-      <template #title>
-        <div class="userInfo">
-          <p class="name">
-            <span>{{ musicDetail.username }}</span>
-            <img v-if="musicDetail.vipFlag" src="./img/icon-member.png" class="iconMember" />
-          </p>
-          <p class="sub">
-            {{ musicDetail.subjectName }}
-            {{ getGradeCh(musicDetail.currentGradeNum - 1) }}
-          </p>
-        </div>
-      </template>
-      <template #default>
-        <div :class="['zan', musicDetail.starFlag && 'zanActive']" @click="onStarChange">
-          <img src="./img/icon-zan-active.png" v-if="musicDetail.starFlag" class="iconZan" />
-          <img src="./img/icon-zan.png" v-else class="iconZan" />
-
-          {{ musicDetail.likeNum }}
-        </div>
-      </template>
-    </van-cell>
-
-    <div class="musicSection">
-      <div class="musicName">
-        <span class="musicTag">曲目名称</span>
-        {{ musicDetail.musicSheetName }}
-      </div>
-      <div class="musicDesc">{{ musicDetail.desc }}</div>
-    </div>
-
-    <div class="likeSection">
-      <div class="likeTitle">推荐作品</div>
-
-      <van-list v-if="listState.dataShow" class="container containerInformation" :finished="listState.finished" finished-text=" " :immediate-check="false" @load="getStarList()">
-        <div class="cellGroup">
-          <div v-for="(item, index) in list" :key="index" class="cell" @click="onDetail(item)">
-            <div class="cellImg">
-              <van-image class="cellImage" :src="item.img || musicBg" fit="cover" />
-
-              <div class="iconZan">{{ item.likeNum }}</div>
-            </div>
-            <div class="cellTitle van-ellipsis">
-              {{ item.musicSheetName }}
-            </div>
-            <div class="users">
-              <van-image :src="item.avatar" class="userImg" />
-              <span class="name">{{ item.username }}</span>
-            </div>
-          </div>
-        </div>
-      </van-list>
-
-      <MEmpty v-else msg="暂无数据" />
-    </div>
-
-    <van-popup v-model="loginStatus" style="background: transparent; overflow: inherit">
-      <LoginModel @close="() => (this.loginStatus = false)" @confirm="onConfirm" />
-    </van-popup>
-
-    <van-popup v-model="messageStatus" class="wxPopupDialog">
-      <div class="popupContainer">
-        <p class="title1">温馨提示</p>
-        <p class="popupTips">{{ message }}</p>
-      </div>
-    </van-popup>
-  </div>
+   <indexShareRoute :key="$route.fullPath" />
 </template>
 
 <script>
-import dayjs from "dayjs";
-import { getSecondRPM, browser, getGradeCh } from "@/common/common";
-import videoTcplayer from "@/components/video-tcplayer";
-import MEmpty from "@/components/MEmpty";
-import { postMessage } from "@/helpers/native-message";
-import { sessionStorage as storage } from "js-storage";
-import { api_userMusicRemove, api_openUserMusicPage, api_userMusicStar, api_openUserMusicDetail } from "./api";
-import LoginModel from "./login-model";
-const audioDom = new Audio();
-audioDom.controls = true;
-audioDom.style.width = "100%";
-audioDom.className = "audio";
+import indexShareRoute from "./index-shareRoute"
 export default {
-  components: { videoTcplayer, MEmpty, LoginModel },
-  data() {
-    return {
-      videoBg: require("./img/video-bg.png"),
-      musicBg: require("./img/music_bg.png"),
-      id: this.$route.query.id,
-      loginTag: false, // 是否登录标识
-      loginStatus: false,
-      playType: "", // 播放类型
-      musicDetail: {},
-      timer: null,
-      paused: true,
-      audioWidth: 0,
-      currentTime: 0,
-      duration: 0.1,
-      loop: false,
-      dragStatus: false, // 是否开始拖动
-      isClick: false,
-      list: [],
-      listState: {
-        dataShow: true, // 判断是否有数据
-        loading: false,
-        finished: false,
-      },
-      params: {
-        page: 1,
-        rows: 20,
-      },
-      messageStatus: false,
-      message: "",
-    };
-  },
-  async mounted() {
-    document.title = "作品详情";
-    this.__init();
-
-    // window.onpagehide = function() {
-    //   if (audioDom) {
-    //     audioDom.pause();
-    //     this.paused = audioDom.paused;
-    //   }
-    // };
-
-    // 设置隐藏属性和改变可见属性的事件的名称
-    var hidden, visibilityChange;
-    if (typeof document.hidden !== "undefined") {
-      // Opera 12.10 and Firefox 18 and later support
-      hidden = "hidden";
-      visibilityChange = "visibilitychange";
-    } else if (typeof document.msHidden !== "undefined") {
-      hidden = "msHidden";
-      visibilityChange = "msvisibilitychange";
-    } else if (typeof document.webkitHidden !== "undefined") {
-      hidden = "webkitHidden";
-      visibilityChange = "webkitvisibilitychange";
-    }
-
-    // 如果页面是隐藏状态，则暂停视频
-    // 如果页面是展示状态，则播放视频
-    const that = this;
-    function handleVisibilityChange() {
-      if (document[hidden]) {
-        if (audioDom) {
-          audioDom.pause();
-          that.paused = audioDom.paused;
-        }
-      }
-    }
-
-    // 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告
-    if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
-      console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
-    } else {
-      // 处理页面可见属性的改变
-      document.addEventListener(visibilityChange, handleVisibilityChange, false);
-    }
-  },
-  methods: {
-    async __init() {
-      if (!this.loginTag) {
-        storage.remove("token");
-        window.localStorage.removeItem("userInfo"); // 删除用户信息
-        window.localStorage.removeItem("Authorization"); // 删除用户信息
-      }
-      try {
-        const res = await api_openUserMusicDetail(this.id);
-
-        this.musicDetail = res.data || {};
-
-        this.getStarList();
-        // 判断是视频还是音频
-        if (res.data.videoUrl.lastIndexOf("mp4") !== -1) {
-          this.playType = "Video";
-        } else {
-          this.playType = "Audio";
-          // 初始化
-          this.$nextTick(() => {
-            this.initAudio();
-          });
-        }
-      } catch (e) {
-        //
-        if (e.code === 999) {
-          this.messageStatus = true;
-          this.message = e.msg;
-        }
-      }
-    },
-    onDetail(item) {
-      if (audioDom) {
-        audioDom.currentTime = 0;
-        audioDom.pause();
-        this.paused = audioDom.paused;
-      }
-      this.$router.push({
-        path: "/shareCreation",
-        query: {
-          id: item.id,
-        },
-      });
-    },
-    /** 改变播放时间 */
-    handleChangeTime(val) {
-      this.currentTime = val;
-      clearTimeout(this.timer);
-      this.timer = setTimeout(() => {
-        // audioRef.value.currentTime = val;
-        audioDom.currentTime = val;
-        this.timer = null;
-      }, 60);
-    },
-
-    // 切换音频播放
-    onToggleAudio(e) {
-      e.stopPropagation();
-      if (audioDom.paused) {
-        audioDom.play();
-      } else {
-        audioDom.pause();
-      }
-
-      this.paused = audioDom.paused;
-    },
-    async onStarChange() {
-      try {
-        await api_userMusicStar({
-          userMusicId: this.id,
-          star: !this.musicDetail.starFlag,
-        });
-
-        this.musicDetail.starFlag = !this.musicDetail.starFlag;
-        if (this.musicDetail.starFlag) {
-          this.musicDetail.likeNum += 1;
-        } else {
-          this.musicDetail.likeNum -= 1;
-        }
-      } catch (e) {
-        //
-        if (e.code === 403) {
-          this.loginStatus = true;
-        }
-      }
-    },
-
-    // 获取列表
-    async getStarList() {
-      try {
-        if (this.isClick) return;
-        this.isClick = true;
-        const res = await api_openUserMusicPage({
-          type: "FORMAL",
-          exclusionId: this.id,
-          sort: 1,
-          ...this.params,
-        });
-        this.listState.loading = false;
-        const result = res.data || {};
-        // 处理重复请求数据
-        if (this.list.length > 0 && result.current === 1) {
-          return;
-        }
-        this.list = this.list.concat(result.rows || []);
-        this.listState.finished = result.current >= result.pages;
-        this.params.page = result.current + 1;
-        this.listState.dataShow = this.list.length > 0;
-        this.isClick = false;
-      } catch {
-        this.listState.dataShow = false;
-        this.listState.finished = true;
-        this.isClick = false;
-      }
-    },
-
-    initAudio() {
-      audioDom.src = this.musicDetail.videoUrl;
-      audioDom.load();
-      audioDom.oncanplaythrough = () => {
-        this.paused = audioDom.paused;
-        this.duration = audioDom.duration;
-      };
-      // 播放时监听
-      audioDom.addEventListener("timeupdate", () => {
-        this.duration = audioDom.duration;
-        this.currentTime = audioDom.currentTime;
-        const rate = (this.currentTime / this.duration) * 100;
-        this.audioWidth = rate > 100 ? 100 : rate;
-      });
-      audioDom.addEventListener("ended", () => {
-        this.paused = audioDom.paused;
-      });
-    },
-    async onConfirm(val) {
-      this.loginTag = val;
-      this.loginStatus = false;
-      const { data } = await api_openUserMusicDetail(this.id);
-      this.musicDetail = data;
-    },
-    // 删除作品
-    async onDelete() {
-      try {
-        await api_userMusicRemove({ id: this.id });
-
-        setTimeout(() => {
-          this.deleteStatus = false;
-          this.$toast("删除成功");
-        }, 100);
-
-        setTimeout(() => {
-          if (browser().isApp) {
-            postMessage({
-              api: "goBack",
-            });
-          } else {
-            this.$router.back();
-          }
-        }, 1200);
-      } catch {
-        //
-      }
-    },
-    // 下载
-    async onDownload() {
-      postMessage({
-        api: "saveFile",
-        content: {
-          url: this.musicDetail.videoUrl,
-        },
-      });
-    },
-    onDayjs(time) {
-      return dayjs(time).format("YYYY-MM-DD HH:mm");
-    },
-    getGradeCh,
-    getSecondRPM,
-    onControls(e) {
-      e.stopPropagation();
-    },
-  },
-  destory() {
-    if (audioDom) {
-      audioDom.pause();
-      this.paused = audioDom.paused;
-    }
-  },
-  watch: {
-    $route(to) {
-      this.id = to.query.id;
-      this.playType = "";
-      this.params.page = 1;
-      if (audioDom) {
-        audioDom.currentTime = 0;
-        audioDom.pause();
-        this.paused = audioDom.paused;
-      }
-      this.list = [];
-      this.__init();
-    },
-  },
-};
-</script>
-
-<style scoped lang="less">
-.creation {
-  min-height: 100vh;
-  background-color: #f8f8f8;
-}
-
-/deep/ .vjs-poster {
-  background-size: cover;
-}
-
-/deep/ .video-js .vjs-progress-control:hover .vjs-progress-holder {
-  font-size: inherit !important;
-}
-
-/deep/ .tcp-skin .vjs-play-progress {
-  background-color: #01c1b5;
-}
-
-/deep/ .video-js .vjs-slider:focus {
-  box-shadow: none !important;
-  text-shadow: none !important;
+   name: "index-share",
+   components: {
+      indexShareRoute
+   }
 }
-.playSection {
-  min-height: 1.75rem;
-
-  /deep/ .vjs-poster {
-    background-size: cover;
-  }
-
-  /deep/ .video-js .vjs-progress-control:hover .vjs-progress-holder {
-    font-size: inherit !important;
-  }
-
-  /deep/ .video-js .vjs-slider:focus {
-    box-shadow: none !important;
-    text-shadow: none !important;
-  }
-}
-
-@keyframes rotateImg {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.audioSection {
-  position: relative;
-  background: url("./img/audio-banner-bg.png") no-repeat top center;
-  background-size: cover;
-  height: 1.75rem;
-
-  .audioContainer {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    width: 1.96rem;
-    height: 0.35rem;
-    transform: translate(-50%, 0.6rem);
-
-    .waveActive,
-    .waveDefault {
-      width: 100%;
-      height: 100%;
-    }
-
-    .waveDefault {
-      position: absolute;
-      top: 0;
-      left: 0;
-      background: url("./img/wave-1.png") no-repeat center left;
-      background-size: cover;
-    }
-
-    .waveActive {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 1;
-      background: url("./img/wave-2.png") no-repeat center left;
-      background-size: cover;
-    }
-  }
-
-  .audioBox {
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, 50%);
-    z-index: 2;
-    width: 0.74rem;
-    height: 0.75rem;
-    background: url("./img/audio-bg.png") no-repeat center;
-    background-size: contain;
-
-    .audioPan {
-      position: absolute;
-      left: 0.08rem;
-      top: 0.06rem;
-      z-index: 8;
-      width: 0.59rem;
-      height: 0.6rem;
-      background: url("./img/audio-pan.png") no-repeat center;
-      background-size: contain;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      animation: rotateImg 6s linear infinite;
-
-      &.imgRotate {
-        animation-play-state: paused;
-      }
-    }
-
-    .audioImg {
-      width: 0.32rem;
-      height: 0.32rem;
-      border-radius: 50%;
-      overflow: hidden;
-    }
-
-    .audioPoint {
-      position: absolute;
-      z-index: 9;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      width: 0.08rem;
-      height: 0.08rem;
-      background: url("./img/audio-point.png") no-repeat center;
-      background-size: contain;
-    }
-
-    .audioZhen {
-      position: absolute;
-      z-index: 9;
-      right: -0.04rem;
-      top: -0.33rem;
-      width: 0.26rem;
-      height: 0.87rem;
-      background: url("./img/audio-zhen.png") no-repeat center;
-      background-size: contain;
-      transition: transform 0.5s ease-in-out;
-
-      &.active {
-        transform: rotate(92deg) translate3d(0, 0, 3px);
-        transition: transform 0.5s ease-in-out;
-      }
-    }
-  }
-}
-
-.controls {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  height: 0.44rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  flex-direction: row;
-  transition: all 0.5s;
-  padding: 0 0.12rem;
-
-  & > div {
-    display: flex;
-    align-items: center;
-  }
-
-  &.hide {
-    transform: translateY(100%);
-  }
-
-  .actionBtn {
-    line-height: 0;
-    margin-right: 0.04rem;
-
-    img {
-      width: 0.14rem;
-      height: 0.14rem;
-      margin-bottom: -0.02rem;
-    }
-  }
-
-  .time {
-    display: flex;
-    justify-content: space-between;
-    flex: 1;
-    min-width: 0.86rem;
-    font-size: 0.12rem;
-    color: #131415;
-    line-height: 0.2rem;
-
-    span {
-      font-size: 0.12rem;
-      padding: 0 0.01rem;
-    }
-  }
-
-  .slider {
-    width: 100%;
-    margin: 0 0.12rem;
-    // --van-slider-bar-height: 4px;
-    // --van-slider-button-width: 0.13rem !important;
-    // --van-slider-button-height: 0.13rem !important;
-    // --van-slider-inactive-background: #fff;
-    // --van-slider-inactive-background-color: #fff;
-    // --van-slider-active-background: #2DC7AA !important;
-
-    /deep/ .van-slider {
-      height: 0.04rem;
-    }
-
-    /deep/ .van-slider__button {
-      width: 0.13rem;
-      height: 0.13rem;
-    }
-
-    /deep/ .van-loading {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-
-.userSection {
-  padding: 0.15rem 0.12rem !important;
-  background-color: transparent !important;
-
-  .userLogo {
-    width: 0.44rem;
-    height: 0.44rem;
-    border: 0.01rem solid #ffffff;
-    margin-right: 0.1rem;
-    border-radius: 50%;
-    overflow: hidden;
-  }
-
-  .userInfo {
-    .name {
-      display: flex;
-      align-items: center;
-      font-size: 0.16rem;
-      font-weight: 500;
-      color: #333333;
-      line-height: 0.22rem;
-
-      span {
-        display: inline-block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 1rem;
-      }
-    }
-
-    .sub {
-      padding-top: 0.01rem;
-      font-size: 0.12rem;
-      color: #777777;
-      line-height: 0.17rem;
-    }
-
-    .iconMember {
-      margin-left: 0.06rem;
-      width: 0.14rem;
-      height: 0.14rem;
-    }
-  }
-
-  .zan {
-    background: #ffffff;
-    border-radius: 0.13rem;
-    font-size: 0.14rem;
-    color: #777777;
-    line-height: 0.2rem;
-    padding: 0.04rem 0.09rem 0.03rem;
-    display: inline-flex;
-    align-items: center;
-
-    &.zanActive {
-      background: #f7eeee;
-      color: #ff6a6a;
-    }
-
-    .iconZan {
-      width: 0.18rem;
-      height: 0.18rem;
-      margin-right: 0.01rem;
-    }
-  }
-}
-
-.musicSection {
-  margin: 0 0.13rem 0.12rem;
-  padding: 0.14rem 0.12rem;
-  background: #ffffff;
-  border-radius: 0.1rem;
-
-  .musicName {
-    font-size: 0.15rem;
-    font-weight: 500;
-    color: #333333;
-    line-height: 0.21rem;
-    // display: flex;
-    // align-items: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 100%;
-
-    .musicTag {
-      margin-right: 0.06rem;
-      padding: 0.01rem 0.06rem;
-      font-size: 0.12rem;
-      color: #ff7b31;
-      line-height: 0.17rem;
-      background: rgba(255, 166, 115, 0.07);
-      border-radius: 0.09rem;
-      border: 0.01rem solid #ffbf9a;
-      font-weight: 400;
-      vertical-align: text-bottom;
-      display: inline-block;
-    }
-  }
-
-  .musicDesc {
-    padding-top: 0.08rem;
-    font-size: 0.14rem;
-    color: #777777;
-    line-height: 0.2rem;
-  }
-}
-
-.likeSection {
-  margin: 0 0.13rem 0.12rem;
-  background: #ffffff;
-  border-radius: 0.1rem;
-  padding: 0.1rem 0.12rem;
-
-  .likeTitle {
-    display: flex;
-    align-items: center;
-    font-size: 0.17rem;
-    font-weight: 600;
-    color: #333333;
-    line-height: 0.24rem;
-    padding-bottom: 0.08rem;
-
-    &::before {
-      display: inline-block;
-      content: "";
-      width: 0.04rem;
-      height: 0.14rem;
-      border-radius: 0.01rem;
-      background: linear-gradient(to bottom, #59e5d5, #2dc7aa);
-      margin-right: 0.06rem;
-    }
-  }
-}
-
-.likeItem {
-  padding: 0.16rem 0;
-
-  .userLogo {
-    border-radius: 50%;
-    overflow: hidden;
-    width: 0.42rem;
-    height: 0.42rem;
-    margin-right: 0.07rem;
-  }
-
-  .userInfo {
-    .name {
-      font-size: 0.16rem;
-      font-weight: 500;
-      color: #333333;
-      line-height: 0.22rem;
-    }
-
-    .sub {
-      padding-top: 0.01rem;
-      font-size: 0.13rem;
-      color: #777777;
-      line-height: 0.18rem;
-    }
-  }
-
-  .time {
-    font-size: 0.13rem;
-    color: #777777;
-    line-height: 0.18rem;
-  }
-}
-
-.bottomSection {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: #fff;
-  padding: 0.15rem 0.12rem calc(0.15rem + env(safe-area-inset-bottom));
-
-  .bottomShare {
-    display: flex;
-    align-items: center;
-
-    p {
-      padding: 0 0.15rem;
-      text-align: center;
-      line-height: 0;
-
-      &:first-child {
-        padding-left: 0.05rem;
-      }
-    }
-
-    img {
-      width: 0.18rem;
-      height: 0.18rem;
-    }
-
-    span {
-      padding-top: 0.08rem;
-      font-size: 0.12rem;
-      color: #333333;
-      line-height: 0.17rem;
-      display: block;
-    }
-  }
-
-  .btnEdit {
-    font-size: 0.14rem;
-    font-weight: 500;
-    background: #2dc7aa;
-    color: #ffffff;
-    line-height: 0.22rem;
-    min-width: 0.8rem;
-    height: 0.3rem;
-    border: none;
-  }
-}
-
-.popupContainer {
-  width: 80%;
-
-  .popupContent {
-    padding: 0.29rem 0 0.25rem;
-    text-align: center;
-    font-size: 0.18rem;
-    font-weight: 500;
-    color: #333333;
-    line-height: 0.25rem;
-  }
-
-  .popupBtnGroup {
-    text-align: center;
-    margin-bottom: 0.22rem;
-
-    .van-button {
-      height: 0.4rem;
-      font-size: 0.16rem;
-      font-weight: 400 !important;
-      line-height: 0.22rem;
-      min-width: 1.22rem;
-
-      &:last-child {
-        margin-left: 0.1rem;
-        background: #2dc7aa;
-        border: none;
-      }
-    }
-  }
-}
-
-.cellGroup {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.cell {
-  // display: flex;
-  // flex-direction: column;
-  width: 0.96rem;
-  margin-right: 0.18rem;
-  margin-bottom: 0.18rem;
-
-  &:nth-child(3n + 3) {
-    margin-right: 0;
-  }
-
-  .cellImg {
-    position: relative;
-    width: 0.88rem;
-    height: 0.88rem;
-
-    &::before {
-      content: "";
-      position: absolute;
-      right: -0.06rem;
-      top: 0.03rem;
-      z-index: 8;
-      width: 0.84rem;
-      height: 0.84rem;
-      background: url("./img/audio-pan.png") no-repeat center;
-      background-size: contain;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .iconZan {
-      position: absolute;
-      bottom: 0.04rem;
-      left: 0.04rem;
-      z-index: 10;
-      padding: 0.03rem;
-      background: rgba(67, 67, 67, 0.3);
-      border-radius: 0.08rem;
-      backdrop-filter: blur(0.04rem);
-
-      font-size: 0.09rem;
-      font-weight: 500;
-      color: #ffffff;
-      line-height: 0.13rem;
-      display: flex;
-      align-items: center;
-
-      &::before {
-        content: "";
-        display: inline-block;
-        width: 0.12rem;
-        height: 0.12rem;
-        background: url("./img/icon-z.png") no-repeat center;
-        background-size: contain;
-      }
-    }
-  }
-
-  .cellImage {
-    position: relative;
-    width: 0.88rem;
-    height: 0.88rem;
-    border-radius: 0.12rem;
-    overflow: hidden;
-    z-index: 9;
-
-    img {
-      border-radius: 0.12rem;
-    }
-  }
-
-  .cellTitle {
-    font-size: 0.13rem;
-    color: #131415;
-    line-height: 0.18rem;
-    margin: 0.08rem 0 0.06rem;
-  }
-
-  .users {
-    display: flex;
-    align-items: center;
-
-    .userImg {
-      width: 0.2rem;
-      height: 0.2rem;
-      border-radius: 50%;
-      overflow: hidden;
-      margin-right: 0.04rem;
-      flex-shrink: 0;
-    }
-
-    .name {
-      font-size: 0.12rem;
-      color: #402424;
-      line-height: 0.14rem;
-    }
-  }
-}
-
-.sticky-section {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-.wxPopupDialog {
-  // position: relative;
-  overflow: initial;
-  width: 88%;
-  background: transparent;
-
-  // margin-top: -160px;
-  &::before {
-    position: absolute;
-    content: " ";
-    top: -0.2rem;
-    left: 50%;
-    margin-left: -0.51rem;
-    display: inline-block;
-    background: url("./img/wx-no-top.png") no-repeat top center;
-    background-size: contain;
-    width: 1.02rem;
-    height: 0.84rem;
-  }
-}
-
-.popupContainer {
-  background: url("./img/wx-no-bg.png") no-repeat top center #fff;
-  background-size: cover;
-  border-radius: 0.2rem;
-  overflow: hidden;
-  padding-bottom: 0.16rem;
-  text-align: center;
-  width: 100%;
-
-  .title1 {
-    padding-top: 0.57rem;
-    text-align: center;
-    font-size: 0.18rem;
-    font-weight: 500;
-    color: #3b2300;
-  }
-
-  .popupTips {
-    padding-top: 0.16rem;
-    padding-bottom: 0.16rem;
-    text-align: center;
-    font-size: 0.15rem;
-    color: #777777;
-    line-height: 0.21rem;
-  }
-
-  .button {
-    padding: 0 0.32rem;
-    height: 0.3rem;
-    font-size: 0.16rem;
-    font-size: 0.14rem;
-    color: #777;
-    border-color: #e7e7e7;
-  }
-}
-</style>
+</script>

src/views/creation/index-shareRoute.vue

@@ -0,0 +1,675 @@
+<template>
+   <div
+      class="creation"
+      :style="{
+         '--heightA': state.heightA + 'px',
+         '--navBarHeight': navBarHeight + 'px',
+         '--creationHeight': creationHeight ? creationHeight + 'px' : '100vh'
+      }"
+   >
+      <div class="creationBg"></div>
+      <van-sticky>
+         <van-nav-bar
+            v-if="browser().isApp"
+            class="nav"
+            :class="{ isScreenScroll: isScreenScroll }"
+            :fixed="false"
+            :title="state.musicDetail.musicSheetName"
+            left-arrow
+            @click-left="goBack"
+         />
+         <div v-else class="logoDownload" :class="{ isShareScreenScroll: isScreenScroll }">
+            <img :src="isScreenScroll ? require('./img/logo1.png') : require('./img/logo.png')" class="logoImg" />
+            <div class="logTit" @click="handlerDownLoad">下载App</div>
+         </div>
+      </van-sticky>
+      <div v-if="isEmpty" class="isEmpty">
+         <MEmpty msg="作品已删除" />
+      </div>
+      <template v-else>
+         <div class="singerBox">
+            <div class="musicSheetName">
+               <van-notice-bar :text="state.musicDetail.musicSheetName" background="none" />
+            </div>
+            <div class="singerName">演奏：{{ state.musicDetail.username }}</div>
+         </div>
+         <van-sticky :offset-top="44 + navBarHeight" :z-index="200">
+            <div class="playBox" ref="playBoxDom">
+               <div
+                  :class="[
+                     'playSection',
+                     plyrState.mediaTimeShow && 'mediaTimeShow',
+                     isLandscapeScreen && 'isLandscapeScreen',
+                     state.playType === 'Video' && 'videoType'
+                  ]"
+                  id="playMediaSection"
+                  @click="handlerClickPlay"
+               >
+                  <!-- 横屏 -->
+                  <div v-if="isLandscapeScreen" class="backBox">
+                     <img class="backImg" :src="require('./img/back.png')" @click="handlerBack" />
+                     <div class="musicDetail">
+                        <div class="musicSheetName">
+                           <van-notice-bar :text="state.musicDetail.musicSheetName" background="none" />
+                        </div>
+                        <div class="username">演奏：{{ state.musicDetail.username }}</div>
+                     </div>
+                  </div>
+                  <!-- audio -->
+                  <div class="audioBox" v-if="state.playType === 'Audio'">
+                     <canvas class="audioVisualizer" id="audioVisualizer"></canvas>
+                     <audio
+                        crossorigin="anonymous"
+                        id="audioMediaSrc"
+                        :src="state.musicDetail.videoUrl"
+                        controls="false"
+                        preload="metadata"
+                        playsinline
+                        webkit-playsinline
+                     />
+                     <img src="./img/ty.png" class="tyBg" />
+                     <div class="audioBoxBg">
+                        <div :class="['audioPan', plyrState.playIngShow ? 'imgRotate' : '']">
+                           <van-image class="audioImg" :src="state.musicDetail.img || require('./img/music_bg.png')" />
+                        </div>
+                        <i class="audioPoint"></i>
+                        <i :class="['audioZhen', plyrState.playIngShow && 'active']"></i>
+                     </div>
+                  </div>
+                  <!-- video -->
+                  <video
+                     v-if="state.playType === 'Video'"
+                     id="videoMediaSrc"
+                     class="videoBox"
+                     :src="state.musicDetail.videoUrl"
+                     :data-poster="state.musicDetail.videoImg || require('./img/videoBg.png')"
+                     :poster="state.musicDetail.videoImg || require('./img/videoBg.png')"
+                     preload="metadata"
+                     playsinline
+                     webkit-playsinline
+                     x5-playsinline
+                  />
+                  <!-- 工具 -->
+                  <div :class="['playLarge', !plyrState.mediaTimeShow && plyrState.playIngShow && 'playIngShow']"></div>
+                  <div class="mediaTimeCon">
+                     <div class="mediaTime">
+                        <div>
+                           {{ getSecondRPM(plyrState.currentTime) }}
+                        </div>
+                        <div class="note">/</div>
+                        <div class="duration">
+                           {{ getSecondRPM(plyrState.duration) }}
+                        </div>
+                     </div>
+                  </div>
+                  <div class="landscapeScreen" @click="handlerLandscapeScreen"></div>
+                  <!-- 谱面 -->
+                  <div v-if="staffState.staffSrc" :class="['staffBoxCon', staffState.isShow && 'staffBoxShow']">
+                     <div
+                        class="staffBox"
+                        :style="{
+                           '--staffBoxHeight': staffState.height
+                        }"
+                     >
+                        <div class="mask"></div>
+                        <iframe ref="staffDom" class="staff" frameborder="0" :src="staffState.staffSrc"></iframe>
+                     </div>
+                  </div>
+               </div>
+            </div>
+         </van-sticky>
+         <div class="musicSection musicShareSection">
+            <div class="avatarInfoBox">
+               <div class="avatar">
+                  <van-image class="userLogo" :src="state.musicDetail.avatar" />
+                  <div class="infoCon">
+                     <div class="info">
+                        <span class="userName">{{ state.musicDetail.username }}</span>
+                        <img :src="require('./img/icon-member.png')" v-if="state.musicDetail.vipFlag" class="iconMember" />
+                     </div>
+                     <div class="sub">
+                        {{
+                           (state.musicDetail.subjectName || "") + " " + (state.musicDetail.currentGradeNum ? getGradeCh(state.musicDetail.currentGradeNum - 1) : "")
+                        }}
+                     </div>
+                  </div>
+               </div>
+               <div class="linkes" @click="onStarChange">
+                  <img src="./img/icon-zan-active.png" v-if="state.musicDetail.starFlag" class="iconZan" />
+                  <img src="./img/icon-zan.png" v-else class="iconZan" />
+                  <span>{{ state.musicDetail.likeNum }}</span>
+               </div>
+            </div>
+            <textEllipsis class="textEllipsis" :text="state.musicDetail.desc || ''" />
+         </div>
+         <div class="likeSection likeShareSection">
+            <div class="likeTitle">推荐作品</div>
+            <template v-if="state.listState.dataShow">
+               <van-list :finished="state.listState.finished" :finishedText="' '" :immediateCheck="false">
+                  <van-cell
+                     v-for="(item, index) in state.list"
+                     :key="index"
+                     :class="['likeShareItem', index === state.list.length - 1 && 'likeShareItemLast']"
+                     :border="false"
+                     @click="onDetail(item)"
+                  >
+                     <template #icon>
+                        <div class="audioImgBox">
+                           <img :src="require('./img/audio-pan.png')" class="audioPan" crossorigin="anonymous" />
+                           <img :src="item.img || require('./share-model/images/music-bg.png')" class="muploader" crossorigin="anonymous" />
+                           <img
+                              class="imgLabel"
+                              :src="
+                                 item.videoUrl && item.videoUrl.lastIndexOf('mp4') !== -1
+                                    ? require('./share-model/images/videoLabel.png')
+                                    : require('./share-model/images/audioLabel.png')
+                              "
+                           />
+                        </div>
+                     </template>
+                     <template #title>
+                        <div class="userInfo">
+                           <div class="musicSheetName van-ellipsis">{{ item.musicSheetName }}</div>
+                           <div class="usernameCon">
+                              <div class="likeNum">
+                                 <img :src="require('./img/icon-zan-active.png')" />
+                                 <span>{{ item.likeNum }}</span>
+                              </div>
+                              <div class="username van-ellipsis">{{ item.username }}</div>
+                           </div>
+                        </div>
+                     </template>
+                     <template #default>
+                        <div class="time">
+                           <img :src="require('./img/play.png')" class="playImg" />
+                        </div>
+                     </template>
+                  </van-cell>
+               </van-list>
+               <div v-if="!state.listState.finished || state.params.page > 2" class="btnImg">
+                  <img @click="handleChangeList" @touchstart="() => {}" :src="require('./img/btn.png')" />
+               </div>
+            </template>
+            <MEmpty class="mEmpty" v-else msg="暂无作品" style="margin-bottom: 0.5rem" />
+         </div>
+         <div class="upward shareUpward" v-show="!isScreenScroll">
+            <img :src="require('./img/upward.png')" />
+         </div>
+      </template>
+      <van-popup v-model="loginStatus" style="background: transparent; overflow: inherit">
+         <LoginModel @close="() => (this.loginStatus = false)" @confirm="onConfirm" />
+      </van-popup>
+      <Loading v-if="!staffState.isShow"></Loading>
+      <div
+         v-if="wxStatus"
+         class="wxpopup"
+         @click="
+            () => {
+               wxStatus = false
+            }
+         "
+      >
+         <img src="./img/wx_bg.png" alt="" />
+      </div>
+   </div>
+</template>
+
+<script>
+import dayjs from "dayjs"
+import { browser, getSecondRPM, getGradeCh, validStudentUrl } from "@/common/common"
+import { postMessage } from "@/helpers/native-message"
+import { api_openUserMusicPage, api_userMusicStar, api_openUserMusicDetail } from "./api"
+import audioVisualDraw, { vaildMusicScoreUrl } from "./audioVisualDraw"
+import textEllipsis from "./textEllipsis"
+import Loading from "./loading"
+import "plyr/dist/plyr.css"
+import Plyr from "plyr"
+import MEmpty from "@/components/MEmpty"
+import LoginModel from "./login-model"
+export default {
+   name: "creation",
+   data() {
+      return {
+         id: this.$route.query.id,
+         loginTag: false, // 是否登录标识
+         loginStatus: false,
+         isEmpty: false,
+         wxStatus: false,
+         state: {
+            playType: "", // 播放类型
+            musicDetail: {},
+            isClick: false,
+            list: [],
+            listState: {
+               dataShow: true, // 判断是否有数据
+               loading: false,
+               finished: false
+            },
+            params: {
+               page: 1,
+               rows: 4
+            },
+            _plrl: null,
+            heightA: 0
+         },
+         plyrState: {
+            duration: 0,
+            currentTime: 0,
+            mediaTimeShow: false,
+            playIngShow: true
+         },
+         isLandscapeScreen: false,
+         isScreenScroll: false,
+         navBarHeight: 0,
+         staffState: {
+            staffSrc: "",
+            isShow: false,
+            height: "initial",
+            speedRate: 1,
+            musicRenderType: "staff",
+            partIndex: 0
+         },
+         creationHeight: 0
+      }
+   },
+   components: {
+      textEllipsis,
+      MEmpty,
+      Loading,
+      LoginModel
+   },
+   methods: {
+      getGradeCh,
+      getSecondRPM,
+      browser,
+      onDayjs(time) {
+         return dayjs(time).format("YYYY-MM-DD HH:mm")
+      },
+      goBack() {
+         if (browser().isApp) {
+            this.setStatusBarTextColor(false)
+            postMessage({ api: "setBarStatus", content: { status: 1, backButtonHidden: 0 } })
+            postMessage({
+               api: "back"
+            })
+         } else {
+            this.$router.back()
+         }
+      },
+      onDetail(item) {
+         this.$router.push({
+            path: "/shareCreation",
+            query: {
+               id: item.id
+            }
+         })
+      },
+      // 点赞
+      async onStarChange() {
+         try {
+            await api_userMusicStar({
+               userMusicId: this.id,
+               star: !this.state.musicDetail.starFlag
+            })
+
+            this.state.musicDetail.starFlag = !this.state.musicDetail.starFlag
+            if (this.state.musicDetail.starFlag) {
+               this.state.musicDetail.likeNum += 1
+            } else {
+               this.state.musicDetail.likeNum -= 1
+            }
+         } catch (e) {
+            //
+            if (e.code === 403) {
+               this.loginStatus = true
+            }
+         }
+      },
+      async onConfirm(val) {
+         this.loginTag = val
+         this.loginStatus = false
+         const { data } = await api_openUserMusicDetail(this.id)
+         this.state.musicDetail = data
+      },
+      async getStarList() {
+         try {
+            if (this.state.isClick) return
+            this.state.isClick = true
+            const res = await api_openUserMusicPage({
+               type: "FORMAL",
+               exclusionId: this.id,
+               sort: 1,
+               ...this.state.params
+            })
+            this.state.listState.loading = false
+            const result = res.data || {}
+            // 处理重复请求数据
+            // if (this.state.list.length > 0 && result.current === 1) {
+            //    return
+            // }
+            this.state.list = result.rows || []
+
+            this.state.listState.finished = result.current >= result.pages
+            this.state.params.page = result.current + 1
+            this.state.listState.dataShow = this.state.list.length > 0
+            this.state.isClick = false
+         } catch {
+            this.state.listState.dataShow = false
+            this.state.listState.finished = true
+            this.state.isClick = false
+         }
+      },
+      handleChangeList() {
+         if (this.state.listState.finished) {
+            this.state.listState.finished = false
+            this.state.params.page = 1
+            this.getStarList()
+         } else {
+            this.getStarList()
+         }
+      },
+      async init() {
+         /* 初始化请求 */
+         try {
+            const res = await api_openUserMusicDetail(this.id)
+            this.state.musicDetail = res.data || {}
+            try {
+               const jsonConfig = JSON.parse(res.data.jsonConfig)
+               jsonConfig.speedRate && (this.staffState.speedRate = jsonConfig.speedRate)
+               jsonConfig.musicRenderType && (this.staffState.musicRenderType = jsonConfig.musicRenderType)
+               jsonConfig.partIndex && (this.staffState.partIndex = jsonConfig.partIndex)
+            } catch {}
+            // 五线谱
+            this.initStaff()
+            this.getStarList()
+            // 判断是视频还是音频
+            if (res.data.videoUrl.lastIndexOf("mp4") !== -1) {
+               this.state.playType = "Video"
+            } else {
+               this.state.playType = "Audio"
+            }
+            this.$nextTick(() => {
+               this.initMediaPlay()
+            })
+         } catch (e) {
+            this.staffState.isShow = true
+            if (e.code === 999) {
+               this.isEmpty = true
+            }
+         }
+      },
+      // 初始化 媒体播放
+      initMediaPlay() {
+         const { playStaff, pauseStaff, updateProgressStaff } = this.staffMoveInstance()
+         const id = this.state.playType === "Audio" ? "#audioMediaSrc" : "#videoMediaSrc"
+         this.state._plrl = new Plyr(id, {
+            controls: ["play", "progress", "current-time", "duration"],
+            fullscreen: {
+               enabled: false,
+               fallback: false
+            }
+         })
+         const player = this.state._plrl
+         // 创建音波数据
+         if (this.state.playType === "Audio") {
+            const audioDom = document.querySelector("#audioMediaSrc")
+            const canvasDom = document.querySelector("#audioVisualizer")
+            const { pauseVisualDraw, playVisualDraw } = audioVisualDraw(audioDom, canvasDom)
+            player.on("play", () => {
+               playVisualDraw()
+            })
+            player.on("pause", () => {
+               pauseVisualDraw()
+            })
+         }
+         player.on("timeupdate", () => {
+            this.plyrState.currentTime = player.currentTime
+         })
+         player.on("play", () => {
+            this.plyrState.playIngShow = false
+            playStaff()
+         })
+         player.on("pause", () => {
+            this.plyrState.playIngShow = true
+            pauseStaff()
+         })
+         player.on("ended", () => {
+            if (this.plyrState.mediaTimeShow) return
+            player.currentTime = 0
+            if (!player.playing) {
+               setTimeout(() => {
+                  updateProgressStaff(player.currentTime)
+               }, 100)
+            }
+         })
+         // 处理按压事件
+         const handleStart = () => {
+            if (this.isLandscapeScreen.value) {
+               return
+            }
+            this.plyrState.duration = player.duration
+            this.plyrState.mediaTimeShow = true
+         }
+         // 处理松开事件
+         const handleEnd = () => {
+            this.plyrState.mediaTimeShow = false
+            // 暂停的时候调用
+            if (!player.playing) {
+               updateProgressStaff(player.currentTime)
+            }
+         }
+         const progressDom = document.querySelector("#playMediaSection .plyr__controls .plyr__progress__container")
+         progressDom.addEventListener("mousedown", handleStart)
+         progressDom.addEventListener("touchstart", handleStart)
+         progressDom.addEventListener("mouseup", handleEnd)
+         progressDom.addEventListener("touchend", handleEnd)
+      },
+      // 初始化五线谱
+      initStaff() {
+         const src = `${vaildMusicScoreUrl()}/gym-music-score/#/simple-detail?id=${this.state.musicDetail.musicSheetId}&musicRenderType=${
+            this.staffState.musicRenderType
+         }&part-index=${this.staffState.partIndex}`
+         //const src = `http://192.168.3.122:3000/gym-music-score.html#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
+         this.staffState.staffSrc = src
+         window.addEventListener("message", event => {
+            const { api, height } = event.data
+            if (api === "api_musicPage") {
+               this.staffState.isShow = true
+               this.staffState.height = height + "px"
+            }
+         })
+      },
+      staffMoveInstance() {
+         let isPause = true
+         const requestAnimationFrameFun = () => {
+            requestAnimationFrame(() => {
+               this.$refs.staffDom?.contentWindow?.postMessage(
+                  {
+                     api: "api_playProgress",
+                     content: {
+                        currentTime: this.state._plrl.currentTime * this.staffState.speedRate
+                     }
+                  },
+                  "*"
+               )
+               if (!isPause) {
+                  requestAnimationFrameFun()
+               }
+            })
+         }
+         const playStaff = () => {
+            // 没渲染不执行
+            if (!this.staffState.isShow) return
+            isPause = false
+            this.$refs.staffDom?.contentWindow?.postMessage(
+               {
+                  api: "api_play"
+               },
+               "*"
+            )
+            requestAnimationFrameFun()
+         }
+         const pauseStaff = () => {
+            // 没渲染不执行
+            if (!this.staffState.isShow) return
+            isPause = true
+            this.$refs.staffDom?.contentWindow?.postMessage(
+               {
+                  api: "api_paused"
+               },
+               "*"
+            )
+         }
+         const updateProgressStaff = currentTime => {
+            // 没渲染不执行
+            if (!this.staffState.isShow) return
+            this.$refs.staffDom?.contentWindow?.postMessage(
+               {
+                  api: "api_updateProgress",
+                  content: {
+                     currentTime: currentTime * this.staffState.speedRate
+                  }
+               },
+               "*"
+            )
+         }
+         return {
+            playStaff,
+            pauseStaff,
+            updateProgressStaff
+         }
+      },
+      //点击改变播放状态
+      handlerClickPlay(event) {
+         // 原生 播放暂停按钮 点击的时候 不触发
+         if (event?.target?.matches("button.plyr__control")) {
+            return
+         }
+         if (this.state._plrl.playing) {
+            this.state._plrl.pause()
+         } else {
+            this.state._plrl.play()
+         }
+      },
+      handleScroll() {
+         // 作品已删除不让滚动变色
+         if (this.isEmpty) return
+         const height = window.scrollY || document.documentElement.scrollTop
+         // 防止多次调用
+         if (height > 0 && this.isScreenScroll === false) {
+            this.isScreenScroll = true
+            this.setStatusBarTextColor(false)
+         }
+         if (height <= 0) {
+            this.isScreenScroll = false
+            this.setStatusBarTextColor(true)
+         }
+      },
+      // 设置导航栏颜色
+      setStatusBarTextColor(isWhite) {
+         postMessage({
+            api: "setStatusBarTextColor",
+            content: { statusBarTextColor: isWhite }
+         })
+      },
+      handleVisibilitychange() {
+         if (document.hidden) {
+            this.state._plrl?.pause()
+         }
+      },
+      handlerBack(event) {
+         event.stopPropagation()
+         this.verticalScreen()
+      },
+      landscapeScreen() {
+         postMessage({
+            api: "setRequestedOrientation",
+            content: {
+               orientation: 0
+            }
+         })
+         this.isLandscapeScreen = true
+      },
+      verticalScreen() {
+         postMessage({
+            api: "setRequestedOrientation",
+            content: {
+               orientation: 1
+            }
+         })
+         this.isLandscapeScreen = false
+      },
+      handlerLandscapeScreen(event) {
+         event.stopPropagation()
+         const { isApp, weixin } = browser()
+         if (isApp) {
+            this.landscapeScreen()
+            return
+         }
+         if (weixin) {
+            this.wxStatus = true
+         } else {
+            const t = Date.now()
+            const str = location.href
+            this.shareCall(str)
+            setTimeout(() => {
+               if (Date.now() - t < 3500) {
+                  window.location.replace(validStudentUrl() + "/#/studentDownLoad")
+               }
+            }, 3000)
+         }
+      },
+      shareCall(str) {
+         const iosStr = encodeURIComponent(str)
+         const userAgent = navigator.userAgent || navigator.vendor
+         if (/(iPhone|iPad|iPod|iOS)/i.test(userAgent)) {
+            window.location.href = `StudentsDaya://linkUrl=${iosStr}`
+         } else if (/(Android)/i.test(userAgent)) {
+            window.location.href = `studentdaya://html:8888/SplashActivity?url=${iosStr}`
+         } else {
+            showToast("请用手机或移动设备打开")
+         }
+      },
+      handlerDownLoad() {
+         if (browser().weixin) {
+            this.wxStatus = true
+         } else {
+            window.location.replace(validStudentUrl() + "/#/studentDownLoad")
+         }
+      },
+      setFullHeight() {
+         this.creationHeight = window.innerHeight
+      }
+   },
+   mounted() {
+      this.state.heightA = this.$refs.playBoxDom.offsetHeight
+      document.addEventListener("scroll", this.handleScroll)
+      document.addEventListener("visibilitychange", this.handleVisibilitychange)
+      this.setFullHeight()
+      window.addEventListener("resize", this.setFullHeight)
+   },
+   destroyed() {
+      this.state._plrl?.destroy()
+      document.removeEventListener("scroll", this.handleScroll)
+      document.removeEventListener("visibilitychange", this.handleVisibilitychange)
+      window.removeEventListener("resize", this.setFullHeight)
+   },
+   created() {
+      this.setStatusBarTextColor(true)
+      postMessage({ api: "setBarStatus", content: { status: 0, backButtonHidden: 1 } })
+      postMessage({ api: "getNavHeight" }, res => {
+         const { content } = res
+         const dpi = content.dpi || 2
+         if (content.navHeight) {
+            const navHeight = content.navHeight / dpi
+            this.navBarHeight = navHeight
+         }
+      })
+      this.init()
+   }
+}
+</script>
+
+<style lang="less" scoped>
+@import url("./index.less");
+</style>

src/views/creation/index.less

@@ -0,0 +1,966 @@
+.creation {
+   .creationBg {
+      position: fixed;
+      z-index: 0;
+      width: 100%;
+      height: 100%;
+      min-height: 100vh;
+      top: 0;
+      left: 0;
+      background: url("./img/bg.png") no-repeat;
+      background-size: 100% 100%;
+   }
+   .nav {
+      padding-top: var(--navBarHeight, 0);
+      background-color: transparent;
+      &::after {
+         display: none;
+      }
+      /deep/ .van-nav-bar__content {
+         height: 46px;
+         .van-icon {
+            font-size: 0.19rem;
+            color: #fff;
+         }
+         .van-nav-bar__title {
+            font-size: 0.2rem;
+            color: #fff;
+         }
+      }
+      &.isScreenScroll {
+         background-color: #fff;
+         /deep/ .van-nav-bar__content {
+            .van-icon {
+               color: #333333;
+            }
+            .van-nav-bar__title {
+               color: #333333;
+            }
+         }
+      }
+   }
+   .singer {
+      position: relative;
+      margin-top: 0.06rem;
+      text-align: center;
+      font-weight: 400;
+      font-size: 0.14rem;
+      color: rgba(255, 255, 255, 0.7);
+      line-height: 0.2rem;
+      margin-bottom: 14vh;
+   }
+   .playBox {
+      position: relative;
+      width: 100%;
+      padding-top: 56.25%;
+      .playSection {
+         position: absolute;
+         top: 0;
+         bottom: 0;
+         left: 0;
+         right: 0;
+         &::after {
+            position: absolute;
+            content: "";
+            width: 100%;
+            height: 0.4rem;
+            bottom: -0.4rem;
+            left: 0;
+            background: linear-gradient(0, rgba(48, 100, 100, 0) 0%, rgba(35, 91, 101, 0.49) 46%, #134959 100%);
+            pointer-events: none;
+         }
+         /deep/.plyr {
+            width: 100%;
+            height: 100%;
+            z-index: initial;
+            .plyr__controls {
+               width: 100%;
+               position: absolute;
+               z-index: 4;
+               bottom: 0;
+               left: 0;
+               background: initial;
+               padding: 0 0.12rem 0.02rem;
+               opacity: 1 !important;
+               transform: translateY(0) !important;
+               pointer-events: initial !important;
+               .plyr__controls__item.plyr__progress__container {
+                  input[type="range"] {
+                     color: #01c1b5;
+                     height: 0.1rem;
+                  }
+                  input[type="range"]::-webkit-slider-runnable-track {
+                     height: 0.02rem;
+                  }
+                  input[type="range"]::-webkit-slider-thumb {
+                     width: 0.06rem;
+                     height: 0.06rem;
+                     margin-top: -0.02rem;
+                     box-shadow: initial;
+                  }
+                  .plyr__progress__buffer {
+                     height: 0.02rem;
+                     color: rgba(1, 193, 181, 0.8);
+                     background-color: #fff;
+                     margin-top: -0.01rem;
+                  }
+               }
+               .plyr__controls__item.plyr__time {
+                  display: none;
+               }
+               .plyr__controls__item.plyr__control {
+                  display: none;
+               }
+            }
+         }
+         &.videoType {
+            /deep/.plyr .plyr__controls {
+               background-color: rgba(0, 0, 0, 0.2);
+               .plyr__controls__item.plyr__progress__container {
+                  input[type="range"] {
+                     color: #ffffff !important;
+                  }
+                  .plyr__progress__buffer {
+                     color: rgba(255, 255, 255, 0.7) !important;
+                     background-color: rgba(0, 0, 0, 0.1) !important;
+                  }
+               }
+            }
+            .staff {
+               background-color: rgba(255, 255, 255, 0.7);
+            }
+            .musicDetail {
+               .van-notice-bar,
+               .username {
+                  color: #ffffff !important;
+               }
+            }
+         }
+         .videoBox {
+            width: 100%;
+            height: 100%;
+         }
+         .audioBox {
+            width: 100%;
+            height: 100%;
+            background: url("./img/audioBg.png") no-repeat;
+            background-size: 100% 100%;
+            position: relative;
+            overflow: hidden;
+            .audioVisualizer {
+               position: absolute;
+               top: 50%;
+               left: 50%;
+               transform: translate(-50%, -50%);
+               width: 2.8rem;
+               height: 0.55rem;
+            }
+            .tyBg {
+               width: 1.39rem;
+               height: 0.74rem;
+               position: absolute;
+               z-index: 1;
+               left: 50%;
+               top: 50%;
+               transform: translate(-50%, calc(-50% + 0.28rem));
+            }
+            .audioBoxBg {
+               position: absolute;
+               left: 50%;
+               top: 50%;
+               transform: translate(-50%, -50%);
+               z-index: 2;
+               width: 0.74rem;
+               height: 0.75rem;
+               background: url("./img/audio-bg.png") no-repeat center;
+               background-size: 100% 100%;
+
+               .audioPan {
+                  position: absolute;
+                  left: 50%;
+                  top: 50%;
+                  transform: translate(-50%, -50%);
+                  z-index: 8;
+                  width: 0.59rem;
+                  height: 0.6rem;
+                  background: url("./img/audio-pan.png") no-repeat center;
+                  background-size: 100% 100%;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+
+                  animation: rotateImg 6s linear infinite;
+
+                  &.imgRotate {
+                     animation-play-state: paused;
+                  }
+               }
+
+               .audioImg {
+                  width: 0.32rem;
+                  height: 0.32rem;
+                  /deep/ img {
+                     border-radius: 50%;
+                  }
+               }
+
+               .audioPoint {
+                  position: absolute;
+                  z-index: 9;
+                  left: 50%;
+                  top: 50%;
+                  transform: translate(-50%, -50%);
+                  width: 0.08rem;
+                  height: 0.08rem;
+                  background: url("./img/audio-point.png") no-repeat center;
+                  background-size: contain;
+               }
+
+               .audioZhen {
+                  position: absolute;
+                  z-index: 9;
+                  right: -0.04rem;
+                  top: -0.33rem;
+                  width: 0.26rem;
+                  height: 0.87rem;
+                  background: url("./img/audio-zhen.png") no-repeat center;
+                  background-size: contain;
+                  transition: transform 0.5s ease-in-out;
+
+                  &.active {
+                     transform: rotate(92deg) translate3d(0, 0, 0.03rem);
+                     transition: transform 0.5s ease-in-out;
+                  }
+               }
+            }
+         }
+         .playLarge {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 0.48rem;
+            height: 0.48rem;
+            background: url("./img/midPlay.png") no-repeat;
+            background-size: 100% 100%;
+            z-index: 12;
+            display: none;
+            &.playIngShow {
+               display: initial;
+            }
+         }
+         .mediaTimeCon {
+            display: none;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.3);
+         }
+         &.mediaTimeShow {
+            .mediaTimeCon {
+               display: block;
+            }
+         }
+         .mediaTime {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: 0.95rem;
+            display: flex;
+            font-weight: 500;
+            font-size: 0.16rem;
+            color: #60fff5;
+            line-height: 0.2rem;
+            z-index: 10;
+            text-shadow: 0 0.01rem 0.01rem rgba(0, 0, 0, 0.5);
+            & div:first-child {
+               width: 0.5rem;
+               text-align: right;
+            }
+            .note {
+               margin: 0 0.04rem;
+            }
+            .duration {
+               color: #fff;
+            }
+         }
+         .landscapeScreen {
+            width: 0.32rem;
+            height: 0.32rem;
+            position: absolute;
+            background: url("./img/Landscape.png") no-repeat;
+            background-size: 0.26rem 0.26rem;
+            background-position: center center;
+            right: 0.07rem;
+            top: 0.07rem;
+            z-index: 15;
+         }
+         .staffBoxCon {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            top: 0;
+            z-index: 3;
+            overflow: hidden;
+            visibility: hidden;
+            &.staffBoxShow {
+               visibility: initial;
+            }
+         }
+         .staffBox {
+            width: 100%;
+            height: calc(var(--staffBoxHeight) + 0.12rem);
+            position: absolute;
+            bottom: 0;
+            padding-bottom: 0.12rem;
+            box-sizing: border-box;
+            .staff {
+               padding-right: 0.1rem;
+               box-sizing: border-box;
+               width: 100%;
+               height: 100%;
+            }
+            .mask {
+               position: absolute;
+               z-index: 6;
+               width: 100%;
+               height: 100%;
+            }
+         }
+      }
+      .playSection.isLandscapeScreen {
+         overflow: hidden;
+         position: fixed;
+         top: 0;
+         left: 0;
+         bottom: 0;
+         right: 0;
+         width: 100%;
+         height: 100%;
+         min-height: 100vh;
+         z-index: 1000;
+         .landscapeScreen {
+            display: none;
+         }
+         /deep/ .plyr {
+            .plyr__controls {
+               padding: 0 0.2rem 0.2rem;
+               .plyr__controls__item.plyr__control {
+                  display: block;
+                  padding: 0;
+                  width: 0.18rem;
+                  height: 0.18rem;
+                  &:hover {
+                     background: initial;
+                  }
+                  .icon--pressed {
+                     width: 100%;
+                     height: 100%;
+                     background: url("./img/pause2.png") no-repeat;
+                     background-size: 100% 100%;
+                     use {
+                        display: none;
+                     }
+                  }
+                  .icon--not-pressed {
+                     width: 100%;
+                     height: 100%;
+                     background: url("./img/play2.png") no-repeat;
+                     background-size: 100% 100%;
+                     use {
+                        display: none;
+                     }
+                  }
+               }
+               .plyr__controls__item.plyr__progress__container {
+                  margin-left: 0.09rem;
+                  input[type="range"] {
+                     color: #01c1b5;
+                     height: 0.2rem;
+                  }
+                  input[type="range"]::-webkit-slider-runnable-track {
+                     height: 0.04rem;
+                  }
+                  input[type="range"]::-webkit-slider-thumb {
+                     width: 0.12rem;
+                     height: 0.12rem;
+                     margin-top: -0.04rem;
+                     box-shadow: initial;
+                     background-color: #2DC7AA;
+                  }
+                  .plyr__progress__buffer {
+                     height: 0.04rem;
+                     color: rgba(1, 193, 181, 0.8);
+                     background-color: #fff;
+                     margin-top: -0.02rem;
+                  }
+               }
+               .plyr__controls__item.plyr__time {
+                  font-weight: 500;
+                  font-size: 0.14rem;
+                  color: #131415;
+                  display: initial;
+                  &.plyr__time--current {
+                     margin-left: 0.09rem;
+                  }
+               }
+            }
+         }
+         .audioBox{
+            .audioBoxBg,.audioVisualizer{
+               transform: translate(-50%, -50%) scale(1.4);
+            }
+            .tyBg{
+               transform: translate(-50%, calc(-50% + 0.39rem)) scale(1.4);
+            }
+         }
+         &.videoType {
+            &::before {
+               position: absolute;
+               left: 0;
+               top: 0;
+               width: 100%;
+               height: 1.15rem;
+               content: "";
+               background: linear-gradient(0, rgba(255, 255, 255, 0) 0%, rgba(3, 3, 3, 0.2) 45%, rgba(0, 0, 0, 0.7) 100%);
+               z-index: 2;
+            }
+            /deep/ .plyr .plyr__controls {
+               .plyr__controls__item.plyr__time {
+                  color: #ffffff;
+               }
+               .plyr__controls__item.plyr__control {
+                  .icon--pressed {
+                     background: url("./img/pause1.png") no-repeat;
+                     background-size: 100% 100%;
+                  }
+                  .icon--not-pressed {
+                     background: url("./img/play1.png") no-repeat;
+                     background-size: 100% 100%;
+                  }
+               }
+               .plyr__controls__item.plyr__progress__container{
+                  input[type="range"]::-webkit-slider-thumb {
+                     background-color: #ffffff;
+                  }
+               }
+            }
+         }
+         .backBox {
+            position: absolute;
+            left: 0.2rem;
+            top: 0.2rem;
+            display: flex;
+            z-index: 10;
+            .backImg {
+               width: 0.21rem;
+               height: 0.21rem;
+            }
+            .musicDetail {
+               margin-left: 0.12rem;
+               .musicSheetName {
+                  width: 3rem;
+                  .van-notice-bar {
+                     padding: 0;
+                     height: 0.2rem;
+                     font-weight: 600;
+                     font-size: 0.18rem;
+                     color: #131415;
+                     line-height: 0.2rem;
+                  }
+               }
+               .username {
+                  margin-top: 0.04rem;
+                  font-weight: 400;
+                  font-size: 0.12rem;
+                  color: #333333;
+                  line-height: 0.18rem;
+               }
+            }
+         }
+         .staffBox {
+            height: calc(var(--staffBoxHeight) + 0.44rem);
+            padding-bottom: 0.44rem;
+            .staff {
+               box-sizing: border-box;
+               padding: 0 0.2rem;
+            }
+         }
+      }
+   }
+   .musicSection {
+      position: relative;
+      width: 100%;
+      min-height: calc(var(--creationHeight, 100vh) - 46px - var(--navBarHeight, 0) - 0.26rem - 14vh - var(--heightA) - 0.55rem - 0.8rem);
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      padding: 0.1rem 0.12rem 0;
+      box-sizing: border-box;
+
+      .avatarInfoBox {
+         display: flex;
+         justify-content: space-between;
+         align-items: center;
+         .avatar {
+            display: flex;
+            align-items: center;
+            .userLogo {
+               width: 0.44rem;
+               height: 0.44rem;
+               border: 0.02rem solid #ffffff;
+               margin-right: 0.1rem;
+               border-radius: 50%;
+               overflow: hidden;
+            }
+            .infoCon {
+               .info {
+                  display: flex;
+                  align-items: center;
+                  .userName {
+                     font-weight: 500;
+                     font-size: 0.16rem;
+                     color: #ffffff;
+                     line-height: 0.22rem;
+                     overflow: hidden;
+                     white-space: nowrap;
+                     text-overflow: ellipsis;
+                     max-width: 1.6rem;
+                  }
+                  .iconMember {
+                     margin-left: 0.06rem;
+                     width: 0.16rem;
+                     height: 0.16rem;
+                  }
+               }
+               .sub {
+                  margin-top: 0.02rem;
+                  font-weight: 400;
+                  font-size: 0.12rem;
+                  color: #ffffff;
+                  line-height: 0.17rem;
+               }
+            }
+         }
+         .linkes {
+            display: flex;
+            align-items: center;
+            border-radius: 0.13rem;
+            padding: 0.04rem 0.08rem 0.03rem;
+            background-color: rgba(255, 255, 255, 0.12);
+            font-weight: 400;
+            font-size: 0.14rem;
+            color: #ffffff;
+            .iconZan {
+               width: 0.18rem;
+               height: 0.18rem;
+               margin-right: 0.02rem;
+            }
+         }
+      }
+      .textEllipsis {
+         margin-top: 0.1rem;
+         font-weight: 400;
+         font-size: 0.14rem;
+         color: #ffffff;
+         line-height: 0.2rem;
+      }
+   }
+   .likeSection {
+      position: relative;
+      margin: 0.2rem 0.12rem 1rem;
+      background: rgba(255, 255, 255, 0.09);
+      border-radius: 0.1rem;
+      padding: 0.12rem 0.12rem 0 0.12rem;
+      overflow: hidden;
+      .likeTitle {
+         display: flex;
+         align-items: center;
+         font-size: 0.17rem;
+         font-weight: 600;
+         color: #ffffff;
+         line-height: 0.24rem;
+         &::before {
+            display: inline-block;
+            content: "";
+            width: 0.04rem;
+            height: 0.14rem;
+            border-radius: 0.02rem;
+            background: #2dc7aa;
+            margin-right: 0.06rem;
+         }
+      }
+      .likeItem {
+         padding: 0.13rem 0 0.16rem;
+         background-color: initial;
+         border-bottom: 0.01rem solid rgba(242, 242, 242, 0.12);
+         &.likeItemLast {
+            border-bottom: none;
+         }
+         .userLogo {
+            border-radius: 50%;
+            overflow: hidden;
+            width: 0.42rem;
+            height: 0.42rem;
+            margin-right: 0.07rem;
+         }
+
+         .userInfo {
+            .name {
+               font-size: 0.16rem;
+               font-weight: 500;
+               color: #ffffff;
+               line-height: 0.22rem;
+               overflow: hidden;
+               white-space: nowrap;
+               text-overflow: ellipsis;
+               max-width: 1.2rem;
+            }
+
+            .sub {
+               padding-top: 0.02rem;
+               font-size: 0.13rem;
+               color: #ffffff;
+               line-height: 0.18rem;
+            }
+         }
+
+         .time {
+            font-weight: 400;
+            font-size: 0.13rem;
+            color: #ffffff;
+            line-height: 0.18rem;
+         }
+      }
+      .mEmpty {
+         /deep/.msg {
+            color: #fff;
+         }
+      }
+      .btnImg {
+         display: flex;
+         justify-content: center;
+         margin-top: 0.03rem;
+         margin-bottom: 0.12rem;
+         & > img {
+            width: 0.88rem;
+            height: 0.31rem;
+            &:active {
+               opacity: 0.8;
+            }
+         }
+      }
+   }
+   .upward {
+      z-index: 100;
+      box-sizing: border-box;
+      position: fixed;
+      width: 100%;
+      left: 0;
+      bottom: 0.8rem;
+      padding-top: 0.12rem;
+      display: flex;
+      justify-content: center;
+      height: 0.55rem;
+      background: linear-gradient(180deg, rgba(42, 78, 85, 0) 0%, rgba(43, 78, 85, 0.7) 19%, #2b4e55 100%);
+      > img {
+         width: 0.19rem;
+         height: 0.15rem;
+      }
+   }
+   .bottomSection {
+      position: fixed;
+      z-index: 101;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 0.12rem 0 0.2rem;
+      width: 100%;
+      height: 0.8rem;
+      background: #1f1f1f;
+      box-shadow: 0 -0.01rem 0.1rem 0 rgba(0, 0, 0, 0.05);
+      box-sizing: border-box;
+      .bottomShare {
+         display: flex;
+         align-items: center;
+         p {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            margin-right: 0.28rem;
+            &:last-child {
+               margin-right: 0;
+            }
+         }
+         img {
+            width: 0.18rem;
+            height: 0.18rem;
+         }
+         span {
+            margin-top: 0.08rem;
+            font-weight: 400;
+            font-size: 0.12rem;
+            color: #ffffff;
+            line-height: 0.17rem;
+         }
+      }
+
+      .btnEdit {
+         width: 0.8rem;
+         height: 0.3rem;
+      }
+   }
+   /* 分享样式 */
+   .isEmpty {
+      position: relative;
+      height: calc(var(--creationHeight, 100vh) - 46px - var(--navBarHeight, 0));
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      /deep/.icon_nodata {
+         margin-top: -0.6rem;
+      }
+      /deep/.msg {
+         color: #fff;
+      }
+   }
+   .logoDownload {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 0.13rem;
+      height: 46px;
+      position: relative;
+      &.isShareScreenScroll {
+         background-color: #ffffff;
+         .logTit {
+            background: #2dc7aa;
+            border: none;
+            padding: 0.03rem 0.11rem;
+         }
+      }
+      &::after {
+         content: "";
+         position: absolute;
+         bottom: 0;
+         left: 0.13rem;
+         width: calc(100% - 0.26rem);
+         height: 0.01rem;
+         background-color: rgba(255, 255, 255, 0.3);
+      }
+      .logoImg {
+         width: 0.99rem;
+         height: 0.3rem;
+      }
+      .logTit {
+         font-weight: 400;
+         font-size: 0.14rem;
+         color: #ffffff;
+         line-height: 0.2rem;
+         padding: 0.02rem 0.1rem;
+         border-radius: 0.2rem;
+         border: 0.01rem solid rgba(255, 255, 255, 0.5);
+      }
+   }
+   .singerBox {
+      position: relative;
+      height: 20vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      .musicSheetName {
+         width: 2rem;
+         margin: 0 auto 0.1rem;
+         /deep/.van-notice-bar {
+            padding: 0;
+            height: 0.28rem;
+            font-weight: 600;
+            font-size: 0.2rem;
+            color: #ffffff;
+            line-height: 0.28rem;
+            .van-notice-bar__content {
+               min-width: 100%;
+               text-align: center;
+            }
+         }
+      }
+      .singerName {
+         text-align: center;
+         font-weight: 400;
+         font-size: 0.14rem;
+         color: rgba(255, 255, 255, 0.7);
+         line-height: 0.2rem;
+         margin-bottom: 0.1rem;
+      }
+   }
+   .musicShareSection {
+      min-height: calc(var(--creationHeight, 100vh) - 46px - var(--navBarHeight, 0) - 20vh - var(--heightA) - 0.55rem);
+   }
+   .likeShareSection {
+      margin: 0.2rem 0.12rem 0.2rem;
+   }
+   .likeShareItem {
+      background-color: initial;
+      padding: 0;
+      margin-top: 0.25rem;
+      &:first-child {
+         margin-top: 0.2rem;
+      }
+      &.likeShareItemLast {
+         padding-bottom: 0.2rem;
+      }
+      .audioImgBox {
+         position: relative;
+         width: 0.51rem;
+         height: 0.51rem;
+         margin-right: 0.14rem;
+         .audioPan {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            right: -0.06rem;
+            top: 0;
+         }
+         .muploader {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            height: 100%;
+            border-radius: 0.085rem;
+         }
+         .imgLabel {
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 0.28rem;
+            height: 0.14rem;
+            z-index: 10;
+         }
+      }
+      .userInfo {
+         .musicSheetName {
+            font-weight: 600;
+            font-size: 0.16rem;
+            color: #ffffff;
+            line-height: 0.22rem;
+            width: 2rem;
+         }
+         .usernameCon {
+            display: flex;
+            align-items: center;
+            margin-top: 0.06rem;
+            .likeNum {
+               display: flex;
+               align-items: center;
+               border-radius: 0.03rem;
+               background-color: rgba(255, 255, 255, 0.22);
+               padding: 0.01rem 0.02rem;
+               img {
+                  width: 0.14rem;
+                  height: 0.15rem;
+               }
+               span {
+                  font-weight: 400;
+                  font-size: 0.1rem;
+                  color: #ffffff;
+                  line-height: 1;
+                  margin-left: 0.02rem;
+               }
+            }
+            .username {
+               max-width: 1.6rem;
+               margin-left: 0.04rem;
+               font-weight: 400;
+               font-size: 0.13rem;
+               color: #dedede;
+               line-height: 0.13rem;
+            }
+         }
+      }
+      /deep/.van-cell__value {
+         display: flex;
+         align-items: center;
+         justify-content: flex-end;
+      }
+      .time {
+         line-height: 1;
+         .playImg {
+            width: 0.2rem;
+            height: 0.2rem;
+         }
+      }
+   }
+   .btnImg {
+      display: flex;
+      justify-content: center;
+      margin-top: 0.03rem;
+      margin-bottom: 0.12rem;
+      & > img {
+         width: 0.88rem;
+         height: 0.31rem;
+         &:active {
+            opacity: 0.8;
+         }
+      }
+   }
+   .shareUpward {
+      bottom: 0;
+   }
+   .wxpopup {
+      width: 100%;
+      height: 100%;
+      min-height: 100vh;
+      position: fixed;
+      top: 0;
+      left: 0;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 9999;
+      text-align: right;
+      img {
+         width: 88%;
+         margin-right: 6%;
+      }
+   }
+}
+
+.popupContainer {
+   width: 80%;
+   .popupTit {
+      margin-top: 0.2rem;
+      text-align: center;
+      font-weight: 600;
+      font-size: 0.18rem;
+      color: #131415;
+      line-height: 0.25rem;
+   }
+   .popupContent {
+      margin: 0.2rem 0;
+      font-weight: 400;
+      font-size: 0.16rem;
+      color: #777777;
+      line-height: 0.26rem;
+      text-align: center;
+   }
+   .popupBtnGroup {
+      text-align: center;
+      margin-bottom: 0.2rem;
+      .van-button {
+         height: 0.4rem;
+         font-size: 0.16rem;
+         font-weight: 400 !important;
+         line-height: 0.22rem;
+         min-width: 1.22rem;
+         &:last-child {
+            margin-left: 0.15rem;
+            background: #2dc7aa;
+            border: none;
+         }
+      }
+   }
+}

src/views/creation/index.vue

@@ -1,953 +1,608 @@
 <template>
-  <div class="creation">
-    <div class="playSection">
-      <videoTcplayer v-if="playType === 'Video'" :src="musicDetail.videoUrl" :poster="musicDetail.videoImg || videoBg" />
-      <div class="audioSection" v-if="playType === 'Audio'">
-        <div class="audioContainer">
-          <div class="waveActive" :style="{ width: audioWidth + '%' }"></div>
-          <div class="waveDefault"></div>
-        </div>
-
-        <div class="audioBox">
-          <div :class="['audioPan', paused ? 'imgRotate' : '']">
-            <van-image class="audioImg" :src="musicDetail.img || musicBg" />
-          </div>
-          <i class="audioPoint"></i>
-          <i :class="['audioZhen', paused && 'active']"></i>
-        </div>
-        <div class="controls" @click="onControls">
-          <div class="actions">
-            <div class="actionBtn" @click="onToggleAudio">
-              <img v-if="paused" src="./img/icon-play.png" />
-              <img v-else src="./img/icon-pause.png" />
+   <div
+      class="creation"
+      :style="{
+         '--heightA': state.heightA + 'px',
+         '--navBarHeight': navBarHeight + 'px'
+      }"
+   >
+      <div class="creationBg"></div>
+      <van-sticky>
+         <van-nav-bar
+            class="nav"
+            :class="{ isScreenScroll: isScreenScroll }"
+            :fixed="false"
+            :title="state.musicDetail.musicSheetName"
+            left-arrow
+            @click-left="goBack"
+         />
+      </van-sticky>
+      <div class="singer">演奏：{{ state.musicDetail.username }}</div>
+      <van-sticky :offset-top="44 + navBarHeight" :z-index="200">
+         <div class="playBox" data-html2canvas-ignore="true" ref="playBoxDom">
+            <div
+               :class="[
+                  'playSection',
+                  plyrState.mediaTimeShow && 'mediaTimeShow',
+                  isLandscapeScreen && 'isLandscapeScreen',
+                  state.playType === 'Video' && 'videoType'
+               ]"
+               id="playMediaSection"
+               @click="handlerClickPlay"
+            >
+               <!-- 横屏 -->
+               <div v-if="isLandscapeScreen" class="backBox">
+                  <img class="backImg" :src="state.playType === 'Video'?require('./img/back1.png'):require('./img/back.png')" @click="handlerBack" />
+                  <div class="musicDetail">
+                     <div class="musicSheetName">
+                        <van-notice-bar :text="state.musicDetail.musicSheetName" background="none" />
+                     </div>
+                     <div class="username">演奏：{{ state.musicDetail.username }}</div>
+                  </div>
+               </div>
+               <!-- audio -->
+               <div class="audioBox" v-if="state.playType === 'Audio'">
+                  <canvas class="audioVisualizer" id="audioVisualizer"></canvas>
+                  <audio
+                     crossorigin="anonymous"
+                     id="audioMediaSrc"
+                     :src="state.musicDetail.videoUrl"
+                     controls="false"
+                     preload="metadata"
+                     playsinline
+                     webkit-playsinline
+                  />
+                  <img src="./img/ty.png" class="tyBg" />
+                  <div class="audioBoxBg">
+                     <div :class="['audioPan', plyrState.playIngShow ? 'imgRotate' : '']">
+                        <van-image class="audioImg" :src="state.musicDetail.img || require('./img/music_bg.png')" />
+                     </div>
+                     <i class="audioPoint"></i>
+                     <i :class="['audioZhen', plyrState.playIngShow && 'active']"></i>
+                  </div>
+               </div>
+               <!-- video -->
+               <video
+                  v-if="state.playType === 'Video'"
+                  id="videoMediaSrc"
+                  class="videoBox"
+                  :src="state.musicDetail.videoUrl"
+                  :data-poster="state.musicDetail.videoImg || require('./img/videoBg.png')"
+                  :poster="state.musicDetail.videoImg || require('./img/videoBg.png')"
+                  preload="metadata"
+                  playsinline
+                  webkit-playsinline
+                  x5-playsinline
+               />
+               <!-- 工具 -->
+               <div :class="['playLarge', !plyrState.mediaTimeShow && plyrState.playIngShow && 'playIngShow']"></div>
+               <div class="mediaTimeCon">
+                  <div class="mediaTime">
+                     <div>
+                        {{ getSecondRPM(plyrState.currentTime) }}
+                     </div>
+                     <div class="note">/</div>
+                     <div class="duration">
+                        {{ getSecondRPM(plyrState.duration) }}
+                     </div>
+                  </div>
+               </div>
+               <div class="landscapeScreen" @click="handlerLandscapeScreen"></div>
+               <!-- 谱面 -->
+               <div v-if="staffState.staffSrc" :class="['staffBoxCon', staffState.isShow && 'staffBoxShow']">
+                  <div
+                     class="staffBox"
+                     :style="{
+                        '--staffBoxHeight': staffState.height
+                     }"
+                  >
+                     <div class="mask"></div>
+                     <iframe ref="staffDom" class="staff" frameborder="0" :src="staffState.staffSrc"></iframe>
+                  </div>
+               </div>
             </div>
-          </div>
-          <div class="slider">
-            <van-slider :step="0.01" class="timeProgress" v-model="currentTime" :max="duration" @input="handleChangeTime" @drag-start="dragStatus = true" @drag-end="dragStatus = false" />
-          </div>
-          <div class="time">
-            <div>{{ getSecondRPM(currentTime) }}</div>
-            <span>/</span>
-            <div>{{ getSecondRPM(duration) }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <van-cell class="userSection" center :border="false">
-      <template #icon>
-        <van-image class="userLogo" :src="musicDetail.avatar" />
-      </template>
-      <template #title>
-        <div class="userInfo">
-          <p class="name">
-            <span>{{ musicDetail.username }}</span>
-            <img v-if="musicDetail.vipFlag" src="./img/icon-member.png" class="iconMember" />
-          </p>
-          <p class="sub van-multi-ellipsis--l2">
-            {{ musicDetail.subjectName }}
-            {{ getGradeCh(musicDetail.currentGradeNum - 1) }}
-          </p>
-        </div>
-      </template>
-      <template #default>
-        <div :class="['zan', 'zanActive']">
-          <img src="./img/icon-zan-active.png" class="iconZan" />
-          {{ musicDetail.likeNum }}
-        </div>
-      </template>
-    </van-cell>
-
-    <div class="musicSection">
-      <div class="musicName">
-        <span class="musicTag">曲目名称</span>
-        {{ musicDetail.musicSheetName }}
-      </div>
-      <div class="musicDesc">{{ musicDetail.desc }}</div>
-    </div>
-
-    <div class="likeSection">
-      <div class="likeTitle">点赞记录</div>
-
-      <van-list v-if="listState.dataShow" class="container containerInformation" :finished="listState.finished" finished-text=" " :immediate-check="false" @load="getStarList()">
-        <!-- {state.list.map((item: any, index: number) => ( -->
-        <van-cell v-for="(item, index) in list" :key="index" class="likeItem" :border="list.length - 1 == index ? false : true">
-          <template #icon>
-            <van-image :src="item.userAvatar" class="userLogo" />
-          </template>
-          <template #title>
-            <div class="userInfo">
-              <p class="name">{{ item.userName }}</p>
-              <p class="sub">
-                {{ item.subjectName }}
-                {{ getGradeCh(item.currentGradeNum - 1) }}
-              </p>
+         </div>
+      </van-sticky>
+      <div class="musicSection">
+         <div class="avatarInfoBox">
+            <div class="avatar">
+               <van-image class="userLogo" :src="state.musicDetail.avatar" />
+               <div class="infoCon">
+                  <div class="info">
+                     <span class="userName">{{ state.musicDetail.username }}</span>
+                     <img :src="require('./img/icon-member.png')" v-if="state.musicDetail.vipFlag" class="iconMember" />
+                  </div>
+                  <div class="sub">
+                     {{
+                        (state.musicDetail.subjectName || "") + " " + (state.musicDetail.currentGradeNum ? getGradeCh(state.musicDetail.currentGradeNum - 1) : "")
+                     }}
+                  </div>
+               </div>
             </div>
-          </template>
-          <template #default>
-            <div class="time">
-              {{ onDayjs(item.createTime) }}
+            <div class="linkes">
+               <img :src="require('./img/icon-zan.png')" class="iconZan" />
+               <span>{{ state.musicDetail.likeNum }}</span>
             </div>
-          </template>
-        </van-cell>
-      </van-list>
-
-      <MEmpty v-else msg="暂无数据" style="margin-bottom: 0.5rem" />
-
-      <div class="sticky-section">
-        <div class="bottomSection">
-          <div class="bottomShare">
+         </div>
+         <textEllipsis class="textEllipsis" :text="state.musicDetail.desc || ''" />
+      </div>
+      <div class="likeSection">
+         <div class="likeTitle">点赞记录</div>
+         <van-list
+            v-if="state.listState.dataShow"
+            :finished="state.listState.finished"
+            :finishedText="' '"
+            @load="getStarList"
+            :immediateCheck="false"
+         >
+            <van-cell
+               v-for="(item, index) in state.list"
+               :key="index"
+               :class="['likeItem', index === state.list.length - 1 && 'likeItemLast']"
+               :border="false"
+            >
+               <template #icon>
+                  <van-image :src="item.userAvatar" class="userLogo" />
+               </template>
+               <template #title>
+                  <div class="userInfo">
+                     <p class="name">{{ item.userName || `游客${item.userId}` }}</p>
+                     <p class="sub">
+                        {{ (item.subjectName || "") + " " + (item.currentGradeNum ? getGradeCh(item.currentGradeNum - 1) : "") }}
+                     </p>
+                  </div>
+               </template>
+               <template #default>
+                  <div class="time">
+                     {{ onDayjs(item.createTime) }}
+                  </div>
+               </template>
+            </van-cell>
+         </van-list>
+         <MEmpty class="mEmpty" v-else msg="暂无内容" style="margin-bottom: 0.5rem" />
+      </div>
+      <div class="upward" v-show="!isScreenScroll">
+         <img :src="require('./img/upward.png')" />
+      </div>
+      <div class="bottomSection">
+         <div class="bottomShare">
             <p @click="onDownload">
-              <img src="./img/icon-download.png" />
-              <span>下载</span>
+               <img :src="require('./img/icon-download.png')" />
+               <span>下载</span>
             </p>
-            <p @click="shareStatus = true">
-              <img src="./img/icon-share.png" />
-              <span>分享</span>
+            <p @click="() => (state.shareStatus = true)">
+               <img :src="require('./img/icon-share.png')" />
+               <span>分享</span>
             </p>
-            <p @click="deleteStatus = true">
-              <img src="./img/icon-delete.png" />
-              <span>删除</span>
+            <p @click="() => (state.deleteStatus = true)">
+               <img :src="require('./img/icon-delete.png')" />
+               <span>删除</span>
             </p>
-          </div>
-          <van-button round class="btnEdit" type="primary" @click="onDetail"> 编辑 </van-button>
-        </div>
-      </div>
-    </div>
-
-    <van-popup position="bottom" v-model="shareStatus" style="background: transparent">
-      <ShareModel :musicDetail="musicDetail" @close="shareStatus = false" />
-    </van-popup>
-
-    <van-popup v-model="deleteStatus" round class="popupContainer">
-      <p class="popupContent">确定删除吗？</p>
-      <div class="popupBtnGroup">
-        <van-button round @click="() => (deleteStatus = false)"> 取消 </van-button>
-        <van-button round type="primary" @click="onDelete"> 确定 </van-button>
+         </div>
+         <img
+            :src="require('./img/edit.png')"
+            class="btnEdit"
+            @click="
+               () => {
+                  setStatusBarTextColor(false)
+                  $router.push({ path: '/creation-edit', query: { id: this.id } })
+               }
+            "
+         />
       </div>
-    </van-popup>
-  </div>
+      <Loading v-if="!staffState.isShow"></Loading>
+      <van-popup position="bottom" v-model="state.shareStatus" style=" background: transparent ">
+         <ShareModel :musicDetail="state.musicDetail" @close="state.shareStatus = false" />
+      </van-popup>
+      <van-popup v-model="state.deleteStatus" round class="popupContainer">
+         <p class="popupTit">温馨提示</p>
+         <p class="popupContent">确认删除作品吗？</p>
+         <div class="popupBtnGroup">
+            <van-button round @click="() => (state.deleteStatus = false)">
+               取消
+            </van-button>
+            <van-button round type="primary" @click="onDelete">
+               确认
+            </van-button>
+         </div>
+      </van-popup>
+   </div>
 </template>
 
 <script>
-import dayjs from "dayjs";
-import { getSecondRPM, browser, getGradeCh } from "@/common/common";
-import videoTcplayer from "@/components/video-tcplayer";
-import MEmpty from "@/components/MEmpty";
-import { postMessage } from "@/helpers/native-message";
-import { api_userMusicRemove, api_userMusicDetail, api_userMusicStarPage } from "./api";
-import ShareModel from "./share-model";
-const audioDom = new Audio();
-audioDom.controls = true;
-audioDom.style.width = "100%";
-audioDom.className = "audio";
+import dayjs from "dayjs"
+import { browser, getSecondRPM, getGradeCh} from "@/common/common"
+import { postMessage } from "@/helpers/native-message"
+import { api_userMusicDetail, api_userMusicRemove, api_userMusicStarPage } from "./api"
+import audioVisualDraw, { vaildMusicScoreUrl } from "./audioVisualDraw"
+import textEllipsis from "./textEllipsis"
+import Loading from "./loading"
+import "plyr/dist/plyr.css"
+import Plyr from "plyr"
+import MEmpty from "@/components/MEmpty"
+import ShareModel from "./share-model"
 export default {
-  components: { videoTcplayer, MEmpty, ShareModel },
-  data() {
-    return {
-      id: this.$route.query.id,
-      videoBg: require("./img/video-bg.png"),
-      musicBg: require("./img/music_bg.png"),
-      deleteStatus: false,
-      shareStatus: false,
-      playType: "", // 播放类型
-      musicDetail: {},
-      timer: null,
-      audioWidth: 0,
-      paused: true,
-      currentTime: 0,
-      duration: 0.1,
-      loop: false,
-      dragStatus: false, // 是否开始拖动
-      isClick: false,
-      list: [],
-      listState: {
-        dataShow: true, // 判断是否有数据
-        loading: false,
-        finished: false,
+   name: "creation",
+   data() {
+      return {
+         id: this.$route.query.id,
+         state: {
+            deleteStatus: false,
+            shareStatus: false,
+            playType: "", // 播放类型
+            musicDetail: {},
+            isClick: false,
+            list: [],
+            listState: {
+               dataShow: true, // 判断是否有数据
+               loading: false,
+               finished: false
+            },
+            params: {
+               page: 1,
+               rows: 20
+            },
+            _plrl: null,
+            heightA: 0
+         },
+         plyrState: {
+            duration: 0,
+            currentTime: 0,
+            mediaTimeShow: false,
+            playIngShow: true
+         },
+         isLandscapeScreen: false,
+         isScreenScroll: false,
+         navBarHeight: 0,
+         staffState: {
+            staffSrc: "",
+            isShow: false,
+            height: "initial",
+            speedRate: 1,
+            musicRenderType: "staff",
+            partIndex: 0
+         }
+      }
+   },
+   components: {
+      textEllipsis,
+      MEmpty,
+      Loading,
+      ShareModel
+   },
+   methods: {
+      getGradeCh,
+      getSecondRPM,
+      onDayjs(time) {
+         return dayjs(time).format("YYYY-MM-DD HH:mm")
       },
-      params: {
-        page: 1,
-        rows: 20,
+      goBack() {
+         if (browser().isApp) {
+            this.setStatusBarTextColor(false)
+            postMessage({ api: "setBarStatus", content: { status: 1, backButtonHidden: 0 } })
+            postMessage({
+               api: "goBack"
+            })
+         } else {
+            this.$router.back()
+         }
       },
-    };
-  },
-  async mounted() {
-    document.title = "作品详情";
-    try {
-      const res = await api_userMusicDetail(this.id);
-
-      this.musicDetail = res.data || {};
-
-      this.getStarList();
-      // 判断是视频还是音频
-      if (res.data.videoUrl.lastIndexOf("mp4") !== -1) {
-        this.playType = "Video";
-      } else {
-        this.playType = "Audio";
-        // 初始化
-        this.$nextTick(() => {
-          this.initAudio();
-        });
-      }
-    } catch (e) {
-      //
-      if (e.code === 999) {
-        this.$dialog
-          .alert({
-            message: e.msg,
-            theme: "round-button",
-            confirmButtonColor: "#2DC7AA",
-          })
-          .then(() => {
-            if (browser().isApp) {
-              postMessage({
-                api: "goBack",
-              });
-            } else {
-              this.$router.back();
+      // 下载
+      onDownload() {
+         postMessage({
+            api: "saveFile",
+            content: {
+               url: this.state.musicDetail.videoUrl
             }
-          });
-        return;
-      }
-    }
-    // 设置隐藏属性和改变可见属性的事件的名称
-    var hidden, visibilityChange;
-    if (typeof document.hidden !== "undefined") {
-      // Opera 12.10 and Firefox 18 and later support
-      hidden = "hidden";
-      visibilityChange = "visibilitychange";
-    } else if (typeof document.msHidden !== "undefined") {
-      hidden = "msHidden";
-      visibilityChange = "msvisibilitychange";
-    } else if (typeof document.webkitHidden !== "undefined") {
-      hidden = "webkitHidden";
-      visibilityChange = "webkitvisibilitychange";
-    }
-
-    // 如果页面是隐藏状态，则暂停视频
-    // 如果页面是展示状态，则播放视频
-    const that = this;
-    function handleVisibilityChange() {
-      if (document[hidden]) {
-        if (audioDom) {
-          audioDom.pause();
-          that.paused = audioDom.paused;
-        }
-      }
-    }
-
-    // 如果浏览器不支持addEventListener 或 Page Visibility API 给出警告
-    if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
-      console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
-    } else {
-      // 处理页面可见属性的改变
-      document.addEventListener(visibilityChange, handleVisibilityChange, false);
-    }
-  },
-  methods: {
-    onDetail() {
-      if (audioDom) {
-        audioDom.pause();
-        this.paused = audioDom.paused;
-      }
-      this.$router.push({
-        path: "/creation-edit",
-        query: {
-          id: this.id,
-        },
-      });
-    },
-    /** 改变播放时间 */
-    handleChangeTime(val) {
-      this.currentTime = val;
-      clearTimeout(this.timer);
-      this.timer = setTimeout(() => {
-        // audioRef.value.currentTime = val;
-        audioDom.currentTime = val;
-        this.timer = null;
-      }, 60);
-    },
-
-    // 切换音频播放
-    onToggleAudio(e) {
-      e.stopPropagation();
-      if (audioDom.paused) {
-        audioDom.play();
-      } else {
-        audioDom.pause();
-      }
-
-      this.paused = audioDom.paused;
-    },
-
-    // 获取列表
-    async getStarList() {
-      try {
-        if (this.isClick) return;
-        this.isClick = true;
-        const res = await api_userMusicStarPage({
-          userMusicId: this.id,
-          ...this.params,
-        });
-        this.listState.loading = false;
-        const result = res.data || {};
-        // 处理重复请求数据
-        if (this.list.length > 0 && result.current === 1) {
-          return;
-        }
-        this.list = this.list.concat(result.rows || []);
-        this.listState.finished = result.current >= result.pages;
-        this.params.page = result.current + 1;
-        this.listState.dataShow = this.list.length > 0;
-        this.isClick = false;
-      } catch {
-        this.listState.dataShow = false;
-        this.listState.finished = true;
-        this.isClick = false;
+         })
+      },
+      // 删除作品
+      async onDelete() {
+         try {
+            await api_userMusicRemove({ id: this.id })
+            setTimeout(() => {
+               this.state.deleteStatus = false
+               this.$toast("删除成功")
+            }, 100)
+            setTimeout(() => {
+               this.goBack()
+            }, 1200)
+         } catch {
+            //
+         }
+      },
+      async getStarList() {
+         try {
+            if (this.state.isClick) return
+            this.state.isClick = true
+            const res = await api_userMusicStarPage({
+               userMusicId: this.id,
+               ...this.state.params
+            })
+            this.state.listState.loading = false
+            const result = res.data || {}
+            // 处理重复请求数据
+            if (this.state.list.length > 0 && result.current === 1) {
+               return
+            }
+            this.state.list = this.state.list.concat(result.rows || [])
+            this.state.listState.finished = result.current >= result.pages
+            this.state.params.page = result.current + 1
+            this.state.listState.dataShow = this.state.list.length > 0
+            this.state.isClick = false
+         } catch {
+            this.state.listState.dataShow = false
+            this.state.listState.finished = true
+            this.state.isClick = false
+         }
+      },
+      // 初始化 媒体播放
+      initMediaPlay() {
+         const { playStaff, pauseStaff, updateProgressStaff } = this.staffMoveInstance()
+         const id = this.state.playType === "Audio" ? "#audioMediaSrc" : "#videoMediaSrc"
+         this.state._plrl = new Plyr(id, {
+            controls: ["play", "progress", "current-time", "duration"],
+            fullscreen: {
+               enabled: false,
+               fallback: false
+            }
+         })
+         const player = this.state._plrl
+         // 创建音波数据
+         if (this.state.playType === "Audio") {
+            const audioDom = document.querySelector("#audioMediaSrc")
+            const canvasDom = document.querySelector("#audioVisualizer")
+            const { pauseVisualDraw, playVisualDraw } = audioVisualDraw(audioDom, canvasDom)
+            player.on("play", () => {
+               playVisualDraw()
+            })
+            player.on("pause", () => {
+               pauseVisualDraw()
+            })
+         }
+         player.on("timeupdate", () => {
+            this.plyrState.currentTime = player.currentTime
+         })
+         player.on("play", () => {
+            this.plyrState.playIngShow = false
+            playStaff()
+         })
+         player.on("pause", () => {
+            this.plyrState.playIngShow = true
+            pauseStaff()
+         })
+         player.on("ended", () => {
+            if (this.plyrState.mediaTimeShow) return
+            player.currentTime = 0
+            if (!player.playing) {
+               setTimeout(() => {
+                  updateProgressStaff(player.currentTime)
+               }, 100)
+            }
+         })
+         // 处理按压事件
+         const handleStart = () => {
+            if (this.isLandscapeScreen.value) {
+               return
+            }
+            this.plyrState.duration = player.duration
+            this.plyrState.mediaTimeShow = true
+         }
+         // 处理松开事件
+         const handleEnd = () => {
+            this.plyrState.mediaTimeShow = false
+            // 暂停的时候调用
+            if (!player.playing) {
+               updateProgressStaff(player.currentTime)
+            }
+         }
+         const progressDom = document.querySelector("#playMediaSection .plyr__controls .plyr__progress__container")
+         progressDom.addEventListener("mousedown", handleStart)
+         progressDom.addEventListener("touchstart", handleStart)
+         progressDom.addEventListener("mouseup", handleEnd)
+         progressDom.addEventListener("touchend", handleEnd)
+      },
+      // 初始化五线谱
+      initStaff() {
+         const src = `${vaildMusicScoreUrl()}/gym-music-score/#/simple-detail?id=${this.state.musicDetail.musicSheetId}&musicRenderType=${
+            this.staffState.musicRenderType
+         }&part-index=${this.staffState.partIndex}`
+         //const src = `http://192.168.3.122:3000/gym-music-score.html#/simple-detail?id=${state.musicDetail.musicSheetId}&musicRenderType=${staffState.musicRenderType}&part-index=${staffState.partIndex}`;
+         this.staffState.staffSrc = src
+         window.addEventListener("message", event => {
+            const { api, height } = event.data
+            if (api === "api_musicPage") {
+               this.staffState.isShow = true
+               this.staffState.height = height + "px"
+            }
+         })
+      },
+      staffMoveInstance() {
+         let isPause = true
+         const requestAnimationFrameFun = () => {
+            requestAnimationFrame(() => {
+               this.$refs.staffDom?.contentWindow?.postMessage(
+                  {
+                     api: "api_playProgress",
+                     content: {
+                        currentTime: this.state._plrl.currentTime * this.staffState.speedRate
+                     }
+                  },
+                  "*"
+               )
+               if (!isPause) {
+                  requestAnimationFrameFun()
+               }
+            })
+         }
+         const playStaff = () => {
+            // 没渲染不执行
+            if (!this.staffState.isShow) return
+            isPause = false
+            this.$refs.staffDom?.contentWindow?.postMessage(
+               {
+                  api: "api_play"
+               },
+               "*"
+            )
+            requestAnimationFrameFun()
+         }
+         const pauseStaff = () => {
+            // 没渲染不执行
+            if (!this.staffState.isShow) return
+            isPause = true
+            this.$refs.staffDom?.contentWindow?.postMessage(
+               {
+                  api: "api_paused"
+               },
+               "*"
+            )
+         }
+         const updateProgressStaff = currentTime => {
+            // 没渲染不执行
+            if (!this.staffState.isShow) return
+            this.$refs.staffDom?.contentWindow?.postMessage(
+               {
+                  api: "api_updateProgress",
+                  content: {
+                     currentTime: currentTime * this.staffState.speedRate
+                  }
+               },
+               "*"
+            )
+         }
+         return {
+            playStaff,
+            pauseStaff,
+            updateProgressStaff
+         }
+      },
+      //点击改变播放状态
+      handlerClickPlay(event) {
+         // 原生 播放暂停按钮 点击的时候 不触发
+         if (event?.target?.matches("button.plyr__control")) {
+            return
+         }
+         if (this.state._plrl.playing) {
+            this.state._plrl.pause()
+         } else {
+            this.state._plrl.play()
+         }
+      },
+      handleScroll() {
+         const height = window.scrollY || document.documentElement.scrollTop
+         // 防止多次调用
+         if (height > 0 && this.isScreenScroll === false) {
+            this.isScreenScroll = true
+            this.setStatusBarTextColor(false)
+         }
+         if (height <= 0) {
+            this.isScreenScroll = false
+            this.setStatusBarTextColor(true)
+         }
+      },
+      // 设置导航栏颜色
+      setStatusBarTextColor(isWhite) {
+         postMessage({
+            api: "setStatusBarTextColor",
+            content: { statusBarTextColor: isWhite }
+         })
+      },
+      handleVisibilitychange() {
+         if (document.hidden) {
+            this.state._plrl?.pause()
+         }
+      },
+      handlerBack(event) {
+         event.stopPropagation()
+         this.verticalScreen()
+      },
+      landscapeScreen() {
+         postMessage({
+            api: "setRequestedOrientation",
+            content: {
+               orientation: 0
+            }
+         })
+         this.isLandscapeScreen = true
+      },
+      verticalScreen() {
+         postMessage({
+            api: "setRequestedOrientation",
+            content: {
+               orientation: 1
+            }
+         })
+         this.isLandscapeScreen = false
+      },
+      handlerLandscapeScreen(event) {
+         event.stopPropagation()
+         if (!this.isLandscapeScreen) {
+            this.landscapeScreen()
+         }
       }
-    },
-
-    initAudio() {
-      audioDom.src = this.musicDetail.videoUrl;
-      audioDom.load();
-      audioDom.oncanplaythrough = () => {
-        this.paused = audioDom.paused;
-        this.duration = audioDom.duration;
-      };
-      // 播放时监听
-      audioDom.addEventListener("timeupdate", () => {
-        this.duration = audioDom.duration;
-        this.currentTime = audioDom.currentTime;
-        const rate = (this.currentTime / this.duration) * 100;
-        this.audioWidth = rate > 100 ? 100 : rate;
-      });
-      audioDom.addEventListener("ended", () => {
-        this.paused = audioDom.paused;
-      });
-    },
-    // 删除作品
-    async onDelete() {
+   },
+   mounted() {
+      this.state.heightA = this.$refs.playBoxDom.offsetHeight
+      document.addEventListener("scroll", this.handleScroll)
+      document.addEventListener("visibilitychange", this.handleVisibilitychange)
+   },
+   destroyed() {
+      this.state._plrl?.destroy()
+      document.removeEventListener("scroll", this.handleScroll)
+      document.removeEventListener("visibilitychange", this.handleVisibilitychange)
+   },
+   async created() {
+      this.setStatusBarTextColor(true)
+      postMessage({ api: "setBarStatus", content: { status: 0, backButtonHidden: 1 } })
+      postMessage({ api: "getNavHeight" }, res => {
+         const { content } = res
+         const dpi = content.dpi || 2
+         if (content.navHeight) {
+            const navHeight = content.navHeight / dpi
+            this.navBarHeight = navHeight
+         }
+      })
+      /* 初始化请求 */
       try {
-        await api_userMusicRemove({ id: this.id });
-
-        setTimeout(() => {
-          this.deleteStatus = false;
-          this.$toast("删除成功");
-        }, 100);
-
-        setTimeout(() => {
-          if (browser().isApp) {
-            postMessage({
-              api: "back",
-            });
-          } else {
-            this.$router.back();
-          }
-        }, 1200);
-      } catch {
-        //
+         const res = await api_userMusicDetail(this.id)
+         this.state.musicDetail = res.data || {}
+         try {
+            const jsonConfig = JSON.parse(res.data.jsonConfig)
+            jsonConfig.speedRate && (this.staffState.speedRate = jsonConfig.speedRate)
+            jsonConfig.musicRenderType && (this.staffState.musicRenderType = jsonConfig.musicRenderType)
+            jsonConfig.partIndex && (this.staffState.partIndex = jsonConfig.partIndex)
+         } catch {}
+         // 五线谱
+         this.initStaff()
+         this.getStarList()
+         // 判断是视频还是音频
+         if (res.data.videoUrl.lastIndexOf("mp4") !== -1) {
+            this.state.playType = "Video"
+         } else {
+            this.state.playType = "Audio"
+         }
+         this.$nextTick(() => {
+            this.initMediaPlay()
+         })
+      } catch (e) {
+         this.staffState.isShow = true
+         if (e.code === 999) {
+            this.$dialog
+               .alert({
+                  message: e.msg,
+                  theme: "round-button",
+                  confirmButtonColor: "#2DC7AA"
+               })
+               .then(() => {
+                  this.goBack()
+               })
+         }
       }
-    },
-    // 下载
-    async onDownload() {
-      postMessage({
-        api: "saveFile",
-        content: {
-          url: this.musicDetail.videoUrl,
-        },
-      });
-    },
-    onDayjs(time) {
-      return dayjs(time).format("YYYY-MM-DD HH:mm");
-    },
-    getGradeCh,
-    getSecondRPM,
-    onControls(e) {
-      e.stopPropagation();
-    },
-  },
-  destory() {
-    if (audioDom) {
-      audioDom.pause();
-      this.paused = audioDom.paused;
-    }
-  },
-};
+   }
+}
 </script>
 
 <style lang="less" scoped>
-.creation {
-  min-height: 100vh;
-  background-color: #f8f8f8;
-}
-
-/deep/ .vjs-poster {
-  background-size: cover;
-}
-
-/deep/ .video-js .vjs-progress-control:hover .vjs-progress-holder {
-  font-size: inherit !important;
-}
-
-/deep/ .tcp-skin .vjs-play-progress {
-  background-color: #01c1b5;
-}
-
-/deep/ .video-js .vjs-slider:focus {
-  box-shadow: none !important;
-  text-shadow: none !important;
-}
-
-.playSection {
-  min-height: 1.75rem;
-}
-
-@keyframes rotateImg {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.audioSection {
-  position: relative;
-  background: url("./img/audio-banner-bg.png") no-repeat top center;
-  background-size: cover;
-  height: 1.75rem;
-
-  .audioContainer {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    width: 1.96rem;
-    height: 0.35rem;
-    transform: translate(-50%, 0.6rem);
-
-    .waveActive,
-    .waveDefault {
-      width: 100%;
-      height: 100%;
-    }
-
-    .waveDefault {
-      position: absolute;
-      top: 0;
-      left: 0;
-      background: url("./img/wave-1.png") no-repeat center left;
-      background-size: cover;
-    }
-
-    .waveActive {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 1;
-      background: url("./img/wave-2.png") no-repeat center left;
-      background-size: cover;
-    }
-  }
-
-  .audioBox {
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, 50%);
-    z-index: 2;
-    width: 0.74rem;
-    height: 0.75rem;
-    background: url("./img/audio-bg.png") no-repeat center;
-    background-size: contain;
-
-    .audioPan {
-      position: absolute;
-      left: 0.08rem;
-      top: 0.06rem;
-      z-index: 8;
-      width: 0.59rem;
-      height: 0.6rem;
-      background: url("./img/audio-pan.png") no-repeat center;
-      background-size: contain;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      animation: rotateImg 6s linear infinite;
-
-      &.imgRotate {
-        animation-play-state: paused;
-      }
-    }
-
-    .audioImg {
-      width: 0.32rem;
-      height: 0.32rem;
-      border-radius: 50%;
-      overflow: hidden;
-    }
-
-    .audioPoint {
-      position: absolute;
-      z-index: 9;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      width: 0.08rem;
-      height: 0.08rem;
-      background: url("./img/audio-point.png") no-repeat center;
-      background-size: contain;
-    }
-
-    .audioZhen {
-      position: absolute;
-      z-index: 9;
-      right: -0.04rem;
-      top: -0.33rem;
-      width: 0.26rem;
-      height: 0.87rem;
-      background: url("./img/audio-zhen.png") no-repeat center;
-      background-size: contain;
-      transition: transform 0.5s ease-in-out;
-
-      &.active {
-        transform: rotate(92deg) translate3d(0, 0, 3px);
-        transition: transform 0.5s ease-in-out;
-      }
-    }
-  }
-}
-
-.controls {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  height: 0.44rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  flex-direction: row;
-  transition: all 0.5s;
-  padding: 0 0.12rem;
-
-  & > div {
-    display: flex;
-    align-items: center;
-  }
-
-  &.hide {
-    transform: translateY(100%);
-  }
-
-  .actionBtn {
-    line-height: 0;
-    margin-right: 0.04rem;
-
-    img {
-      width: 0.14rem;
-      height: 0.14rem;
-      margin-bottom: -0.02rem;
-    }
-  }
-
-  .time {
-    display: flex;
-    justify-content: space-between;
-    flex: 1;
-    min-width: 0.86rem;
-    font-size: 0.12rem;
-    color: #131415;
-    line-height: 0.2rem;
-
-    span {
-      font-size: 0.12rem;
-      padding: 0 0.01rem;
-    }
-  }
-
-  .slider {
-    width: 100%;
-    margin: 0 0.12rem;
-    // --van-slider-bar-height: 4px;
-    // --van-slider-button-width: 0.13rem !important;
-    // --van-slider-button-height: 0.13rem !important;
-    // --van-slider-inactive-background: #fff;
-    // --van-slider-inactive-background-color: #fff;
-    // --van-slider-active-background: #2DC7AA !important;
-
-    /deep/ .van-slider {
-      height: 0.04rem;
-    }
-
-    /deep/ .van-slider__button {
-      width: 0.13rem;
-      height: 0.13rem;
-    }
-
-    /deep/ .van-loading {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-
-.userSection {
-  padding: 0.15rem 0.12rem !important;
-  background-color: transparent !important;
-
-  .userLogo {
-    width: 0.44rem;
-    height: 0.44rem;
-    border: 0.01rem solid #ffffff;
-    margin-right: 0.1rem;
-    border-radius: 50%;
-    overflow: hidden;
-  }
-
-  .userInfo {
-    .name {
-      display: flex;
-      align-items: center;
-      font-size: 0.16rem;
-      font-weight: 500;
-      color: #333333;
-      line-height: 0.22rem;
-
-      span {
-        display: inline-block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 1rem;
-      }
-    }
-
-    .sub {
-      padding-top: 0.01rem;
-      font-size: 0.12rem;
-      color: #777777;
-      line-height: 0.17rem;
-    }
-
-    .iconMember {
-      margin-left: 0.06rem;
-      width: 0.14rem;
-      height: 0.14rem;
-    }
-  }
-
-  .zan {
-    background: #ffffff;
-    border-radius: 0.13rem;
-    font-size: 0.14rem;
-    color: #777777;
-    line-height: 0.2rem;
-    padding: 0.04rem 0.09rem 0.03rem;
-    display: inline-flex;
-    align-items: center;
-
-    &.zanActive {
-      background: #f7eeee;
-      color: #ff6a6a;
-    }
-
-    .iconZan {
-      width: 0.18rem;
-      height: 0.18rem;
-      margin-right: 0.01rem;
-    }
-  }
-}
-
-.musicSection {
-  margin: 0 0.13rem 0.12rem;
-  padding: 0.14rem 0.12rem;
-  background: #ffffff;
-  border-radius: 0.1rem;
-
-  .musicName {
-    font-size: 0.15rem;
-    font-weight: 500;
-    color: #333333;
-    line-height: 0.21rem;
-    // display: flex;
-    // align-items: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 100%;
-
-    .musicTag {
-      margin-right: 0.06rem;
-      padding: 0.01rem 0.06rem;
-      font-size: 0.12rem;
-      color: #ff7b31;
-      line-height: 0.17rem;
-      background: rgba(255, 166, 115, 0.07);
-      border-radius: 0.09rem;
-      border: 0.01rem solid #ffbf9a;
-      font-weight: 400;
-      vertical-align: text-bottom;
-      display: inline-block;
-    }
-  }
-
-  .musicDesc {
-    padding-top: 0.08rem;
-    font-size: 0.14rem;
-    color: #777777;
-    line-height: 0.2rem;
-  }
-}
-
-.likeSection {
-  margin: 0 0.13rem 0.12rem;
-  background: #ffffff;
-  border-radius: 0.1rem;
-  padding: 0.1rem 0.12rem;
-  margin-bottom: calc(0.77rem + env(safe-area-inset-bottom));
-
-  .likeTitle {
-    display: flex;
-    align-items: center;
-    font-size: 0.17rem;
-    font-weight: 600;
-    color: #333333;
-    line-height: 0.24rem;
-    padding-bottom: 0.08rem;
-
-    &::before {
-      display: inline-block;
-      content: "";
-      width: 0.04rem;
-      height: 0.14rem;
-      border-radius: 0.01rem;
-      background: linear-gradient(to bottom, #59e5d5, #2dc7aa);
-      margin-right: 0.06rem;
-    }
-  }
-}
-
-.likeItem {
-  padding: 0.16rem 0;
-
-  .userLogo {
-    border-radius: 50%;
-    overflow: hidden;
-    width: 0.42rem;
-    height: 0.42rem;
-    margin-right: 0.07rem;
-  }
-
-  .userInfo {
-    .name {
-      font-size: 0.16rem;
-      font-weight: 500;
-      color: #333333;
-      line-height: 0.22rem;
-    }
-
-    .sub {
-      padding-top: 0.01rem;
-      font-size: 0.13rem;
-      color: #777777;
-      line-height: 0.18rem;
-    }
-  }
-
-  .time {
-    font-size: 0.13rem;
-    color: #777777;
-    line-height: 0.18rem;
-  }
-}
-
-.bottomSection {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: #fff;
-  padding: 0.15rem 0.12rem calc(0.15rem + env(safe-area-inset-bottom));
-
-  .bottomShare {
-    display: flex;
-    align-items: center;
-
-    p {
-      padding: 0 0.15rem;
-      text-align: center;
-      line-height: 0;
-
-      &:first-child {
-        padding-left: 0.05rem;
-      }
-    }
-
-    img {
-      width: 0.18rem;
-      height: 0.18rem;
-    }
-
-    span {
-      padding-top: 0.08rem;
-      font-size: 0.12rem;
-      color: #333333;
-      line-height: 0.17rem;
-      display: block;
-    }
-  }
-
-  .btnEdit {
-    font-size: 0.14rem;
-    font-weight: 500;
-    background: #2dc7aa;
-    color: #ffffff;
-    line-height: 0.22rem;
-    min-width: 0.8rem;
-    height: 0.3rem;
-    border: none;
-  }
-}
-
-.popupContainer {
-  width: 80%;
-
-  .popupContent {
-    padding: 0.29rem 0 0.25rem;
-    text-align: center;
-    font-size: 0.18rem;
-    font-weight: 500;
-    color: #333333;
-    line-height: 0.25rem;
-  }
-
-  .popupBtnGroup {
-    text-align: center;
-    margin-bottom: 0.22rem;
-
-    .van-button {
-      height: 0.4rem;
-      font-size: 0.16rem;
-      font-weight: 400 !important;
-      line-height: 0.22rem;
-      min-width: 1.22rem;
-
-      &:last-child {
-        margin-left: 0.1rem;
-        background: #2dc7aa;
-        border: none;
-      }
-    }
-  }
-}
-
-.cellGroup {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.cell {
-  // display: flex;
-  // flex-direction: column;
-  width: 0.96rem;
-  margin-right: 0.18rem;
-  margin-bottom: 0.18rem;
-
-  &:nth-child(3n + 3) {
-    margin-right: 0;
-  }
-
-  .cellImg {
-    position: relative;
-    width: 0.88rem;
-    height: 0.88rem;
-
-    &::before {
-      content: "";
-      position: absolute;
-      right: -0.06rem;
-      top: 0.03rem;
-      z-index: 8;
-      width: 0.84rem;
-      height: 0.84rem;
-      background: url("./img/audio-pan.png") no-repeat center;
-      background-size: contain;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .iconZan {
-      position: absolute;
-      bottom: 0.04rem;
-      left: 0.04rem;
-      z-index: 10;
-      padding: 0.03rem;
-      background: rgba(67, 67, 67, 0.3);
-      border-radius: 0.08rem;
-      backdrop-filter: blur(0.04rem);
-
-      font-size: 0.09rem;
-      font-weight: 500;
-      color: #ffffff;
-      line-height: 0.13rem;
-      display: flex;
-      align-items: center;
-
-      &::before {
-        content: "";
-        display: inline-block;
-        width: 0.12rem;
-        height: 0.12rem;
-        background: url("./img/icon-z.png") no-repeat center;
-        background-size: contain;
-      }
-    }
-  }
-
-  .cellImage {
-    position: relative;
-    width: 0.88rem;
-    height: 0.88rem;
-    border-radius: 0.12rem;
-    overflow: hidden;
-    z-index: 9;
-
-    img {
-      border-radius: 0.12rem;
-    }
-  }
-
-  .cellTitle {
-    font-size: 0.13rem;
-    color: #131415;
-    line-height: 0.18rem;
-    margin: 0.08rem 0 0.06rem;
-  }
-
-  .users {
-    display: flex;
-    align-items: center;
-
-    .userImg {
-      width: 0.2rem;
-      height: 0.2rem;
-      border-radius: 50%;
-      overflow: hidden;
-      margin-right: 0.04rem;
-      flex-shrink: 0;
-    }
-
-    .name {
-      font-size: 0.12rem;
-      color: #402424;
-      line-height: 0.14rem;
-    }
-  }
-}
-
-.sticky-section {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
+@import url("./index.less");
 </style>

src/views/creation/loading.vue

@@ -0,0 +1,71 @@
+<template>
+   <div class="loadingPop">
+      <div class="loadingCssBox">
+         <div class="loadingCssItem"></div>
+         <div class="loadingCssItem"></div>
+         <div class="loadingCssItem"></div>
+         <div class="loadingCssItem"></div>
+      </div>
+      <div class="loadingTip">资源加载中...</div>
+   </div>
+</template>
+
+<script>
+export default {
+   name: "loading"
+}
+</script>
+
+<style lang="less" scoped>
+@keyframes rotate {
+   0% {
+      transform: rotate(0deg);
+   }
+   90% {
+      transform: rotate(360deg);
+   }
+   100% {
+      transform: rotate(360deg);
+   }
+}
+.loadingPop {
+   position: fixed;
+   left: 0;
+   top: 0;
+   right: 0;
+   bottom: 0;
+   width: 100%;
+   height: 100%;
+   min-height: 100vh;
+   display: flex;
+   flex-direction: column;
+   justify-content: center;
+   align-items: center;
+   z-index: 9999999;
+   background: rgba(0, 0, 0, 0.5);
+   .loadingCssBox {
+      width: 0.27rem;
+      height: 0.27rem;
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      align-content: space-between;
+      margin-bottom: 0.24rem;
+      animation: rotate 1.5s linear infinite;
+      .loadingCssItem {
+         width: 0.11rem;
+         height: 0.11rem;
+         border-radius: 50%;
+         background: #11ffd4;
+         opacity: 0.5;
+         &:nth-child(2) {
+            opacity: 1;
+         }
+      }
+   }
+   .loadingTip {
+      font-size: 0.14rem;
+      color: #fff;
+   }
+}
+</style>

src/views/creation/share-model/index.vue

@@ -11,6 +11,7 @@
         <div class="uploadImg">
           <img src="../img/audio-pan.png" class="audioPan" crossorigin="anonymous" />
           <img class="muploader" :src="musicDetail.img ? musicDetail.img + '?t=' + new Date().getTime() : musicBg" crossorigin="anonymous" />
+          <img class="imgLabel" :src="musicDetail.videoUrl && musicDetail.videoUrl.lastIndexOf('mp4') !== -1 ? require('./images/videoLabel.png') : require('./images/audioLabel.png')" />
         </div>
         <div class="musicDetail">
           <p class="musicName van-ellipsis">
@@ -21,13 +22,21 @@
       </div>
 
       <div class="downloadSection">
-        <div class="qrcode">
+        <div class="qrcode" :class="{animate: isAnimate}"               
+            @mousedown="startOpenOutLink"
+            @touchstart="startOpenOutLink"
+            @mouseup="canceOpenOutLink"
+            @mouseleave="canceOpenOutLink"
+            @touchend="canceOpenOutLink">
           <!-- <canvas ref="canvasRef" class="qrcodeCanvas"></canvas> -->
           <vue-qr v-if="config" :text="config" :margin="10" :size="250" />
           <img src="../../../assets/images/icon_app.png" class="qrcodeLogo" />
         </div>
         <div class="qrtips">
-          <p class="tip">温馨提示：保存图片到相册或长按识别二维码进入查看喔～</p>
+          <div class="tit">温馨提示：</div>
+          <p class="tip">
+            保存图片到相册后，请在微信里扫码查看～
+          </p>
           <img src="../../../assets/images/logo-black.png" class="iconLogo" />
         </div>
       </div>
@@ -42,7 +51,9 @@
         <van-grid-item :icon="iconFriendRing" text="朋友圈" @click="onSavePath('wechat_circle')"></van-grid-item>
         <van-grid-item :icon="iconLink" text="复制链接" @click="copyText(config)"></van-grid-item>
       </van-grid>
-      <div class="btn van-hairline--top" @click="$emit('close')">取消</div>
+      <div class="btn van-hairline--top" @click="$emit('close')">
+        取消
+      </div>
     </div>
   </div>
 </template>
@@ -66,19 +77,35 @@ export default {
       image: null,
       canvasRef: null,
       config: null,
+      _time: null,
+      isAnimate: false
     };
   },
   mounted() {
     this.config = location.origin + location.pathname + "#/shareCreation?id=" + this.musicDetail.id;
+    console.log(this.musicDetail);
   },
   methods: {
+    startOpenOutLink(){
+      this.isAnimate = true
+      this._time = setTimeout(() => {
+        this.isAnimate = false
+        postMessage({
+          api: 'openOutLink',
+          content : {
+            "url" :  this.config
+          }
+        })
+      }, 1000);
+    },
+    canceOpenOutLink(){
+      this.isAnimate = false
+      clearTimeout(this._time)
+    },
     async saveImg() {
-      this.$toast.loading({
-        message: "图片生成中...",
-        forbidClick: true,
-      });
       setTimeout(() => {
         this.saveLoading = false;
+        this.$toast.clear();
       }, 100);
       postMessage(
         {
@@ -135,33 +162,33 @@ export default {
         return;
       }
       this.saveLoading = true;
-      // 判断是否已经生成图片
-      if (this.image) {
-        if (type) {
-          this.onSaveWe(type);
-        } else {
+      if(type){
+        this.onSaveWe(type);
+      }else{
+        this.$toast.loading({
+          forbidClick: true,
+          message: "下载中",
+          duration:0
+        });
+        if (this.image) {
           this.saveImg();
-        }
-      } else {
-        const container = document.getElementById("shareContent");
-        html2canvas(container, {
-          allowTaint: true,
-          useCORS: true,
-          backgroundColor: null,
-        })
-          .then(async (canvas) => {
-            const url = canvas.toDataURL("image/png");
-            this.image = url;
-            if (type) {
-              this.onSaveWe(type);
-            } else {
-              this.saveImg();
-            }
+        } else {
+          const container = document.getElementById("shareContent");
+          html2canvas(container, {
+            allowTaint: true,
+            useCORS: true,
+            backgroundColor: null,
           })
-          .catch(() => {
-            this.toast.clear();
-            this.saveLoading = false;
-          });
+            .then(async (canvas) => {
+              const url = canvas.toDataURL("image/png");
+              this.image = url;
+                this.saveImg();
+            })
+            .catch(() => {
+              this.$toast.clear();
+              this.saveLoading = false;
+            });
+        }
       }
     },
     copyText(text) {
@@ -265,12 +292,12 @@ export default {
     width: 56px;
     height: 56px;
     object-fit: cover;
-    border-radius: 6px;
+    border-radius: 8px;
   }
 
   .uploadImg {
     position: relative;
-    border-radius: 6px;
+    border-radius: 8px;
     margin-right: 0.16rem;
     line-height: 0;
 
@@ -282,6 +309,14 @@ export default {
       width: 56px;
       height: 56px;
     }
+    .imgLabel{
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 28px;
+      height: 14px;
+      z-index: 10;
+    }
   }
 
   .musicDetail {
@@ -324,7 +359,9 @@ export default {
 
     flex-shrink: 0;
     overflow: hidden;
-
+    &.animate{
+      transform: scale(1.1)
+    }
     .qrcodeCanvas {
       width: 100% !important;
       height: 100% !important;
@@ -352,7 +389,11 @@ export default {
     margin-left: 0.1rem;
     padding-left: 0.09rem;
     border-left: 1px dashed #d8d8d8;
-
+    .tit{
+      color: #01C1B5;
+      line-height: .24rem;
+      font-size: .13rem;
+    }
     .tip {
       font-size: 0.12rem;
       color: #777777;
@@ -361,8 +402,9 @@ export default {
 
     .iconLogo {
       width: 0.68rem;
-      height: 0.21rem;
-      margin: 0.12rem 0 0.04rem;
+      height: 0.19rem;
+      margin: .05rem 0 0;
+      display: block;
     }
 
     .downTip {
@@ -378,7 +420,8 @@ export default {
   position: relative;
   background-color: #fff;
   border-radius: 0.12rem 0.12rem 0 0;
-  padding-bottom: env(safe-area-inset-bottom);
+  //padding-bottom: env(safe-area-inset-bottom);
+  padding-bottom: 0.1rem;
 
   .iconClose {
     position: absolute;
@@ -397,6 +440,8 @@ export default {
 }
 
 .gridSection {
+  justify-content: space-between;
+  padding: 0 .13rem;
   .van-grid-item__icon {
     font-size: 0.44rem;
   }
@@ -404,9 +449,6 @@ export default {
     font-size: 0.12rem;
     color: #646566;
   }
-  .van-grid-item__content {
-    padding: 0.16rem 0.12rem;
-  }
 }
 
 .btn {

src/views/creation/textEllipsis.vue

@@ -0,0 +1,112 @@
+<template>
+   <div ref="ellipsisDom" class="ellipsis" :key="ellipsisData.key" :class="{ vis: !ellipsisData.computedReady }">
+      <span ref="textDom">{{ text }}</span>
+      <span v-show="ellipsisData.oversize && !ellipsisData.expanded">...</span>
+      <span v-show="ellipsisData.oversize" class="ellipsisAct" @click="handleExpand">{{ ellipsisData.expanded ? "收起" : "展开" }}</span>
+   </div>
+</template>
+
+<script>
+export default {
+   name: "TextEllipsis",
+   data() {
+      return {
+         ellipsisData: {
+            oversize: false,
+            computedReady: false, // 先隐形计算，计算好后，再根据配置显示
+            expanded: false,
+            key: 0
+         }
+      }
+   },
+   props: {
+      text: {
+         type: String
+      },
+      lines: {
+         type: Number,
+         default: 2 // 默认显示的行数
+      }
+   },
+   watch: {
+      text() {
+         // 强制刷新组件
+         this.ellipsisData.key++
+         this.ellipsisData.expanded = false
+         this.computeText()
+      }
+   },
+   created() {
+      this.computeText()
+   },
+   methods: {
+      getStyle(el, styleName) {
+         if (!el) return ""
+         if (styleName === "float") {
+            styleName = "cssFloat"
+         }
+         try {
+            const style = el.style[styleName]
+            if (style) return style
+            const computed = document.defaultView?.getComputedStyle(el, "")
+            return computed ? computed[styleName] : ""
+         } catch {
+            return el.style[styleName]
+         }
+      },
+      computeText() {
+         this.ellipsisData.oversize = false
+         this.ellipsisData.computedReady = false
+         this.$nextTick(() => {
+            let text = this.text
+            let height = 0
+            const lines = this.lines
+            const ellipsisDom = this.$refs.ellipsisDom
+            const textDom = this.$refs.textDom
+            if (this.ellipsisData.expanded) {
+               textDom.innerText = this.text
+               this.ellipsisData.oversize = true
+               this.ellipsisData.computedReady = true
+               return
+            }
+            if (!height && lines) {
+               const lineHeight = parseInt(this.getStyle(ellipsisDom, "lineHeight"))
+               height = lineHeight * lines
+            }
+            if (ellipsisDom.offsetHeight > height) {
+               this.ellipsisData.oversize = true
+               this.$nextTick(() => {
+                  while (ellipsisDom.offsetHeight > height) {
+                     if (ellipsisDom.offsetHeight > height * 3) {
+                        textDom.innerText = text = text.substring(0, Math.floor(text.length / 2))
+                     } else {
+                        textDom.innerText = text = text.substring(0, text.length - 1)
+                     }
+                  }
+               })
+            }
+            this.ellipsisData.computedReady = true
+         })
+      },
+      handleExpand() {
+         this.ellipsisData.expanded = !this.ellipsisData.expanded
+         this.computeText()
+      }
+   }
+}
+</script>
+
+<style lang="less" scoped>
+.ellipsis {
+   line-height: 0.2rem;
+   &.vis {
+      visibility: hidden;
+   }
+   .ellipsisAct {
+      cursor: pointer;
+      color: #14e0d3;
+      font-weight: 500;
+      margin-left: 2px;
+   }
+}
+</style>