Skip to content

严立 / mini-shimao

Go to a project
Commit 95118cd6 by 严立
Options

Merge branch 'master' of http://120.77.182.185/yanl/mini-shimao

parents 32d61dea 686afe38
Inline Side-by-side
Showing with 1155 additions and 34 deletions
pages/play/home/home.js
...@@ -7,12 +7,14 @@ let logicData = { ...@@ -7,12 +7,14 @@ let logicData = {
Page({ Page({
data: { data: {
bannerImg: App.globalData.appResourcesBase + 'play/home/type.png',
navigationLogoTop: 0, navigationLogoTop: 0,
navigationLogoMarginTop: 0, navigationLogoMarginTop: 0,
tabMarginTop: 0, tabMarginTop: 0,
banner: [], // banner: [],
bannerIndex: 0, // bannerIndex: 0,
tab: [ tab: [
{ {
...@@ -45,6 +47,49 @@ Page({ ...@@ -45,6 +47,49 @@ Page({
navigationFixed: false, navigationFixed: false,
navigationFixedBoundary: 212, navigationFixedBoundary: 212,
navigationCapsuleTop: wx.getMenuButtonBoundingClientRect().top, navigationCapsuleTop: wx.getMenuButtonBoundingClientRect().top,
recentList: [
{
id: 0,
img: ''
},
{
id: 1,
img: ''
},
{
id: 2,
img: ''
}
],
swiperRecentCurrent: 0,
movieList: [
{
id: 0,
img: '',
name: '阿丽塔：战斗天使',
dimensional: '3D',
type: '动作 / 科幻 / 冒险',
director: '罗伯特·罗德里格兹'
},
{
id: 1,
img: '',
name: '阿丽塔：战斗天使',
dimensional: '3D',
type: '动作 / 科幻 / 冒险',
director: '罗伯特·罗德里格兹'
},
{
id: 2,
img: '',
name: '阿丽塔：战斗天使',
dimensional: '3D',
type: '动作 / 科幻 / 冒险',
director: '罗伯特·罗德里格兹'
},
],
swiperMovieCurrent: 0
}, },
/** /**
...@@ -264,5 +309,41 @@ Page({ ...@@ -264,5 +309,41 @@ Page({
} }
} }
}) })
},
//跳转到艺文
onToArt: function () {
console.log('art')
},
//跳转到健康
onToHealth: function () {
console.log('Health')
},
//跳转到美食
onToFood: function () {
console.log('Food')
},
//跳转到休闲
onToLeisure: function () {
console.log('Leisure')
},
//跳转到住宿
onToHotel: function () {
console.log('Hotel')
},
// 近期活动swiper
swiperRecentChange: function (e) {
let swiperRecentCurrent = e.detail.current
this.setData({
swiperRecentCurrent
})
},
// 热门电影swiper
swiperMovieChange: function (e) {
let swiperMovieCurrent = e.detail.current
this.setData({
swiperMovieCurrent
})
} }
}) })
\ No newline at end of file
pages/play/home/home.wxml
...@@ -7,6 +7,71 @@ ...@@ -7,6 +7,71 @@
</view> </view>
<view class="banner"> <view class="banner">
<image src="{{bannerImg}}"></image>
<button class="art-button" bindtap="onToArt"></button>
<button class="health-button" bindtap="onToHealth"></button>
<button class="food-button" bindtap="onToFood"></button>
<button class="leisure-button" bindtap="onToLeisure"></button>
<button class="hotel-button" bindtap="onToHotel"></button>
</view>
<view class="title-wrapper row con-b align-c">
<image class="title">近期活动</image>
<image class="all" bindtap="onAllRecent">查看全部</image>
</view>
<swiper class="recent-swiper" next-margin="38rpx" bindchange="swiperRecentChange">
<block wx:for="{{recentList}}" wx:key="id">
<swiper-item class="recent-item">
<image class="{{swiperRecentCurrent === index ? 'recent-item-left' : '' }} {{swiperRecentCurrent === recentList.length - 1 ? 'recent-item-center' : ''}}" src="{{item.img}}"></image>
</swiper-item>
</block>
</swiper>
<view class="title-wrapper row con-b align-c">
<image class="title">近期活动</image>
<image class="all" bindtap="onAllRecent">查看全部</image>
</view>
<swiper class="movie-swiper" next-margin="38rpx" bindchange="swiperMovieChange">
<block wx:for="{{movieList}}" wx:key="id">
<swiper-item class="movie-item col con-e">
<view class="movie-wrapper {{swiperMovieCurrent === index ? 'movie-item-left' : '' }} {{swiperMovieCurrent === movieList.length - 1 ? 'movie-item-center' : ''}}">
<view class="movie-cover">
<image src="{{item.img}}"></image>
</view>
<view class="movie-info-wrapper">
<view class="movie-name row">
<text>{{item.name}}</text>
<view class="movie-dimensional">
<text>{{item.dimensional}}</text>
</view>
</view>
<view class="movie-info row">
<view class="movie-info-left">
<text>类型</text>
</view>
<view class="movie-info-right">
<text>{{item.type}}</text>
</view>
</view>
<view class="movie-info row">
<view class="movie-info-left">
<text>导演</text>
</view>
<view class="movie-info-right">
<text>{{item.director}}</text>
</view>
</view>
<view class="movie-btn">
<text>报名观影</text>
</view>
</view>
</view>
</swiper-item>
</block>
</swiper>
<!-- <view class="banner">
<swiper autoplay circular interval="2000" next-margin="64rpx" bindchange="eventBannerChange"> <swiper autoplay circular interval="2000" next-margin="64rpx" bindchange="eventBannerChange">
<block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item> <swiper-item>
...@@ -14,20 +79,20 @@ ...@@ -14,20 +79,20 @@
</swiper-item> </swiper-item>
</block> </block>
</swiper> </swiper>
</view> </view> -->
<!-- 更多活动 --> <!-- 更多活动 -->
<view class="activity row con-e align-c" bindtap="onActivity"> <!-- <view class="activity row con-e align-c" bindtap="onActivity">
<text>查看全部活动</text> <text>查看全部活动</text>
<image src="/image/more.png"></image> <image src="/image/more.png"></image>
</view> </view> -->
<view class="ornament-wave"> <!-- <view class="ornament-wave">
<image src="/image/ornament-1.png"></image> <image src="/image/ornament-1.png"></image>
</view> </view> -->
<!-- 板块标签 --> <!-- 板块标签 -->
<view class="tab row con-b align-c {{navigationFixed ? 'tab-fixed' : ''}}" style="{{navigationFixed ? 'top: ' + (tabMarginTop - 4) + 'px' : ''}}"> <!-- <view class="tab row con-b align-c {{navigationFixed ? 'tab-fixed' : ''}}" style="{{navigationFixed ? 'top: ' + (tabMarginTop - 4) + 'px' : ''}}">
<block wx:for="{{tab}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{tab}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="tab-item col con-c" data-index="{{index}}" bindtap="onTabSelection"> <view class="tab-item col con-c" data-index="{{index}}" bindtap="onTabSelection">
<view class="row con-c align-c {{tabIndex === index ? 'tab-item-active' : 'tab-item-inactive'}}"> <view class="row con-c align-c {{tabIndex === index ? 'tab-item-active' : 'tab-item-inactive'}}">
...@@ -39,20 +104,20 @@ ...@@ -39,20 +104,20 @@
</view> </view>
</block> </block>
</view> </view>
<view class="tab-blank" hidden="{{!navigationFixed}}"></view> <view class="tab-blank" hidden="{{!navigationFixed}}"></view> -->
<view class="detail"> <!-- <view class="detail">
<block wx:for="{{tabDetail[tabIndex].describe}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{tabDetail[tabIndex].describe}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<image mode="widthFix" src="{{item}}"></image> <image mode="widthFix" src="{{item}}"></image>
</block> </block>
</view> </view> -->
<view class="shop"> <!-- <view class="shop">
<block wx:for="{{tabDetail[tabIndex].shop}}" wx:for-index="index" wx:for-item="item" wx:key="index"> <block wx:for="{{tabDetail[tabIndex].shop}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="shop-item"> <view class="shop-item">
<image src="{{item.cover}}"></image> <image src="{{item.cover}}"></image>
<button class="button row con-c align-c" style="{{'bottom: ' + item.y + 'rpx;left: ' + item.x + 'rpx;'}}" data-id="{{item.id}}" bindtap="onShopDetail">立即预定</button> <button class="button row con-c align-c" style="{{'bottom: ' + item.y + 'rpx;left: ' + item.x + 'rpx;'}}" data-id="{{item.id}}" bindtap="onShopDetail">立即预定</button>
</view> </view>
</block> </block>
</view> </view> -->
</view> </view>
\ No newline at end of file
pages/play/home/home.wxss
page { /* page {
background: linear-gradient(182deg,#FFFFFF 0%,#EBEDF7 100%); background: linear-gradient(182deg,#FFFFFF 0%,#EBEDF7 100%);
} } */
.navigation { .navigation {
z-index: 1900; z-index: 1900;
...@@ -29,21 +29,189 @@ page { ...@@ -29,21 +29,189 @@ page {
width: 130rpx; width: 130rpx;
height: 20rpx; height: 20rpx;
} }
.banner {
position: relative;
margin-top: 200rpx;
width: 750rpx;
height: 1200rpx;
}
.art-button {
position: absolute;
top: 40rpx;
left: 40rpx;
width: 454rpx;
height: 260rpx;
background: transparent;
}
.health-button {
position: absolute;
top: 320rpx;
left: 40rpx;
width: 296rpx;
height: 376rpx;
background: transparent;
}
.food-button {
position: absolute;
top: 350rpx;
right: 40rpx;
width: 276rpx;
height: 376rpx;
background: transparent;
}
.leisure-button {
position: absolute;
top: 788rpx;
left: 40rpx;
width: 304rpx;
height: 308rpx;
background: transparent;
}
.hotel-button {
position: absolute;
top: 820rpx;
right: 40rpx;
width: 296rpx;
height: 328rpx;
background: transparent;
}
.title-wrapper {
width: 670rpx;
margin-top: 30rpx;
}
.title {
width: 184rpx;
height: 64rpx;
background-color: #ccc;
}
.all {
width: 104rpx;
height: 36rpx;
background-color: #ccc;
}
.recent-swiper {
width: 750rpx;
height: 721rpx;
margin-top: 80rpx;
padding-bottom: 50rpx;
}
.recent-item {
width: 712rpx;
}
.recent-item image {
width: 648rpx;
background-color: #ccc;
}
.recent-item-left {
margin-left: 40rpx;
}
.recent-item-center {
margin-left: 51rpx;
}
.movie-swiper {
width: 750rpx;
height: 366rpx;
margin-top: 48rpx;
padding-bottom: 50rpx;
}
.movie-item {
width: 712rpx;
}
.movie-wrapper {
position: relative;
width: 648rpx;
height: 326rpx;
padding: 40rpx 40rpx 40rpx 260rpx;
background-color: #F5F6F8;
border-radius: 4rpx;
}
.movie-cover {
position: absolute;
left: 40rpx;
bottom: 40rpx;
width: 220rpx;
height: 326rpx;
background-color: #ccc;
border-radius: 4rpx;
}
.movie-item-left {
margin-left: 40rpx;
}
.movie-item-center {
margin-left: 51rpx;
}
.movie-info-wrapper {
margin-left: 40rpx;
}
.movie-name text {
display: -webkit-box;
color: #15191F;
font-size: 30rpx;
max-width: 240rpx;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.movie-dimensional {
width: 52rpx;
height: 32rpx;
margin-top: 6rpx;
margin-left: 12rpx;
color: #fff;
font-size: 20rpx;
text-align: center;
line-height: 32rpx;
background: #15191F;
opacity: 0.5;
border-radius: 4rpx;
}
.movie-info {
margin-top: 16rpx;
font-size: 26rpx;
}
.movie-info-left {
color: #959DA9;
}
.movie-info-right {
display: -webkit-box;
margin-left: 8rpx;
color: #656E7B;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.movie-btn {
width: 152rpx;
height: 56rpx;
margin-top: 42rpx;
color: #fff;
font-size: 26rpx;
text-align: center;
line-height: 56rpx;
background: #86C5E1;
border-radius: 4rpx;
}
.banner,
/* .banner,
swiper { swiper {
position: relative; position: relative;
width: 100%; width: 100%;
min-height: 480rpx; min-height: 480rpx;
margin-top: 100rpx; margin-top: 100rpx;
} } */
/*
swiper-item { swiper-item {
position: relative; position: relative;
left: 56rpx; left: 56rpx;
width: 638rpx !important; width: 638rpx !important;
height: 480rpx !important; height: 480rpx !important;
} } */
.banner-content { .banner-content {
width: 638rpx; width: 638rpx;
...@@ -186,3 +354,8 @@ swiper-item { ...@@ -186,3 +354,8 @@ swiper-item {
color: #ffffff; color: #ffffff;
line-height: 42rpx; line-height: 42rpx;
} }
image {
width: 100%;
height: 100%;
}
\ No newline at end of file
pages/play/movie-detail/movie-detail.js
Page({ Page({
data: { data: {
movieName: '龙猫',
bannerIndex: 0,
bannerStyle: 1,
isMovieEnd: false,
banner: [
{
id: 0,
img: ''
},
{
id: 1,
img: ''
},
{
id: 2,
img: ''
}
],
statusActive: 0,
statusList: [
{ 'id': 0, 'name': '今日08月12日' },
{ 'id': 1, 'name': '明日08月13日' },
],
movieInfo: {
name: '龙猫',
cover: '',
type: '动画 / 奇幻 / 冒险',
director: '宫崎骏',
dimensional: '5D',
actor: '日高法子 坂本千夏 糸井重里 岛本须美 北林谷荣 高木均 雨笠利 雨笠利'
},
showList: {
0: [
{
id: 0,
timeStart: '09:00',
timeEnd: '11:35散场',
free: '免费'
},
{
id: 1,
timeStart: '13:00',
timeEnd: '15:35散场',
free: '免费'
}
],
1: [
{
id: 0,
timeStart: '1',
timeEnd: '1',
free: '免费'
},
{
id: 1,
timeStart: '1',
timeEnd: '1',
free: '免费'
}
]
}
}, },
onLoad: function (options) { onLoad: function (options) {
}, },
onSelectionStatus: function (event) {
console.log(event.currentTarget.dataset.type)
this.setData({
statusActive: Number(event.currentTarget.dataset.type)
})
},
/**
* banner 切换图片同步自定义标识组件
* @function
* @param {object} - funcEvent
* @returns
*/
onSwiperChange: function (funcEvent) {
this.setData({
bannerIndex: funcEvent.detail.current
})
},
}) })
\ No newline at end of file
pages/play/movie-detail/movie-detail.wxml
<!--pages/home/home/home.wxml--> <navigation class="navigation" titleText="龙猫" color="#ffffff" backIcon="/image/back-w.png"></navigation>
<text>pages/home/home/home.wxml</text>
<view class="container">
<view class="banner">
<swiper autoplay circular class="banner-swiper" indicator-dots="{{false}}" interval="5000" duration="500" bindchange="onSwiperChange">
<block wx:for="{{banner}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<swiper-item class="banner-swiper-item" data-item="{{item}}" bindtap="bannerClick">
{{item.id}}
<image class="banner-swiper-image" src="{{item.img}}"></image>
</swiper-item>
</block>
</swiper>
<view class="banner-swiper-point">
<swiper-point bannerActiveIndex="{{bannerIndex}}" bannerStyle="{{bannerStyle}}"></swiper-point>
</view>
<view class="banner-wave">
<image src="/image/ornament-2-black.png" mode="widthFix"></image>
</view>
</view>
<view class="movie-wrapper" bindtap="onToMovieDetail">
<view class="movie-cover">
<image src="{{item.cover}}"></image>
</view>
<view class="movie-info-wrapper">
<view class="movie-name row">
<text>{{movieInfo.name}}</text>
<view class="movie-dimensional">
<text>{{movieInfo.dimensional}}</text>
</view>
</view>
<view class="movie-info row">
<view class="movie-info-left">
<text>类型</text>
</view>
<view class="movie-info-right">
<text>{{movieInfo.type}}</text>
</view>
</view>
<view class="movie-info row">
<view class="movie-info-left">
<text>导演</text>
</view>
<view class="movie-info-right">
<text>{{movieInfo.director}}</text>
</view>
</view>
<view class="movie-info-actor">
<text class="movie-actor">主演</text>
<text class="actor">{{movieInfo.actor}}</text>
</view>
</view>
</view>
<view class="show-end col align-c" wx:if="{{isMovieEnd}}">
<image src=""></image>
<text>观影已结束，请期待后续排片</text>
</view>
<view wx:else>
<view class="status row align-c">
<block wx:for="{{statusList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="status-item row con-c align-c" data-type="{{index}}" bindtap="onSelectionStatus">
<view class="row con-c align-c {{index === statusActive ? 'status-item-active' : ''}}">
<text>{{item.name}}</text>
</view>
</view>
</block>
</view>
<block wx:for="{{showList[statusActive]}}" wx:key="id">
<view class="show-wrapper row align-c">
<view class="show-time-start">
<text>{{item.timeStart}}</text>
</view>
<view class="show-time-end">
<text>{{item.timeEnd}}</text>
</view>
<view class="show-free">
<text>{{item.free}}</text>
</view>
<view class="show-btn">
<text>报名观影</text>
</view>
</view>
</block>
</view>
</view>
\ No newline at end of file
pages/play/movie-detail/movie-detail.wxss
/* pages/home/home/home.wxss */ page {
\ No newline at end of file background: #1C1C25;
}
.navigation {
z-index: 2000;
}
.banner {
z-index: 9;
position: relative;
width: 750rpx;
height: 814rpx;
background-color: #ccc;
}
.banner-swiper,
.banner-swiper-item,
.banner-swiper-image {
position: absolute;
top: 0 !important;
left: 0 !important;
width: 750rpx;
height: 800rpx;
}
.banner-swiper-point {
position: relative;
top: 702rpx;
left: 0;
}
.banner-wave {
position: absolute;
top: 754rpx;
left: 0;
width: 750rpx;
height: 60rpx;
}
.movie-wrapper {
position: relative;
width: 670rpx;
height: 296rpx;
margin: 64rpx auto 0;
padding: 32rpx 32rpx 32rpx 232rpx;
background: #272734;
border-radius: 4rpx;
}
.movie-cover {
position: absolute;
left: 32rpx;
bottom: 32rpx;
width: 200rpx;
height: 296rpx;
background-color: #fff;
}
.movie-info-wrapper {
margin-left: 52rpx;
}
.movie-name {
height: 60rpx;
color: #fff;
font-size: 30rpx;
}
.movie-dimensional {
width: 52rpx;
height: 32rpx;
margin-top: 6rpx;
margin-left: 12rpx;
font-size: 20rpx;
text-align: center;
line-height: 32rpx;
background: #15191F;
opacity: .5;
border-radius: 4rpx;
}
.movie-info {
margin-top: 8rpx;
font-size: 22rpx;
}
.movie-info-left {
color: #72727A;
}
.movie-info-right {
display: -webkit-box;
width: 265rpx;
margin-left: 16rpx;
color: #C2C7CF;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.movie-actor {
color: #72727A;
}
.movie-info-actor {
display: -webkit-box;
width: 352rpx;
margin-top: 8rpx;
color: #C2C7CF;
font-size: 22rpx;
line-height: 40rpx;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.actor {
margin-left: 16rpx;
}
/* 状态筛选菜单 */
.status {
width: 750rpx;
height: 76rpx;
margin-top: 48rpx;
padding: 0 8rpx;
border-bottom: 1px #3A3A40 solid;
}
.status-item {
width: 220rpx;
height: 76rpx;
font-size: 26rpx;
font-weight: 400;
color: #959DA9;
}
.status-item-active {
height: 76rpx;
color: #fff;
font-weight: 600;
border-bottom: 4rpx #fff solid;
}
.show-wrapper {
width: 710rpx;
height: 160rpx;
margin-left: 40rpx;
border-bottom: 1px solid #3A3A40;
}
.show-time-start {
width: 118rpx;
color: #fff;
font-size: 42rpx;
font-weight: 600;
}
.show-time-end {
width: 122rpx;
margin-left: 48rpx;
color: #959DA9;
font-size: 26rpx;
}
.show-free {
margin-left: 130rpx;
color: #fff;
font-size: 26;
}
.show-btn {
width: 152rpx;
height: 64rpx;
margin-left: 48rpx;
color: #fff;
font-size: 26rpx;
text-align: center;
line-height: 64rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 4rpx;
}
.show-end {
width: 750rpx;
margin-top: 128rpx;
}
.show-end image {
width: 112rpx;
height: 112rpx;
background-color: #ccc;
}
.show-end text{
margin-top: 10rpx;
font-size: 26rpx;
color: #959DA9;
}
image {
width: 100%;
height: 100%;
}
\ No newline at end of file
pages/play/movie/movie.js
Page({ Page({
data: { data: {
btn: '报名观影',
statusActive: 0,
statusList: [
{ 'id': 0, 'name': '今日放映' },
{ 'id': 1, 'name': '全部热映' },
],
movieToday: [
{
id:0,
cover: '',
timeStart: '09:00',
timeEnd: '10:35 散场',
name: '龙猫',
dimensional: '5D',
type: '动画 / 奇幻 / 冒险',
actor: '日高法子 坂本千夏 糸井重里',
director: '宫崎骏',
label: '暖心重映',
free: '免费',
},
{
id:1,
cover: '',
timeStart: '11:00',
timeEnd: '12:35 散场',
name: '千与千寻',
dimensional: '2D',
type: '剧情 / 动画 / 奇幻',
actor: '柊瑠美 入野自由 夏木真理…',
director: '宫崎骏',
label: '学会爱 然后长大',
free: '免费',
},
{
id:2,
cover: '',
timeStart: '09:00',
timeEnd: '10:35 散场',
name: '龙猫',
dimensional: '5D',
type: '动画 / 奇幻 / 冒险',
actor: '日高法子 坂本千夏 糸井重里',
director: '宫崎骏',
label: '暖心重映',
free: '免费',
},{
id:3,
cover: '',
timeStart: '09:00',
timeEnd: '10:35 散场',
name: '龙猫',
dimensional: '5D',
type: '动画 / 奇幻 / 冒险',
actor: '日高法子 坂本千夏 糸井重里',
director: '宫崎骏',
label: '暖心重映',
free: '免费',
}
],
movieAll: {
movieWeek: {
title: '本周热映',
list: [
{
id:0,
cover: '',
name: '龙猫',
dimensional: '5D',
type: '动画 / 奇幻 / 冒险',
actor: '日高法子 坂本千夏 糸井重里',
director: '宫崎骏',
label: '暖心重映',
free: '免费',
},
{
id:1,
cover: '',
name: '龙猫',
dimensional: '5D',
type: '动画 / 奇幻 / 冒险',
actor: '日高法子 坂本千夏 糸井重里',
director: '宫崎骏',
label: '暖心重映',
free: '免费',
}
]
},
movieNextWeek: {
title: '下周热映',
list: [
{
id:0,
cover: '',
name: '海上钢琴师',
dimensional: '3D',
type: '剧情 / 音乐',
actor: '蒂姆·罗斯 普路特·泰勒…',
director: '朱塞佩·托纳多雷',
label: '琴键有限 人生无限',
free: '免费',
},
{
id:1,
cover: '',
name: '绿皮书',
dimensional: '2D',
type: '剧情 / 喜剧 / 传记',
actor: '维果·莫腾森 马赫沙拉...',
director: '彼得·法雷里',
label: '两种人生 一段旅程',
free: '免费',
}
]
}
}
}, },
onLoad: function (options) { onLoad: function (options) {
}, },
onSelectionStatus: function (event) {
console.log(event.currentTarget.dataset.type)
this.setData({
statusActive: Number(event.currentTarget.dataset.type)
})
},
// 跳转到电影详情页面
onToMovieDetail: function () {
wx.navigateTo({
url: '/pages/play/movie-detail/movie-detail',
})
},
onReportMovie: function () {
console.log('报名观影')
}
}) })
\ No newline at end of file
pages/play/movie/movie.wxml
<!--pages/home/home/home.wxml--> <navigation class="navigation" titleText="所有影片" color="#ffffff" backIcon="/image/back-w.png"></navigation>
<text>pages/home/home/home.wxml</text>
<view class="contaniner con-s">
<view class="status row align-c">
<block wx:for="{{statusList}}" wx:for-index="index" wx:for-item="item" wx:key="index">
<view class="status-item row con-c align-c" data-type="{{index}}" bindtap="onSelectionStatus">
<view class="row con-c align-c {{index === statusActive ? 'status-item-active' : ''}}">
<text>{{item.name}}</text>
</view>
</view>
</block>
</view>
<view wx:if="{{statusActive === 0}}">
<block wx:for="{{movieToday}}" wx:key="id">
<view class="movie-wrapper row" bindtap="onToMovieDetail">
<view class="movie-time-wrapper row align-c">
<view class="movie-time-start">
<text>{{item.timeStart}}</text>
</view>
<view class="movie-time-end">
<text>{{item.timeEnd}}</text>
</view>
</view>
<view class="row">
<view class="movie-cover">
<image src="{{item.cover}}"></image>
</view>
<view class="movie-info-wrapper">
<view class="movie-name row">
<text>{{item.name}}</text>
<view class="movie-dimensional">
<text>{{item.dimensional}}</text>
</view>
</view>
<view class="movie-info row">
<view class="movie-info-left">
<text>类型</text>
</view>
<view class="movie-info-right">
<text>{{item.type}}</text>
</view>
</view>
<view class="movie-info row">
<view class="movie-info-left">
<text>导演</text>
</view>
<view class="movie-info-right">
<text>{{item.director}}</text>
</view>
</view>
<view class="movie-info row">
<view class="movie-info-left">
<text>主演</text>
</view>
<view class="movie-info-right">
<text>{{item.actor}}</text>
</view>
</view>
<view>
<text class="movie-label">{{item.label}}</text>
</view>
<view class="movie-free">
<text>{{item.free}}</text>
</view>
<view class="movie-btn" catchtap="onReportMovie">
<text>{{btn}}</text>
</view>
</view>
</view>
</view>
</block>
</view>
<view wx:else>
<block wx:for="{{movieAll}}" wx:for-index="key" wx:for-item="movieList" wx:key="key">
<view class="movie-week">
<text>{{movieList.title}}</text>
</view>
<block wx:for="{{movieList.list}}" wx:key="id">
<view class="all-movie-wrapper" bindtap="onToMovieDetail">
<view class="all-movie-cover">
<image src="{{item.cover}}"></image>
</view>
<view class="movie-info-wrapper">
<view class="movie-name row">
<text>{{item.name}}</text>
<view class="movie-dimensional">
<text>{{item.dimensional}}</text>
</view>
</view>
<view class="movie-info row">
<view class="movie-info-left">
<text>类型</text>
</view>
<view class="movie-info-right">
<text>{{item.type}}</text>
</view>
</view>
<view class="movie-info row">
<view class="movie-info-left">
<text>导演</text>
</view>
<view class="movie-info-right">
<text>{{item.director}}</text>
</view>
</view>
<view class="movie-info row">
<view class="movie-info-left">
<text>主演</text>
</view>
<view class="movie-info-right">
<text>{{item.actor}}</text>
</view>
</view>
<view>
<text class="movie-label">{{item.label}}</text>
</view>
<view class="movie-free">
<text>{{item.free}}</text>
</view>
</view>
</view>
</block>
</block>
</view>
<view class="footer-img">
<image src=""></image>
</view>
</view>
\ No newline at end of file
pages/play/movie/movie.wxss
/* pages/home/home/home.wxss */ page {
\ No newline at end of file background-color: #1C1C25;
}
.contaniner {
margin-top: 200rpx;
}
/* 状态筛选菜单 */
.status {
width: 750rpx;
height: 112rpx;
border-bottom: 1px #E2E7EF solid;
}
.status-item {
flex: 1;
height: 112rpx;
font-size: 26rpx;
font-weight: 400;
line-height: 36rpx;
color: #959DA9;
}
.status-item-active {
height: 112rpx;
color: #fff;
font-weight: 600;
border-bottom: 4rpx #fff solid;
}
.movie-wrapper {
position: relative;
width: 670rpx;
height: 396rpx;
margin: 76rpx auto 0;
padding: 64rpx 32rpx 32rpx 32rpx;
background: #272733;
}
.movie-time-wrapper {
position: absolute;
left: 0;
top: -30rpx;
width: 274rpx;
height: 60rpx;
padding-left: 24rpx;
background: #303041;
border-radius: 4rpx;
}
.movie-time-start {
color: #fff;
font-size: 38rpx;
}
.movie-time-end {
margin-left: 12rpx;
margin-top: 12rpx;
color: #C2C7CF;
font-size: 22rpx;
}
.movie-cover {
width: 206rpx;
height: 302rpx;
border-radius: 4rpx;
background-color: #fff;
}
.movie-info-wrapper {
margin-left: 34rpx;
}
.movie-name {
height: 52rpx;
color: #fff;
font-size: 30rpx;
}
.movie-dimensional {
width: 52rpx;
height: 32rpx;
margin-top: 6rpx;
margin-left: 12rpx;
font-size: 20rpx;
text-align: center;
line-height: 32rpx;
background: #15191F;
opacity: .5;
border-radius: 4rpx;
}
.movie-info {
margin-top: 8rpx;
font-size: 22rpx;
}
.movie-info-left {
color: #72727A;
}
.movie-info-right {
display: -webkit-box;
width: 265rpx;
margin-left: 16rpx;
color: #C2C7CF;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.movie-label {
height:32rpx;
margin-top: 16rpx;
padding: 0 8rpx;
color: #86C5E1;
font-size: 22rpx;
text-align: center;
line-height: 32rpx;
border: 1px solid #86C5E1;
border-radius: 4rpx;
}
.movie-free {
margin-top: 34rpx;
color: #fff;
font-size: 30rpx;
}
.movie-btn {
position: absolute;
right: 32rpx;
bottom: 32rpx;
width: 152rpx;
height: 56rpx;
color: #fff;
font-size: 26rpx;
text-align: center;
line-height: 56rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 4rpx;
}
.movie-week {
width: 100%;
height: 44rpx;
margin-top: 54rpx;
color: #C2C7CF;
font-size: 22rpx;
text-align: center;
line-height: 44rpx;
}
.all-movie-wrapper {
position: relative;
width: 670rpx;
height: 366rpx;
margin: 80rpx auto 0;
padding: 32rpx 32rpx 32rpx 278rpx;
background: #272734;
border-radius: 4rpx;
}
.all-movie-cover {
position: absolute;
left: 32rpx;
bottom: 32rpx;
width: 246rpx;
height: 366rpx;
background-color: #fff;
}
.footer-img {
width: 750rpx;
height: 150rpx;
margin-top: 64rpx;
background-color: #ccc;
}
image {
width: 100%;
height: 100%;
}
\ No newline at end of file
pages/play/service-sell/service-sell.js
...@@ -28,8 +28,23 @@ Page({ ...@@ -28,8 +28,23 @@ Page({
onLoad: function (options) { onLoad: function (options) {
}, },
/**
* banner 切换图片同步自定义标识组件
* @function
* @param {object} - funcEvent
* @returns
*/
onSwiperChange: function (funcEvent) {
this.setData({
bannerIndex: funcEvent.detail.current
})
},
/**
* 点击地址
* @function
* @param
* @returns
*/
onLocation: function () { onLocation: function () {
console.log('点了位置') console.log('点了位置')
} }
......
pages/play/service-sell/service-sell.wxml
<navigation class="navigation" titleText="服务详情" color="#ffffff"></navigation> <navigation class="navigation" titleText="服务详情" color="#ffffff" backIcon="/image/back-w.png"></navigation>
<view class="container"> <view class="container">
<view class="banner"> <view class="banner">
......
pages/play/service-sell/service-sell.wxss
.navigation {
z-index: 2000;
}
.container { .container {
padding-bottom: 196rpx; padding-bottom: 196rpx;
} }
......
project.config.json
...@@ -146,9 +146,16 @@ ...@@ -146,9 +146,16 @@
"scene": null "scene": null
}, },
{ {
"id": -1, "id": 11,
"name": "pages/play/service-sell/service-sell", "name": "pages/play/movie-detail/movie-detail",
"pathName": "pages/play/service-sell/service-sell", "pathName": "pages/play/movie-detail/movie-detail",
"query": "",
"scene": null
},
{
"id": 12,
"name": "pages/play/home/home",
"pathName": "pages/play/home/home",
"query": "", "query": "",
"scene": null "scene": null
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment