h5-meike/components/gmy-float-touch/gmy-float-touch.vue

<template name="gmy-float-touch">
	<view>
		<view @touchmove.stop.prevent = "doNothing" >
			<view class="box"  style="z-index: 999;" @click="show" :style="{top:top+'px',left:left + 'px'}" @touchmove="touchmove" @touchend="touchend">
				<image :src="mainImg" mode="aspectFill"  :animation="animationData" ></image>
				<!-- <text style="font-size: 20rpx;color: #fff;">订单</text> -->
			</view>
			<!-- <view class="menu  " :class="{menu0:!isShow&&isleft,menu1:isShow&&isleft ,menu1R:isShow&& !isleft ,menu0R:!isShow&& !isleft}" :style="{top:(top-75)  +'px'}" @tap="menuClick(1)" >
				<image :src="imgLists[0]" mode=""></image>
			</view> -->
			<!-- xuchao: 质惠游一期只有门票模块，仅保留"门票订单"菜单项 -->
			<view class="menu " :class="{menu0:!isShow&&isleft,menu4:isShow&&isleft ,menu4R:isShow&& !isleft ,menu0R:!isShow&& !isleft}"  :style="{top:top+'px'}" @tap="menuClick(4)">
				<image :src="imgLists[3]" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:"gmy-float-touch",
		data(){
			return {
				isShow:false,
				top:500,
				left:3,
				right:3,
				isleft:true,
				animationData:''
			}
		},
		props:{
			imgLists:{
				type:Array
			},
			mainImg:{
				type:String,
				default:"../../static/main.png"
			}
		},
		methods:{
			doNothing:function(){},
			show:function(){
				this.isShow = !this.isShow;
				this.spred();
			},
			touchmove:function(e){
				if(this.isShow){
					return 
				}
				var position = e.touches[0];
				var wHeight = this.getSystemInfo('H');
				if(position.pageY>50 && position.pageY+50 < wHeight){
					this.top =  position.pageY-20;
				}
				this.left = position.pageX;
			},
			touchend:function(e){
				var wWidth = this.getSystemInfo('W');
				const pageX = e.changedTouches[0].clientX;
				if(pageX > wWidth*0.5){
					this.isleft = false;
					this.left = wWidth-50;
				}
				else{
					this.isleft = true;
					this.left = 3;
				}
				
			},
			menuClick:function(index){
				this.$emit("menuClick",index);
			},
			getSystemInfo:function(type){
				var result;
				const screen = uni.getSystemInfoSync();
				const wHeight = screen.windowHeight;
				const wWidth = screen.windowWidth;
				switch(type){
					case 'H':result =  wHeight;break;
					case 'W':result = wWidth;break;
					default: result = 'Err';			
				}
				return result;
			},
			spred:function(e){
				var animation = uni.createAnimation({
				  duration: 200,
					timingFunction: 'ease',
				});
				this.animationData = animation.export();
				
				if(this.isShow){
					animation.rotate(135).step();
				}
				else{
					animation.rotate(0).step();
				}
				this.animationData = animation.export();
			},
		}
	}
	
</script>

<style lang="scss">
	image{
		width: 80upx;
		height: 80upx;
		z-index: 99;
		// margin:10upx 20upx 10upx 20upx;
	}
	.box{
		position: fixed;
		left: 5upx;
		top: 70%;
		width: 80upx;
		height: 80upx;
		// border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// background-color: rgba($color: #777, $alpha: 0.4);
	}
	.menu{
		color:white;
		position: fixed;
		width: 80upx;
		height: 80upx;
		// border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// background-color: rgba($color: #777, $alpha: 0.4);
	}
	.menu0{
		left: 5upx;
		opacity: 0;
		transition: top 0.2s, left 0.2s, opacity 0.2s;
	}
	.menu1{
		left: 20upx;
		transition: top 0.2s, left 0.2s, opacity 0.2s;
	}
	.menu2{
		left: 10upx;
		transition: top 0.2s, left 0.2s, opacity 0.2s;
	}
	.menu3{
		left: 205upx;
		transition: top 0.2s, left 0.2s, opacity 0.2s;
	}
	.menu4{
		left: 106upx;
		transition: top 0.2s, left 0.2s, opacity 0.2s;
	}
	.menu5{
		left: 5upx;
		transition: top 0.2s, left 0.2s, opacity 0.2s;
	}
	.menu0R{
		right: 10upx;
		opacity: 0;
		transition: top 0.2s, right 0.2s, opacity 0.2s;
		
	}
	.menu1R{
		right: 20upx;
		transition: top 0.2s, right 0.2s, opacity 0.2s;
	}
	.menu2R{
		right: 20upx;
		transition: top 0.2s, right 0.2s, opacity 0.2s;
	}
	.menu3R{
		right: 210upx;
		transition: top 0.2s, right 0.2s, opacity 0.2s;
	}
	.menu4R{
		right: 106upx;
		transition: top 0.2s, right 0.2s, opacity 0.2s;
	}
	.menu5R{
		right: 20upx;
		transition: top 0.2s, right 0.2s, opacity 0.2s;
	}

	/* #ifdef H5 */
	// xuchao: 宽屏时页面列居中（375px），悬浮球及菜单同步锚定到列左缘，避免脱离页面
	@media screen and (min-width: 751px) {
		.box {
			left: calc(50vw - 184px) !important;
		}
		.menu0, .menu0R {
			left: calc(50vw - 184px) !important;
			right: auto !important;
		}
		.menu4, .menu4R {
			left: calc(50vw - 134px) !important;
			right: auto !important;
		}
	}
	/* #endif */
</style>