home.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  1. <template>
  2. <view class="container">
  3. <page-top-bar />
  4. <view class="banner">
  5. <swiper style="height: 240px;"
  6. indicator-dots="true"
  7. autoplay="true"
  8. interval="2000"
  9. duration="500">
  10. <swiper-item v-for="hot in eventshot" @click="onView(hot.id)">
  11. <image :src=hot.imgList[0] class="slide-image"></image>
  12. </swiper-item>
  13. </swiper>
  14. </view>
  15. <view class="section1">
  16. <view class="row">
  17. <view class="column" v-for="tag in eventstag">
  18. <view class="cell" ><view class="cl"><image :src="'/static/images/chart_alt'+index+'.png'" style="width: 24px; height: 24px;"></image></view><view class="cl">{{tag.name}}</view> </view>
  19. </view>
  20. </view>
  21. <view class="full-row">
  22. <view class="column">
  23. 上海市 </view><view class="column2"><image src="/static/images/arr.png" style="width: 10px; height: 10px;"></image></view>
  24. <view class="column">类型</view>
  25. <view class="column2"><image src="/static/images/arr.png" style="width: 10px; height: 10px;"></image></view>
  26. </view>
  27. </view>
  28. <view class="section3" style="padding-bottom: 75px;">
  29. <view class="item" @click="onView(event.id)" v-for="event in events" :key="event.id" >
  30. <view class="item_img">
  31. <img :src="event.imgList[0]"></img>
  32. </view>
  33. <view class="item_info"><view class="title"> {{ event.title }}</view>
  34. <view class="time_yuyue"><view class="ico"><image src="/static/images/time.png" style="width: 12px; height: 12px;"></image></view>
  35. <view class="time">{{ event.openTime }} - {{ event.closeTime }}</view>
  36. <view class="time_yuyue" ><view class="ico"><image src="/static/images/daohang.png" style="width: 12px; height: 12px;"></image></view>
  37. <view class="didian">{{ event.address }}</view>
  38. </view>
  39. <view class="yuyue_btn" @click="onView(event.id)"><image src="/static/images/lijiyuyue.jpg" style="width: 89px;height: 25px;"></image></view>
  40. </view>
  41. </view>
  42. </view>
  43. </view>
  44. <page-btm-bar :active="1" />
  45. </view>
  46. </template>
  47. <script>
  48. import {
  49. mapState,
  50. mapGetters,
  51. mapMutations
  52. } from 'vuex'
  53. const app = getApp();
  54. export default {
  55. computed: {
  56. ...mapState(['store_id','systemInfo'])
  57. },
  58. data() {
  59. return {
  60. events: [] , // 用于存储事件数据
  61. eventshot:[],
  62. eventstag:[],
  63. };
  64. },
  65. mounted() {
  66. this.fetchEventsData();
  67. this.fetchEventsHotData();
  68. this.fetchEventsTag();
  69. },
  70. methods: {
  71. fetchEventsData() {
  72. let _this=this;
  73. _this.$http.request('events/searchEvents',{
  74. page:1,
  75. pageSize:10,
  76. }).then(response => {
  77. console.log(response); // 先打印整个响应对象查看结构
  78. this.events = response.data;
  79. console.log(response.data)
  80. }).catch(error => {
  81. console.error('数据获取失败:', error);
  82. });
  83. },
  84. fetchEventsHotData() {
  85. let _this=this;
  86. _this.$http.request('events/searchEvents',{
  87. page:1,
  88. pageSize:5,
  89. hot:1,
  90. }).then(response => {
  91. console.log(response); // 先打印整个响应对象查看结构
  92. this.eventshot = response.data;
  93. console.log(response.data)
  94. }).catch(error => {
  95. console.error('数据获取失败:', error);
  96. });
  97. },
  98. fetchEventsTag() {
  99. let _this=this;
  100. _this.$http.request('events/searchTags',{
  101. page:1,
  102. pageSize:5,
  103. }).then(response => {
  104. console.log(response); // 先打印整个响应对象查看结构
  105. this.eventstag = response.data;
  106. console.log(response.data)
  107. }).catch(error => {
  108. console.error('数据获取失败:', error);
  109. });
  110. },
  111. onView(e){
  112. console.log('传递的ID:', e);
  113. uni.navigateTo({
  114. url:'/pages/home/detail/detail?id='+e,
  115. })
  116. },
  117. },
  118. }
  119. </script>
  120. <style lang="scss">
  121. @import "./index.scss"
  122. </style>