From 5e4a8469d17aa46c60699e4756739ceec198f976 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Wed, 19 Feb 2020 18:06:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F,=E5=BA=95=E9=83=A8tabbar=E9=80=82=E9=85=8DiP?=
 =?UTF-8?q?honeXms?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |   1 +
 public/index.html                |   4 +
 src/icons/svg/add-file.svg       |   1 +
 src/icons/svg/tab-favorite.svg   |   1 +
 src/icons/svg/tab-folder.svg     |   1 +
 src/icons/svg/tab-recently.svg   |   1 +
 src/icons/svg/tab-setting.svg    |   1 +
 src/layout/components/Navbar.vue |  14 +-
 src/main.js                      |  12 +-
 src/views/home/mobile/index.vue  | 367 +++++++++++++++++++++++++++----
 10 files changed, 352 insertions(+), 51 deletions(-)
 create mode 100644 src/icons/svg/add-file.svg
 create mode 100644 src/icons/svg/tab-favorite.svg
 create mode 100644 src/icons/svg/tab-folder.svg
 create mode 100644 src/icons/svg/tab-recently.svg
 create mode 100644 src/icons/svg/tab-setting.svg

diff --git a/package.json b/package.json
index b188619..f6adda6 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "vue": "2.6.10",
     "vue-router": "3.0.6",
     "vue-simple-uploader": "^0.7.4",
+    "vue-touch": "^2.0.0-beta.4",
     "vuex": "3.1.0",
     "we-vue": "^2.3.3",
     "webuploader": "^0.1.8",
diff --git a/public/index.html b/public/index.html
index 47d3642..49d6108 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,10 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+
+     <!--在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值-->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
+
     <link rel="icon" href="<%= BASE_URL %>netdisk.png">
     <title><%= webpackConfig.name %></title>
   </head>
diff --git a/src/icons/svg/add-file.svg b/src/icons/svg/add-file.svg
new file mode 100644
index 0000000..18838eb
--- /dev/null
+++ b/src/icons/svg/add-file.svg
@@ -0,0 +1 @@
+<svg t="1582089551409" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="31635" width="32" height="32"><path d="M820.965517 247.172414L573.793103 0H26.482759v1024h794.482758V247.172414" fill="#EFECDE" p-id="31636"></path><path d="M203.034483 406.068966h441.37931a17.655172 17.655172 0 1 0 0-35.310345H203.034483a17.655172 17.655172 0 0 0 0 35.310345M203.034483 264.827586h176.551724a17.655172 17.655172 0 1 0 0-35.310345H203.034483a17.655172 17.655172 0 0 0 0 35.310345M644.413793 512H203.034483a17.655172 17.655172 0 1 0 0 35.310345h441.37931a17.655172 17.655172 0 1 0 0-35.310345M644.413793 653.241379H203.034483a17.655172 17.655172 0 0 0 0 35.310345h441.37931a17.655172 17.655172 0 1 0 0-35.310345M644.413793 794.482759H203.034483a17.655172 17.655172 0 0 0 0 35.310344h441.37931a17.655172 17.655172 0 1 0 0-35.310344M573.793103 0v247.172414h247.172414L573.793103 0" fill="#D5D0BB" p-id="31637"></path><path d="M997.517241 812.137931c0 117.000828-94.861241 211.862069-211.862069 211.862069s-211.862069-94.861241-211.862069-211.862069 94.861241-211.862069 211.862069-211.862069 211.862069 94.861241 211.862069 211.862069" fill="#71C386" p-id="31638"></path><path d="M891.586207 794.482759h-88.275862v-88.275862a17.655172 17.655172 0 0 0-35.310345 0v88.275862h-88.275862a17.655172 17.655172 0 0 0 0 35.310344h88.275862v88.275863a17.655172 17.655172 0 0 0 35.310345 0v-88.275863h88.275862a17.655172 17.655172 0 0 0 0-35.310344" fill="#FFFFFF" p-id="31639"></path></svg>
diff --git a/src/icons/svg/tab-favorite.svg b/src/icons/svg/tab-favorite.svg
new file mode 100644
index 0000000..059ffd6
--- /dev/null
+++ b/src/icons/svg/tab-favorite.svg
@@ -0,0 +1 @@
+<svg t="1582090769486" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="581" width="32" height="32"><path d="M532.37 129.31L643.1 353.67a22.602 22.602 0 0 0 17.02 12.36l247.6 35.98c18.54 2.69 25.94 25.48 12.53 38.55L741.08 615.21a22.575 22.575 0 0 0-6.5 20l42.3 246.6c3.17 18.46-16.21 32.54-32.79 23.83L522.62 789.22a22.601 22.601 0 0 0-21.03 0L280.12 905.65c-16.58 8.72-35.96-5.36-32.79-23.83l42.3-246.6a22.575 22.575 0 0 0-6.5-20L103.95 440.57c-13.41-13.08-6.01-35.86 12.53-38.55l247.6-35.98a22.602 22.602 0 0 0 17.02-12.36l110.73-224.37c8.29-16.8 32.25-16.8 40.54 0z" fill="#FFA823" p-id="582"></path><path d="M754.65 940.3c-8.68 0-17.4-2.09-25.46-6.33L512.1 819.84 295.01 933.97c-18.53 9.74-40.56 8.15-57.5-4.16-16.94-12.31-25.26-32.77-21.72-53.4l41.46-241.73-175.63-171.2c-14.99-14.61-20.29-36.06-13.82-55.97 6.47-19.91 23.36-34.15 44.08-37.16l242.71-35.27 108.54-219.94c9.26-18.77 28.03-30.44 48.96-30.44 20.94 0 39.7 11.66 48.96 30.44L669.6 335.08l242.71 35.27c20.72 3.01 37.61 17.25 44.08 37.16 6.47 19.91 1.18 41.36-13.82 55.97l-175.63 171.2 41.46 241.73c3.54 20.63-4.78 41.1-21.72 53.4-9.56 6.96-20.76 10.49-32.03 10.49zM139.93 430.94L305.46 592.3a54.59 54.59 0 0 1 15.7 48.33l-39.08 227.83 204.61-107.57a54.595 54.595 0 0 1 50.82 0l204.61 107.57-39.08-227.83a54.59 54.59 0 0 1 15.7-48.33l165.53-161.35-228.76-33.25a54.564 54.564 0 0 1-41.11-29.87L512.1 160.55 409.8 367.84a54.564 54.564 0 0 1-41.11 29.87l-228.76 33.23z m363.74-287.47z" fill="#FFA823" p-id="583"></path></svg>
diff --git a/src/icons/svg/tab-folder.svg b/src/icons/svg/tab-folder.svg
new file mode 100644
index 0000000..f3e498f
--- /dev/null
+++ b/src/icons/svg/tab-folder.svg
@@ -0,0 +1 @@
+<svg t="1582090882296" class="icon" viewBox="0 0 1365 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1680" width="32" height="32"><path d="M85.333333 362.666667h1169.066667v512c0 46.933333-38.4 85.333333-85.333333 85.333333H170.666667c-46.933333 0-85.333333-38.4-85.333334-85.333333v-512zM85.333333 157.866667v93.866666h597.333334l-226.133334-140.8c-38.4-25.6-110.933333-46.933333-157.866666-46.933333h-170.666667c-25.6 0-42.666667 17.066667-42.666667 42.666667v51.2z" fill="#FFB927" p-id="1681"></path><path d="M85.333333 213.333333h1126.4c25.6 0 42.666667 21.333333 42.666667 42.666667v68.266667H85.333333V213.333333z" fill="#FFB927" p-id="1682"></path></svg>
diff --git a/src/icons/svg/tab-recently.svg b/src/icons/svg/tab-recently.svg
new file mode 100644
index 0000000..04848da
--- /dev/null
+++ b/src/icons/svg/tab-recently.svg
@@ -0,0 +1 @@
+<svg t="1582091405096" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2521" width="32" height="32"><path d="M513.5 899C726.406 899 899 726.406 899 513.5S726.406 128 513.5 128 128 300.594 128 513.5 300.594 899 513.5 899z m0 64C265.248 963 64 761.752 64 513.5S265.248 64 513.5 64 963 265.248 963 513.5 761.752 963 513.5 963z" fill="#2c2c2c" p-id="2522"></path><path d="M800 482c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32H545c-35.346 0-64-28.654-64-64V226c0-17.673 14.327-32 32-32 17.673 0 32 14.327 32 32v256h255z" fill="#2c2c2c" p-id="2523"></path></svg>
diff --git a/src/icons/svg/tab-setting.svg b/src/icons/svg/tab-setting.svg
new file mode 100644
index 0000000..340db86
--- /dev/null
+++ b/src/icons/svg/tab-setting.svg
@@ -0,0 +1 @@
+<svg t="1582090862780" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1547" width="32" height="32"><path d="M932.59 438.66l-88.55-9.42c-11.15-1.18-20.89-8.42-24.71-18.96-5.51-15.23-12.13-30.02-19.38-44.93-5.06-10.39-3.46-22.81 3.87-31.75l56.85-69.42c9.75-11.89 8.88-29.23-1.99-40.1l-59.84-59.84c-10.88-10.89-28.26-11.73-40.15-1.95l-69.01 56.78c-8.91 7.33-21.31 8.97-31.7 3.96-15.15-7.29-30.06-13.94-45.36-19.48-10.53-3.82-17.77-13.5-18.97-24.65-2.46-23.2-6.65-62.51-9.44-88.7-1.62-15.21-14.44-26.65-29.73-26.65h-86.33c-15.29 0-28.12 11.54-29.74 26.74l-9.4 88.32c-1.19 11.24-8.54 21.08-19.22 24.81-15.66 5.48-30.74 12.06-45.31 19.28-10.39 5.15-22.85 3.52-31.82-3.83l-69.09-56.58c-11.93-9.78-29.34-8.87-40.19 2.09l-59.17 59.75c-10.75 10.86-11.59 28.08-1.94 39.93l56.68 69.59c7.23 8.89 8.87 21.19 3.9 31.51-7.17 14.91-13.61 29.7-19.04 44.92-3.8 10.62-13.57 17.95-24.78 19.14l-88.95 9.43c-15.21 1.61-26.75 14.44-26.75 29.74v86.4c0 15.26 11.48 28.07 26.64 29.73l88.83 9.73c11.3 1.24 21.12 8.71 24.81 19.47 5.23 15.3 11.58 30.35 18.82 44.88 5.14 10.33 3.49 22.76-3.8 31.71l-56.28 69.1c-9.68 11.89-8.8 29.18 2.05 40.03l59.03 59.03c10.85 10.85 28.14 11.73 40.04 2.04l69.1-56.29c8.94-7.28 21.34-8.94 31.66-3.82a402.467 402.467 0 0 0 45.46 19.14c10.71 3.75 18.11 13.56 19.32 24.85l9.41 88.41c1.62 15.21 14.45 26.74 29.74 26.74h86.33c15.29 0 28.13-11.54 29.74-26.74l9.42-88.47c1.19-11.22 8.53-21 19.16-24.79 15.34-5.46 30.35-11.95 45.39-19.31 10.35-5.07 22.75-3.41 31.67 3.89l68.93 56.4c11.86 9.69 29.1 8.88 39.99-1.89l59.71-59.13c10.96-10.86 11.87-28.26 2.09-40.2l-56.6-69.11c-7.33-8.95-8.97-21.39-3.85-31.77 7.19-14.58 13.75-29.67 19.22-45.02 3.77-10.58 13.51-17.88 24.67-19.1l88.66-9.75c15.17-1.67 26.64-14.47 26.64-29.72V468.4c0-15.29-11.54-28.12-26.74-29.74zM604.75 604.5c-25.25 25.26-55.76 37.65-92.45 37.65s-67.32-12.27-92.45-37.65c-25.39-25.62-37.66-56.71-37.66-92.94 0-36.7 12.39-67.2 37.66-92.46 25.25-25.26 55.76-37.65 92.45-37.65s67.2 12.39 92.45 37.65c25.27 25.26 37.66 55.76 37.66 92.46s-12.4 67.68-37.66 92.94z" fill="#6F94D4" p-id="1548"></path></svg>
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index 76bb9dc..a942a83 100644
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="navbar">
+  <div v-if="isShow" class="navbar">
     <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
     <breadcrumb class="breadcrumb-container" />
@@ -37,6 +37,18 @@ import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
 
 export default {
+  data() {
+    return {
+      isShow: true
+    }
+  },
+  mounted() {
+    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
+      this.isShow = false
+    } else {
+      this.isShow = true
+    }
+  },
   components: {
     Breadcrumb,
     Hamburger
diff --git a/src/main.js b/src/main.js
index f87c5c7..38a968d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,11 +14,15 @@ import store from './store'
 import router from './router'
 // import WeVue from 'we-vue'
 // import 'we-vue/lib/style.css'
-import { Button, Cell, CellGroup, Image, List, PullRefresh, SwipeCell, Col, Row, Divider, Sticky } from 'vant';
+import { Button, Cell, CellGroup, Image, List, PullRefresh, SwipeCell, Col, Row, Divider, Sticky, NavBar, Icon, Tabbar, TabbarItem} from 'vant';
 
 import '@/icons' // icon
 import '@/permission' // permission control
 
+import VueTouch from"vue-touch";
+
+Vue.use(VueTouch, {name:'v-touch'})
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api
@@ -50,6 +54,10 @@ Vue.use(Col);
 Vue.use(Row);
 Vue.use(Divider);
 Vue.use(Sticky);
+Vue.use(NavBar);
+Vue.use(Icon);
+Vue.use(Tabbar);
+Vue.use(TabbarItem);
 
 Vue.use(uploader)
 Vue.use(EVueContextmenu)
@@ -66,7 +74,7 @@ new Vue({
 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
   Vue.prototype.$pc = false
 } else {
-  Vue.prototype.$pc = true
+  Vue.prototype.$pc = false
   let winWidth = document.documentElement.offsetWidth ||
     document.body.offsetWidth
   winWidth = winWidth < 1366 ? 1366 : winWidth
diff --git a/src/views/home/mobile/index.vue b/src/views/home/mobile/index.vue
index 4525f78..8a776ff 100644
--- a/src/views/home/mobile/index.vue
+++ b/src/views/home/mobile/index.vue
@@ -6,6 +6,7 @@
       :finished="finished"
       :finished-text="statistics()"
       @load="getFileList(true)"
+      @scroll="swipeUp"
     >
       <!-- <van-sticky :offset-top="0">
         <van-row class="classification">
@@ -28,17 +29,52 @@
         </van-row>
       </van-sticky> -->
 
+      <!--<van-nav-bar-->
+        <!--v-if="pathList.length < 3"-->
+        <!--:title="pathList[pathList.length-2].folder"-->
+        <!--:left-text=""-->
+        <!--right-text="选择"-->
+        <!--left-arrow>-->
+      <!--</van-nav-bar>-->
+
+      <van-sticky :offset-top="0">
+        <div>{{test}} {{diffTabbarTop}} {{lastTabbarOffsetTop}}</div>
+        <van-nav-bar
+          v-if="pathList.length < 3"
+          title="浏览"
+          right-arrow
+          @click-right="titleRightClick">
+          <!--<van-icon name="wap-nav" slot="right">-->
+          <!--</van-icon>-->
+          <svg-icon class="title-right-icon" icon-class="add-file" slot="right"/>
+        </van-nav-bar>
+
+        <van-nav-bar
+          v-if="pathList.length === 3"
+          :title="pathList[pathList.length-2].folder"
+          left-text="所有文件"
+          right-text="选择"
+          left-arrow
+          @click-left="clickBack">
+        </van-nav-bar>
+
+        <van-nav-bar
+          v-if="pathList.length > 3"
+          :title="pathList[pathList.length-2].folder"
+          :left-text="pathList[pathList.length-3].folder"
+          right-text="选择"
+          left-arrow
+          @click-left="clickBack">
+        </van-nav-bar>
+
+      </van-sticky>
+
       <!--<van-cell v-for="item in fileList" :key="item.id" :title="item.name"></van-cell>-->
       <!--<van-cell v-for="item in fileList" :key="item.id" :title="item.name" :label="item.updateDate"></van-cell>-->
-      <van-cell class="list-item" v-for="(item,index) in fileList" :key="item.id">
-
-        <template slot="left">
-          <van-button square type="primary" text="选择"></van-button>
-        </template>
-
-        <!--<van-divider v-if="index === 0" style="margin: 0 15px 0 15px;"></van-divider>-->
-        <van-row>
-          <van-col span="4" align="center" class="list-cell-icon">
+      <van-cell class="list-item" center v-for="(item,index) in fileList" :key="item.id" @click="fileClick(item)" :is-link="item.isFolder">
+          <!--<van-divider v-if="index === 0" style="margin: 0 15px 0 15px;"></van-divider>-->
+          <van-row>
+            <van-col span="4" align="center" class="list-cell-icon">
               <svg-icon v-if="item.isFavorite" icon-class="menu-favorite-hover" style="font-size: 1rem;float: right;margin-bottom: -1rem;position: relative;" />
               <svg-icon v-if="item.isFolder" icon-class="folder" />
               <svg-icon v-else-if="item.contentType.indexOf('video') > -1" icon-class="video" />
@@ -50,32 +86,68 @@
               <svg-icon v-else-if="item.contentType.indexOf('excel') > -1" icon-class="file-excel" />
               <svg-icon v-else-if="item.contentType.indexOf('zip') > -1" icon-class="zip" />
               <svg-icon v-else icon-class="file" />
-          </van-col>
-          <van-col span="16" @click="fileClick(item)">
-            <van-col span="16">
-              {{item.name}}
             </van-col>
-            <van-col span="16" class="file-description" justify="space-between">
-              <van-col span="12">
-                {{formatTime(item.agoTime)}}&nbsp;&nbsp;&nbsp;{{formatSize(item.size)}}
+            <van-col span="16" class="list-item-content">
+              <van-col span="24">
+                {{item.name}}
+              </van-col>
+              <van-col span="24" class="file-description" justify="space-between">
+                <van-col span="24">
+                  {{formatTime(item.agoTime)}}&nbsp;&nbsp;&nbsp;{{formatSize(item.size)}}
+                </van-col>
+                <!-- <van-col span="8">
+                  {{formatSize(item.size)}}
+                </van-col> -->
               </van-col>
-              <!-- <van-col span="8">
-                {{formatSize(item.size)}}
-              </van-col> -->
             </van-col>
-          </van-col>
-          <van-col span="4"></van-col>
-        </van-row>
-
-        <template slot="right">
-          <van-button square type="primary" text="收藏"></van-button>
-          <van-button square type="danger" text="删除"></van-button>
-        </template>
-
-        <!--<van-divider></van-divider>-->
+            <van-col span="4"></van-col>
+          </van-row>
+          <!--<van-divider></van-divider>-->
       </van-cell>
     </van-list>
   </van-pull-refresh>
+    <!--<van-tabbar v-model="tabActive" :class="tabBottom">-->
+    <div v-if="diffTabbarTop === 0 || diffTabbarTop > 0">
+      <van-tabbar
+        id="tabbar"
+        active-color="#07c160"
+        inactive-color="#000"
+        v-model="tabActive"
+        class="tab-bottom">
+        <van-tabbar-item><svg-icon icon-class="tab-folder" /><div class="tab-text">浏览</div></van-tabbar-item>
+        <van-tabbar-item><svg-icon icon-class="tab-recently" /><div class="tab-text">最近</div></van-tabbar-item>
+        <van-tabbar-item><svg-icon icon-class="tab-favorite" /><div class="tab-text">收藏</div></van-tabbar-item>
+        <van-tabbar-item><svg-icon icon-class="tab-setting" /><div class="tab-text">设置</div></van-tabbar-item>
+      </van-tabbar>
+    </div>
+    <div v-if="diffTabbarTop < 0">
+      <van-tabbar
+        id="tabbar"
+        v-if="isiPhoneX === 30"
+        active-color="#07c160"
+        inactive-color="#000"
+        v-model="tabActive"
+        class="tab-bottom-iphoneX">
+        <van-tabbar-item><svg-icon icon-class="tab-folder" /><div class="tab-text">浏览</div></van-tabbar-item>
+        <van-tabbar-item><svg-icon icon-class="tab-recently" /><div class="tab-text">最近</div></van-tabbar-item>
+        <van-tabbar-item><svg-icon icon-class="tab-favorite" /><div class="tab-text">收藏</div></van-tabbar-item>
+        <van-tabbar-item><svg-icon icon-class="tab-setting" /><div class="tab-text">设置</div></van-tabbar-item>
+      </van-tabbar>
+
+      <van-tabbar
+        id="tabbar"
+        v-if="isiPhoneX === 35"
+        active-color="#07c160"
+        inactive-color="#000"
+        v-model="tabActive"
+        class="tab-bottom-iphoneXS">
+        <van-tabbar-item><svg-icon icon-class="tab-folder" /><div class="tab-text">浏览</div></van-tabbar-item>
+        <van-tabbar-item><svg-icon icon-class="tab-recently" /><div class="tab-text">最近</div></van-tabbar-item>
+        <van-tabbar-item><svg-icon icon-class="tab-favorite" /><div class="tab-text">收藏</div></van-tabbar-item>
+        <van-tabbar-item><svg-icon icon-class="tab-setting" /><div class="tab-text">设置</div></van-tabbar-item>
+      </van-tabbar>
+    </div>
+
   </div>
 </template>
 <script>
@@ -90,6 +162,10 @@
   import 'vant/lib/row/style';
   import 'vant/lib/divider/style';
   import 'vant/lib/sticky/style';
+  import 'vant/lib/nav-bar/style';
+  import 'vant/lib/icon/style';
+  import 'vant/lib/tabbar/style';
+  import 'vant/lib/tabbar-item/style';
 
   import { getPath, getPathList, setPath, removePath } from '@/utils/path'
   import { strlen, substring10, formatTime, formatSize } from '@/utils/number'
@@ -98,15 +174,19 @@
   export default {
     data() {
       return {
+        test: 0,
+        lastTabbarOffsetTop: 0,// 底部tabbar与上边框 上次的距离
+        diffTabbarTop: 0,// 底部tabbar与上边框的变化距离
+        isiPhoneX: 0,
+        tabActive: 0,
         path: this.$route.query.path,
         fileList: [],
-        totalSize: 0,
         pathList: [
           { 'folder': '', index: 0 },
           { 'folder': '+', index: 1 }
         ],
         pagination: {
-          pageIndex: 1,
+          pageIndex: 0,
           pageSize: 25,
           total: 0,
         },
@@ -116,10 +196,64 @@
       };
     },
     mounted(){
+
+      var isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
+      if (isIOS) {
+        if(screen.height === 812 && screen.width === 375){
+          // iPhone X iPhone XS
+          this.isiPhoneX = 30
+        }else if (screen.height === 896 && screen.width === 414){
+          // iPhone XS Max   iPhone XR
+          this.isiPhoneX = 35
+        }
+      }
+
       if (window.history && window.history.pushState) {
         history.pushState(null, null, document.URL);
         window.addEventListener('popstate', this.goBack, false);
       }
+
+      // 加载路径
+      const pathList = getPathList()
+      if (pathList && pathList !== 'undefined') {
+        const res = JSON.parse(pathList)
+        const list = []
+        res.forEach(function(element) {
+          const item0 = {}
+          item0['folder'] = element.folder + ''
+          item0['index'] = element.index
+          list.push(item0)
+        })
+        this.pathList = list
+      }
+
+      const that = this
+      // 判断底部tabbar与上边框的距离,用来适配iPhoneX机型下面多出来的部分
+      window.addEventListener('scroll', () => {
+        that.test = 14
+        var tabbar= document.getElementById("tabbar");
+        if(tabbar.offsetTop){
+
+        }
+        const top = tabbar.offsetTop
+        that.test = tabbar.offsetTop
+        if(that.lastTabbarOffsetTop === 0){
+          if(top > 0){
+            that.lastTabbarOffsetTop = top
+          }
+        }else{
+          const diff = that.lastTabbarOffsetTop - top
+          if(diff > 0){
+            console.log("显示")
+            that.diffTabbarTop = diff
+          } else if(diff < 0){
+            console.log("隐藏")
+            that.diffTabbarTop = diff
+          }
+          that.lastTabbarOffsetTop = top
+        }
+      }, true);
+
     },
     destroyed(){
       window.removeEventListener('popstate', this.goBack, false);
@@ -127,14 +261,61 @@
     methods: {
       // 浏览器的返回事件
       goBack(){
-        if (this.$route.query.path){
-          this.path = this.$route.query.path
-          console.log('goBack path', this.path)
-        } else {
-          this.path = ''
+        // let linkIndex = 0
+        // if (this.$route.query.path){
+        //   this.path = this.$route.query.path
+        //   linkIndex = this.pathList.length - 3;
+        // } else {
+        //   this.path = ''
+        //   this.$router.push(`/_m`)
+        // }
+        // this.pathList.splice(this.pathList.findIndex(v => v.index === linkIndex + 2), this.pathList.length - (linkIndex + 2))
+        // setPath(this.path, this.pathList)
+        // this.getFileList()
+        const linkIndex = this.pathList.length-3
+        this.handleLink(this.pathList[linkIndex],linkIndex)
+      },
+      // 点击返回按钮(标题)
+      clickBack() {
+        const linkIndex = this.pathList.length-3
+        this.handleLink(this.pathList[linkIndex], linkIndex, true)
+      },
+      // 点击右边按钮(标题)
+      titleRightClick() {
+        console.log('titleRightClick')
+      },
+      handleLink(item, index, isPushLink) {
+
+        console.log("handleLink", item)
+        console.log("handleLink - index", index)
+
+        if (!this.$route.query.path){
           this.$router.push(`/_m`)
         }
-        this.getFileList()
+
+        if(item.search){
+          if(item.searchKey){
+            this.searchFileByKeyWord(item.searchKey)
+          } else if(item.row){
+            this.searchFileAndOpenDir(item.row)
+          }
+          this.pathList.splice(this.pathList.findIndex(v => v.index === index + 2), this.pathList.length - (index + 2))
+        } else {
+          this.pathList.splice(this.pathList.findIndex(v => v.index === index + 2), this.pathList.length - (index + 2))
+          this.pathList.forEach((p, number) => {
+            if (number === 0) {
+              this.path = ''
+            } else if (number === this.pathList.length - 1) {
+            } else {
+              this.path += '/' + this.pathList[number].folder
+            }
+          })
+          setPath(this.path, this.pathList)
+          if(isPushLink){
+            this.$router.push(`/_m?path=${this.path}`)
+          }
+          this.getFileList()
+        }
       },
       // 格式化最近时间
       formatTime(time) {
@@ -154,7 +335,12 @@
         this.getFileList();
       },
       getFileList(onLoad) {
-        console.log('onLoad', onLoad)
+        if (onLoad) {
+          this.pagination.pageIndex++
+        } else {
+          this.pagination.pageIndex = 1
+        }
+        this.finished = false;
         api.fileList({
           userId: this.$store.state.user.userId,
           currentDirectory: this.$route.query.path,
@@ -163,7 +349,6 @@
         }).then(res => {
           if(onLoad){
             res.data.forEach(file => {
-              this.totalSize += file.size
               this.fileList.push(file)
             });
           }else{
@@ -180,7 +365,11 @@
       },
       // 统计
       statistics() {
-        return this.getShowSumFileAndFolder() + ' ' + this.getShowSumSize(this.totalSize)
+        let totalSize = 0
+        this.fileList.forEach(file => {
+          totalSize += file.size;
+        })
+        return this.getShowSumFileAndFolder() + ' ' + this.getShowSumSize(totalSize)
       },
       // 统计文件和文件夹
       getShowSumFileAndFolder() {
@@ -209,7 +398,9 @@
         if (totalSize > 0) {
           sizeSum = '  共'
         }
-        if (totalSize < 1024) {
+        if (totalSize === 0) {
+          return sizeSum
+        } else if (totalSize < 1024) {
           sizeSum += totalSize + 'B'
         } else if (totalSize >= 1024 && totalSize < 1024 * 1024) {
           sizeSum += (totalSize / 1024).toFixed(2) + 'K'
@@ -238,9 +429,10 @@
           item2['index'] = this.pathList.length
           this.pathList[this.pathList.length - 1] = item1
           this.pathList.push(item2)
-          console.log('push path',this.path)
+          console.log('path',this.path)
+          console.log('pathList',this.pathList)
           this.$router.push(`/_m?path=${this.path}`)
-          // window.open(process.env.VUE_APP_BASE_API + '/m?path=' + this.path, '_self')
+          setPath(this.path, this.pathList)
           this.getFileList()
         } else {
           // 打开文件
@@ -248,11 +440,47 @@
           const url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + row.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + fileIds
           window.open(url, '_blank')
         }
+      },
+      swipeUp() {
+        this.test = 10
+        console.log(67)
+      },
+      tabBottom() {
+        return { padding: '0 0 20px 0' }
       }
     }
   }
 </script>
 <style lang="scss" scoped>
+
+  .tab-bottom {
+    padding: 0 0 25px 0;
+  }
+
+  .tab-bottom-iphoneX {
+    padding: 0 0 25px 0;
+    .van-tabbar-item {
+      margin-top: -5px;
+    }
+  }
+
+  .tab-bottom-iphoneXS {
+    padding: 0 0 25px 0;
+    .van-tabbar-item {
+      margin-top: -5px;
+    }
+  }
+
+  .van-tabbar-item {
+    color: #646566;
+    text-align: center;
+    margin-top: 20px;
+    font-size: 10px;
+    .tab-text {
+      margin-top: 2px;
+    }
+  }
+
   .container {
     font-size: 14px;
 
@@ -278,14 +506,57 @@
     white-space: nowrap;
     text-overflow:ellipsis;
   }
+
   .list-item {
-    padding: 5px 0;
-    height: 3.5rem;
+    padding: 5px 10px;
 
     .list-cell-icon {
-      margin-top: 7px;
-      height: 3.5rem;
-      line-height: 3.5rem;
+      font-size: 18px;
+    }
+
+    .list-item-content {
+      margin-left: 5px;
     }
   }
+
+  .list-item:active {
+    background-color: #bfcbd930;
+  }
+
+  .van-nav-bar__title {
+    max-width: 30%;
+  }
+
+  .van-nav-bar__left {
+     max-width: 30%;
+   }
+  /*.van-nav-bar__left {*/
+     /*left: 0;*/
+  /*}*/
+
+  .van-icon.van-icon-arrow-left.van-nav-bar__arrow {
+    left: 5px;
+  }
+
+  .van-nav-bar__left {
+    left: 0;
+    .van-nav-bar__text {
+      padding: 0 0 0 25px;
+    }
+  }
+
+  .van-nav-bar__arrow+.van-nav-bar__text {
+    max-width: 7.5rem;
+    min-width: 5.5rem;
+    text-align: left;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow:ellipsis;
+  }
+
+  .title-right-icon {
+    width: 2rem;
+    height: 2rem;
+    vertical-align: middle;
+  }
 </style>