更新

App.vue

@@ -30,6 +30,72 @@
 				console.log("info.clientid",info.clientid)
 			   }, err => {
 			});
+			// 监听在线消息事件  
+			plus.push.addEventListener( "receive", function( msg ) {  
+				if ( msg.aps ) {  // Apple APNS message  
+					//APNS下发的消息，应用在前台  
+				} else {  
+					//其它情况接收消息  
+					
+				}  
+				let params = {
+					inApp: true, // app内横幅提醒
+					voice: true,    // 声音提醒
+					vibration: true,    // 振动提醒
+					messageType: '',
+					messageTitle: msg.title,
+					messageContent: msg.content,
+					messageImage: 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/logo.png'
+				}
+				console.log("params",params,msg)
+				that.$appPush(params)
+				var userInfo = uni.getStorageSync("userInfo")
+				var that = this
+				this.$api.doRequest('get', '/salePlanInfo/getTips', {phone:userInfo.phone}).then(res => {
+					if (res.data.data) {
+						let name = 'myTip';
+						let value = res.data.data.myTip;
+						that.$store.commit('$uStore', {
+							name,
+							value
+						});
+						if(value != 0){
+							uni.setTabBarBadge({
+								index:3,
+								text:value+""
+							})
+						}
+						name = 'taskTip';
+						value = res.data.data.taskTip;
+						that.$store.commit('$uStore', {
+							name,
+							value
+						});
+						name = 'contractTip';
+						value = res.data.data.contractTip;
+						that.$store.commit('$uStore', {
+							name,
+							value
+						});
+					}
+				})
+			//其它逻辑  
+			}, false );
+			//监听系统通知栏消息点击事件  
+			plus.push.addEventListener('click', function(msg){  
+			    //处理点击消息的业务逻辑代码  
+				if(msg.content&&msg.content.contains("任务")){
+					uni.navigateTo({
+						url: '/pages/task/my_task'
+					})
+				}
+				else if(msg.content&&(msg.content.contains("合同")||msg.content.contains("交易"))){
+					uni.navigateTo({
+						url: '/pageB/contract/contract'
+					})
+				}
+				
+			}, false);  
 			// #endif
 			this.$socket.initWebIM(this.$ws, true, true)
 			let userInfo = uni.getStorageSync('userInfo') || '';

components/APPPush/app_push.js

@@ -0,0 +1,347 @@
+export class appPush{
+	constructor(option = {}) {
+		console.log(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 * 192;
+	    // 弹窗容器的Padding
+	    this.viewContentPadding = this.propotation * 30;
+		// 弹框容器的宽度
+		this.viewContentWidth = parseInt(this.popupViewWidth - (this.viewContentPadding * 2))
+		// 弹框到顶部的距离
+		this.system = uni.getSystemInfoSync()
+		// 过度时间
+		this.duration = 200
+		// 关闭时间
+		this.closeTime = 5000
+		
+		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:"#fff",
+			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 * 30) + 'px',
+					align: "left",
+					color: "#202123",
+					overflow: "ellipsis"
+				},
+				position: {
+					top: (this.propotation * 82) + 'px',
+					left: (this.propotation * 30) + 'px',
+					height: (this.propotation * 30) + 'px',
+					width: (this.propotation * 505) + 'px',
+				}
+			},
+			{
+				tag: 'font',
+				id: 'push-content',
+				text: this.messageContent,
+				textStyles: {
+					size: (this.propotation * 24) + 'px',
+					align: "left",
+					color: "#4F555B",
+					overflow: "ellipsis"
+				},
+				position: {
+					top: (this.propotation * 130) + 'px',
+					left: (this.propotation * 30) + 'px',
+					height: (this.propotation * 24) + 'px',
+					width: (this.propotation * 505) + '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

components/APPPush/h5_push.vue

@@ -0,0 +1,209 @@
+<template>
+	<view>
+		<transition name="slide-fade">
+			<view class="h5_push" @touchstart.stop.prevent="touchstart" @touchmove.stop.prevent="touchmove" @touchend.stop.prevent="touchend" v-if="show" :style="style">
+				<view class="push-title">
+					<view class="push-type">
+						<image src="/static/push/message-icon.png"></image>
+						{{messageType}}
+					</view>
+					{{messageTime}}
+				</view>
+				<view class="push-body">
+					<view class="push-content">
+						<view class="push-content-title">{{messageTitle}}</view>
+						<view class="push-content-text">{{messageContent}}</view>
+					</view>
+					<image :src="messageImage" class="push-img" mode="aspectFill"></image>
+				</view>
+			</view>
+		</transition>
+	</view>
+</template>
+
+<script>
+	export default{
+		data() {
+			return {
+				show: false,
+				// 关闭时间
+				closeTime: 3000,
+				// app内横幅提醒
+				inApp: false,
+				// 声音提醒
+				voice: true,
+				// 振动提醒
+				vibration: false,
+				// 消息分类
+				messageType: '',
+				// 通知标题
+				messageTitle: '',
+				// 时间
+				messageTime: '现在',
+				// 通知文案
+				messageContent: '',
+				// 缩略图
+				messageImage: '',
+				
+				top: 20,
+				left: 20,
+				cur: {
+					x: 0,
+					y: 0,
+					pageX: 0,
+					pageY: 0
+				}
+			}
+		},
+		computed:{
+			style() {
+				let system = uni.getSystemInfoSync()
+				let statusBarHeight = system.statusBarHeight
+				return `top: calc(${statusBarHeight}px + ${this.top}rpx);left: ${this.left}rpx`
+			}
+		},
+		created() {
+			setTimeout(() => {
+				this.show = false
+			}, this.closeTime)
+		},
+		methods:{
+			touchstart(event) {
+				console.log(event)
+				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;  
+				console.log(this.cur)
+			},
+			touchmove(event) {
+				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)
+				let system = uni.getSystemInfoSync()
+				if (y >= (uni.upx2px(20) + system.statusBarHeight)) {  
+					y = (uni.upx2px(20) + system.statusBarHeight);  
+				}
+				this.top = y / (uni.upx2px(y) / y)
+				this.left = x / (uni.upx2px(x) / x)
+				
+				// this.body.setStyle({  
+				// 	top: y + 'px',  
+				// 	left: x + 'px'  
+				// });
+			},
+			touchend(event) {
+				console.log(event)
+				var touch;
+				if (event.touches.length) {  
+					touch = event.touches[0];  
+				} else {  
+					touch = event.changedTouches[0];  
+				}
+				console.log(this.cur, touch)
+				let differX = Math.abs(this.cur.pageX) - Math.abs(touch.pageX)
+				let differY = Math.abs(this.cur.pageY) - Math.abs(touch.pageY)
+				// console.log(differX, differY)
+				if(Math.abs(differX) > 5 || Math.abs(differY) > 5) {	// 上下移动或左右移动超过5px则关闭弹窗
+					this.show = false
+				} else {	// 否则当作单击事件
+					console.log('-------------------')
+					this.show = false
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.h5_push{
+		width: 710rpx;
+		height: 192rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 3rpx 18rpx 0px rgba(54, 58, 68, 0.08);
+		border-radius: 20rpx;
+		position: fixed;
+		z-index: 9999999;
+		.push-title{
+			padding: 30rpx 30rpx 15rpx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			font-size: 24rpx;
+			font-weight: 400;
+			color: #4F555B;
+			.push-type{
+				display: flex;
+				align-items: center;
+				font-size: 24rpx;
+				font-weight: 400;
+				color: #4F555B;
+				image{
+					width: 24rpx;
+					height: 24rpx;
+					margin-right: 10rpx;
+				}
+			}
+		}
+		.push-body{
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0 24rpx 0 30rpx;
+			.push-content{
+				width: calc(100% - 150rpx);
+				.push-content-title{
+					font-size: 30rpx;
+					font-weight: 500;
+					color: #202123;
+					margin-bottom: 20rpx;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+				.push-content-text{
+					font-size: 24rpx;
+					font-weight: 400;
+					color: #4F555B;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+			}
+			.push-img{
+				width: 100rpx;
+				height: 100rpx;
+				background: #F2F2F3;
+				border: 0.5px solid #E9E9E9;
+				border-radius: 10rpx;
+				margin-left: 50rpx;
+			}
+		}
+	}
+	.slide-fade-enter-active {
+	  transition: all .3s ease;
+	}
+	.slide-fade-leave-active {
+	  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+	}
+	.slide-fade-enter, .slide-fade-leave-to
+	/* .slide-fade-leave-active for below version 2.1.8 */ {
+	  transform: translateX(10px);
+	  opacity: 0;
+	}
+</style>

components/APPPush/index.js

@@ -0,0 +1,29 @@
+import app_push from './app_push.js'
+import h5Push from './h5_push.vue'
+
+const appPush = {
+	install: function(Vue) {
+		Vue.prototype.$appPush = function(op = {}) {
+			// #ifdef APP-PLUS
+			new app_push({
+				...op
+			}).show();
+			// #endif
+			// #ifdef H5
+			// Vue.component('h5Push', h5Push)
+			// 创建构造器
+			const H5PushInstance = Vue.extend(h5Push)
+			let instance = new H5PushInstance({
+				data: op
+			})
+			instance.$mount()
+			document.body.appendChild(instance.$el)
+			Vue.nextTick(() => {
+				instance.show = true
+			})
+			// #endif
+		}
+	}
+}
+
+export default appPush

config/index.js

@@ -1,7 +1,7 @@
 const dev = {
-	// baseUrlNew: 'http://192.168.1.122:9100/',
+	baseUrlNew: 'http://192.168.1.122:9100/',
 	baseUrl: 'https://www.zthymaoyi.com',
-	baseUrlNew: 'http://192.168.1.120:8090/',
+	// baseUrlNew: 'http://192.168.1.120:8090/',
 	  // baseUrlNew: 'http://api.eliangeyun.com/',
 	h5Appid: 'wxb66b599f7f61b46f',
 	debug: false

main.js

@@ -14,7 +14,8 @@ import tarBar from './components/tarbar.vue'
 Vue.component('tar-bar', tarBar)
 import tran from './pages/tran/tran.vue'
 Vue.component('tran',tran)
-
+import appPush from './components/APPPush/index.js'
+Vue.use(appPush)
 import my from './pages/user/user.vue'
 Vue.component('my',my)
 // main.js

store/index.js

@@ -21,20 +21,20 @@ const saveLifeData = function(key, value) {
 		let tmp = uni.getStorageSync('lifeData');
 		// 第一次打开APP，不存在lifeData变量，故放一个{}空对象
 		tmp = tmp ? tmp : {};
-		if(key == 'contractTip' && tmp[key] < value){
-			uni.vibrateLong({
-			    success: function () {
-			        console.log('震动成功');
-			    }
-			});
-		}
-		if(key == 'taskTip' && tmp[key] < value){
-			uni.vibrateLong({
-			    success: function () {
-			        console.log('震动成功');
-			    }
-			});
-		}
+		// if(key == 'contractTip' && tmp[key] < value){
+		// 	uni.vibrateLong({
+		// 	    success: function () {
+		// 	        console.log('震动成功');
+		// 	    }
+		// 	});
+		// }
+		// if(key == 'taskTip' && tmp[key] < value){
+		// 	uni.vibrateLong({
+		// 	    success: function () {
+		// 	        console.log('震动成功');
+		// 	    }
+		// 	});
+		// }
 		tmp[key] = value;
 		// 执行这一步后，所有需要存储的变量，都挂载在本地的lifeData对象中
 		uni.setStorageSync('lifeData', tmp);