Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2a7da51
commit fe959cc
Showing
13 changed files
with
757 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| <template> | ||
| <div> | ||
| <div class="newsinfo-container"> | ||
| <h3 class="title">{{ newsinfo.title }}</h3> | ||
| <p class="subtitle"> | ||
| <span>{{ newsinfo.add_time | dateFormat }}</span> | ||
| <span>点击: {{ newsinfo.click }} 次</span> | ||
| </p> | ||
| <hr> | ||
| <!-- 内容区域 --> | ||
| <div class="content" v-html="newsinfo.content"></div> | ||
| <!-- 评论子组件区域 --> | ||
| <comment-box :id="this.id"></comment-box> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
|
|
||
| <script> | ||
| // 1、导入评论子组件 | ||
| import comment from '../subcomments/comment.vue' | ||
| import { Toast } from 'mint-ui' | ||
| export default { | ||
| data() { | ||
| return { | ||
| // 将 URL 地址中传递过来的 id 值挂载到 data上，方便以后调用 | ||
| id: this.$route.params.id, | ||
| newsinfo: {} | ||
| } | ||
| }, | ||
| created() { | ||
| this.getNewsInfo() | ||
| }, | ||
| methods: { | ||
| getNewsInfo() { | ||
| // 获取新闻详情 | ||
| this.$http.get('api/getnew/' + this.id).then(result => { | ||
| if (result.body.status === 0) { | ||
| this.newsinfo = result.body.message[0] | ||
| } else { | ||
| Toast('获取新闻详情失败') | ||
| } | ||
| }) | ||
| } | ||
| }, | ||
| // 2、注册评论组件 | ||
| components: { | ||
| 'comment-box': comment | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
|
|
||
| <style lang="scss" scoped> | ||
| .newsinfo-container { | ||
| padding: 0 4px; | ||
| .title { | ||
| font-size: 16px; | ||
| text-align: center; | ||
| margin: 15px 0; | ||
| color: red; | ||
| } | ||
| .subtitle { | ||
| font-size: 13px; | ||
| color: #226aff; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
| .content { | ||
| img { | ||
| width: 100%; | ||
| } | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| <template> | ||
| <div> | ||
| <ul class="mui-table-view"> | ||
| <li class="mui-table-view-cell mui-media" v-for="item in newslist" :key="item.id"> | ||
| <router-link :to="'/home/newsinfo/' + item.id"> | ||
| <img class="mui-media-object mui-pull-left" :src="item.img_url"> | ||
| <div class="mui-media-body"> | ||
| <h1>{{ item.title }}</h1> | ||
| <p class='mui-ellipsis'>{{ item.zhaiyao }}</p> | ||
| <p class="mui-ellipsis"> | ||
| <span>发表时间: {{ item.add_time | dateFormat }}</span> | ||
| <span>点击: {{ item.click }} 次</span> | ||
| </p> | ||
| </div> | ||
| </router-link> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { Toast } from 'mint-ui' | ||
| export default { | ||
| data() { | ||
| return { | ||
| newslist: [] | ||
| } | ||
| }, | ||
| created() { | ||
| this.getNewsList() | ||
| }, | ||
| methods: { | ||
| getNewsList() { | ||
| this.$http.get('api/getnewslist').then(result => { | ||
| if (result.body.status === 0) { | ||
| // 如果没有失败，应该把数据保存到data上 | ||
| this.newslist = result.body.message | ||
| } else { | ||
| Toast('获取新闻列表失败') | ||
| } | ||
| }) | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .mui-table-view { | ||
| li { | ||
| h1 { | ||
| font-size: 14px; | ||
| } | ||
| .mui-ellipsis { | ||
| font-size: 12px; | ||
| color: #226aff; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| <template> | ||
| <div class="cmt-container"> | ||
| <h3>发表评论</h3> | ||
| <hr> | ||
| <textarea placeholder="请输入评论内容,最多输入120字" maxlength="120"></textarea> | ||
| <mt-button type="primary" size="large">发表评论</mt-button> | ||
| <div class="cmt-list"> | ||
| <div class="cmt-item" v-for="(item, i) in comments" :key="item.add_time"> | ||
| <div class="cmt-title">第{{ i+1 }}楼 用户: {{ item.uer_name }} 发表时间: {{ item.add_time | dateFormat }}</div> | ||
| <div class="cmt-body"> | ||
| {{ item.content === 'undefined' ? '此用户很懒，什么都没说' : item.content }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { Toast } from 'mint-ui' | ||
| export default { | ||
| data() { | ||
| return { | ||
| pageIndex: 1, // 默认展示第一页数据 | ||
| comments: [] // 存储所有的评论数据 | ||
| } | ||
| }, | ||
| created() { | ||
| this.getComments() | ||
| }, | ||
| methods: { | ||
| getComments() { | ||
| // 获取评论 | ||
| this.$http.get("api/getcomments/" + this.id + "?pageindex=" + this.pageIndex).then(result => { | ||
| if (result.body.status === 0) { | ||
| // this.comments = result.body.message 这种直接覆盖，如果在加载更多中会覆盖掉前面的数据 | ||
| // 每单获取新评论数据的时候，不要把老数据清空覆盖，而是应该以老数据拼接上新数据 | ||
| this.comments = this.comments.concat(result.body.message) | ||
| } else { | ||
| Toast('评论数据加载失败') | ||
| } | ||
| }) | ||
| }, | ||
| getMore() { | ||
| // 加载更多 | ||
| this.pageIndex++ | ||
| this.getComments() | ||
| } | ||
| }, | ||
| props: ["id"] | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .cmt-container { | ||
| h3 { | ||
| font-size: 18px; | ||
| } | ||
| textarea { | ||
| font-size: 14px; | ||
| height: 85px; | ||
| margin: 0; | ||
| } | ||
| .cmt-list { | ||
| margin: 5px 0; | ||
| .cmt-item { | ||
| font-size: 13px; | ||
| .cmt-title { | ||
| line-height: 30px; | ||
| background-color: #ccc; | ||
| } | ||
| .cmt-body { | ||
| line-height: 35px; | ||
| text-indent: 2em; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.