个人中心-我的收藏、个人中心-我的上传后台对接

components/center/collect.vue

@@ -1,17 +1,30 @@
 <template>
+  <el-row type="flex" justify="center">
     <el-col :span="10">
       <el-table :data="tableData" border>
-        <el-table-column align="center" prop="title" :label="$t('center.collect.form.title')" />
+
-        <el-table-column align="center" prop="time" :label="$t('center.collect.form.time')" />
+        <el-table-column align="center" :label="$t('center.collect.form.title')">
+          <template slot-scope="scope" >
+            <el-tooltip :content="$t('reading_online')">
+              <a  @click="read(scope.row)">《{{scope.row.title}}》</a>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column align="center" :label="$t('center.collect.form.time')">
+          <template slot-scope="scope" >
+            {{$moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")}}
+          </template>
+        </el-table-column>
       </el-table>
 
       <div class="block center mt1">
         <el-pagination
           layout="prev, pager, next"
-          :total="1000">
+          :total="total">
         </el-pagination>
       </div>
     </el-col>
+  </el-row>
 </template>
 
 <script lang="ts">
@@ -23,11 +36,25 @@
     name: 'collect',
     data(){
       return {
-        tableData: [{
+        tableData: [],
-          title: '论文标题1',
+        total:0
-          time: this.$moment().format("YYYY-MM-DD")
+      }
-        }]
+    },
+    methods:{
+      read(item){
+        this.$read(item)
       }
+    },
+    mounted() {
+      let that=this
+      this.GLOBAL.fetchGet('/v1/api/collect',{},function(res) {
+        if(res.code==='200'){
+          that.tableData=res.data.data
+          that.total=res.data.total
+        }else{
+          that.$message.error(that.$t('error_500').toString())
+        }
+      })
     }
   })
 </script>

components/center/myupload.vue

@@ -1,18 +1,29 @@
 <template>
-  <el-col :span="10">
+  <el-row type="flex" justify="center">
-    <el-table :data="tableData" border>
+    <el-col :span="10">
-      <el-table-column align="center" prop="title" :label="$t('center.myupload.form.title')" />
+      <el-table :data="tableData" border>
-      <el-table-column align="center" prop="time" :label="$t('center.myupload.form.time')" />
+        <el-table-column align="center" :label="$t('center.myupload.form.title')">
-    </el-table>
+          <template slot-scope="scope" >
-
+            <el-tooltip :content="$t('reading_online')">
-    <div class="block center mt1">
+              <a  @click="read(scope.row)">《{{scope.row.title}}》</a>
-      <el-pagination
+            </el-tooltip>
-        layout="prev, pager, next"
+          </template>
-        :total="1000">
+        </el-table-column>
-      </el-pagination>
+        <el-table-column align="center" :label="$t('center.myupload.form.time')">
-    </div>
+          <template slot-scope="scope" >
-  </el-col>
+            {{$moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss")}}
+          </template>
+        </el-table-column>
+      </el-table>
 
+      <div class="block center mt1">
+        <el-pagination
+          layout="prev, pager, next"
+          :total="total">
+        </el-pagination>
+      </div>
+    </el-col>
+  </el-row>
 </template>
 
 <script lang="ts">
@@ -22,11 +33,32 @@
     name: 'myupload',
     data(){
       return {
-        tableData: [{
+        tableData: [],
-          title: '论文标题1',
+        total:0
-          time: this.$moment().format("YYYY-MM-DD")
+      }
-        }]
+    },
+    methods:{
+      read(item){
+        this.$read(item)
       }
+    },
+    mounted() {
+      let that=this
+      this.GLOBAL.fetchGet('/v1/api/paper/list',{
+        own:true
+      },function(res) {
+          if(res.code==='200'){
+              that.tableData=res.data.data
+              that.total=res.data.total
+          }else{
+            that.$message.error(that.$t('error_500').toString())
+          }
+      })
     }
   })
 </script>
+<style>
+  a {
+    cursor: pointer;
+  }
+</style>

nuxt.config.js

@@ -208,7 +208,13 @@ export default {
               "add_tip_fail": "笔记添加失败",
               "add_tip_ok": "笔记添加成功",
               "auto_save": "失去焦点自动保存",
+              "cancel_collect": "取消收藏",
+              "cancel_collect_fail": "取消收藏失败",
+              "cancel_collect_ok": "取消收藏成功",
               "click_note_list": "单击卡片定位笔记",
+              "collect": "收藏",
+              "collect_fail": "收藏失败",
+              "collect_ok": "收藏成功",
               "contextmenu_err": "请选中文本进行操作",
               "del_confirm": "确认删除此笔记？",
               "note_zero": "还没有任何笔记，尝试正文选中文本右击添加一个笔记吧！",
@@ -375,7 +381,13 @@ export default {
               "add_tip_fail": "",
               "add_tip_ok": "",
               "auto_save": "",
+              "cancel_collect": "",
+              "cancel_collect_fail": "",
+              "cancel_collect_ok": "",
               "click_note_list": "",
+              "collect": "",
+              "collect_fail": "",
+              "collect_ok": "",
               "contextmenu_err": "",
               "del_confirm": "",
               "note_zero": "",

pages/index/document.vue

@@ -128,24 +128,8 @@
       }
     },
     methods: {
-      read(item: any) {
+      read(item){
-        let loadingInstance =Loading.service({});
+        this.$read(item)
-        let that=this
-        this.GLOBAL.fetchGet("/v1/api/file/find",{
-          paperId:item.id,
-          fileId:item.fileId
-        },function(res) {
-            if(res.code==='200'){
-              item.content=res.msg
-              that.$store.commit('menus/read')
-              that.$store.commit('read/open', item)
-              that.$router.push(that.localePath('/read'))
-              loadingInstance.close()
-            }else{
-              that.$message.error(that.$t('error_500').toString())
-            }
-          loadingInstance.close()
-        })
       },
       query(){
         let that=this

pages/index/note.vue

@@ -95,7 +95,6 @@
             item.content=res.msg
             that.$store.commit('menus/read')
             that.$store.commit('read/open', item)
-            // that.$router.push({that.localePath('/read')})
             that.$router.push({
               path:that.localePath('/read'),
               query:row

pages/index/read.vue

@@ -31,7 +31,13 @@
       </v-contextmenu-item>
     </v-contextmenu>
     <el-tabs v-model="activeName" type="card" closable @tab-remove="removeTab">
-      <el-tab-pane :label="key" :name="key" v-for="(item,key) in openList" :key="key">
+      <el-tab-pane  :name="key" v-for="(item,key) in openList" :key="key">
+        <span slot="label">
+          {{item.title}}
+          <el-tooltip :content="item.hasCollect?$t('read.tip.cancel_collect'):$t('read.tip.collect')">
+            <i @click="star($event,item)" :class="'el-icon-star-'+(item.hasCollect?'on':'off')"></i>
+          </el-tooltip>
+          </span>
         <el-row>
           <el-col :span="18">
             <el-form :inline="true" v-if="showSearch">
@@ -226,6 +232,19 @@
     },
 
     methods: {
+      //收藏
+      star(e,item){
+        e.stopPropagation()
+        let that=this
+        this.GLOBAL.fetchJSON(`/v1/api/collect/${item.id}`,'POST',{},function(res) {
+          if(res.code==='200'){
+            that.$store.commit('read/updateCollect',item.title)
+            that.$message.info(that.$t(res.msg))
+          }else{
+            that.$message.error(that.$t(res.msg))
+          }
+        })
+      },
       //查找评价记录
       queryRating(){
         let that=this
@@ -720,5 +739,4 @@
     vertical-align: text-top;
   }
 
-
 </style>

plugins/global.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { Loading } from 'element-ui'
 
 Vue.prototype.GLOBAL ={
   //用户cookie
@@ -14,6 +15,7 @@ Vue.prototype.GLOBAL ={
     return !(r.top > z.bottom || r.bottom < z.top ||
         r.left > z.right || r.right < z.left);
   },
+  //发送json请求
   fetchJSON(url,method, form, success){
     fetch(this.server_address + url, {
       body:JSON.stringify(form),
@@ -26,6 +28,7 @@ Vue.prototype.GLOBAL ={
       console.error(err)
     })
   },
+  //发送get请求
   fetchGet(url,params,success){
     if (params) {
       let paramsArray = [];
@@ -43,6 +46,28 @@ Vue.prototype.GLOBAL ={
     }).then(res=>res.json()).then(res=>success(res)).catch(err=>{
       console.error(err)
     })
-  }
+  },
+
 
 }
+//阅读论文
+Vue.prototype.$read= function(item) {
+  let loadingInstance =Loading.service({});
+  let that=this
+  this.GLOBAL.fetchGet("/v1/api/file/find",{
+    paperId:item.id,
+    fileId:item.fileId
+  },function(res) {
+    if(res.code==='200'){
+      item.content=res.msg
+      that.$store.commit('menus/read')
+      that.$store.commit('read/open', item)
+      that.$router.push(that.localePath('/read'))
+      loadingInstance.close()
+    }else{
+      that.$message.error(that.$t('error_500').toString())
+    }
+    loadingInstance.close()
+  })
+}
+

store/read.js

@@ -41,5 +41,9 @@ export const mutations = {
   //更新正文
   updateContent(state,content){
     state.read[state.activeName].content=content
+  },
+  //更新收藏状态
+  updateCollect(state,key){
+    state.read[key].hasCollect=!state.read[key].hasCollect
   }
 }