besiweb/pages/index/peifu/index.vue

<template>
	<view class="uni-main" @click="isclose()">
     <view class="header">
		 <u-icon class="back" name="arrow-left" color="#fff" size="48" @click="backHome()"></u-icon>
     	<text @click="backHome()">返回</text>
		<image  class="menu" @click.stop="isopen()" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAABFCAYAAAAcjSspAAAAAXNSR0IArs4c6QAAAdtJREFUeAHtmb1KxFAQhTf+NYKF+AB2umBhIdhaCIKNjS9jYaGloM/gC2i9jdoKaqGVhawi6EP4QzwjvkDOZOMVv4Fh05w5N1+SmWRvr0dAAAIQgAAEIAABCEAAAhCAAAQgAAEIQAACEIDAbxGoMsZ1XS9Lv6tcVI5larWkrVVnqDysqurCrWlDEZA5mT4pp13zEeo+VXtJYO4dj8zVXZVhiUCCw7hyIw6cyEDJaJ21NtUEGCsyJ3YtxzfLtRvRuWtj95QwVF9Z08+esqRG+6j1HKifnOiXgAAEIACBEgmkpk+ckCZQTJ4FZWa8R6m2YqjJc9tWscZ1BORYWWIMtKjJxif0I7DvFJmuqMaVa9yBbtt9V8nc8vMdnFjGIh5pKzJQXi3H7kTPrlUGyqVMz1zjEevuVP/U9bB7ShiqrwTUdWVp3z4D9ZOSP1YDHwEBCEDg/xLITp++0O0oS5k+cSVji+NI0ydeGaywoWgcz8ox/vqbsZxHK/pQ+b7APDg2mZe32OIoEUhwmFBuxoETGSj2V6izUEMzZWi+JRkoN6rw7hp3oLO3TeM2s0LP64v6ypbE+8rSGm1sccRFIyAAAQhAAAIQgAAEIAABCEAAAhCAAAQgAAEIQOCPEfgCRWjhRTN8lMcAAAAASUVORK5CYII=" mode=""></image>
		<cover-view class="menuBox" v-show="header.isopen">
			<view class="menuInner">
				<navigator url="./rule" hover-class="navigator-hover">
				<view class="menuI1">
					<image src="../../../static/index/peifu/agreement.png" mode="" style="width: 50rpx;height: 50rpx;"></image>
					<view>规则说明</view>
				</view>
				</navigator>
				<navigator url="./record">
				<view class="menuI2">
					<image src="../../../static/index/peifu/menu_history_icon.png" mode="" style="width: 50rpx;height: 50rpx;"></image>
					<view>培福记录</view>
				
				</view>
				</navigator>
			</view>
		</cover-view>
		
		<view class="shelter" v-if="isrank">
			<view class="rank" >
				<view class="rankHeader">
					<text class="rankText">排行榜</text>
					<text class="rankClose" @click="rankClose()">×</text>
				</view>
				<view class="rankContent">
					<!-- 排行 -->
					<view class="rankInner">
						<view-item v-for="(rankPeople,index) in rankPeoples"  class="rankOrder">
							<view class="rankI" v-if="index<=2">
							<image :src="rankImage[index]" mode=""></image>
							</view>
							<view class="rankA" v-else>
								{{index+1}}
							</view>
							
							<view class="rankName">
								{{rankPeople.name}}
							</view>
							<view class="rankNum">
								{{rankPeople.num+'颗'}}
							</view>
						</view-item>
					</view>
				</view>
			</view>
			
		</view>	
     </view>
	 
	 <view class="zhe" v-if="cord">
	 	 <image src="../../../static/index/peifu/luck_bag_bg.png" mode=""  class="cord"></image>
		 <image src="../../../static/index/peifu/peifu_btn.png" mode="" class="know"></image>
		 <view class="knowText" @click="diss()">我知道了</view>
		 <view class="knowTime">{{knowTime}}</view>
	 </view>
	  
	 <view class="wate" v-if="ishappen">
	 	<image src="../../../static/index/peifu/kettle.png" mode="" :animation="animationData" :class="waters[num]">
		</image>
		<image src="../../../static/index/peifu/water.gif" mode="" class="watering" v-if="waterhappen"></image>
	
	 </view>
	
	 
	 
	 
	 
	 <view class="Bottom">
	 	<view class="imgBtn" @click="waterB()">
	 		<image src="../../../static/index/peifu/peifu_btn.png" mode=""></image>
			<view class="btnText">浇灌福气</view>
	 	</view>
		<view class="rankBtn">
			<image @click="openRank()"  src="../../../static/index/peifu/order.png" mode=""></image>
		</view>
	 </view>
	</view>
</template>

<script>
	export default {
			data(){
				return{	
				num : 0,
				waters:['water1','water2','water3'],
				header:{
					isopen:false
				},
				timer:'',
				knowTime :3,
				ishappen:true,
				cord:false,
				waterhappen:false,
				isrun:true,
				isrank:false, //false
				rankPeoples:[
					{name:'张三',num:20},
					{name:'李四',num:20},
					{name:'王五',num:20},
					{name:'老六',num:20},
					{name:'老七',num:20},
					{name:'老八',num:20}
				],
				rankImage:[
					'../../../static/index/peifu/one_rank.png',
					'../../../static/index/peifu/two_rank.png',
					'../../../static/index/peifu/three_rank.png'
				],
				animationData:{},
				};
				
			},
			methods:{
				backHome() {
					uni.navigateBack({
						delta: 1
					});
				},
					isopen(event){
						this.header.isopen = true
					},
					isclose(){
						this.header.isopen = false
					},
					openRank(){
						this.isrank = true
					},
					rankClose(){
						this.isrank = false
					},	
					waterB(){
				this.num++
				var that = this
				setTimeout(function(){
					that.num++
				},1500)
	
			  setTimeout(function(){
			  					that.waterhappen = true
								that.num = 2
			  				},3000)
							setTimeout(function(){
								that.num = 0
								that.waterhappen = false
							},6000)
			setTimeout(function(){
				that.cord = true
				setTimeout(function(){
					that.cord = false
					clearInterval(that.timer)
				},3000)
				that.timer = setInterval(function(){
					that.knowTime--
				},1000)
				
			},6000)
					},
					diss(){
						this.cord = false
					}
			},
			onUnload:{
				
			},
			onload:{
			
			}

	}
	
</script>

<style >
	page {
		height: 100%;
		padding: 0;
		margin: 0;
		overflow-x: hidden;
	}
	.uni-main{
		width: 100%;
		height: 100%;
		min-height: 800rpx;
		display: block;
		background:url('../../../static/index/peifu/peifu_bg.png')  no-repeat  center 100%/100% #f5c163;
		min-height: 800rpx;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		/* background: cover; */
		overflow-x:hidden ;
	}
	.header{
		padding-top: 10rpx;
	}
	.header text{
		margin: 30rpx;
		color: #FFFFFF;
		font-size: 40rpx;
	}
	.header .menu{
	margin-top: -100rpx;
	width: 100rpx;
	height: 100rpx;
	margin-left: 85%;
	}
	.menuBox{
		width: 300rpx;
		height: 230rpx;
		margin-left:100%;
		transform: translateX(-100%);
		background-color: #FFFFFF;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.menuI1,.menuI2{
		width: 300rpx;
		height: 115rpx;
		padding-top: 40rpx;
		padding-left: 20rpx;
	}
	.menuI1 view,.menuI2 view{
		float: right;
		font-size: 40rpx;
		margin-right: 30rpx;
	}
	.Bottom{
		
	}
	.imgBtn image{
		width: 400rpx;
		height: 120rpx;	
	}
.imgBtn{
		position: absolute;
		width: 400rpx;
		height: 120rpx;	
		top: 88%;
		left: 50%;
		transform: translateX(-50%);
	}
	.btnText{
		position: absolute;
		color: #c5836b;
		font-size: 60rpx; 
		font-weight: 700;
		transform: translateY(-140%);
		left: 80rpx;
		
	}
	.rankBtn image{
		width: 100rpx;
		height: 120rpx;
		position: absolute;
		top: 88%;
		left: 100%;
		transform: translateX(-120%);
	}
	.shelter{
		top: 0;
		position: absolute;
		z-index: 9;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
	}
	

	.rank{
		position: absolute;
		top: 20%;
		width: 580rpx;
		height: 900rpx;
		background-color: #fed396;
		border-radius: 20rpx;
	left: 50%;
		transform: translateX(-50%);
	}
	.rankHeader{
		width: 580rpx;
		height: 100rpx;
	}
	.rank .rankText,.rank .rankClose{
		display: block;
		font-weight: 800;
		margin-top: 0rpx;
		position: absolute;
		line-height: 100rpx;
		margin-left: 0;
		left:50%;
		transform: translateX(-50%);
	}
	.rank .rankClose{
		font-size: 100rpx;
		left: 90%;
		margin-top: -10rpx;
	}
	.rank .rankText{
		color: #c38466;
	}
	.rank .rankContent{
		width: 500rpx;
		height: 780rpx;
		border-radius: 20rpx;
		background-color:#e4c495;
		margin-left: 40rpx;
		overflow: scroll;
	}
	.rankInner{
		margin-top: 20rpx;
	}
	.rankContent .rankInner {
		margin-left: 10rpx;
		position: relative;
	}
	.rankOrder{	
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		background-color: #f7ebdd;
		width: 480rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.rankName,.rankNum,.rankA{
		font-weight: 500;
		position: absolute;
		font-size: 35rpx;
		color:#c8907a;
		line-height: 80rpx;
	}
	.rankName{
	left: 40%;
	}
	.rankNum{
	 left: 75%
	}
	.rankI image{
		width: 50rpx;
		height: 60rpx;
		transform: translateX(15rpx);
	}
	.rankA{
		left: 6%;
	}
	.wate image{
		margin: 0;
		position: absolute;
		width: 220rpx;
		height: 150rpx;
		top: 55%;
		left: 70%;
		
	}
	.water1{
	
	transform: rotateZ(0deg);
	transform: translateX(200rpx);
	}
	.water2{
		transition:all 1.5s;
		transform: translateX(-20rpx);
	}
	.water3{
		transition:all 1.5s;
		transform: rotateZ(-40deg);
	},
	.watering{
		transform: rotateZ(40deg);
		transform: translateX(-150rpx) translateY(50%);
	}
	.cord{
		width: 400rpx;
		height: 600rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%) translateY(80%);
	}
	.zhe{
		width: 100%;
		height: 100%;
		background-color: rgb(0,0,0,0.4);
		position: absolute;
		top: 0;
		z-index: 999;
	}
	.know,.knowText{
		position: absolute;
		width: 300rpx;
		height:80rpx;
		left: 50%;
		transform: translateX(-50%);
		top: 70%;
	}
	.knowText{
		color: #c5836b;
		font-size: 50rpx;
		font-weight: 700;
		position: absolute;
		text-align: center;
	}
	.knowTime{
		width: 70rpx;
		height: 70rpx;
		border: #ff0000 5rpx solid;
		border-radius: 50%;
		font-size: 50rpx;
		text-align: center;
		position: absolute;
		top: 38%;
		left: 65%;
	}
</style>