|
|
@@ -1,405 +0,0 @@
|
|
|
-<template>
|
|
|
- <scroll-view scroll-y class="cinema">
|
|
|
- <view class='topbar'>
|
|
|
- <topbar>
|
|
|
- <view class="topbar-box">
|
|
|
- <view class="left-box" @click="$utils.goPage(`/pages/cinema/citylist`,null,{cityList:cityList})">
|
|
|
- <van-icon name="location" />
|
|
|
- <text>{{address}}</text>
|
|
|
- <van-icon name="arrow-down" />
|
|
|
- </view>
|
|
|
- <van-search shape="round" :placeholder="searchTitle" @search='onSearchChange' @change='onSearchChange' />
|
|
|
- </view>
|
|
|
- </topbar>
|
|
|
- </view>
|
|
|
- <view class="tabs-box">
|
|
|
- <van-tabs :active='tabActive' animated @change='tabsChange'>
|
|
|
- <van-tab title="热映">
|
|
|
- <loadSke :loading='hotLoading' :list='hotList'>
|
|
|
- <view class="flex-box">
|
|
|
- <view @click="$utils.goPage(`/pages/cinema/cinemalist?filmId=${item.filmId}&cityId=${cityId}&location=${location}`)"
|
|
|
- class="film-box" v-for="(item) in hotList" :key='item.filmId'>
|
|
|
- <image :src="item.pic" mode="scaleToFill" class="img" draggable></image>
|
|
|
- <view class="bottom-box">
|
|
|
- <view class="tit">
|
|
|
- <text class="text-1">{{item.name}}</text>
|
|
|
- <text class="text-2">{{item.grade ?'评分'+item.grade : '暂无评分'}}</text>
|
|
|
- </view>
|
|
|
- <view class="des-box">
|
|
|
- <view class="des">{{item.filmTypes}}</view>
|
|
|
- <view class="des">{{item.cast}}</view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <button type="default" class="buy">
|
|
|
- 购 票
|
|
|
- </button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </loadSke>
|
|
|
- </van-tab>
|
|
|
- <van-tab title="影院">
|
|
|
- <loadSke :loading='cinemaLoading' :list='cinemaList'>
|
|
|
- <cinema-Item @tap='$utils.goPage(`/pages/cinema/schedulelist?cinemaId=${item.cinemaId}&filmId=${filmId}`)'
|
|
|
- v-for="item in cinemaList" :key='item.cinemaId' :cinema='item'></cinema-Item>
|
|
|
- </loadSke>
|
|
|
- </van-tab>
|
|
|
- <van-tab title="即将上映">
|
|
|
- <loadSke :loading='soonLoading'>
|
|
|
- <view class="soon-box" v-for="(ObjItem,ObjIndex) in soonList" :key='ObjIndex'>
|
|
|
- <view class="tit-text">
|
|
|
- <van-icon class='icon' name="https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/%E6%97%A5%E6%9C%9F.png" />
|
|
|
- {{ObjIndex}}
|
|
|
- </view>
|
|
|
- <view class="flex-box">
|
|
|
- <view class="film-box" v-for="(item) in ObjItem" :key='item.filmId'>
|
|
|
- <image :src="item.pic" mode="scaleToFill" class="img" draggable></image>
|
|
|
- <view class="bottom-box">
|
|
|
- <view class="tit">
|
|
|
- <text class="text-1">{{item.name}}</text>
|
|
|
- <text class="text-2">{{item.grade ?'评分'+item.grade : '暂无评分'}}</text>
|
|
|
- </view>
|
|
|
- <view class="des-box">
|
|
|
- <view class="des">{{item.filmTypes}}</view>
|
|
|
- <view class="des">{{item.cast}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </loadSke>
|
|
|
- </van-tab>
|
|
|
- </van-tabs>
|
|
|
- </view>
|
|
|
-
|
|
|
- </scroll-view>
|
|
|
-</template>
|
|
|
-
|
|
|
-
|
|
|
-<script>
|
|
|
- import cinemaItem from '@/pages/cinema/components/cinema-Item.vue'
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- cinemaItem
|
|
|
- },
|
|
|
- data: () => ({
|
|
|
- tabActive: 0,
|
|
|
- hotList: [],
|
|
|
- soonList: {},
|
|
|
- hotLoading: true,
|
|
|
- soonLoading: true,
|
|
|
- location: [119.131390, 26.150210],
|
|
|
- cityList: [],
|
|
|
- address: '定位中',
|
|
|
- cinemaList: [],
|
|
|
- cinemaLoading: true,
|
|
|
- searchList: null,
|
|
|
- searchType: 0,
|
|
|
- searchTitle: '请输入电影名称',
|
|
|
- }),
|
|
|
- async mounted() {
|
|
|
- this.setFilmDiscount()
|
|
|
- // await this.getLocation()
|
|
|
- await this.getCityList()
|
|
|
- this.init()
|
|
|
- this.cinemaListInit()
|
|
|
- },
|
|
|
- computed: {
|
|
|
- cityId() {
|
|
|
- return this.$store.state.cinema.cityId;
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- cityId() {
|
|
|
- this.address = this.$store.state.cinema.cityObj.regionName;
|
|
|
- this.init()
|
|
|
- this.cinemaListInit()
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- onSearchChange(e) {
|
|
|
- if (this.searchType == 0) {
|
|
|
- this.searchList || (this.searchList = this.hotList)
|
|
|
- this.hotList = this.searchList.filter(val => {
|
|
|
- return val.name.includes(e.detail)
|
|
|
- })
|
|
|
- }
|
|
|
- if (this.searchType == 1) {
|
|
|
- this.searchList || (this.searchList = this.cinemaList)
|
|
|
- this.cinemaList = this.searchList.filter(val => {
|
|
|
- return val.cinemaName.includes(e.detail)
|
|
|
- })
|
|
|
- }
|
|
|
- if (this.searchType == 2) {
|
|
|
- this.searchList || (this.searchList = this.soonList)
|
|
|
- this.soonList = {}
|
|
|
- for (let key in this.searchList) {
|
|
|
- let aDay = this.searchList[key].filter(val => {
|
|
|
- return val.name.includes(e.detail)
|
|
|
- })
|
|
|
- aDay.length && (this.soonList[key] = aDay)
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- tabsChange(e) {
|
|
|
- let listMap = new Map([
|
|
|
- [0, () => this.hotList = this.searchList],
|
|
|
- [1, () => this.cinemaList = this.searchList],
|
|
|
- [2, () => this.soonList = this.searchList]
|
|
|
- ])
|
|
|
- //切换搜索前复原数据
|
|
|
- this.searchList && listMap.get(this.searchType)()
|
|
|
-
|
|
|
- this.tabActive = e.detail.index
|
|
|
- this.searchType = e.detail.index
|
|
|
- this.searchList = null
|
|
|
-
|
|
|
- let aMap = new Map([
|
|
|
- [0, '请输入电影名称'],
|
|
|
- [1, '请输入影院名称'],
|
|
|
- [2, '请输入电影名称']
|
|
|
- ])
|
|
|
- //修改搜索框提示
|
|
|
- this.searchTitle = aMap.get(e.detail.index)
|
|
|
- },
|
|
|
- setFilmDiscount() {
|
|
|
- this.$api.cinema.getFilmDiscount().then(res => {
|
|
|
- this.$store.commit('SET_FILMDISCOUNT', res.data)
|
|
|
- })
|
|
|
- },
|
|
|
- // async getLocation() {
|
|
|
- // try {
|
|
|
- // let location = await wx.getLocation()
|
|
|
- // this.location = [location.longitude.toFixed(6), location.latitude.toFixed(6)]
|
|
|
- // let address = await this.$api.amap.regeo({
|
|
|
- // location: this.location.toString()
|
|
|
- // })
|
|
|
- // this.address = address.regeocode.addressComponent.city.slice(0, -1)
|
|
|
- // } catch (e) {
|
|
|
- // console.log(e)
|
|
|
- // this.address = '北京'
|
|
|
- // }
|
|
|
- // },
|
|
|
- async getCityList() {
|
|
|
- let cityListRes = await this.$api.cinema.getCityList()
|
|
|
- let cityList = cityListRes.data.data.list
|
|
|
- let cityObj = {}
|
|
|
- cityList.map((val) => {
|
|
|
- cityObj[val.pinYin] || (cityObj[val.pinYin] = [])
|
|
|
- cityObj[val.pinYin].push(val)
|
|
|
- if (val.regionName == this.address) {
|
|
|
- this.selectCity(val)
|
|
|
- }
|
|
|
- })
|
|
|
- this.cityList = cityObj
|
|
|
- },
|
|
|
- async init() {
|
|
|
- this.hotLoading = true
|
|
|
- this.soonLoading = true
|
|
|
- let hotListRes = await this.$api.cinema.getHotList({
|
|
|
- cityId: this.cityId
|
|
|
- })
|
|
|
- this.hotList = hotListRes.data.data.list
|
|
|
- this.$nextTick(() => {
|
|
|
- this.hotLoading = false
|
|
|
- })
|
|
|
-
|
|
|
- let soonListRes = await this.$api.cinema.getSoonList({
|
|
|
- cityId: this.cityId
|
|
|
- })
|
|
|
- let soonListObj = {}
|
|
|
- soonListRes.data.data.list.forEach((val) => {
|
|
|
- soonListObj[val.publishDate.slice(0, 10)] || (soonListObj[val.publishDate.slice(0, 10)] = [])
|
|
|
- soonListObj[val.publishDate.slice(0, 10)].push(val)
|
|
|
- })
|
|
|
- this.soonList = soonListObj
|
|
|
- this.$store.commit('SET_FILMLIST', this.hotList.concat(soonListRes.data.data.list))
|
|
|
- this.$nextTick(() => {
|
|
|
- this.soonLoading = false
|
|
|
- })
|
|
|
- },
|
|
|
- async cinemaListInit() {
|
|
|
- this.cinemaLoading = true
|
|
|
- let showListRes = await this.$api.cinema.getCinemaList({
|
|
|
- cityId: this.cityId,
|
|
|
- latitude: this.location[1],
|
|
|
- longitude: this.location[0],
|
|
|
- })
|
|
|
- showListRes.data.data.list.map(val => {
|
|
|
- val.distance = (Math.sqrt((val.latitude - this.location[1]) ** 2 + (val.longitude - this.location[0]) ** 2) *
|
|
|
- 111).toFixed(2)
|
|
|
- return val
|
|
|
- })
|
|
|
- showListRes.data.data.list.sort(function(a, b) {
|
|
|
- return a.distance - b.distance
|
|
|
- })
|
|
|
- this.cinemaList = showListRes.data.data.list
|
|
|
- this.cinemaLoading = false
|
|
|
- },
|
|
|
- selectCity(obj) {
|
|
|
- this.$store.commit('SET_CITYOBJ', obj)
|
|
|
- this.$store.commit('SET_CITYID', obj.cityId)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
- .cinema {
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .topbar {
|
|
|
- position: sticky;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- z-index: 10;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .topbar-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .left-box {
|
|
|
- min-width: 150rpx;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- margin-left: 20rpx;
|
|
|
-
|
|
|
- text {
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .tab {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: stretch;
|
|
|
- background-color: #FFFFFF;
|
|
|
- position: sticky;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 1;
|
|
|
-
|
|
|
- .text {
|
|
|
- padding: 30rpx 0;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #0F0404;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .hover {
|
|
|
- border-bottom: 6rpx solid red;
|
|
|
- }
|
|
|
-
|
|
|
- .location-box {
|
|
|
- padding: 30rpx 0;
|
|
|
- font-size: 30rpx;
|
|
|
- color: #0F0404;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .flex-box {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- flex-wrap: wrap;
|
|
|
- background: #FFFFFF;
|
|
|
- margin-top: 1rpx;
|
|
|
- padding: 0rpx 20rpx;
|
|
|
- padding-bottom: 20rpx;
|
|
|
-
|
|
|
- .film-box {
|
|
|
- width: 334rpx;
|
|
|
- border-radius: 20rpx;
|
|
|
- overflow: hidden;
|
|
|
- background: #FFFFFF;
|
|
|
- margin: 30rpx 11rpx 0;
|
|
|
- box-shadow: 0px 2px 16px 0px rgba(68, 6, 6, 0.2);
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 100%;
|
|
|
- height: 456rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .bottom-box {
|
|
|
- padding: 30rpx 20rpx;
|
|
|
-
|
|
|
- .tit {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .text-1 {
|
|
|
- width: 200rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
-
|
|
|
- .text-2 {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #ED4F24;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .des-box {
|
|
|
- margin-top: 20rpx;
|
|
|
-
|
|
|
- .des {
|
|
|
- width: 100%;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #666666;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .buy {
|
|
|
- margin-top: 30rpx;
|
|
|
- width: 126rpx;
|
|
|
- height: 60rpx;
|
|
|
- background: linear-gradient(90deg, #E31818, #ED3E24, #ED4F24);
|
|
|
- border-radius: 30rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: 400;
|
|
|
- color: #FFFFFF;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .soon-box {
|
|
|
- margin-top: 20rpx;
|
|
|
-
|
|
|
- .tit-text {
|
|
|
- background-color: #FFF0E5;
|
|
|
- padding: 28rpx 55rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- font-weight: bold;
|
|
|
- color: #0F0404;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .icon {
|
|
|
- margin-right: 20rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
