activity-recommend.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. <template>
  2. <view class="activity-recommend">
  3. <view class="activity-list">
  4. <template v-for="(item, index) in activityList">
  5. <view class="activity-item" :key="index" @click="onClickActivity(item)">
  6. <view class="activity-title">{{ item.title }}</view>
  7. <view class="activity-time">{{ formatDate(item.start_time) }} | {{ item.address }}</view>
  8. <view class="activity-summary">
  9. <view class="text">{{ item.content }}</view>
  10. <van-button class="btn-to-detail" type="primary">
  11. <template>
  12. <view>了解详情</view> <view class="arrow iconfont icon-right-s"></view>
  13. </template>
  14. </van-button>
  15. </view>
  16. </view>
  17. </template>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. import { exhibitorsBoothActivityList } from '@/api/exhibitor'
  23. import { link } from '@/utils/request'
  24. export default {
  25. options: {
  26. styleIsolation: 'shared'
  27. },
  28. components: {
  29. },
  30. props: {
  31. // 特定的展商ID
  32. exhibitorId: Number
  33. },
  34. watch: {
  35. exhibitorId(val) {
  36. this.activityListParams.exhibitors_id = val
  37. this.getActivityList()
  38. }
  39. },
  40. data() {
  41. return {
  42. activityList: [],
  43. activityListParams: {
  44. page: 1,
  45. page_size: 4,
  46. exhibitors_id: 0
  47. },
  48. activityListLoading: false
  49. }
  50. },
  51. created() {
  52. },
  53. methods: {
  54. getActivityList() {
  55. if (this.activityListLoading === true) {
  56. return
  57. }
  58. this.activityListLoading = true
  59. exhibitorsBoothActivityList(this.activityListParams).then(res => {
  60. if (res.code === 0) {
  61. if (this.activityListParams.page > 1) {
  62. this.activityList = [...this.activityList, ...res.data.data]
  63. } else {
  64. this.activityList = res.data.data
  65. }
  66. }
  67. this.activityListLoading = false
  68. })
  69. },
  70. formatDate(dateString) {
  71. const date = new Date(dateString);
  72. const year = date.getFullYear();
  73. const month = date.getMonth() + 1; // 月份从 0 开始
  74. const day = date.getDate();
  75. return `${year}${month}${day}日`;
  76. },
  77. onClickActivity(item) {
  78. this.navigateTo(link('/' + item.urla))
  79. }
  80. }
  81. }
  82. </script>
  83. <style lang="scss">
  84. .activity-list{
  85. display: grid;
  86. grid-template-columns: 1fr;
  87. grid-row-gap: 18rpx;
  88. margin-top: 28rpx;
  89. }
  90. .activity-item{
  91. display: flex;
  92. flex-direction: column;
  93. height: 210rpx;
  94. background-color: #F6F6F6;
  95. border-radius: 10rpx;
  96. padding: 24rpx 30rpx;
  97. }
  98. .activity-title{
  99. @include text-ellipsis-line;
  100. font-family: Arial, Arial;
  101. font-weight: bold;
  102. font-size: $fontSize3;
  103. line-height: 35rpx;
  104. }
  105. .activity-time{
  106. font-size: $fontSize2;
  107. color: #333333;
  108. margin: 12rpx 0;
  109. }
  110. .activity-summary{
  111. display: flex;
  112. align-items: center;
  113. font-size: $fontSize1;
  114. line-height: 25rpx;
  115. .btn-to-detail{
  116. flex-shrink: 0;
  117. .van-button__text{
  118. display: flex!important;
  119. align-items: center;
  120. font-size: $fontSize0;
  121. }
  122. }
  123. .text{
  124. padding-right: 30rpx;
  125. color: #555555;
  126. @include text-ellipsis-line;
  127. -webkit-line-clamp: 2;
  128. }
  129. .arrow{
  130. margin-left: 12rpx;
  131. font-size: $fontSize0;
  132. }
  133. }
  134. .activity-tab{
  135. van-button{
  136. margin-right: 13rpx;
  137. }
  138. }
  139. </style>