articleList.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <template>
  2. <view v-show="!isSortType" :style="{padding:'0 '+prConfig*2+'rpx'}">
  3. <view class="articleList" :class="{borderRadius15:bgStyle===1}" :style="'background-color:'+bgColor+';margin-top:'+ mbConfig*2 +'rpx;'" v-if="articleList.length">
  4. <view v-if="listStyle">
  5. <navigator :url='"/pages/extension/news_details/index?id="+item.id' hover-class='none' class="item acea-row row-between-wrapper" :class="conStyle?'borderRadius15':''"
  6. :style="'margin-bottom:'+itemConfig*2+'rpx;'" v-for="(item,index) in articleList" :key='index'>
  7. <view class="pictrue">
  8. <image :src="item.image_input[0]" mode="aspectFill"></image>
  9. </view>
  10. <view class="text">
  11. <view class="name line2">{{item.title}}</view>
  12. <view class="time">{{item.add_time}}</view>
  13. </view>
  14. </navigator>
  15. </view>
  16. <view v-else>
  17. <navigator :url='"/pages/extension/news_details/index?id="+item.id' hover-class='none' class="item acea-row row-between-wrapper" :class="conStyle?'borderRadius15':''"
  18. :style="'margin-bottom:'+itemConfig*2+'rpx;'" v-for="(item,index) in articleList" :key='index'>
  19. <view class="text">
  20. <view class="name line2">{{item.title}}</view>
  21. <view class="time">{{item.add_time}}</view>
  22. </view>
  23. <view class="pictrue">
  24. <image :src="item.image_input[0]" mode="aspectFill"></image>
  25. </view>
  26. </navigator>
  27. </view>
  28. </view>
  29. </view>
  30. </template>
  31. <script>
  32. import {
  33. getArticleList
  34. } from '@/api/api.js';
  35. export default {
  36. name: 'articleList',
  37. props: {
  38. dataConfig: {
  39. type: Object,
  40. default: () => {}
  41. },
  42. isSortType:{
  43. type: String | Number,
  44. default:0
  45. }
  46. },
  47. data() {
  48. return {
  49. articleList: [],
  50. numConfig: this.dataConfig.numConfig.val,
  51. selectConfig: this.dataConfig.selectConfig.activeValue,
  52. listStyle: this.dataConfig.listStyle.type,
  53. bgColor: this.dataConfig.bgColor.color[0].item,
  54. itemConfig: this.dataConfig.itemConfig.val,
  55. mbConfig: this.dataConfig.mbConfig.val,
  56. bgStyle: this.dataConfig.bgStyle.type,//背景样式
  57. prConfig: this.dataConfig.prConfig.val,//背景边距
  58. conStyle: this.dataConfig.conStyle.type,//内容样式
  59. }
  60. },
  61. created() {},
  62. mounted() {
  63. this.getCidArticle();
  64. },
  65. methods: {
  66. getCidArticle: function() {
  67. let that = this;
  68. let limit = this.$config.LIMIT;
  69. getArticleList(that.selectConfig || 0, {
  70. page: 1,
  71. limit: this.numConfig >= limit ? limit : this.numConfig
  72. }).then(res => {
  73. that.articleList = res.data;
  74. });
  75. },
  76. }
  77. }
  78. </script>
  79. <style lang="scss">
  80. .articleList {
  81. background-color: #fff;
  82. padding: 20rpx 0;
  83. .item {
  84. padding: 20rpx;
  85. background-color: #fff;
  86. margin: 0 20rpx;
  87. &:last-child{
  88. margin-bottom: 0!important;
  89. }
  90. .text {
  91. width: 60%;
  92. .name {
  93. font-size: 30rpx;
  94. color: #282828;
  95. height: 82rpx;
  96. }
  97. .time {
  98. font-size: 24rpx;
  99. color: #999;
  100. margin-top: 40rpx;
  101. }
  102. }
  103. .pictrue {
  104. width: 37%;
  105. height: 156rpx;
  106. border-radius: 6rpx;
  107. image {
  108. width: 100%;
  109. height: 100%;
  110. border-radius: 6rpx;
  111. }
  112. }
  113. }
  114. }
  115. </style>