486 lines
11 KiB
Vue
486 lines
11 KiB
Vue
<!-- 选择场次 -->
|
|
|
|
<template>
|
|
<view class="content">
|
|
<view class="main">
|
|
<view class="main-address">
|
|
<!-- 影院 -->
|
|
<view class="title">
|
|
<view class="name">{{cinemaData.cinemaName}}</view>
|
|
<view class="address">{{cinemaData.cinemaAddress}}</view>
|
|
</view>
|
|
<!-- 定位 -->
|
|
<view class="film-address" @click="openLocation()">
|
|
<image src="https://img.agrimedia.cn/chwl%2Fv2%2Fdingwei%20hei.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="main-desc">
|
|
<!-- 背景 -->
|
|
<view class="film-bg">
|
|
<image :src="ActiveFilm.posterUrl"></image>
|
|
</view>
|
|
<!-- 轮播 -->
|
|
<view class="film-banner">
|
|
<FilmSwiper
|
|
:galleryheight="165"
|
|
bkstart="#000000"
|
|
bkend="#000000"
|
|
:imgviewwidth="100"
|
|
:imgviewheight="120"
|
|
:showbadge="true"
|
|
badegtype="trian"
|
|
badegwidth="25"
|
|
badegheight="25"
|
|
:showdec="true"
|
|
:images="listFilm"
|
|
@clickimg="onclickimg"
|
|
@scrollerItem="scrollerItem">
|
|
</FilmSwiper>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 选中电影的简介 -->
|
|
<view class="film-desc" v-if="ActiveFilm.grade">
|
|
<view class="sanjiao"></view>
|
|
<view class="title">
|
|
<text class="name">{{ActiveFilm.movieName}}</text>
|
|
<text class="score">{{ActiveFilm.grade}}分</text>
|
|
</view>
|
|
<view class="desc">
|
|
{{ActiveFilm.duration}}分钟/{{ActiveFilm.movieType}}{{ActiveFilm.cast}}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- tab切换日期 -->
|
|
<view class="main-tab" v-if="tabTime">
|
|
<view class="main-tab-wrap">
|
|
<u-sticky bgColor="#FFFFFF">
|
|
<u-tabs @click="clickTabs" activeStyle="color:#FC4B5C; font-size:28rpx; font-weight:600"
|
|
inactiveStyle="color:#666666; font-size:28rpx;" lineColor="#FC4B5C" keyName="name"
|
|
:current="0" :scrollable="true" :list="tabTime"></u-tabs>
|
|
</u-sticky>
|
|
<view class="main-tab-content">
|
|
<div v-for="(item, index) in filmPlay" :key="item.showId">
|
|
<view v-for="(ite, ind) in item">
|
|
<film-play :filmList="ite" :filmData="ActiveFilm" :cinemaData="cinemaData"></film-play>
|
|
</view>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 无场次 -->
|
|
<view class="no-film" v-else>
|
|
<image src="https://img.agrimedia.cn/chwl%2Fv2%2Fwuchangci.png" mode=""></image>
|
|
<view class="no-text">未查询到场次信息</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载状态 -->
|
|
<b-load :show="loading" width="79" height="80" background="rgba(0,0,0,0.3)" type="load"></b-load>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import FilmPlay from '@/components/film-play/film-play.vue';
|
|
import FilmSwiper from '@/components/film-swiper/film-swiper.vue';
|
|
import { getFilmTime, getFilmList } from '@/request/film/index.js';
|
|
import film from '@/static/js/mixin/film.js';
|
|
import { mapMutations,mapGetters } from 'vuex';
|
|
|
|
export default {
|
|
mixins: [film],
|
|
components: {
|
|
FilmPlay,
|
|
FilmSwiper
|
|
},
|
|
data() {
|
|
return {
|
|
timer: null,
|
|
loading: true,
|
|
tabTime:[],
|
|
active: 0,
|
|
current: 0,
|
|
CityMovies: 0,
|
|
listTab:[
|
|
{ name:'正在热映', type: 'HOT' },
|
|
{ name:'即将上映', type: 'WAIT' }
|
|
],
|
|
methodDebounce: null,
|
|
NowActive: 0,
|
|
filmItem: [],
|
|
listFilm: [], // 电影数据
|
|
ActiveFilm: {}, // 当前选择电影详情
|
|
cinemaData: {}, // 影院数据
|
|
filmList: [], // 当前电影列表
|
|
dataList: [], // 所有电影数据
|
|
filmPlay: [] // 当前日期数据
|
|
}
|
|
},
|
|
|
|
onLoad(option) {
|
|
this.SETBRANDINFOR({
|
|
brand_id: 19,
|
|
brand_name:'电影票'
|
|
});
|
|
// 延迟一秒确保wxapi已经挂载
|
|
setTimeout(()=> {
|
|
// 设置微信分享标识
|
|
// wx.miniProgram.postMessage({ data: this['BrandInfor']['brand_id']});
|
|
try{
|
|
this.cinemaData = JSON.parse(decodeURIComponent(option.cinemaData)); // 影院详情
|
|
}catch(e){
|
|
console.log(option,'option--------');
|
|
//TODO handle the exception
|
|
this.cinemaData = {
|
|
cinemaId:option['cinemaId'],
|
|
cinemaAddress:option['cinemaAddress'],
|
|
cinemaName:option['cinemaName'],
|
|
longitude:option['longitude'],
|
|
latitude:option['latitude']
|
|
}; // 影院详情
|
|
}
|
|
this.getFilmData();
|
|
}, 1000);
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
// 获取品牌Id
|
|
BrandInfor: 'shopping/BrandInfor',
|
|
}),
|
|
},
|
|
|
|
methods: {
|
|
...mapMutations({
|
|
SETBRANDINFOR: 'shopping/SETBRANDINFOR'
|
|
}),
|
|
/**
|
|
* @获取场次列表
|
|
* */
|
|
getYuanData() {
|
|
this.tabTime = [];
|
|
this.loading = true;
|
|
const params = {
|
|
cinemaId: this.cinemaData.cinemaId,
|
|
movieId: this.ActiveFilm.movieId,
|
|
};
|
|
|
|
getFilmTime(params).then((res) => {
|
|
this.filmList = res.data.data.showInfor;
|
|
let brr = []
|
|
Object.keys(this.filmList).forEach(key => {
|
|
let obj = {}
|
|
obj.name = key
|
|
this.tabTime.push(obj)
|
|
|
|
let arr = []
|
|
arr.push(this.filmList[key])
|
|
brr.push(arr)
|
|
})
|
|
|
|
this.dataList = brr;
|
|
this.filmPlay = this.ReverseRankingDate(brr[0], 'showTime'); // 时间排序
|
|
this.loading = false;
|
|
});
|
|
},
|
|
/**
|
|
* @获取电影列表
|
|
* */
|
|
getFilmData() {
|
|
this.loading = true;
|
|
const params = {
|
|
type: this.listTab[this.NowActive].type,
|
|
cinemaId: this.cinemaData.cinemaId
|
|
}
|
|
getFilmList(params).then((res) => {
|
|
let listData = res.data;
|
|
|
|
this.listFilm = listData;
|
|
this.ActiveFilm = listData[0]; // 选中第一个电影
|
|
|
|
this.getYuanData()
|
|
this.loading = false;
|
|
});
|
|
},
|
|
|
|
// 点击轮播选中
|
|
onclickimg(e) {
|
|
this.ActiveFilm = e;
|
|
},
|
|
|
|
// 滚动轮播选中
|
|
scrollerItem(e) {
|
|
if (this.timer) return;
|
|
setTimeout(() => {
|
|
this.timer = null;
|
|
this.ActiveFilm = e;
|
|
this.getYuanData()
|
|
}, 500, true)
|
|
},
|
|
|
|
clickTabs(e) {
|
|
this.filmPlay = this.dataList[e.index]
|
|
},
|
|
lookesImg(index) {
|
|
let photoList = this.list.map(item => {
|
|
return item.thumb;
|
|
});
|
|
uni.previewImage({
|
|
current: 0,
|
|
urls: photoList.reverse()
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #F5F5F5;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.main {
|
|
width: 100%;
|
|
height: 100vh;
|
|
|
|
/deep/ swiper-item {
|
|
width: 100%;
|
|
height: 200rpx !important;
|
|
}
|
|
|
|
/deep/ .u-sticky {
|
|
border-radius: 40rpx 40rpx 0rpx 0rpx !important;
|
|
border-bottom: 2rpx solid #EDEDED;
|
|
}
|
|
|
|
/deep/ .u-tabs__wrapper__nav__line {
|
|
bottom: 0rpx !important;
|
|
}
|
|
|
|
.main-address {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20rpx 20rpx;
|
|
.film-address {
|
|
image {
|
|
width: 40rpx;
|
|
height: 42rpx;
|
|
}
|
|
}
|
|
.title {
|
|
.name {
|
|
font-weight: 900;
|
|
color: #000;
|
|
font-size: 30rpx;
|
|
}
|
|
.address {
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-desc {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 320rpx;
|
|
top: 0;
|
|
left: 0;
|
|
.film-bg {
|
|
width: 100%;
|
|
height: 320rpx;
|
|
overflow: hidden;
|
|
image {
|
|
width: 100%;
|
|
height: 320rpx;
|
|
filter: blur(10rpx);
|
|
transform: scale(1.2)
|
|
}
|
|
}
|
|
.film-banner {
|
|
position: absolute;
|
|
left:0;
|
|
right:0;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
|
|
.film-desc {
|
|
width: 100%;
|
|
background-color: #FFFFFF;
|
|
text-align: center;
|
|
color: #666666;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 20rpx 10rpx;
|
|
box-sizing: border-box;
|
|
margin-bottom: 20rpx;
|
|
position: relative;
|
|
.sanjiao {
|
|
position: absolute;
|
|
left:calc(50% - 15rpx);
|
|
top: -15rpx;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 15rpx solid transparent;
|
|
border-right: 15rpx solid transparent;
|
|
border-bottom: 15rpx solid #FFFFFF;
|
|
}
|
|
.title {
|
|
.name {
|
|
color: #000;
|
|
font-size: 34rpx;
|
|
font-weight: 900;
|
|
padding-right: 6rpx;
|
|
}
|
|
.score {
|
|
color: #FF6D04;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.desc {
|
|
font-size: 28rpx;
|
|
color: #666666;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
.film-tab {
|
|
width: 100%;
|
|
height: 50vh;
|
|
background-color: #FFFFFF;
|
|
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
|
}
|
|
|
|
.main-tab {
|
|
width: 100%;
|
|
background-color: #FFFFFF;
|
|
.main-tab-wrap {
|
|
.main-tab-content {
|
|
padding: 20rpx 24rpx;
|
|
box-sizing: border-box;
|
|
.scroll-List {
|
|
.scroll-item {
|
|
margin-right: 20rpx;
|
|
image {
|
|
width: 160rpx;
|
|
height: 224rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
.scroll-name {
|
|
font-size: 26rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
margin-top: 10rpx;
|
|
}
|
|
.scroll-sub {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 32rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
.priver-image {
|
|
width: 100%;
|
|
height: 200rpx;
|
|
}
|
|
.feature-photo {
|
|
width: 100%;
|
|
height: 400rpx;
|
|
image {
|
|
width: 100%;
|
|
height: 400rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.no-film {
|
|
text-align: center;
|
|
image {
|
|
width: 262px;
|
|
height: 262px;
|
|
margin: 0 auto;
|
|
}
|
|
.no-text {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 16px;
|
|
}
|
|
}
|
|
}
|
|
.mains {
|
|
.film-list {
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
height: 60px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #FFFFFF;
|
|
padding: 0px 12px;
|
|
.film-left {
|
|
.film-name {
|
|
font-size: 13px;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
line-height: 19px;
|
|
margin-bottom: 5px;
|
|
}
|
|
.film-address {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 16px;
|
|
}
|
|
}
|
|
.film-right {
|
|
width: 20px;
|
|
height: 22px;
|
|
image {
|
|
width: 20px;
|
|
height: 22px;
|
|
}
|
|
}
|
|
}
|
|
.no-film {
|
|
text-align: center;
|
|
margin-top: 100px;
|
|
image {
|
|
width: 262px;
|
|
height: 262px;
|
|
margin: 0 auto;
|
|
}
|
|
.no-text {
|
|
font-size: 12px;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 16px;
|
|
}
|
|
}
|
|
}
|
|
</style> |