<template>
<view class="pages">
<!-- <view class="" :style="{height: navHeight+'px' }"></view> -->
<view class="banner">
<!-- <image :src="staticUrl+'/img/index-banner.png'" ></image> -->
<u-swiper
:list="bannerList"
height="600rpx"
indicatorMode="dot"
:indicatorStyle="{bottom:'100rpx'}"
keyName="sliderImg"
radius="0"
indicator
circular
@click="bannerClick"
></u-swiper>
</view>
<!-- 占位 banner -->
<view class="holdbanner" style="height: 600rpx;pointer-events:none"></view>
<!-- 页面滚动banner模糊 -->
<view class="blurbanner" style="height: 600rpx;" :class="{ isblur: isblur }"></view>
<view class="index-bg" :style="{backgroundImage:`url(${staticUrl}/img/index-bg.png?a=1)`}"></view>
<view class="page-wrap">
<view class="star-title u-flex u-row-between">
<view class="left u-flex">
<image class="icon" :src="staticUrl+'/img/title-star.png'" ></image>
<text class="text">演出剧目</text>
</view>
</view>
<swiper class="swiper" :autoplay="true" style="height: 400rpx;margin-bottom: 34rpx" >
<swiper-item :item-id="item.id" v-for="(item,index) in theatreList" :key="index">
<view class="programme-wrap">
<view class="programme">
<image class="img" :src="item.showImg" ></image>
<!-- <image class="img" :src="item.showImg" ></image> -->
<view class="text u-flex u-row-between">
<view class="left">
<view class="name">{{item.name}}</view>
<!-- <view class="addr">演出地点：{{item.address}}</view> -->
</view>
<view class="btn" @click="bookticket(item)">立即预定</view>
</view>
<!-- <view class="share" @click="getPoster(item)">
<image class="icon" :src="staticUrl+'/img/share-ico.png'" ></image>
</view> -->
</view>
</view>
</swiper-item>
</swiper>
</view>
<view class="news-wrap">
<view class="star-title u-flex u-row-between">
<view class="left u-flex">
<image class="icon" :src="staticUrl+'/img/title-star.png'" ></image>
<text class="text">演出资讯</text>
</view>
<view class="right u-flex">
<text class="text" @click="$u.route('pages/news')">更多</text>
<u-icon name="arrow-right" color="#C79191" size="36rpx"></u-icon>
</view>
</view>
<view class="news">
<u-scroll-list :indicator="false">
<view class="item" v-for="(item, index) in newsList" @click="newsClick(item)" :key="index">
<image class="img" :src="item.mainImg"></image>
<view class="text" style="padding-bottom: 10px;">
<view class="name u-line-2">{{item.title}}</view>
<!-- <view class="con u-line-1" v-html="item.centent"></view> -->
<view class="time u-flex u-row-between">
<view class="left">{{$u.timeFormat(item.onlineTime, 'yyyy-mm-dd')}}</view>
<image class="icon" :src="staticUrl+'/img/arrow-right-ico.png'" ></image>
</view>
</view>
</view>
</u-scroll-list>
</view>
</view>
<!-- content-wrap end -->
<!-- <image class="activity" :src="staticUrl+'/img/activity.png'" ></image> -->
<!-- 分享选择弹出内容 -->
<view class="share-option" :class="{shareShow:shareShow}">
<view class="overlay" v-if="shareShow" @click="shareShow=false"></view>
<button class="share-option-item wx-share" data-name="shareBtn" open-type="share">
发送给朋友
</button>
<view class="share-option-item" @click="getPoster">生成海报</view>
<view class="share-option-item" @click="shareShow=false">取消</view>
</view>
<u-popup :show="posterShow" @close="posterShow=false" ref="uni-popup">
<view class="poster-wrap u-flex u-col-center">
<view class="poster-inner">
<view class="close-wrap" @click="posterShow=false">
<u-icon name="close-circle" color="#fff" size="56rpx"></u-icon>
</view>
<view class="poster" id="poster" ref="poster" >
<u--image :showLoading="true" :src="posterSrc" width="100%" height="65vh" mode="aspectFit"></u--image>
</view>
<!-- savePoster -->
<view class="poster-btn" @click="saveImage">保存图片</view>
</view>
</view>
</u-popup>
<u-toast ref="uToast"></u-toast>
<tabbar :tabbarIndexProps='0' />
</view>
</template>
<script>
import { systemInfo } from "@/mixin.js";
import tabbar from "../../components/tabbar.vue";
export default {
components:{
tabbar,
// cartfixed
},
mixins:[systemInfo],
data() {
return {
staticUrl:this.$commonConfig.staticUrl,
bannerList: [],
theatreList:[],//剧院信息列表
bannerCurrent: 0,
isblur:false,
newsList:[],//资讯
shareShow:false,
posterShow:false,
posterStyle:{},
posterSrc:'',
}
},
computed: {
},
onShow() {
},
beforeRouteLeave() {
},
onLoad(query) {
this.getSystemInfo();
// console.log('statusBarHeight',this.statusBarHeight);
// console.log('navigationBarHeight',this.navigationBarHeight);
// console.log('windowHeight',this.windowHeight);
// console.log('navHeight',this.navHeight);
// console.log('vuex_member_info=======',this.vuex_member_info);
this.getClientIndex();
},
onReady() {
},
onUnload() {
},
methods: {
getMemberInfo(){
this.$u.api.memberInfo({id:this.vuex_member_info.id}).then(res=>{
this.memberInfo = res.data;
this.avatar = res.data.avatar;
this.$u.vuex('vuex_member_info', res.data);
// console.log('memberInfo',this.memberInfo);
}).catch(err=>{
// console.log('memberInfo',err.data);
})
},
getHotGoods(){
this.$u.api.topGoodList({pageNum:1,pageSize:20}).then(res=>{
this.hotGoods = res.data.rows;
console.log('res',res);
}).catch(err=>{
console.log('getHotGoods',err.data);
})
},
getClientIndex(){
this.$u.api.clientIndex().then(res=>{
// console.log('res',res);
this.bannerList = res.data.advList;
this.theatreList = res.data.performList;
this.newsList = res.data.informationList;
}).catch(err=>{
console.log('getClientIndex',err.data);
})
},
goLogin(){
uni.$u.route('/pages/login/login')
},
onPageScroll(e){
if(e.scrollTop>100){
this.isblur = true
}else{
this.isblur = false
}
},
bookticket(item){
// console.log('bookticket',item);
uni.$u.route('pages/ticketlist',{id:item.id})
},
openShare(){
this.shareShow = true;
},
// 海报相关开始
getPoster(item){
this.posterShow = true;
this.shareShow = false;
this.$u.api.performQrcode({performId:item.id}).then(res=>{
this.posterSrc = res.data.imageUrl;
// console.log('getPoster',res.data);
}).catch(err=>{
console.log('getPoster',err);
})
},
saveImage() {
let that = this;
uni.showLoading({
title: '保存中'
});
uni.downloadFile({
url: this.posterSrc,
success(res) {
if (res.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success() {
uni.showToast({
title: '保存到相册成功',
icon: 'success'
});
},
fail(err) {
console.log('保存图片失败',err);
if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
uni.getSetting({
success(res) {
if (!res.authSetting['scope.writePhotosAlbum']) {
uni.showModal({
title: '提示',
content: '您还没有授权访问相册，请前往设置页面打开权限。',
confirmText: '去设置',
success(res) {
if (res.confirm) {
uni.openSetting();
}
}
});
} else {
uni.showToast({
title: '保存图片失败',
icon: 'none'
});
}
}
});
} else {
uni.showToast({
title: '保存图片失败',
icon: 'none'
});
}
},
complete() {
uni.hideLoading();
that.posterShow = false;
}
});
} else {
uni.showToast({
title: '下载图片失败',
icon: 'none'
});
}
},
fail() {
uni.showToast({
title: '下载图片失败',
icon: 'none'
});
}
});
},
// 海报相关结束
newsClick(item){
uni.$u.route('/pages/newsdetails', {
id: item.id,
type:'news'
});
},
bannerClick(e){
return false
let item = this.bannerList[e];
// console.log('bannerClick',this.bannerList[e]);
uni.$u.route('/pages/newsdetails', {
id: item.id,
type:'swiperDetail'
});
}
}
}
</script>
<style>
page{
}
</style>
<style lang="scss" scoped>
$pagegap:32rpx;
.banner{
position: fixed;
left: 0;
top: 0;
width: 100%;
}
.blurbanner{
pointer-events: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
transition: all 0.3s;
&.isblur{
backdrop-filter: blur(8px);
}
}
.index-bg{
position: fixed;
display: block;
left: 0;
bottom: 0;
width: 100%;
min-height: calc( 100vh - 600rpx + 50rpx );
background-repeat: no-repeat;
background-position: top center;
background-size: 100% auto;
// z-index: -1;
}
.page-wrap{
position: relative;
}
.star-title{
margin-bottom: 32rpx;
.left{
.icon{
width: 28rpx;
height: 28rpx;
margin-right: 8rpx;
}
.text{
font-size: 32rpx;
font-weight: bold;
color: #FFFFFF;
line-height: 48rpx;
background: linear-gradient(128deg, #FFEFBC 0%, #FFD767 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
.right{
.text{
font-size: 24rpx;
font-weight: 400;
color: #C79191;
}
}
}
.programme-wrap{
// margin-bottom: 64rpx;
.programme{
// background-color: #FFFFFF;
position: relative;
border-radius: 30rpx;
overflow: hidden;
// background: radial-gradient(circle at -26rpx 230rpx, transparent 10%, #fff 4%) left, radial-gradient(circle at calc( 100% + 26rpx ) 232rpx, transparent 10%, #fff 4%) right;
background-color: #fff;
background-size: 50% 100%;
background-repeat: no-repeat;
.img{
width: 100%;
height: 242rpx;
display: block;
}
.text{
position: relative;
// &:before{
// content: '';
// // width: calc( 100% - 32rpx );
// width: 100%;
// height: 1px;
// position: absolute;
// left: 0;
// top: -2rpx;
// border-top: 4rpx dashed #931E0C;
// }
padding: 32rpx 30rpx;
.name{
font-size: 28rpx;
font-weight: bold;
color: #363636;
line-height: 42rpx;
// margin-bottom: 18rpx;
}
.addr{
font-size: 22rpx;
font-weight: 400;
color: #7F7F7F;
line-height: 34rpx;
}
.btn{
height: 51rpx;
line-height: 51rpx;
padding: 0 24rpx;
background: linear-gradient(90deg, #FF7979 0%, #ED0000 100%);
border-radius: 25rpx;
font-size: 20rpx;
font-weight: 400;
color: #FFFFFF;
}
}
.share{
position: absolute;
right: 16rpx;
top: 16rpx;
padding: 10rpx;
border-radius: 50%;
background-color: rgba(0,0,0,0.4);
.icon{
display: block;
width: 32rpx;
height: 32rpx;
}
}
}
}
.news-wrap{
position: relative;
margin-left: $pagegap;
margin-bottom: 180rpx;
.star-title{
margin-right: $pagegap;
}
.item{
width: 434rpx;
flex-shrink: 0;
margin-right: 20rpx;
background: #FFFFFF;
box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(59,0,0,0.5);
border-radius: 12rpx;
overflow: hidden;
.img{
display: block;
width: 100%;
height: 174rpx;
}
.text{
padding: 30rpx 20rpx 22rpx;
.name{
font-size: 28rpx;
font-weight: bold;
color: #333333;
margin-bottom: 12rpx;
}
.con{
font-size: 24rpx;
font-weight: 400;
color: #6B6B6B;
// line-height: 22rpx;
margin-bottom: 20rpx;
}
.time{
font-size: 20rpx;
font-weight: 400;
color: #C0C0C0;
line-height: 22rpx;
}
.icon{
display: block;
width: 80rpx;
height: 20rpx;
}
}
}
}
.activity{
display: block;
width: 112rpx;
height: 132rpx;
position: fixed;
right: 16rpx;
bottom: 174rpx;
}
</style>