完成列表模块

src/api/ppt.js

@@ -77,4 +77,12 @@ export function apiPPTDetail(params){
  */
 export function apiPPTPublish(params){
     return post('/pptv2/publish',params)
+}
+
+/**
+ * ppt列表
+ * @param GroupId 分类id
+ */
+export function apiPPTList(params) {  
+    return get('/pptv2/group/ppt/list',params)
 }

src/views/ppt/components/PadPPTIndexWrap.vue

@@ -3,6 +3,7 @@ import {ref} from 'vue'
 import {useClassify} from '../hooks/useClassify'
 import openShareIcon from '@/assets/imgs/ppt/ppt_icon_user1.png'
 import closeShareIcon from '@/assets/imgs/ppt/ppt_icon_user2.png'
+import {apiPPTList} from '@/api/ppt'
 
 const {
     classifyState,
@@ -27,12 +28,24 @@ getPPTClassifyData()
 
 const activeType=ref('myPPT')
 
+// 获取ppt列表
+let activeGroupId=ref('')
+let pptList=ref([])
+async function getPPTList(){
+    const res=await apiPPTList({GroupId:activeGroupId.value})
+    if(res.Ret===200){
+        pptList.value=res.Data.List||[]
+    }
+}
+getPPTList()
+
 
 </script>
 
 <template>
     <div class="pad-ppt-index-wrap">
         <div class="left-classify-wrap">
+            <div class="sticky-box">
             <div class="classify-type-box">
                 <span 
                     :class="activeType=='myPPT'&&'active'"
@@ -52,7 +65,7 @@ const activeType=ref('myPPT')
                         :is-link="false"
                     >
                         <template #title>
-                            <div class="title-second">
+                            <div class="title-second" @click="activeGroupId=item.GroupId">
                                 <img src="@/assets/imgs/ppt/ppt_icon_file.png" alt="">
                                 <span class="van-ellipsis">{{item.GroupName}}</span>
                                 <div @click.stop="handleShowFileOpt(item)">
@@ -162,8 +175,32 @@ const activeType=ref('myPPT')
                     </van-collapse-item>
                 </van-collapse>
             </div>
+            </div>
+        </div>
+        <div class="right-list-wrap">
+            <div class="search-box">
+                <van-search 
+                    shape="round" 
+                    readonly 
+                    placeholder="请输入PPT标题" 
+                    @click="goMobileSearch"
+                />
+            </div>
+            <ul class="list-wrap">
+                <li 
+                    class="item" 
+                    v-for="item in pptList"
+                    :key="item.PptId"
+                    @click="goPPTDetail(item)"
+                >
+                    <div class="van-ellipsis title">{{item.Title}}</div>
+                    <img class="bg-img" :src="item.BackgroundImg" alt="">
+                    <div class="time">创建时间:{{item.PptCreateTime}}</div>
+                </li>
+                <li class="empty-item"></li>
+                <li class="empty-item"></li>
+            </ul>
         </div>
-        <div class="right-list-wrap"></div>
     </div>
     <!-- 目录重命名 -->
     <van-dialog 
@@ -238,11 +275,14 @@ const activeType=ref('myPPT')
     .pad-ppt-index-wrap{
         display: flex;
         .left-classify-wrap{
-            max-width: 360px;
-            min-width: 300px;
+            width: 300px;
             min-height: 100vh;
             border-right: 1px solid $border-color;
             padding: 30px;
+            .sticky-box{
+                position: sticky;
+                top: 90px;
+            }
             .classify-type-box{
                 span{
                     display: inline-block;
@@ -308,6 +348,33 @@ const activeType=ref('myPPT')
                 }
             }
         }
+        .right-list-wrap{
+            flex: 1;
+            padding: 20px;
+            .list-wrap{
+                padding: var(--van-search-padding);
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+                .item{
+                    display: block;
+                    box-sizing: border-box;
+                    width: 260px;
+                    min-height: 240px;
+                    padding: 10px 14px;
+                    border: 1px solid $border-color;
+                    margin-bottom: 20px;
+                    .bg-img{
+                        width: 100%;
+                        display: block;
+                        margin: 10px 0;
+                    }
+                }
+                .empty-item{
+                    width: 260px;
+                }
+            }
+        }
     }
     .file-rename-wrap{
         display: flex;