great_mobileui/pages/index/index.vue

<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(${indexBg})`}"></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="false" 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"  @click="$u.route('pages/news')">
					<text class="text">更多</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" mode="aspectFill"></image>
						<view class="text" style="padding-bottom: 10px;">
							<view class="name u-line-2">{{item.title}}</view>
							<view class="con u-line-1">{{item.infoSnapshot}}</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>
		<!-- <image @click="audioClick" :class="{rotate:musicPlay}" class="audio-btn" :showLoading="false" :src="staticUrl+'/img/music.svg'"></image> -->
		<tabbar :tabbarIndexProps='0' />
	</view>
</template>

<script>
	import { systemInfo } from "@/mixin.js";
	import tabbar from "../../components/tabbar.vue";
	// const innerAudioContext = uni.createInnerAudioContext();
	export default {
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: this.$isDevelop?'剧场票务':'伟大转折演艺',
		      path: '/pages/index/index'
		    }
		  },
		  onShareTimeline(res) {
		      if (res.from === 'button') {// 来自页面内分享按钮
		        console.log(res.target)
		      }
		      return {
		        title: this.$isDevelop?'剧场票务':'伟大转折演艺',
		        path: '/pages/index/index'
		      }
		    },
		components:{
			tabbar,
			// cartfixed
		},
		mixins:[systemInfo],
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				bannerList: [],
				theatreList:[],//剧院信息列表
				bannerCurrent: 0,
				isblur:false,
				newsList:[],//资讯
				shareShow:false,
				posterShow:false,
				posterStyle:{},
				posterSrc:'',
				musicPlay:true, 
				indexBg:`${this.$commonConfig.staticUrl}/img/index-bg.png`,
				scene:null,
			}
		},
		computed: {
		},
		onShow() {
			// if(innerAudioContext.src){
			// 	this.audioStop();
			// 	this.audioPlay();
			// }
		},
		beforeRouteLeave() {
			
		},
		onLoad(page) {
			console.log('index page',page);
			const scene = decodeURIComponent(page.scene);
			if(scene&&scene!='undefined'){
				console.log('index scene',scene);
				this.scene = scene;
				scene&&uni.setStorage({
					key:'scene',
					data:scene
				});
			}
			
			
			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();
			
			//音乐地址
			// innerAudioContext.src = this.staticUrl+'/img/audio.mp3';
			// innerAudioContext.autoplay = true;//自动播放
			// innerAudioContext.loop = true; //循环播放
			//音乐播放
			// this.audioStop();
			// this.audioPlay();
			
			if(this.$isDevelop){
				this.indexBg = `${this.$commonConfig.staticUrl}/img/index-bg-dev.png`;
				// this.indexBg = 'none'
			}
		},
		onReady() {
			
		},
		onUnload() {
			// this.audioStop();
		},
		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
				}
			},
			async bookticket(item){
				let retailId = null;
				try {
					const res = await uni.getStorage({ key: 'retailId' });
					retailId = res.data;
				} catch (error) {
					
				}
				// console.log('bookticket',item);
				if(retailId){
					uni.$u.route('pages/ticketlist',{id:item.id})
				}else{
					uni.navigateToMiniProgram({
						// appId: 'wx2c348cf579062e56', // 美团小程序appId
						shortLink: '#小程序://美团丨外卖团购特价美食酒店电影/VPWfvtLFajYiHei',
						// path: item.url
					})
				}
				
			},
			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'
				});
			},
			audioClick(){
				console.log('musicPlay',this.musicPlay);
				if (this.musicPlay == true) {
						this.audioStop();
					} else if(this.musicPlay == false){
						this.audioPlay();
				}
			},
			audioStop(){
				this.musicPlay = false;
				innerAudioContext.stop()
			},
			audioPlay(){
				this.musicPlay = true;
				innerAudioContext.play()
			}
		}
	}
</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;
	// background-color: #a00303;
	// z-index: -1;
}
.page-wrap{
	position: relative;
}
.star-title{
	margin-bottom: 22rpx;
	.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{
		padding: 10rpx 32rpx 10rpx 10rpx;
		.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 28rpx;
			.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;
}
.audio-btn{
	width: 30px;
	height: 30px;
	border-radius: 50%;
	position: fixed;
	right: 24rpx;
	top: 150px;
}
.rotate{
	animation: rotate 4s infinite linear;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>