moban-app/components/APPPush/app_push.js

export class appPush{
	constructor(option = {}) {
		console.log("appPush",option)
		// app内横幅提醒
		this.inApp = option.inApp;
		// 声音提醒
		this.voice = option.voice;
		// 振动提醒
		this.vibration = option.vibration;
		// 消息分类
		this.messageType = option.messageType || '';
		// 通知标题
		this.messageTitle = option.messageTitle || '';
		// 时间
		this.messageTime = option.messageTime || '现在';
		// 通知文案
		this.messageContent = option.messageContent || '';
		// 缩略图
		this.messageImage = option.messageImage || '';	
		
		
	    this.screenWidth = plus.screen.resolutionWidth;
	    this.screenHeight = plus.screen.resolutionHeight;
	    // 比例
	    this.propotation = this.screenWidth / 750
	    //弹窗容器宽度
	    this.popupViewWidth = this.propotation * 710;
	    // 弹窗容器高度
	    this.popupViewHeight = this.propotation * 152;
	    // 弹窗容器的Padding
	    this.viewContentPadding = this.propotation * 30;
		// 弹框容器的宽度
		this.viewContentWidth = parseInt(this.popupViewWidth - (this.viewContentPadding * 2))
		// 弹框到顶部的距离
		this.system = uni.getSystemInfoSync()
		// 过度时间
		this.duration = 200
		// 关闭时间
		this.closeTime = 10000
		
		console.log(this.inApp, this.voice, this.vibration)
		
		this.top = (this.propotation * 20) + this.system.statusBarHeight;
		this.initTop = -this.system.statusBarHeight
		
		this.body = null;
		this.bodyBg = null;
		this.timer = null;
		
		this.flag = false
		this.cur = {
			x: 0,
			y: 0,
			pageX: 0,
			pageY: 0
		}
		
	}
	
	// 生成弹框主体
	createView() {
		console.log((this.propotation * 20) + this.system.statusBarHeight+ '--------------')
		let view = new plus.nativeObj.View('popupView', {
			// tag: 'rect',
			top: (this.propotation * 20) + this.system.statusBarHeight,
			left: this.propotation * 20,
			height: this.popupViewHeight,
			width: this.popupViewWidth
		})
		// 绘制白色背景
		view.drawRect({
			color:"#626262",
			radius:"10px"
		})
		let viewContentList = [
			// {
			// 	src: '/static/push/message-icon.png',
			// 	id: 'icon',
			// 	tag: 'img',
			// 	position: {
			// 		top: this.viewContentPadding + "px",
			// 		left: this.viewContentPadding + "px",
			// 		width: (this.propotation * 24) + 'px',
			// 		height: (this.propotation * 24) + 'px',
			// 	}
			// },
			// {
			// 	tag: 'font',
			// 	id: 'pop-title',
			// 	text: this.messageType,
			// 	textStyles: {
			// 		size: (this.propotation * 24) + 'px',
			// 		align: "left",
			// 		color: "#4F555B"
			// 	},
			// 	position: {
			// 		top: this.viewContentPadding + "px",
			// 		left: (this.propotation * 64) + 'px',
			// 		height: (this.propotation * 24) + 'px',
			// 		width: this.viewContentWidth + "px",
			// 	}
			// },
			// {
			// 	tag: 'font',
			// 	id: 'time',
			// 	text: this.messageTime,
			// 	textStyles: {
			// 		size: (this.propotation * 24) + 'px',
			// 		align: "right",
			// 		color: "#4F555B"
			// 	},
			// 	position: {
			// 		top: this.viewContentPadding + "px",
			// 		left: this.viewContentPadding + "px",
			// 		height: (this.propotation * 24) + 'px',
			// 		width: this.viewContentWidth + "px",
			// 	}
			// },
			{
				tag: 'font',
				id: 'push-title',
				text: this.messageTitle,
				textStyles: {
					size: (this.propotation * 35) + 'px',
					align: "left",
					color: "#f7f7f7",
					overflow: "ellipsis"
				},
				position: {
					top: this.viewContentPadding + 'px',
					left: (this.propotation * 30) + 'px',
					height: (this.propotation * 35) + 'px',
					width: (this.propotation * 505) + 'px',
				}
			},
			{
				tag: 'font',
				id: 'push-content',
				text: this.messageContent,
				textStyles: {
					size: (this.propotation * 28) + 'px',
					align: "left",
					color: "#f7f7f7",
					overflow: "ellipsis"
				},
				position: {
					top: (this.propotation * 90) + 'px',
					left: (this.propotation * 30) + 'px',
					height: (this.propotation * 28) + 'px',
					width: (this.propotation * 655) + 'px',
				}
			},
			// {
			// 	src: this.messageImage,
			// 	id: 'image',
			// 	tag: 'img',
			// 	position: {
			// 		top: (this.propotation * 68) + 'px',
			// 		// right: "0px",
			// 		left: (this.propotation * 586) + 'px',
			// 		width: (this.propotation * 100) + 'px',
			// 		height: (this.propotation * 100) + 'px',
			// 	}
			// },
			// {
			// 	src: '/static/push/img-bg.png',
			// 	id: 'img-bg',
			// 	tag: 'img',
			// 	position: {
			// 		top: (this.propotation * 68) + 'px',
			// 		// right: "0px",
			// 		left: (this.propotation * 586) + 'px',
			// 		width: (this.propotation * 100) + 'px',
			// 		height: (this.propotation * 100) + 'px',
			// 	}
			// },
		]
		view.draw(viewContentList)
		// view.addEventListener("click",(e)=>{
		// 	console.log('---------------------')
		// });
		view.addEventListener("touchstart", (event) => {
			// console.log(event)
			this.flag = true;  
			var touch;  
			if (event.touches) {  
				touch = event.touches[0];  
			} else {  
				touch = event;  
			}  
			this.cur.x = touch.clientX;  
			this.cur.y = touch.clientY;
			this.cur.pageX = touch.pageX;
			this.cur.pageY = touch.pageY;  
		})
		view.addEventListener("touchmove", (event) => {
			// console.log(e)
			var touch;  
			if (event.touches) {  
				touch = event.touches[0];  
			} else {  
				touch = event;
			}  
			let moveX = touch.pageX - this.cur.x;   
			let moveY = touch.pageY - this.cur.y;   
			let x = moveX;  
			let y = moveY;
			// console.log(x, y)
			// console.log(this.cur, touch)
			if (x < 0) {  
				// x = 0;  
			} else if (x > (this.popupViewWidth - this.popupViewWidth)) {  
				// x = this.screenWidth - 40;  
			}  
			if (y < 0) {  
				// y = 0;  
			} else if (y >= ((this.propotation * 20) + this.system.statusBarHeight)) {  
				y = ((this.propotation * 20) + this.system.statusBarHeight);  
			}  
			this.body.setStyle({  
				top: y + 'px',  
				left: x + 'px'  
			});
		})
		/**
		 * 这里有一个bug暂时无法解决，当用户快速往左滑时，滑动区域超出屏幕会监听不到touchend事件😂，很难被发现我就不解决了
		 */
		view.addEventListener("touchend", (event) => {
			// console.log(this.cur, event)
			var touch;
			if (event.touches) {  
				touch = event.touches[0];  
			} else {  
				touch = event;  
			}
			let differX = Math.abs(this.cur.pageX) - Math.abs(touch.pageX)
			let differY = Math.abs(this.cur.pageY) - Math.abs(touch.pageY)
			this.flag = false
			// console.log(differX, differY)
			if(Math.abs(differX) > 5 || Math.abs(differY) > 5) {	// 上下移动或左右移动超过5px则关闭弹窗
				this.hide()
			} else {	// 否则当作单击事件
				console.log('-------------------')
				this.hide()
			}
		})
		this.body = view;
		
	// 	let bodyBg = new plus.nativeObj.View('bodyBg',{
	// 		top: (this.propotation * 20) + this.system.statusBarHeight,
	// 		left: this.propotation * 20,
	// 		height: this.popupViewHeight,
	// 		width: this.popupViewWidth,
	// 		backgroundColor:'rgba(0, 0, 0, 1)',
	// 	});
	// 	bodyBg.draw([
	// 	  {tag:'font',id:'confirm',text:'关闭关闭',textStyles:{color:'red',size:'16px'}},
	// 	]);
	
	// 	bodyBg.addEventListener("click",(e)=>{
	// 		console.log('---------------------')
	// 	});
	// 	this.bodyBg = bodyBg
	}
	// 显示/关闭弹框动画
	modelAnimationOpenOrClose(type) {
		var options = {type:type,duration:this.duration};
		plus.nativeObj.View.startAnimation(options,this.body, () => {
			// 关闭原生动画
			plus.nativeObj.View.clearAnimation();
		});
	}
	bgAnimationOpenOrClose(type) {
		var options = {type:type,duration:this.duration};
		plus.nativeObj.View.startAnimation(options,this.bodyBg, () => {
			// 关闭原生动画
			plus.nativeObj.View.clearAnimation();
		});
	}
	// closeAnimation() {
	// 	// push弹框距离最顶部的距离
	// 	let top = (this.propotation * 20) + this.system.statusBarHeight
	// 	// 完全隐藏时的顶部距离
	// 	let hideTop = -this.system.statusBarHeight
	// 	this.timer = setInterval(() => {
	// 		this.top = this.top - 2
	// 		if(this.top < hideTop * 2) {
	// 			clearInterval(this.timer)
	// 			this.timer = null
	// 		}
	// 		this.body.setStyle({
	// 			top:this.top
	// 		})
	// 	}, 1)
	// }
	// 显示弹框
	show() {
		this.tips()
		if(this.inApp) {
			this.createView()
			// this.modelAnimationOpenOrClose('slide-in-right')
			this.body.show()
			// this.bodyBg.show()
			setTimeout(() => {
				if(this.body) {
					this.hide()
				}
			}, this.closeTime)
		}
	}
	// 关闭弹框
	hide() {
		this.modelAnimationOpenOrClose('slide-out-right')
		this.body.hide()
		setTimeout(() => {
			plus.nativeObj.View.clearAnimation();
			this.body = null
		}, this.duration)
		// this.bgAnimationOpenOrClose('slide-out-right')
		// this.bodyBg.hide()
	}
	// 调用系统提示音和振动
	tips() {
		if(this.voice) {
			let system = uni.getSystemInfoSync().platform
			if(system == 'ios') {
				let player = plus.audio.createPlayer( "/static/audio/ios.mp3" );
				player.play()
			} else {
				let main = plus.android.runtimeMainActivity();
				let RingtoneManager = plus.android.importClass("android.media.RingtoneManager");
				let uri = RingtoneManager.getActualDefaultRingtoneUri(main, RingtoneManager.TYPE_NOTIFICATION);
				console.log(uri)
				let MediaPlayer = plus.android.importClass("android.media.MediaPlayer");  
				let player = MediaPlayer.create(main, uri);  
				player.setLooping(false);  
				player.prepare();  
				player.start();
			}
		}
		if(this.vibration) {
			plus.device.vibrate()
		}
	}
}

export default appPush