更新

src/api/user.ts

@@ -5,7 +5,7 @@ import request from '@/utils/request';
  * @param prams 登录参数
  */
 export const userLogin = (params: any) => {
-  return request.post('/api-auth/usernameLogin', {
+  return request.post('/api-oauth/userlogin', {
     requestType: 'form',
     data: params
   });
@@ -16,7 +16,7 @@ export const userLogin = (params: any) => {
  * returns user
  */
 export const getUserInfo = () => {
-  return request.get('/api-app/user/getUserInfo', {
+  return request.get('/api-oauth/user/getUserInfo', {
     requestType: 'form'
   });
 };

src/components/card-type/audio-player/index.module.less

@@ -0,0 +1,80 @@
+.audioContainer {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  height: 170px;
+
+  .cover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    pointer-events: none;
+    user-select: none;
+    width: 100%;
+    height: 170px;
+    background-color: #fff;
+    border-radius: 14px 14px 0 0;
+    overflow: hidden;
+    transition: all .2s ease-in-out;
+
+    img {
+      height: fit-content;
+      min-height: 100%;
+    }
+
+    &.imgHover {
+      transition: all .2s ease-in-out;
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+
+  .previewAudio {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    pointer-events: none;
+    user-select: none;
+    width: 100%;
+    height: 170px;
+    border-radius: 14px 14px 0 0;
+    overflow: hidden;
+    background-color: #fff;
+    opacity: 0;
+    visibility: hidden;
+    transition: all .2s ease-in-out;
+
+    audio {
+      opacity: 0;
+    }
+
+    canvas {
+      width: 100% !important;
+      height: 100% !important;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    &.previewAudioHover {
+      opacity: 1;
+      visibility: visible;
+      transition: all .2s ease-in-out;
+    }
+  }
+
+  &.imgAnimated {
+    .cover {
+      opacity: 0;
+      transition: all .2s ease-in-out;
+    }
+  }
+}

src/components/card-type/audio-player/index.tsx

@@ -0,0 +1,113 @@
+import { defineComponent, reactive } from 'vue';
+import styles from './index.module.less';
+import { NImage } from 'naive-ui';
+// import Vudio from 'vudio.js';
+
+export default defineComponent({
+  name: 'audio-player',
+  props: {
+    cover: {
+      type: String,
+      default:
+        'https://gyt.ks3-cn-beijing.ksyuncs.com/courseware/1687916228530.png'
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    previewDisabled: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    // const canvasEle: any = ref();
+    // const audioEle: any = ref();
+
+    // const vudio: any = ref();
+    const audioForm = reactive({
+      status: false
+    });
+
+    // 鼠标移上时
+    // const onMouseover = (e: MouseEvent) => {
+    //   console.log(e, 'onMouseover');
+    //   audioForm.status = true;
+
+    //   nextTick(() => {
+    //     // onInit(audioEle.value, canvasEle.value);
+
+    //     console.log(audioEle.value, 'onMouseout');
+
+    //     setTimeout(() => {
+    //       // console.log(audioEle.value, 'value');
+    //       // audioEle.value.pause();
+    //       // audioEle.value.load();
+    //       // audioEle.value.currentTime = 0;
+    //       // audioEle.value.muted = true;
+    //       // audioEle.value.play();
+
+    //     }, 10);
+    //   });
+    // };
+
+    // // 鼠标移开时
+    // const onMouseout = (e: MouseEvent) => {
+    //   console.log(e, 'mouseover');
+    //   audioForm.status = false;
+    // };
+
+    // const onInit = (audio: undefined, canvas: undefined) => {
+    //   if (!vudio.value) {
+    //     vudio.value = new Vudio(audio, canvas, {
+    //       effect: 'waveform',
+    //       accuracy: 256,
+    //       width: 1024,
+    //       height: 600,
+    //       waveform: {
+    //         maxHeight: 200,
+    //         color: [
+    //           [0, '#44D1FF'],
+    //           [0.5, '#44D1FF'],
+    //           [0.5, '#198CFE'],
+    //           [1, '#198CFE']
+    //         ],
+    //         prettify: false
+    //       }
+    //     });
+    //     vudio.value.dance();
+    //   }
+    // };
+    return () => (
+      <div
+        class={[
+          styles.audioContainer,
+          audioForm.status ? styles.imgAnimated : ''
+        ]}>
+        <NImage
+          class={[styles.cover, audioForm.status ? styles.imgHover : '']}
+          lazy
+          previewDisabled={true}
+          objectFit="cover"
+          src={props.cover}
+        />
+
+        {/* <div
+          class={[
+            styles.previewAudio,
+            audioForm.status ? styles.previewAudioHover : ''
+          ]}>
+          <audio
+            controls="true"
+            muted="true"
+            autoplay
+            preload="auto"
+            ref={(el: any) => (audioEle.value = el)}
+            crossorigin="anonymous"
+            src={props.content + '?time=1'}></audio>
+          <canvas ref={(el: any) => (canvasEle.value = el)}></canvas>
+        </div> */}
+      </div>
+    );
+  }
+});

src/components/card-type/index.module.less

@@ -132,6 +132,7 @@
     border-radius: 8px;
     display: none;
     opacity: 0;
+    z-index: 99;
     transition: all .3s ease-in-out;
   }
 }

src/components/card-type/index.tsx

@@ -1,4 +1,4 @@
-import { PropType, defineComponent } from 'vue';
+import { PropType, defineComponent, ref } from 'vue';
 import styles from './index.module.less';
 import { NButton, NCard, NImage } from 'naive-ui';
 import iconImage from '@common/images/icon-image.png';
@@ -6,11 +6,14 @@ import iconVideo from '@common/images/icon-video.png';
 import iconAudio from '@common/images/icon-audio.png';
 import iconMusic from '@common/images/icon-music.png';
 import TheNoticeBar from '../TheNoticeBar';
+import AudioPlayer from './audio-player';
+import VideoPlayer from './video-player ';
 
 type itemType = {
   id: string | number;
   type: 'IMG' | 'VIDEO' | 'AUDIO' | 'SONG';
   url: string;
+  content?: string;
   title: string;
   isCollect: boolean;
   isSelected: boolean;
@@ -39,6 +42,11 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    // 鼠标移动上面的时候是否自动播放，或者可以点击
+    disabledMouseHover: {
+      type: Boolean,
+      default: true
+    },
     item: {
       type: Object as PropType<itemType>,
       default: () => ({})
@@ -80,16 +88,34 @@ export default defineComponent({
             props.isActive ? styles.isActive : ''
           ]}>
           {{
-            cover: () =>
-              ['IMG', 'VIDEO', 'SONG', 'AUDIO'].includes(props.item.type) && (
-                <NImage
-                  class={[styles.cover, styles.image]}
-                  lazy
-                  previewDisabled
-                  objectFit="cover"
-                  src={props.item.url}
-                />
-              ),
+            cover: () => (
+              <>
+                {['IMG', 'SONG'].includes(props.item.type) && (
+                  <NImage
+                    class={[styles.cover, styles.image]}
+                    lazy
+                    previewDisabled={props.disabledMouseHover}
+                    objectFit="cover"
+                    src={props.item.url}
+                  />
+                )}
+                {/* 音频 */}
+                {props.item.type === 'AUDIO' && (
+                  <AudioPlayer
+                    content={props.item.content}
+                    previewDisabled={props.disabledMouseHover}
+                  />
+                )}
+                {/* 视频 */}
+                {props.item.type === 'VIDEO' && (
+                  <VideoPlayer
+                    cover={props.item.url}
+                    content={props.item.content}
+                    previewDisabled={props.disabledMouseHover}
+                  />
+                )}
+              </>
+            ),
             footer: () => (
               <div class={styles.footer}>
                 <div class={styles.title}>

src/components/card-type/video-player /index.module.less

@@ -0,0 +1,80 @@
+.audioContainer {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  height: 170px;
+
+  .cover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    pointer-events: none;
+    user-select: none;
+    width: 100%;
+    height: 170px;
+    background-color: #fff;
+    border-radius: 14px 14px 0 0;
+    overflow: hidden;
+    transition: all .2s ease-in-out;
+
+    img {
+      height: fit-content;
+      min-height: 100%;
+    }
+
+    &.imgHover {
+      transition: all .2s ease-in-out;
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+
+  .previewAudio {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    pointer-events: none;
+    user-select: none;
+    width: 100%;
+    height: 170px;
+    border-radius: 14px 14px 0 0;
+    overflow: hidden;
+    background-color: #fff;
+    opacity: 0;
+    visibility: hidden;
+    transition: all .2s ease-in-out;
+
+    audio {
+      opacity: 0;
+    }
+
+    canvas {
+      width: 100% !important;
+      height: 100% !important;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    &.previewAudioHover {
+      opacity: 1;
+      visibility: visible;
+      transition: all .2s ease-in-out;
+    }
+  }
+
+  &.imgAnimated {
+    .cover {
+      opacity: 0;
+      transition: all .2s ease-in-out;
+    }
+  }
+}

src/components/card-type/video-player /index.tsx

@@ -0,0 +1,57 @@
+import { defineComponent, reactive } from 'vue';
+import styles from './index.module.less';
+// import 'plyr/dist/plyr.css';
+// import Plyr from 'plyr';
+import { NImage } from 'naive-ui';
+
+export default defineComponent({
+  name: 'audio-player',
+  props: {
+    cover: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    previewDisabled: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    const audioForm = reactive({
+      status: false
+    });
+
+    return () => (
+      <div
+        class={[
+          styles.audioContainer,
+          audioForm.status ? styles.imgAnimated : ''
+        ]}>
+        <NImage
+          class={[styles.cover, audioForm.status ? styles.imgHover : '']}
+          lazy
+          previewDisabled={true}
+          objectFit="cover"
+          src={props.cover}
+        />
+
+        {/* <div
+          class={[
+            styles.previewAudio,
+            audioForm.status ? styles.previewAudioHover : ''
+          ]}>
+          <video
+            style={{ width: '100%', height: '100%' }}
+            src={props.content}
+            ref={videoRef}
+            muted
+            playsinline="false"></video>
+        </div> */}
+      </div>
+    );
+  }
+});

src/store/modules/users.ts

@@ -54,6 +54,7 @@ export const useUserStore = defineStore('user-store', {
     async login(userInfo: any) {
       try {
         const { data } = await userLogin(userInfo);
+        console.log(data, 'data');
         const userToken =
           data.authentication.token_type +
           ' ' +

src/views/login/components/pwdLogin.tsx

@@ -41,8 +41,8 @@ export default defineComponent({
     const showPwd = ref(false);
     const userStore = useUserStore();
     const formInline = reactive({
-      username: '13810952948',
-      password: 'klx2948',
+      username: '15907121013',
+      password: 'a123456',
       isCaptcha: true
     });
 
@@ -56,12 +56,10 @@ export default defineComponent({
           const params: FormState = {
             username,
             password,
-            // loginType: 'password',
-            // grant_type: 'password',
-            // client_id: 'teacher',
-            // client_secret: 'teacher'
-            clientId: 'teacher',
-            clientSecret: 'teacher'
+            loginType: 'password',
+            grant_type: 'password',
+            client_id: 'teacher',
+            client_secret: 'teacher'
           };
 
           try {

src/views/prepare-lessons/index.tsx

@@ -1,25 +1,20 @@
-import { defineComponent, nextTick, onMounted, ref } from 'vue';
+import { defineComponent, onMounted, ref } from 'vue';
 import styles from './index.module.less';
 import DirectoryList from './components/directory-main';
 import LessonMain from './components/lesson-main';
 import ResourceMain from './components/resource-main';
-import { useElementSize, useResizeObserver } from '@vueuse/core';
-import { useRect } from '@vant/use';
+import { useResizeObserver } from '@vueuse/core';
 
 export default defineComponent({
   name: 'prepare-lessons',
   setup() {
     const directroyRef = ref();
-    // const
     onMounted(() => {
-      // console.log(document.querySelector('#resourceRef')?.clientHeight);
-
       useResizeObserver(
         document.querySelector('#resourceRef') as HTMLElement,
         (entries: any) => {
           const entry = entries[0];
           const { height } = entry.contentRect;
-          // document.body.setAttribute
           document.documentElement.style.setProperty(
             '--window-page-lesson-height',
             height + 'px'

vite.config.ts

@@ -12,7 +12,7 @@ function resolve(dir: string) {
 }
 // https://vitejs.dev/config/
 // https://github.com/vitejs/vite/issues/1930 .env
-const proxyUrl = 'https://dev.colexiu.com/';
+const proxyUrl = 'https://test.lexiaoya.cn/';
 export default defineConfig({
   base: './',
   plugins: [
@@ -40,7 +40,7 @@ export default defineConfig({
     cors: true,
     https: false,
     proxy: {
-      '/api-auth': {
+      '/api-oauth': {
         target: proxyUrl,
         changeOrigin: true
       }