402 lines
9.8 KiB
Vue
402 lines
9.8 KiB
Vue
<!-- 电影首页 -->
|
||
|
||
<template>
|
||
<view class="film">
|
||
<view class="film-header">
|
||
<view class="film-city">
|
||
<navigator url="/pages/film/filmAddress" hover-class="none">
|
||
<view class="content-top-search-area-search-text">
|
||
<!-- 第一次获取肯定是获取不到的，主要是动态显示用户改变的地址 -->
|
||
<view class="film-city-name">
|
||
<view class="film-city-text">{{UserFilmArae['regionName']? UserFilmArae['regionName'] : UserFilmArae['cityName'] ? UserFilmArae['cityName'] : UserArae2['city']}}</view>
|
||
<image style="width: 35rpx;height: 30rpx;" class="img" src="https://img.agrimedia.cn/chwl%2Fv2%2Fxialajian%20hei.png"></image>
|
||
</view>
|
||
</view>
|
||
</navigator>
|
||
</view>
|
||
|
||
<view class="film-tab">
|
||
<view class="tab-main tab-left" :class="active === 0? 'tab-active':''" @click="changeTab(0)">
|
||
电影
|
||
</view>
|
||
<view class="tab-main tab-right" :class="active === 1? 'tab-active':''" @click="changeTab(1)">
|
||
影院
|
||
</view>
|
||
</view>
|
||
<view class="film-search" @click="goSearchPage">
|
||
<image src="https://img.agrimedia.cn/chwl%2Fv2%2Fsousuo%20hei.png"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 电影/影院 -->
|
||
<view class="content">
|
||
<view class="content-film" v-if="active === 0">
|
||
<view class="film-banner">
|
||
<image src="https://img.agrimedia.cn/chwl%2Fv2%2Fbanner.jpg"></image>
|
||
</view>
|
||
<view class="film-list">
|
||
<view class="film-wrap">
|
||
<u-sticky bgColor="">
|
||
<u-tabs @click="clickTabs" activeStyle="color:#FC4B5C; font-size:28rpx; font-weight:600"
|
||
inactiveStyle="color:#666666; font-size:28rpx;" lineColor="#FC4B5C" keyName="name"
|
||
:current="current" :scrollable="false" :list="listTab"></u-tabs>
|
||
</u-sticky>
|
||
</view>
|
||
<!-- 电影组件 -->
|
||
<view v-for="(item, index) in listFilm" :key="index">
|
||
<film-item :data="item" :key="index"></film-item>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="content-movie" v-if="active === 1">
|
||
<view class="content-movie-tab">
|
||
<view class="content-movie-item">
|
||
<view class="flex align-item-center flex-center">
|
||
<text>全城</text>
|
||
<image style="width: 35rpx;height: 30rpx;" class="img" src="https://img.agrimedia.cn/chwl%2Fv2%2Fxialajian%20hei.png" @click="getCityData()"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 下拉选项 -->
|
||
<view class="content-movie-select" v-show="citySelct">
|
||
<view class="content-item" @click="allCity()">
|
||
<view class="content-title">全城</view>
|
||
<view class="content-number">{{CityMovies}}</view>
|
||
</view>
|
||
<view class="content-item" v-for="(city, index) in cityData" :key="city.id" @click="clickCity(city)">
|
||
<view class="content-title">{{city.regionName}}</view>
|
||
<view class="content-number">{{city.cinema_num}}</view>
|
||
</view>
|
||
</view>
|
||
<!-- 影院组件 -->
|
||
<view v-for="(item, index) in listYuan" :key="index" v-if="listYuan">
|
||
<movies-item :data="item" :key="index" :isFilm='true'></movies-item>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 加载状态 -->
|
||
<b-load :show="loading" width="79" height="80" background="rgba(0,0,0,0.3)" type="load"></b-load>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getCityId, getFilmList, getFilmYuan } from '@/request/film/index.js';
|
||
import FileItem from '@/components/film-item/film-item.vue';
|
||
import MoviesItem from '@/components/movies-item/movies-item.vue';
|
||
import mixin from '@/static/js/mixin/mixin.js';
|
||
import film from '@/static/js/mixin/film.js';
|
||
import restaurantmixins from '@/static/js/mixin/restaurantmixins.js';
|
||
import { mapGetters, mapMutations } from 'vuex';
|
||
|
||
export default {
|
||
name: "",
|
||
mixins: [mixin, film, restaurantmixins],
|
||
components: {
|
||
FileItem,
|
||
MoviesItem
|
||
},
|
||
data() {
|
||
return {
|
||
current: 0,
|
||
CityMovies: 0,
|
||
listTab:[
|
||
{ name:'正在热映', type: 'HOT' },
|
||
{ name:'即将上映', type: 'WAIT' }
|
||
],
|
||
listFilm: [],
|
||
active: 0,
|
||
NowActive: 0,
|
||
citySelct: false,
|
||
|
||
// 加载状态关闭
|
||
loading: true,
|
||
cityData: [],
|
||
|
||
cityId: "" ,// 当前城市名
|
||
|
||
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getCity()
|
||
this.getFilmData()
|
||
this.getYuanData()
|
||
},
|
||
computed: {
|
||
...mapGetters({
|
||
// 获取用户自主改变的地址
|
||
UserArae1: 'GetUserArae',
|
||
// 获取用户自主选择的电影城市信息
|
||
UserFilmArae: 'GetFilmData',
|
||
// 获取用户设备定位的地址
|
||
UserArae2: 'GetcityInfor',
|
||
}),
|
||
},
|
||
watch: {
|
||
UserFilmArae(val) {
|
||
this.getYuanData()
|
||
},
|
||
},
|
||
methods: {
|
||
...mapMutations({
|
||
SETFILMDATA: 'SETFILMDATA',
|
||
}),
|
||
|
||
/**
|
||
* @获取城市ID
|
||
* */
|
||
getCity() {
|
||
this.loading = true;
|
||
const params = {
|
||
city_name: this.UserFilmArae.cityName
|
||
}
|
||
getCityId(params).then((res) => {
|
||
let num = 0
|
||
res.data.map(item => {
|
||
num += item.cinema_num
|
||
})
|
||
|
||
this.CityMovies = num
|
||
this.cityData = res.data;
|
||
this.loading = false;
|
||
});
|
||
},
|
||
|
||
/**
|
||
* @获取电影列表
|
||
* */
|
||
getFilmData() {
|
||
const params = {
|
||
type: this.listTab[this.NowActive].type
|
||
}
|
||
getFilmList(params).then((res) => {
|
||
let listData = res.data;
|
||
|
||
// 上映排序
|
||
if (params.type == 'WAIT') {
|
||
listData = this.ReverseRankingDate(listData, 'publishDate')
|
||
}
|
||
|
||
this.listFilm = listData;
|
||
this.loading = false;
|
||
});
|
||
},
|
||
/**
|
||
* @获取电影院
|
||
* */
|
||
getYuanData() {
|
||
const params = {
|
||
cityId: this.UserFilmArae.cityId,
|
||
regionId: this.UserFilmArae.regionId
|
||
}
|
||
getFilmYuan(params).then((res) => {
|
||
this.listYuan = res.data;
|
||
this.$forceUpdate()
|
||
});
|
||
},
|
||
|
||
// 选择全城
|
||
allCity() {
|
||
this.loading = true;
|
||
const params = {
|
||
cityId: this.UserFilmArae.cityId, // 全城ID
|
||
}
|
||
getFilmYuan(params).then((res) => {
|
||
this.listYuan = res.data;
|
||
this.$forceUpdate();
|
||
this.citySelct = false;
|
||
this.loading = false;
|
||
|
||
});
|
||
},
|
||
|
||
// 选择城市
|
||
clickCity(city) {
|
||
const FilmCity = {
|
||
cityName: this.UserFilmArae.cityName,
|
||
cityId: this.UserFilmArae.cityId,
|
||
regionName: city.regionName,
|
||
regionId: city.regionId
|
||
}
|
||
this.SETFILMDATA(FilmCity);
|
||
this.citySelct = !this.citySelct;
|
||
},
|
||
|
||
// 下拉选择区域
|
||
getCityData() {
|
||
this.citySelct = !this.citySelct;
|
||
if (this.citySelct) {
|
||
this.getCity() // 更新下拉
|
||
}
|
||
},
|
||
|
||
// 影片类型
|
||
clickTabs(e) {
|
||
this.current = e.index;
|
||
this.NowActive = e.index;
|
||
this.loading = true;
|
||
this.getFilmData();
|
||
},
|
||
|
||
// 搜索
|
||
goSearchPage() {
|
||
uni.navigateTo({
|
||
url: `./filmSearch?type=${this.active}` // 0 电影 1 影院
|
||
})
|
||
},
|
||
|
||
// 电影or影院
|
||
changeTab(index, isTop) {
|
||
this.active = index;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #F5F5F5;
|
||
}
|
||
.film {
|
||
.film-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 24rpx;
|
||
margin: 0rpx 0rpx;
|
||
|
||
.film-city {
|
||
width: 300rpx;
|
||
font-size: 30rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
image {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
padding-left: 4rpx;
|
||
}
|
||
.film-city-name {
|
||
display: flex;
|
||
align-items: center;
|
||
.film-city-text {
|
||
width: 100rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow:ellipsis;
|
||
text-align: center;
|
||
display: inline-block;
|
||
}
|
||
image {
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
.film-tab {
|
||
width: 288rpx;
|
||
height: 66rpx;
|
||
border-radius: 32rpx;
|
||
border: 2rpx solid #FC4B5C;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
.tab-main {
|
||
width: 144rpx;
|
||
height: 66rpx;
|
||
font-size: 26rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #FC4B5C;
|
||
line-height: 66rpx;
|
||
text-align: center;
|
||
}
|
||
.tab-left {
|
||
border-radius: 32rpx 0rpx 0rpx 32rpx;
|
||
}
|
||
.tab-right {
|
||
border-radius: 0rpx 32rpx 32rpx 0rpx;
|
||
}
|
||
.tab-active {
|
||
color: #fff;
|
||
background-color: #FC4B5C;
|
||
}
|
||
}
|
||
.film-search {
|
||
width: 300rpx;
|
||
height: 40rpx;
|
||
text-align: right;
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.content {
|
||
.content-film {
|
||
.film-banner {
|
||
width: 100%;
|
||
height: 224rpx;
|
||
padding: 0rpx 24rpx 24rpx 24rpx;
|
||
image {
|
||
width: 100%;
|
||
height: 224rpx;
|
||
border-radius: 20rpx;
|
||
}
|
||
}
|
||
.film-list {
|
||
padding: 24rpx;
|
||
.film-wrap {
|
||
margin-bottom: 20rpx;
|
||
border-bottom: 1rpx solid #DEDEDE;
|
||
/deep/ .u-tabs__wrapper__nav__line {
|
||
bottom: 0px !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.content-movie {
|
||
width: 100%;
|
||
background-color: #ffffff;
|
||
position: relative;
|
||
.content-movie-tab {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
||
color: #333333;
|
||
font-size: 26rpx;
|
||
border-bottom: 2rpx solid #DEDEDE;
|
||
.content-movie-item {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
color: #333333;
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
.content-movie-select {
|
||
width: 100%;
|
||
background-color: #FFF;
|
||
position: absolute;
|
||
top: 80rpx;
|
||
.content-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0rpx 40rpx;
|
||
height: 80rpx;
|
||
color: #000000;
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |