feat: inital add page of share-view

src/components/Business/UploadBox/UploadBox.vue

@@ -2,14 +2,6 @@
   <div class="upload-box-out">
     <upload-drag-box @file="transmitFiles">
       <slot></slot>
-      <transition name="float-fade">
-        <header class="tip" v-if="!fileList.length">
-          请从本地上传文件 或
-          <router-link :to="{name: 'library'}">
-            <span class="to-library">从校园文库添加文件</span>
-          </router-link>
-        </header>
-      </transition>
       <el-upload class="upload" ref="uploader" multiple
                  :action="action"
                  :data="payload"
@@ -26,7 +18,10 @@
           <br>
           <span class="upload-text">点击按钮或者把文件拖放到这里</span>
         </div>
-        <footer class="el-upload__tip" slot="tip">已支持的格式：{{supportFormat.join(',')}}</footer>
+        <footer class="el-upload__tip" slot="tip">
+          <p>已支持的格式：{{supportFormat.join(',')}}</p>
+          <p>请勿上传包含侵权、色情、暴恐、反动等违法内容的文档</p>
+        </footer>
       </el-upload>
     </upload-drag-box>
   </div>

src/components/Business/UploadBox/upload-box.styl

@@ -1,13 +1,7 @@
 @import "~@/style/import"
 .upload-box-out
-  position: relative
   text-align: center
 
-.to-library
-  color: theme-green-dark
-  &:hover
-    color: darken(theme-green, 15%)
-
 .upload-btn
   margin: 20px auto
   border-radius: 5px

src/pages/Library/Library.vue

@@ -7,7 +7,8 @@
           <nav>
             <el-button class="nav-button" @click="viewPerson"
                        type="text" icon="fa-bookmark-o">我的收藏</el-button>
-            <el-button class="nav-button" type="text" icon="fa-cloud-upload">分享中心</el-button>
+            <el-button class="nav-button" @click="viewShare"
+                       type="text" icon="fa-cloud-upload">分享中心</el-button>
           </nav>
         </div>
       </box-card>
@@ -130,6 +131,12 @@
         }
         let uid = this.user.uid
         this.$router.push({ name: 'person-view', params: { uid } })
+      },
+      async viewShare () {
+        if (!this.user) {
+          await this[POPUP_LOGIN]()
+        }
+        this.$router.push({ name: 'share-view' })
       }
     }
   }

src/pages/Library/ShareView/ShareView.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="library">
+    <header>
+      <div class="back" @click="back">
+        <i class="el-icon-fa-angle-left"></i><span>返回</span>
+      </div>
+      <div class="title">
+        <i class="el-icon-fa-cloud-upload"></i>
+        <span>分享中心</span>
+      </div>
+    </header>
+    <box-card class="file-list" title="上传并分享" noPadding>
+      <upload-box v-show="!fileList.length" ref="uploader"
+                  :fileList="fileList"
+                  :updateFiles="commitFiles">
+      </upload-box>
+      <div class="file-item" v-for="(file, index) in fileList"
+           :key="`${file.name}_${index}`">
+        <div class="file-info">
+          <figure class="file">
+            <img :src="fileIcon[file.raw.extension]" alt="format"/>
+            <figcaption class="description">
+              <div class="name">原始名：{{file.name}}</div>
+              <div class="attribute">上传成功，共{{file.pageInfo && file.pageInfo.pageCount}}页</div>
+            </figcaption>
+          </figure>
+          <div class="share-name">
+            <span class="input-tip">分享名称</span>
+            <el-input class="input" v-model="file.share.rename"></el-input>
+          </div>
+          <footer class="footer">
+            <el-button class="footer-button" type="primary" @click="shareFile(file)">分 享</el-button>
+            <el-button class="footer-button" @click="deleteFile(file)">删 除</el-button>
+          </footer>
+        </div>
+        <div class="file-tags">
+          <span class="tag-tip">请指定文档所属的 学校科目 或 专题</span>
+          <div>
+            <span class="input-tip">学校学院</span>
+            <el-input class="input" v-model="file.share.institute"></el-input>
+          </div>
+          <div>
+            <span class="input-tip">适用年级</span>
+            <el-input class="input" v-model="file.share.semester"></el-input>
+          </div>
+          <div>
+            <span class="input-tip">专业科目</span>
+            <el-input class="input" v-model="file.share.major"></el-input>
+          </div>
+          <div>
+            <span class="input-tip">指定专题</span>
+            <el-input class="input" v-model="file.share.subject"></el-input>
+          </div>
+        </div>
+      </div>
+    </box-card>
+    <box-card class="documents" title="分享记录">
+      <el-menu :default-active="docsType" class="selector-tabs" mode="horizontal" @select="changeDocsType">
+        <el-menu-item index="ratified" class="selector-item">已审核 (0)</el-menu-item>
+        <el-menu-item index="to-ratify" class="selector-item">待审核 (0)</el-menu-item>
+      </el-menu>
+      <div class="empty-tip">暂时没有文档记录</div>
+    </box-card>
+  </div>
+</template>
+
+<script>
+  import { mapState, mapMutations } from 'vuex'
+  import { icons } from '@/assets/img/print'
+  import * as types from '@/store/mutation-types'
+  import boxCard from '$@/Stateless/BoxCard/index'
+  import uploadBox from '$@/Business/UploadBox'
+
+  export default {
+    name: 'share-view',
+    components: { boxCard, uploadBox },
+    props: {},
+    data () {
+      return {
+        docsType: 'ratified',
+        fileIcon: icons,
+      }
+    },
+    computed: {
+      ...mapState('share', ['fileList']),
+    },
+    watch: {},
+    mounted () {},
+    methods: {
+      ...mapMutations('share', {
+        commitFiles: types.UPDATE_FILES
+      }),
+      back () {
+        this.$router.back()
+      },
+      async changeDocsType (type) {
+        console.log('docs type', type)
+      },
+      shareFile (file) {
+        console.log(file.raw.md5)
+        console.log(file.share)
+        this.deleteFile(file)
+      },
+      deleteFile (file) {
+        this.$refs.uploader.transmitRemove(file)
+      }
+    }
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+  @import "./share-view"
+</style>

src/pages/Library/ShareView/index.js

@@ -0,0 +1 @@
+export { default } from './ShareView'

src/pages/Library/ShareView/share-view.styl

@@ -0,0 +1,136 @@
+@import "~@/style/import"
+
+.library
+  margin: 10px auto 20px
+  width: 1080px
+  height: 100%
+  header
+    display: flex
+    align-items: center
+    justify-content: flex-start
+    margin: 0 auto 10px
+    border-radius: 4px
+    padding: 8px
+    width: 1080px
+    height: 56px
+    font-size: 16px
+    background-color: #fff
+    box-shadow: 0 0 4px 1px #ddd
+    .back
+      display: inline-block
+      border-radius: 6px 0 0 6px
+      border-right: solid 1px #bbb
+      padding: 8px
+      width: 80px
+      text-align: center
+      vertical-align: middle
+      color: gray-text
+      transition: border .2s ease, background-color .2s ease
+      i
+        font-size: 20px
+        vertical-align: middle
+        color: #bbb
+      span
+        margin-left: 4px
+        vertical-align: middle
+      &:hover
+        cursor: pointer
+        border-color: #eee
+        background-color: #eee
+
+.title
+  display: inline-block
+  margin-left: 12px
+  vertical-align: middle
+  i
+    border-radius: 50%
+    padding: 0 6px
+    width: 32px
+    line-height: 32px
+    font-size: 18px
+    color: #fff
+    vertical-align: middle
+    background-color: blue-dark
+  span
+    display: inline-block
+    margin-left: 4px
+    font-size: 18px
+    color: deep-black
+    vertical-align: middle
+
+.documents
+  selector-tabs()
+  .selector-tabs
+    margin: 6px auto 20px
+  .empty-tip
+    padding: 40px 0
+    font-size: 24px
+    text-align: center
+    color: shallow-text-gray
+
+
+.file-list .file-item
+  padding: 10px 20px
+  .file-info, .file-tags
+    display: inline-block
+    vertical-align: top
+  .file-info
+    margin: 10px 0 0 15px
+    width: 460px
+    .file
+      img
+        max-width: 72px
+        vertical-align: middle
+      .description
+        display: inline-block
+        margin-left: 10px
+        vertical-align: middle
+        .name
+          overflow: hidden
+          max-width: 360px
+          font-size: 15px
+          white-space: nowrap
+          text-overflow: ellipsis
+          color: deep-black
+        .attribute
+          margin-top: 20px
+          font-size: 14px
+          color: shallow-text-gray
+    .share-name
+      margin: 15px 0 0 10px
+  .file-tags
+    margin: 4px 0 0 20px
+    .tag-tip
+      color: blue-dark
+      display: block
+      margin-bottom: 6px
+      font-size: 14px
+    & > div
+      margin-bottom: 6px
+  .input-tip
+    display: inline-block
+    border-left: 3px solid blue-dark
+    padding-left: 8px
+    width: 80px
+    line-height: 28px
+    font-size: 16px
+    color: blue-dark
+  .input
+    display: inline-block
+    width: 320px
+
+  .footer
+    display: flex
+    align-items: center
+    justify-content: center
+    margin: 0
+    width: 100%
+    height: 60px
+    text-align: center
+    .footer-button
+      margin: 0 20px
+      padding: 0
+      width: 120px
+      height: 32px
+      transition: all .2s ease-out
+

src/pages/Print/Print.vue

@@ -13,6 +13,16 @@
         </shop-point-list>
       </box-card>
       <box-card :title="`文件列表 (${fileList.length})`" :noPadding="true">
+        <span class="file-tips">
+          <transition name="float-fade">
+            <header v-if="!fileList.length">
+              请从本地上传文件 或
+              <router-link :to="{name: 'library'}">
+                <span class="to-library">从校园文库添加文件</span>
+              </router-link>
+            </header>
+          </transition>
+        </span>
         <upload-box ref="uploader"
                     :fileList="fileList"
                     :updateFiles="commitFiles">

src/pages/Print/print.styl

@@ -12,7 +12,7 @@
 .tip
   margin-right: 20px
   font-size: 14px
-  color: #0e90d2
+  color: blue-text
 
 .account-tips
   padding: 50px 0
@@ -21,3 +21,12 @@
   text-align: center
   color: #999
 
+.file-tips
+  position: relative
+  top: 20px
+  header
+    text-align: center
+  .to-library
+    color: theme-green-dark
+    &:hover
+      color: darken(theme-green, 15%)

src/router/index.js

@@ -7,6 +7,7 @@ const library = () => import('@/pages/Library')
 const fileView = () => import('@/pages/Library/FileView')
 const folderView = () => import('@/pages/Library/FolderView')
 const personView = () => import('@/pages/Library/PersonView')
+const shareView = () => import('@/pages/Library/ShareView')
 const user = () => import('@/pages/User')
 import order from '$@/Business/ManageBoard/Order'
 import Personal from '$@/Business/ManageBoard/Personal'
@@ -49,6 +50,12 @@ const routes = [
     component: personView,
     name: 'person-view'
   },
+  {
+    path: '/library/share',
+    component: shareView,
+    name: 'share-view',
+    meta: { access: ['user', 'vendor', 'manager'] },
+  },
   {
     path: '/user',
     redirect: '/user/order',

src/store/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import user from './modules/user'
 import print from './modules/print'
+import share from './modules/share'
 
 Vue.use(Vuex)
 
@@ -15,7 +16,8 @@ const store = new Vuex.Store({
   mutations,
   modules: {
     user,
-    print
+    print,
+    share
   }
 })