123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333 |
- <template>
- <view class="container">
- <!-- <page-top-bar /> -->
- <view class="top-bar">
- <view class="row">
- <view class="column column1" @click="navTo(1,'/pages/theater/index/index')">
- <image src="@/static/images/backhome.png" style="width: 24px; height: 24px;"></image>
- </view>
- <view class="column column2"><input @input="KeyName" class="input-box" type="text" placeholder="搜索内容"
- style="width: 100%;" /></view>
- <view class="column column3">
- <image src="@/static/images/fangdajing.png" style="width: 21px; height: 21px;" @click="seachText">
- </image>
- </view>
- <view class="column column4"></view>
- </view>
- </view>
- <view class="banner">
- <swiper style="height: 240px;" indicator-dots="true" autoplay="true" interval="2000" duration="500">
- <swiper-item v-for="hot in eventshot" @click="onView(hot.id)">
- <image :src=hot.imgList[0] class="slide-image"></image>
- </swiper-item>
- </swiper>
- </view>
- <view class="section1">
- <view class="serow">
- <view class="column">
- <view class="cell" :class="active == 6?'active':''" @click="selActive('',6)">
- <view class="cl">
- <image :src="'/static/images/chart_alt6.png'" style="width: 24px; height: 24px;">
- </image>
- </view>
- <view class="cl">全部</view>
- </view>
- </view>
- <view class="column" v-for="(tag,index) in eventstag">
- <view class="cell" :class="active == index?'active':''" @click="selActive(tag,index)">
- <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>
- </view>
- </view>
- <view class="full-row">
- <view class="rows" @click="showCity">
- <view class="column" style="min-width: 40px;">
- {{activeCity}}
- </view>
- <view class="column2">
- <image src="/static/images/arr.png" style="width: 10px; height: 10px;"></image>
- </view>
- </view>
- <view class="rows" @click="showType">
- <view class="column">类型</view>
- <view class="column2">
- <image src="/static/images/arr.png" style="width: 10px; height: 10px;"></image>
- </view>
- </view>
- </view>
- <view class="selected" v-if="cityShow">
- <view class="textInfo" @click="selCity('全国')">
- 全国
- </view>
- <view class="textInfo" v-for="(item,index) in cityLists" :key='index' @click="selCity(item)">
- {{item.name}}
- </view>
- </view>
- <view class="selected" style="left: 16%;width: 80px;" v-if="typeShow">
- <view class="textInfo" :class="active == 6?'active':''" @click="selActive('',6)">
- 全部
- </view>
- <view class="textInfo" :class="active == index?'active':''" v-for="(item,index) in eventList"
- :key='index' @click="selActive(item,index)">
- {{item.name}}
- </view>
- </view>
- </view>
- <view class="section3" style="padding-bottom: 110px;">
- <view class="item" @click="onView(event.id)" v-for="event in events" :key="event.id">
- <view class="item_img">
- <img :src="event.imgList[0]"></img>
- </view>
- <view class="item_info">
- <view class="title"> {{ event.title }}</view>
- <view class="time_yuyue">
- <view class="ico">
- <image src="/static/images/time.png" style="width: 12px; height: 12px;"></image>
- </view>
- <!-- - {{ event.closeTime }} -->
- <view class="time">{{ event.openTime }} </view>
- <view class="adres_yuyue">
- <view class="ico">
- <image src="/static/images/daohang.png" style="width: 12px; height: 12px;"></image>
- </view>
- <view class="didian">{{ event.address }}</view>
- </view>
- <view class="yuyue_btn" @click="onView(event.id)" >
- <button type="default" style="background-color: white; font-size: 14px; height: 30px; line-height: 30px; color: #666; font-weight: bold;border: 1px solid #666; border-radius: 8px; padding: 0px 4px;">立即预约</button>
- </view>
- </view>
- </view>
- </view>
- </view>
- <page-btm-bar :active="1" />
- </view>
- </template>
- <script>
- import {
- mapState,
- mapGetters,
- mapMutations
- } from 'vuex'
- const app = getApp();
- const data = require('@/static/city.json')
- export default {
- computed: {
- ...mapState(['store_id', 'systemInfo'])
- },
- data() {
- return {
- events: [], // 用于存储事件数据
- eventshot: [],
- eventstag: [],
- active: 6,
- tagId: '',
- keyword: '',
- cityShow: false,
- cityLists: [],
- cities: data,
- activeCity: '全国',
- city: '',
- typeShow: false,
- eventList: [],
- total: null, //总共多少条数据
- formData: {
- pageSize: 10, //每页10条数据
- page: 1, //第几页
- }
- };
- },
- mounted() {
- this.fetchEventsData();
- this.fetchEventsHotData();
- this.fetchEventsTag();
- },
- onReachBottom() {
- let allTotal = this.formData.page * this.formData.pageSize
- if (allTotal < this.total) {
- //当前条数小于总条数 则增加请求页数
- this.formData.page++;
- this.fetchEventsData() //调用加载数据方法
- } else {
- // console.log('已加载全部数据')
- }
- },
- onPullDownRefresh() {
- this.events = []
- //调用获取数据方法
- this.getData()
- setTimeout(() => {
- //结束下拉刷新
- uni.stopPullDownRefresh();
- }, 1000);
- },
- methods: {
- showType() {
- let _this = this
- this.cityShow=false
- _this.$http.request('events/searchTags', {
- page: 1,
- pageSize: 50,
- }).then(response => {
- console.log(response); // 先打印整个响应对象查看结构
- this.eventList = response.data;
- this.typeShow = !this.typeShow
- }).catch(error => {
- console.error('数据获取失败:', error);
- });
- },
- selCity(item) {
- if(item=='全国'){
- this.activeCity=item
- this.city = ""
- this.cityShow = false
- this.fetchEventsData()
- }else{
- console.log(item);
- this.activeCity = item.name
- this.city = item.city
- this.cityShow = false
- this.fetchEventsData()
- }
-
- },
- showCity() {
- this.typeShow=false
- this.cityShow = !this.cityShow
- },
- navTo(index, url) {
- if (index != this.active) {
- uni.switchTab({
- url: url
- })
- }
- },
- //搜索内容
- seachText() {
- this.$http.request('events/searchEvents', {
- page: 1,
- pageSize: 10,
- keyword: this.keyword
- }).then(response => {
- this.events = response.data;
- }).catch(error => {
- console.error('数据获取失败:', error);
- });
- },
- KeyName(t) {
- this.keyword = t.detail.value;
- },
- //切换筛选条件
- selActive(item, index) {
- if(item==''){
- this.city=''
- }
- this.tagId = item.id
- this.active = index
- this.fetchEventsData()
- this.typeShow = false
- },
- fetchEventsData() {
- let _this = this;
- _this.formData.tagId = _this.tagId;
- _this.formData.city = _this.city;
- _this.$http.request('events/searchEvents', _this.formData).then(response => {
- if (_this.cityLists.length === 0) {
- response.data.forEach(item => {
- _this.cities.forEach(el => {
- if (item.province === el.code) {
- let obj = {
- name: el.name,
- city: item.city
- };
- // 检查是否已经存在相同的城市对象
- if (!_this.cityLists.some(city => city.city === obj.city)) {
- _this.cityLists.push(obj);
- }
- }
- });
- });
- }
- console.log(_this.cityLists); // 先打印整个响应对象查看结构
- _this.total = response.data.length;
- _this.events = response.data;
- }).catch(error => {
- console.error('数据获取失败:', error);
- });
- },
- fetchEventsHotData() {
- let _this = this;
- _this.$http.request('events/searchEvents', {
- page: 1,
- pageSize: 5,
- hot: 1,
- }).then(response => {
- console.log(response); // 先打印整个响应对象查看结构
- this.eventshot = response.data;
- console.log(response.data)
- }).catch(error => {
- console.error('数据获取失败:', error);
- });
- },
- fetchEventsTag() {
- let _this = this;
- _this.$http.request('events/searchTags', {
- page: 1,
- pageSize: 4,
- }).then(response => {
- console.log(response); // 先打印整个响应对象查看结构
- this.eventstag = response.data;
- console.log(response.data)
- }).catch(error => {
- console.error('数据获取失败:', error);
- });
- },
- onView(e) {
- console.log('传递的ID:', e);
- uni.navigateTo({
- url: '/pages/home/detail/detail?id=' + e,
- })
- },
- },
- }
- </script>
- <style lang="scss">
- @import "./index.scss"
- </style>
|