Merge branch 'iteration-upload-works' into online

package-lock.json

@@ -13,6 +13,7 @@
         "@vant/use": "^1.5.1",
         "@vueuse/core": "^10.1.2",
         "clean-deep": "^3.4.0",
+        "cos-js-sdk-v5": "^1.4.21",
         "dayjs": "^1.11.7",
         "echarts": "^5.4.2",
         "eventemitter3": "^5.0.1",
@@ -36,6 +37,7 @@
         "vue-router": "^4.1.6",
         "vue3-lottie": "^2.7.0",
         "vuedraggable": "^4.1.0",
+        "wavesurfer.js": "^7.4.2",
         "webpack-merge": "^5.9.0"
       },
       "devDependencies": {
@@ -568,6 +570,7 @@
       "version": "7.18.6",
       "resolved": "https://registry.npmmirror.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz",
       "integrity": "sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==",
+      "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-unicode-property-regex instead.",
       "dev": true,
       "dependencies": {
         "@babel/helper-create-regexp-features-plugin": "^7.18.6",
@@ -3101,6 +3104,14 @@
         "vue-demi": ">=0.14.5"
       }
     },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.9.0",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.9.0.tgz",
@@ -3836,6 +3847,14 @@
         "browserslist": "^4.21.5"
       }
     },
+    "node_modules/cos-js-sdk-v5": {
+      "version": "1.4.21",
+      "resolved": "https://registry.npmmirror.com/cos-js-sdk-v5/-/cos-js-sdk-v5-1.4.21.tgz",
+      "integrity": "sha512-6cR53IZF2o17uaPr8XJSMa+Q73P9pgDFD5IYGcIfJn06JJaK6hGX43nv5DJ17uQYmwQBIqNeZOF97I7ClrsNdA==",
+      "dependencies": {
+        "@xmldom/xmldom": "^0.8.6"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -8684,6 +8703,11 @@
         "vue": "^3.0.11"
       }
     },
+    "node_modules/wavesurfer.js": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmmirror.com/wavesurfer.js/-/wavesurfer.js-7.4.2.tgz",
+      "integrity": "sha512-4pNQ1porOCUBYBmd2F1TqVuBnB2wBPipaw2qI920zYLuPnada0Rd1CURgh8HRuPGKxijj2iyZDFN2UZwsaEuhA=="
+    },
     "node_modules/wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -11260,6 +11284,11 @@
         "vue-demi": ">=0.14.5"
       }
     },
+    "@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw=="
+    },
     "acorn": {
       "version": "8.9.0",
       "resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.9.0.tgz",
@@ -11863,6 +11892,14 @@
         "browserslist": "^4.21.5"
       }
     },
+    "cos-js-sdk-v5": {
+      "version": "1.4.21",
+      "resolved": "https://registry.npmmirror.com/cos-js-sdk-v5/-/cos-js-sdk-v5-1.4.21.tgz",
+      "integrity": "sha512-6cR53IZF2o17uaPr8XJSMa+Q73P9pgDFD5IYGcIfJn06JJaK6hGX43nv5DJ17uQYmwQBIqNeZOF97I7ClrsNdA==",
+      "requires": {
+        "@xmldom/xmldom": "^0.8.6"
+      }
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -15647,6 +15684,11 @@
         "vooks": "^0.2.4"
       }
     },
+    "wavesurfer.js": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmmirror.com/wavesurfer.js/-/wavesurfer.js-7.4.2.tgz",
+      "integrity": "sha512-4pNQ1porOCUBYBmd2F1TqVuBnB2wBPipaw2qI920zYLuPnada0Rd1CURgh8HRuPGKxijj2iyZDFN2UZwsaEuhA=="
+    },
     "wcwidth": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/wcwidth/-/wcwidth-1.0.1.tgz",

package.json

@@ -27,6 +27,7 @@
     "@vant/use": "^1.5.1",
     "@vueuse/core": "^10.1.2",
     "clean-deep": "^3.4.0",
+    "cos-js-sdk-v5": "^1.4.21",
     "dayjs": "^1.11.7",
     "echarts": "^5.4.2",
     "eventemitter3": "^5.0.1",
@@ -50,6 +51,7 @@
     "vue-router": "^4.1.6",
     "vue3-lottie": "^2.7.0",
     "vuedraggable": "^4.1.0",
+    "wavesurfer.js": "^7.4.2",
     "webpack-merge": "^5.9.0"
   },
   "devDependencies": {

src/components/m-image-preview/index.tsx

@@ -262,7 +262,7 @@ export default defineComponent({
                         // }}
                         src={url}
                         onPlay={() => onPlay(index)}
-                        preLoading={false}
+                        // preLoading={false}
                         // onEnterfullscreen={() => (forms.showButton = false)}
                         // onExitfullscreen={() => (forms.showButton = true)}
                       />

src/components/m-img-code/index.tsx

@@ -82,7 +82,7 @@ export default defineComponent({
           hideLoading: true,
           data: {
             clientId: this.clientId,
-            type: 'REGISTER',
+            type: 'LOGIN',
             mobile: this.phone
           }
         });
@@ -95,7 +95,7 @@ export default defineComponent({
         this.code = '';
         setTimeout(() => {
           this.updateIdentifyingCode();
-        }, 500)
+        }, 500);
       }
     }
   },

src/components/m-uploader/index.tsx

@@ -16,6 +16,7 @@ import iconUploader from '@common/images/icon-upload.png';
 import iconVideoDefault from '@common/images/icon-video-c.png';
 import request from '@/helpers/request';
 import { getOssUploadUrl } from '@/state';
+import { getUploadSign, onOnlyFileUpload } from '@/helpers/oss-file-upload';
 
 export default defineComponent({
   name: 'col-upload',
@@ -164,23 +165,34 @@ export default defineComponent({
       // 上传文件
       try {
         // 获取签名
-        const signUrl = '/api-web/getUploadSign';
+        // const signUrl = '/api-web/getUploadSign';
         const tempName = file.name || '';
-        const fileName =
-          this.path + '/' + (tempName && tempName.replace(/ /gi, '_'));
+        const fileName = this.path
+          ? this.path + '/' + (tempName && tempName.replace(/ /gi, '_'))
+          : tempName && tempName.replace(/ /gi, '_');
         const key = new Date().getTime() + fileName;
         console.log(file);
 
-        const res = await request.post(signUrl, {
-          data: {
-            filename: fileName,
-            bucketName: this.bucket,
-            postData: {
-              filename: fileName,
-              acl: 'public-read',
-              key: key,
-              unknowValueField: []
-            }
+        // const res = await request.post(signUrl, {
+        //   data: {
+        //     filename: fileName,
+        //     bucketName: this.bucket,
+        //     postData: {
+        //       filename: fileName,
+        //       acl: 'public-read',
+        //       key: key,
+        //       unknowValueField: []
+        //     }
+        //   }
+        // });
+        const { data } = await getUploadSign({
+          filename: key,
+          bucketName: this.bucket,
+          postData: {
+            filename: key,
+            acl: 'public-read',
+            key: key,
+            unknowValueField: []
           }
         });
         showLoadingToast({
@@ -190,24 +202,29 @@ export default defineComponent({
           duration: 0
         });
         const obj = {
-          policy: res.data.policy,
-          signature: res.data.signature,
+          policy: data.policy,
+          signature: data.signature,
           key: key,
-          KSSAccessKeyId: res.data.kssAccessKeyId,
+          KSSAccessKeyId: data.kssAccessKeyId,
           acl: 'public-read',
-          name: fileName
+          name: key,
+          file
         } as any;
-        const formData = new FormData();
-        for (const key in obj) {
-          formData.append(key, obj[key]);
-        }
-        formData.append('file', file, fileName);
-        await umiRequest(getOssUploadUrl(this.bucket), {
-          method: 'POST',
-          data: formData
-        });
-        console.log(getOssUploadUrl(this.bucket) + key);
-        const uploadUrl = getOssUploadUrl(this.bucket) + key;
+        // const formData = new FormData();
+        // for (const key in obj) {
+        //   formData.append(key, obj[key]);
+        // }
+        // formData.append('file', file, fileName);
+        // await umiRequest(getOssUploadUrl(this.bucket), {
+        //   method: 'POST',
+        //   data: formData
+        // });
+        // console.log(getOssUploadUrl(this.bucket) + key);
+        // const uploadUrl = getOssUploadUrl(this.bucket) + key;
+        const uploadUrl = await onOnlyFileUpload(
+          getOssUploadUrl(this.bucket),
+          obj
+        );
         closeToast();
         // 判断是否是多选
         if (this.maxCount > 1) {
@@ -241,11 +258,7 @@ export default defineComponent({
               )}
               <div class={['van-uploader__upload']}>
                 {this.uploadType === 'IMAGE' ? (
-                  <Image
-                    src={item + '@base@tag=imgScale&w=200'}
-                    class={styles.previewImg}
-                    fit="cover"
-                  />
+                  <Image src={item} class={styles.previewImg} fit="cover" />
                 ) : (
                   <video
                     ref="videoUpload"
@@ -294,7 +307,7 @@ export default defineComponent({
                           fit="cover"
                           position="center"
                           class={styles.uploadImg}
-                          src={item + '@base@tag=imgScale&w=200'}
+                          src={item}
                         />
                       ) : (
                         <video
@@ -358,7 +371,7 @@ export default defineComponent({
                         fit="cover"
                         position="center"
                         class={styles.uploadImg}
-                        src={item + '@base@tag=imgScale&w=200'}
+                        src={item}
                       />
                     ) : (
                       <video

src/components/m-uploader/inside.tsx

@@ -16,10 +16,8 @@ import iconUploader from '@common/images/icon-upload.png';
 import iconVideoDefault from '@common/images/icon-video-c.png';
 import request from '@/helpers/request';
 import { getOssUploadUrl } from '@/state';
+import { getUploadSign, onOnlyFileUpload } from '@/helpers/oss-file-upload';
 
-/**
- * 此组件暂时只支持ks3,如果想要支持tencent需要二次开发
- */
 export default defineComponent({
   name: 'col-upload',
   props: {
@@ -166,23 +164,22 @@ export default defineComponent({
       // 上传文件
       try {
         // 获取签名
-        const signUrl = '/api-web/getUploadSign';
+        // const signUrl = '/api-web/getUploadSign';
         const tempName = file.name || '';
-        const fileName =
-          this.path + '/' + (tempName && tempName.replace(/ /gi, '_'));
+        const fileName = this.path
+          ? this.path + '/' + (tempName && tempName.replace(/ /gi, '_'))
+          : tempName && tempName.replace(/ /gi, '_');
         const key = new Date().getTime() + fileName;
         console.log(file);
 
-        const res = await request.post(signUrl, {
-          data: {
-            filename: fileName,
-            bucketName: this.bucket,
-            postData: {
-              filename: fileName,
-              acl: 'public-read',
-              key: key,
-              unknowValueField: []
-            }
+        const { data } = await getUploadSign({
+          filename: key,
+          bucketName: this.bucket,
+          postData: {
+            filename: key,
+            acl: 'public-read',
+            key: key,
+            unknowValueField: []
           }
         });
         showLoadingToast({
@@ -192,24 +189,18 @@ export default defineComponent({
           duration: 0
         });
         const obj = {
-          policy: res.data.policy,
-          signature: res.data.signature,
+          policy: data.policy,
+          signature: data.signature,
           key: key,
-          KSSAccessKeyId: res.data.kssAccessKeyId,
+          KSSAccessKeyId: data.kssAccessKeyId,
           acl: 'public-read',
-          name: fileName
+          name: key,
+          file
         } as any;
-        const formData = new FormData();
-        for (const key in obj) {
-          formData.append(key, obj[key]);
-        }
-        formData.append('file', file, fileName);
-        await umiRequest(getOssUploadUrl(this.bucket), {
-          method: 'POST',
-          data: formData
-        });
-        console.log(getOssUploadUrl(this.bucket) + key);
-        const uploadUrl = getOssUploadUrl(this.bucket) + key;
+        const uploadUrl = await onOnlyFileUpload(
+          getOssUploadUrl(this.bucket),
+          obj
+        );
         closeToast();
         // 判断是否是多选
         if (this.maxCount > 1) {
@@ -243,11 +234,7 @@ export default defineComponent({
               )}
               <div class={['van-uploader__upload']}>
                 {this.uploadType === 'IMAGE' ? (
-                  <Image
-                    src={item + '@base@tag=imgScale&w=200'}
-                    class={styles.previewImg}
-                    fit="cover"
-                  />
+                  <Image src={item} class={styles.previewImg} fit="cover" />
                 ) : (
                   <video
                     ref="videoUpload"
@@ -296,7 +283,7 @@ export default defineComponent({
                           fit="cover"
                           position="center"
                           class={styles.uploadImg}
-                          src={item + '@base@tag=imgScale&w=200'}
+                          src={item}
                         />
                       ) : (
                         <video
@@ -360,7 +347,7 @@ export default defineComponent({
                         fit="cover"
                         position="center"
                         class={styles.uploadImg}
-                        src={item + '@base@tag=imgScale&w=200'}
+                        src={item}
                       />
                     ) : (
                       <video

src/components/m-video/index.module.less

@@ -1,7 +1,8 @@
 .video-container {
   position: relative;
   width: 100%;
-  --plyr-color-main: var(--k-primary);
+  --plyr-color-main: #FF8057;
+  height: 210px;
 
   video {
     width: 100%;
@@ -35,11 +36,21 @@
     .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 {
@@ -50,4 +61,41 @@
   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/m-video/index.tsx

@@ -2,16 +2,23 @@ import { defineComponent, PropType } from 'vue';
 import styles from './index.module.less';
 import Plyr from 'plyr';
 import 'plyr/dist/plyr.css';
-import { Loading } from 'vant';
-import { browser } from '@/helpers/utils';
+import { Button, Icon, Loading, Toast } from 'vant';
+
+import TCPlayer from 'tcplayer.js';
+import 'tcplayer.js/dist/tcplayer.css';
+// import iconVideoPlay from '@/common/images/icon_video_play.png';
+// import { browser } from '@/helpers/utils';
 export default defineComponent({
-  name: 'm-video',
+  name: 'o-video',
   props: {
     setting: {
       type: Object,
-      default: () => ({})
+      default: () => {}
+    },
+    controls: {
+      type: Boolean,
+      default: true
     },
-    controls: Boolean,
     height: String,
     src: {
       type: String,
@@ -37,24 +44,20 @@ export default defineComponent({
       type: Boolean,
       default: true
     },
-    preLoading: {
-      type: Boolean,
-      default: true
+    onPlay: {
+      type: Function,
+      default: () => {}
     }
-    // onPlay: {
-    //   type: Function,
-    //   default: () => {}
-    // }
   },
-  emits: ['exitfullscreen', 'play', 'ready', 'enterfullscreen'],
+  emits: ['exitfullscreen'],
   data() {
     return {
+      videoID: 'video' + Date.now() + Math.floor(Math.random() * 100),
       player: null as any,
       loading: true // 首次进入加载中
     };
   },
   mounted() {
-    this.loading = this.preLoading;
     this._init();
   },
   methods: {
@@ -77,85 +80,63 @@ export default defineComponent({
       //   'download ' ,  // 显示一个下载按钮，其中包含指向当前源或您在选项中指定的自定义 URL 的链接
       //   'fullscreen' ,  // 切换全屏
       // ] ;
-      const controls = [
-        'play-large',
-        'play',
-        'progress',
-        'captions',
-        'fullscreen'
-      ];
-      // if (browser().isApp) {
-      //   controls.push('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>';
 
-      if (this.currentTime) {
-        controls.push('current-time');
-      }
-      const params: any = {
-        controls: controls,
-        ...this.setting,
-        invertTime: false
+        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 (browser().iPhone) {
-        params.fullscreen = {
-          enabled: true,
-          fallback: 'force',
-          iosNative: true
-        };
-      }
-
-      this.player = new Plyr((this as any).$refs.video, params);
-
-      this.player.elements.container
-        ? (this.player.elements.container.style.height = this.height || '210px')
-        : null;
-
-      if (this.preload === 'none') {
-        this.loading = false;
-      }
-      this.player.on('loadedmetadata', () => {
-        this.loading = false;
-        this.domPlayVisibility(false);
-      });
-
-      this.player.on('loadeddata', () => {
-        this.$emit('ready', this.player);
-      });
-
-      this.player.on('play', () => {
-        this.$emit('play', this.player);
-      });
-
-      this.player.on('enterfullscreen', () => {
-        console.log('fullscreen', this.player.elements);
-        const fragment = document.createDocumentFragment();
-        const i = document.createElement('i');
-        i.id = 'fullscreen-back';
-        i.className = 'van-icon van-icon-arrow-left video-back';
-        i.addEventListener('click', () => {
-          this.player.fullscreen.exit();
+        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);
         });
-        console.log(document.getElementsByClassName('plyr'), i);
-        fragment.appendChild(i);
-        // const parentNode = document.getElementsByClassName('plyr')[0];
-        // parentNode.insertBefore(fragment, parentNode.firstChild);
-        this.player.elements.container.appendChild(fragment);
-
-        this.$emit('enterfullscreen');
-      });
 
-      this.player.on('exitfullscreen', () => {
-        console.log('exitfullscreen');
-        const i = document.getElementById('fullscreen-back');
-        i && i.remove();
-        this.$emit('exitfullscreen');
-      });
+        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('.plyr__controls');
-      const controls2 = document.querySelector('.plyr__control--overlaid');
+      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');
@@ -166,24 +147,28 @@ export default defineComponent({
         }, 200);
       }
     },
-    onStop() {
-      this.player.stop();
-    },
-    onExitScreen() {
-      this.player.fullscreen.active && this.player.fullscreen.exit();
+
+    onReplay() {
+      this.player.currentTime(0);
+      this.player.play();
+      this.domPlayVisibility(false);
     },
-    onPlay() {
-      this.player?.play();
+    onStop() {
+      this.player.currentTime(0);
+      this.player.pause();
     }
   },
   unmounted() {
-    this.player?.destroy();
+    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}
@@ -192,7 +177,7 @@ export default defineComponent({
           style={{ ...this.styleValue }}></video>
         {/* </div> */}
         {/* 加载视频使用 */}
-        {this.loading && (
+        {/* {this.loading && (
           <div
             class={styles.loadingVideo}
             style={{
@@ -206,7 +191,7 @@ export default defineComponent({
               加载中...
             </Loading>
           </div>
-        )}
+        )} */}
       </div>
     );
   }

src/components/m-wx-tip/index.tsx

@@ -32,7 +32,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const showPopup = ref(false);
     onMounted(() => {
-      if (!browser().weixin || props.show) {
+      if (!browser().weixin && props.show) {
         showPopup.value = true;
         return;
       }

src/helpers/oss-file-upload.ts

@@ -0,0 +1,235 @@
+import request from './request';
+// import axios from 'axios'
+import umiRequest from 'umi-request';
+import COS from 'cos-js-sdk-v5';
+import { state } from '@/state';
+export const ossSwitch = 'tencent' as 'ks3' | 'tencent'; // 上传文件服务商
+const tencentBucket = 'daya-online-1303457149';
+
+/**
+ * 管乐团 ktqy/
+ * 酷乐秀 klx/
+ * 课堂乐器 ktqy/
+ * 管乐迷 gym/
+ */
+
+// 定义一个cos 对象
+/**
+ * 获取上传文件签名
+ * @param params 上传对应参数
+ * { filename: fileName,
+     bucketName: props.bucketName,
+     postData: {
+      filename: fileName,
+      acl: 'public-read',
+      key: fileName,
+      unknowValueField: []
+    }}
+ * @param oss 服务商 ks3 tencent
+ * @returns ”{'signatur'':'',''kssAccessKeyI'':'',''policy': '' }“
+ */
+export const getUploadSign = async (params: any) => {
+  const { bucketName, filename, postData } = params;
+  const ossType = ossSwitch;
+  let bucket = bucketName;
+  let file = filename;
+  // const key = postData.key;
+  let tempPostData: any = {};
+  if (ossType === 'tencent') {
+    bucket = tencentBucket;
+    file = 'ktqy/' + filename;
+
+    tempPostData = {
+      key: 'ktqy/' + postData.key
+    };
+  } else {
+    tempPostData = postData;
+  }
+  return request.post('/edu-app/open/getUploadSign', {
+    data: {
+      postData: tempPostData,
+      pluginName: ossType,
+      bucketName: bucket,
+      filename: file
+    },
+    params: { pluginName: ossType }
+  });
+};
+
+/**
+ * 使用组件上传时，调用方法
+ * @param param0
+ */
+export const onFileUpload = ({
+  file,
+  action,
+  data,
+  onProgress,
+  onFinish,
+  onError
+}: any) => {
+  if (ossSwitch === 'ks3') {
+    const fileParams = {
+      policy: data.policy,
+      signature: data.signature,
+      key: data.key,
+      acl: 'public-read',
+      KSSAccessKeyId: data.KSSAccessKeyId,
+      name: data.name
+    } as any;
+    const formData = new FormData();
+    for (const key in fileParams) {
+      formData.append(key, fileParams[key]);
+    }
+    formData.append('file', data.file as File);
+    umiRequest(action as string, {
+      method: 'POST',
+      data: formData
+    })
+      .then(() => {
+        file.url = action + data.key;
+        onFinish();
+      })
+      .catch(error => {
+        onError(error);
+      });
+  } else {
+    const cos = new COS({
+      Domain: 'https://oss.dayaedu.com',
+      Protocol: 'https',
+      // getAuthorization 必选参数
+      getAuthorization: async (options, callback: any) => {
+        callback({ Authorization: data.signature });
+      }
+    });
+    cos
+      .uploadFile({
+        Bucket: tencentBucket /* 填写自己的 bucket，必须字段 */,
+        Region: 'ap-nanjing' /* 存储桶所在地域，必须字段 */,
+        Key: `ktqy/${data.name}`,
+        /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
+        Body: data.file.file, // 上传文件对象
+        SliceSize:
+          1024 *
+          1024 *
+          500 /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */,
+        onProgress: function (progressData) {
+          onProgress({ percent: Math.ceil((progressData.percent || 0) * 100) });
+        }
+      })
+      .then((res: any) => {
+        // file.url = 'https://' + res.Location;
+        if (res.Location?.indexOf('http') >= 0) {
+          file.url = res.Location;
+        } else {
+          file.url = 'https://' + res.Location;
+        }
+        onFinish();
+      })
+      .catch(error => {
+        console.log(error, 'error');
+        onError();
+      });
+  }
+};
+
+export const onOnlyFileUpload = async (action: string, params: any) => {
+  if (ossSwitch === 'ks3') {
+    const fileParams = {
+      policy: params.policy,
+      signature: params.signature,
+      key: params.key,
+      acl: 'public-read',
+      KSSAccessKeyId: params.KSSAccessKeyId,
+      name: params.name
+    } as any;
+    const formData = new FormData();
+    for (const key in fileParams) {
+      formData.append(key, fileParams[key]);
+    }
+    formData.append('file', params.file as File);
+    let file = '';
+    let errorObj: any = null;
+    // await axios
+    //   .post(action as string, formData, {
+    //     // onUploadProgress: ({ progress }) => {
+    //     //   console.log(progress);
+    //     //   onProgress({ percent: Math.ceil((progress || 0) * 100) });
+    //     // }
+    //   })
+    //   .then(() => {
+    //     file = action + params.key
+    //   })
+    //   .catch((error) => {
+    //     // onError(error);
+    //     errorObj = error
+    //     // throw new Error(error);
+    //   })
+    await umiRequest(action as string, {
+      method: 'POST',
+      data: formData
+    })
+      .then(() => {
+        file = action + params.key;
+      })
+      .catch(error => {
+        errorObj = error;
+      });
+    if (file) {
+      return file;
+    } else {
+      throw new Error(errorObj);
+    }
+    return file;
+  } else {
+    let file = '';
+    let errorObj: any = null;
+    console.log(params, 'params');
+    const cos = new COS({
+      Domain: 'https://oss.dayaedu.com',
+      // getAuthorization 必选参数
+      getAuthorization: async (options, callback: any) => {
+        callback({ Authorization: params.signature });
+      }
+    });
+
+    // http://daya-online-1303457149.cos.ap-nanjing.myqcloud.com/ktqy
+    // http://daya-online-1303457149.cos.ap-nanjing.myqcloud.com/ktqy
+    await cos
+      .uploadFile({
+        Bucket: tencentBucket /* 填写自己的 bucket，必须字段 */,
+        Region: 'ap-nanjing' /* 存储桶所在地域，必须字段 */,
+        Key: `ktqy/${params.name}`,
+        /* 存储在桶里的对象键（例如:1.jpg，a/b/test.txt，图片.jpg）支持中文，必须字段 */
+        Body: params.file, // 上传文件对象
+        SliceSize:
+          1024 *
+          1024 *
+          500 /* 触发分块上传的阈值，超过5MB使用分块上传，小于5MB使用简单上传。可自行设置，非必须 */
+        // onProgress: function (progressData) {
+        //   onProgress({ percent: Math.ceil((progressData.percent || 0) * 100) });
+        // }
+      })
+      .then((res: any) => {
+        // file.url = 'https://' + res.Location;
+        // file = 'https://' + res.Location;
+        if (res.Location?.indexOf('http') >= 0) {
+          file = res.Location;
+        } else {
+          file = 'https://' + res.Location;
+        }
+        // onFinish();
+      })
+      .catch(error => {
+        // console.log(error, 'error');
+        // onError();
+        // throw new Error(error);
+        errorObj = error;
+      });
+    if (file) {
+      return file;
+    } else {
+      throw new Error(errorObj);
+    }
+  }
+};

src/helpers/utils.ts

@@ -170,6 +170,22 @@ export const getWeekCh = (week: number, type = 0) => {
   return type ? template2[week] : template[week];
 };
 
+export const getGradeCh = (grade: number) => {
+  const template = [
+    '一年级',
+    '二年级',
+    '三年级',
+    '四年级',
+    '五年级',
+    '六年级',
+    '七年级',
+    '八年级',
+    '九年级'
+  ];
+
+  return template[grade];
+};
+
 export const numberFormat = (num: number, type?: string) => {
   if (type === 'percent') {
     return numeral(num).format('0.0%');

src/router/router-root.ts

@@ -191,7 +191,13 @@ export default [
       title: '学校报名详情'
     }
   },
-
+  {
+    path: '/shareCreation',
+    component: () => import('@/views/creation/index-share'),
+    meta: {
+      title: '作品详情'
+    }
+  },
   {
     path: '/:pathMatch(.*)*',
     component: () => import('@/views/404'),

src/router/routes-common.ts

@@ -170,6 +170,20 @@ export default [
         meta: {
           title: '课件播放'
         }
+      },
+      {
+        path: '/creation',
+        component: () => import('@/views/creation/index'),
+        meta: {
+          title: '作品详情'
+        }
+      },
+      {
+        path: '/creation-edit',
+        component: () => import('@/views/creation/edit/index'),
+        meta: {
+          title: '作品详情'
+        }
       }
     ]
   },

src/shims-vue.d.ts

@@ -15,3 +15,5 @@ declare global {
   }
 }
 declare module 'tcplayer.js';
+
+declare module 'qrcode';

src/styles/index.less

@@ -6,6 +6,8 @@
   --van-skeleton-paragraph-background: #ECEEF3;
 
   --van-skeleton-avatar-background: #ECEEF3;
+
+  --van-dialog-message-font-size: 16px;
 }
 
 // 默认输入框光标颜色

src/views/creation/api.ts

@@ -0,0 +1,113 @@
+// userMusic/detail/1698984095609106434
+import request from '@/helpers/request';
+
+/** 详情 */
+export const api_userMusicDetail = (params: any): Promise<any> => {
+  return request.get(`/edu-app/userMusic/detail/${params}`);
+};
+
+/** 开放详情 */
+export const api_openUserMusicDetail = (params: any): Promise<any> => {
+  return request.get(`/edu-app/open/userMusic/detail/${params}`);
+};
+
+/**  点赞分页 */
+export const api_userMusicStarPage = (params: any): Promise<any> => {
+  return request.post(`/edu-app/userMusicStar/page`, {
+    data: params
+  });
+};
+
+/**  分享推荐作品 */
+export const api_openUserMusicPage = (params: any): Promise<any> => {
+  return request.post(`/edu-app/open/userMusic/page`, {
+    data: params
+  });
+};
+
+/** 点赞 */
+export const api_userMusicStar = (params: any): Promise<any> => {
+  return request.post('/edu-app/userMusicStar/star', {
+    data: params
+  });
+};
+
+/** 保存草稿/发布作品 */
+export const api_userMusicSave = (params: any): Promise<any> => {
+  return request.post('/edu-app/userMusic/save', {
+    data: params
+  });
+};
+
+/** 删除 */
+export const api_userMusicRemove = (params: any): Promise<any> => {
+  return request.post('/edu-app/userMusic/remove', {
+    requestType: 'form',
+    params
+  });
+};
+
+/** 授权验证 */
+export const api_verification = (params: any): Promise<any> => {
+  return request.post('/edu-oauth/open/user/verification', {
+    data: params
+  });
+};
+
+// POST http://127.0.0.1:7093/userMusic/remove?id=1698984095609106434
+// Content-Type: application/json
+// Authorization: {{student}}
+// ### 点赞/取消点赞
+
+// POST http://127.0.0.1:7093/userMusicStar/star
+// Authorization: {{student}}
+// Content-Type: application/json
+
+// {
+//   "userMusicId": "1698984095609106434",
+//   "star": true
+// }
+// ### 点赞分页
+
+// POST http://127.0.0.1:7093/userMusicStar/page
+// Authorization: {{student}}
+// Content-Type: application/json
+
+// {
+//   "userMusicId": "1698984095609106434"
+// }
+
+// ### 分页查询
+
+// POST http://127.0.0.1:7093/userMusic/page
+// Content-Type: application/json
+// Authorization: {{student}}
+
+// {
+//   "keyword": "",
+//   "type": "FORMAL"
+// }
+
+// ###保存草稿/发布作品
+
+// POST http://127.0.0.1:7093/userMusic/save
+// Content-Type: application/json
+// Authorization: {{student}}
+
+// {
+//   "id": "1698984095609106434",
+//   "musicPracticeRecordId": 1698983103032250369,
+//   "type": "FORMAL",
+//   "img": "",
+//   "videoUrl": "www.baidu.com",
+//   "jsonConfig": "{\"test\": \"test\"}"
+// }### 删除作品
+
+// POST http://127.0.0.1:7093/userMusic/remove?id=1698984095609106434
+// Content-Type: application/json
+// Authorization: {{student}}
+// ### 详情/分享
+
+// GET http://127.0.0.1:7093/userMusic/detail/1698984095609106434
+// Content-Type: application/json
+// Authorization: {{student}}

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

@@ -0,0 +1,93 @@
+.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;
+    }
+
+    .van-uploader__upload {
+      margin: 0;
+    }
+  }
+
+  .muploader {
+    position: relative;
+    z-index: 9;
+  }
+
+  .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;
+
+}

src/views/creation/edit/index.tsx

@@ -0,0 +1,94 @@
+import MHeader from '@/components/m-header';
+import MSticky from '@/components/m-sticky';
+import { defineComponent, onMounted, reactive } from 'vue';
+import styles from './index.module.less';
+import { Button, Field, showToast } from 'vant';
+import MUploader from '@/components/m-uploader';
+import { api_userMusicDetail, api_userMusicSave } from '../api';
+import { useRoute, useRouter } from 'vue-router';
+
+export default defineComponent({
+  name: 'creation-edit',
+  setup() {
+    const route = useRoute();
+    const router = useRouter();
+    const state = reactive({
+      id: route.query.id,
+      musicDetail: {} as any,
+      desc: '',
+      img: [] as any
+    });
+
+    const onSubmit = async () => {
+      try {
+        await api_userMusicSave({
+          id: state.id,
+          img: state.img.join(','),
+          desc: state.desc,
+          musicPracticeRecordId: state.musicDetail.musicPracticeRecordId,
+          type: 'FORMAL'
+        });
+
+        router.back();
+      } catch {
+        //
+      }
+    };
+    onMounted(async () => {
+      try {
+        const { data } = await api_userMusicDetail(state.id);
+        state.musicDetail = data;
+        state.desc = data.desc;
+        state.img = data.img ? [data.img] : [];
+      } catch {
+        //
+      }
+    });
+    return () => (
+      <div>
+        <MSticky position="top">
+          <MHeader border={false} />
+        </MSticky>
+
+        <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
+              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,452 @@
+import { defineComponent, onMounted, reactive, ref } from 'vue';
+// import WaveSurfer from 'wavesurfer.js';
+// import Regions from 'wavesurfer.js/dist/plugins/regions.js';
+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, getGradeCh, getSecondRPM } 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/m-empty';
+import { nextTick } from 'process';
+import MVideo from '@/components/m-video';
+import LoginModel from './login-model';
+import { removeAuth } from '../student-register/layout/utils';
+import { setLogout } from '@/state';
+import { storage } from '@/helpers/storage';
+import { ACCESS_TOKEN } from '@/store/mutation-types';
+import MWxTip from '@/components/m-wx-tip';
+
+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: ''
+    });
+    const wavesurfer = ref();
+    // 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 () => {
+      // 是否登录
+      if (!state.loginTag) {
+        state.loginStatus = true;
+        return;
+      }
+      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 {
+        //
+      }
+    };
+
+    // 获取列表
+    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;
+        });
+        // wavesurfer.value = 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: 1.2,
+        //   /** If autoScroll is enabled, keep the cursor in the center of the waveform during playback */
+        //   // autoCenter: true,
+        //   hideScrollbar: false,
+        //   media: audioDom
+        // });
+        // // console.log(wavesurfer.value);
+
+        // // const wsRegions = wavesurfer.value.registerPlugin(Regions.create());
+        // wavesurfer.value.once('interaction', () => {
+        //   // wavesurfer.value.play();
+        // });
+        // wavesurfer.value.once('ready', () => {
+        //   state.paused = audioDom.paused;
+        //   state.duration = audioDom.duration;
+        // });
+
+        // wavesurfer.value.on('finish', () => {
+        //   state.paused = true;
+        // });
+      } catch (e) {
+        //
+        console.log(e);
+      }
+    };
+
+    const __init = async () => {
+      try {
+        // 判断是否登录
+        const Authorization = storage.get(ACCESS_TOKEN) || '';
+        if (Authorization) {
+          const res = await api_verification({
+            token: Authorization
+          });
+          state.loginTag = res.data;
+          if (!res.data) {
+            removeAuth();
+            setLogout();
+          }
+        }
+
+        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;
+      }
+    };
+
+    onMounted(async () => {
+      __init();
+    });
+
+    onBeforeRouteUpdate((to: any) => {
+      state.id = to.query.id;
+      state.playType = '';
+      state.params.page = 1;
+      if (audioDom) audioDom.currentTime = 0;
+      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.img}
+            />
+          )}
+          {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}>
+                  <Image class={styles.audioImg} src={state.musicDetail.img} />
+                </div>
+                <i class={styles.audioPoint}></i>
+                <i class={styles.audioZhen}></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 description="暂无数据" />
+          )}
+        </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}
+          showButton={false}
+        />
+      </div>
+    );
+  }
+});

src/views/creation/index.module.less

@@ -0,0 +1,536 @@
+.playSection {
+  min-height: 175px;
+}
+
+.audioSection {
+  position: relative;
+  background: url('./images/audio-banner-bg.png') no-repeat top center;
+  background-size: contain;
+  height: 175px;
+
+  .audioContainer {
+    position: absolute;
+    top: 60px;
+    width: 196px;
+    height: 35px;
+    left: 85px;
+
+    .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;
+    }
+
+    .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;
+    }
+  }
+
+}
+
+.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: linear-gradient(to bottom, #5BECFF, #259CFE);
+      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,483 @@
+import { defineComponent, onMounted, reactive } from 'vue';
+// import WaveSurfer from 'wavesurfer.js';
+import styles from './index.module.less';
+import MSticky from '@/components/m-sticky';
+import MHeader from '@/components/m-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/m-empty';
+import dayjs from 'dayjs';
+import { nextTick } from 'process';
+import MVideo from '@/components/m-video';
+import ShareModel from './share-model';
+
+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 () => {
+      //
+      // showLoadingToast({
+      //   message: '图片生成中...',
+      //   forbidClick: true
+      // });
+      const res = await promisefiyPostMessage({
+        api: 'saveFile',
+        content: {
+          url: state.musicDetail.videoUrl
+        }
+      });
+      // if (res?.content?.status) {
+      //   showSuccessToast('保存成功');
+      // } else {
+      //   showFailToast('保存失败');
+      // }
+    };
+
+    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 {
+        //
+      }
+    });
+    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?.img}
+            />
+          )}
+          {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}>
+                  <Image class={styles.audioImg} src={state.musicDetail?.img} />
+                </div>
+                <i class={styles.audioPoint}></i>
+                <i class={styles.audioZhen}></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: #198CFE;
+  }
+}
+
+.btnGroup {
+  .btnText {
+    display: block;
+    padding-top: 16px;
+    text-align: center;
+    font-size: 16px;
+    font-weight: 500;
+    color: #496AAC;
+    line-height: 22px;
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,190 @@
+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 } from '@/helpers/utils';
+import request from '@/helpers/request';
+import { storage } from '@/helpers/storage';
+import { ACCESS_TOKEN } from '@/store/mutation-types';
+import { setLogin, state } from '@/state';
+import MImgCode from '@/components/m-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: 'SMS' 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: 'cooleshow-student',
+          client_secret: 'cooleshow-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('/edu-app/userlogin', {
+          requestType: 'form',
+          data: {
+            ...forms
+          }
+        });
+        storage.set(ACCESS_TOKEN, data.token_type + ' ' + data.access_token);
+
+        const userCash = await request.get('/edu-app/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="linear-gradient(90deg, #44C9FF 0%, #259CFE 100%)"
+              onClick={onLogin}>
+              登录
+            </Button>
+
+            <span
+              class={styles.btnText}
+              onClick={() => {
+                if (state.loginType === 'PWD') {
+                  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,229 @@
+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>
+    );
+  }
+});

vite.config.ts

@@ -13,8 +13,8 @@ function resolve(dir: string) {
 }
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
-// const proxyUrl = 'https://dev.lexiaoya.cn/';
-const proxyUrl = 'https://dev.kt.colexiu.com/';
+const proxyUrl = 'https://test.lexiaoya.cn/';
+// const proxyUrl = 'https://dev.kt.colexiu.com/';
 // const proxyUrl = 'http://192.168.3.143:7989/';
 export default defineConfig({
   base: './',
@@ -69,6 +69,10 @@ export default defineConfig({
     cors: true,
     https: false,
     proxy: {
+      '/edu-oauth': {
+        target: proxyUrl,
+        changeOrigin: true
+      },
       '/edu-app': {
         target: proxyUrl,
         changeOrigin: true