detalis.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. <template>
  2. <view>
  3. <u-navbar></u-navbar>
  4. <view class="article">
  5. <view class="article-tit">
  6. {{detail.title}}
  7. </view>
  8. <view class="article-row">
  9. <view class="article-time">{{detail.createTime}}</view>
  10. <view class="article-see">
  11. <u-icon custom-prefix="custom-icon" name="eye-line"></u-icon>
  12. <span>321</span>
  13. </view>
  14. </view>
  15. <view class="article-con" v-html="detail.content" :style="{fontSize:myFontSize+'px'}">
  16. </view>
  17. <u-image class="newsList-img" :src="detail.images" mode="widthFix" border-radius="10"></u-image>
  18. <view class="article-foot">
  19. <view class="u-flex">
  20. <view class="article-btn" @click="fontSizeUp1()">
  21. <u-icon custom-prefix="custom-icon" name="zoom-in-line"></u-icon>
  22. <span>放大</span>
  23. </view>
  24. <view class="article-btn" @click="fontSizeDown2()">
  25. <u-icon custom-prefix="custom-icon" name="zoom-out-line"></u-icon>
  26. <span>缩小</span>
  27. </view>
  28. </view>
  29. <view class="article-btn" @click="scrollTop()">
  30. <u-icon custom-prefix="custom-icon" name="align-top"></u-icon>
  31. <span>回顶</span>
  32. </view>
  33. </view>
  34. </view>
  35. </view>
  36. </template>
  37. <script>
  38. import * as API from '@/apis/news.js'
  39. export default {
  40. data() {
  41. return {
  42. myFontSize:14,
  43. pageTitle: '文章详情',
  44. isLoading: false,
  45. id: '',
  46. detail: {},
  47. }
  48. },
  49. onLoad(op) {
  50. this.id =op.id;
  51. this.getDetail();
  52. var myFontSize=this.carhelp.get("news-info-fontsize")
  53. if(myFontSize){
  54. this.myFontSize=myFontSize
  55. }
  56. },
  57. methods: {
  58. fontSizeUp1(){
  59. if(this.myFontSize>=28){
  60. uni.showToast({
  61. title: "当前已为最大字体"
  62. })
  63. return
  64. }
  65. this.myFontSize=this.myFontSize+2
  66. this.carhelp.set("news-info-fontsize",this.myFontSize)
  67. },
  68. fontSizeDown2(){
  69. if(this.myFontSize<=12){
  70. uni.showToast({
  71. title: "当前已为最小字体"
  72. })
  73. return
  74. }
  75. this.myFontSize=this.myFontSize-2
  76. this.carhelp.set("news-info-fontsize",this.myFontSize)
  77. },
  78. scrollTop(){
  79. uni.pageScrollTo({
  80. scrollTop: 0,
  81. duration: 300
  82. })
  83. },
  84. getDetail() {
  85. API.newsdetail({id:this.id}).then(response => {
  86. this.isLoading = false;
  87. this.detail = response.data;
  88. }).catch(error => {
  89. this.isLoading = false;
  90. mui.toast(error);
  91. })
  92. },
  93. }
  94. }
  95. </script>
  96. <style lang="scss" scoped>
  97. .article{
  98. padding: 15px;
  99. .article-tit{
  100. font-size: 20px;
  101. margin-bottom:10px;
  102. }
  103. .article-row{
  104. display: flex;
  105. justify-content: space-between;
  106. align-items: center;
  107. color: #888;
  108. font-size: 12px;
  109. border-bottom: 1px solid #F1F1F1;
  110. padding-bottom: 15px;
  111. .article-time{}
  112. .article-see{
  113. span{
  114. margin-left:3px;
  115. }
  116. }
  117. }
  118. .article-con{
  119. padding: 15px 0 35px;
  120. font-size: 14px;
  121. line-height: 28px;
  122. img{
  123. width: 100%;
  124. margin: 10px 0;
  125. }
  126. }
  127. .article-foot{
  128. height: 50px;
  129. position:fixed;
  130. left: 0;
  131. right: 0;
  132. bottom: 0;
  133. background-color: #fff;
  134. border-top: 1px solid #f7f7f7;
  135. display: flex;
  136. justify-content: space-between;
  137. align-items: center;
  138. padding:0 15px;
  139. .article-btn{
  140. background: #E5E7EA;
  141. padding:6px 10px;
  142. color: #606875;
  143. border-radius: 8px;
  144. span{
  145. margin-left: 3px;
  146. }
  147. }
  148. .u-flex .article-btn{
  149. margin-right: 10px;
  150. }
  151. }
  152. }
  153. </style>