310 lines
7.6 KiB
Vue
310 lines
7.6 KiB
Vue
<!-- 电影简介 -->
|
||
|
||
<template>
|
||
<view class="main">
|
||
<view class="main-desc">
|
||
<view class="main-blue"></view>
|
||
<view class="film-banner">
|
||
<image :src="data.plotUrl" ></image>
|
||
</view>
|
||
<view class="film-desc">
|
||
<view class="title">{{data.movieName}}</view>
|
||
<view class="desc">{{data.movieType}}{{data.duration}}分钟</view>
|
||
<view class="time">{{data.publishDate}}上映</view>
|
||
<view class="tag">
|
||
<text>{{data.versionType}}</text>
|
||
<text>{{data.movieType}}</text>
|
||
</view>
|
||
<view class="score">{{data.grade}}</view>
|
||
<view class="score-text">电影评分 </view>
|
||
</view>
|
||
</view>
|
||
<view class="main-tab">
|
||
<view class="main-tab-wrap">
|
||
<!-- <u-sticky bgColor="#FFFFFF" >
|
||
<u-tabs @click="clickTabs" activeStyle="color:#333333; font-size:28rpx; font-weight:600"
|
||
inactiveStyle="color:#666666; font-size:28rpx;" lineColor="#333333" keyName="name"
|
||
:current="0" :scrollable="false" :list="tabLsit"></u-tabs>
|
||
</u-sticky> -->
|
||
<view style="position: sticky;left: 0;top: 0;z-index: 99;background-color: #ffffff;">
|
||
<u-tabs @click="clickTabs" activeStyle="color:#333333; font-size:28rpx; font-weight:600"
|
||
inactiveStyle="color:#666666; font-size:28rpx;" lineColor="#333333" keyName="name"
|
||
:current="0" :scrollable="false" :list="tabLsit"></u-tabs>
|
||
</view>
|
||
<view class="main-tab-content">
|
||
<view v-show="NowActive === 0">
|
||
<view class="content-desction">
|
||
{{data.intro}}
|
||
</view>
|
||
</view>
|
||
<view class="swiper-people" v-show="NowActive === 1">
|
||
<u-scroll-list indicatorActiveColor="#FC5159">
|
||
<view v-for="(item, index) in data.producer.actors" :key="index">
|
||
<view class="scroll-List">
|
||
<view class="scroll-item">
|
||
<image :src="item.avatar"></image>
|
||
<view class="scroll-name">{{item.scName}}</view>
|
||
<view class="scroll-sub">饰 {{item.actName}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-scroll-list>
|
||
</view>
|
||
<view v-show="NowActive === 2" style="padding-bottom: 140rpx;">
|
||
<view style="font-size: 0;" @click="lookesImg">
|
||
<image v-for="item,index in directorList" :src="item" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="main-tab-btn">
|
||
<view class="buyGate" @click="saleBuy">特惠购票</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
data: {},
|
||
tabLsit:[
|
||
{
|
||
name:'简介'
|
||
},
|
||
{
|
||
name:'演职人员'
|
||
},
|
||
{
|
||
name:'剧情照'
|
||
}
|
||
],
|
||
directorList: [],
|
||
active: 0,
|
||
NowActive: 0
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.data = JSON.parse(decodeURIComponent(option.filmData))
|
||
console.log(this.data,'接收数据');
|
||
this.directorList = this.data.plotUrl.split(',')
|
||
this.tabLsit[2].name = `剧情照(${this.directorList.length})`
|
||
this.tabLsit[1].name = `演职人员(${this.data.producer.actors.length})`
|
||
},
|
||
methods: {
|
||
clickTabs(e) {
|
||
this.NowActive = e.index
|
||
},
|
||
// 预览剧照
|
||
lookesImg(index) {
|
||
// picinfo：图片对象
|
||
console.log(this.directorList)
|
||
let photoList = this.directorList.map(item => {
|
||
return item;
|
||
});
|
||
uni.previewImage({
|
||
current: 0,
|
||
urls: photoList.reverse()
|
||
});
|
||
},
|
||
// 购票跳转
|
||
saleBuy() {
|
||
uni.navigateTo({
|
||
url: `../../pages/film/filmYuan?filmData=${encodeURIComponent(JSON.stringify(this.data))}`
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #F5F5F5;
|
||
}
|
||
.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%;
|
||
top: 0;
|
||
left: 0;
|
||
.main-blue {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 55vh;
|
||
background-color: rgba(0, 0, 0, .4);
|
||
z-index: 9;
|
||
}
|
||
.film-banner {
|
||
width: 100%;
|
||
height: 55vh;
|
||
// image {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// }
|
||
}
|
||
.film-desc {
|
||
position: absolute;
|
||
left:0;
|
||
right:0;
|
||
bottom: 40rpx;
|
||
z-index: 99;
|
||
.title {
|
||
font-size: 40rpx;
|
||
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;
|
||
color: #e1dee3;
|
||
line-height: 32rpx;
|
||
text-align: center;
|
||
margin-top: 10rpx;
|
||
}
|
||
.tag > text {
|
||
width: 100%;
|
||
height: 28rpx;
|
||
border: 2rpx solid #e1dee3;
|
||
margin-right: 10rpx;
|
||
padding: 0rpx 10rpx;
|
||
}
|
||
.score {
|
||
font-size: 32rpx;
|
||
font-family: Alibaba-PuHuiTi-B, Alibaba-PuHuiTi;
|
||
font-weight: 600;
|
||
color: #e1dee3;
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
margin-top: 24rpx;
|
||
}
|
||
.score-text {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #e1dee3;
|
||
line-height: 32rpx;
|
||
text-align: center;
|
||
margin-top: 12rpx;
|
||
}
|
||
}
|
||
.film-tab {
|
||
width: 100%;
|
||
height: 50vh;
|
||
background-color: #FFFFFF;
|
||
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
||
}
|
||
}
|
||
.main-tab {
|
||
width: 100%;
|
||
height: 45vh;
|
||
background-color: #FFFFFF;
|
||
.main-tab-wrap {
|
||
.main-tab-content {
|
||
// height: calc(100vh - 55vh - 220rpx);
|
||
padding: 20rpx 24rpx;
|
||
box-sizing: border-box;
|
||
// overflow: hidden;
|
||
.content-desction {
|
||
width: 100%;
|
||
height: calc(100vh - 50vh - 220rpx);
|
||
white-space: pre-wrap;
|
||
word-wrap: break-word;
|
||
overflow: hidden;
|
||
overflow-y: scroll;
|
||
padding-bottom: 120rpx;
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #666666;
|
||
line-height: 34rpx;
|
||
}
|
||
|
||
// H5隐藏滚动条
|
||
.swiper-people {
|
||
/deep/ .uni-scroll-view::-webkit-scrollbar { width: 0 !important }
|
||
}
|
||
|
||
.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: 100px;
|
||
}
|
||
.feature-photo {
|
||
width: 100%;
|
||
height: 400rpx;
|
||
image {
|
||
width: 100%;
|
||
height: 400rpx;
|
||
}
|
||
}
|
||
.main-tab-btn {
|
||
width: 100%;
|
||
position: fixed;
|
||
bottom: 40rpx;
|
||
left: 0rpx;
|
||
.buyGate {
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
height: 84rpx;
|
||
background: linear-gradient(132deg, #FC5159 0%, #FF7700 100%);
|
||
border-radius: 40rpx;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
line-height: 84rpx;
|
||
font-size: 28rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</style> |