184 lines
3.9 KiB
Vue
184 lines
3.9 KiB
Vue
<template>
|
||
<view class="content-movie">
|
||
<view class="content-bg">
|
||
<image src="https://cdn.uviewui.com/uview/goods/1.jpg"></image>
|
||
</view>
|
||
<view>
|
||
<view class="film-header">
|
||
<!-- 第一次获取肯定是获取不到的，主要是动态显示用户改变的地址 -->
|
||
<navigator url="/pages/film/filmAddress" hover-class="none">
|
||
<view class="film-city-name">
|
||
<view class="film-city-text">{{UserFilmArae['cityName']?UserFilmArae['cityName']:UserArae2['city']}}</view>
|
||
<image style="width: 35rpx;height: 30rpx;" class="img" src="https://img.agrimedia.cn/chwl/v2/xialajian%20bai.png"></image>
|
||
</view>
|
||
</navigator>
|
||
<view class="film-title">{{filmDesc.movieName}}</view>
|
||
<view class="film-search" @click="goSearchPage()">
|
||
<image src="https://img.agrimedia.cn/chwl%2Fv2%2Fsousuo%20bai.png"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="film">
|
||
<!-- 影院组件 -->
|
||
<view v-for="(item, index) in listYuan" :key="index">
|
||
<movies-item :data="item" :key="index" :filmDesc="filmDesc"></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 MoviesItem from '@/components/movies-item/movies-item.vue';
|
||
import { getFilmList, getFilmYuan } from '@/request/film/index.js';
|
||
import { mapGetters } from 'vuex';
|
||
|
||
export default {
|
||
components: {
|
||
MoviesItem
|
||
},
|
||
data() {
|
||
return {
|
||
filmDesc: {}, // 电影详情
|
||
listYuan: [], // 影院列表
|
||
loading: true,
|
||
active: 0, // TAB
|
||
}
|
||
},
|
||
|
||
onLoad(option) {
|
||
this.filmDesc = JSON.parse(decodeURIComponent(option.filmData));
|
||
this.getYuanData();
|
||
},
|
||
|
||
computed: {
|
||
...mapGetters({
|
||
// 获取用户自主选择的电影城市信息
|
||
UserFilmArae: 'GetFilmData',
|
||
}),
|
||
},
|
||
|
||
watch: {
|
||
UserFilmArae(val) {
|
||
this.getYuanData()
|
||
},
|
||
},
|
||
|
||
methods: {
|
||
/**
|
||
* @获取电影院
|
||
* */
|
||
getYuanData() {
|
||
const params = {
|
||
cityId: this.UserFilmArae.cityId,
|
||
movieId: this.filmDesc.movieId
|
||
}
|
||
getFilmYuan(params).then((res) => {
|
||
this.listYuan = res.data;
|
||
this.loading = false; // 关闭加载
|
||
this.$forceUpdate()
|
||
});
|
||
},
|
||
|
||
/**
|
||
* @搜索电影
|
||
* */
|
||
goSearchPage() {
|
||
uni.navigateTo({
|
||
url: "./filmSearch"
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background-color: #F5F5F5;
|
||
}
|
||
|
||
.content-movie {
|
||
position: relative;
|
||
.content-bg {
|
||
position: absolute;
|
||
width: 90%;
|
||
height: 84rpx;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 99;
|
||
image {
|
||
width: 100%;
|
||
height: 84rpx;
|
||
filter: blur(10rpx);
|
||
transform: scale(1.2);
|
||
}
|
||
}
|
||
}
|
||
|
||
.film-header {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0rpx 24rpx;
|
||
height: 84rpx;
|
||
position: absolute;
|
||
top: 0px;
|
||
left: 0px;
|
||
z-index: 99;
|
||
.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;
|
||
color: #FFFFFF;
|
||
}
|
||
image {
|
||
display: inline-block;
|
||
}
|
||
}
|
||
.film-title {
|
||
font-size: 30rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #FFFFFF;
|
||
line-height: 40rpx;
|
||
white-space: nowrap;
|
||
/*当文本溢出包含元素时，以省略号表示超出的文本*/
|
||
text-overflow: ellipsis;
|
||
}
|
||
.film-search {
|
||
width: 100rpx;
|
||
height: 40rpx;
|
||
text-align: right;
|
||
image {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
.film {
|
||
width: 100%;
|
||
position: absolute;
|
||
top: 84rpx;
|
||
left: 0px;
|
||
z-index: 999;
|
||
.film-wrap {
|
||
border-bottom: 1rpx solid #DEDEDE;
|
||
/deep/ .u-tabs__wrapper__nav__line {
|
||
bottom: 0rpx !important;
|
||
}
|
||
.mov {
|
||
z-index: 999;
|
||
}
|
||
}
|
||
}
|
||
</style> |