Merge branch 'iteration-upload-works' into jenkins-main

package.json

@@ -48,6 +48,7 @@
     "query-string": "^7.1.1",
     "sortablejs": "^1.15.0",
     "swiper": "^9.0.5",
+    "tcplayer.js": "^4.8.0",
     "umi-request": "^1.4.0",
     "vant": "^4.0.0",
     "vconsole": "^3.15.0",

src/components/o-upload/index.tsx

@@ -208,7 +208,7 @@ export default defineComponent({
             ) : (
               <div class={styles.uploader}>
                 <Icon name={iconUploader} size="32" />
-                <p class={styles.uploaderText}>{this.tips}</p>
+                {this.tips && <p class={styles.uploaderText}>{this.tips}</p>}
               </div>
             )}
             <ColCropper ref="uploaderRef" option={this.options} getFile={this.getFile} />
@@ -228,7 +228,7 @@ export default defineComponent({
             ) : (
               <div class={styles.uploader}>
                 <Icon name={iconUploader} size="32" />
-                <p class={styles.uploaderText}>{this.tips}</p>
+                {this.tips && <p class={styles.uploaderText}>{this.tips}</p>}
               </div>
             )}
           </div>
@@ -250,7 +250,7 @@ export default defineComponent({
                 ) : (
                   <div class={styles.uploader}>
                     <Icon name={iconUploader} size="32" />
-                    <p class={styles.uploaderText}>{this.tips}</p>
+                    {this.tips && <p class={styles.uploaderText}>{this.tips}</p>}
                   </div>
                 )
             }}

src/components/the-video-tcplayer/index.module.less

@@ -0,0 +1,101 @@
+.video-container {
+  position: relative;
+  width: 100%;
+  --plyr-color-main: #FF8057;
+  height: 210px;
+
+  video {
+    width: 100%;
+    // object-fit: cover;
+  }
+
+  :global {
+    .video-back {
+      position: absolute;
+      left: 20px;
+      top: 20px;
+      color: #fff;
+      z-index: 99;
+      font-size: 24px;
+      width: 30px;
+      height: 30px;
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      padding: 4px 5px 4px 3px;
+    }
+
+    .plyr__poster {
+      background-size: cover;
+    }
+
+    .plyr__control--overlaid {
+      border: 1px solid #fff;
+      background-color: rgba(0, 0, 0, 0.2) !important;
+    }
+
+    .plyr--video .plyr__control:hover {
+      background-color: transparent !important;
+    }
+
+    .video-js {
+      width: 100%;
+      height: 100%;
+    }
+
+    .tcp-skin .vjs-play-progress {
+      background-color: var(--van-primary) !important;
+    }
+  }
+
+  .video {
+    position: relative;
+  }
+
+}
+
+.loadingVideo {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.9);
+  z-index: 10;
+}
+
+.playOver {
+  background: rgba(0, 0, 0, 0.5);
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  .tips {
+    font-size: 15px;
+    color: #ffffff;
+  }
+
+  .btn {
+    margin: 10px 0;
+    min-width: 94px;
+    font-size: 14px;
+    height: 28px;
+    line-height: 28px;
+  }
+
+  .replay {
+    padding-top: 12px;
+  }
+}
+
+.freeTxt {
+  font-size: 15px;
+  color: #ffffff;
+  line-height: 21px;
+  padding-top: 10px;
+}
+
+.freeRate {
+  color: #32ffd8;
+}

src/components/the-video-tcplayer/index.tsx

@@ -0,0 +1,193 @@
+import { defineComponent, PropType } from 'vue'
+import styles from './index.module.less'
+import TCPlayer from 'tcplayer.js'
+import 'tcplayer.js/dist/tcplayer.css'
+export default defineComponent({
+  name: 'o-video',
+  props: {
+    setting: {
+      type: Object,
+      default: () => ({})
+    },
+    controls: {
+      type: Boolean,
+      default: true
+    },
+    height: String,
+    src: {
+      type: String,
+      default: ''
+    },
+    poster: {
+      type: String,
+      default: ''
+    },
+    styleValue: {
+      type: Object,
+      default: () => ({})
+    },
+    preload: {
+      type: String as PropType<'auto' | 'metadata' | 'none'>,
+      default: 'auto'
+    },
+    currentTime: {
+      type: Boolean,
+      default: true
+    },
+    playsinline: {
+      type: Boolean,
+      default: true
+    },
+    onPlay: {
+      type: Function,
+      default: () => ({})
+    }
+  },
+  emits: ['exitfullscreen'],
+  data() {
+    return {
+      videoID: 'video' + Date.now() + Math.floor(Math.random() * 100),
+      player: null as any,
+      loading: true // 首次进入加载中
+    }
+  },
+  mounted() {
+    this._init()
+  },
+  methods: {
+    _init() {
+      // controls: [
+      //   'play-large' ,  // 中间的大播放按钮
+      //   'restart' ,  // 重新开始播放
+      //   'rewind' ,  // 按寻道时间倒带（默认 10 秒）
+      //   'play' ,  // 播放/暂停播放
+      //   'fast-forward' ,  // 快进查找时间（默认 10 秒）
+      //   'progress' ,  // 播放和缓冲的进度条和滑动条
+      //   'current-time' ,  // 播放的当前时间
+      //   ' duration' ,  // 媒体的完整持续时间
+      //   'mute' ,  // 切换静音
+      //   'volume', // 音量控制
+      //   'captions' ,  // 切换字幕
+      //   'settings' ,  // 设置菜单
+      //   'pip' ,  // 画中画（当前仅 Safari）
+      //   'airplay' ,  // Airplay（当前仅 Safari）
+      //   'download ' ,  // 显示一个下载按钮，其中包含指向当前源或您在选项中指定的自定义 URL 的链接
+      //   'fullscreen' ,  // 切换全屏
+      // ] ;
+      const Button = TCPlayer.getComponent('Button')
+      const BigPlayButton = TCPlayer.getComponent('BigPlayButton')
+      BigPlayButton.prototype.createEl = function () {
+        const el = Button.prototype.createEl.call(this)
+        const _html =
+          '<button><svg width="41px"height="41px"viewBox="0 0 41 41"version="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none"stroke-width="1"fill="none"fill-rule="evenodd"><g transform="translate(-167.000000, -155.000000)"><g transform="translate(0.000000, 85.000000)"><g transform="translate(158.000000, 70.000000)"><g transform="translate(9.000000, 0.000000)"><circle id="椭圆形"stroke="#FFFFFF"fill-opacity="0.1"fill="#D8D8D8"cx="20.5"cy="20.5"r="20"></circle><path d="M14.5483871,27.6859997 L14.5483871,13.4342349 C14.5480523,12.8729571 14.8729597,12.356555 15.3949624,12.0887034 C15.9169651,11.8208518 16.5522696,11.8445472 17.0503046,12.1504437 L28.6530473,19.2778563 C29.1119763,19.5602271 29.3887725,20.0426422 29.3887725,20.5601173 C29.3887725,21.0775924 29.1119763,21.5600075 28.6530473,21.8423783 L17.0503046,28.9697909 C16.5522696,29.2756874 15.9169651,29.2993828 15.3949624,29.0315312 C14.8729597,28.7636796 14.5480523,28.2472775 14.5483871,27.6859997 Z"id="路径"fill="#FFFFFF"fill-rule="nonzero"></path></g></g></g></g></g></svg></button>'
+
+        el.appendChild(
+          TCPlayer.dom.createEl('div', {
+            className: 'vjs-button-icon',
+            innerHTML: _html
+          })
+        )
+        return el
+      }
+      this.player = TCPlayer(this.videoID, {
+        appID: '',
+        controls: this.controls
+      }) // player-container-id 为播放器容器 ID，必须与 html 中一致
+      if (this.player) {
+        this.player.src(this.src) // url 播放地址
+        this.player.poster(this.poster || '')
+
+        if (this.preload === 'none') {
+          this.loading = false
+        }
+        this.player.on('loadstart', () => {
+          this.loading = false
+          this.domPlayVisibility(false)
+        })
+        this.player.on('play', () => {
+          this.onPlay && this.onPlay(this.player)
+        })
+
+        this.player.on('fullscreenchange', () => {
+          if (this.player.isFullscreen()) {
+            console.log('fullscreen')
+            const i = document.createElement('i')
+            i.id = 'fullscreen-back'
+            i.className = 'van-icon van-icon-arrow-left video-back'
+            i.addEventListener('click', () => {
+              this.player.exitFullscreen()
+            })
+            // console.log(document.getElementsByClassName('video-js'))
+            document.getElementsByClassName('video-js')[0].appendChild(i)
+          } else {
+            console.log('exitfullscreen')
+            const i = document.getElementById('fullscreen-back')
+            i && i.remove()
+          }
+        })
+      }
+    },
+    // 操作功能
+    domPlayVisibility(hide = true) {
+      const controls = document.querySelector('.vjs-big-play-button')
+      const controls2 = document.querySelector('.vjs-control-bar')
+      if (hide) {
+        controls?.setAttribute('style', 'display:none')
+        controls2?.setAttribute('style', 'display:none')
+      } else {
+        controls?.removeAttribute('style')
+        setTimeout(() => {
+          controls2?.removeAttribute('style')
+        }, 200)
+      }
+    },
+
+    onReplay() {
+      this.player.currentTime(0)
+      this.player.play()
+      this.domPlayVisibility(false)
+    },
+    onStop() {
+      this.player.currentTime(0)
+      this.player.pause()
+    }
+  },
+  unmounted() {
+    this.player?.pause()
+    this.player?.src('')
+    this.player?.dispose()
+  },
+  render() {
+    return (
+      <div class={styles['video-container']}>
+        <video
+          ref="video"
+          id={this.videoID}
+          class={styles['video']}
+          src={this.src}
+          playsinline={this.playsinline}
+          poster={this.poster}
+          preload={this.preload}
+          style={{ ...this.styleValue }}
+        ></video>
+        {/* </div> */}
+        {/* 加载视频使用 */}
+        {/* {this.loading && (
+          <div
+            class={styles.loadingVideo}
+            style={{
+              height: this.height || '210px'
+            }}>
+            <Loading
+              size={36}
+              color="#FF8057"
+              vertical
+              style={{ height: '100%', justifyContent: 'center' }}>
+              加载中...
+            </Loading>
+          </div>
+        )} */}
+      </div>
+    )
+  }
+})

src/helpers/oss-file-upload.ts

@@ -191,7 +191,6 @@ export const onOnlyFileUpload = async (action: string, params: any) => {
   } else {
     let file = ''
     let errorObj: any = null
-    console.log(params, 'params')
     const cos = new COS({
       Domain: 'https://oss.dayaedu.com',
       // getAuthorization 必选参数

src/helpers/request.ts

@@ -15,7 +15,7 @@ const request = extend({
   // requestType: 'form',
   hideLoading: true, // 默认都不显示加载
   timeout: 20000,
-  timeoutMessage: '请求超时',
+  timeoutMessage: '请求超时'
 })
 
 // request.use(async (ctx, next) => {
@@ -32,6 +32,7 @@ const request = extend({
 // 是否是初始化接口
 let initRequest = false
 let toast: ReturnType<typeof setTimeout>
+let authType = '' // 授权状态 - 作用于单独弹窗登录
 
 request.interceptors.request.use(
   (url, options: any) => {
@@ -50,6 +51,7 @@ request.interceptors.request.use(
     }
 
     initRequest = options.initRequest || false
+    authType = options.authType
     const Authorization = sessionStorage.getItem('Authorization') || ''
     const authHeaders: any = {}
     if (
@@ -99,7 +101,6 @@ request.interceptors.response.use(
       // closeToast()
     }, 100)
 
-
     if (res.status > 299 || res.status < 200) {
       clearTimeout(toast)
       const msg = '服务器错误，状态码' + res.status

src/helpers/utils.ts

@@ -83,7 +83,7 @@ export const setAuth = (token: any) => {
  * 获取token
  */
 export const getAuth = () => {
-  sessionStorage.getItem('Authorization')
+  return sessionStorage.getItem('Authorization')
 }
 
 /**
@@ -169,3 +169,25 @@ export const formatterDatePicker = (type: any, option: any) => {
   }
   return option
 }
+
+export const getGradeCh = (grade: number) => {
+  const template = [
+    '一年级',
+    '二年级',
+    '三年级',
+    '四年级',
+    '五年级',
+    '六年级',
+    '七年级',
+    '八年级',
+    '九年级'
+  ]
+
+  return template[grade]
+}
+
+export function checkPhone(phone: string) {
+  const phoneRule =
+    /^((13[0-9])|(14(0|[5-7]|9))|(15([0-3]|[5-9]))|(16(2|[5-7]))|(17[0-8])|(18[0-9])|(19([0-3]|[5-9])))\d{8}$/
+  return phoneRule.test(phone)
+}

src/router/routes-common.ts

@@ -188,6 +188,20 @@ export const router: RouteRecordRaw[] = [
       title: '课件记录'
     }
   },
+  {
+    path: '/creation',
+    component: () => import('@/views/creation/index'),
+    meta: {
+      title: '作品详情'
+    }
+  },
+  {
+    path: '/creation-edit',
+    component: () => import('@/views/creation/edit/index'),
+    meta: {
+      title: '作品详情'
+    }
+  }
 ]
 
 // 不需要登录的路由
@@ -280,12 +294,18 @@ export const rootRouter = [
     }
   },
   {
+    path: '/shareCreation',
+    component: () => import('@/views/creation/index-share'),
+    meta: {
+      title: '作品详情'
+    }
+  },
+  {
     path: '/:pathMatch(.*)*',
     component: () => import('@/views/404'),
     meta: {
       title: '404',
       platform: paymentType
     }
-  },
-  
+  }
 ]

src/views/creation/api.ts

@@ -0,0 +1,58 @@
+// userMusic/detail/1698984095609106434
+import request from '@/helpers/request'
+import { state } from '@/state'
+const platformApi = state.platformApi
+
+/** 详情 */
+export const api_userMusicDetail = (params: any): Promise<any> => {
+  return request.get(platformApi + `/userMusic/detail/${params}`)
+}
+
+/** 开放详情 */
+export const api_openUserMusicDetail = (params: any): Promise<any> => {
+  return request.get(platformApi + `/open/userMusic/detail/${params}`)
+}
+
+/**  点赞分页 */
+export const api_userMusicStarPage = (params: any): Promise<any> => {
+  return request.post(platformApi + `/userMusicStar/page`, {
+    data: params
+  })
+}
+
+/**  分享推荐作品 */
+export const api_openUserMusicPage = (params: any): Promise<any> => {
+  return request.post(platformApi + `/open/userMusic/page`, {
+    data: params
+  })
+}
+
+/** 点赞 */
+export const api_userMusicStar = (params: any): Promise<any> => {
+  return request.post(platformApi + '/userMusicStar/star', {
+    data: params,
+    auth: 'popup'
+  })
+}
+
+/** 保存草稿/发布作品 */
+export const api_userMusicSave = (params: any): Promise<any> => {
+  return request.post(platformApi + '/userMusic/save', {
+    data: params
+  })
+}
+
+/** 删除 */
+export const api_userMusicRemove = (params: any): Promise<any> => {
+  return request.post(platformApi + '/userMusic/remove', {
+    requestType: 'form',
+    params
+  })
+}
+
+/** 授权验证 */
+export const api_verification = (params: any): Promise<any> => {
+  return request.post(platformApi + '/open/user/verification', {
+    data: params
+  })
+}

src/views/creation/edit/index.module.less

@@ -0,0 +1,191 @@
+.sectionVideo {
+  position: relative;
+  line-height: 0;
+  overflow: visible !important;
+  margin-bottom: 24px !important;
+
+  .videoBg {
+    width: 100%;
+    height: 160px;
+    object-fit: cover;
+    border-radius: 10px;
+  }
+
+  .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;
+
+      &::before {
+        content: '';
+        width: 16px;
+        height: 16px;
+        display: inline-block;
+        background: url('../images/icon-cropper.png') no-repeat center;
+        background-size: contain;
+        margin-right: 4px;
+      }
+    }
+
+    .btnImg {
+      margin: 0;
+      height: inherit;
+      border: 0;
+      border-radius: 0;
+
+      :global {
+        .van-icon {
+          display: flex;
+          align-items: center;
+
+          &::before {
+            content: '';
+            width: 16px;
+            height: 16px;
+            display: inline-block;
+            background: url('../images/icon-image.png') no-repeat center;
+            background-size: contain;
+            margin-right: 4px;
+          }
+
+          &::after {
+            content: '相册获取封面';
+            font-size: 12px;
+            color: #fff;
+          }
+
+          img {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+.section {
+  margin: 12px 13px;
+  background: #FFFFFF;
+  border-radius: 10px;
+  overflow: hidden;
+  font-size: 16px;
+
+  :global {
+    .van-field__control::placeholder {
+      color: #aaa;
+    }
+
+  }
+}
+
+.sectionFile {
+  padding: 12px;
+  display: flex;
+
+  :global {
+    .van-uploader {
+      --upload-file-size: 62px;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+
+    .van-uploader__upload {
+      margin: 0;
+    }
+  }
+
+  .muploader {
+    position: relative;
+    z-index: 9;
+    width: 62px;
+    height: 62px;
+    border: none;
+    margin: 0;
+    border-radius: 8px;
+    background-color: #FFFFFF;
+  }
+
+  .uploadImg {
+    position: relative;
+    border-radius: 8px;
+    margin-right: 16px;
+
+    .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('../images/audio-pan.png') no-repeat center;
+      background-size: contain;
+      position: absolute;
+      top: 0;
+      right: -6px;
+      z-index: 1;
+      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;
+    }
+
+    .username {
+      padding-top: 4px;
+      font-size: 14px;
+      color: #777777;
+      line-height: 20px;
+    }
+  }
+}
+
+.btnGroup {
+  margin: 32px 24px 12px;
+  font-weight: 500;
+  font-size: 16px;
+}

src/views/creation/edit/index.tsx

@@ -0,0 +1,149 @@
+import MHeader from '@/components/o-header'
+import MSticky from '@/components/o-sticky'
+import { defineComponent, onMounted, reactive } from 'vue'
+import styles from './index.module.less'
+import { Button, Field, showToast } from 'vant'
+import MUploader from '@/components/o-upload'
+import { api_userMusicDetail, api_userMusicSave } from '../api'
+import { useRoute, useRouter } from 'vue-router'
+import videoBg from '../images/video-bg.png'
+import { postMessage } from '@/helpers/native-message'
+
+export default defineComponent({
+  name: 'creation-edit',
+  setup() {
+    const route = useRoute()
+    const router = useRouter()
+    const state = reactive({
+      id: route.query.id,
+      playType: '',
+      musicDetail: {} as any,
+      desc: '',
+      videoImg: '', // 视频封面
+      img: [] as any
+    })
+
+    const onSubmit = async () => {
+      try {
+        await api_userMusicSave({
+          id: state.id,
+          img: state.img.join(','),
+          videoImg: state.videoImg,
+          desc: state.desc || '我发布了一首演奏作品，快来听听吧～',
+          musicPracticeRecordId: state.musicDetail.musicPracticeRecordId,
+          type: 'FORMAL'
+        })
+
+        router.back()
+      } catch {
+        //
+      }
+    }
+
+    // 截图
+    const onCropper = () => {
+      postMessage(
+        {
+          api: 'videoCrop',
+          content: {
+            url: state.musicDetail.videoUrl
+          }
+        },
+        (res) => {
+          if (res?.content.videoCover) {
+            state.videoImg = res.content.videoCover
+          }
+        }
+      )
+    }
+
+    onMounted(async () => {
+      try {
+        const { data } = await api_userMusicDetail(state.id)
+        state.musicDetail = data
+        state.desc = data.desc
+        state.videoImg = data.videoImg
+        state.img = data.img ? [data.img] : []
+
+        if (data?.videoUrl.lastIndexOf('mp4') !== -1) {
+          state.playType = 'Video'
+        } else {
+          state.playType = 'Audio'
+        }
+      } catch {
+        //
+      }
+    })
+    return () => (
+      <div>
+        <MSticky position="top">
+          <MHeader border={false} />
+        </MSticky>
+
+        {state.playType === 'Video' && (
+          <div class={[styles.section, styles.sectionVideo]}>
+            <img src={state.videoImg || videoBg} class={styles.videoBg} />
+            <div class={styles.btnGroup}>
+              <MUploader
+                class={styles.btnImg}
+                cropper
+                deletable={false}
+                onUploadChange={(img) => {
+                  state.videoImg = img
+                }}
+                tips=""
+                options={{
+                  fixedNumber: [16, 9]
+                }}
+              />
+              <div class={styles.btnCropper} onClick={onCropper}>
+                视频截取封面
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div class={styles.section}>
+          <Field
+            rows={4}
+            autosize
+            type="textarea"
+            maxlength={150}
+            placeholder="我发布了一首演奏作品，快来听听吧～"
+            showWordLimit
+            v-model={state.desc}
+          />
+        </div>
+
+        <div class={[styles.section, styles.sectionFile]}>
+          <div class={styles.uploadImg}>
+            <MUploader
+              class={styles.muploader}
+              // native
+              cropper
+              deletable={false}
+              v-model:modelValue={state.img}
+            />
+            {/* <div class={styles.tip}>选封面</div> */}
+          </div>
+          <div class={styles.musicDetail}>
+            <p class={styles.musicName}>{state.musicDetail.musicSheetName}</p>
+            <p class={styles.username}>{state.musicDetail.username}</p>
+          </div>
+        </div>
+
+        <div class={styles.btnGroup}>
+          <Button
+            type="primary"
+            round
+            block
+            color="linear-gradient(73deg, #5BECFF 0%, #259CFE 100%)"
+            onClick={onSubmit}
+          >
+            {state.musicDetail.type === 'FORMAL' ? '保存' : '发布'}
+          </Button>
+        </div>
+      </div>
+    )
+  }
+})

src/views/creation/index-share.tsx

@@ -0,0 +1,406 @@
+import { defineComponent, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import styles from './index.module.less'
+import { Cell, Image, List, Popup, Slider, showDialog } from 'vant'
+import iconMember from './images/icon-member.png'
+import iconZan from './images/icon-zan.png'
+import iconZanActive from './images/icon-zan-active.png'
+import iconZ from './images/icon-z.png'
+import iconPlay from './images/icon-play.png'
+import iconPause from './images/icon-pause.png'
+import { browser, getAuth, getGradeCh, getSecondRPM, removeAuth } from '@/helpers/utils'
+import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
+import {
+  api_openUserMusicDetail,
+  api_openUserMusicPage,
+  api_userMusicStar,
+  api_verification
+} from './api'
+import MEmpty from '@/components/o-empty'
+import { nextTick } from 'process'
+import MVideo from '@/components/the-video-tcplayer'
+import LoginModel from './login-model'
+import { setLogout } from '@/state'
+import MWxTip from '@/components/o-wx-tip'
+import { usePageVisibility } from '@vant/use'
+import videoBg from './images/video-bg.png'
+
+export default defineComponent({
+  name: 'creation-detail',
+  setup() {
+    const route = useRoute()
+    const router = useRouter()
+    const audioId = 'a' + +Date.now() + Math.floor(Math.random() * 100)
+
+    const state = reactive({
+      id: route.query.id,
+      loginTag: false, // 是否登录标识
+      loginStatus: false,
+      playType: '' as 'Audio' | 'Video' | '', // 播放类型
+      musicDetail: {} as any,
+      timer: null as any,
+      paused: true,
+      audioWidth: 0,
+      currentTime: 0,
+      duration: 0.1,
+      loop: false,
+      dragStatus: false, // 是否开始拖动
+      isClick: false,
+      list: [] as any,
+      listState: {
+        dataShow: true, // 判断是否有数据
+        loading: false,
+        finished: false
+      },
+      params: {
+        page: 1,
+        rows: 20
+      },
+      messageStatus: false,
+      message: ''
+    })
+    // window.AudioContext = window.AudioContext || window.webkitAudioContext;
+    const audioDom = new Audio()
+    audioDom.controls = true
+    audioDom.style.width = '100%'
+    audioDom.className = styles.audio
+
+    /** 改变播放时间 */
+    const handleChangeTime = (val: number) => {
+      state.currentTime = val
+      clearTimeout(state.timer)
+      state.timer = setTimeout(() => {
+        audioDom.currentTime = val
+        state.timer = null
+      }, 60)
+    }
+
+    // 切换音频播放
+    const onToggleAudio = (e: any) => {
+      e.stopPropagation()
+      if (audioDom.paused) {
+        audioDom.play()
+      } else {
+        audioDom.pause()
+      }
+
+      state.paused = audioDom.paused
+    }
+
+    // 点赞
+    const onStarChange = async () => {
+      try {
+        await api_userMusicStar({
+          userMusicId: state.id,
+          star: !state.musicDetail.starFlag
+        })
+
+        state.musicDetail.starFlag = !state.musicDetail.starFlag
+        if (state.musicDetail.starFlag) {
+          state.musicDetail.likeNum += 1
+        } else {
+          state.musicDetail.likeNum -= 1
+        }
+      } catch (e: any) {
+        // 处理没有登录的状态
+        const message = e?.message
+        if (!(message.indexOf('5000') === -1 && message.indexOf('authentication') === -1)) {
+          state.loginStatus = true
+        }
+      }
+    }
+
+    // 获取列表
+    const getList = async () => {
+      try {
+        if (state.isClick) return
+        state.isClick = true
+        const res = await api_openUserMusicPage({
+          type: 'FORMAL',
+          exclusionId: state.id,
+          sort: 1,
+          ...state.params
+        })
+        state.listState.loading = false
+        const result = res.data || {}
+        // 处理重复请求数据
+        if (state.list.length > 0 && result.current === 1) {
+          return
+        }
+        state.list = state.list.concat(result.rows || [])
+        state.listState.finished = result.current >= result.pages
+        state.params.page = result.current + 1
+        state.listState.dataShow = state.list.length > 0
+        state.isClick = false
+      } catch {
+        state.listState.dataShow = false
+        state.listState.finished = true
+        state.isClick = false
+      }
+    }
+
+    const onDetail = (item: any) => {
+      router.push({
+        path: '/shareCreation',
+        query: {
+          id: item.id
+        }
+      })
+    }
+
+    const initAudio = () => {
+      try {
+        audioDom.src = state.musicDetail.videoUrl
+        audioDom.load()
+        audioDom.oncanplaythrough = () => {
+          state.paused = audioDom.paused
+          state.duration = audioDom.duration
+        }
+        // 播放时监听
+        audioDom.addEventListener('timeupdate', () => {
+          state.duration = audioDom.duration
+          state.currentTime = audioDom.currentTime
+          const rate = (state.currentTime / state.duration) * 100
+          state.audioWidth = rate > 100 ? 100 : rate
+        })
+        audioDom.addEventListener('ended', () => {
+          state.paused = audioDom.paused
+        })
+      } catch (e) {
+        //
+        console.log(e)
+      }
+    }
+
+    const __init = async () => {
+      try {
+        const res = await api_openUserMusicDetail(state.id)
+
+        if (res.code === 999) {
+          state.message = res.message
+          state.messageStatus = true
+          return
+        } else {
+          state.musicDetail = res.data
+          getList()
+          // 判断是视频还是音频
+
+          if (res.data.videoUrl.lastIndexOf('mp4') !== -1) {
+            state.playType = 'Video'
+          } else {
+            state.playType = 'Audio'
+            // 初始化
+            nextTick(() => {
+              initAudio()
+            })
+          }
+        }
+      } catch (err) {
+        //
+        state.listState.dataShow = false
+      }
+    }
+
+    const pageVisibility = usePageVisibility()
+    watch(pageVisibility, (value) => {
+      console.log(value)
+      if (value === 'hidden') {
+        if (audioDom) {
+          audioDom.pause()
+          state.paused = audioDom.paused
+        }
+      }
+    })
+    onMounted(async () => {
+      __init()
+    })
+
+    onUnmounted(() => {
+      if (audioDom) {
+        audioDom.pause()
+        state.paused = audioDom.paused
+      }
+    })
+
+    onBeforeRouteUpdate((to: any) => {
+      state.id = to.query.id
+      state.playType = ''
+      state.params.page = 1
+      if (audioDom) {
+        audioDom.currentTime = 0
+        audioDom.pause()
+        state.paused = audioDom.paused
+      }
+      state.list = []
+      __init()
+    })
+    return () => (
+      <div class={styles.creation}>
+        {/* <video
+          src={state.musicDetail.videoUrl}
+          style="width: 100%;height: 200px"
+          controls></video> */}
+        <div class={styles.playSection}>
+          {state.playType === 'Video' && (
+            <MVideo
+              src={state.musicDetail.videoUrl}
+              poster={state.musicDetail?.videoImg || videoBg}
+            />
+          )}
+          {state.playType === 'Audio' && (
+            <div class={styles.audioSection}>
+              <div class={styles.audioContainer}>
+                {/* <div
+                  id={audioId}
+                  onClick={(e: MouseEvent) => {
+                    e.stopPropagation();
+                  }}></div> */}
+                <div
+                  class={styles.waveActive}
+                  style={{
+                    width: state.audioWidth + '%'
+                  }}
+                ></div>
+                <div class={styles.waveDefault}></div>
+              </div>
+
+              <div class={styles.audioBox}>
+                <div class={[styles.audioPan, state.paused && styles.imgRotate]}>
+                  <Image class={styles.audioImg} src={state.musicDetail?.img} />
+                </div>
+                <i class={styles.audioPoint}></i>
+                <i class={[styles.audioZhen, state.paused && styles.active]}></i>
+              </div>
+              <div
+                class={[styles.controls]}
+                onClick={(e: Event) => {
+                  e.stopPropagation()
+                }}
+                onTouchmove={(e: TouchEvent) => {
+                  // emit('close');
+                }}
+              >
+                <div class={styles.actions}>
+                  <div class={styles.actionBtn} onClick={onToggleAudio}>
+                    <img src={state.paused ? iconPlay : iconPause} />
+                  </div>
+                </div>
+                <div class={[styles.slider]}>
+                  <Slider
+                    step={0.01}
+                    class={styles.timeProgress}
+                    v-model={state.currentTime}
+                    max={state.duration}
+                    onUpdate:modelValue={(val) => {
+                      handleChangeTime(val)
+                    }}
+                    onDragStart={() => {
+                      state.dragStatus = true
+                      console.log('onDragStart')
+                    }}
+                    onDragEnd={() => {
+                      state.dragStatus = false
+                      console.log('onDragEnd')
+                    }}
+                  />
+                </div>
+                <div class={styles.time}>
+                  <div>{getSecondRPM(state.currentTime)}</div>
+                  <span>/</span>
+                  <div>{getSecondRPM(state.duration)}</div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <Cell class={styles.userSection} center border={false}>
+          {{
+            icon: () => <Image class={styles.userLogo} src={state.musicDetail.avatar} />,
+            title: () => (
+              <div class={styles.userInfo}>
+                <p class={styles.name}>
+                  <span>{state.musicDetail.username}</span>
+                  {state.musicDetail.vipFlag && <img src={iconMember} class={styles.iconMember} />}
+                </p>
+                <p class={styles.sub}>
+                  {state.musicDetail.subjectName}{' '}
+                  {getGradeCh(state.musicDetail.currentGradeNum - 1)}
+                </p>
+              </div>
+            ),
+            value: () => (
+              <div
+                class={[styles.zan, state.musicDetail.starFlag && styles.zanActive]}
+                onClick={onStarChange}
+              >
+                <img
+                  src={state.musicDetail.starFlag ? iconZanActive : iconZan}
+                  class={styles.iconZan}
+                />
+                {state.musicDetail.likeNum}
+              </div>
+            )
+          }}
+        </Cell>
+
+        <div class={styles.musicSection}>
+          <div class={styles.musicName}>
+            <span class={styles.musicTag}>曲目名称</span>
+            {state.musicDetail?.musicSheetName}
+          </div>
+          {state.musicDetail?.desc && <div class={styles.musicDesc}>{state.musicDetail?.desc}</div>}
+        </div>
+
+        <div class={styles.likeSection}>
+          <div class={styles.likeTitle}>推荐作品</div>
+
+          {state.listState.dataShow ? (
+            <List
+              finished={state.listState.finished}
+              finishedText=" "
+              class={[styles.container, styles.containerInformation]}
+              onLoad={getList}
+              immediateCheck={false}
+            >
+              <div class={styles.cellGroup}>
+                {state.list.map((item: any) => (
+                  <div class={styles.cell} onClick={() => onDetail(item)}>
+                    <div class={styles.cellImg}>
+                      <Image class={styles.cellImage} src={item.img} fit="cover" />
+
+                      <div class={styles.iconZan}>{item.likeNum}</div>
+                    </div>
+                    <div class={[styles.cellTitle, 'van-ellipsis']}>{item.musicSheetName}</div>
+                    <div class={styles.users}>
+                      <Image src={item.avatar} class={styles.userImg} />
+                      <span class={styles.name}>{item.username}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </List>
+          ) : (
+            <MEmpty tips="暂无数据" />
+          )}
+        </div>
+
+        <Popup
+          v-model:show={state.loginStatus}
+          style={{ background: 'transparent', overflow: 'inherit' }}
+        >
+          <LoginModel
+            onClose={() => (state.loginStatus = false)}
+            onConfirm={async (val: boolean) => {
+              state.loginTag = val
+              state.loginStatus = false
+              const { data } = await api_openUserMusicDetail(state.id)
+              state.musicDetail = data
+            }}
+          />
+        </Popup>
+
+        <MWxTip v-model:show={state.messageStatus} message={state.message} />
+      </div>
+    )
+  }
+})

src/views/creation/index.module.less

@@ -0,0 +1,570 @@
+.playSection {
+  min-height: 175px;
+
+  :global {
+    .vjs-poster {
+      background-size: cover;
+    }
+
+    .video-js .vjs-progress-control:hover .vjs-progress-holder {
+      font-size: inherit !important;
+    }
+
+    .video-js .vjs-slider:focus {
+      box-shadow: none !important;
+      text-shadow: none !important;
+    }
+  }
+}
+
+@keyframes rotateImg {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.audioSection {
+  position: relative;
+  background: url('./images/audio-banner-bg.png') no-repeat top center;
+  background-size: cover;
+  height: 175px;
+
+  .audioContainer {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 196px;
+    height: 35px;
+    transform: translate(-50%, 60px);
+
+    .waveActive,
+    .waveDefault {
+      width: 100%;
+      height: 100%;
+    }
+
+    .waveDefault {
+      position: absolute;
+      top: 0;
+      left: 0;
+      background: url('./images/wave-1.png')no-repeat center left;
+      background-size: cover;
+    }
+
+    .waveActive {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      background: url('./images/wave-2.png')no-repeat center left;
+      background-size: cover;
+    }
+  }
+
+
+  .audioBox {
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 50%);
+    z-index: 2;
+    width: 74px;
+    height: 75px;
+    background: url('./images/audio-bg.png') no-repeat center;
+    background-size: contain;
+
+    // &::after {
+    //   content: '';
+    //   width: 134px;
+    //   height: 73px;
+    //   position: absolute;
+    //   left: 50%;
+    //   transform: translate(-50%, 50%);
+    //   background: url('./images/audio-shadow.png') no-repeat center;
+    //   background-size: contain;
+    //   z-index: -1;
+    // }
+    .audioPan {
+      position: absolute;
+      left: 8px;
+      top: 6px;
+      z-index: 8;
+      width: 59px;
+      height: 60px;
+      background: url('./images/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: 32px;
+      height: 32px;
+      border-radius: 50%;
+      overflow: hidden;
+    }
+
+    .audioPoint {
+      position: absolute;
+      z-index: 9;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 8px;
+      height: 8px;
+      background: url('./images/audio-point.png') no-repeat center;
+      background-size: contain;
+    }
+
+    .audioZhen {
+      position: absolute;
+      z-index: 9;
+      right: -4px;
+      top: -33px;
+      width: 26px;
+      height: 87px;
+      background: url('./images/audio-zhen.png') no-repeat center;
+      background-size: contain;
+      transition: transform .5s ease-in-out;
+
+      &.active {
+        transform: rotate(92deg) translate3d(0, 0, 3px);
+        transition: transform .5s ease-in-out;
+      }
+    }
+  }
+
+}
+
+.controls {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 44px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  flex-direction: row;
+  transition: all 0.5s;
+  padding: 0 12px;
+
+  &>div {
+    display: flex;
+    align-items: center;
+  }
+
+  &.hide {
+    transform: translateY(100%);
+  }
+
+
+
+  .actionBtn {
+    line-height: 0;
+    margin-right: 4px;
+
+    img {
+      width: 14px;
+      height: 14px;
+      margin-bottom: -2px;
+    }
+  }
+
+  .time {
+    display: flex;
+    justify-content: space-between;
+    flex: 1;
+    min-width: 86px;
+    font-size: 12px;
+    color: #131415;
+    line-height: 20px;
+
+    span {
+      font-size: 12px;
+      padding: 0 1px;
+    }
+  }
+
+  .slider {
+    width: 100%;
+    margin: 0 12px;
+    --van-slider-bar-height: 4px;
+    --van-slider-button-width: 13px !important;
+    --van-slider-button-height: 13px !important;
+    --van-slider-inactive-background: #fff;
+    --van-slider-active-background: #269EFE !important;
+
+    :global {
+
+      .van-loading {
+        width: 100%;
+        height: 100%;
+      }
+
+    }
+  }
+
+}
+
+.userSection {
+  padding: 15px 12px;
+  background-color: transparent;
+
+  .userLogo {
+    width: 44px;
+    height: 44px;
+    border: 1px solid #FFFFFF;
+    margin-right: 10px;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+
+  .userInfo {
+    .name {
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      font-weight: 500;
+      color: #333333;
+      line-height: 22px;
+
+      span {
+        display: inline-block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100px;
+      }
+    }
+
+    .sub {
+      padding-top: 2px;
+      font-size: 12px;
+      color: #777777;
+      line-height: 17px;
+    }
+
+    .iconMember {
+      margin-left: 6px;
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  .zan {
+    background: #FFFFFF;
+    border-radius: 13px;
+    font-size: 14px;
+    color: #777777;
+    line-height: 20px;
+    padding: 4px 9px 3px;
+    display: inline-flex;
+    align-items: center;
+
+    &.zanActive {
+      background: #F7EEEE;
+      color: #FF6A6A;
+    }
+
+    .iconZan {
+      width: 18px;
+      height: 18px;
+      margin-right: 2px;
+    }
+  }
+}
+
+.musicSection {
+  margin: 0 13px 12px;
+  padding: 14px 12px;
+  background: #FFFFFF;
+  border-radius: 10px;
+
+  .musicName {
+    font-size: 15px;
+    font-weight: 500;
+    color: #333333;
+    line-height: 21px;
+    // display: flex;
+    // align-items: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+
+    .musicTag {
+      margin-right: 6px;
+      padding: 1px 6px;
+      font-size: 12px;
+      color: #FF7B31;
+      line-height: 17px;
+      background: rgba(255, 166, 115, 0.07);
+      border-radius: 9px;
+      border: 1px solid #FFBF9A;
+      font-weight: 400;
+      vertical-align: text-bottom;
+    }
+  }
+
+  .musicDesc {
+    padding-top: 8px;
+    font-size: 14px;
+    color: #777777;
+    line-height: 20px;
+  }
+}
+
+.likeSection {
+  margin: 0 13px 12px;
+  background: #FFFFFF;
+  border-radius: 10px;
+  padding: 10px 12px;
+
+  .likeTitle {
+    display: flex;
+    align-items: center;
+    font-size: 17px;
+    font-weight: 600;
+    color: #333333;
+    line-height: 24px;
+    padding-bottom: 8px;
+
+    &::before {
+      display: inline-block;
+      content: '';
+      width: 4px;
+      height: 14px;
+      border-radius: 2px;
+      background: #FF8057;
+      margin-right: 6px;
+    }
+  }
+}
+
+.likeItem {
+  padding: 16px 0;
+
+  .userLogo {
+    border-radius: 50%;
+    overflow: hidden;
+    width: 42px;
+    height: 42px;
+    margin-right: 7px;
+  }
+
+  .userInfo {
+    .name {
+      font-size: 16px;
+      font-weight: 500;
+      color: #333333;
+      line-height: 22px;
+    }
+
+    .sub {
+      padding-top: 2px;
+      font-size: 13px;
+      color: #777777;
+      line-height: 18px;
+    }
+  }
+
+  .time {
+    font-size: 13px;
+    color: #777777;
+    line-height: 18px;
+  }
+}
+
+
+.bottomSection {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff;
+  padding: 15px 12px;
+
+  .bottomShare {
+    display: flex;
+    align-items: center;
+
+    p {
+      padding: 0 15px;
+      text-align: center;
+      line-height: 0;
+
+      &:first-child {
+        padding-left: 5px;
+      }
+    }
+
+    img {
+      width: 18px;
+      height: 18px;
+    }
+
+    span {
+      padding-top: 8px;
+      font-size: 12px;
+      color: #333333;
+      line-height: 17px;
+      display: block;
+    }
+  }
+
+  .btnEdit {
+    font-size: 14px;
+    font-weight: 500;
+    background: linear-gradient(135deg, #19F1E1 0%, #0094FF 100%);
+    color: #FFFFFF;
+    line-height: 22px;
+    min-width: 80px;
+    height: 30px;
+    border: none;
+  }
+}
+
+.popupContainer {
+  width: 80%;
+
+
+  .popupContent {
+    padding: 29px 0 25px;
+    text-align: center;
+    font-size: 18px;
+    font-weight: 500;
+    color: #333333;
+    line-height: 25px;
+  }
+
+  .popupBtnGroup {
+    text-align: center;
+    margin-bottom: 22px;
+
+    :global {
+      .van-button {
+        height: 40px;
+        font-size: 16px;
+        font-weight: 400 !important;
+        line-height: 22px;
+        min-width: 122px;
+
+        &:last-child {
+          margin-left: 10px;
+          background: linear-gradient(to right, #5BECFF, #259CFE);
+          border: none;
+        }
+      }
+    }
+  }
+}
+
+.cellGroup {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.cell {
+  // display: flex;
+  // flex-direction: column;
+  width: 96px;
+  margin-right: 18px;
+  margin-bottom: 18px;
+
+  &:nth-child(3n + 3) {
+    margin-right: 0;
+  }
+
+  .cellImg {
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      right: -8px;
+      top: 3px;
+      z-index: 8;
+      width: 84px;
+      height: 84px;
+      background: url('./images/audio-pan.png') no-repeat center;
+      background-size: contain;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .iconZan {
+      position: absolute;
+      bottom: 4px;
+      left: 4px;
+      z-index: 10;
+      padding: 3px;
+      background: rgba(67, 67, 67, 0.3);
+      border-radius: 8px;
+      backdrop-filter: blur(4px);
+
+      font-size: 9px;
+      font-weight: 500;
+      color: #FFFFFF;
+      line-height: 13px;
+      display: flex;
+      align-items: center;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        background: url('./images/icon-z.png') no-repeat center;
+        background-size: contain;
+      }
+    }
+  }
+
+  .cellImage {
+    position: relative;
+    width: 88px;
+    height: 88px;
+    border-radius: 12px;
+    z-index: 9;
+
+    :global {
+      img {
+        border-radius: 12px;
+      }
+    }
+  }
+
+  .cellTitle {
+    font-size: 13px;
+    color: #131415;
+    line-height: 18px;
+    margin: 8px 0 6px;
+  }
+
+  .users {
+    display: flex;
+    align-items: center;
+
+    .userImg {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      overflow: hidden;
+      margin-right: 4px;
+      flex-shrink: 0;
+    }
+
+    .name {
+      font-size: 12px;
+      color: #402424;
+      line-height: 14px;
+    }
+  }
+}

src/views/creation/index.tsx

@@ -0,0 +1,464 @@
+import { defineComponent, nextTick, onMounted, onUnmounted, reactive, watch } from 'vue'
+// import WaveSurfer from 'wavesurfer.js';
+import styles from './index.module.less'
+import MSticky from '@/components/o-sticky'
+import MHeader from '@/components/o-header'
+import { Button, Cell, Image, List, Popup, Slider, showDialog, showToast } from 'vant'
+import iconDownload from './images/icon-download.png'
+import iconShare from './images/icon-share.png'
+import iconDelete from './images/icon-delete.png'
+import iconMember from './images/icon-member.png'
+import iconZan from './images/icon-zan.png'
+import iconZanActive from './images/icon-zan-active.png'
+import iconPlay from './images/icon-play.png'
+import iconPause from './images/icon-pause.png'
+import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
+import { browser, getGradeCh, getSecondRPM } from '@/helpers/utils'
+import { useRoute, useRouter } from 'vue-router'
+import { api_userMusicDetail, api_userMusicRemove, api_userMusicStarPage } from './api'
+import MEmpty from '@/components/o-empty'
+import dayjs from 'dayjs'
+import MVideo from '@/components/the-video-tcplayer'
+import ShareModel from './share-model'
+import { usePageVisibility } from '@vant/use'
+import videoBg from './images/video-bg.png'
+
+export default defineComponent({
+  name: 'creation-detail',
+  setup() {
+    const route = useRoute()
+    const router = useRouter()
+    const audioId = 'a' + +Date.now() + Math.floor(Math.random() * 100)
+
+    const state = reactive({
+      id: route.query.id,
+      deleteStatus: false,
+      shareStatus: false,
+      playType: '' as 'Audio' | 'Video' | '', // 播放类型
+      musicDetail: {} as any,
+      timer: null as any,
+      audioWidth: 0,
+      paused: true,
+      currentTime: 0,
+      duration: 0.1,
+      loop: false,
+      dragStatus: false, // 是否开始拖动
+      isClick: false,
+      list: [] as any,
+      listState: {
+        dataShow: true, // 判断是否有数据
+        loading: false,
+        finished: false
+      },
+      params: {
+        page: 1,
+        rows: 20
+      }
+    })
+    const audioDom = new Audio()
+    audioDom.controls = true
+    audioDom.style.width = '100%'
+    audioDom.className = styles.audio
+
+    /** 改变播放时间 */
+    const handleChangeTime = (val: number) => {
+      state.currentTime = val
+      clearTimeout(state.timer)
+      state.timer = setTimeout(() => {
+        // audioRef.value.currentTime = val;
+        audioDom.currentTime = val
+        state.timer = null
+      }, 60)
+    }
+
+    // 切换音频播放
+    const onToggleAudio = (e: any) => {
+      e.stopPropagation()
+      if (audioDom.paused) {
+        audioDom.play()
+      } else {
+        audioDom.pause()
+      }
+
+      state.paused = audioDom.paused
+    }
+
+    // 获取列表
+    const getStarList = async () => {
+      try {
+        if (state.isClick) return
+        state.isClick = true
+        const res = await api_userMusicStarPage({
+          userMusicId: state.id,
+          ...state.params
+        })
+        state.listState.loading = false
+        const result = res.data || {}
+        // 处理重复请求数据
+        if (state.list.length > 0 && result.current === 1) {
+          return
+        }
+        state.list = state.list.concat(result.rows || [])
+        state.listState.finished = result.current >= result.pages
+        state.params.page = result.current + 1
+        state.listState.dataShow = state.list.length > 0
+        state.isClick = false
+      } catch {
+        state.listState.dataShow = false
+        state.listState.finished = true
+        state.isClick = false
+      }
+    }
+
+    const initAudio = () => {
+      audioDom.src = state.musicDetail.videoUrl
+      audioDom.load()
+      audioDom.oncanplaythrough = () => {
+        state.paused = audioDom.paused
+        state.duration = audioDom.duration
+      }
+      // 播放时监听
+      audioDom.addEventListener('timeupdate', () => {
+        state.duration = audioDom.duration
+        state.currentTime = audioDom.currentTime
+        const rate = (state.currentTime / state.duration) * 100
+        state.audioWidth = rate > 100 ? 100 : rate
+      })
+      audioDom.addEventListener('ended', () => {
+        state.paused = audioDom.paused
+      })
+      // const wavesurfer = WaveSurfer.create({
+      //   container: document.querySelector(`#${audioId}`) as HTMLElement,
+      //   waveColor: '#fff',
+      //   progressColor: '#2FA1FD',
+      //   url: state.musicDetail.videoUrl,
+      //   cursorWidth: 0,
+      //   height: 35,
+      //   width: 'auto',
+      //   normalize: true,
+      //   // Set a bar width
+      //   barWidth: 2,
+      //   // Optionally, specify the spacing between bars
+      //   barGap: 2,
+      //   // And the bar radius
+      //   barRadius: 4,
+      //   barHeight: 0.6,
+      //   autoScroll: true,
+      //   /** If autoScroll is enabled, keep the cursor in the center of the waveform during playback */
+      //   autoCenter: true,
+      //   hideScrollbar: false,
+      //   media: audioDom
+      // });
+
+      // wavesurfer.once('interaction', () => {
+      //   // wavesurfer.play();
+      // });
+      // wavesurfer.once('ready', () => {
+      //   state.paused = audioDom.paused;
+      //   state.duration = audioDom.duration;
+      // });
+
+      // wavesurfer.on('finish', () => {
+      //   state.paused = true;
+      // });
+
+      // // 播放时监听
+      // audioDom.addEventListener('timeupdate', () => {
+      //   state.currentTime = audioDom.currentTime;
+      // });
+    }
+
+    // 删除作品
+    const onDelete = async () => {
+      try {
+        await api_userMusicRemove({ id: state.id })
+
+        setTimeout(() => {
+          state.deleteStatus = false
+          showToast('删除成功')
+        }, 100)
+
+        setTimeout(() => {
+          if (browser().isApp) {
+            postMessage({
+              api: 'goBack'
+            })
+          } else {
+            router.back()
+          }
+        }, 1200)
+      } catch {
+        //
+      }
+    }
+
+    // 下载
+    const onDownload = async () => {
+      await promisefiyPostMessage({
+        api: 'saveFile',
+        content: {
+          url: state.musicDetail.videoUrl
+        }
+      })
+    }
+
+    const pageVisibility = usePageVisibility()
+    watch(pageVisibility, (value) => {
+      if (value === 'hidden') {
+        if (audioDom) {
+          audioDom.pause()
+          state.paused = audioDom.paused
+        }
+      }
+    })
+    onMounted(async () => {
+      try {
+        const res = await api_userMusicDetail(state.id)
+        // console.log(res);
+        if (res.code === 999) {
+          showDialog({
+            message: res.message,
+            theme: 'round-button',
+            confirmButtonColor: 'linear-gradient(73deg, #5BECFF 0%, #259CFE 100%)'
+          }).then(() => {
+            if (browser().isApp) {
+              postMessage({
+                api: 'goBack'
+              })
+            } else {
+              router.back()
+            }
+          })
+          return
+        }
+        state.musicDetail = res.data || {}
+        getStarList()
+        // 判断是视频还是音频
+        if (res.data.videoUrl.lastIndexOf('mp4') !== -1) {
+          state.playType = 'Video'
+        } else {
+          state.playType = 'Audio'
+          // 初始化
+          nextTick(() => {
+            initAudio()
+          })
+        }
+      } catch {
+        //
+      }
+    })
+
+    onUnmounted(() => {
+      if (audioDom) {
+        audioDom.pause()
+        state.paused = audioDom.paused
+      }
+    })
+    return () => (
+      <div class={styles.creation}>
+        <MSticky position="top">
+          <MHeader border={false} isBack={route.query.platformType != 'ANALYSIS'} />
+        </MSticky>
+        <div class={styles.playSection}>
+          {state.playType === 'Video' && (
+            <MVideo
+              src={state.musicDetail?.videoUrl}
+              poster={state.musicDetail?.videoImg || videoBg}
+            />
+          )}
+          {state.playType === 'Audio' && (
+            <div class={styles.audioSection}>
+              <div class={styles.audioContainer}>
+                {/* <div
+                  id={audioId}
+                  onClick={(e: MouseEvent) => {
+                    e.stopPropagation();
+                  }}></div> */}
+                <div
+                  class={styles.waveActive}
+                  style={{
+                    width: state.audioWidth + '%'
+                  }}
+                ></div>
+                <div class={styles.waveDefault}></div>
+              </div>
+
+              <div class={styles.audioBox}>
+                <div class={[styles.audioPan, state.paused && styles.imgRotate]}>
+                  <Image class={styles.audioImg} src={state.musicDetail?.img} />
+                </div>
+                <i class={styles.audioPoint}></i>
+                <i class={[styles.audioZhen, state.paused && styles.active]}></i>
+              </div>
+              <div
+                class={[styles.controls]}
+                onClick={(e: Event) => {
+                  e.stopPropagation()
+                }}
+                onTouchmove={(e: TouchEvent) => {
+                  // emit('close');
+                }}
+              >
+                <div class={styles.actions}>
+                  <div class={styles.actionBtn} onClick={onToggleAudio}>
+                    <img src={state.paused ? iconPlay : iconPause} />
+                  </div>
+                </div>
+                <div class={[styles.slider]}>
+                  <Slider
+                    step={0.01}
+                    class={styles.timeProgress}
+                    v-model={state.currentTime}
+                    max={state.duration}
+                    onUpdate:modelValue={(val) => {
+                      handleChangeTime(val)
+                    }}
+                    onDragStart={() => {
+                      state.dragStatus = true
+                      console.log('onDragStart')
+                    }}
+                    onDragEnd={() => {
+                      state.dragStatus = false
+                      console.log('onDragEnd')
+                    }}
+                  />
+                </div>
+                <div class={styles.time}>
+                  <div>{getSecondRPM(state.currentTime)}</div>
+                  <span>/</span>
+                  <div>{getSecondRPM(state.duration)}</div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <Cell class={styles.userSection} center border={false}>
+          {{
+            icon: () => <Image class={styles.userLogo} src={state.musicDetail.avatar} />,
+            title: () => (
+              <div class={styles.userInfo}>
+                <p class={styles.name}>
+                  <span>{state.musicDetail?.username}</span>
+                  {state.musicDetail.vipFlag && <img src={iconMember} class={styles.iconMember} />}
+                </p>
+                <p class={styles.sub}>
+                  {state.musicDetail.subjectName}{' '}
+                  {getGradeCh(state.musicDetail.currentGradeNum - 1)}
+                </p>
+              </div>
+            ),
+            value: () => (
+              <div class={[styles.zan, styles.zanActive]}>
+                <img src={iconZanActive} class={styles.iconZan} />
+                {state.musicDetail.likeNum}
+              </div>
+            )
+          }}
+        </Cell>
+
+        <div class={styles.musicSection}>
+          <div class={styles.musicName}>
+            <span class={styles.musicTag}>曲目名称</span>
+            {state.musicDetail?.musicSheetName}
+          </div>
+          {state.musicDetail.desc && <div class={styles.musicDesc}>{state.musicDetail.desc}</div>}
+        </div>
+
+        <div class={styles.likeSection}>
+          <div class={styles.likeTitle}>点赞记录</div>
+
+          {state.listState.dataShow ? (
+            <List
+              finished={state.listState.finished}
+              finishedText=" "
+              class={[styles.container, styles.containerInformation]}
+              onLoad={getStarList}
+              immediateCheck={false}
+            >
+              {state.list.map((item: any, index: number) => (
+                <Cell
+                  class={styles.likeItem}
+                  border={state.list.length - 1 == index ? false : true}
+                >
+                  {{
+                    icon: () => <Image src={item.userAvatar} class={styles.userLogo} />,
+                    title: () => (
+                      <div class={styles.userInfo}>
+                        <p class={styles.name}>{item.userName}</p>
+                        <p class={styles.sub}>
+                          {item.subjectName} {getGradeCh(item.currentGradeNum - 1)}
+                        </p>
+                      </div>
+                    ),
+                    value: () => (
+                      <div class={styles.time}>
+                        {dayjs(item.createTime).format('YYYY-MM-DD HH:mm')}
+                      </div>
+                    )
+                  }}
+                </Cell>
+              ))}
+            </List>
+          ) : (
+            <MEmpty description="暂无数据" />
+          )}
+        </div>
+
+        <MSticky position="bottom">
+          <div class={styles.bottomSection}>
+            <div class={styles.bottomShare}>
+              <p onClick={onDownload}>
+                <img src={iconDownload} />
+                <span>下载</span>
+              </p>
+              <p onClick={() => (state.shareStatus = true)}>
+                <img src={iconShare} />
+                <span>分享</span>
+              </p>
+              <p onClick={() => (state.deleteStatus = true)}>
+                <img src={iconDelete} />
+                <span>删除</span>
+              </p>
+            </div>
+            <Button
+              round
+              class={styles.btnEdit}
+              type="primary"
+              onClick={() => {
+                router.push({
+                  path: '/creation-edit',
+                  query: {
+                    id: state.id
+                  }
+                })
+              }}
+            >
+              编辑
+            </Button>
+          </div>
+        </MSticky>
+
+        <Popup v-model:show={state.deleteStatus} round class={styles.popupContainer}>
+          <p class={styles.popupContent}>确定删除吗？</p>
+          <div class={styles.popupBtnGroup}>
+            <Button round onClick={() => (state.deleteStatus = false)}>
+              取消
+            </Button>
+            <Button round type="primary" onClick={onDelete}>
+              确定
+            </Button>
+          </div>
+        </Popup>
+
+        <Popup
+          position="bottom"
+          v-model:show={state.shareStatus}
+          style={{ background: 'transparent' }}
+        >
+          <ShareModel musicDetail={state.musicDetail} onClose={() => (state.shareStatus = false)} />
+        </Popup>
+      </div>
+    )
+  }
+})

src/views/creation/login-model/index.module.less

@@ -0,0 +1,62 @@
+.loginModel {
+  background: url('./images/login-bg.png') no-repeat center;
+  background-size: contain;
+  width: 306px;
+  height: 370px;
+
+  .iconClose {
+    width: 24px;
+    height: 24px;
+    position: absolute;
+    top: 30px;
+    right: -12px;
+    background: url('./images/icon-close.png') no-repeat center;
+    background-size: contain;
+    z-index: 1;
+  }
+}
+
+.loginSection {
+  padding: 126px 16px 0;
+}
+
+.fieldSection {
+  padding-bottom: 18px;
+
+  :global {
+    .van-field {
+      background: #F2F4F8;
+      border-radius: 24px;
+      padding: 11px 16px;
+      margin-bottom: 12px;
+    }
+
+    .van-field__left-icon {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  .codeText {
+    font-size: 14px;
+    color: #F67146;
+  }
+}
+
+.btnGroup {
+  .btnText {
+    display: block;
+    padding-top: 16px;
+    text-align: center;
+    font-size: 16px;
+    font-weight: 500;
+    color: #9E7A74;
+    line-height: 22px;
+    text-align: center;
+  }
+}

src/views/creation/login-model/index.tsx

@@ -0,0 +1,186 @@
+import { Teleport, defineComponent, reactive, ref } from 'vue'
+import styles from './index.module.less'
+import { Button, CountDown, Field, showToast } from 'vant'
+import iconPhone from './images/icon-phone.png'
+import iconPassword from './images/icon-password.png'
+import { checkPhone, setAuth } from '@/helpers/utils'
+import request from '@/helpers/request'
+// import { storage } from '@/helpers/storage';
+// import { ACCESS_TOKEN } from '@/store/mutation-types';
+import { setLogin, state as baseState } from '@/state'
+import MImgCode from '@/components/o-img-code'
+import { nextTick } from 'process'
+
+type loginType = 'PWD' | 'SMS'
+export default defineComponent({
+  name: 'login-model',
+  props: {
+    /** 是否支持短信验证码注册 */
+    isRegister: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['close', 'confirm'],
+  setup(props, { emit }) {
+    const countDownRef = ref()
+    const state = reactive({
+      loginType: 'PWD' as loginType,
+      imgCodeStatus: false,
+      username: '',
+      password: '',
+      smsCode: '',
+      countDownStatus: true,
+      countDownTime: 1000 * 120 // 倒计时时间
+    })
+
+    const onLogin = async () => {
+      try {
+        if (!checkPhone(state.username)) {
+          return showToast('请输入正确的手机号码')
+        }
+        const forms: any = {
+          username: state.username,
+          client_id: 'jmedu-student',
+          client_secret: 'jmedu-student',
+          password: state.loginType === 'PWD' ? state.password : state.smsCode,
+          grant_type: 'password',
+          loginType: state.loginType === 'PWD' ? 'PASSWORD' : 'SMS',
+          autoRegister: props.isRegister
+        }
+        const { data } = await request.post('/api-oauth/userlogin', {
+          requestType: 'form',
+          data: {
+            ...forms
+          }
+        })
+        setAuth(data.token_type + ' ' + data.access_token)
+
+        const userCash = await request.get(baseState.platformApi + '/user/getUserInfo', {
+          initRequest: true // 初始化接口
+        })
+        setLogin(userCash.data)
+
+        emit('confirm', true)
+      } catch (e: any) {
+        //
+        console.log(e)
+      }
+    }
+
+    const onSendCode = () => {
+      // 发送验证码
+      if (!checkPhone(state.username)) {
+        return showToast('请输入正确的手机号码')
+      }
+      state.imgCodeStatus = true
+    }
+
+    const onCodeSend = () => {
+      state.countDownStatus = false
+      nextTick(() => {
+        console.log(countDownRef.value, 'countDownRef.value')
+        countDownRef.value.start()
+      })
+    }
+    const onFinished = () => {
+      state.countDownStatus = true
+      countDownRef.value.reset()
+    }
+    return () => (
+      <div class={styles.loginModel}>
+        <i class={styles.iconClose} onClick={() => emit('close')}></i>
+        <div class={styles.loginSection}>
+          <div class={styles.fieldSection}>
+            <Field
+              v-model={state.username}
+              placeholder="请输入手机号"
+              autocomplete="off"
+              border={false}
+              type="tel"
+              maxlength={11}
+            >
+              {{
+                'left-icon': () => <img src={iconPhone} class={styles.icon} />
+              }}
+            </Field>
+
+            {state.loginType === 'PWD' ? (
+              <Field
+                v-model={state.password}
+                placeholder="请输入密码"
+                autocomplete="off"
+                border={false}
+                type="password"
+              >
+                {{
+                  'left-icon': () => <img src={iconPassword} class={styles.icon} />
+                }}
+              </Field>
+            ) : (
+              <Field
+                v-model={state.smsCode}
+                placeholder="请输入验证码"
+                autocomplete="off"
+                maxlength={6}
+                type="tel"
+                border={false}
+              >
+                {{
+                  'left-icon': () => <img src={iconPassword} class={styles.icon} />,
+                  button: () =>
+                    state.countDownStatus ? (
+                      <span class={styles.codeText} onClick={onSendCode}>
+                        获取验证码
+                      </span>
+                    ) : (
+                      <CountDown
+                        ref={(el: any) => (countDownRef.value = el)}
+                        auto-start={false}
+                        time={state.countDownTime}
+                        onFinish={onFinished}
+                        format="ss秒"
+                      />
+                    )
+                }}
+              </Field>
+            )}
+          </div>
+
+          <div class={styles.btnGroup}>
+            <Button round block color="#FF8057" onClick={onLogin}>
+              登录
+            </Button>
+
+            <span
+              class={styles.btnText}
+              onClick={() => {
+                if (state.loginType === 'PWD') {
+                  state.countDownStatus = true
+                  state.loginType = 'SMS'
+                } else {
+                  state.loginType = 'PWD'
+                }
+              }}
+            >
+              {state.loginType === 'PWD' ? '验证码登录' : '密码登录'}
+            </span>
+          </div>
+        </div>
+
+        {state.imgCodeStatus ? (
+          <Teleport to={'body'}>
+            <MImgCode
+              v-model:value={state.imgCodeStatus}
+              phone={state.username}
+              onClose={() => {
+                state.imgCodeStatus = false
+              }}
+              onSendCode={onCodeSend}
+            />
+          </Teleport>
+        ) : null}
+      </div>
+    )
+  }
+})

src/views/creation/share-model/index.module.less

@@ -0,0 +1,195 @@
+.shareContent {
+  position: relative;
+  width: 335px;
+  height: 355px;
+  margin: 0 auto 76px;
+
+  .shareBg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 335px;
+    height: 355px;
+  }
+
+  .share_content__title {
+    position: relative;
+    z-index: 3;
+    padding-top: 54px;
+    padding-left: 14px;
+    color: #FFFFFF;
+    text-shadow: 0px 2px 4px #3681FF;
+    width: 170px;
+
+    .large {
+      font-size: 19px;
+      font-weight: 600;
+      line-height: 26px;
+    }
+
+    .small {
+      padding-top: 6px;
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+}
+
+.sectionFile {
+  position: relative;
+  z-index: 3;
+  margin: 25px 15px 14px;
+  padding: 12px;
+  display: flex;
+  background: rgba(255, 255, 255, 0.79);
+  border-radius: 10px;
+
+  .muploader {
+    position: relative;
+    z-index: 9;
+    width: 56px;
+    height: 56px;
+    object-fit: cover;
+    border-radius: 6px;
+  }
+
+  .uploadImg {
+    position: relative;
+    border-radius: 6px;
+    margin-right: 16px;
+
+
+    .audioPan {
+      position: absolute;
+      top: 0;
+      right: -6px;
+      z-index: 1;
+      width: 56px;
+      height: 56px;
+    }
+
+
+  }
+
+  .musicDetail {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+
+    .musicName {
+      font-size: 16px;
+      font-weight: 600;
+      color: #131415;
+      line-height: 22px;
+      max-width: 200px;
+    }
+
+    .username {
+      padding-top: 4px;
+      font-size: 13px;
+      color: #aaa;
+      line-height: 20px;
+    }
+  }
+}
+
+.downloadSection {
+  display: flex;
+  align-items: center;
+  margin: 0 20px;
+  position: relative;
+  z-index: 3;
+
+  .qrcode {
+    position: relative;
+    width: 84px;
+    height: 84px;
+    padding: 3px;
+    border-radius: 4px;
+    // opacity: 0.53;
+    border: 1px solid rgba(37, 156, 254, 1);
+    // border-image: linear-gradient(130deg, rgba(37, 156, 254, 1), rgba(68, 201, 255, 1)) 1 1;
+    flex-shrink: 0;
+    overflow: hidden;
+
+    .qrcodeCanvas {
+      width: 100% !important;
+      height: 100% !important;
+    }
+
+    .qrcodeLogo {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: 10;
+      margin-left: -8px;
+      margin-top: -8px;
+      width: 16px;
+      height: 16px;
+      border-radius: 4px;
+    }
+  }
+
+  .qrtips {
+    margin-left: 10px;
+    padding-left: 9px;
+    border-left: 1px dashed #D8D8D8;
+
+    .tip {
+      font-size: 12px;
+      color: #777777;
+      line-height: 17px;
+    }
+
+    .iconLogo {
+      width: 102px;
+      height: 20px;
+      margin: 12px 0 4px;
+    }
+
+    .downTip {
+      font-size: 12px;
+      font-weight: 500;
+      color: #333333;
+      line-height: 17px;
+    }
+  }
+}
+
+
+.shareBottom {
+  position: relative;
+  background-color: #fff;
+  border-radius: 12px 12px 0px 0px;
+  padding-bottom: env(safe-area-inset-bottom);
+
+  .iconClose {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    font-size: 16px;
+    color: #999999;
+  }
+}
+
+.share__header {
+  padding: 12px 15px 8px;
+  font-size: 16px;
+  color: #333333;
+  line-height: 22px;
+}
+
+.gridSection {
+  --van-grid-item-icon-size: 44px;
+  --van-grid-item-text-font-size: 12px;
+  --van-grid-item-text-color: #646566;
+  --van-grid-item-content-padding: 16px 12px;
+}
+
+.btn {
+  font-size: 16px;
+  color: #AAAAAA;
+  line-height: 55px;
+  text-align: center;
+}

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

@@ -0,0 +1,209 @@
+import { defineComponent, onMounted, reactive, ref } from 'vue'
+import styles from './index.module.less'
+import {
+  Button,
+  Grid,
+  GridItem,
+  Icon,
+  Image,
+  closeToast,
+  showFailToast,
+  showLoadingToast,
+  showSuccessToast,
+  showToast
+} from 'vant'
+import iconDownload from './images/icon-download.png'
+import iconFirend from './images/icon-friend.png'
+import iconWeChat from './images/icon-wechat.png'
+import iconFriendRing from './images/icon-friend-ring.png'
+// import iconLink from './images/icon-link.png';
+import iconLogo from './images/icon-logo.png'
+import shareBg from './images/share-bg.png'
+import audioPan from '../images/audio-pan.png'
+import smallLogo from '@common/images/logo.png'
+import musicBg from './images/music-bg.png'
+import QRCode from 'qrcode'
+import { promisefiyPostMessage, postMessage } from '@/helpers/native-message'
+import html2canvas from 'html2canvas'
+
+export default defineComponent({
+  name: 'sahre-model',
+  props: {
+    musicDetail: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  emits: ['close'],
+  setup(props, { emit }) {
+    const canvasRef = ref()
+    const state = reactive({
+      saveLoading: false,
+      image: null as any
+    })
+    const saveImg = async () => {
+      showLoadingToast({
+        message: '图片生成中...',
+        forbidClick: true
+      })
+      setTimeout(() => {
+        state.saveLoading = false
+      }, 100)
+      const res = await promisefiyPostMessage({
+        api: 'savePicture',
+        content: {
+          base64: state.image
+        }
+      })
+      if (res?.content?.status === 'success') {
+        showSuccessToast('保存至相册')
+      } else {
+        showFailToast('保存失败')
+      }
+    }
+
+    const onSaveWe = async (type: string) => {
+      showLoadingToast({
+        message: '图片生成中...',
+        forbidClick: true
+      })
+      setTimeout(() => {
+        state.saveLoading = false
+      }, 100)
+      const res = await promisefiyPostMessage({
+        api: 'shareTripartite',
+        content: {
+          title: '',
+          desc: '',
+          image: state.image,
+          video: '',
+          type: 'image',
+          shareType: type
+        }
+      })
+      if (res?.content?.status) {
+        showSuccessToast('分享成功')
+      } else {
+        showFailToast('分享失败')
+      }
+    }
+
+    const onSavePath = (type: string) => {
+      // 判断是否在保存中...
+      if (state.saveLoading) {
+        return
+      }
+      state.saveLoading = true
+      // 判断是否已经生成图片
+      if (state.image) {
+        if (type) {
+          onSaveWe(type)
+        } else {
+          saveImg()
+        }
+      } else {
+        const container: any = document.getElementById('shareContent')
+        html2canvas(container, {
+          allowTaint: true,
+          useCORS: true,
+          backgroundColor: null
+        })
+          .then(async (canvas) => {
+            const url = canvas.toDataURL('image/png')
+            state.image = url
+            if (type) {
+              onSaveWe(type)
+            } else {
+              saveImg()
+            }
+          })
+          .catch(() => {
+            closeToast()
+            state.saveLoading = false
+          })
+      }
+    }
+
+    onMounted(() => {
+      const canvas = canvasRef.value
+      QRCode.toCanvas(
+        canvas,
+        location.origin + location.pathname + '#/shareCreation?id=' + props.musicDetail.id,
+        {
+          margin: 1
+        },
+        (error: any) => {
+          if (error) console.log(error)
+          console.log('success')
+        }
+      )
+    })
+
+    return () => (
+      <div class={styles.shareModel}>
+        <div class={styles.shareContent} id="shareContent">
+          <img src={shareBg} class={styles.shareBg} />
+          <div class={styles.share_content__title}>
+            <p class={styles.large}>我在音乐数字课堂发布了演奏作品</p>
+            <p class={styles.small}>赶快扫码看看吧！</p>
+          </div>
+
+          <div class={[styles.share_music__container, styles.sectionFile]}>
+            <div class={styles.uploadImg}>
+              <img src={audioPan} class={styles.audioPan} crossorigin="anonymous" />
+              <img
+                src={
+                  props.musicDetail.img
+                    ? props.musicDetail.img + '?t' + new Date().getTime()
+                    : musicBg
+                }
+                class={styles.muploader}
+                crossorigin="anonymous"
+              />
+            </div>
+            <div class={styles.musicDetail}>
+              <p class={[styles.musicName, 'van-ellipsis']}>{props.musicDetail.musicSheetName}</p>
+              <p class={styles.username}>演奏者：{props.musicDetail.username}</p>
+            </div>
+          </div>
+
+          <div class={styles.downloadSection}>
+            <div class={styles.qrcode}>
+              <canvas ref={canvasRef} class={styles.qrcodeCanvas}></canvas>
+              <img src={smallLogo} class={styles.qrcodeLogo} />
+            </div>
+            <div class={styles.qrtips}>
+              <p class={styles.tip}>温馨提示：保存图片到相册或长按识别二维码进入查看喔～</p>
+              <img src={iconLogo} class={styles.iconLogo} />
+              {/* <p class={styles.downTip}>扫码下载音乐数字课堂App</p> */}
+            </div>
+          </div>
+        </div>
+
+        <div class={styles.shareBottom}>
+          <Icon name="cross" class={styles.iconClose} onClick={() => emit('close')} />
+          <div class={styles.share__header}>海报已生成！快来分享吧！</div>
+          <Grid columnNum={5} border={false} class={styles.gridSection}>
+            <GridItem icon={iconDownload} text="保存本地" onClick={() => onSavePath('')}></GridItem>
+            {/* <GridItem icon={iconFirend} text="群聊"></GridItem> */}
+            <GridItem
+              icon={iconWeChat}
+              text="微信好友"
+              onClick={() => onSavePath('wechat')}
+            ></GridItem>
+            <GridItem
+              icon={iconFriendRing}
+              text="朋友圈"
+              onClick={() => onSavePath('wechat_circle')}
+            ></GridItem>
+            {/* <GridItem icon={iconLink} text="复制链接"></GridItem> */}
+          </Grid>
+
+          <div class={[styles.btn, 'van-hairline--top']} onClick={() => emit('close')}>
+            取消
+          </div>
+        </div>
+      </div>
+    )
+  }
+})