首页增加添加文件夹功能

src/views/index/Index-sy.vue

@@ -26,24 +26,12 @@
         </ul>
       </div>
       <div
-        style="display:flex;flex-direction:row;justify-content:space-between;font-size:16px;color:#353535;margin-top:10px;"
+        style="display:flex;flex-direction:row;justify-content:space-between;font-size:16px;color:#353535;margin:16px 0;"
       >
-        <p style="font-weight:500;color:#353535;">我的模版</p>
-        <router-link to="addTemplate" tag="p" style="color:#3F79FE;">+添加模板</router-link>
+        <span style="font-weight:500;color:#353535;">我的模版</span>
+        <span style="color:#3F79FE;" @click="showAddFolder = true;">+添加文件夹</span>
+        <!-- <router-link to="addTemplate" tag="p" style="color:#3F79FE;">+添加文件夹</router-link> -->
       </div>
-        <!-- <template-item
-          v-for="{id, folder_img_url, folder_name, detail} of list"
-          :key="id"
-          @click.native="goTemplList(detail)"
-          :thumb="folder_img_url"
-          :title="folder_name"
-          :desc="`${detail.length}条模板`"
-        ></template-item> -->
-         <!-- <van-empty 
-            v-if="!list.length"
-            description="您还未添加模板"
-            image="@/assets/notemplate.png">
-          </van-empty> -->
         <empty v-if="!list.length && !loading" name="moban" tip="您还未添加模板"></empty>
         <div>
           <div class="folder-item" v-for="{id, folder_simg_url, folder_name, detail} of list" :key="id" @click="goTemplList(detail)">
@@ -58,20 +46,26 @@
           </div>
         </div>
     </div>
+
+    <transition name="van-slide-up">
+      <add-folder v-if="showAddFolder" @cancel="showAddFolder = false" @next="addFolder"></add-folder>
+    </transition>
   </div>
 </template>
+
 <script lang="ts">
 import { Component, Prop, Vue, Watch, Inject, Mixins } from 'vue-property-decorator';
 import { List, Image, Empty } from 'vant';
 import { TEMPLATETYPE } from '@/const/enum';
 import { State, Action } from 'vuex-class';
 import IndexMixin from '@/mixins/Index';
-
+import AddFolder from '@/views/template/components/AddFolder.vue';
 @Component({
   components: {
     [List.name]: List,
     [Image.name]: Image,
     [Empty.name]: Empty,
+    AddFolder,
   },
 })
 export default class IndexSy extends Mixins(IndexMixin) {
@@ -82,6 +76,7 @@ export default class IndexSy extends Mixins(IndexMixin) {
   @Action('getProofCount') private getProofCount!: any;
   private list: any[] = [];
   private loading: boolean = true;
+  private showAddFolder: boolean = false;
   @Watch('isLogin', { immediate: true })
   private async onIsLoginChange(newVal: boolean, oldVal: boolean) {
     if (!newVal) {
@@ -101,6 +96,17 @@ export default class IndexSy extends Mixins(IndexMixin) {
       this.loading = false;
     }
   }
+  private async getUserFolders() {
+    const { results = []} = await this.$api.template.folderList({template_type: 1});
+    const ids = results.map((folder: any) => folder.id);
+    const res = await this.$api.template.list({id: ids});
+    this.list = res.results || [];
+  }
+  private async addFolder( { folderName }: any) {
+    this.showAddFolder = false ;
+    await this.$api.template.addFolder(folderName);
+    this.getUserFolders();
+  }
   private toLogin() {
     this.$router.push({name: 'Login'});
   }