home.vue 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  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/theater/index/index')">
  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="serow">
  27. <view class="column">
  28. <view class="cell" :class="active == 6?'active':''" @click="selActive('',6)">
  29. <view class="cl">
  30. <image :src="'/static/images/chart_alt6.png'" style="width: 24px; height: 24px;">
  31. </image>
  32. </view>
  33. <view class="cl">全部</view>
  34. </view>
  35. </view>
  36. <view class="column" v-for="(tag,index) in eventstag">
  37. <view class="cell" :class="active == index?'active':''" @click="selActive(tag,index)">
  38. <view class="cl">
  39. <image :src="'/static/images/chart_alt'+index+'.png'" style="width: 24px; height: 24px;">
  40. </image>
  41. </view>
  42. <view class="cl">{{tag.name}}</view>
  43. </view>
  44. </view>
  45. </view>
  46. <view class="full-row">
  47. <view class="rows" @click="showCity">
  48. <view class="column">
  49. {{activeCity}}
  50. </view>
  51. <view class="column2">
  52. <image src="/static/images/arr.png" style="width: 10px; height: 10px;"></image>
  53. </view>
  54. </view>
  55. <view class="rows" @click="showType">
  56. <view class="column">类型</view>
  57. <view class="column2">
  58. <image src="/static/images/arr.png" style="width: 10px; height: 10px;"></image>
  59. </view>
  60. </view>
  61. </view>
  62. <view class="selected" v-if="cityShow">
  63. <view class="textInfo" v-for="(item,index) in cityLists" :key='index' @click="selCity(item)">
  64. {{item.name}}
  65. </view>
  66. </view>
  67. <view class="selected" style="left: 16%;" v-if="typeShow">
  68. <view class="textInfo" :class="active == index?'active':''" v-for="(item,index) in eventList"
  69. :key='index' @click="selActive(item,index)">
  70. {{item.name}}
  71. </view>
  72. </view>
  73. </view>
  74. <view class="section3" style="padding-bottom: 75px;">
  75. <view class="item" @click="onView(event.id)" v-for="event in events" :key="event.id">
  76. <view class="item_img">
  77. <img :src="event.imgList[0]"></img>
  78. </view>
  79. <view class="item_info">
  80. <view class="title"> {{ event.title }}</view>
  81. <view class="time_yuyue">
  82. <view class="ico">
  83. <image src="/static/images/time.png" style="width: 12px; height: 12px;"></image>
  84. </view>
  85. <view class="time">{{ event.openTime }} - {{ event.closeTime }}</view>
  86. <view class="time_yuyue">
  87. <view class="ico">
  88. <image src="/static/images/daohang.png" style="width: 12px; height: 12px;"></image>
  89. </view>
  90. <view class="didian">{{ event.address }}</view>
  91. </view>
  92. <view class="yuyue_btn" @click="onView(event.id)">
  93. <image src="/static/images/lijiyuyue.jpg" style="width: 89px;height: 25px;"></image>
  94. </view>
  95. </view>
  96. </view>
  97. </view>
  98. </view>
  99. <page-btm-bar :active="1" />
  100. </view>
  101. </template>
  102. <script>
  103. import {
  104. mapState,
  105. mapGetters,
  106. mapMutations
  107. } from 'vuex'
  108. const app = getApp();
  109. const data = require('@/static/city.json')
  110. export default {
  111. computed: {
  112. ...mapState(['store_id', 'systemInfo'])
  113. },
  114. data() {
  115. return {
  116. events: [], // 用于存储事件数据
  117. eventshot: [],
  118. eventstag: [],
  119. active: 6,
  120. tagId: '',
  121. keyword: '',
  122. cityShow: false,
  123. cityLists: [],
  124. cities: data,
  125. activeCity: '全国',
  126. city: '',
  127. typeShow: false,
  128. eventList: [],
  129. total: null, //总共多少条数据
  130. formData: {
  131. pageSize: 10, //每页10条数据
  132. page: 1, //第几页
  133. }
  134. };
  135. },
  136. mounted() {
  137. this.fetchEventsData();
  138. this.fetchEventsHotData();
  139. this.fetchEventsTag();
  140. },
  141. onReachBottom() {
  142. let allTotal = this.formData.page * this.formData.pageSize
  143. if (allTotal < this.total) {
  144. //当前条数小于总条数 则增加请求页数
  145. this.formData.page++;
  146. this.fetchEventsData() //调用加载数据方法
  147. } else {
  148. // console.log('已加载全部数据')
  149. }
  150. },
  151. onPullDownRefresh() {
  152. this.events = []
  153. //调用获取数据方法
  154. this.getData()
  155. setTimeout(() => {
  156. //结束下拉刷新
  157. uni.stopPullDownRefresh();
  158. }, 1000);
  159. },
  160. methods: {
  161. showType() {
  162. let _this = this
  163. _this.$http.request('events/searchTags', {
  164. page: 1,
  165. pageSize: 50,
  166. }).then(response => {
  167. console.log(response); // 先打印整个响应对象查看结构
  168. this.eventList = response.data;
  169. this.typeShow = !this.typeShow
  170. }).catch(error => {
  171. console.error('数据获取失败:', error);
  172. });
  173. },
  174. selCity(item) {
  175. this.activeCity = item.name
  176. console.log(item);
  177. this.city = item.city
  178. this.cityShow = false
  179. this.fetchEventsData()
  180. },
  181. showCity() {
  182. this.cityShow = !this.cityShow
  183. },
  184. navTo(index, url) {
  185. if (index != this.active) {
  186. uni.switchTab({
  187. url: url
  188. })
  189. }
  190. },
  191. //搜索内容
  192. seachText() {
  193. this.$http.request('events/searchEvents', {
  194. page: 1,
  195. pageSize: 10,
  196. keyword: this.keyword
  197. }).then(response => {
  198. this.events = response.data;
  199. }).catch(error => {
  200. console.error('数据获取失败:', error);
  201. });
  202. },
  203. KeyName(t) {
  204. this.keyword = t.detail.value;
  205. },
  206. //切换筛选条件
  207. selActive(item, index) {
  208. if(item==''){
  209. this.city=''
  210. }
  211. this.tagId = item.id
  212. this.active = index
  213. this.fetchEventsData()
  214. this.typeShow = false
  215. },
  216. fetchEventsData() {
  217. let _this = this;
  218. _this.formData.tagId = _this.tagId;
  219. _this.formData.city = _this.city;
  220. _this.$http.request('events/searchEvents', _this.formData).then(response => {
  221. if (_this.cityLists.length === 0) {
  222. response.data.forEach(item => {
  223. _this.cities.forEach(el => {
  224. if (item.province === el.code) {
  225. let obj = {
  226. name: el.name,
  227. city: item.city
  228. };
  229. // 检查是否已经存在相同的城市对象
  230. if (!_this.cityLists.some(city => city.city === obj.city)) {
  231. _this.cityLists.push(obj);
  232. }
  233. }
  234. });
  235. });
  236. }
  237. console.log(_this.cityLists); // 先打印整个响应对象查看结构
  238. _this.total = response.data.length;
  239. _this.events = response.data;
  240. }).catch(error => {
  241. console.error('数据获取失败:', error);
  242. });
  243. },
  244. fetchEventsHotData() {
  245. let _this = this;
  246. _this.$http.request('events/searchEvents', {
  247. page: 1,
  248. pageSize: 5,
  249. hot: 1,
  250. }).then(response => {
  251. console.log(response); // 先打印整个响应对象查看结构
  252. this.eventshot = response.data;
  253. console.log(response.data)
  254. }).catch(error => {
  255. console.error('数据获取失败:', error);
  256. });
  257. },
  258. fetchEventsTag() {
  259. let _this = this;
  260. _this.$http.request('events/searchTags', {
  261. page: 1,
  262. pageSize: 4,
  263. }).then(response => {
  264. console.log(response); // 先打印整个响应对象查看结构
  265. this.eventstag = response.data;
  266. console.log(response.data)
  267. }).catch(error => {
  268. console.error('数据获取失败:', error);
  269. });
  270. },
  271. onView(e) {
  272. console.log('传递的ID:', e);
  273. uni.navigateTo({
  274. url: '/pages/home/detail/detail?id=' + e,
  275. })
  276. },
  277. },
  278. }
  279. </script>
  280. <style lang="scss">
  281. @import "./index.scss"
  282. </style>