新增下载页面

.env.development

@@ -6,7 +6,7 @@ EVN = 'development'
 LOCALHOSE = 'http://192.168.2.92:8888'
 
 # 接口api地址
-BASE_URL = 'https://zplma.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'
 

middleware/auth.js

@@ -89,14 +89,28 @@ function newLinkInit({ route, error, redirect }) {
       })
       .catch((err) => {
         error({ statusCode: 404, message: '页面不存在' })
-        console.log(err)
+        resolve(err)
       })
   })
 }
 
+// 公共页页面入口
+function publickLinkInit({ route, error, redirect }) {
+  const whiteList = ['/download']
+  return new Promise((resovle) => {
+    if (whiteList.indexOf(route.path) === -1) {
+      error({ statusCode: 404, message: '页面不存在' })
+    }
+    resovle()
+  })
+}
+
 export default function (context) {
   let hash = context.route.hash
   const query = getQueryObject(hash)
   const appId = query.appId
-  return appId ? oldLinkInit(context) : newLinkInit(context)
+  if (appId) return oldLinkInit(context) // 老连接适配
+  const authUserId = parseInt(context.route.params.template)
+  if (authUserId) return newLinkInit(context) // 模板入口页面
+  return publickLinkInit(context) // 公共页页面入口
 }

nuxt.config.js

@@ -46,6 +46,7 @@ export default {
     'swiper/css/swiper.css',
     'animate.css/animate.min.css',
     '~/assets/css/global.css',
+    'three-dots/dist/three-dots.min.css'
   ],
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins

package.json

@@ -24,6 +24,7 @@
     "js-cookie": "^3.0.1",
     "nuxt": "^2.15.8",
     "swiper": "^5.4.5",
+    "three-dots": "^0.2.3",
     "vant": "^2.12.47",
     "vue": "^2.6.14",
     "vue-awesome-swiper": "^4.1.1",

pages/_template/app/database/article-detail.vue

@@ -1,116 +0,0 @@
-<template>
-  <div class="page">
-    <div class="page-top">
-      <div class="title" v-text="articleInfo.articleTitle"></div>
-      <div class="date">{{ articleInfo.createTime | dateFormat }}</div>
-    </div>
-    <div class="page-content" v-html="html"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  layout: 'app',
-  data() {
-    return {
-      articleId: '',
-      articleInfo: {},
-      imageList: [],
-    }
-  },
-  computed: {
-    html() {
-      const html = this.articleInfo.articleContent
-      if (html) {
-        return html.replace(/href=/gi, '')
-      }
-      return ''
-    },
-  },
-  mounted() {
-    this.initData()
-  },
-  methods: {
-    initData() {
-      this.articleId = parseInt(this.$route.query.id)
-      this.fetchArticleDetail()
-    },
-    async fetchArticleDetail() {
-      try {
-        const res = await this.$http.api.getArticleDetail({
-          articleId: this.articleId,
-        })
-        this.articleInfo = res.data
-      } catch (error) {
-        console.log(error)
-      }
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-/* 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 {
-    width: 1200px;
-    margin: 24px auto;
-    box-sizing: border-box;
-    background: #fff;
-    padding: 24px;
-  }
-  .page-top {
-    padding-bottom: 24px;
-    border-bottom: 1px solid #d8d8d8;
-    .title {
-      font-size: 28px;
-      color: #101010;
-      line-height: 1.6;
-      text-align: justify;
-    }
-    .date {
-      font-size: 18px;
-      color: #b2b2b2;
-      margin-top: 24px;
-    }
-  }
-  .page-content {
-    padding-top: 24px;
-    color: #404040;
-  }
-}
-
-// 移动 端
-@media screen and (max-width: 768px) {
-  .page {
-    box-sizing: border-box;
-    background: #fff;
-    padding: 4vw;
-  }
-  .page-top {
-    .title {
-      font-size: 4.2vw;
-      color: #101010;
-      line-height: 1.6;
-      text-align: justify;
-    }
-    .date {
-      font-size: 3.2vw;
-      color: #b2b2b2;
-      margin-top: 4vw;
-    }
-  }
-  .page-content {
-    padding-top: 24px;
-    color: #404040;
-  }
-}
-</style>

pages/_template/app/database/article.vue

@@ -1,303 +0,0 @@
-<template>
-  <div class="page">
-    <van-list
-      v-model="isLoadingMore"
-      :finished="finished"
-      :immediate-check="false"
-      :finished-text="total ? '没有更多了' : ''"
-      @load="onLoadMore"
-    >
-      <div class="page-top flex flex-col justify-center items-center">
-        <!-- <img class="logo" :src="supplierInfo.logo" /> -->
-        <span
-          class="name mt-2"
-          v-text="supplierInfo.shopName + '资料库'"
-        ></span>
-      </div>
-      <div class="page-content">
-        <!-- 搜索区域 -->
-        <div class="search">
-          <simple-search
-            v-model="listQuery.articleTitle"
-            @search="onSearch"
-            placeholder="搜索文章标题"
-          />
-        </div>
-        <div class="divider"></div>
-        <!-- tabbar -->
-        <simple-tabs
-          :tabs="tabs"
-          :current="current"
-          @change="onTabChange"
-          @search="onSearch"
-        ></simple-tabs>
-        <div class="list">
-          <div
-            class="section flex justify-between items-center"
-            v-for="item in list"
-            :key="item.articleId"
-            @click="toDetail(item)"
-          >
-            <div class="info">
-              <div class="name" v-text="item.articleTitle"></div>
-              <div class="date">{{ item.createTime | dateFormat }}</div>
-            </div>
-            <img class="cover" :src="item.articleImage" />
-          </div>
-        </div>
-
-        <!-- 列表为空 -->
-        <SimpleEmpty
-          v-if="!total && !isRequest"
-          description="敬请期待~"
-        ></SimpleEmpty>
-      </div>
-    </van-list>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { tabs } from '@/configs/tabs'
-import { debounce } from '~/utils'
-
-export default {
-  layout: 'app',
-  data() {
-    return {
-      isLoadingMore: true,
-      finished: false,
-      isRequest: true,
-      tabs: tabs(),
-      current: 0,
-      listQuery: {
-        articleTitle: '',
-        authUserId: '102',
-        pageNum: 1,
-        pageSize: 10,
-      },
-      list: [],
-      total: 0,
-    }
-  },
-  computed: {
-    ...mapGetters(['supplierInfo', 'authUserId', 'routePrefix']),
-  },
-  mounted() {
-    this.fetchList()
-  },
-  methods: {
-    fetchList: debounce(async function () {
-      try {
-        this.isLoadingMore = true
-        this.listQuery.authUserId = this.authUserId
-        const res = await this.$http.api.getArticleList(this.listQuery)
-        this.list = [...this.list, ...res.data.list]
-        this.finished = !res.data.hasNextPage
-        this.total = res.data.total
-        this.isLoadingMore = false
-        this.listQuery.pageNum += 1
-      } catch (error) {
-        console.log(error)
-      } finally {
-        this.isRequest = false
-      }
-    }, 400),
-
-    // 详情
-    toDetail(item) {
-      const url = `${this.routePrefix}/database/article-detail?id=${item.articleId}`
-      this.$router.push(url)
-    },
-    // tab切换
-    onTabChange(item) {
-      this.$router.push(`${this.routePrefix}${item.path}`)
-    },
-    // 搜索
-    onSearch(keyword) {
-      this.list = []
-      this.listQuery.articleTitle = keyword
-      this.listQuery.pageNum = 1
-      this.fetchList()
-    },
-    // 页码变化
-    onPagiantionChange(index) {
-      this.listQuery.pageNum = index
-      this.fetchList()
-    },
-    // 加载更多
-    onLoadMore() {
-      this.fetchList()
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-/* 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;
-    .divider {
-      height: 16px;
-      background: #f7f7f7;
-    }
-    .search {
-      display: none;
-    }
-  }
-  .list {
-    border-top: 16px solid #f7f7f7;
-    border-bottom: 16px solid #f7f7f7;
-    .section {
-      padding: 32px 0;
-      margin: 0 24px;
-      background: #fff;
-      border-bottom: 1px solid #d8d8d8;
-      transition: all 0.4s;
-      cursor: pointer;
-
-      &:hover {
-        .name {
-          @include themify($themes) {
-            color: themed('color') !important;
-          }
-        }
-      }
-
-      &:last-child {
-        border-bottom: 0;
-      }
-
-      .info {
-        width: 1000px;
-        height: 100%;
-
-        .name {
-          font-size: 18px;
-          color: #404040;
-          line-height: 1.6;
-          margin-bottom: 18px;
-          text-align: justify;
-          @include ellipsis(2);
-        }
-        .date {
-          font-size: 18px;
-          color: #b2b2b2;
-          line-height: 1.4;
-        }
-      }
-
-      .cover {
-        width: 106px;
-        height: 106px;
-        border-bottom: 1px solid #d8d8d8;
-      }
-    }
-  }
-}
-
-// 移动 端
-@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;
-    .divider {
-      border-bottom: 3.2vw solid #f7f7f7;
-      height: 12.4vw;
-    }
-  }
-
-  .search {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    transform: translate(-50%, -50%);
-  }
-
-  .list {
-    .section {
-      padding: 2.4vw 0;
-      margin: 0 4vw;
-      background: #fff;
-      border-bottom: 0.1vw solid #d8d8d8;
-
-      &:first-child {
-        border-top: 0.1vw solid #d8d8d8;
-      }
-
-      .info {
-        width: 67.3vw;
-        height: 100%;
-
-        .name {
-          font-size: 3.6vw;
-          color: #404040;
-          line-height: 1.5;
-          text-align: justify;
-          margin-bottom: 2.4vw;
-          @include ellipsis(2);
-        }
-        .date {
-          font-size: 3.2vw;
-          color: #b2b2b2;
-          line-height: 1.4;
-        }
-      }
-
-      .cover {
-        width: 18vw;
-        height: 18vw;
-        border-bottom: 0.1vw solid #d8d8d8;
-      }
-    }
-  }
-}
-</style>

pages/_template/app/database/file.vue

@@ -1,334 +0,0 @@
-<template>
-  <div class="page">
-    <van-list
-      v-model="isLoadingMore"
-      :finished="finished"
-      :immediate-check="false"
-      :finished-text="total ? '没有更多了' : ''"
-      @load="onLoadMore"
-    >
-      <div class="page-top flex flex-col justify-center items-center">
-        <!-- <img class="logo" :src="supplierInfo.logo" /> -->
-        <span
-          class="name mt-2"
-          v-text="supplierInfo.shopName + '资料库'"
-        ></span>
-      </div>
-      <div class="page-content">
-        <!-- 搜索区域 -->
-        <div class="search">
-          <simple-search
-            v-model="listQuery.fileTitle"
-            @search="onSearch"
-            placeholder="搜索文件名称"
-          />
-        </div>
-        <div class="divider"></div>
-        <!-- tabbar -->
-        <simple-tabs
-          :tabs="tabs"
-          :current="current"
-          @change="onTabChange"
-          @search="onSearch"
-        ></simple-tabs>
-        <div class="list">
-          <div
-            class="section md:flex md:justify-between md:items-center"
-            v-for="item in list"
-            :key="item.fileId"
-            @click="previewFile(item)"
-          >
-            <div class="info">
-              <div class="name" v-text="item.fileName"></div>
-              <div class="date">{{ item.createTime | dateFormat }}</div>
-              <div class="download" @click.stop="download(item, $event)">
-                下载
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- 列表为空 -->
-        <SimpleEmpty
-          v-if="!total && !isRequest"
-          description="敬请期待~"
-        ></SimpleEmpty>
-      </div>
-    </van-list>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { tabs } from '~/configs/tabs'
-import downloadFile from '~/utils/donwload-tools'
-import { debounce } from '~/utils'
-
-export default {
-  layout: 'app',
-  data() {
-    return {
-      isLoadingMore: true,
-      finished: false,
-      isRequest: true,
-      tabs: tabs(),
-      current: 3,
-      listQuery: {
-        fileType: 1,
-        fileTitle: '',
-        authUserId: '',
-        pageNum: 1,
-        pageSize: 10,
-      },
-      list: [],
-      total: 0,
-    }
-  },
-  computed: {
-    ...mapGetters(['routePrefix', 'supplierInfo', 'authUserId']),
-  },
-  mounted() {
-    this.fetchList()
-  },
-  methods: {
-    // 下载方法
-    download(item, $event) {
-      const url = `${process.env.BASE_URL}/download/file?ossName=${item.fileDownloadUrl}&fileName=${item.fileName}`
-      downloadFile(url, item.fileName, this, $event)
-    },
-    // 预览文件
-    previewFile(item) {
-      window.open(item.filePreviewUrl)
-    },
-    // 获取列表
-    fetchList: debounce(async function () {
-      try {
-        this.isLoadingMore = true
-        this.listQuery.authUserId = this.authUserId
-        const res = await this.$http.api.getFileList(this.listQuery)
-        this.list = [...this.list, ...res.data.list]
-        this.finished = !res.data.hasNextPage
-        this.total = res.data.total
-        this.isLoadingMore = false
-        this.listQuery.pageNum += 1
-      } catch (error) {
-        console.log(error)
-      } finally {
-        this.isRequest = false
-      }
-    }, 400),
-    // tab切换
-    onTabChange(item) {
-      this.$router.push(`${this.routePrefix}${item.path}`)
-    },
-    // 搜索
-    onSearch(keyword) {
-      this.list = []
-      this.listQuery.fileTitle = keyword
-      this.listQuery.pageNum = 1
-      this.fetchList()
-    },
-    // 页码变化
-    onPagiantionChange(index) {
-      this.listQuery.pageNum = index
-      this.fetchList()
-    },
-    // 加载更多
-    onLoadMore() {
-      this.fetchList()
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-/* 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;
-    .divider {
-      height: 16px;
-      background: #f7f7f7;
-    }
-    .search {
-      display: none;
-    }
-  }
-  .list {
-    border-top: 16px solid #f7f7f7;
-    border-bottom: 16px solid #f7f7f7;
-    .section {
-      padding: 32px 0;
-      margin: 0 24px;
-      background: #fff;
-      border-bottom: 1px solid #d8d8d8;
-      transition: all 0.4s;
-      cursor: pointer;
-
-      &:last-child {
-        border-bottom: 0;
-      }
-
-      &:hover {
-        .name {
-          @include themify($themes) {
-            color: themed('color') !important;
-          }
-        }
-      }
-
-      .info {
-        width: 100%;
-        position: relative;
-        .name {
-          width: 1050px;
-          height: 56px;
-          font-size: 18px;
-          color: #404040;
-          line-height: 1.6;
-          margin-bottom: 18px;
-          text-align: justify;
-          @include ellipsis(2);
-          transition: all 0.4s;
-        }
-        .date {
-          font-size: 18px;
-          color: #b2b2b2;
-          line-height: 1.4;
-        }
-        .download {
-          position: absolute;
-          text-align: center;
-          right: 0;
-          top: 50%;
-          transform: translateY(-50%);
-          font-size: 16px;
-          color: #1890ff;
-          cursor: pointer;
-
-          &::before {
-            content: '';
-            display: block;
-            width: 54px;
-            height: 59px;
-            background: url(~assets/theme-images/common/pc-icon-pdf-download.png)
-              no-repeat center;
-            background-size: 54px;
-          }
-        }
-      }
-    }
-  }
-}
-
-// 移动 端
-@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;
-    .divider {
-      border-bottom: 3.2vw solid #f7f7f7;
-      height: 12.4vw;
-    }
-  }
-
-  .search {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    transform: translate(-50%, -50%);
-  }
-
-  .list {
-    .section {
-      position: relative;
-      padding: 2.4vw 0;
-      margin: 0 4vw;
-      padding-bottom: 6.8vw;
-      background: #fff;
-      border-bottom: 0.1vw solid #d8d8d8;
-
-      &:first-child {
-        border-top: 0.1vw solid #d8d8d8;
-      }
-
-      .info {
-        .name {
-          font-size: 3.6vw;
-          color: #404040;
-          line-height: 1.5;
-          margin-bottom: 2.4vw;
-          text-align: justify;
-          @include ellipsis(2);
-        }
-        .date {
-          position: absolute;
-          left: 0;
-          bottom: 2.4vw;
-          font-size: 3.2vw;
-          color: #b2b2b2;
-          line-height: 1.4;
-        }
-
-        .download {
-          position: absolute;
-          right: 0;
-          bottom: 2.4vw;
-          font-size: 3.2vw;
-          @include themify($themes) {
-            color: themed('color');
-          }
-          cursor: pointer;
-          margin-top: 1.2vw;
-        }
-      }
-    }
-  }
-}
-</style>

pages/_template/app/database/image.vue

@@ -1,348 +0,0 @@
-<template>
-  <div class="page">
-    <van-list
-      v-model="isLoadingMore"
-      :finished="finished"
-      :immediate-check="false"
-      :finished-text="total ? '没有更多了' : ''"
-      @load="onLoadMore"
-    >
-      <div class="page-top flex flex-col justify-center items-center">
-        <!-- <img class="logo" :src="supplierInfo.logo" /> -->
-        <span
-          class="name mt-2"
-          v-text="supplierInfo.shopName + '资料库'"
-        ></span>
-      </div>
-      <div class="page-content">
-        <!-- 搜索区域 -->
-        <div class="search">
-          <simple-search
-            v-model="listQuery.imageTitle"
-            @search="onSearch"
-            placeholder="搜索图片标题"
-          />
-        </div>
-        <div class="divider"></div>
-        <!-- tabbar -->
-        <simple-tabs
-          :tabs="tabs"
-          :current="current"
-          @change="onTabChange"
-          @search="onSearch"
-        ></simple-tabs>
-        <div class="list">
-          <div class="section" v-for="item in list" :key="item.imageId">
-            <div class="info">
-              <div class="name" v-text="item.imageTitle"></div>
-              <div class="date">{{ item.createTime | dateFormat }}</div>
-              <div class="download" @click="download(item.imageZipUrl, $event)">
-                保存所有图片
-              </div>
-            </div>
-            <div class="images grid grid-cols-4 md:grid-cols-8 gap-3 md:gap-4">
-              <div
-                class="item"
-                v-for="(image, index) in item.imageList"
-                :key="index"
-                @click="onImagePreview(item.imageList, index)"
-              >
-                <img class="object-cover" :src="image" />
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- 列表为空 -->
-        <SimpleEmpty
-          v-if="!total && !isRequest"
-          description="敬请期待~"
-        ></SimpleEmpty>
-      </div>
-    </van-list>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { tabs } from '@/configs/tabs'
-import downloadFile from '~/utils/donwload-tools'
-import { ImagePreview } from 'vant'
-import { debounce } from '~/utils'
-
-export default {
-  layout: 'app',
-  data() {
-    return {
-      isLoadingMore: true,
-      finished: false,
-      isRequest: true,
-      tabs: tabs(),
-      current: 1,
-      listQuery: {
-        imageTitle: '',
-        authUserId: '',
-        pageNum: 1,
-        pageSize: 10,
-      },
-      list: [],
-      total: 0,
-    }
-  },
-  computed: {
-    ...mapGetters(['routePrefix', 'supplierInfo', 'authUserId']),
-  },
-  mounted() {
-    this.fetchList()
-  },
-  methods: {
-    // 下载方法
-    download(url, $event) {
-      downloadFile(url, '图片包', this, $event)
-    },
-    // 获取列表
-    fetchList: debounce(async function () {
-      try {
-        this.isLoadingMore = true
-        this.listQuery.authUserId = this.authUserId
-        const res = await this.$http.api.getImageList(this.listQuery)
-        this.list = [...this.list, ...res.data.list]
-        this.finished = !res.data.hasNextPage
-        this.total = res.data.total
-        this.isLoadingMore = false
-        this.listQuery.pageNum += 1
-      } catch (error) {
-        console.log(error)
-      } finally {
-        this.isRequest = false
-      }
-    }, 400),
-
-    // 图片预览
-    onImagePreview(imageList, index) {
-      ImagePreview({
-        images: imageList,
-        startPosition: index,
-        loop: true,
-        showIndex: true,
-        showIndicators: true,
-        closeable: true,
-      })
-    },
-    // tab切换
-    onTabChange(item) {
-      this.$router.push(`${this.routePrefix}${item.path}`)
-    },
-    // 搜索
-    onSearch(keyword) {
-      this.list = []
-      this.listQuery.imageTitle = keyword
-      this.listQuery.pageNum = 1
-      this.fetchList()
-    },
-    // 页码变化
-    onPagiantionChange(index) {
-      this.listQuery.pageNum = index
-      this.fetchList()
-    },
-    // 加载更多
-    onLoadMore() {
-      this.fetchList()
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-/* 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;
-    .divider {
-      height: 16px;
-      background: #f7f7f7;
-    }
-    .search {
-      display: none;
-    }
-  }
-  .list {
-    border-top: 16px solid #f7f7f7;
-    border-bottom: 16px solid #f7f7f7;
-    .section {
-      padding: 32px 0;
-      margin: 0 24px;
-      background: #fff;
-      border-bottom: 1px solid #d8d8d8;
-
-      &:last-child {
-        border-bottom: 0;
-      }
-
-      .info {
-        position: relative;
-        .name {
-          font-size: 18px;
-          color: #404040;
-          line-height: 1.6;
-          margin-bottom: 18px;
-          text-align: justify;
-        }
-        .date {
-          font-size: 18px;
-          color: #b2b2b2;
-          line-height: 1.4;
-        }
-
-        .download {
-          bottom: 0;
-          right: 0;
-          position: absolute;
-          color: #1890ff;
-          font-size: 16px;
-          cursor: pointer;
-        }
-      }
-
-      .images {
-        margin-top: 24px;
-        .item {
-          width: 126px;
-          height: 126px;
-          overflow: hidden;
-          img {
-            display: block;
-            width: 100%;
-            height: 100%;
-            cursor: pointer;
-          }
-        }
-      }
-    }
-  }
-}
-
-// 移动 端
-@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;
-    .divider {
-      border-bottom: 3.2vw solid #f7f7f7;
-      height: 12.4vw;
-    }
-  }
-
-  .search {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    transform: translate(-50%, -50%);
-  }
-
-  .list {
-    .section {
-      position: relative;
-      padding: 2.4vw 0;
-      margin: 0 4vw;
-      padding-bottom: 9.8vw;
-      background: #fff;
-      border-bottom: 0.1vw solid #d8d8d8;
-
-      &:first-child {
-        border-top: 0.1vw solid #d8d8d8;
-      }
-
-      .info {
-        .name {
-          font-size: 3.6vw;
-          color: #404040;
-          line-height: 1.5;
-          margin-bottom: 2.4vw;
-          @include ellipsis(2);
-          text-align: justify;
-        }
-        .date {
-          bottom: 2.4vw;
-          left: 0;
-          position: absolute;
-          font-size: 3.2vw;
-          color: #b2b2b2;
-          line-height: 1.4;
-        }
-
-        .download {
-          bottom: 2.4vw;
-          right: 0;
-          position: absolute;
-          @include themify($themes) {
-            color: themed('color');
-          }
-          font-size: 3.6vw;
-          cursor: pointer;
-        }
-      }
-
-      .images {
-        margin-top: 2.4vw;
-        .item {
-          width: 21vw;
-          height: 21vw;
-          overflow: hidden;
-          img {
-            display: block;
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

pages/_template/app/database/package.vue

@@ -1,302 +0,0 @@
-<template>
-  <div class="page">
-    <van-list
-      v-model="isLoadingMore"
-      :finished="finished"
-      :immediate-check="false"
-      :finished-text="total ? '没有更多了' : ''"
-      @load="onLoadMore"
-    >
-      <div class="page-top flex flex-col justify-center items-center">
-        <!-- <img class="logo" :src="supplierInfo.logo" /> -->
-        <span
-          class="name mt-2"
-          v-text="supplierInfo.shopName + '资料库'"
-        ></span>
-      </div>
-      <div class="page-content">
-        <!-- 搜索区域 -->
-        <div class="search">
-          <simple-search
-            v-model="listQuery.fileTitle"
-            @search="onSearch"
-            placeholder="搜索资料包"
-          />
-        </div>
-        <div class="divider"></div>
-        <!-- tabbar -->
-        <simple-tabs
-          :tabs="tabs"
-          :current="current"
-          @change="onTabChange"
-          @search="onSearch"
-        ></simple-tabs>
-        <div class="list">
-          <div
-            class="section flex justify-between items-center"
-            v-for="item in list"
-            :key="item.fileId"
-          >
-            <div class="info">
-              <div class="name" v-text="item.fileName"></div>
-              <div class="download" @click="download(item, $event)">
-                点击下载
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 列表为空 -->
-        <SimpleEmpty
-          v-if="!total && !isRequest"
-          description="敬请期待~"
-        ></SimpleEmpty>
-      </div>
-    </van-list>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { tabs } from '@/configs/tabs'
-import downloadFile from '~/utils/donwload-tools'
-import { debounce } from '~/utils'
-
-export default {
-  layout: 'app',
-  data() {
-    return {
-      isLoadingMore: true,
-      finished: false,
-      isRequest: true,
-      tabs: tabs(),
-      current: 4,
-      listQuery: {
-        fileType: 2,
-        fileTitle: '',
-        authUserId: '',
-        pageNum: 1,
-        pageSize: 10,
-      },
-      list: [],
-      total: 0,
-    }
-  },
-  computed: {
-    ...mapGetters(['routePrefix', 'supplierInfo', 'authUserId']),
-  },
-  mounted() {
-    this.fetchList()
-  },
-  methods: {
-    // 下载方法
-    download(item, $event) {
-      const url = `${process.env.BASE_URL}/download/file?ossName=${item.fileDownloadUrl}&fileName=${item.fileName}`
-      downloadFile(url, item.fileName, this, $event)
-    },
-    // 获取列表
-    fetchList: debounce(async function () {
-      try {
-        this.isLoadingMore = true
-        this.listQuery.authUserId = this.authUserId
-        const res = await this.$http.api.getFileList(this.listQuery)
-        this.list = [...this.list, ...res.data.list]
-        this.finished = !res.data.hasNextPage
-        this.total = res.data.total
-        this.isLoadingMore = false
-        this.listQuery.pageNum += 1
-      } catch (error) {
-        console.log(error)
-      } finally {
-        this.isRequest = false
-      }
-    }, 400),
-
-    // tab切换
-    onTabChange(item) {
-      this.$router.push(`${this.routePrefix}${item.path}`)
-    },
-    // 搜索
-    onSearch(keyword) {
-      this.list = []
-      this.listQuery.fileTitle = keyword
-      this.listQuery.pageNum = 1
-      this.fetchList()
-    },
-    // 页码变化
-    onPagiantionChange(index) {
-      this.listQuery.pageNum = index
-      this.fetchList()
-    },
-    // 加载更多
-    onLoadMore() {
-      this.fetchList()
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-/* 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;
-    .divider {
-      height: 16px;
-      background: #f7f7f7;
-    }
-    .search {
-      display: none;
-    }
-  }
-  .list {
-    border-top: 16px solid #f7f7f7;
-    border-bottom: 16px solid #f7f7f7;
-    .section {
-      padding: 32px 0;
-      margin: 0 24px;
-      background: #fff;
-      border-bottom: 1px solid #d8d8d8;
-      transition: all 0.4s;
-
-      &:last-child {
-        border-bottom: 0;
-      }
-
-      .info {
-        width: 100%;
-        position: relative;
-        .name {
-          width: 1050px;
-          font-size: 18px;
-          color: #404040;
-          line-height: 1.6;
-          text-align: justify;
-          @include ellipsis(2);
-        }
-        .download {
-          position: absolute;
-          right: 0;
-          top: 50%;
-          transform: translateY(-50%);
-          font-size: 16px;
-          color: #1890ff;
-          cursor: pointer;
-          &::after {
-            content: '>';
-            margin-left: 8px;
-          }
-        }
-      }
-    }
-  }
-}
-
-// 移动 端
-@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;
-    .divider {
-      border-bottom: 3.2vw solid #f7f7f7;
-      height: 12.4vw;
-    }
-  }
-
-  .search {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    transform: translate(-50%, -50%);
-  }
-
-  .list {
-    .section {
-      position: relative;
-      padding: 4.8vw 0;
-      margin: 0 4vw;
-      background: #fff;
-      border-bottom: 0.1vw solid #d8d8d8;
-
-      &:first-child {
-        border-top: 0.1vw solid #d8d8d8;
-      }
-
-      .info {
-        .name {
-          width: 66vw;
-          font-size: 3.6vw;
-          color: #404040;
-          line-height: 1.5;
-          text-align: justify;
-          @include ellipsis(2);
-        }
-
-        .download {
-          position: absolute;
-          right: 0;
-          bottom: 50%;
-          transform: translateY(50%);
-          font-size: 3.2vw;
-          @include themify($themes) {
-            color: themed('color');
-          }
-          cursor: pointer;
-
-          &::after {
-            content: '>';
-            margin-left: 8px;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

pages/_template/app/database/video.vue

@@ -1,361 +0,0 @@
-<template>
-  <div class="page">
-    <van-list
-      v-model="isLoadingMore"
-      :finished="finished"
-      :immediate-check="false"
-      :finished-text="total ? '没有更多了' : ''"
-      @load="onLoadMore"
-    >
-      <div class="page-top flex flex-col justify-center items-center">
-        <!-- <img class="logo" :src="supplierInfo.logo" /> -->
-        <span
-          class="name mt-2"
-          v-text="supplierInfo.shopName + '资料库'"
-        ></span>
-      </div>
-      <div class="page-content">
-        <!-- 搜索区域 -->
-        <div class="search">
-          <simple-search
-            v-model="listQuery.videoTitle"
-            @search="onSearch"
-            placeholder="搜索视频"
-          />
-        </div>
-        <div class="divider"></div>
-        <!-- tabbar -->
-        <simple-tabs
-          :tabs="tabs"
-          :current="current"
-          @change="onTabChange"
-          @search="onSearch"
-        ></simple-tabs>
-        <div class="list">
-          <div
-            class="section md:flex md:justify-between md:items-center"
-            v-for="item in list"
-            :key="item.videoId"
-          >
-            <div class="info">
-              <div class="name" v-text="item.videoTitle"></div>
-              <div class="date">{{ item.createTime | dateFormat }}</div>
-              <div class="download" @click="download(item, $event)">
-                保存视频
-              </div>
-            </div>
-            <div class="cover">
-              <video class="cover" :src="item.videoPreviewUrl" :poster="item.videoImage"></video>
-              <span @click="onPlayer(item)"></span>
-            </div>
-          </div>
-        </div>
-
-        <!-- 列表为空 -->
-        <SimpleEmpty
-          v-if="!total && !isRequest"
-          description="敬请期待~"
-        ></SimpleEmpty>
-      </div>
-    </van-list>
-
-    <SimpleVideoPlayer ref="player" :videoSrc="videoUrl"></SimpleVideoPlayer>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { tabs } from '@/configs/tabs'
-import downloadFile from '~/utils/donwload-tools'
-import { debounce } from '~/utils'
-
-export default {
-  layout: 'app',
-  data() {
-    return {
-      isLoadingMore: true,
-      finished: false,
-      isRequest: true,
-      tabs: tabs(),
-      current: 2,
-      listQuery: {
-        videoTitle: '',
-        authUserId: '102',
-        pageNum: 1,
-        pageSize: 10,
-      },
-      list: [],
-      total: 0,
-      videoUrl: '',
-    }
-  },
-  computed: {
-    ...mapGetters(['routePrefix', 'supplierInfo', 'authUserId']),
-  },
-  mounted() {
-    this.fetchList()
-  },
-  methods: {
-    // 视频在线播放
-    onPlayer(item) {
-      this.videoUrl = item.videoPreviewUrl
-      this.$refs.player.open()
-    },
-    // 下载方法
-    download(item, $event) {
-      const url = `${process.env.BASE_URL}/download/file?ossName=${item.videoDownloadUrl}&fileName=${item.videoName}`
-      downloadFile(url, item.videoName, this, $event)
-    },
-    // 获取列表
-    fetchList: debounce(async function () {
-      try {
-        this.isLoadingMore = true
-        this.listQuery.authUserId = this.authUserId
-        const res = await this.$http.api.getVideoList(this.listQuery)
-        this.list = [...this.list, ...res.data.list]
-        this.finished = !res.data.hasNextPage
-        this.listQuery.pageNum += 1
-        this.isLoadingMore = false
-        this.total = res.data.total
-      } catch (error) {
-        console.log(error)
-      } finally {
-        this.isRequest = false
-      }
-    }, 400),
-
-    // tab切换
-    onTabChange(item) {
-      this.$router.push(`${this.routePrefix}${item.path}`)
-    },
-    // 搜索
-    onSearch(keyword) {
-      this.list = []
-      this.listQuery.videoTitle = keyword
-      this.listQuery.pageNum = 1
-      this.fetchList()
-    },
-    // 页码变化
-    onPagiantionChange(index) {
-      this.listQuery.pageNum = index
-      this.fetchList()
-    },
-    // 加载更多
-    onLoadMore() {
-      this.fetchList()
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-/* 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;
-    .divider {
-      height: 16px;
-      background: #f7f7f7;
-    }
-    .search {
-      display: none;
-    }
-  }
-  .list {
-    border-top: 16px solid #f7f7f7;
-    border-bottom: 16px solid #f7f7f7;
-    .section {
-      padding: 32px 0;
-      margin: 0 24px;
-      background: #fff;
-      border-bottom: 1px solid #d8d8d8;
-      transition: all 0.4s;
-
-      &:last-child {
-        border-bottom: 0;
-      }
-
-      .info {
-        width: 880px;
-        height: 100%;
-
-        .name {
-          height: 56px;
-          font-size: 18px;
-          color: #404040;
-          line-height: 1.6;
-          margin-bottom: 18px;
-          @include ellipsis(2);
-          text-align: justify;
-        }
-        .date {
-          font-size: 18px;
-          color: #b2b2b2;
-          line-height: 1.4;
-        }
-        .download {
-          font-size: 16px;
-          color: #1890ff;
-          cursor: pointer;
-          margin-top: 8px;
-        }
-      }
-
-      .cover {
-        position: relative;
-        width: 216px;
-        height: 132px;
-        background: #333;
-        span {
-          position: absolute;
-          width: 36px;
-          height: 36px;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          background: url(~assets/theme-images/common/h5-icon-play.png)
-            no-repeat center;
-          background-size: 36px;
-          border-radius: 50%;
-          cursor: pointer;
-          box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
-        }
-      }
-    }
-  }
-}
-
-// 移动 端
-@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;
-    .divider {
-      border-bottom: 3.2vw solid #f7f7f7;
-      height: 12.4vw;
-    }
-  }
-
-  .search {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    transform: translate(-50%, -50%);
-  }
-
-  .list {
-    .section {
-      position: relative;
-      padding: 2.4vw 0;
-      margin: 0 4vw;
-      padding-bottom: 9.8vw;
-      background: #fff;
-      border-bottom: 0.1vw solid #d8d8d8;
-
-      &:first-child {
-        border-top: 0.1vw solid #d8d8d8;
-      }
-
-      .info {
-        .name {
-          font-size: 3.6vw;
-          color: #404040;
-          line-height: 1.5;
-          margin-bottom: 2.4vw;
-          @include ellipsis(2);
-          text-align: justify;
-        }
-        .date {
-          position: absolute;
-          left: 0;
-          bottom: 2.4vw;
-          font-size: 3.2vw;
-          color: #b2b2b2;
-          line-height: 1.4;
-        }
-
-        .download {
-          position: absolute;
-          right: 0;
-          bottom: 2.4vw;
-          font-size: 3.2vw;
-          @include themify($themes) {
-            color: themed('color');
-          }
-          cursor: pointer;
-          margin-top: 1.2vw;
-        }
-      }
-
-      .cover {
-        position: relative;
-        width: 92vw;
-        height: 56vw;
-        border-bottom: 0.1vw solid #d8d8d8;
-        background: #333;
-        span {
-          position: absolute;
-          width: 12vw;
-          height: 12vw;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          background: url(~assets/theme-images/common/h5-icon-play.png)
-            no-repeat center;
-          background-size: 12vw;
-          border-radius: 50%;
-          cursor: pointer;
-          box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
-        }
-      }
-    }
-  }
-}
-</style>

pages/_template/ldm/database/package.vue

@@ -1,237 +0,0 @@
-<template>
-  <div class="page">
-    <van-list
-      v-model="isLoadingMore"
-      :finished="finished"
-      :immediate-check="false"
-      :finished-text="total ? '没有更多了' : ''"
-      @load="onLoadMore"
-    >
-      <div class="page-top flex flex-col justify-center items-center">
-        <img
-          class="logo"
-          src="https://static.caimei365.com/www/authentic/pc/ldm-logo-rect.png"
-        />
-        <div class="name mt-2">
-          Bring you into a new era<br />
-          of high-tech non-invasive beauty care
-        </div>
-      </div>
-      <div class="page-content">
-        <div class="list">
-          <div
-            class="section flex justify-between items-center"
-            v-for="item in list"
-            :key="item.fileId"
-          >
-            <div class="info">
-              <div class="name" v-text="item.fileName"></div>
-              <div class="download" @click="download(item, $event)">
-                点击下载
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 列表为空 -->
-        <LdmEmpty v-if="!total && !isRequest" name="ldm-empty.png"></LdmEmpty>
-      </div>
-    </van-list>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import downloadFile from '~/utils/donwload-tools'
-import { debounce } from '~/utils'
-
-export default {
-  layout: 'app-ldm',
-  data() {
-    return {
-      isLoadingMore: true,
-      finished: false,
-      isRequest: true,
-      listQuery: {
-        fileType: 2,
-        fileTitle: '',
-        authUserId: '',
-        pageNum: 1,
-        pageSize: 10,
-      },
-      list: [],
-      total: 0,
-    }
-  },
-  computed: {
-    ...mapGetters(['userInfo']),
-  },
-  mounted() {
-    this.fetchList()
-  },
-  methods: {
-    // 下载方法
-    download(item, $event) {
-      const url = `${process.env.BASE_URL}/download/file?ossName=${item.fileDownloadUrl}&fileName=${item.fileName}`
-      downloadFile(url, item.fileName, this, $event)
-    },
-    // 获取列表
-    fetchList: debounce(async function () {
-      try {
-        this.isLoadingMore = true
-        this.listQuery.authUserId = this.userInfo.authUserId
-        const res = await this.$http.api.getFileList(this.listQuery)
-        this.list = [...this.list, ...res.data.list]
-        this.finished = !res.data.hasNextPage
-        this.total = res.data.total
-        this.isLoadingMore = false
-        this.listQuery.pageNum += 1
-        this.isRequest = false
-      } catch (error) {
-        console.log(error)
-      }
-    }, 400),
-    // 加载更多
-    onLoadMore() {
-      this.fetchList()
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-/* scss中可以用mixin来扩展 */
-@mixin ellipsis($line: 1) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: $line;
-  -webkit-box-orient: vertical;
-}
-@media screen and (min-width: 768px) {
-  .page-top {
-    height: 466px;
-    .logo {
-      height: 61px;
-      width: 311px;
-      display: block;
-      background: #fff;
-    }
-
-    .name {
-      font-size: 19px;
-      color: #221815;
-      margin-top: 80px;
-      text-align: center;
-      line-height: 36px;
-      text-transform: uppercase;
-    }
-  }
-
-  .page-content {
-    width: 973px;
-    margin: 0 auto;
-    .list {
-      .section {
-        position: relative;
-        padding: 32px 16px;
-        background: #fff;
-        border-bottom: 1px solid #d8d8d8;
-
-        &:first-child {
-          border-top: 1px solid #d8d8d8;
-        }
-
-        .info {
-          .name {
-            width: 800px;
-            font-size: 19px;
-            color: #404040;
-            line-height: 1.5;
-            text-align: justify;
-            @include ellipsis(1);
-          }
-
-          .download {
-            position: absolute;
-            right: 16px;
-            bottom: 50%;
-            transform: translateY(50%);
-            font-size: 16px;
-            color: #0080ed;
-            cursor: pointer;
-
-            &::after {
-              content: '>';
-              margin-left: 8px;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .page-top {
-    height: 76.4vw;
-    .logo {
-      height: 11.5vw;
-      width: 59vw;
-      display: block;
-      background: #fff;
-    }
-
-    .name {
-      font-size: 3.5vw;
-      color: #221815;
-      margin-top: 15vw;
-      text-align: center;
-      line-height: 6.6vw;
-      text-transform: uppercase;
-    }
-  }
-
-  .page-content {
-    .list {
-      .section {
-        position: relative;
-        padding: 6vw 2.6vw;
-        margin: 0 4vw;
-        background: #fff;
-        border-bottom: 0.1vw solid #d8d8d8;
-
-        &:first-child {
-          border-top: 0.1vw solid #d8d8d8;
-        }
-
-        .info {
-          .name {
-            width: 66vw;
-            font-size: 3.6vw;
-            color: #404040;
-            line-height: 1.5;
-            text-align: justify;
-            @include ellipsis(1);
-          }
-
-          .download {
-            position: absolute;
-            right: 2.6vw;
-            bottom: 50%;
-            transform: translateY(50%);
-            font-size: 3vw;
-            color: #0080ed;
-            cursor: pointer;
-
-            &::after {
-              content: '>';
-              margin-left: 8px;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-</style>

pages/_template/ross/database/article-detail.vue

@@ -1,116 +0,0 @@
-<template>
-  <div class="page">
-    <div class="page-top">
-      <div class="title" v-text="articleInfo.articleTitle"></div>
-      <div class="date">{{ articleInfo.createTime | dateFormat }}</div>
-    </div>
-    <div class="page-content" v-html="html"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  layout: 'app-ross',
-  data() {
-    return {
-      articleId: '',
-      articleInfo: {},
-      imageList: [],
-    }
-  },
-  computed: {
-    html() {
-      const html = this.articleInfo.articleContent
-      if (html) {
-        return html.replace(/href=/gi, '')
-      }
-      return ''
-    },
-  },
-  mounted() {
-    this.initData()
-  },
-  methods: {
-    initData() {
-      this.articleId = parseInt(this.$route.query.id)
-      this.fetchArticleDetail()
-    },
-    async fetchArticleDetail() {
-      try {
-        const res = await this.$http.api.getArticleDetail({
-          articleId: this.articleId,
-        })
-        this.articleInfo = res.data
-      } catch (error) {
-        console.log(error)
-      }
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-/* 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 {
-    width: 1200px;
-    margin: 24px auto;
-    box-sizing: border-box;
-    background: #fff;
-    padding: 24px;
-  }
-  .page-top {
-    padding-bottom: 24px;
-    border-bottom: 1px solid #d8d8d8;
-    .title {
-      font-size: 28px;
-      color: #101010;
-      line-height: 1.6;
-      text-align: justify;
-    }
-    .date {
-      font-size: 18px;
-      color: #b2b2b2;
-      margin-top: 24px;
-    }
-  }
-  .page-content {
-    padding-top: 24px;
-    color: #404040;
-  }
-}
-
-// 移动 端
-@media screen and (max-width: 768px) {
-  .page {
-    box-sizing: border-box;
-    background: #fff;
-    padding: 4vw;
-  }
-  .page-top {
-    .title {
-      font-size: 4.2vw;
-      color: #101010;
-      line-height: 1.6;
-      text-align: justify;
-    }
-    .date {
-      font-size: 3.2vw;
-      color: #b2b2b2;
-      margin-top: 4vw;
-    }
-  }
-  .page-content {
-    padding-top: 24px;
-    color: #404040;
-  }
-}
-</style>

pages/_template/ross/database/article.vue

@@ -1,303 +0,0 @@
-<template>
-  <div class="page">
-    <van-list
-      v-model="isLoadingMore"
-      :finished="finished"
-      :immediate-check="false"
-      :finished-text="total ? '没有更多了' : ''"
-      @load="onLoadMore"
-    >
-      <div class="page-top flex flex-col justify-center items-center">
-        <!-- <img class="logo" :src="supplierInfo.logo" /> -->
-        <span
-          class="name mt-2"
-          v-text="supplierInfo.shopName + '资料库'"
-        ></span>
-      </div>
-      <div class="page-content">
-        <!-- 搜索区域 -->
-        <div class="search">
-          <simple-search
-            v-model="listQuery.articleTitle"
-            @search="onSearch"
-            placeholder="搜索文章标题"
-          />
-        </div>
-        <div class="divider"></div>
-        <!-- tabbar -->
-        <simple-tabs
-          :tabs="tabs"
-          :current="current"
-          @change="onTabChange"
-          @search="onSearch"
-        ></simple-tabs>
-        <div class="list">
-          <div
-            class="section flex justify-between items-center"
-            v-for="item in list"
-            :key="item.articleId"
-            @click="toDetail(item)"
-          >
-            <div class="info">
-              <div class="name" v-text="item.articleTitle"></div>
-              <div class="date">{{ item.createTime | dateFormat }}</div>
-            </div>
-            <img class="cover" :src="item.articleImage" />
-          </div>
-        </div>
-
-        <!-- 列表为空 -->
-        <SimpleEmpty
-          v-if="!total && !isRequest"
-          description="敬请期待~"
-        ></SimpleEmpty>
-      </div>
-    </van-list>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { tabs } from '@/configs/tabs'
-import { debounce } from '~/utils'
-
-export default {
-  layout: 'app-ross',
-  data() {
-    return {
-      isLoadingMore: true,
-      finished: false,
-      isRequest: true,
-      tabs: tabs(),
-      current: 0,
-      listQuery: {
-        articleTitle: '',
-        authUserId: '102',
-        pageNum: 1,
-        pageSize: 10,
-      },
-      list: [],
-      total: 0,
-    }
-  },
-  computed: {
-    ...mapGetters(['supplierInfo', 'authUserId', 'routePrefix']),
-  },
-  mounted() {
-    this.fetchList()
-  },
-  methods: {
-    fetchList: debounce(async function () {
-      try {
-        this.isLoadingMore = true
-        this.listQuery.authUserId = this.authUserId
-        const res = await this.$http.api.getArticleList(this.listQuery)
-        this.list = [...this.list, ...res.data.list]
-        this.finished = !res.data.hasNextPage
-        this.total = res.data.total
-        this.isLoadingMore = false
-        this.listQuery.pageNum += 1
-      } catch (error) {
-        console.log(error)
-      } finally {
-        this.isRequest = false
-      }
-    }, 400),
-
-    // 详情
-    toDetail(item) {
-      const url = `${this.routePrefix}/database/article-detail?id=${item.articleId}`
-      this.$router.push(url)
-    },
-    // tab切换
-    onTabChange(item) {
-      this.$router.push(`${this.routePrefix}${item.path}`)
-    },
-    // 搜索
-    onSearch(keyword) {
-      this.list = []
-      this.listQuery.articleTitle = keyword
-      this.listQuery.pageNum = 1
-      this.fetchList()
-    },
-    // 页码变化
-    onPagiantionChange(index) {
-      this.listQuery.pageNum = index
-      this.fetchList()
-    },
-    // 加载更多
-    onLoadMore() {
-      this.fetchList()
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-/* 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;
-    .divider {
-      height: 16px;
-      background: #f7f7f7;
-    }
-    .search {
-      display: none;
-    }
-  }
-  .list {
-    border-top: 16px solid #f7f7f7;
-    border-bottom: 16px solid #f7f7f7;
-    .section {
-      padding: 32px 0;
-      margin: 0 24px;
-      background: #fff;
-      border-bottom: 1px solid #d8d8d8;
-      transition: all 0.4s;
-      cursor: pointer;
-
-      &:hover {
-        .name {
-          @include themify($themes) {
-            color: themed('color') !important;
-          }
-        }
-      }
-
-      &:last-child {
-        border-bottom: 0;
-      }
-
-      .info {
-        width: 1000px;
-        height: 100%;
-
-        .name {
-          font-size: 18px;
-          color: #404040;
-          line-height: 1.6;
-          margin-bottom: 18px;
-          text-align: justify;
-          @include ellipsis(2);
-        }
-        .date {
-          font-size: 18px;
-          color: #b2b2b2;
-          line-height: 1.4;
-        }
-      }
-
-      .cover {
-        width: 106px;
-        height: 106px;
-        border-bottom: 1px solid #d8d8d8;
-      }
-    }
-  }
-}
-
-// 移动 端
-@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;
-    .divider {
-      border-bottom: 3.2vw solid #f7f7f7;
-      height: 12.4vw;
-    }
-  }
-
-  .search {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    transform: translate(-50%, -50%);
-  }
-
-  .list {
-    .section {
-      padding: 2.4vw 0;
-      margin: 0 4vw;
-      background: #fff;
-      border-bottom: 0.1vw solid #d8d8d8;
-
-      &:first-child {
-        border-top: 0.1vw solid #d8d8d8;
-      }
-
-      .info {
-        width: 67.3vw;
-        height: 100%;
-
-        .name {
-          font-size: 3.6vw;
-          color: #404040;
-          line-height: 1.5;
-          text-align: justify;
-          margin-bottom: 2.4vw;
-          @include ellipsis(2);
-        }
-        .date {
-          font-size: 3.2vw;
-          color: #b2b2b2;
-          line-height: 1.4;
-        }
-      }
-
-      .cover {
-        width: 18vw;
-        height: 18vw;
-        border-bottom: 0.1vw solid #d8d8d8;
-      }
-    }
-  }
-}
-</style>

pages/_template/ross/database/file.vue

@@ -1,334 +0,0 @@
-<template>
-  <div class="page">
-    <van-list
-      v-model="isLoadingMore"
-      :finished="finished"
-      :immediate-check="false"
-      :finished-text="total ? '没有更多了' : ''"
-      @load="onLoadMore"
-    >
-      <div class="page-top flex flex-col justify-center items-center">
-        <!-- <img class="logo" :src="supplierInfo.logo" /> -->
-        <span
-          class="name mt-2"
-          v-text="supplierInfo.shopName + '资料库'"
-        ></span>
-      </div>
-      <div class="page-content">
-        <!-- 搜索区域 -->
-        <div class="search">
-          <simple-search
-            v-model="listQuery.fileTitle"
-            @search="onSearch"
-            placeholder="搜索文件名称"
-          />
-        </div>
-        <div class="divider"></div>
-        <!-- tabbar -->
-        <simple-tabs
-          :tabs="tabs"
-          :current="current"
-          @change="onTabChange"
-          @search="onSearch"
-        ></simple-tabs>
-        <div class="list">
-          <div
-            class="section md:flex md:justify-between md:items-center"
-            v-for="item in list"
-            :key="item.fileId"
-            @click="previewFile(item)"
-          >
-            <div class="info">
-              <div class="name" v-text="item.fileName"></div>
-              <div class="date">{{ item.createTime | dateFormat }}</div>
-              <div class="download" @click.stop="download(item, $event)">
-                下载
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- 列表为空 -->
-        <SimpleEmpty
-          v-if="!total && !isRequest"
-          description="敬请期待~"
-        ></SimpleEmpty>
-      </div>
-    </van-list>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { tabs } from '~/configs/tabs'
-import downloadFile from '~/utils/donwload-tools'
-import { debounce } from '~/utils'
-
-export default {
-  layout: 'app-ross',
-  data() {
-    return {
-      isLoadingMore: true,
-      finished: false,
-      isRequest: true,
-      tabs: tabs(),
-      current: 3,
-      listQuery: {
-        fileType: 1,
-        fileTitle: '',
-        authUserId: '',
-        pageNum: 1,
-        pageSize: 10,
-      },
-      list: [],
-      total: 0,
-    }
-  },
-  computed: {
-    ...mapGetters(['routePrefix', 'supplierInfo', 'authUserId']),
-  },
-  mounted() {
-    this.fetchList()
-  },
-  methods: {
-    // 下载方法
-    download(item, $event) {
-      const url = `${process.env.BASE_URL}/download/file?ossName=${item.fileDownloadUrl}&fileName=${item.fileName}`
-      downloadFile(url, item.fileName, this, $event)
-    },
-    // 预览文件
-    previewFile(item) {
-      window.open(item.filePreviewUrl)
-    },
-    // 获取列表
-    fetchList: debounce(async function () {
-      try {
-        this.isLoadingMore = true
-        this.listQuery.authUserId = this.authUserId
-        const res = await this.$http.api.getFileList(this.listQuery)
-        this.list = [...this.list, ...res.data.list]
-        this.finished = !res.data.hasNextPage
-        this.total = res.data.total
-        this.isLoadingMore = false
-        this.listQuery.pageNum += 1
-      } catch (error) {
-        console.log(error)
-      } finally {
-        this.isRequest = false
-      }
-    }, 400),
-    // tab切换
-    onTabChange(item) {
-      this.$router.push(`${this.routePrefix}${item.path}`)
-    },
-    // 搜索
-    onSearch(keyword) {
-      this.list = []
-      this.listQuery.fileTitle = keyword
-      this.listQuery.pageNum = 1
-      this.fetchList()
-    },
-    // 页码变化
-    onPagiantionChange(index) {
-      this.listQuery.pageNum = index
-      this.fetchList()
-    },
-    // 加载更多
-    onLoadMore() {
-      this.fetchList()
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-/* 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;
-    .divider {
-      height: 16px;
-      background: #f7f7f7;
-    }
-    .search {
-      display: none;
-    }
-  }
-  .list {
-    border-top: 16px solid #f7f7f7;
-    border-bottom: 16px solid #f7f7f7;
-    .section {
-      padding: 32px 0;
-      margin: 0 24px;
-      background: #fff;
-      border-bottom: 1px solid #d8d8d8;
-      transition: all 0.4s;
-      cursor: pointer;
-
-      &:last-child {
-        border-bottom: 0;
-      }
-
-      &:hover {
-        .name {
-          @include themify($themes) {
-            color: themed('color') !important;
-          }
-        }
-      }
-
-      .info {
-        width: 100%;
-        position: relative;
-        .name {
-          width: 1050px;
-          height: 56px;
-          font-size: 18px;
-          color: #404040;
-          line-height: 1.6;
-          margin-bottom: 18px;
-          text-align: justify;
-          @include ellipsis(2);
-          transition: all 0.4s;
-        }
-        .date {
-          font-size: 18px;
-          color: #b2b2b2;
-          line-height: 1.4;
-        }
-        .download {
-          position: absolute;
-          text-align: center;
-          right: 0;
-          top: 50%;
-          transform: translateY(-50%);
-          font-size: 16px;
-          color: #1890ff;
-          cursor: pointer;
-
-          &::before {
-            content: '';
-            display: block;
-            width: 54px;
-            height: 59px;
-            background: url(~assets/theme-images/common/pc-icon-pdf-download.png)
-              no-repeat center;
-            background-size: 54px;
-          }
-        }
-      }
-    }
-  }
-}
-
-// 移动 端
-@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;
-    .divider {
-      border-bottom: 3.2vw solid #f7f7f7;
-      height: 12.4vw;
-    }
-  }
-
-  .search {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    transform: translate(-50%, -50%);
-  }
-
-  .list {
-    .section {
-      position: relative;
-      padding: 2.4vw 0;
-      margin: 0 4vw;
-      padding-bottom: 6.8vw;
-      background: #fff;
-      border-bottom: 0.1vw solid #d8d8d8;
-
-      &:first-child {
-        border-top: 0.1vw solid #d8d8d8;
-      }
-
-      .info {
-        .name {
-          font-size: 3.6vw;
-          color: #404040;
-          line-height: 1.5;
-          margin-bottom: 2.4vw;
-          text-align: justify;
-          @include ellipsis(2);
-        }
-        .date {
-          position: absolute;
-          left: 0;
-          bottom: 2.4vw;
-          font-size: 3.2vw;
-          color: #b2b2b2;
-          line-height: 1.4;
-        }
-
-        .download {
-          position: absolute;
-          right: 0;
-          bottom: 2.4vw;
-          font-size: 3.2vw;
-          @include themify($themes) {
-            color: themed('color');
-          }
-          cursor: pointer;
-          margin-top: 1.2vw;
-        }
-      }
-    }
-  }
-}
-</style>

pages/_template/ross/database/image.vue

@@ -1,348 +0,0 @@
-<template>
-  <div class="page">
-    <van-list
-      v-model="isLoadingMore"
-      :finished="finished"
-      :immediate-check="false"
-      :finished-text="total ? '没有更多了' : ''"
-      @load="onLoadMore"
-    >
-      <div class="page-top flex flex-col justify-center items-center">
-        <!-- <img class="logo" :src="supplierInfo.logo" /> -->
-        <span
-          class="name mt-2"
-          v-text="supplierInfo.shopName + '资料库'"
-        ></span>
-      </div>
-      <div class="page-content">
-        <!-- 搜索区域 -->
-        <div class="search">
-          <simple-search
-            v-model="listQuery.imageTitle"
-            @search="onSearch"
-            placeholder="搜索图片标题"
-          />
-        </div>
-        <div class="divider"></div>
-        <!-- tabbar -->
-        <simple-tabs
-          :tabs="tabs"
-          :current="current"
-          @change="onTabChange"
-          @search="onSearch"
-        ></simple-tabs>
-        <div class="list">
-          <div class="section" v-for="item in list" :key="item.imageId">
-            <div class="info">
-              <div class="name" v-text="item.imageTitle"></div>
-              <div class="date">{{ item.createTime | dateFormat }}</div>
-              <div class="download" @click="download(item.imageZipUrl, $event)">
-                保存所有图片
-              </div>
-            </div>
-            <div class="images grid grid-cols-4 md:grid-cols-8 gap-3 md:gap-4">
-              <div
-                class="item"
-                v-for="(image, index) in item.imageList"
-                :key="index"
-                @click="onImagePreview(item.imageList, index)"
-              >
-                <img class="object-cover" :src="image" />
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- 列表为空 -->
-        <SimpleEmpty
-          v-if="!total && !isRequest"
-          description="敬请期待~"
-        ></SimpleEmpty>
-      </div>
-    </van-list>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { tabs } from '@/configs/tabs'
-import downloadFile from '~/utils/donwload-tools'
-import { ImagePreview } from 'vant'
-import { debounce } from '~/utils'
-
-export default {
-  layout: 'app-ross',
-  data() {
-    return {
-      isLoadingMore: true,
-      finished: false,
-      isRequest: true,
-      tabs: tabs(),
-      current: 1,
-      listQuery: {
-        imageTitle: '',
-        authUserId: '',
-        pageNum: 1,
-        pageSize: 10,
-      },
-      list: [],
-      total: 0,
-    }
-  },
-  computed: {
-    ...mapGetters(['routePrefix', 'supplierInfo', 'authUserId']),
-  },
-  mounted() {
-    this.fetchList()
-  },
-  methods: {
-    // 下载方法
-    download(url, $event) {
-      downloadFile(url, '图片包', this, $event)
-    },
-    // 获取列表
-    fetchList: debounce(async function () {
-      try {
-        this.isLoadingMore = true
-        this.listQuery.authUserId = this.authUserId
-        const res = await this.$http.api.getImageList(this.listQuery)
-        this.list = [...this.list, ...res.data.list]
-        this.finished = !res.data.hasNextPage
-        this.total = res.data.total
-        this.isLoadingMore = false
-        this.listQuery.pageNum += 1
-      } catch (error) {
-        console.log(error)
-      } finally {
-        this.isRequest = false
-      }
-    }, 400),
-
-    // 图片预览
-    onImagePreview(imageList, index) {
-      ImagePreview({
-        images: imageList,
-        startPosition: index,
-        loop: true,
-        showIndex: true,
-        showIndicators: true,
-        closeable: true,
-      })
-    },
-    // tab切换
-    onTabChange(item) {
-      this.$router.push(`${this.routePrefix}${item.path}`)
-    },
-    // 搜索
-    onSearch(keyword) {
-      this.list = []
-      this.listQuery.imageTitle = keyword
-      this.listQuery.pageNum = 1
-      this.fetchList()
-    },
-    // 页码变化
-    onPagiantionChange(index) {
-      this.listQuery.pageNum = index
-      this.fetchList()
-    },
-    // 加载更多
-    onLoadMore() {
-      this.fetchList()
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-/* 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;
-    .divider {
-      height: 16px;
-      background: #f7f7f7;
-    }
-    .search {
-      display: none;
-    }
-  }
-  .list {
-    border-top: 16px solid #f7f7f7;
-    border-bottom: 16px solid #f7f7f7;
-    .section {
-      padding: 32px 0;
-      margin: 0 24px;
-      background: #fff;
-      border-bottom: 1px solid #d8d8d8;
-
-      &:last-child {
-        border-bottom: 0;
-      }
-
-      .info {
-        position: relative;
-        .name {
-          font-size: 18px;
-          color: #404040;
-          line-height: 1.6;
-          margin-bottom: 18px;
-          text-align: justify;
-        }
-        .date {
-          font-size: 18px;
-          color: #b2b2b2;
-          line-height: 1.4;
-        }
-
-        .download {
-          bottom: 0;
-          right: 0;
-          position: absolute;
-          color: #1890ff;
-          font-size: 16px;
-          cursor: pointer;
-        }
-      }
-
-      .images {
-        margin-top: 24px;
-        .item {
-          width: 126px;
-          height: 126px;
-          overflow: hidden;
-          img {
-            display: block;
-            width: 100%;
-            height: 100%;
-            cursor: pointer;
-          }
-        }
-      }
-    }
-  }
-}
-
-// 移动 端
-@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;
-    .divider {
-      border-bottom: 3.2vw solid #f7f7f7;
-      height: 12.4vw;
-    }
-  }
-
-  .search {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    transform: translate(-50%, -50%);
-  }
-
-  .list {
-    .section {
-      position: relative;
-      padding: 2.4vw 0;
-      margin: 0 4vw;
-      padding-bottom: 9.8vw;
-      background: #fff;
-      border-bottom: 0.1vw solid #d8d8d8;
-
-      &:first-child {
-        border-top: 0.1vw solid #d8d8d8;
-      }
-
-      .info {
-        .name {
-          font-size: 3.6vw;
-          color: #404040;
-          line-height: 1.5;
-          margin-bottom: 2.4vw;
-          @include ellipsis(2);
-          text-align: justify;
-        }
-        .date {
-          bottom: 2.4vw;
-          left: 0;
-          position: absolute;
-          font-size: 3.2vw;
-          color: #b2b2b2;
-          line-height: 1.4;
-        }
-
-        .download {
-          bottom: 2.4vw;
-          right: 0;
-          position: absolute;
-          @include themify($themes) {
-            color: themed('color');
-          }
-          font-size: 3.6vw;
-          cursor: pointer;
-        }
-      }
-
-      .images {
-        margin-top: 2.4vw;
-        .item {
-          width: 21vw;
-          height: 21vw;
-          overflow: hidden;
-          img {
-            display: block;
-            width: 100%;
-            height: 100%;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

pages/_template/ross/database/package.vue

@@ -1,302 +0,0 @@
-<template>
-  <div class="page">
-    <van-list
-      v-model="isLoadingMore"
-      :finished="finished"
-      :immediate-check="false"
-      :finished-text="total ? '没有更多了' : ''"
-      @load="onLoadMore"
-    >
-      <div class="page-top flex flex-col justify-center items-center">
-        <!-- <img class="logo" :src="supplierInfo.logo" /> -->
-        <span
-          class="name mt-2"
-          v-text="supplierInfo.shopName + '资料库'"
-        ></span>
-      </div>
-      <div class="page-content">
-        <!-- 搜索区域 -->
-        <div class="search">
-          <simple-search
-            v-model="listQuery.fileTitle"
-            @search="onSearch"
-            placeholder="搜索资料包"
-          />
-        </div>
-        <div class="divider"></div>
-        <!-- tabbar -->
-        <simple-tabs
-          :tabs="tabs"
-          :current="current"
-          @change="onTabChange"
-          @search="onSearch"
-        ></simple-tabs>
-        <div class="list">
-          <div
-            class="section flex justify-between items-center"
-            v-for="item in list"
-            :key="item.fileId"
-          >
-            <div class="info">
-              <div class="name" v-text="item.fileName"></div>
-              <div class="download" @click="download(item, $event)">
-                点击下载
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 列表为空 -->
-        <SimpleEmpty
-          v-if="!total && !isRequest"
-          description="敬请期待~"
-        ></SimpleEmpty>
-      </div>
-    </van-list>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { tabs } from '@/configs/tabs'
-import downloadFile from '~/utils/donwload-tools'
-import { debounce } from '~/utils'
-
-export default {
-  layout: 'app-ross',
-  data() {
-    return {
-      isLoadingMore: true,
-      finished: false,
-      isRequest: true,
-      tabs: tabs(),
-      current: 4,
-      listQuery: {
-        fileType: 2,
-        fileTitle: '',
-        authUserId: '',
-        pageNum: 1,
-        pageSize: 10,
-      },
-      list: [],
-      total: 0,
-    }
-  },
-  computed: {
-    ...mapGetters(['routePrefix', 'supplierInfo', 'authUserId']),
-  },
-  mounted() {
-    this.fetchList()
-  },
-  methods: {
-    // 下载方法
-    download(item, $event) {
-      const url = `${process.env.BASE_URL}/download/file?ossName=${item.fileDownloadUrl}&fileName=${item.fileName}`
-      downloadFile(url, item.fileName, this, $event)
-    },
-    // 获取列表
-    fetchList: debounce(async function () {
-      try {
-        this.isLoadingMore = true
-        this.listQuery.authUserId = this.authUserId
-        const res = await this.$http.api.getFileList(this.listQuery)
-        this.list = [...this.list, ...res.data.list]
-        this.finished = !res.data.hasNextPage
-        this.total = res.data.total
-        this.isLoadingMore = false
-        this.listQuery.pageNum += 1
-      } catch (error) {
-        console.log(error)
-      } finally {
-        this.isRequest = false
-      }
-    }, 400),
-
-    // tab切换
-    onTabChange(item) {
-      this.$router.push(`${this.routePrefix}${item.path}`)
-    },
-    // 搜索
-    onSearch(keyword) {
-      this.list = []
-      this.listQuery.fileTitle = keyword
-      this.listQuery.pageNum = 1
-      this.fetchList()
-    },
-    // 页码变化
-    onPagiantionChange(index) {
-      this.listQuery.pageNum = index
-      this.fetchList()
-    },
-    // 加载更多
-    onLoadMore() {
-      this.fetchList()
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-/* 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;
-    .divider {
-      height: 16px;
-      background: #f7f7f7;
-    }
-    .search {
-      display: none;
-    }
-  }
-  .list {
-    border-top: 16px solid #f7f7f7;
-    border-bottom: 16px solid #f7f7f7;
-    .section {
-      padding: 32px 0;
-      margin: 0 24px;
-      background: #fff;
-      border-bottom: 1px solid #d8d8d8;
-      transition: all 0.4s;
-
-      &:last-child {
-        border-bottom: 0;
-      }
-
-      .info {
-        width: 100%;
-        position: relative;
-        .name {
-          width: 1050px;
-          font-size: 18px;
-          color: #404040;
-          line-height: 1.6;
-          text-align: justify;
-          @include ellipsis(2);
-        }
-        .download {
-          position: absolute;
-          right: 0;
-          top: 50%;
-          transform: translateY(-50%);
-          font-size: 16px;
-          color: #1890ff;
-          cursor: pointer;
-          &::after {
-            content: '>';
-            margin-left: 8px;
-          }
-        }
-      }
-    }
-  }
-}
-
-// 移动 端
-@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;
-    .divider {
-      border-bottom: 3.2vw solid #f7f7f7;
-      height: 12.4vw;
-    }
-  }
-
-  .search {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    transform: translate(-50%, -50%);
-  }
-
-  .list {
-    .section {
-      position: relative;
-      padding: 4.8vw 0;
-      margin: 0 4vw;
-      background: #fff;
-      border-bottom: 0.1vw solid #d8d8d8;
-
-      &:first-child {
-        border-top: 0.1vw solid #d8d8d8;
-      }
-
-      .info {
-        .name {
-          width: 66vw;
-          font-size: 3.6vw;
-          color: #404040;
-          line-height: 1.5;
-          text-align: justify;
-          @include ellipsis(2);
-        }
-
-        .download {
-          position: absolute;
-          right: 0;
-          bottom: 50%;
-          transform: translateY(50%);
-          font-size: 3.2vw;
-          @include themify($themes) {
-            color: themed('color');
-          }
-          cursor: pointer;
-
-          &::after {
-            content: '>';
-            margin-left: 8px;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

pages/_template/ross/database/video.vue

@@ -1,361 +0,0 @@
-<template>
-  <div class="page">
-    <van-list
-      v-model="isLoadingMore"
-      :finished="finished"
-      :immediate-check="false"
-      :finished-text="total ? '没有更多了' : ''"
-      @load="onLoadMore"
-    >
-      <div class="page-top flex flex-col justify-center items-center">
-        <!-- <img class="logo" :src="supplierInfo.logo" /> -->
-        <span
-          class="name mt-2"
-          v-text="supplierInfo.shopName + '资料库'"
-        ></span>
-      </div>
-      <div class="page-content">
-        <!-- 搜索区域 -->
-        <div class="search">
-          <simple-search
-            v-model="listQuery.videoTitle"
-            @search="onSearch"
-            placeholder="搜索视频"
-          />
-        </div>
-        <div class="divider"></div>
-        <!-- tabbar -->
-        <simple-tabs
-          :tabs="tabs"
-          :current="current"
-          @change="onTabChange"
-          @search="onSearch"
-        ></simple-tabs>
-        <div class="list">
-          <div
-            class="section md:flex md:justify-between md:items-center"
-            v-for="item in list"
-            :key="item.videoId"
-          >
-            <div class="info">
-              <div class="name" v-text="item.videoTitle"></div>
-              <div class="date">{{ item.createTime | dateFormat }}</div>
-              <div class="download" @click="download(item, $event)">
-                保存视频
-              </div>
-            </div>
-            <div class="cover">
-              <video class="cover" :src="item.videoPreviewUrl" :poster="item.videoImage"></video>
-              <span @click="onPlayer(item)"></span>
-            </div>
-          </div>
-        </div>
-
-        <!-- 列表为空 -->
-        <SimpleEmpty
-          v-if="!total && !isRequest"
-          description="敬请期待~"
-        ></SimpleEmpty>
-      </div>
-    </van-list>
-
-    <SimpleVideoPlayer ref="player" :videoSrc="videoUrl"></SimpleVideoPlayer>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from 'vuex'
-import { tabs } from '@/configs/tabs'
-import downloadFile from '~/utils/donwload-tools'
-import { debounce } from '~/utils'
-
-export default {
-  layout: 'app-ross',
-  data() {
-    return {
-      isLoadingMore: true,
-      finished: false,
-      isRequest: true,
-      tabs: tabs(),
-      current: 2,
-      listQuery: {
-        videoTitle: '',
-        authUserId: '102',
-        pageNum: 1,
-        pageSize: 10,
-      },
-      list: [],
-      total: 0,
-      videoUrl: '',
-    }
-  },
-  computed: {
-    ...mapGetters(['routePrefix', 'supplierInfo', 'authUserId']),
-  },
-  mounted() {
-    this.fetchList()
-  },
-  methods: {
-    // 视频在线播放
-    onPlayer(item) {
-      this.videoUrl = item.videoPreviewUrl
-      this.$refs.player.open()
-    },
-    // 下载方法
-    download(item, $event) {
-      const url = `${process.env.BASE_URL}/download/file?ossName=${item.videoDownloadUrl}&fileName=${item.videoName}`
-      downloadFile(url, item.videoName, this, $event)
-    },
-    // 获取列表
-    fetchList: debounce(async function () {
-      try {
-        this.isLoadingMore = true
-        this.listQuery.authUserId = this.authUserId
-        const res = await this.$http.api.getVideoList(this.listQuery)
-        this.list = [...this.list, ...res.data.list]
-        this.finished = !res.data.hasNextPage
-        this.listQuery.pageNum += 1
-        this.isLoadingMore = false
-        this.total = res.data.total
-      } catch (error) {
-        console.log(error)
-      } finally {
-        this.isRequest = false
-      }
-    }, 400),
-
-    // tab切换
-    onTabChange(item) {
-      this.$router.push(`${this.routePrefix}${item.path}`)
-    },
-    // 搜索
-    onSearch(keyword) {
-      this.list = []
-      this.listQuery.videoTitle = keyword
-      this.listQuery.pageNum = 1
-      this.fetchList()
-    },
-    // 页码变化
-    onPagiantionChange(index) {
-      this.listQuery.pageNum = index
-      this.fetchList()
-    },
-    // 加载更多
-    onLoadMore() {
-      this.fetchList()
-    },
-  },
-}
-</script>
-
-<style scoped lang="scss">
-/* 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;
-    .divider {
-      height: 16px;
-      background: #f7f7f7;
-    }
-    .search {
-      display: none;
-    }
-  }
-  .list {
-    border-top: 16px solid #f7f7f7;
-    border-bottom: 16px solid #f7f7f7;
-    .section {
-      padding: 32px 0;
-      margin: 0 24px;
-      background: #fff;
-      border-bottom: 1px solid #d8d8d8;
-      transition: all 0.4s;
-
-      &:last-child {
-        border-bottom: 0;
-      }
-
-      .info {
-        width: 880px;
-        height: 100%;
-
-        .name {
-          height: 56px;
-          font-size: 18px;
-          color: #404040;
-          line-height: 1.6;
-          margin-bottom: 18px;
-          @include ellipsis(2);
-          text-align: justify;
-        }
-        .date {
-          font-size: 18px;
-          color: #b2b2b2;
-          line-height: 1.4;
-        }
-        .download {
-          font-size: 16px;
-          color: #1890ff;
-          cursor: pointer;
-          margin-top: 8px;
-        }
-      }
-
-      .cover {
-        position: relative;
-        width: 216px;
-        height: 132px;
-        background: #333;
-        span {
-          position: absolute;
-          width: 36px;
-          height: 36px;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          background: url(~assets/theme-images/common/h5-icon-play.png)
-            no-repeat center;
-          background-size: 36px;
-          border-radius: 50%;
-          cursor: pointer;
-          box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
-        }
-      }
-    }
-  }
-}
-
-// 移动 端
-@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;
-    .divider {
-      border-bottom: 3.2vw solid #f7f7f7;
-      height: 12.4vw;
-    }
-  }
-
-  .search {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    transform: translate(-50%, -50%);
-  }
-
-  .list {
-    .section {
-      position: relative;
-      padding: 2.4vw 0;
-      margin: 0 4vw;
-      padding-bottom: 9.8vw;
-      background: #fff;
-      border-bottom: 0.1vw solid #d8d8d8;
-
-      &:first-child {
-        border-top: 0.1vw solid #d8d8d8;
-      }
-
-      .info {
-        .name {
-          font-size: 3.6vw;
-          color: #404040;
-          line-height: 1.5;
-          margin-bottom: 2.4vw;
-          @include ellipsis(2);
-          text-align: justify;
-        }
-        .date {
-          position: absolute;
-          left: 0;
-          bottom: 2.4vw;
-          font-size: 3.2vw;
-          color: #b2b2b2;
-          line-height: 1.4;
-        }
-
-        .download {
-          position: absolute;
-          right: 0;
-          bottom: 2.4vw;
-          font-size: 3.2vw;
-          @include themify($themes) {
-            color: themed('color');
-          }
-          cursor: pointer;
-          margin-top: 1.2vw;
-        }
-      }
-
-      .cover {
-        position: relative;
-        width: 92vw;
-        height: 56vw;
-        border-bottom: 0.1vw solid #d8d8d8;
-        background: #333;
-        span {
-          position: absolute;
-          width: 12vw;
-          height: 12vw;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          background: url(~assets/theme-images/common/h5-icon-play.png)
-            no-repeat center;
-          background-size: 12vw;
-          border-radius: 50%;
-          cursor: pointer;
-          box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
-        }
-      }
-    }
-  }
-}
-</style>

pages/download/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="download-page flex items-center flex-col">
+    <div class="retry text-sm text-center text-gray-700" v-if="!isRequest">
+      下载出现问题了？<span class="cursor-pointer" @click="init"
+        >点我重试!</span
+      >
+    </div>
+    <template v-else>
+      <div class="dot-elastic"></div>
+      <div class="text-sm mt-6 text-center text-gray-700">
+        {{ downloadTip }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { decrypt } from '~/utils/crypto'
+export default {
+  data() {
+    return {
+      query: {},
+      timer: null,
+      time: 0,
+      isRequest: false,
+      success: false
+    }
+  },
+  computed: {
+    downloadTip() {
+      return this.time > 10
+        ? '当前文件过大，请勿退出，请耐心等待~~'
+        : '正在下载，请稍等~~'
+    },
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    async init() {
+      try {
+        // 获取参数
+        const query = JSON.parse(decrypt(this.$route.query.state))
+        this.query = query
+        this.timer = setInterval(() => {
+          this.time++
+        }, 1000)
+        this.isRequest = true
+        const data = await fetch(query.downUrl, {
+          headers: { 'X-Token': query.token },
+        })
+        // 链接是否重定向
+        if (data.redirected) {
+          const resultData = await data.json()
+          // 登录过期
+          if (resultData.code === -99) {
+            return this.$toast('链接已失效~~')
+          }
+        }
+
+        const res = await data.blob()
+        const link = document.createElement('a')
+        const url = URL.createObjectURL(res)
+        link.href = url
+        link.download = query.fileName
+        link.click()
+        URL.revokeObjectURL(url)
+        clearInterval(this.timer)
+        this.success = true
+      } catch (error) {
+        console.log(error)
+        this.$toast('链接已失效~~')
+        clearInterval(this.timer)
+      } finally {
+        this.isRequest = false
+      }
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.download-page {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  // background: #f1f8ee;
+  box-sizing: border-box;
+  padding-top: 16%;
+
+  .retry {
+    text-align: center;
+
+    span {
+      text-decoration: underline;
+      transition: all 0.4s;
+      &:hover {
+        color: red;
+      }
+    }
+  }
+}
+</style>

utils/donwload-tools.js

@@ -3,6 +3,7 @@ import handleClipboard from '@/utils/clipboard'
 import { isWeChat } from '@/utils/validator'
 import Vue from 'vue'
 import { Dialog } from 'vant'
+import { encrypt } from './crypto'
 
 let uuid = 0 // 进度条id
 
@@ -82,8 +83,17 @@ export async function downloadWithUrl(downUrl, fileName, self) {
 // 通过链接下载
 export default function downloadFile(downUrl, fileName, self, $event) {
   if (isWeChat()) {
+    // 加密下载链接
+    const data = {
+      downUrl: downUrl,
+      token: self.$store.getters.accessToken,
+      fileName: fileName,
+    }
+    const redirectUrl = `${
+      process.env.LOCALHOSE
+    }/download?state=${encodeURIComponent(encrypt(data))}`
     return handleClipboard(
-      downUrl,
+      redirectUrl,
       $event,
       '下载链接已复制到剪切板，请粘贴到浏览器中下载'
     )