Browse Source

```
feat(learning-system): 添加课程笔记功能并优化课程详情页面

- 添加Xuxibiji组件用于展示和管理学习笔记
- 修改CourseDetail页面,将笔记功能集成到右侧内容区域
- 实现笔记页面的显示和隐藏切换功能
- 添加关闭按钮用于关闭笔记页面
- 更新.env.development配置文件,注释掉高运甲的API配置
- 临时注释掉支付跳转逻辑,便于开发调试
- 调整订单确认页面的样式,添加顶部间距
- 优化笔记组件的标题样式,添加分割线
```

zhangningning 1 tháng trước cách đây
mục cha
commit
fd3d2fccf9

+ 3 - 1
.env.development

@@ -1,4 +1,6 @@
 # 乔功
 VITE_API_BASE_URL=http://192.168.100.134:8080/api
 # 高运甲
-VITE_API_BASE_URL=http://192.168.100.89:8080/api
+# VITE_API_BASE_URL=http://192.168.100.89:8080/api
+
+

+ 24 - 9
src/pages/LearningSystem/CourseDetail.vue

@@ -47,9 +47,9 @@
                 </div>
               </div>
               <div class="addBtn flex-center gradient border_radius_10">
-                <div class="gap10" @click="openAddDialog">
+                <div class="gap10" @click="toAddNote">
                   <img :src="addIcon" alt="" style="width:30px;height:30px">
-                  <span class="font_size18">{{$t('common.add')}}{{$t('common.xuxibiji')}}</span>
+                  <span class="font_size18">120篇笔记</span>
                 </div>
               </div>
             </div>
@@ -59,16 +59,21 @@
           </div>
         </div>
         <div class="detail_right">
-          <div class="bg_color_fff padding16 border_radius_16 box_shadow_card">
+          <div class="bg_color_fff padding16 border_radius_16 box_shadow_card" v-show="!isShowNote">
             <CourseDirectory :info="info" />
           </div>
-          <div class=" bg_color_fff padding16 border_radius_16 box_shadow_card mt10">
+          <div class=" bg_color_fff padding16 border_radius_16 box_shadow_card mt10" v-show="!isShowNote">
             <OtherCourse />
           </div>
+          <div class="isShowNote bg_color_fff padding16 border_radius_16 box_shadow_card mt10" v-show="isShowNote">
+            <div class="CloseBold" @click="isShowNote=false">
+              <el-icon size="18"><CloseBold /></el-icon>
+            </div>
+            <Xuxibiji :info="info" />
+          </div>
         </div>
       </div>
     </div>
-    <BlockNoteEditorDialog ref="blockNoteEditorDialogRef" />
   </div>
 </template>
 
@@ -83,7 +88,7 @@ import OtherCourse from './components/OtherCourse.vue'
 import CourseDirectory from './components/CourseDirectory.vue'
 import VideoPlayer from '@/components/VideoPlayer.vue'
 import Pinglun from './components/pinglun.vue'
-import BlockNoteEditorDialog from '@/components/BlockNoteEditorDialog.vue'
+import Xuxibiji from './components/Xuxibiji.vue'
 import DGTMessage from '@/utils/message'
 
 // 引入api
@@ -124,9 +129,9 @@ const getDetail = async () => {
 };
 
 // 打开添加对话框
-const blockNoteEditorDialogRef = ref(null)
-const openAddDialog = () => {
-  blockNoteEditorDialogRef.value.openDialog();
+const isShowNote = ref(false)
+const toAddNote = () => {
+  isShowNote.value = true
 };
 
 // 播放指定视频
@@ -293,6 +298,16 @@ const playNextVideo = () => {
         }
       }
     }
+
+    .isShowNote{
+      position: relative;
+      .CloseBold{
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        cursor: pointer;
+      }
+    }
     
   }
 

+ 9 - 9
src/pages/LearningSystem/LearningSystemDetail.vue

@@ -114,15 +114,15 @@
   };
   const goDetail = (item) => {
     //如果未支付,跳转到支付页面
-    if(true){
-      router.push({
-        path: `/order-confirm`,
-        query: {
-          courseId: item.courseId,
-        }
-      })
-      return
-    }
+    // if(true){
+    //   router.push({
+    //     path: `/order-confirm`,
+    //     query: {
+    //       courseId: item.courseId,
+    //     }
+    //   })
+    //   return
+    // }
     //增加参数名称
     router.push({
       path: `/learning-system/detail/course`,

+ 4 - 1
src/pages/LearningSystem/components/xuxibiji.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="xuxibiji">
-    <div class="font_size18 bold">{{$t('common.xuxibiji')}}</div>
+    <div class="gap10">
+      <div class="line_vertical"></div>
+      <div class="font_size18 bold">{{$t('common.xuxibiji')}}</div>
+    </div>
     <div class="addBtn flex-center gradient border_radius_10">
       <div class="gap10" @click="openAddDialog">
         <img :src="addIcon" alt="" style="width:30px;height:30px">

+ 1 - 1
src/pages/order/orderConfirm.vue

@@ -6,7 +6,7 @@
       <span class="font_size16 color_price">{{$t('common.orderConfirmTip')}}</span>
     </div>
     <!-- 订单信息 -->
-    <div class="border_radius_8 padding16 bg_color_fff box_shadow_card">
+    <div class="border_radius_8 padding16 bg_color_fff box_shadow_card mt20">
       <div class="gap10">
         <div class="line_vertical"></div>
         <div class="font_size20 bold">{{$t('common.orderInfo')}}</div>