news-recommend.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <template>
  2. <view class="news-recommend">
  3. <view v-if="recommendType === 'home'" class="news-tab">
  4. <u-tabs :active.sync="newsType" :tabs="tabs" tab-style="default" @change="tabChange"/>
  5. </view>
  6. <view class="news-list">
  7. <template v-for="(item, index) in newsList">
  8. <news-item :item="item" :key="index" :type="newsType" />
  9. </template>
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. import UTabs from '@/components/common/u-tabs'
  15. import NewsItem from '@/pages/news/components/news-item.vue'
  16. export default {
  17. components: {
  18. UTabs,
  19. NewsItem
  20. },
  21. props: {
  22. // 特定的展商ID
  23. exhibitorId: Number,
  24. recommendType: {
  25. type: String,
  26. default: 'home'
  27. }
  28. },
  29. data() {
  30. return {
  31. newsType: 'exhibition',
  32. tabs: [{
  33. label: '展会新闻',
  34. value: 'exhibition'
  35. }, {
  36. label: '展商新闻',
  37. value: 'exhibitor'
  38. }],
  39. newsList: [{}, {}, {}]
  40. }
  41. },
  42. created() {
  43. if (this.recommendType === 'detail') {
  44. this.newsType = 'exhibitor'
  45. }
  46. },
  47. methods: {
  48. tabChange() {
  49. }
  50. }
  51. }
  52. </script>
  53. <style lang="scss" scoped>
  54. .news-list{
  55. display: grid;
  56. grid-template-columns: 1fr;
  57. grid-row-gap: 18rpx;
  58. margin-top: 28rpx;
  59. }
  60. </style>