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
			></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="staticUrl+'/img/programme-01.png'" ></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="openShare">
								<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.imgUrl"></image>
						<view class="text">
							<view class="name">{{item.name}}</view>
							<view class="con u-line-1">{{item.con}}</view>
							<view class="time u-flex u-row-between">
								<view class="left">{{item.time}}</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:[
					{name:'资讯标题',con:'11月12日，以“打造特色红色文化...',time:'2023-11-12',imgUrl:'https://unsplash.it/474/170?id=1'},
					{name:'资讯标题',con:'11月12日，以“打造特色红色文化...',time:'2023-11-12',imgUrl:'https://unsplash.it/474/170?id=2'},
					{name:'资讯标题',con:'11月12日，以“打造特色红色文化...',time:'2023-11-12',imgUrl:'https://unsplash.it/474/170?id=3'},
				],
				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.theatreList;
				}).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(){
				this.posterShow = true;
				this.shareShow = false;
				this.$u.api.getPoster({goodsId:this.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'
				});
			}
		}
	}
</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-size: 50% 100%;
		background-repeat: no-repeat;
		.img{
			width: 100%;
			height: 242rpx;
			display: block;
		}
		.text{
			position: relative;
			&:before{
				content: '';
				width: calc( 100% - 26rpx );
				height: 1px;
				position: absolute;
				left: 26rpx;
				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;
				line-height: 22rpx;
				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>