添加移动端(使用有赞vant UI)

babel.config.js

@@ -1,5 +1,12 @@
 module.exports = {
   presets: [
     '@vue/app'
+  ],
+  plugins: [
+    ['import', {
+      libraryName: 'vant',
+      libraryDirectory: 'es',
+      style: true
+    }, 'vant']
   ]
 }

package.json

@@ -28,6 +28,7 @@
     "path-to-regexp": "2.4.0",
     "sortablejs": "^1.10.2",
     "spark-md5": "^3.0.0",
+    "vant": "^2.5.0",
     "vonic": "^1.1.3",
     "vue": "2.6.10",
     "vue-router": "3.0.6",
@@ -50,6 +51,7 @@
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.1",
     "babel-jest": "23.6.0",
+    "babel-plugin-import": "^1.13.0",
     "chalk": "2.4.2",
     "connect": "3.6.6",
     "eslint": "^5.15.3",

src/main.js

@@ -12,8 +12,9 @@ import EVueContextmenu from 'e-vue-contextmenu'
 import App from './App'
 import store from './store'
 import router from './router'
-import WeVue from 'we-vue'
+// import WeVue from 'we-vue'
-import 'we-vue/lib/style.css'
+// import 'we-vue/lib/style.css'
+import { Button, Cell, CellGroup, Image, List, PullRefresh, SwipeCell, Col, Row, Divider } from 'vant';
 
 import '@/icons' // icon
 import '@/permission' // permission control
@@ -35,7 +36,19 @@ import '@/permission' // permission control
 // Vue.use(ElementUI, { locale })
 // 如果想要中文版 element-ui，按如下方式声明
 Vue.use(ElementUI)
-Vue.use(WeVue)
+// Vue.use(WeVue)
+
+// 有赞的移动UI
+Vue.use(Button);
+Vue.use(Cell);
+Vue.use(CellGroup);
+Vue.use(Image);
+Vue.use(List);
+Vue.use(PullRefresh);
+Vue.use(SwipeCell);
+Vue.use(Col);
+Vue.use(Row);
+Vue.use(Divider);
 
 Vue.use(uploader)
 Vue.use(EVueContextmenu)

src/utils/number.js

@@ -51,6 +51,11 @@ export function strlen(str){
   return len;
 }
 
+/***
+ * 截取字符串前10位
+ * @param str
+ * @returns {string}
+ */
 export function substring10(str){
   var len = 0;
   var res = '';
@@ -69,3 +74,38 @@ export function substring10(str){
   }
   return res;
 }
+
+/**
+ * @param {number} agoTime
+ * @returns {string}
+ */
+export function formatTime(agoTime) {
+  const diff = agoTime / 1000
+  if (diff < 30) {
+    return '刚刚'
+  } else if (diff < 3600) {
+    // less 1 hour
+    return parseInt(diff / 60) + '分钟前'
+  } else if (diff < 3600 * 24) {
+    return parseInt(diff / 3600) + '小时前'
+  } else if (diff < 3600 * 24 * 30) {
+    return parseInt(diff / (3600 * 24)) + '天前'
+  } else if (diff <= 3600 * 24 * 30 * 12) {
+    return parseInt(diff / (3600 * 24 * 30)) + '个月前'
+  } else {
+    return parseInt(diff / (3600 * 24 * 30 * 12)) + '年月前'
+  }
+}
+
+export function formatSize(size) {
+  console.log(size)
+  if (size < 1024) {
+    return size + 'B'
+  } else if (size < 1024 * 1024) {
+    return (size/1024).toFixed(2) + 'k'
+  } else if (size < 1024 * 1024 * 1024) {
+    return (size/(1024 * 1024)).toFixed(2) + 'M'
+  } else {
+    return (size/(1024 * 1024 * 1024)).toFixed(2) + 'G'
+  }
+}

src/views/demo/index_m.vue

@@ -1,9 +1,137 @@
 <template>
-  <wv-swipe :height="130" :autoplay="4000">
+  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
-    <wv-swipe-item style="background-color: #f44336">1</wv-swipe-item>
+    <van-list
-    <wv-swipe-item style="background-color: #ffc107">2</wv-swipe-item>
+      v-model="loading"
-    <wv-swipe-item style="background-color: #03a9f4">3</wv-swipe-item>
+      :finished="finished"
-  </wv-swipe>
+      finished-text="没有更多了"
+      @load="getFileList"
+      >
+      <!--<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-swipe-cell v-for="(item,index) in fileList" :key="item.id" :title="item.name">
+        <van-divider v-if="index === 0" style="margin: 0 15px 10px 15px;"></van-divider>
+        <van-row type="flex" justify="center">
+          <van-col span="4" align="center">
+            <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" />
+            <svg-icon v-else-if="item.contentType.indexOf('audio') > -1" icon-class="audio" />
+            <svg-icon v-else-if="item.contentType.indexOf('text') > -1" icon-class="file-txt" />
+            <el-avatar v-else-if="item.contentType.indexOf('image') > -1" shape="square" :src="imageUrl+item.id"></el-avatar>
+            <svg-icon v-else-if="item.contentType.indexOf('application/pdf') > -1" icon-class="file-pdf" />
+            <svg-icon v-else-if="item.contentType.indexOf('word') > -1" icon-class="file-word" />
+            <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">
+            <van-col span="16">
+              {{item.name}}
+            </van-col>
+            <van-col span="16" class="file-description" justify="space-between">
+              <van-col span="8">
+                {{formatTime(item.agoTime)}}
+              </van-col>
+              <van-col span="8">
+                {{formatSize(item.size)}}
+              </van-col>
+            </van-col>
+          </van-col>
+          <van-col span="4"></van-col>
+        </van-row>
+
+        <van-button
+          slot="right"
+          square
+          text="删除"
+          type="danger"
+          class="delete-button">
+        </van-button>
+        <van-divider></van-divider>
+      </van-swipe-cell>
+    </van-list>
+  </van-pull-refresh>
 </template>
 <script>
+import 'vant/lib/button/style';
+import 'vant/lib/cell/style';
+import 'vant/lib/cell-group/style'
+import 'vant/lib/image/style';
+import 'vant/lib/list/style';
+import 'vant/lib/pull-refresh/style';
+import 'vant/lib/swipe-cell/style';
+import 'vant/lib/col/style';
+import 'vant/lib/row/style';
+import 'vant/lib/divider/style';
+
+import { getPath, getPathList, setPath, removePath } from '@/utils/path'
+import { strlen, substring10, formatTime, formatSize } from '@/utils/number'
+import api from '@/api/upload-api'
+
+export default {
+  data() {
+    return {
+      fileList: [],
+      loading: false,
+      finished: false,
+      refreshing: false
+    };
+  },
+  methods: {
+    formatTime(time) {
+      return formatTime(time)
+    },
+    formatSize(size) {
+      return formatSize(size)
+    },
+    onRefresh() {
+      // 清空列表数据
+      this.finished = false;
+
+      // 重新加载数据
+      // 将 loading 设置为 true，表示处于加载状态
+      this.loading = true;
+      this.getFileList();
+    },
+    getFileList() {
+      this.loading = true
+      api.fileList({
+        userId: this.$store.state.user.userId,
+        currentDirectory: getPath(),
+        pageIndex: 1,
+        pageSize: 30
+      }).then(res => {
+        this.fileList = res.data
+        // 加载状态结束
+        this.loading = true;
+        this.refreshing = false;
+
+          // 数据全部加载完成
+          if (this.fileList.length >= res.count) {
+            this.finished = true;
+          }
+
+      }).catch(e => {})
+    },
+  }
+}
 </script>
+<style lang="scss" scoped>
+  .svg-icon {
+    width: 2.5em;
+    height: 2.5em;
+  }
+  .van-divider {
+    margin: 5px 15px 5px 15px;
+  }
+  .file-description {
+    color: #646566;
+    font-size: 12px;
+    margin-top: 0.6rem;
+  }
+  .van-col {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow:ellipsis;
+  }
+</style>