Skip to content

Commit

Permalink
fix bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@biaodigit
biaodigit committed Jul 17, 2017
1 parent c8c6b0b commit 6a54383
Show file tree
Hide file tree
Showing 10 changed files with 337 additions and 311 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
"optimize-css-assets-webpack-plugin": "^1.3.0",
"ora": "^1.1.0",
"rimraf": "^2.6.0",
"scrolling-element": "^1.0.2",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"stylus": "^0.54.5",
Expand Down
54 changes: 27 additions & 27 deletions src/components/Collect/Collect.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<transition name="fold">
<transition name="fold" mode="in-out">
<div class="collect">
<sonheader @back="back" :title="title"></sonheader>
<div class="model" :class="model">
Expand All @@ -8,9 +8,9 @@
<li v-for="story in data" class="new border-1px" @click="goNew(story.id)">
<span class="title">{{story.title}}</span>
<span class="avatar"><img :src="attachImageUrl(story.images[0])"></span>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</transition>
Expand All @@ -24,19 +24,19 @@
export default {
data() {
return {
data:this.$store.state.isCollectNews, //已收藏新闻数组
sidebarShow:false, //侧边栏显示状态
title:'收藏' //收藏页面标题
data: this.$store.state.isCollectNews, //已收藏新闻数组
sidebarShow: false, //侧边栏显示状态
title: '收藏' //收藏页面标题
}
},
methods:{
methods: {
//返回上一页面，并判断是从哪里进入的
back() {
let id = this.$store.state.currentThemeId;
if(this.$store.state.currentThemeId > 0){
router.push({name:'themeDetail',params:{id:id}})
}else{
router.push({name:'homePage'})
if (this.$store.state.currentThemeId > 0) {
router.push({name: 'themeDetail', params: {id: id}})
} else {
router.push({name: 'homePage'})
}
},
//对图片url进行转化
Expand All @@ -48,19 +48,19 @@
//去往收藏新闻详情页
goNew(id) {
this.$store.state.id = id;
router.push({ name:'newDetail', params:{ id:id }});
router.push({name: 'newDetail', params: {id: id}});
this.$store.dispatch('judgeCollectState');
this.$store.dispatch('changeGoType',2)
this.$store.dispatch('changeGoType', 2)
}
},
computed:{
computed: {
model() {
return this.$store.getters.getModel;
}
},
//注册组件
components:{
sonheader
components: {
sonheader
}
}
</script>
Expand All @@ -73,22 +73,22 @@
width 100%
height 100%
z-index 100
background rgb(255,255,255)
transform translate3d(0,0,0)
&.fold-enter-active,&.fold-leave-active
background rgb(255, 255, 255)
transform translate3d(0, 0, 0)
&.fold-enter-active, &.fold-leave-active
transition all 0.5s
&.fold-enter,&.fold-leave-active
transform translate3d(100%,0,0)
&.fold-enter, &.fold-leave-active
transform translate3d(100%, 0, 0)
.model
position absolute
width 100%
height 100%
&.morning
color rgb(51,51,51)
background-color rgb(255,255,255)
color rgb(51, 51, 51)
background-color rgb(255, 255, 255)
&.night
color rgb(184,184,184)
background-color rgb(52,52,52)
color rgb(184, 184, 184)
background-color rgb(52, 52, 52)
.collectNewList
position absolute
top 40px
Expand All @@ -99,7 +99,7 @@
position relative
left -15px
padding 15px 0 15px 10px
border-1px(rgba(7,17,27,0.1))
border-1px(rgba(7, 17, 27, 0.1))
.title
flex 1
margin-right 10px
Expand Down
167 changes: 83 additions & 84 deletions src/components/Comments/Comments.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
<sonheader @back="back" :title="title"></sonheader>
<div class="commentsArea" :class="model">
<div class="longComments" :class="model">
<div class="longCommentsTitle border-1px" @click="showLongComment">{{this.$store.state.long_comments}}条长评<img class="thumb" :src="longThumb"></div>
<div class="longCommentsTitle border-1px" @click="showLongComment">{{this.$store.state.long_comments}}条长评<img
class="thumb" :src="longThumb"></div>
<div class="longComment border-1px" v-for="item in longComments" v-show="longCommentShow">
<span class="avatar"><img :src="attachImageUrl(item.avatar)" width="30" height="30"></span>
<div class="content">
Expand All @@ -14,7 +15,8 @@
</div>
</div>
<div class="shortComments" :class="model">
<div class="shortCommentsTitle border-1px" @click="showShortComment">{{this.$store.state.short_comments}}条短评<img class="thumb" :src="shortThumb"></div>
<div class="shortCommentsTitle border-1px" @click="showShortComment">{{this.$store.state.short_comments}}条短评<img
class="thumb" :src="shortThumb"></div>
<div class="shortComment border-1px" v-for="item in shortComments" v-show="shortCommentShow">
<span class="avatar"><img :src="attachImageUrl(item.avatar)" width="30" height="30"></span>
<div class="content">
Expand All @@ -36,11 +38,11 @@
export default {
data() {
return {
longComments:{}, //初始化长评论
shortComments:{}, //初始化短评论
longCommentShow:true, //初始长评论显示状态
shortCommentShow:false, //初始短评论显示状态
title:'' //初始化头部标题
longComments: {}, //初始化长评论
shortComments: {}, //初始化短评论
longCommentShow: true, //初始长评论显示状态
shortCommentShow: false, //初始短评论显示状态
title: '' //初始化头部标题
}
},
//生命周期建立数据观察
Expand All @@ -49,30 +51,30 @@
this.fetchShortData();
},
//观察路由跳转更新数据
watch:{
'$route'(to,from){
watch: {
'$route'(to, from){
this.fetchLongData();
this.fetchShortData();
}
},
filters:{
filters: {
formatDate(time){
let date = new Date(time);
return formatDate(date,'yyyy-MM-dd hh:mm')
return formatDate(date, 'yyyy-MM-dd hh:mm')
}
},
methods:{
methods: {
//获取长评论数据
fetchLongData() {
axios.get('api/story/'+ this.$store.state.id + '/long-comments').then((response) => {
axios.get('api/story/' + this.$store.state.id + '/long-comments').then((response) => {
this.longComments = response.data.comments;
})
this.title = this.$store.state.comments + '条评论'
},
//获取短评论数据
fetchShortData() {
axios.get('api/story/'+ this.$store.state.id + '/short-comments').then((response) => {
axios.get('api/story/' + this.$store.state.id + '/short-comments').then((response) => {
this.shortComments = response.data.comments;
})
},
Expand All @@ -82,7 +84,7 @@
},
//对图片url进行转化
attachImageUrl(srcUrl) {
if(srcUrl !== undefined){
if (srcUrl !== undefined) {
return srcUrl.replace(/http\w{0,1}:\/\/p/g, 'https://images.weserv.nl/?url=p')
}
},
Expand All @@ -95,20 +97,20 @@
this.shortCommentShow = !this.shortCommentShow;
},
},
computed:{
computed: {
//计算长评论是否显示
longThumb() {
if(this.longCommentShow){
if (this.longCommentShow) {
return require('./down.png')
}else{
} else {
return require('./up.png')
}
},
//计算短评论是否显示
shortThumb() {
if(this.shortCommentShow){
if (this.shortCommentShow) {
return require('./down.png')
}else{
} else {
return require('./up.png')
}
},
Expand All @@ -118,7 +120,7 @@
}
},
//注册组件
components:{
components: {
sonheader
}
}
Expand All @@ -127,70 +129,67 @@
<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/index.styl";
.comments
width 100%
height 100%
.commentsArea
position absolute
top 40px
height 100%
width 100%
&.morning
background-color rgb(255,255,255)
&.night
background-color rgb(85,85,85)
.longComments,.shortComments
width 100%
&.morning
color rgb(51,51,51)
background-color rgb(255,255,255)
&.night
color rgb(184,184,184)
background-color rgb(85,85,85)
.longCommentsTitle,.shortCommentsTitle
height 40px
line-height 40px
padding-left 10px
font-weight 700
color rgb(7,17,27)
border-1px(rgba(7,17,27,0.1))
.thumb
.comments
width 100%
height 100%
.commentsArea
position absolute
top 40px
height 100%
width 100%
&.morning
background-color rgb(255, 255, 255)
&.night
background-color rgb(85, 85, 85)
.longComments, .shortComments
width 100%
&.morning
color rgb(51, 51, 51)
background-color rgb(255, 255, 255)
&.night
color rgb(184, 184, 184)
background-color rgb(85, 85, 85)
.longCommentsTitle, .shortCommentsTitle
height 40px
line-height 40px
padding-left 10px
font-weight 700
color rgb(7, 17, 27)
border-1px(rgba(7, 17, 27, 0.1))
.thumb
position absolute
top 8px
right 10px
width 20px
height 20px
.longComment, .shortComment
display flex
width 94%
padding 10px 10px 0 10px
border-1px(rgba(7, 17, 27, 0.1))
.avatar
flex 0 0 30px
width 30px
height 30px
img
border-radius 50%
.content
flex 1
position relative
margin-left 10px
top: -10px
.name
left 5px
line-height 30px
.likes
position absolute
top 8px
right 10px
width 20px
height 20px
.longComment,.shortComment
display flex
width 94%
padding 10px 10px 0 10px
border-1px(rgba(7,17,27,0.1))
.avatar
flex 0 0 30px
width 30px
height 30px
img
border-radius 50%
.content
flex 1
position relative
margin-left 10px
top:-10px
.name
left 5px
line-height 30px
.likes
position absolute
width 20px
height 20px
right 5px
img
position absolute
right 20px
top -25px
.comment
font-size 18px
right 5px
img
position absolute
right 20px
top -25px
.comment
font-size 18px
</style>
Loading

0 comments on commit 6a54383

Please sign in to comment.