From 7d1bf9814e274f5abae7413da0f75a2ca32c817c Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Mon, 7 Nov 2022 11:46:29 +0800
Subject: [PATCH] =?UTF-8?q?edu=E3=80=81news?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/edu/index.vue   |  75 +++++------
 src/pages/home/index.vue  |   4 +-
 src/pages/news/index.vue  | 268 +++++++++++++++++++++-----------------
 src/styles/page/page.scss |   7 +
 4 files changed, 196 insertions(+), 158 deletions(-)

diff --git a/src/pages/edu/index.vue b/src/pages/edu/index.vue
index 2aadca4..2ea1cc5 100644
--- a/src/pages/edu/index.vue
+++ b/src/pages/edu/index.vue
@@ -1,20 +1,29 @@
 <template>
   <div class="wrap">
-    <img width="100%" height="480" src="@/assets/images/edu/1.png" alt="">
+    <el-carousel height="480px" :interval="6000">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div class="banner-item" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <p class="banner-name">NEWS & EVENTS</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
 
     <div class="block gray">
       <div class="inner">
-        <h2 class="b-title">Partnership</h2>
-        <p class="intro">Together, Stronger</p>
-        <img width="100%" height="536" src="@/assets/images/edu/2.png" alt="">
+        <h2 class="b-title">{{ modules[1].form.title }}</h2>
+        <p class="intro">{{ modules[1].form.des }}</p>
+        <img :class="{'cursor-pointer': modules[1].form.link}" width="100%" height="536" :src="modules[1].form.pic" alt="" @click="openLink(modules[1].form)">
       </div>
     </div>
     
     <div class="block">
       <div class="inner">
-        <h2 class="b-title">Programs</h2>
-        <p class="intro">Our campus is Shenzhen and Beyound</p>
-        <img width="100%" height="536" src="@/assets/images/edu/2.png" alt="">
+        <h2 class="b-title">{{ modules[2].form.title }}</h2>
+        <p class="intro">{{ modules[2].form.des }}</p>
+        <img :class="{'cursor-pointer': modules[2].form.link}" width="100%" height="536" :src="modules[2].form.pic" alt="" @click="openLink(modules[2].form)">
       </div>
     </div>
     
@@ -23,28 +32,12 @@
         <h2 class="b-title">Engagement</h2>
         <p class="intro">Serving Community</p>
         <ul class="list">
-          <li>
-            <img class="pic" src="@/assets/images/edu/3.png" alt="">
+          <li v-for="(item, i) in modules[3].list" :key="i">
+            <img class="pic" :src="item.pic" alt="" @click="openLink(item)">
             <div class="texts">
-              <h6>community service</h6>
-              <p class="sub">IASF is driven to serve the Science and industry, and solve grand challenges. </p>
-              <div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area …</div>
-            </div>
-          </li>
-          <li>
-            <img class="pic" src="@/assets/images/edu/4.png" alt="">
-            <div class="texts">
-              <h6>community service</h6>
-              <p class="sub">IASF is driven to serve the Science and industry, and solve grand challenges. </p>
-              <div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area …</div>
-            </div>
-          </li>
-          <li>
-            <img class="pic" src="@/assets/images/edu/5.png" alt="">
-            <div class="texts">
-              <h6>community service</h6>
-              <p class="sub">IASF is driven to serve the Science and industry, and solve grand challenges. </p>
-              <div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area …</div>
+              <h6>{{ item.title }}</h6>
+              <p class="sub">{{ item.subTitle }}</p>
+              <div class="des">{{ item.des }}</div>
             </div>
           </li>
         </ul>
@@ -54,20 +47,14 @@
 </template>
 
 <script>
+import mixins from '@/mixins/page'
 import Setting from '@/setting'
 import Util from '@/libs/util'
 export default {
+  mixins: [mixins],
   data() {
     return {
-      id: this.$route.query.id,
-      columnId: '',
-      form: {},
-    }
-  },
-  watch: {
-    '$route'() {
-      this.id = this.$route.query.id
-      // this.getInfo()
+      
     }
   },
   mounted() {
@@ -76,9 +63,16 @@ export default {
   methods: {
     // 获取文章详情
     getInfo() {
-      this.$post(`${this.api.findArticle}?id=${this.id}`).then(({ data }) => {
-        this.form = data
-        this.columnId = data.columnId
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[0][data[0].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+        }
       }).catch(err => {})
     },
   }
@@ -100,6 +94,7 @@ export default {
   .pic {
     width: 650px;
     height: 730px;
+    cursor: pointer;
   }
   .texts {
     position: absolute;
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 3f10e13..474f783 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -135,14 +135,14 @@ export default {
             data :
             data[0][data[0].state ? 'theEditedJson' : 'jsonBeforeEditing'])
           this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", this.modules)
 
           // 获取文章列表
           const { column, site, articleNum } = json[5].form
-          console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", this.modules)
           if (column.length) {
             this.$post(this.api.queryArticle, {
               siteId: site,
-              columnIds: column,
+              columnIds: [column[column.length - 1]],
               pageNum: 1,
               pageSize: articleNum || 6
             }).then(({ data }) => {
diff --git a/src/pages/news/index.vue b/src/pages/news/index.vue
index a192204..e34ecbc 100644
--- a/src/pages/news/index.vue
+++ b/src/pages/news/index.vue
@@ -1,48 +1,43 @@
 <template>
   <div class="wrap">
-    <img width="100%" height="480" src="@/assets/images/news/1.png" alt="">
+    <el-carousel height="480px" :interval="6000">
+      <template v-for="(item, i) in modules[0].list">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div class="banner-item" @click="openLink(item)">
+            <img :src="item.pic" alt="">
+            <p class="banner-name">NEWS & EVENTS</p>
+          </div>
+        </el-carousel-item>
+      </template>
+    </el-carousel>
 
     <ul class="tabs">
-      <li :class="{active: item.id == active}" v-for="(item, i) in tabs" :key="i" @click="tabChange(item)">{{ item.name }}</li>
+      <template v-for="(item, i) in modules[1].list">
+        <li v-if="item.columnName" :class="{active: i == curColumn}" :key="i" @click="tabChange(i)">{{ item.columnName }}</li>
+      </template>
     </ul>
 
     <div class="block">
       <div class="inner">
-        <h2 class="b-title">Seminars & Workshops</h2>
-        <p class="intro">What makes a ligh chinese bay chaser</p>
         <div class="banner">
-          <img width="100%" height="480" src="@/assets/images/about/5.png" alt="">
+          <img width="50%" height="480" :src="modules[1].list[this.curColumn].articles[0].titleImg" alt="">
           <div class="right">
-            <h6>IASF is driven to serve the Science and industry, and solve grand challenges through research and innovation. We are open and creative</h6>
-            <div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan. And the Guangdong-Hong Kong-Macao Greater Bay </div>
-            <p class="meta">2022-07-24 | Research</p>
+            <h6>{{ modules[1].list[this.curColumn].articles[0].title }}</h6>
+            <div class="des" v-html="modules[1].list[this.curColumn].articles[0].mainBody"></div>
+            <p class="meta">{{ modules[1].list[this.curColumn].articles[0].createTime }} {{ modules[1].list[this.curColumn].articles[0].author && ' | ' + modules[1].list[this.curColumn].articles[0].author }}</p>
           </div>
         </div>
         <ul class="card">
-          <li>
-            <img class="pic" src="@/assets/images/about/9.png" alt="">
-            <div class="texts">
-              <p class="meta">2022-09-09 | Research</p>
-              <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
-              <img class="arrow" src="@/assets/images/arrow.png" alt="">
-            </div>
-          </li>
-          <li>
-            <img class="pic" src="@/assets/images/about/10.png" alt="">
-            <div class="texts">
-              <p class="meta">2022-09-09 | Research</p>
-              <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
-              <img class="arrow" src="@/assets/images/arrow.png" alt="">
-            </div>
-          </li>
-          <li>
-            <img class="pic" src="@/assets/images/about/11.png" alt="">
-            <div class="texts">
-              <p class="meta">2022-09-09 | Research</p>
-              <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
-              <img class="arrow" src="@/assets/images/arrow.png" alt="">
-            </div>
-          </li>
+          <template v-for="(item, i) in modules[1].list[this.curColumn].articles">
+            <li v-if="i" :key="i">
+              <img class="pic" :src="item.titleImg" alt="">
+              <div class="texts">
+                <p class="meta">{{ item.createTime }} {{ item.author && ' | ' + item.author }}</p>
+                <div class="des">{{ item.title }}</div>
+                <img class="arrow" src="@/assets/images/arrow.png" alt="">
+              </div>
+            </li>
+          </template>
         </ul>
         <div class="more">More news ></div>
       </div>
@@ -50,49 +45,38 @@
 
     <div class="block gray">
       <div class="inner lg">
-        <h2 class="b-title">Seminars & Workshops</h2>
-        <p class="intro">What makes a ligh chinese bay chaser</p>
-        <div class="shop-shows">
+        <h2 class="b-title">{{ modules[2].form.title }}</h2>
+        <p class="intro">{{ modules[2].form.des }}</p>
+        <div class="shop-shows" v-if="articles">
           <div class="left">
-            <img width="100%" height="400" src="@/assets/images/about/5.png" alt="">
+            <img width="100%" height="400" :src="articles[0].titleImg" alt="">
             <div class="texts">
-              <h6>2022 New Year Messag President Sun Dongbai….</h6>
-              <div class="des">2021 is another challenging year for the Institute of Advanced Science Facilities, Shenzhen (IASF)…</div>
+              <h6>{{ articles[0].title }}</h6>
+              <div class="des" v-html="articles[0].mainBody"></div>
             </div>
           </div>
           <div class="right">
             <ul class="show-card">
-              <li>
-                <img class="pic" src="@/assets/images/about/9.png" alt="">
-                <div class="des">Comprises the installation and nanostructuri</div>
+              <li v-if="articles[1]">
+                <img class="pic" :src="articles[1].titleImg" alt="">
+                <div class="des">{{ articles[1].title }}</div>
               </li>
-              <li>
-                <img class="pic" src="@/assets/images/about/10.png" alt="">
-                <div class="des">Prof. Stephan V. Roth's research</div>
+              <li v-if="articles[2]">
+                <img class="pic" :src="articles[2].titleImg" alt="">
+                <div class="des">{{ articles[2].title }}</div>
               </li>
             </ul>
             <ul class="card-list">
-              <li>
-                <img class="pic" src="@/assets/images/about/9.png" alt="">
-                <div class="texts">
-                  <h6>Hold doctorates or the highest degree in their field</h6>
-                  <div class="des">Characterization in Fibre and Polymer Technology, KTH Royal Institute of Technology.Characteriza Royal Institute of technology.…</div>
-                </div>
-              </li>
-              <li>
-                <img class="pic" src="@/assets/images/about/10.png" alt="">
-                <div class="texts">
-                  <h6>This 2019 image depicted a Centers for Disease</h6>
-                  <div class="des">laboratory technician, dressed in personal protective equipment (PPE), in thelaboratory technician, dressed in personal in the…</div>
-                </div>
-              </li>
-              <li>
-                <img class="pic" src="@/assets/images/about/11.png" alt="">
-                <div class="texts">
-                  <h6>Browse premium related images on iStock</h6>
-                  <div class="des">which would undergo analysis, here, in this laboratory environment.which would undergo analysis, here, in this laboratory environment.…</div>
-                </div>
-              </li>
+              <template v-for="(item, i) in articles">
+                <li v-if="i > 2" :key="i">
+                  <img class="pic" :src="item.titleImg" alt="">
+                  <div class="texts">
+                    <h6>{{ item.title }}</h6>
+                    <div class="des" v-html="item.mainBody"></div>
+                  </div>
+                  <img class="arrow" src="@/assets/images/arrow.png" alt="">
+                </li>
+              </template>
             </ul>
           </div>
         </div>
@@ -101,41 +85,43 @@
 
     <div class="block conference">
       <div class="inner lg">
-        <h2 class="b-title">Conference</h2>
-        <p class="intro">What makes a ligh chinese bay chaser</p>
-        <div class="shows">
+        <h2 class="b-title">{{ modules[4].form.title }}</h2>
+        <p class="intro">{{ modules[4].form.des }}</p>
+        <div class="shows" v-if="articles1.length">
           <div class="left">
-            <img width="100%" height="558" src="@/assets/images/about/5.png" alt="">
+            <img width="100%" height="558" :src="articles1[0].titleImg" alt="">
             <div class="texts">
               <div class="meta">
                 <p class="date">09</p>
                 <p class="year">2022-03</p>
               </div>
               <div>
-                <h6>Browse premium related images on iStock</h6>
-                <div class="des">which would undergo analysis, here, in this laboratory environment.which would undergo analysis, here, in this laboratory environment.…</div>
+                <h6>{{ articles1[0].title }}</h6>
+                <div class="des" v-html="articles1[0].mainBody"></div>
               </div>
             </div>
           </div>
           <ul class="card-list">
-            <li>
-              <img class="pic" src="@/assets/images/about/9.png" alt="">
-              <div class="texts">
-                <h6>Professional technical Free electron laser device</h6>
-                <p class="text">
-                  <img class="icon" src="@/assets/images/address.png" alt="">
-                  Jiahang Shao
-                </p>
-                <p class="text">
-                  <img class="icon" src="@/assets/images/address.png" alt="">
-                  Time: 2022.8.13  14:30
-                </p>
-                <p class="text">
-                  <img class="icon" src="@/assets/images/address.png" alt="">
-                  Address: Big conference room on the fourth floor of headquarters
-                </p>
-              </div>
-            </li>
+            <template v-for="(item, i) in articles1">
+              <li v-if="i" :key="i">
+                <img class="pic" :src="item.titleImg" alt="">
+                <div class="texts">
+                  <h6>{{ item.title }}</h6>
+                  <p class="text">
+                    <img class="icon" src="@/assets/images/address.png" alt="">
+                    Jiahang Shao
+                  </p>
+                  <p class="text">
+                    <img class="icon" src="@/assets/images/address.png" alt="">
+                    Time: 2022.8.13  14:30
+                  </p>
+                  <p class="text">
+                    <img class="icon" src="@/assets/images/address.png" alt="">
+                    Address: Big conference room on the fourth floor of headquarters
+                  </p>
+                </div>
+              </li>
+            </template>
           </ul>
         </div>
       </div>
@@ -144,42 +130,83 @@
 </template>
 
 <script>
+import mixins from '@/mixins/page'
 import Setting from '@/setting'
 import Util from '@/libs/util'
 export default {
+  mixins: [mixins],
   data() {
     return {
-      id: this.$route.query.id,
-      active: 1,
-      tabs: [
-        {
-          id: 1,
-          name: 'General news'
-        },
-        {
-          id: 2,
-          name: 'Research news'
-        },
-        {
-          id: 3,
-          name: 'Journal covers'
-        },
-      ]
-    }
-  },
-  watch: {
-    '$route'() {
-      this.id = this.$route.query.id
-      // this.getInfo()
+      curColumn: 0,
+      articles: [],
+      articles1: []
     }
   },
   mounted() {
     
   },
   methods: {
+    // 获取文章详情
+    getInfo() {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[0][data[0].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+          console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", json)
+
+          // 获取文章列表
+          const { list } = json[1]
+          if (list.length) {
+            list.map(e => {
+              if (e.site) {
+                const id = e.column[e.column.length - 1]
+                e.id = id
+                if (e.columnTitle === 2) e.columnName = e.columnTitleCustom
+                this.$post(this.api.queryArticle, {
+                  siteId: e.site,
+                  columnIds: [id],
+                  pageNum: 1,
+                  pageSize: e.articleNum || 4
+                }).then(({ data }) => {
+                  this.$set(e, 'articles', data.records)
+                }).catch(err => {})
+              }
+            })
+          }
+          
+          if (json[3].form.column.length) {
+            const { column, site, articleNum } = json[3].form
+            this.$post(this.api.queryArticle, {
+              siteId: site,
+              columnIds: [column[column.length - 1]],
+              pageNum: 1,
+              pageSize: articleNum || 6
+            }).then(({ data }) => {
+              this.articles = data.records
+            }).catch(err => {})
+          }
+          if (json[5].form.column.length) {
+            const { column, site, articleNum } = json[5].form
+            this.$post(this.api.queryArticle, {
+              siteId: site,
+              columnIds: [column[column.length - 1]],
+              pageNum: 1,
+              pageSize: articleNum || 5
+            }).then(({ data }) => {
+              this.articles1 = data.records
+            }).catch(err => {})
+          }
+
+          this.modules = json
+        }
+      }).catch(err => {})
+    },
     // tab回调
-    tabChange(item) {
-      this.active = item.id
+    tabChange(i) {
+      this.curColumn = i
     }
   }
 };
@@ -212,6 +239,7 @@ export default {
     height: 380px;
   }
   .right {
+    width: 50%;
     padding: 50px 50px 30px;
     background: #1583FF;
     color: #fff;
@@ -230,13 +258,13 @@ export default {
 }
 .card {
   display: flex;
+  flex-wrap: wrap;
   margin-top: 40px;
   li {
-    width: 448px;
+    width: 438px;
     margin-right: 28px;
     box-shadow: 0px 0px 20px 0px rgba(176,176,176,0.21);
     border-radius: 6px;
-    cursor: pointer;
     &:last-child {
       margin-right: 0;
     }
@@ -271,6 +299,7 @@ export default {
   color: #1583FF;
   border-radius: 35px;
   border: 2px solid #2B6CEF;
+  cursor: pointer;
 }
 .shop-shows {
   display: flex;
@@ -326,9 +355,9 @@ export default {
     background-color: #fff;
     li {
       display: inline-flex;
+      align-items: center;
       padding-right: 124px;
       margin-bottom: 38px;
-      background: url(../../assets/images/arrow.png) (right 20px)/(23px 23px) no-repeat;
       &:last-child {
         margin-bottom: 0;
       }
@@ -338,6 +367,10 @@ export default {
       height: 85px;
       margin-right: 28px;
     }
+    .texts {
+      width: 504px;
+      margin-right: 60px;
+    }
     h6 {
       font-size: 20px;
       color: #272727;
@@ -348,6 +381,9 @@ export default {
       color: #666;
       line-height: 24px;
     }
+    .arrow {
+      width: 36px;
+    }
   }
 }
 .conference {
diff --git a/src/styles/page/page.scss b/src/styles/page/page.scss
index ae2cd23..58b35e5 100644
--- a/src/styles/page/page.scss
+++ b/src/styles/page/page.scss
@@ -1,3 +1,4 @@
+@import "../var.scss";
 .block {
   padding: 118px 0;
   .b-title {
@@ -7,6 +8,7 @@
     line-height: 59px;
     text-align: center;
     color: #1F1F1F;
+    @include ellipsis;
     &:after {
       content: '';
       position: absolute;
@@ -24,6 +26,7 @@
     text-align: center;
     color: #5B5B5E;
     line-height: 40px;
+    @include mul-ellipsis(2);
   }
 }
 .inner {
@@ -37,6 +40,7 @@
   position: relative;
   width: 100%;
   height: 100%;
+  cursor: pointer;
   img {
     width: 100%;
     height: 100%;
@@ -50,6 +54,9 @@
     cursor: pointer;
   }
 }
+.des {
+  @include mul-ellipsis(2);
+}
 .gray {
   background-color: #F2F6F8;
 }