update

biaodigit · May 12, 2018 · a0aeebc · a0aeebc
1 parent c3a4fb3
commit a0aeebc
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 205 deletions.
diff --git a/src/api/newDetail.js b/src/api/newDetail.js
diff --git a/src/common/js/mixin.js b/src/common/js/mixin.js
diff --git a/src/components/bottom-menu/bottom-menu.vue b/src/components/bottom-menu/bottom-menu.vue
@@ -73,7 +73,8 @@
 
 <script type="text/ecmascript-6">
   import router from '../../router'
-  import axios from  'axios'
+  import axios from 'axios'
+  import {mapMutations} from 'vuex'
 
   export default {
     data() {
@@ -89,21 +90,22 @@
     },
     //观察路由跳转数据更新
     watch: {
-      '$route'(to, from){
+      '$route'(to, from) {
         this.fetchExtraData();
       }
     },
     methods: {
       //获取新闻
       fetchExtraData() {
         let id = this.$store.state.id;
+        console.log(id)
         axios.get('api/story-extra/' + this.$store.state.id).then(response => {
           let long_comments = response.data.long_comments;
           let popularity = response.data.popularity;
           let short_comments = response.data.short_comments;
           let comments = response.data.comments;
 
-          this.$store.dispatch('changeStoryExtra', {
+          this.setStoryExtra({
             long_comments: long_comments,
             short_comments: short_comments,
             comments: comments,
@@ -115,12 +117,12 @@
       },
       //返回上一级路由，判断是从哪里进入
       goBack() {
-        if (this.$store.state.goType == 1) {
+        if (this.$store.state.goType === 1) {
           router.push({name: 'homePage'})
-        } else if (this.$store.state.goType == 2) {
+        } else if (this.$store.state.goType === 2) {
           router.push({name: 'collect'});
           this.$store.dispatch('changeGoType', 1);
-        } else if (this.$store.state.goType == 3) {
+        } else if (this.$store.state.goType === 3) {
           router.push({name: 'themeDetail', params: {id: this.$store.state.currentThemeId}});
         }
         console.log(this.$store.state.homepageDate);
@@ -149,11 +151,11 @@
         document.scrollingElement.scrollTop = this.scroll
       },
       //改变收藏状态
-      changeCollect(){
+      changeCollect() {
         this.$store.dispatch('changeCollectState')
       },
       //跳转评论路由页面
-      goComments(id){
+      goComments(id) {
         router.push({name: 'comments', params: {id: id}})
       },
       //将日期推前一天
@@ -190,7 +192,7 @@
         })
       },
       //加载下一篇新闻
-      goNext(){
+      goNext() {
         if (this.$store.state.goType === 1) {
           if (this.$store.state.ids.indexOf(this.$store.state.nextId) > 0) {
             let id = this.$store.state.nextId;
@@ -211,11 +213,14 @@
             alert('已到最后一篇')
           }
         }
-      }
+      },
+      ...mapMutations({
+        setStoryExtra: 'STORY_EXTRA'
+      })
     },
     computed: {
       //返回当前新闻详情页id
-      newId(){
+      newId() {
         return this.$store.state.id;
       },
       //返回当前模式

diff --git a/src/components/home-page-detail/home-page-detail.vue b/src/components/home-page-detail/home-page-detail.vue
diff --git a/src/components/home-page/home-page.vue b/src/components/home-page/home-page.vue
@@ -13,12 +13,12 @@
         </div>
         <div class="newList">
           <div class="model" :class="model">
-            <ul>
+            <ul style="padding: 0">
               <li v-for="story in stories" :key="story.id" class="new border-1px"
                   @click="goNew(story.id)" :class="model">
                 <span class="title">{{story.title}}</span>
                 <span class="avatar" v-for="(item,index) in story.images" v-if="index<1"><img
-                  v-lazy="attachImageUrl(item)"></span>
+                  :src="attachImageUrl(item)"></span>
               </li>
             </ul>
           </div>
@@ -32,7 +32,6 @@
   import axios from 'axios'
   import Slider from 'base/slider/slider'
   import Scroll from 'base/scroll/scroll'
-  import HomePageDetail from 'components/home-page-detail/home-page-detail'
   import {getSlider, getNews} from 'api/homePage'
   import {attachImageUrl} from 'common/js/dom'
   import {mapGetters, mapMutations, mapActions} from 'vuex'

diff --git a/src/components/new-detail/new-detail.styl b/src/components/new-detail/new-detail.styl
@@ -3,30 +3,33 @@
 .newDetail
   position fixed
   top 0
-  bottom: 0
+  bottom: 45px
   width 100%
-  z-index 10
-  .bg-image
-    position relative
+  z-index 50
+  background white
+  .scroll
     width 100%
-    height  250px
-    z-index -1
-    .title
-      position absolute
-      bottom 0
-      font-size 18px
-      padding 0 10px 10px 15px
-      color rgb(255,255,255)
-    img
-      position absolute
+    height 100%
+    .bg-image
+      position relative
       width 100%
-      height 250px
-  .body
-    position absolute
-    width 100%
-    &.morning
-      color rgb(51,51,51)
-      background-color rgb(255,255,255)
-    &.night
-      color rgb(184,184,184)
-      background-color rgb(52,52,52)
+      height  250px
+      z-index -1
+      .title
+        position absolute
+        bottom 0
+        font-size 18px
+        padding 0 10px 10px 15px
+        color rgb(255,255,255)
+      img
+        position absolute
+        width 100%
+        height 250px
+    .body
+      width 100%
+      &.morning
+        color rgb(51,51,51)
+        background-color rgb(255,255,255)
+      &.night
+        color rgb(184,184,184)
+        background-color rgb(52,52,52)
diff --git a/src/components/new-detail/new-detail.vue b/src/components/new-detail/new-detail.vue
@@ -1,16 +1,19 @@
 <template>
     <div class="newDetail">
-      <div class="content-wrapper">
-        <div class="bg-image"  v-if="data.image"><img :src="attachImageUrl(data.image)" v-lazy="attachImageUrl(data.image)"><span class="title">{{data.title}}</span></div>
-        <div class="body" v-html="data.body" :class="model"></div>
-      </div>
+      <scroll>
+        <div class="content-wrapper">
+          <div class="bg-image"  v-if="data.image"><img :src="attachImageUrl(data.image)" v-lazy="attachImageUrl(data.image)"><span class="title">{{data.title}}</span></div>
+          <div class="body" v-html="data.body" :class="model"></div>
+        </div>
+      </scroll>
       <bottom-menu></bottom-menu>
     </div>
 </template>
 
 <script type="text/ecmascript-6">
   import axios from 'axios'
   import router from '../../router'
+  import Scroll from 'base/scroll/scroll'
   import BottomMenu from '../bottom-menu/bottom-menu'
   import {mapGetters} from 'vuex'
 
@@ -40,7 +43,6 @@
         }).catch((error) => {
             console.log(error)
         });
-
 //        this.$store.dispatch('addNextId',this.id)
       },
       //替换头部背景图片url
@@ -66,6 +68,7 @@
     },
     //注册组件
     components:{
+      Scroll,
       BottomMenu
     }
   }

diff --git a/src/router/index.js b/src/router/index.js
@@ -1,21 +1,22 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import HomePage from 'components/home-page/home-page'
 import ThemeDetail from 'components/theme-detail/theme-detail'
-import NewDetail from 'components/new-detail/new-detail'
 import Collect from 'components/collect/collect'
 import Comments from 'components/comments/comments'
 import EditorsList from 'components/editors-list/editors-list'
 import Editor from 'components/editor/editor'
 
 Vue.use(Router)
 
+const HomePage = () => import('components/home-page/home-page')
+const NewDetail = () => import('components/new-detail/new-detail')
+
 export default new Router({
   routes: [
     {
       path: '/',
       name: 'homePage',
-      component: HomePage
+      component: HomePage,
     },
     {
       path:'/themeDetail/:id',