post.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <style lang="sass">
  2. @import "./../../sass/page/comment.scss";
  3. </style>
  4. <template>
  5. <div class="page-bbs-post">
  6. <section class="v-mod-comment">
  7. <ul class="list-comment">
  8. <li class="item-comment">
  9. <div class="item-fl">
  10. <img :src="postUser.head">
  11. </div>
  12. <div class="item-fr">
  13. <div class="info">
  14. <div class="info-fl">
  15. <h4>{{postUser.nick}}</h4>
  16. <p>{{post.createTime | parseTime}}</p>
  17. </div>
  18. <div class="info-fr">
  19. <span class="icon-zan">{{post.zanCount}}</span>
  20. </div>
  21. </div>
  22. <div class="cont">
  23. <p>{{postExtend.text}}</p>
  24. <ul class="list-pic ext-list" v-if="postPics.length==1">
  25. <li v-for="(pic,picIndex) in postPics" :key="picIndex" class="item-pic" :style="{backgroundImage : 'url('+pic+'?imageview/4/0/w/400/h/400/format/)'}" @click="previewImage(picIndex)"></li>
  26. </ul>
  27. <ul class="list-pic" v-else>
  28. <li v-for="(pic,picIndex) in postPics" :key="picIndex" class="item-pic" :style="{backgroundImage : 'url('+pic+'?imageview/4/0/w/400/h/400/format/)'}" @click="previewImage(picIndex)"></li>
  29. </ul>
  30. </div>
  31. <p class="tip" v-if="post.commentaryTitle">评:{{post.commentaryTitle}}</p>
  32. </div>
  33. </li>
  34. </ul>
  35. </section>
  36. <section class="v-mod-comment mt-16 pb-150">
  37. <p class="tip-count">回复 <em>{{comments.length}}</em></p>
  38. <ul class="list-comment">
  39. <li class="item-comment" v-for="(comment,commentIndex) in comments" :key="commentIndex" v-if="commentIndex<5">
  40. <div class="item-fl">
  41. <img :src="comment.user.head">
  42. </div>
  43. <div class="item-fr">
  44. <div class="info">
  45. <div class="info-fl">
  46. <h4>{{comment.user.nick}}</h4>
  47. <p>{{comment.createTime | parseTime}}</p>
  48. </div>
  49. <div class="info-fr">
  50. <span class="icon-zan">{{comment.zanCount}}</span>
  51. <span class="icon-comment">{{comment.replyCount}}</span>
  52. </div>
  53. </div>
  54. <div class="cont">
  55. <p>{{comment.content}}</p>
  56. <ul class="list-post">
  57. <li v-for="(replie,index) in comment.postReplies" :key="index"><span>{{replie.user.nick}}:</span>{{replie.content}}</li>
  58. </ul>
  59. </div>
  60. </div>
  61. </li>
  62. </ul>
  63. <a :href="downloadUrl" class="btn-more" v-if="comments.length>5">进入APP查看更多回复</a>
  64. </section>
  65. <dlfooter></dlfooter>
  66. <photoswipe></photoswipe>
  67. </div>
  68. </template>
  69. <script>
  70. import post from './js/post.js'
  71. export default post
  72. </script>