343 lines
7.9 KiB
Vue
343 lines
7.9 KiB
Vue
<!-- 选择场次 -->
|
|
|
|
<template>
|
|
<view class="content">
|
|
<view class="main" v-if="tabTime.length > 0">
|
|
<view class="main-desc">
|
|
<!-- 背景 -->
|
|
<view class="film-bg">
|
|
<image :src="filmData.posterUrl"></image>
|
|
</view>
|
|
<!-- 轮播 -->
|
|
<view class="film-banner">
|
|
<FilmBanner :list="filmData.plotUrl" :height="316"></FilmBanner>
|
|
</view>
|
|
<!-- 定位 -->
|
|
<view class="film-address" @click="openLocation()">
|
|
<image src="https://img.agrimedia.cn/chwl%2Fv2%2Fdingwei%20bai.png"></image>
|
|
</view>
|
|
<view class="film-desc">
|
|
<view class="title">{{filmData.movieName}}</view>
|
|
<view class="desc">{{filmData.movieType}} {{filmData.duration}}分钟</view>
|
|
</view>
|
|
</view>
|
|
<view class="main-tab">
|
|
<view class="main-tab-wrap">
|
|
<u-sticky bgColor="#FFFFFF" v-if="tabTime">
|
|
<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="filmData" :cinemaData="cinemaData"></film-play>
|
|
</view>
|
|
</div>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="mains" v-else>
|
|
<view class="film-list">
|
|
<view class="film-left">
|
|
<view class="film-name">
|
|
{{cinemaData.cinemaName}}
|
|
</view>
|
|
<view class="film-address">
|
|
{{cinemaData.cinemaAddress}}
|
|
</view>
|
|
</view>
|
|
<view class="film-right" @click="openLocation()">
|
|
<image src="https://img.agrimedia.cn/chwl%2Fv2%2Fdingwei%20hei.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<view class="no-film">
|
|
<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 FilmBanner from '@/components/film-swiper/film-banner.vue';
|
|
import { getFilmTime } from '@/request/film/index.js';
|
|
import film from '@/static/js/mixin/film.js';
|
|
export default {
|
|
mixins: [film],
|
|
components: {
|
|
FilmPlay,
|
|
FilmBanner
|
|
},
|
|
data() {
|
|
return {
|
|
loading: true,
|
|
tabTime:[],
|
|
active: 0,
|
|
filmItem: [],
|
|
cinemaData: {}, // 影院数据
|
|
filmList: [], // 当前电影列表
|
|
filmData: [], // 单个电影数据
|
|
dataList: [], // 所有电影数据
|
|
filmPlay: [] // 当前日期数据
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.cinemaData = JSON.parse(decodeURIComponent(option.cinemaData)); // 影院详情
|
|
this.filmData = JSON.parse(decodeURIComponent(option.filmData)); // 电影数据
|
|
this.filmData.plotUrl = this.filmData.plotUrl.split(',') // 轮播
|
|
|
|
// 获取场次
|
|
this.getYuanData();
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* @获取场次列表
|
|
* */
|
|
getYuanData() {
|
|
const params = {
|
|
cinemaId: this.cinemaData.cinemaId,
|
|
movieId: this.filmData.movieId,
|
|
}
|
|
|
|
console.log(params)
|
|
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 = brr[0]
|
|
this.loading = false;
|
|
});
|
|
},
|
|
clickTabs(e) {
|
|
console.log(this.dataList[e.index])
|
|
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-desc {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 512rpx;
|
|
top: 0;
|
|
left: 0;
|
|
.film-bg {
|
|
width: 100%;
|
|
height: 512rpx;
|
|
overflow: hidden;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
filter: blur(10rpx);
|
|
transform: scale(1.2)
|
|
}
|
|
}
|
|
.film-banner {
|
|
position: absolute;
|
|
left:0;
|
|
right:0;
|
|
top: 32px;
|
|
}
|
|
.film-address {
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 20rpx;
|
|
image {
|
|
width: 40rpx;
|
|
height: 42rpx;
|
|
}
|
|
}
|
|
.film-desc {
|
|
position: absolute;
|
|
left:0;
|
|
right:0;
|
|
bottom: 30rpx;
|
|
.title {
|
|
font-size: 32rpx;
|
|
font-family: PingFangSC-Semibold, PingFang SC;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
line-height: 52rpx;
|
|
text-align: center;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
.desc, .time, .tag {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
line-height: 32rpx;
|
|
text-align: center;
|
|
color: #e1dee3;
|
|
}
|
|
.tag > text {
|
|
width: 100%;
|
|
height: 28rpx;
|
|
border: 2rpx solid #FFFFFF;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
.film-tab {
|
|
width: 100%;
|
|
height: 50vh;
|
|
background-color: #FFFFFF;
|
|
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
|
}
|
|
}
|
|
.main-tab {
|
|
width: 100%;
|
|
background-color: #FFFFFF;
|
|
/deep/ .uni-scroll-view::-webkit-scrollbar { // 隐藏tab滚动条
|
|
display:none !important;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.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> |