更新

src/views/creation/api.ts

@@ -46,6 +46,13 @@ export const api_userMusicRemove = (params: any): Promise<any> => {
   });
 };
 
+/** 授权验证 */
+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}}

src/views/creation/index-share.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, reactive } from 'vue';
+import { defineComponent, onMounted, reactive, ref } from 'vue';
 import WaveSurfer from 'wavesurfer.js';
 import styles from './index.module.less';
 import MSticky from '@/components/m-sticky';
@@ -11,11 +11,12 @@ 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 { useRoute, useRouter } from 'vue-router';
+import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
 import {
   api_openUserMusicDetail,
   api_openUserMusicPage,
-  api_userMusicStar
+  api_userMusicStar,
+  api_verification
 } from './api';
 import MEmpty from '@/components/m-empty';
 import { nextTick } from 'process';
@@ -23,6 +24,8 @@ 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';
 
 export default defineComponent({
   name: 'creation-detail',
@@ -34,7 +37,7 @@ export default defineComponent({
     const state = reactive({
       id: route.query.id,
       loginTag: false, // 是否登录标识
-      loginStatus: true,
+      loginStatus: false,
       playType: '' as 'Audio' | 'Video' | '', // 播放类型
       musicDetail: {} as any,
       timer: null as any,
@@ -55,6 +58,7 @@ export default defineComponent({
         rows: 20
       }
     });
+    const wavesurfer = ref();
     const audioDom = new Audio();
     audioDom.controls = true;
     audioDom.style.width = '100%';
@@ -90,10 +94,17 @@ export default defineComponent({
         return;
       }
       try {
-        const { data } = await api_userMusicStar({
-          userMusicId: '1698984095609106434',
-          star: true
+        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 {
         //
       }
@@ -127,8 +138,18 @@ export default defineComponent({
       }
     };
 
+    const onDetail = (item: any) => {
+      console.log(item, 'item');
+      router.push({
+        path: '/shareCreation',
+        query: {
+          id: item.id
+        }
+      });
+    };
+
     const initAudio = () => {
-      const wavesurfer = WaveSurfer.create({
+      wavesurfer.value = WaveSurfer.create({
         container: document.querySelector(`#${audioId}`) as HTMLElement,
         waveColor: '#fff',
         progressColor: '#2FA1FD',
@@ -151,15 +172,15 @@ export default defineComponent({
         media: audioDom
       });
 
-      wavesurfer.once('interaction', () => {
-        // wavesurfer.play();
+      wavesurfer.value.once('interaction', () => {
+        // wavesurfer.value.play();
       });
-      wavesurfer.once('ready', () => {
+      wavesurfer.value.once('ready', () => {
         state.paused = audioDom.paused;
         state.duration = audioDom.duration;
       });
 
-      wavesurfer.on('finish', () => {
+      wavesurfer.value.on('finish', () => {
         state.paused = true;
       });
 
@@ -169,14 +190,22 @@ export default defineComponent({
       });
     };
 
-    onMounted(async () => {
-      // 判断是否登录
-      if (!state.loginTag) {
-        removeAuth();
-        setLogout();
-      }
-
+    const __init = async () => {
       try {
+        // 判断是否登录
+        const Authorization = storage.get(ACCESS_TOKEN) || '';
+        if (Authorization) {
+          const res = await api_verification({
+            token: Authorization
+          });
+          console.log(res, 'res');
+          state.loginTag = res.data;
+          if (!res.data) {
+            removeAuth();
+            setLogout();
+          }
+        }
+
         const { data } = await api_openUserMusicDetail(state.id);
         state.musicDetail = data;
         getList();
@@ -193,6 +222,17 @@ export default defineComponent({
       } catch {
         //
       }
+    };
+
+    onMounted(async () => {
+      __init();
+    });
+
+    onBeforeRouteUpdate((to: any) => {
+      state.id = to.query.id;
+      state.playType = '';
+      state.params.page = 1;
+      __init();
     });
     return () => (
       <div class={styles.creation}>
@@ -289,7 +329,10 @@ export default defineComponent({
             ),
             value: () => (
               <div class={styles.zan} onClick={onStarChange}>
-                <img src={iconZanActive} class={styles.iconZan} />
+                <img
+                  src={state.musicDetail.starFlag ? iconZanActive : iconZan}
+                  class={styles.iconZan}
+                />
                 {state.musicDetail.likeNum}
               </div>
             )
@@ -318,9 +361,13 @@ export default defineComponent({
               immediateCheck={false}>
               <div class={styles.cellGroup}>
                 {state.list.map((item: any) => (
-                  <div class={styles.cell}>
+                  <div class={styles.cell} onClick={() => onDetail(item)}>
                     <div class={styles.cellImg}>
-                      <Image class={styles.cellImage} src={item.img} />
+                      <Image
+                        class={styles.cellImage}
+                        src={item.img}
+                        fit="cover"
+                      />
 
                       <div class={styles.iconZan}>{item.likeNum}</div>
                     </div>
@@ -347,6 +394,7 @@ export default defineComponent({
             onClose={() => (state.loginStatus = false)}
             onConfirm={async (val: boolean) => {
               state.loginStatus = val;
+              state.loginStatus = false;
               const { data } = await api_openUserMusicDetail(state.id);
               state.musicDetail = data;
             }}

src/views/creation/index.module.less

@@ -166,6 +166,7 @@
     border: 1px solid #FFFFFF;
     margin-right: 10px;
     border-radius: 50%;
+    overflow: hidden;
   }
 
   .userInfo {
@@ -203,6 +204,7 @@
     .iconZan {
       width: 18px;
       height: 18px;
+      margin-right: 2px;
     }
   }
 }

src/views/creation/index.tsx

@@ -3,7 +3,18 @@ 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, showToast } from 'vant';
+import {
+  Button,
+  Cell,
+  Image,
+  List,
+  Popup,
+  Slider,
+  showFailToast,
+  showLoadingToast,
+  showSuccessToast,
+  showToast
+} from 'vant';
 import iconDownload from './images/icon-download.png';
 import iconShare from './images/icon-share.png';
 import iconDelete from './images/icon-delete.png';
@@ -12,7 +23,7 @@ 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 } from '@/helpers/native-message';
+import { postMessage, promisefiyPostMessage } from '@/helpers/native-message';
 import { browser, getGradeCh, getSecondRPM } from '@/helpers/utils';
 import { useRoute, useRouter } from 'vue-router';
 import {
@@ -178,8 +189,23 @@ export default defineComponent({
     };
 
     // 下载
-    const onDownload = () => {
+    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 () => {

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

@@ -23,7 +23,7 @@ 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 } from '@/helpers/native-message';
+import { promisefiyPostMessage, postMessage } from '@/helpers/native-message';
 import html2canvas from 'html2canvas';
 
 export default defineComponent({
@@ -62,7 +62,33 @@ export default defineComponent({
       }
     };
 
-    const onSavePath = () => {
+    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;
@@ -70,7 +96,11 @@ export default defineComponent({
       state.saveLoading = true;
       // 判断是否已经生成图片
       if (state.image) {
-        saveImg();
+        if (type) {
+          onSaveWe(type);
+        } else {
+          saveImg();
+        }
       } else {
         const container: any = document.getElementById('shareContent');
         html2canvas(container, {
@@ -81,7 +111,11 @@ export default defineComponent({
           .then(async canvas => {
             const url = canvas.toDataURL('image/png');
             state.image = url;
-            saveImg();
+            if (type) {
+              onSaveWe(type);
+            } else {
+              saveImg();
+            }
           })
           .catch(() => {
             closeToast();
@@ -166,14 +200,20 @@ export default defineComponent({
             onClick={() => emit('close')}
           />
           <div class={styles.share__header}>海报已生成！快来分享吧！</div>
-          <Grid columnNum={4} border={false} class={styles.gridSection}>
+          <Grid columnNum={5} border={false} class={styles.gridSection}>
             <GridItem
               icon={iconDownload}
               text="保存本地"
               onClick={onSavePath}></GridItem>
-            <GridItem icon={iconFirend} text="群聊"></GridItem>
-            <GridItem icon={iconWeChat} text="微信好友"></GridItem>
-            <GridItem icon={iconFriendRing} text="朋友圈"></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>
 

vite.config.ts

@@ -69,6 +69,10 @@ export default defineConfig({
     cors: true,
     https: false,
     proxy: {
+      '/edu-oauth': {
+        target: proxyUrl,
+        changeOrigin: true
+      },
       '/edu-app': {
         target: proxyUrl,
         changeOrigin: true