home.vue 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. <template>
  2. <view class="container">
  3. <!-- <page-top-bar /> -->
  4. <view class="top-bar">
  5. <view class="row">
  6. <view class="column column1" @click="navTo(1,'/pages/home/home')">
  7. <image src="@/static/images/backhome.png" style="width: 24px; height: 24px;"></image>
  8. </view>
  9. <view class="column column2"><input @input="KeyName" class="input-box" type="text" placeholder="搜索内容"
  10. style="width: 100%;" /></view>
  11. <view class="column column3">
  12. <image src="@/static/images/fangdajing.png" style="width: 21px; height: 21px;" @click="seachText">
  13. </image>
  14. </view>
  15. <view class="column column4"></view>
  16. </view>
  17. </view>
  18. <view class="banner">
  19. <swiper style="height: 240px;" indicator-dots="true" autoplay="true" interval="2000" duration="500">
  20. <swiper-item v-for="hot in eventshot" @click="onView(hot.id)">
  21. <image :src=hot.imgList[0] class="slide-image"></image>
  22. </swiper-item>
  23. </swiper>
  24. </view>
  25. <view class="section1">
  26. <view class="row">
  27. <view class="column" v-for="(tag,index) in eventstag">
  28. <view class="cell" :class="active == index?'active':''" @click="selActive(tag,index)">
  29. <view class="cl">
  30. <image :src="'/static/images/chart_alt'+index+'.png'" style="width: 24px; height: 24px;">
  31. </image>
  32. </view>
  33. <view class="cl">{{tag.name}}</view>
  34. </view>
  35. </view>
  36. </view>
  37. <view class="full-row">
  38. <view class="column">
  39. 上海市 </view>
  40. <view class="column2">
  41. <image src="/static/images/arr.png" style="width: 10px; height: 10px;"></image>
  42. </view>
  43. <view class="column">类型</view>
  44. <view class="column2">
  45. <image src="/static/images/arr.png" style="width: 10px; height: 10px;"></image>
  46. </view>
  47. </view>
  48. <!-- <view class="selected" v-if="">
  49. 城市
  50. </view> -->
  51. </view>
  52. <view class="section3" style="padding-bottom: 75px;">
  53. <view class="item" @click="onView(event.id)" v-for="event in events" :key="event.id">
  54. <view class="item_img">
  55. <img :src="event.imgList[0]"></img>
  56. </view>
  57. <view class="item_info">
  58. <view class="title"> {{ event.title }}</view>
  59. <view class="time_yuyue">
  60. <view class="ico">
  61. <image src="/static/images/time.png" style="width: 12px; height: 12px;"></image>
  62. </view>
  63. <view class="time">{{ event.openTime }} - {{ event.closeTime }}</view>
  64. <view class="time_yuyue">
  65. <view class="ico">
  66. <image src="/static/images/daohang.png" style="width: 12px; height: 12px;"></image>
  67. </view>
  68. <view class="didian">{{ event.address }}</view>
  69. </view>
  70. <view class="yuyue_btn" @click="onView(event.id)">
  71. <image src="/static/images/lijiyuyue.jpg" style="width: 89px;height: 25px;"></image>
  72. </view>
  73. </view>
  74. </view>
  75. </view>
  76. </view>
  77. <page-btm-bar :active="1" />
  78. </view>
  79. </template>
  80. <script>
  81. import {
  82. mapState,
  83. mapGetters,
  84. mapMutations
  85. } from 'vuex'
  86. const app = getApp();
  87. export default {
  88. computed: {
  89. ...mapState(['store_id', 'systemInfo'])
  90. },
  91. data() {
  92. return {
  93. events: [], // 用于存储事件数据
  94. eventshot: [],
  95. eventstag: [],
  96. active: 0,
  97. tagId: 5,
  98. keyword: ''
  99. };
  100. },
  101. mounted() {
  102. this.fetchEventsData();
  103. this.fetchEventsHotData();
  104. this.fetchEventsTag();
  105. },
  106. methods: {
  107. //搜索内容
  108. seachText() {
  109. this.$http.request('events/searchEvents', {
  110. page: 1,
  111. pageSize: 10,
  112. keyword: this.keyword
  113. }).then(response => {
  114. this.events = response.data;
  115. }).catch(error => {
  116. console.error('数据获取失败:', error);
  117. });
  118. },
  119. KeyName(t) {
  120. this.keyword = t.detail.value;
  121. },
  122. //切换筛选条件
  123. selActive(item, index) {
  124. this.tagId = item.id
  125. this.active = index
  126. this.fetchEventsData()
  127. },
  128. fetchEventsData() {
  129. let _this = this;
  130. _this.$http.request('events/searchEvents', {
  131. page: 1,
  132. pageSize: 10,
  133. tagId: _this.tagId,
  134. }).then(response => {
  135. console.log(response); // 先打印整个响应对象查看结构
  136. this.events = response.data;
  137. console.log(response.data)
  138. }).catch(error => {
  139. console.error('数据获取失败:', error);
  140. });
  141. },
  142. fetchEventsHotData() {
  143. let _this = this;
  144. _this.$http.request('events/searchEvents', {
  145. page: 1,
  146. pageSize: 5,
  147. hot: 1,
  148. }).then(response => {
  149. console.log(response); // 先打印整个响应对象查看结构
  150. this.eventshot = response.data;
  151. console.log(response.data)
  152. }).catch(error => {
  153. console.error('数据获取失败:', error);
  154. });
  155. },
  156. fetchEventsTag() {
  157. let _this = this;
  158. _this.$http.request('events/searchTags', {
  159. page: 1,
  160. pageSize: 5,
  161. }).then(response => {
  162. console.log(response); // 先打印整个响应对象查看结构
  163. this.eventstag = response.data;
  164. console.log(response.data)
  165. }).catch(error => {
  166. console.error('数据获取失败:', error);
  167. });
  168. },
  169. onView(e) {
  170. console.log('传递的ID:', e);
  171. uni.navigateTo({
  172. url: '/pages/home/detail/detail?id=' + e,
  173. })
  174. },
  175. },
  176. }
  177. </script>
  178. <style lang="scss">
  179. @import "./index.scss"
  180. </style>