src/components/heads/menus.vue

@@ -17,7 +17,7 @@ export default {
   components: {},
   data () {
     return {
-      itemId: '0'
+      itemId: sessionStorage.getItem('itemId') || '0'
     }
   },
   methods: {
@@ -30,7 +30,7 @@ export default {
         return
       }
       if (e.type === 1) {
-        location.href(e.uri)
+        window.open(e.uri)
         return
       }
       if (e.type === 0) types = 'list'
@@ -44,7 +44,6 @@ export default {
   },
   mounted () {
     this.getmenu()
-    this.itemId = sessionStorage.getItem('itemId') || '0'
   },
   computed: {
     ...mapState(['items'])
@@ -52,6 +51,9 @@ export default {
   watch: {
     itemId (val) {
       sessionStorage.setItem('itemId', val)
+    },
+    $route (to, from) {
+      this.itemId = sessionStorage.getItem('itemId') || '0'
     }
   }
 }

src/components/sidebar/buttons.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="btnbox">
     <div class="btn" :class="index % 2 !== 0 ? 'btn2' : ''" v-for="(item, index) in list" :key="index">
-      <div class="box">
+      <div class="box" @click="btn(item)">
         <img :src="item.icons" alt="图标" class="icon">
         <div class="textbox">
           <span class="zhtext">{{ item.title }}</span>
@@ -23,41 +23,49 @@ export default {
           title: '在线投稿系统',
           en: 'Online submission',
           icons: require('../../assets/icons/icon1.png'),
-          uri: '',
+          uri: 'http://tg.jjzhzzs.cn/Journalx_jjzh/authorLogOn.action?mag_Id=1',
           path: ''
         },
         {
           title: '文稿处理系统',
           en: 'Document processing',
           icons: require('../../assets/icons/icon2.png'),
-          uri: '',
+          uri: 'http://tg.jjzhzzs.cn/Journalx_jjzh/editorLogOn.action?mag_Id=1',
           path: ''
         },
         {
           title: '投稿指南',
           en: 'Guidelines',
           icons: require('../../assets/icons/icon3.png'),
-          uri: '',
+          uri: 'http://tg.jjzhzzs.cn/Journalx_jjzh/basicinfo/viewHtmlFile.action?magId=1&id=8',
           path: ''
         },
         {
           title: '常见问题释疑',
           en: 'Asked Questions',
           icons: require('../../assets/icons/icon4.png'),
-          uri: '',
+          uri: 'http://www.magtech.com.cn/journalx_author_faq.html',
           path: ''
         },
         {
           title: '下载中心',
           en: 'Download center',
           icons: require('../../assets/icons/icon5.png'),
-          uri: '',
+          uri: 'http://jjzh.chinajournal.net.cn/WKB2/WebPublication/wkTextContent.aspx?colType=4&tp=gklb&mid=jjzh',
           path: ''
         }
       ]
     }
   },
-  methods: {},
+  methods: {
+    btn (e) {
+      if (e.uri) {
+        window.open(e.uri)
+        return false
+      }
+      this.$router.push(e.path)
+    }
+  },
   mounted () {}
 }
 </script>

src/router/index.js

@@ -35,12 +35,9 @@ const router = new VueRouter({
   routes
 })
 router.beforeEach((to, from, next) => {
-  // if (to.path === from.path) return
-  // // 此处判断登录状态  失效则退回登录页  清空登录状态
-  // const token = sessionStorage.getItem('token')
-  // if (!token && !/\/login$/.test(to.path)) {
-  //   next('/login')
-  // }
+  if (to.path !== '/') {
+    if (to.path === from.path) return
+  }
   next()
 })
 export default router

src/store/content.js

@@ -10,7 +10,6 @@ const state = {
 }
 const mutations = {
   content (state, payload) {
-    console.log(payload)
     state.items = payload.data
     state.total = payload.total
   },

src/views/Home.vue

@@ -4,16 +4,14 @@
     <!-- 关于我们 -->
     <div class="about w">
       <div class="leftbox">
-        <titles type="1" title="关于我们" en="About us"></titles>
+        <titles type="1" title="本刊介绍" en="About us"></titles>
         <cover class="cover"></cover>
         <div class="abouttext">
           <h4>本刊介绍：</h4>
           <p>
-            经济纵横》是吉林省社会科学院（社科联）主管、主办的经济学综合性学术期刊。创办于1985年，月刊，每期约20万字。
-          </p>
-          <p>
-            《经济纵横》被确定为国家社科基金资助期刊（经济学类）。同时，还是中文社会科学引文索引（CSSCI）来源期刊、全国中文核心期刊、中国人文社会科学核心期刊。近年来，多次被列入中国人民大学书报资料中心“复印报刊资料”重要转载来源期刊。2016年，被吉林省新闻出版广电局评为“吉林省一级期刊”“吉林省社科期刊30强”...
+            {{ pageitem && pageitem.shortTitle }}
           </p>
+          <p>{{ pageitem && pageitem.slug }}</p>
           <b>→</b>
         </div>
       </div>
@@ -24,9 +22,9 @@
       <titles type="9" title="本期要目" en="Directory" @jump="jumpList"></titles>
       <div class="contentList">
         <el-card class="imgbox" v-for="(item, index) in directorylist" :key="index">
-          <img :src="item.path" alt="人物">
-          <p class="text" @click="jump(item)">{{ item.text }}</p>
-          <p class="date">{{ item.date }}</p>
+          <img :src="item.thumbnail || imguri" alt="人物">
+          <p class="text" @click="jump(item, '9')">{{ item.title }}</p>
+          <p class="date">{{ item.createAt | dates }}</p>
         </el-card>
       </div>
     </div>
@@ -34,12 +32,12 @@
     <div class="news w">
       <titles type="2" title="最新动态" en="news" @jump="jumpList"></titles>
       <div class="contentList">
-        <div class="imngbox" v-for="(item, index) in newslist" :key="index" @click="jump(item)">
-          <img :src="item.path" alt="最新动态" class="left">
+        <div class="imngbox" v-for="(item, index) in newslist" :key="index" @click="jump(item, '2')">
+          <img :src="item.thumbnail || imguri" alt="最新动态" class="left">
           <div class="right">
             <p class="title">{{ item.title }}</p>
-            <p class="date">{{ item.date }}</p>
-            <p class="text">{{ item.text }}</p>
+            <p class="date">{{ item.createAt | dates }}</p>
+            <p class="text">{{ item.slug }}</p>
           </div>
         </div>
       </div>
@@ -57,12 +55,12 @@
         <div class="more" @click="jumpList('4')">更多>></div>
       </div>
       <div class="contentList">
-        <div class="circular" @click="jump(item)" :class="{ circular2: mous == index }" v-for="(item, index) in reviewlist" :key="index" @mouseover="mouseOver(index)" @mouseleave="mouseLeave(index)">
+        <div class="circular" @click="jump(item, '4')" :class="{ circular2: mous == index }" v-for="(item, index) in reviewlist" :key="index" @mouseover="mouseOver(index)" @mouseleave="mouseLeave(index)">
           <div class="txtbox">
             <p class="year" :class="{ year2: mous == index }">{{ item.year }}</p>
             <p class="date" :class="{ date2: mous == index }">{{ item.date }}</p>
             <p class="title" :class="{ title2: mous == index }">{{ item.title }}</p>
-            <p class="text" :class="{ text2: mous == index }">{{ item.text }}</p>
+            <p class="text" :class="{ text2: mous == index }">{{ item.slug }}</p>
             <p class="yes" :class="{ yes2: mous == index }">✔</p>
           </div>
         </div>
@@ -73,9 +71,9 @@
       <div class="left">
         <titles type="8" title="联系我们" en="Communication" @jump="jumpList"></titles>
         <div class="textlist">
-          <p class="textbox" @click="jump(item)" v-for="(item, index) in communicationlist" :key="index">
-            <span class="text">{{ item.text }}</span>
-            <span class="date">{{ item.date }}</span>
+          <p class="textbox" @click="jump(item, '8')" v-for="(item, index) in communicationlist" :key="index">
+            <span class="text">{{ item.title }}</span>
+            <span class="date">{{ item.createAt | dates }}</span>
           </p>
         </div>
       </div>
@@ -101,6 +99,11 @@ import banner from '../components/banner.vue'
 import bottons from '../components/sidebar/buttons.vue'
 import cover from '../components/sidebar/cover.vue'
 import titles from '../components/sidebar/title.vue'
+import moment from 'moment'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: pagemapState, mapActions: pagemapActions } = createNamespacedHelpers('page')
+const { mapState: columnmapState, mapActions: columnmapActions } = createNamespacedHelpers('column')
+const { mapState: contentnmapState, mapActions: contentmapActions } = createNamespacedHelpers('content')
 export default {
   components: {
     banner,
@@ -110,147 +113,18 @@ export default {
   },
   data () {
     return {
+      imguri: require('../assets/moren.png'),
       mous: -1,
-      communicationlist: [
-        {
-          text: '《经济纵横》在2019年度复印报刊资料转…',
-          date: '2020-12-13',
-          id: '1'
-        },
-        {
-          text: '《经济纵横》在2019年度复印报刊资料转…',
-          date: '2020-12-13',
-          id: '1'
-        },
-        {
-          text: '《经济纵横》在2019年度复印报刊资料转…',
-          date: '2020-12-13',
-          id: '1'
-        },
-        {
-          text: '《经济纵横》在2019年度复印报刊资料转…',
-          date: '2020-12-13',
-          id: '1'
-        },
-        {
-          text: '《经济纵横》在2019年度复印报刊资料转…',
-          date: '2020-12-13',
-          id: '1'
-        }
-      ],
-      directorylist: [
-        {
-          path: require('../assets/people/r1.png'),
-          text: '罗雄飞 关于《资本论》研究对象及相关',
-          date: '2021-03-10',
-          id: '1'
-        },
-        {
-          path: require('../assets/people/r2.png'),
-          text: '程恩富 40年中美农产品贸易：回顾与展',
-          date: '2021-03-10',
-          id: '1'
-        },
-        {
-          path: require('../assets/people/r4.png'),
-          text: '杨丹辉 百年未有之大变局下全球价值链',
-          date: '2021-03-10',
-          id: '1'
-        },
-        {
-          path: require('../assets/people/r4.png'),
-          text: '杨丹辉 百年未有之大变局下全球价值链',
-          date: '2021-03-10',
-          id: '1'
-        },
-        {
-          path: require('../assets/people/r5.png'),
-          text: '钟春平 高质量发展需要有创造性破坏思',
-          date: '2021-03-10',
-          id: '1'
-        },
-        {
-          path: require('../assets/people/r6.png'),
-          text: '张自然 空间聚集条件下政府效率的影响',
-          date: '2021-03-10',
-          id: '1'
-        },
-        {
-          path: require('../assets/people/r8.png'),
-          text: '于长革 “十四五”时期加强财政统筹的',
-          date: '2021-03-10',
-          id: '1'
-        },
-        {
-          path: require('../assets/people/r8.png'),
-          text: '于长革 “十四五”时期加强财政统筹的',
-          date: '2021-03-10',
-          id: '1'
-        }
-      ],
-      newslist: [
-        {
-          title: '第四届当代中国马克思主…',
-          path: require('../assets/people/new1.png'),
-          text: '“第四届当代中国马克思主义政治经济学创新与发展高端论坛暨《经济纵横》……',
-          date: '2021-03-10',
-          id: '1'
-        },
-        {
-          title: '《经济纵横》召开“社会主义…',
-          path: require('../assets/people/new2.png'),
-          text: '“第四届当代中国马克思主义政治经济学创新与发展高端论坛暨《经济纵横》……',
-          date: '2021-03-10',
-          id: '1'
-        },
-        {
-          title: '疫情防控 吉林在行动…',
-          path: require('../assets/people/new3.png'),
-          text: '第四届当代中国马克思主义政治经济学创新与发展高端论坛暨《经济纵横》……',
-          date: '2021-03-10',
-          id: '1'
-        },
-        {
-          title: '中央经济工作会议在北京举…',
-          path: require('../assets/people/new1.png'),
-          text: '“第四届当代中国马克思主义政治经济学创新与发展高端论坛暨《经济纵横》……',
-          date: '2021-03-10',
-          id: '1'
-        }
-      ],
-      reviewlist: [
-        {
-          title: '《经济纵横》2021年第03期目录',
-          date: '第03期',
-          text: '马克思主义政治经济学创新与发展关于《资本论》研究对象及相关问题的再认识',
-          year: '2021年',
-          id: '1'
-        },
-        {
-          title: '《经济纵横》2021年第03期目录',
-          date: '第02期',
-          text: '马克思主义政治经济学创新与发展关于《资本论》研究对象及相关问题的再认识',
-          year: '2021年',
-          id: '1'
-        },
-        {
-          title: '《经济纵横》2021年第03期目录',
-          date: '第12期',
-          text: '马克思主义政治经济学创新与发展关于《资本论》研究对象及相关问题的再认识',
-          year: '2021年',
-          id: '1'
-        },
-        {
-          title: '《经济纵横》2021年第03期目录',
-          date: '第01期',
-          text: '马克思主义政治经济学创新与发展关于《资本论》研究对象及相关问题的再认识',
-          year: '2021年',
-          id: '1'
-        }
-      ]
+      communicationlist: [],
+      directorylist: [],
+      newslist: [],
+      reviewlist: []
     }
   },
   methods: {
+    ...pagemapActions(['getdetails']),
+    ...columnmapActions(['getcolumn']),
+    ...contentmapActions(['getcontent']),
     // 移入事件
     mouseOver (e) {
       this.mous = e
@@ -259,16 +133,59 @@ export default {
     mouseLeave (e) {
       this.mous = -1
     },
-    jump (e) {
-      console.log(e)
-      this.$router.push(`/details/${e.id}`)
+    jump (e, num) {
+      sessionStorage.setItem('itemId', num)
+      this.$router.push(`/details/${e._id}`)
     },
     jumpList (e) {
       console.log(e)
       this.$router.push(`/list/${e}`)
     }
   },
-  mounted () {}
+  async mounted () {
+    await this.getdetails({ code: '1' })
+    const list = ['9', '2', '4', '8']
+    list.forEach(async e => {
+      const res = await this.getcolumn({ code: e })
+      if (res.data.errcode === 0) {
+        let num
+        if (e === '9') num = 8
+        if (e === '2') num = 6
+        if (e === '4') num = 4
+        if (e === '8') num = 5
+        const contentList = await this.getcontent({ code: this.columnitems[0].code, skip: 0, limit: num })
+        switch (e) {
+          case '9':
+            this.directorylist = contentList.data.data
+            break
+
+          case '2':
+            this.newslist = contentList.data.data
+            break
+
+          case '4':
+            this.reviewlist = contentList.data.data
+            break
+
+          case '8':
+            this.communicationlist = contentList.data.data
+            break
+          default:
+            break
+        }
+      }
+    })
+  },
+  computed: {
+    ...pagemapState(['pageitem']),
+    ...columnmapState({ columnitems: 'items' }),
+    ...contentnmapState({ contentitems: 'items', contenttotal: 'total' })
+  },
+  filters: {
+    dates (e) {
+      return moment(Number(e)).format('YYYY-MM-DD')
+    }
+  }
 }
 </script>
 <style lang="less" scoped>
@@ -312,6 +229,7 @@ export default {
     .imgbox {
       width: 23%;
       margin: 1%;
+      height: 20vw;
       /deep/ .el-card__body {
         height: 100%;
         img {
@@ -324,6 +242,12 @@ export default {
         }
         .text {
           cursor: pointer;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }
@@ -337,17 +261,28 @@ export default {
     flex-wrap: wrap;
     .imngbox {
       width: 50%;
-      height: 15vh;
+      height: 17vh;
       display: flex;
-      margin: 1% 0;
+      margin: 2% 0;
       .left {
         width: 25%;
         margin-right: 5%;
       }
       .right {
         width: 70%;
+        .title {
+          font-weight: 700;
+          color: #000;
+          cursor: pointer;
+        }
         p {
           color: #696969;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          word-break: break-all;
         }
       }
     }
@@ -355,7 +290,7 @@ export default {
 }
 /* 往期回顾 */
 .review {
-  margin-top: 15vh;
+  margin-top: 10vh;
   .titlebox {
     width: 100%;
     display: flex;
@@ -398,7 +333,7 @@ export default {
     display: flex;
     .circular {
       width: 20%;
-      height: 80%;
+      height: 16vw;
       margin: 5% 2.5%;
       border-radius: 38%;
       background: #f0f0f0;
@@ -480,6 +415,7 @@ export default {
 // 联系我们
 .communication {
   display: flex;
+  margin-top: 5%;
   .left {
     width: 50%;
     margin-left: 5%;
@@ -494,6 +430,12 @@ export default {
           width: 70%;
           display: block;
           cursor: pointer;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          word-break: break-all;
         }
         .date {
           display: block;

src/views/list.vue

@@ -5,7 +5,7 @@
       <breadcrumb :type="'列表'" :item="item" :en="en"></breadcrumb>
       <el-button class="btn">{{ item }}</el-button>
       <el-card class="box-card" v-for="(item, index) in contentitems" :key="index">
-        <img :src="item.uri || imguri" alt="缩略图" class="imgs">
+        <img :src="item.thumbnail || imguri" alt="缩略图" class="imgs">
         <div class="item">
           <h4 class="title" @click="btn(item)">{{ item.title }}</h4>
           <div class="details">{{ item.slug }}</div>
@@ -114,7 +114,9 @@ export default {
 .box-card {
   width: 70%;
   margin: 2% 15%;
+  height: 22vh;
   /deep/ .el-card__body {
+    height: 100%;
     display: flex;
     .imgs {
       width: 15%;
@@ -125,6 +127,12 @@ export default {
       .details {
         color: #999999;
         font-size: 0.8em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        word-break: break-all;
       }
       .title {
         cursor: pointer;