资料库开发

.env.development

@@ -2,12 +2,13 @@
 EVN = 'development'
 
 # 网站地址
-LOCALHOSE = 'https://zp-b.caimei365.com'
-# LOCALHOSE = 'http://192.168.2.92:8888'
+# LOCALHOSE = 'https://zp-b.caimei365.com'
+LOCALHOSE = 'http://192.168.2.92:8888'
 
 # 接口api地址
-BASE_URL = 'https://zplma-b.caimei365.com'
+# BASE_URL = 'https://zplma-b.caimei365.com'
 # BASE_URL = 'http://192.168.2.68:8012'
+BASE_URL = 'http://192.168.2.67:8012'
 
 # 静态资源文件地址
 STATIC_URL = 'https://static.caimei365.com/www/authentic'

apis/index.js

@@ -137,6 +137,10 @@ export default ($axios) => {
   // 查询授权商品列表
   const fetchDetialBySnCode = (params = {}) =>
     $axios.get('/wx/auth/product/info', { params })
+  
+  // 查询授权商品列表
+  const fetchDocsList = (params = {}) =>
+    $axios.get('/wx/data/path/file', { params })  
 
   return {
     customLogin,
@@ -181,5 +185,6 @@ export default ($axios) => {
     fetchProductDetails,
     assistantBaidu,
     fetchDetialBySnCode,
+    fetchDocsList
   }
 }

layouts/app-ross.vue

@@ -125,7 +125,7 @@ export default {
         {
           id: 2,
           name: '产品资料',
-          path: '/database/article',
+          path: '/docs/10',
           icon: 'icon-doc',
         },
         {

pages/_template/ross/docs/_fileId.vue

@@ -0,0 +1,337 @@
+<template>
+  <div class="page">
+    <div class="page-top flex flex-col justify-center items-center">
+      <span class="name mt-2" v-text="supplierInfo.shopName + '资料库'"></span>
+    </div>
+    <div class="page-content">
+      <!-- 面包屑 -->
+      <el-breadcrumb separator=">">
+        <el-breadcrumb-item>首页</el-breadcrumb-item>
+        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
+        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
+      </el-breadcrumb>
+      <!-- 列表 -->
+      <div class="list-header">
+        <div class="row">
+          <div class="col">文件名</div>
+          <div class="col">时间</div>
+          <div class="col">大小</div>
+          <div class="col">操作</div>
+        </div>
+      </div>
+      <div class="list-body">
+        <div class="row" v-for="item in list" :key="item.id">
+          <div class="section pc">
+            <div class="col">
+              <img src="https://picsum.photos/32/32" alt="" />
+              <span
+                class="file-name"
+                @click="onRowClick"
+                v-text="item.fileName"
+              ></span>
+            </div>
+            <div class="col">{{ item.saveTime | dateFormat }}</div>
+            <div class="col">{{ item.fileSize | fileSize }}</div>
+            <div class="col control"><div class="download"></div></div>
+          </div>
+          <div class="section mobile">
+            <div class="col file-cover">
+              <img src="https://picsum.photos/32/32" alt="" />
+            </div>
+            <div class="col file-content">
+              <div class="file-name" v-text="item.fileName"></div>
+              <div class="file-info">
+                <span class="date">{{ item.saveTime | dateFormat }}</span>
+                <span class="size">{{ item.fileSize | fileSize }}</span>
+              </div>
+            </div>
+            <div class="col control"><div class="download"></div></div>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="section pc">
+            <div class="col">
+              <img src="https://picsum.photos/32/32" alt="" />
+              <span class="file-name" @click="onRowClick">图像检测分析</span>
+            </div>
+            <div class="col">2022-08-02</div>
+            <div class="col">25MB</div>
+            <div class="col control"><div class="download"></div></div>
+          </div>
+          <div class="section mobile">
+            <div class="col file-cover">
+              <img src="https://picsum.photos/32/32" alt="" />
+            </div>
+            <div class="col file-content">
+              <div class="file-name">图像检测分析</div>
+              <div class="file-info">
+                <span class="date">2022-08-02</span>
+                <span class="size">25MB</span>
+              </div>
+            </div>
+            <div class="col control"><div class="download"></div></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  layout: 'app-ross',
+  filters: {},
+  asyncData({ $http, params }) {
+    return $http.api.fetchDocsList({ fileId: params.fileId }).then((res) => {
+      return {
+        list: res.data || [],
+      }
+    })
+  },
+  data() {
+    return {
+      list: [],
+    }
+  },
+  computed: {
+    ...mapGetters(['routePrefix', 'supplierInfo', 'authUserId']),
+  },
+  methods: {
+    onRowClick() {
+      this.$router.push(`${this.routePrefix}/docs/${11}`)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+/* scss中可以用mixin来扩展 */
+@mixin ellipsis($line: 1) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: $line;
+  -webkit-box-orient: vertical;
+}
+
+// pc 端
+@media screen and (min-width: 768px) {
+  .page-top {
+    height: 360px;
+    @include themify($themes) {
+      background: themed('pc-banner-doc');
+      background-size: auto 360px;
+    }
+    .logo {
+      display: block;
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      background: #fff;
+    }
+    .name {
+      font-size: 30px;
+      color: #fff;
+    }
+  }
+
+  .page-content {
+    width: 1200px;
+    margin: 0 auto;
+    background-color: #fff;
+    margin-top: 16px;
+    box-sizing: border-box;
+    overflow: hidden;
+    padding: 32px 0;
+
+    .el-breadcrumb {
+      margin: 0 24px 32px;
+    }
+
+    .list-header,
+    .list-body {
+      font-size: 14px;
+      color: #282828;
+      .col {
+        &:nth-child(1) {
+          flex: 1;
+        }
+        &:nth-child(2),
+        &:nth-child(3),
+        &:nth-child(4) {
+          width: 120px;
+          text-align: center;
+        }
+      }
+    }
+
+    .list-header {
+      .row {
+        display: flex;
+        justify-content: space-between;
+        padding: 0 24px 16px;
+      }
+    }
+
+    .list-body {
+      .row {
+        line-height: 70px;
+        color: #666666;
+        padding: 0 24px;
+        transition: all 0.4s;
+
+        &:hover {
+          background: #fffaf3;
+        }
+
+        .section {
+          display: flex;
+          justify-content: space-between;
+          border-top: 1px solid #f7f7f7;
+
+          &.mobile {
+            display: none;
+          }
+        }
+
+        img {
+          display: inline-block;
+          width: 32px;
+          height: 32px;
+          background: #eee;
+          margin-right: 24px;
+        }
+
+        .file-name {
+          cursor: pointer;
+          transition: all 0.4s;
+          &:hover {
+            color: #f3920d;
+          }
+        }
+
+        .control {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          .download {
+            display: block;
+            width: 24px;
+            height: 24px;
+            background: url(~assets/theme-images/common/pc-icon-download.png)
+              no-repeat center;
+            background-size: 24px;
+            margin: 0 auto;
+            cursor: pointer;
+
+            &:hover {
+              background-image: url(~assets/theme-images/common/pc-icon-download-hover.png);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// 移动 端
+@media screen and (max-width: 768px) {
+  .page-top {
+    height: 46vw;
+    @include themify($themes) {
+      background: themed('h5-banner-doc');
+      background-size: auto 46vw;
+    }
+    .logo {
+      display: block;
+      width: 14.8vw;
+      height: 14.8vw;
+      border-radius: 50%;
+      background: #fff;
+    }
+    .name {
+      font-size: 4vw;
+      color: #fff;
+    }
+  }
+
+  .page-content {
+    position: relative;
+    padding: 8vw 0;
+
+    .el-breadcrumb {
+      margin: 0 4vw 4vw;
+    }
+
+    .list-header {
+      display: none;
+    }
+
+    .list-body {
+      font-size: 3.6vw;
+      color: #282828;
+
+      .row {
+        color: #666666;
+        padding: 0 4vw;
+
+        .section {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-bottom: 0.1vw solid #f7f7f7;
+          height: 17.6vw;
+
+          &.pc {
+            display: none;
+          }
+
+          .file-cover {
+            img {
+              width: 8.8vw;
+              height: 8.8vw;
+              background: #eee;
+            }
+          }
+
+          .file-content {
+            flex: 1;
+            margin: 0 4.8vw;
+
+            .file-name {
+              font-size: 3.6vw;
+              @include ellipsis(1);
+            }
+
+            .file-info {
+              font-size: 3vw;
+              color: #999999;
+              margin-top: 1.6vw;
+
+              .size {
+                margin-left: 4vw;
+              }
+            }
+          }
+
+          .control {
+            width: 6.4vw;
+            height: 6.4vw;
+            .download {
+              display: block;
+              width: 6.4vw;
+              height: 6.4vw;
+              background: url(~assets/theme-images/common/h5-icon-download.png)
+                no-repeat center;
+              background-size: 6.4vw;
+              margin: 0 auto;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

plugins/vue-filters.js

@@ -6,4 +6,13 @@ const dateFormat = (value) => {
   return formatDate(new Date(value), 'yyyy-MM-dd')
 }
 
+const fileSize = (size) => {
+  size = Math.round(size / 1024)
+  if (size < 1024) return size + 'KB'
+  size = Math.round(size / 1024)
+  if (size < 1024) return size + 'MB'
+  return Math.round(size / 1024) + 'GB'
+}
+
 Vue.filter('dateFormat', dateFormat)
+Vue.filter('fileSize', fileSize)