调整代码结构和增加组件

src/common/components/Footer.vue

@@ -1,47 +1,47 @@
 <template>
-    <div class="footer">
+  <div class="footer">
-      <div class="footer-top">
+    <div class="footer-top">
-        <div class="footer-left">
+      <div class="footer-left">
-          <img :src="'static/logo/footer-logo-'+ area.areaId +'.png'" alt="" class="footer-logo">
+        <img :src="'static/logo/footer-logo-' + area.areaId + '.png'" alt="" class="footer-logo">
-          <div class="footer-us">
+        <div class="footer-us">
-            <h4>{{area.areaName}}公共文化数字云平台</h4>
+          <h4>{{ area.areaName }}公共文化数字云平台</h4>
-            <!--<p>联系方式：18888888888</p>-->
+          <!--<p>联系方式：18888888888</p>-->
-            <p>地址：{{area.areaName}}群众艺术馆</p>
+          <p>地址：{{ area.areaName }}群众艺术馆</p>
-          </div>
-          <div class="footer-link">
-            <h4>友情链接</h4>
-            <a href="https://www.culturedc.cn/" target="_blank" class="link-item">国家公共文化云</a>
-            <a href="http://xzzzqqyg.com/" target="_blank" class="link-item">西藏群众艺术馆</a>
-          </div>
         </div>
-        <div class="footer-right">
+        <div class="footer-link">
-          <ul>
+          <h4>友情链接</h4>
-            <li>
+          <a href="https://www.culturedc.cn/" target="_blank" class="link-item">国家公共文化云</a>
-              <h4>{{area.areaName}}公共文化小程序</h4>
+          <a href="http://xzzzqqyg.com/" target="_blank" class="link-item">西藏群众艺术馆</a>
-              <img src="@/assets/images/qr-code-xcx.jpg" alt="">
-            </li>
-            <li>
-              <h4>{{area.areaName}}公共文化公众号</h4>
-              <img src="@/assets/images/qr-code-gzh.jpg" alt="">
-            </li>
-            <li>
-              <h4>{{area.areaName}}公共文化APP</h4>
-              <img src="@/assets/images/qr-code-app.jpg" alt="">
-            </li>
-          </ul>
         </div>
       </div>
-      <div class="footer-bottom">
+      <div class="footer-right">
-        <p>版权所有：{{area.areaName}}群众艺术馆 Copyright©  2020 晋ICP备17001370号-2 技术支持：山西腾狮科技</p>
+        <ul>
+          <li>
+            <h4>{{ area.areaName }}公共文化小程序</h4>
+            <img src="@/assets/images/qr-code-xcx.jpg" alt="">
+          </li>
+          <li>
+            <h4>{{ area.areaName }}公共文化公众号</h4>
+            <img src="@/assets/images/qr-code-gzh.jpg" alt="">
+          </li>
+          <li>
+            <h4>{{ area.areaName }}公共文化APP</h4>
+            <img src="@/assets/images/qr-code-app.jpg" alt="">
+          </li>
+        </ul>
       </div>
     </div>
+    <div class="footer-bottom">
+      <p>版权所有：{{ area.areaName }}群众艺术馆 Copyright© 2020 晋ICP备17001370号-2 技术支持：山西腾狮科技</p>
+    </div>
+  </div>
 </template>
 
 <script>
 import common from './common'
 export default {
   name: 'Footer',
-  data () {
+  data() {
     return {
       area: common.area
     }

src/common/components/common.js

@@ -1,5 +1,5 @@
-// const publishUrl = 'http://v3.xzszwhy.cn/'
+const publishUrl = 'http://v3.xzszwhy.cn/'
-const publishUrl = 'http://192.168.0.120:80/'
+// const publishUrl = 'http://192.168.0.120:80/'
 const url = `${publishUrl}xzszwhy/`
 const liveUrl = `${publishUrl}live/`
 const shopUrl = `${publishUrl}xzshop/`

src/component/Loading.vue

@@ -0,0 +1,23 @@
+<template>
+    <div class="loading">
+        <img src="@/assets/images/loading.gif" alt="">
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Loading'
+}
+</script>
+
+<style lang="stylus" scoped>
+.loading
+    position fixed
+    top 50%
+    left 50%
+    transform translate(-50%, -50%)
+    background rgba(255, 255, 255, 0.6)
+    padding 30px
+    border-radius 10px
+    box-shadow 0 0 17px #DEDEDE
+</style>

src/component/Nav.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="location">
+        <div class="location-content">
+            您的位置：
+            <span class="nav" v-for="(nav, index) in navArray" :key="index">
+                <router-link :to="nav.to" v-if="nav.to">{{ nav.name }}</router-link>
+                <span v-else>{{ nav.name }}</span>
+            </span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Nav',
+    props: {
+        navs: {
+            type: Array,
+            require: false,
+            default() {
+                return []
+            }
+        }
+    },
+    data() {
+        return {
+            navArray: [
+                {to: '/', name: '首页'},
+                ...this.navs
+            ]
+        }
+    }
+}
+</script>
+
+<style lang="stylus" scoped>
+.location
+    background #e5e5e5
+    line-height 30px
+
+    .location-content
+        width 1200px
+        margin 0 auto
+        font-size 14px
+        color #565656
+        .nav::after
+            content '>'
+            margin  0 5px
+        .nav:last-child::after
+            content: ' '
+
+@media (min-width: 1200px)
+    .location-content 
+        width 1200px
+@media (max-width: 1200px)
+    .location-content
+        width 768px
+</style>

src/pages/Index/Index.vue

@@ -1,15 +1,18 @@
 <template>
-    <div>
+  <div>
-      <Header></Header>
+    <Header></Header>
-      <IndexSwiper :swiperList="swiperList" v-if="swiperList.length > 0"></IndexSwiper>
+    <IndexSwiper :swiperList="swiperList" v-if="swiperList.length > 0"></IndexSwiper>
-      <div v-for="(newsType, index) in newsTypeList" :key="index">
+    <div v-for="(newsType, index) in newsTypeList" :key="index">
-        <news-view1 :news-directories-parent-id="newsType.newsDirectoriesId" :nav-title="newsType.directoriesName" v-if="newsType.directoriesWebView === 'newsView1'"/>
+      <news-view1 :news-directories-parent-id="newsType.newsDirectoriesId" :nav-title="newsType.directoriesName"
-        <news-view2 :news-directories-parent-id="newsType.newsDirectoriesId" :nav-title="newsType.directoriesName" v-if="newsType.directoriesWebView === 'newsView2'"/>
+        v-if="newsType.directoriesWebView === 'newsView1'" />
-        <news-view3 :news-directories-parent-id="newsType.newsDirectoriesId" :nav-title="newsType.directoriesName" v-if="newsType.directoriesWebView === 'newsView3'"/>
+      <news-view2 :news-directories-parent-id="newsType.newsDirectoriesId" :nav-title="newsType.directoriesName"
-      </div>
+        v-if="newsType.directoriesWebView === 'newsView2'" />
-      <IndexService :activityList="activityList" v-if="activityList.length > 0"></IndexService>
+      <news-view3 :news-directories-parent-id="newsType.newsDirectoriesId" :nav-title="newsType.directoriesName"
-      <Footer></Footer>
+        v-if="newsType.directoriesWebView === 'newsView3'" />
     </div>
+    <IndexService :activityList="activityList" v-if="activityList.length > 0"></IndexService>
+    <Footer></Footer>
+  </div>
 </template>
 
 <script>
@@ -34,7 +37,7 @@ export default {
     NewsView3,
     Footer
   },
-  data () {
+  data() {
     return {
       bannerList: [],
       activityList: [],
@@ -79,7 +82,7 @@ export default {
       })
     }
   },
-  mounted () {
+  mounted() {
     this.getNewsTypeList()
     this.getActivityList()
     this.getSwiper()

src/pages/NewsView/NewsView1.vue

@@ -1,13 +1,7 @@
 <template>
   <div>
     <Header></Header>
-    <div class="location">
+    <Nav :navs="navs"/>
-      <div class="location-content">
-        您的位置：
-        <router-link to="/">首页</router-link>
-        > {{ navTitle }}
-      </div>
-    </div>
     <div class="type">
       <div class="type-container">
         <span>区域：</span>
@@ -28,7 +22,7 @@
       <div class="dynamics-left">
         <div class="dynamics-list" v-if="!isLoading">
           <ul v-if="hasData">
-            <li v-for="(list,idx) in requestList" :key="idx" @click="goDetail(list.newsContentLink, list.templateRecordUrl)" :title="list.newsContentTitle">
+            <li v-for="(list,idx) in requestList" :key="idx" @click="goDetail(list)" :title="list.newsContentTitle">
               <div class="dynamics-list-left">
                 <img :src="url + 'route/file/download/false/' + list.newsContentCoverList" alt="">
               </div>
@@ -81,17 +75,25 @@
 import Header from '@/common/components/Header'
 import Footer from '@/common/components/Footer'
 import common from '@/common/components/common.js'
+import Nav from '../../component/Nav'
 import axios from 'axios'
 
 export default {
   name: 'NewsView1',
   components: {
     Header,
-    Footer
+    Footer,
+    Nav
   },
   data () {
+    let navTitle = this.$route.query.navTitle;
     return {
-      navTitle: this.$route.query.navTitle,
+      navTitle,
+      navs: [
+        {
+          name: navTitle
+        },
+      ],
       newsDirectoriesId: this.$route.query.newsDirectoriesId,
       areaList: [],
       changePage: 1,
@@ -156,11 +158,31 @@ export default {
       this.changePage = page
       this.getNews()
     },
-    goDetail: function (link, url) {
+    goDetail: function (item, newsContentId, newsContentType) {
-      if (link) {
+      // 文章
-        window.open(link)
+      if(item.newsContentType === '1') {
-      } else {
+        this.$router.push(`/newsViewDetailText/${item.newsContentId}?navTitle=${this.navTitle}&navPath=${this.$route.fullPath}`)
-        window.location.href = this.publishUrl + url
+        return;
+      }
+      // 图片
+      if(item.newsContentType === '2') {
+        return;
+      }
+      // 音频
+      if(item.newsContentType === '3') {
+        return;
+      }
+      // 视频
+      if(item.newsContentType === '4') {
+        return;
+      }
+      // PDF
+      if(item.newsContentType === '5') {
+        return;
+      }
+      // 链接
+      if(item.newsContentType === '6') {
+        return;
       }
     },
     getTypeList: function () {
@@ -206,16 +228,6 @@ export default {
 
 <style lang="stylus" rel="stylesheet/stylus" scoped>
 @import "~styles/public.styl"
-.location
-  background #e5e5e5
-  line-height 30px
-
-  .location-content
-    width 1200px
-    margin 0 auto
-    font-size 14px
-    color #565656
-
 .type
   padding 15px 0
   background #f0f0f0

src/pages/NewsViewDetail/NewsViewDetailText.vue

@@ -0,0 +1,121 @@
+<template>
+    <div>
+        <Header />
+        <Nav :navs="navs"/>
+        <div class="container">
+            <div class="title" v-show="title">{{ title }}</div>
+            <div class="sub-title" v-show="author || publishDate">
+                <span class="source">
+                    <span>新闻来源：</span>
+                    <span>{{ author }}</span>
+                </span>
+                <span class="date">
+                    <span>发布时间：</span>
+                    <span>{{ publishDate }}</span>
+                </span>
+            </div>
+            <div class="content" v-html="content"></div>
+        </div>
+        <Footer />
+        <loading v-show="isLoading"/>
+    </div>
+</template>
+
+<script>
+import Header from '@/common/components/Header'
+import Footer from '@/common/components/Footer'
+import common from '@/common/components/common.js'
+import Loading from '../../component/Loading'
+import Nav from '../../component/Nav'
+import axios from 'axios'
+
+export default {
+    name: 'NewsViewDetailText',
+    components: {
+        Header,
+        Footer,
+        Loading,
+        Nav
+    },
+    data() {
+        return {
+            isLoading: false,
+            navs: [
+                {
+                    to: this.$route.query.navPath,
+                    name: this.$route.query.navTitle
+                },
+                {
+                    name: '详情'
+                }
+            ],
+            title: '',
+            author: '',
+            publishDate: '',
+            content: '',
+        }
+    },
+    methods: {
+        init() {
+            let vueSelf = this;
+            vueSelf.isLoading = true;
+            axios.get(`${common.url}app/newscontent/getnewscontentbyidrelease/${this.$route.params.newsContentId}`).then(resp => {
+                let data = resp.data;
+                vueSelf.title = data.newsContentTitle;
+                vueSelf.author = data.newsContentAuthor;
+                vueSelf.publishDate = data.newsContentPublishTime;
+                vueSelf.content = data.newsContentContent;
+            }).catch(resp => {
+                console.error(resp)
+            }).finally(() => {
+                vueSelf.isLoading = false
+            })
+        }
+    },
+    mounted() {
+        this.init();
+    }
+}
+</script>
+
+<style lang="stylus" scoped>
+.container
+    width 1200px
+    margin 0 auto
+    display flex
+    flex-direction column
+    align-items center
+    font-family '宋体'
+    div
+        margin-bottom 10px
+    .title  
+        margin-top 10px
+        font-size 24px
+        font-weight bold
+        text-align center
+        color #000
+    .sub-title
+        width 500px
+        text-align center
+        font-size 16px
+        height 35px
+        line-height 35px
+        display flex
+        justify-content space-between
+        color #a8a8a8
+    .content
+        min-height 600px
+        width 100%
+        font-size 18px
+        color #262626
+        line-height 35px
+        text-indent 36px
+    
+@media (min-width: 1200px)
+    .container 
+        width 1200px
+@media (max-width: 1200px)
+    .container
+        width 768px
+
+</style>

src/router/index.js

@@ -24,10 +24,11 @@ import CultureMap from '@/pages/CultureMap/CultureMap'
 import CultureSupermarket from '@/pages/CultureSupermarket/CultureSupermarket'
 import GoodsDetail from '@/pages/CultureSupermarket/GoodsDetail'
 import common from '../common/components/common'
-import NewsView1 from '../pages/NewsView1/NewsView1.vue'
+import NewsView1 from '../pages/NewsView/NewsView1'
-import NewsView2 from '../pages/NewsView2/NewsView2.vue'
+import NewsView2 from '../pages/NewsView/NewsView2'
-import NewsView3 from '../pages/NewsView3/NewsView3.vue'
+import NewsView3 from '../pages/NewsView/NewsView3'
-import NewsView3Sub from '../pages/NewsView3Sub/NewsView3Sub.vue'
+import NewsView3Sub from '../pages/NewsView/NewsView3Sub'
+import NewsViewDetailText from '../pages/NewsViewDetail/NewsViewDetailText'
 Vue.use(Router)
 
 export default new Router({
@@ -274,6 +275,16 @@ export default new Router({
         title: `${common.area.areaName}公共文化数字云平台`,
         keepAlive: false
       }
+    },
+    {
+      path: '/newsViewDetailText/:newsContentId',
+      name: 'newsViewDetailText',
+      component: NewsViewDetailText,
+      props: true,
+      meta: {
+        title: `${common.area.areaName}公共文化数字云平台`,
+        keepAlive: false
+      }
     }
   ]
 })