长页联调

src/i18n/index.js

@@ -21,6 +21,7 @@ export const messages = {
       online: '线上',
       speaker: '主讲人',
       series: '演讲系列',
+      all: '全部',
     }
   },
   'en': {
@@ -44,7 +45,8 @@ export const messages = {
       address: 'Location',
       online: 'Online',
       speaker: 'Speaker',
-      series: 'Series'
+      series: 'Series',
+      all: 'All',
     }
   }
 };

src/layouts/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="['main', { channel: isChannel, 'site-en': handleClass() }]">
+  <div :class="['main', { channel: isHome, 'site-en': handleClass() }]">
     <v-head></v-head>
     <div class="layout">
       <transition name="move" mode="out-in">
@@ -20,7 +20,7 @@ import { mapMutations } from 'vuex'
 export default {
   data() {
     return {
-      isChannel: this.$route.path === '/home',
+      isHome: this.$route.path === '/home',
       enSite: [1, 4, 6] // 英文站点id
     };
   },
@@ -30,7 +30,7 @@ export default {
   },
   watch: {
     '$route'() {
-      this.isChannel = this.$route.path === '/home'
+      this.isHome = this.$route.path === '/home'
     }
   },
   mounted() {

src/layouts/navbar/index.vue

@@ -10,6 +10,7 @@
 import Setting from '@/setting'
 import menuTree from '@/components/menuTree'
 import mixins from '@/mixins/article'
+import { mapState, mapMutations } from 'vuex'
 export default {
   props: ['isHome'],
   mixins: [mixins],
@@ -30,6 +31,12 @@ export default {
   },
   watch: {
     '$route'() {
+      const { siteId } = this.$route.query
+      // siteId有变化，则重新获取栏目，并更改store
+      if (siteId && siteId != this.site) {
+        this.getColumn()
+        this.setSite(siteId)
+      }
       this.isHome = this.$route.path === '/home'
       this.handleColor()
     },
@@ -42,6 +49,9 @@ export default {
     this.getColumn()
   },
   methods: {
+    ...mapMutations('content', [
+      'setSite'
+    ]),
     // 资讯
     getColumn() {
       this.$post(this.api.listWithTreeMenuVisible, {

src/libs/util.js

@@ -167,7 +167,7 @@ const util = {
     removeTag(list, prop = 'mainBody') {
       list.map(e => {
         // 有摘要取摘要，没有摘要就去掉正文里的标签空格
-        e.mainBody = e.summary || e[prop].replace(/(<[^>]+>)|((&nbsp;)+)/g , '')
+        e.mainBody = e.summary || e[prop].replace(/(<p class="img-des">[^>]+<\/p>)|(<[^>]+>)|((&nbsp;)+)/g , '')
       })
       return list
     },

src/mixins/article/index.js

@@ -1,12 +1,17 @@
 import Setting from '@/setting'
 import Util from '@/libs/util'
+import { mapState } from 'vuex'
 export default {
   data() {
     return {
-      site: this.$store.state.content.site,
       id: +this.$route.query.id
     }
   },
+  computed: {
+    ...mapState('content', [
+      'site'
+    ])
+  },
   mounted() {
     
   },
@@ -40,12 +45,37 @@ export default {
         }
       } else if (typeId !== 4 || (typeId === 4 && !to.children.length)) {
         // 常规栏目跳转到column页，长页栏目直接获取path
-        this.$router.push(`/${typeId === 3 ? to.path : 'column'}?id=${to.id}`).catch(err => {})
+        this.$router.push(`/${typeId === 3 ? to.path : 'column'}?id=${to.id}&siteId=${this.$route.query.siteId || this.site}`).catch(err => {})
       }
     },
     // 跳转文章页面
     toArtice(item) {
-      this.$router.push(`/article?articleId=${item.id}&site=${this.$route.query.siteId || this.site}&id=${item.columnId}`)
+      if (item.articleTemplate === 24) { // 链接
+        let href = item.linkAddress
+        const cType = item.connectionType
+        if (cType !== 2) { // 非站外链接
+          const ids = href.split('-') // 栏目文章是用-分割的，栏目是必选，文章不是必选。选择了文章则跳转到文章页，否则跳转到栏目页
+          // 站点id：站内链接取当前站点，其他站点链接取siteSelection
+          const site = cType === 1 ?
+            (this.$route.query.siteId || this.site) :
+            item.siteSelection
+          if (ids[1]) { // 文章
+            href = '/article?articleId=' + ids[1]
+          } else { // 栏目
+            const columnIds = ids[0].split(',')
+            href = '/column?id=' + columnIds[columnIds.length - 1]
+          }
+          href = this.$router.resolve(href + '&siteId=' + site).href
+        }
+        // 是否新窗口打开
+        if (item.isOpen) {
+          window.open(href)
+        } else {
+          location.href = href
+        }
+      } else {
+        this.$router.push(`/article?articleId=${item.id}&site=${this.$route.query.siteId || this.site}&id=${item.columnId}`)
+      }
     }
   }
 };

src/mixins/page/index.js

@@ -69,7 +69,31 @@ export default {
     },
     // 跳转文章页面
     toArtice(item, form) {
-      this.$router.push(`/article?articleId=${item.id}&site=${this.$route.query.siteId || this.site}&id=${this.id}&columnName=${form.columnTitle === 2 ? form.columnTitleCustom : form.columnName}&path=${this.$route.path.replace('/', '')}`)
+      if (item.articleTemplate === 24) { // 链接
+        let href = item.linkAddress
+        const cType = item.connectionType
+        if (cType !== 2) { // 非站外链接
+          const ids = href.split('-') // 栏目文章是用-分割的，栏目是必选，文章不是必选。选择了文章则跳转到文章页，否则跳转到栏目页
+          // 站点id：站内链接取当前站点，其他站点链接取siteSelection
+          const site = cType === 1 ?
+            (this.$route.query.siteId || this.site) :
+            item.siteSelection
+          if (ids[1]) { // 文章
+            href = '/article?articleId=' + ids[1]
+          } else { // 栏目
+            const columnIds = ids[0].split(',')
+            href = '/column?id=' + columnIds[columnIds.length - 1]
+          }
+          href = this.$router.resolve(href + '&siteId=' + site).href
+        }
+        this.toHref(item.isOpen, href)
+      } else {
+        this.$router.push(`/article?articleId=${item.id}&siteId=${this.$route.query.siteId || this.site}&id=${this.id}&columnName=${form.columnTitle === 2 ? form.columnTitleCustom : form.columnName}&path=${this.$route.path.replace('/', '')}`)
+      }
+    },
+    // 关联栏目的查看全部跳转
+    toAll(form) {
+      this.$router.push(`/column?id=${form.column[form.column.length - 1]}&siteId=${form.site}`)
     }
   }
 };

src/pages/application/index.vue

@@ -67,6 +67,9 @@
             </div>
           </li>
         </ul>
+        <div class="all-link" @click="toAll(modules[7].form)">
+          <span>{{$t('column.all')}} <img class="icon" src="@/assets/images/arrow.png" alt=""></span>
+        </div>
       </div>
     </div>
   </div>
@@ -244,10 +247,11 @@ export default {
 .news {
   position: relative;
   display: flex;
+  justify-content: space-between;
   flex-wrap: wrap;
   li {
     display: inline-flex;
-    width: calc((100% - 56px) / 2);
+    width: calc((100% - 28px) / 2);
     padding: 34px;
     margin-bottom: 28px;
     background-color: #fff;
@@ -256,9 +260,6 @@ export default {
     &:hover {
       transform: scale(1.05);
     }
-    &:nth-child(odd) {
-      margin-right: 28px;
-    }
   }
   img {
     width: 237px;

src/pages/article/activity.vue

@@ -13,6 +13,15 @@
 
           <h6>{{$t('column.content')}}</h6>
           <div v-html="form.mainBody"></div>
+          <div v-if="form.fileList && form.fileList.length" class="annex">
+            <h6>{{$t('column.attachmentDownload')}}</h6>
+            <ul class="files">
+              <li v-for="(file, i) in form.fileList" :key="i">
+                <span class="name">{{ file.fileName }}</span>
+                <span class="download" @click="download(file)">{{$t('column.download')}}</span>
+              </li>
+            </ul>
+          </div>
         </div>
         <div class="right">
           <el-tree class="column" ref="column" :data="columns" highlight-current :expand-on-click-node="false" :props="defaultProps" node-key="id" @node-click="columnTo"></el-tree>
@@ -182,6 +191,32 @@ export default {
       max-width: 100%;
     }
   }
+  .annex {
+    margin-top: 30px;
+    h6 {
+      padding-left: 8px;
+      margin-bottom: 20px;
+      font-size: 16px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      line-height: 1;
+      color: #333;
+      border-left: 4px solid #1583FF;
+    }
+    li {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+    .name {
+      margin-right: 8px;
+      font-size: 14px;
+    }
+    .download {
+      color: #1583FF;
+      cursor: pointer;
+    }
+  }
   h6 {
     margin: 30px 0 10px;
     font-size: 18px;

src/pages/article/index.vue

@@ -217,9 +217,11 @@ export default {
       padding-left: 8px;
       margin-bottom: 20px;
       font-size: 16px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
       line-height: 1;
       color: #333;
-      border-left: 2px solid #1583FF;
+      border-left: 4px solid #1583FF;
     }
     li {
       display: flex;

src/pages/careers/index.vue

@@ -254,6 +254,7 @@ export default {
     }
     &:nth-child(3) {
       .left {
+        width: 43%;
         background-color: rgba(91, 58, 35, .65);
       }
     }

src/pages/column/index.vue

@@ -85,7 +85,7 @@
                       <div v-if="item.onlineLocation" class="meta"><img class="icon" src="@/assets/images/online.png" alt=""> {{ item.onlineLocation }}</div>
                     </template>
                   </div>
-                  <img class="pic" :src="item.titleImg" alt="">
+                  <img class="pic" :src="item.titleImg" alt="" onerror="javascript:this.src='./images/1.png';">
                 </li>
               </ul>
               <div v-if="articles.length" class="pagination">

src/pages/home/index.vue

@@ -47,6 +47,9 @@
             </div>
           </li>
         </ul>
+        <div class="all-link" @click="toAll(modules[5].form)">
+          <span>{{$t('column.all')}} <img class="icon" src="@/assets/images/arrow.png" alt=""></span>
+        </div>
       </div>
     </div>
     

src/pages/news/index.vue

@@ -20,7 +20,7 @@
     <div class="block">
       <div class="inner" v-if="modules[1].list[curColumn].articles.length">
         <div class="news-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[1].list[curColumn])">
-          <img width="50%" height="410" :src="curArticle.titleImg" alt="">
+          <img width="50%" height="410" :src="curArticle.titleImg" alt="" onerror="javascript:this.src='./images/3.png';">
           <div class="right">
             <h6>{{ curArticle.title }}</h6>
             <div class="des" v-html="curArticle.mainBody"></div>
@@ -53,13 +53,13 @@
         <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
         <div class="shop-shows" v-if="articles.length">
           <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles[0], modules[3].form)">
-            <img class="pic" width="100%" height="400" :src="articles[0].titleImg" alt="">
+            <img class="pic" width="100%" height="400" :src="articles[0].titleImg" alt="" onerror="javascript:this.src='./images/2.png';">
             <div class="texts">
               <h6>{{ articles[0].title }}</h6>
               <div class="des" v-html="articles[0].mainBody"></div>
             </div>
           </div>
-          <div class="right wow fadeInRight" data-wow-delay="0.5s">
+          <div v-if="articles.length > 1" class="right wow fadeInRight" data-wow-delay="0.5s">
             <ul class="show-card">
               <li v-if="articles[1]" @click="toArtice(articles[1], modules[3].form)">
                 <img class="pic" :src="articles[1].titleImg" alt="">
@@ -84,6 +84,9 @@
             </ul>
           </div>
         </div>
+        <div class="all-link m-t-10" @click="toAll(modules[3].form)">
+          <span>{{$t('column.all')}} <img class="icon" src="@/assets/images/arrow.png" alt=""></span>
+        </div>
       </div>
     </div>
 
@@ -93,7 +96,7 @@
         <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
         <div class="shows" v-if="articles1.length">
           <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles1[0], modules[5].form)">
-            <img width="100%" height="558" :src="articles1[0].titleImg" alt="">
+            <img width="100%" height="558" :src="articles1[0].titleImg" alt="" onerror="javascript:this.src='./images/1.png';">
             <div class="texts">
               <div class="meta">
                 <p class="date">09</p>
@@ -132,6 +135,9 @@
             </template>
           </ul>
         </div>
+        <div class="all-link m-t-10" @click="toAll(modules[5].form)">
+          <span style="color: #fff">{{$t('column.all')}} <img class="icon" src="@/assets/images/arrow.png" alt=""></span>
+        </div>
       </div>
     </div>
   </div>
@@ -418,6 +424,7 @@ export default {
     margin-right: 20px;
     background-color: #fff;
     cursor: pointer;
+    overflow: hidden;
     .pic {
       transition: .3s;
       &:hover {
@@ -440,12 +447,15 @@ export default {
   }
   .right {
     width: 824px;
+    overflow: hidden;
   }
   .show-card {
     display: flex;
     margin-bottom: 20px;
     li {
       position: relative;
+      height: 197px;
+      overflow: hidden;
       cursor: pointer;
       &:first-child {
         margin-right: 22px;

src/styles/page/page.scss

@@ -71,6 +71,20 @@
   transition: .3s;
   cursor: pointer;
 }
+.all-link {
+  text-align: right;
+  span {
+    display: inline-flex;
+    align-items: center;
+    font-size: 16px;
+    color: #707070;
+    cursor: pointer;
+  }
+  .icon {
+    width: 20px;
+    margin-left: 8px;
+  }
+}
 @media (max-width: 1410px) {
   .inner {
     width: 98%;