对接socket.io成功，添加背景音乐

App.vue

@@ -1,17 +1,30 @@
-330606<script>
+<script>
+	// import io from '@/jsFile/socket.io.js';
+	// const socket = io("ws://7and5.cn:2120",{
+	//   query: {},
+	//   transports: [ 'websocket', 'polling' ],
+	//   timeout: 5000,
+	// });
 	export default {
 		globalData:{
 			projectname:'', // 项目名称
 			lat:'', // 公司地址维度
 			lng:'' ,// 公司地址经度
-			hostapi:'https://7and5.cn' // 域名配置
+			hostapi:'https://7and5.cn' ,// 域名配置
+			// uid:1,
+			// socketInit:false,
+			// bgmMusic:null,
+			// ifPlayIng:false,
 		},
 		// 优先于show方法
 		onLaunch: function() {
+			// this.connect();
 			// 配置全局域名
-			// #ifdef H5
+			// #ifdef H5 || APP-PLUS
-				// this.globalData.hostapi = 'https://7and5.cn';
+				this.globalData.bgmMusic = uni.createInnerAudioContext();
-				// this.globalData.hostapi = '/web';
+			// #endif 
+			// #ifdef MP-WEIXIN
+				this.globalData.bgmMusic = wx.createInnerAudioContext();
 			// #endif 
 		},
 		onShow: function() {
@@ -21,9 +34,80 @@
 				// 检测是否开启GPS定位服务
 				this.$toolAll.tools.checkOpenGPSServiceByAndroidIOS();
 			}
+		},
+		onLoad() {
+			
 		},
 		onHide: function() {
 		
+		},
+		methods:{
+			connect() {
+				socket.io.reconnect();
+				console.log(this.uid,1234);
+				socket.on('connect', ()=> {
+					socket.emit('login', this.uid);
+					console.log('连接成功');
+				});
+				//监听断线
+				socket.on('disconnect', ()=> {
+					socket.connect();//这里必须要有，不然不会重新链接
+					console.log('关闭链接后重新链接');
+					// this.openSettings();
+				});
+				//监听全部会员的下线广播
+				socket.on('loginout', (data)=> {
+				   console.log("会员下线",data);
+				});
+				//监听全部会员的上线广播
+				socket.on('login_msg', (msg)=>  {
+					console.log("会员上线",msg);
+				});
+				// 接收消息
+				socket.on('new_msg',  (msg)=> {
+					console.log(msg);
+					this.offMusic();
+					uni.showToast({
+						title:msg
+					})
+					this.bofang();
+				});
+			},
+			bofang(){
+				this.globalData.bgmMusic.autoplay = true;//自动播放
+				// this.bgmMusic.loop = true;//循环播放
+				this.globalData.bgmMusic.src = 'http://m801.music.126.net/20220728102722/4a7c3c7692a5f0b808f03f8ab7d02bfb/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/4800358085/4a32/22b6/02f5/d96abc3bed5758b0e7172ea66aec841d.mp3';//背景音乐地址
+				this.globalData.bgmMusic.volume = 1;//音量
+				this.globalData.bgmMusic.onPlay(()=>{
+					console.log('背景音乐播放中');
+					this.globalData.ifPlayIng = true;
+				});
+			},
+			// 关掉音乐
+			offMusic(){
+				if(this.globalData.ifPlayIng){
+					this.globalData.bgmMusic.stop();
+					this.globalData.bgmMusic.onStop(()=>{
+						console.log('背景音乐停止了');
+					});
+					this.globalData.ifPlayIng = false;
+				}
+			},
+			// uniapp设置消息提醒（调用手机系统静音或铃声）
+			openSettings() {
+				uni.getSystemInfo({  
+					success(res) {  
+						if(res.platform == 'ios'){
+							plus.runtime.openURL("app-settings://");
+						} else if (res.platform == 'android'){
+							var main = plus.android.runtimeMainActivity();  
+							var Intent = plus.android.importClass("android.content.Intent");
+							var mIntent = new Intent('android.settings.SOUND_SETTINGS');
+							main.startActivity(mIntent);
+						}
+					}
+				});
+			},
 		}
 	};
 </script>

main.js

@@ -13,6 +13,9 @@ Vue.component('container-subgroup',containerSubgroupTwo);//全局注册头部状
 import share from './jsFile/share.js';// 全局注册分享事件
 Vue.mixin(share); 
 
+import store from './store'
+Vue.prototype.$store = store
+
 // 常用工具
 import tools from '@/jsFile/tools.js';
 Vue.prototype.$toolAll = tools;

manifest.json

@@ -17,9 +17,7 @@
             "delay" : 0
         },
         /* 模块配置 */
-        "modules" : {
+        "modules" : {},
-            "Maps" : {}
-        },
         /* 应用发布信息 */
         "distribute" : {
             /* android打包配置 */
@@ -110,5 +108,6 @@
                 }
             }
         }
-    }
+    },
+	"template" : "index.html"
 }

pages/guide-page/guide-page.vue

@@ -76,6 +76,7 @@
 					}
 					this.$requst.post('/universal/api.login/login',params).then(res=>{
 						if(res.code==1) {
+							this.$store.commit('setUid',res.data.uid);
 							// 缓存token和角色类型 
 							uni.setStorageSync('token',res.data.token);
 						} else { 

pages/login/login.vue

@@ -62,18 +62,18 @@
 			return {
 				windowHeight: uni.getSystemInfoSync().windowHeight,
 				ifPhone:false,
-				login_phone:'',//登录手机号
+				login_phone:'17366921088',//登录手机号
 				ifCode:false,
 				login_code:'',//登录验证码
 				ifunitName:false,
-				login_unitName:'',//登录单位名称
+				login_unitName:'湖南争鸣光电科技有限公司',//登录单位名称
 				ifPassword:false,
-				login_password:'',//登录密码
+				login_password:'123456',//登录密码
 				codeText:'获取验证码' ,// 获取验证码按钮文字
 				flagCode:true ,// 允许点击获取验证码
 				countDown:null,
 				login_type:'mobile',// 登录方式默认手机验证码登录 account：账号密码登陆 
-				login_type_text:'账号密码'
+				login_type_text:'账号密码',
 			};
 		},
 		onLoad() {
@@ -94,6 +94,8 @@
 					this.$requst.post('/universal/api.login/login',params).then(res=>{
 						if(res.code==1) {
 							this.$toolAll.tools.showToast('登录成功');
+							this.$store.commit('setUid',res.data.uid);
+							// 连接socket
 							// 缓存token和角色类型
 							uni.setStorageSync('token',res.data.token);
 							// 角色(1：业务员、2：客户、3：客服、4：工程师)  

pages/tabbar/pagehome/pagehome.vue

@@ -29,7 +29,7 @@
 					<!-- 项目总数、实时故障、公告 -->
 					<view class="project-notice-box">
 						<view class="disjcac pad-sx20 bbot">
-							<view class="disjcac fc width50" @click="change">
+							<view class="disjcac fc width50">
 								<view class="fon26 col9">项目总数</view>
 								<view class="fon60 bold">{{project_count || 0}}</view>
 							</view>
@@ -239,20 +239,7 @@
 	import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
 	import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
 	import {getPlanType} from '@/jsFile/public-api.js';
-	import io from '@hyoga/uni-socket.io'; 
+	import io from '@/jsFile/socket.io.js';
-	// const socket = io('http://7and5.cn:2120', {
-	//   transports: [ 'websocket']  
-	// });
-	// const socket = io('http://7and5.cn:2120', {
-	//   query: {},
-	//   transports: [ 'websocket', 'polling' ],
-	//   timeout: 5000,
-	// });
-	var socket = io("ws://7and5.cn:2120",{
-	  query: {},
-	  transports: [ 'websocket', 'polling' ],
-	  timeout: 5000,
-	});
 	export default {
 		components:{
 			pitera,
@@ -342,9 +329,17 @@
 				contactPhone:'',//客服联系电话
 				project_count:0,//项目数量
 				project_error_count:0,//实时工单数量
-				uid:1,
+				socketInit:false,
-				socket:null,
+				bgmMusic:null,
-				socketInit:false
+				ifPlayIng:false,
+			}
+		},
+		computed:{
+			uid() {
+				return this.$store.state.uid
+			},
+			ifConnect(){
+				return this.$store.state.ifConnect
 			}
 		},
 		onShow() {
@@ -353,6 +348,12 @@
 			console.log(this.role,'角色id')
 		},
 		onLoad(options) {
+			// #ifdef H5 || APP-PLUS
+				this.bgmMusic = uni.createInnerAudioContext();
+			// #endif 
+			// #ifdef MP-WEIXIN
+				this.bgmMusic = wx.createInnerAudioContext();
+			// #endif 
 			// 获取当前页面url
 			this.$toolAll.tools.obtainUrl();
 			// 调用解决方案类型事件
@@ -361,79 +362,70 @@
 			this.getIncrementServiceType();
 			// 调用获取常见故障列表事件
 			this.getFaultsList();
+			if(!this.ifConnect && this.uid){
 				this.connect();
+			}
 		},
 		methods: {
+			connectEv(){
+				socket.io.reconnect();
+			},
 			connect() {
-				if(!this.socketInit) {
+				const socket = io("ws://7and5.cn:2120",{
-					this.socketInit = true;
+				  query: {},
+				  transports: [ 'websocket', 'polling' ],
+				  timeout: 5000,
+				});
 				socket.on('connect', ()=> {
 					socket.emit('login', this.uid);
+					this.$store.commit('setConnect',true);
 					console.log('连接成功');
 				});
-					socket.on('connect', function() {
-					     console.log("连接成功");
-					     //将自己注册到SOCKET
-					     socket.emit('conn',{ uid: this.uid,userSig:"登录票据" })
-					});
 				//监听断线
 				socket.on('disconnect', ()=> {
 					socket.connect();//这里必须要有，不然不会重新链接
 					console.log('关闭链接后重新链接');
-						this.openSettings();
+					// this.openSettings();
-					});
-					socket.on('reconnect', function() {
-					   console.log("重连成功");
-					});
-					//监听全部会员的上线广播
-					socket.on('login', function(data) {
-					   console.log("会员上线",data.uid);
 				});
 				//监听全部会员的下线广播
-					socket.on('loginout', function(data) {
+				socket.on('loginout', (data)=> {
-					   console.log("会员下线",data.uid);
+				   console.log("会员下线",data);
+				});
+				//监听全部会员的上线广播
+				socket.on('login_msg', (msg)=>  {
+					console.log("会员上线",msg);
 				});
 				// 接收消息
-					socket.on('broadcastingListen', function (data) {
-					    for(i=0;i<data.length;i++){
-					        console.log(data[i])  //与你发送的msg 一致
-					    }
-					});
-					socket.on('login_msg', (msg)=>  {
-						console.log(msg);
-					});
 				socket.on('new_msg',  (msg)=> {
 					console.log(msg);
+					// this.offMusic();
+					uni.showToast({
+						title:msg
+					})
+					this.bofang();
+					
 				});
-					//接收消息
+			},
-					// this.socket.on('broadcastingListen', (data)=> {
+			bofang(){
-					//     for(i=0;i<data.length;i++){
+				this.bgmMusic.autoplay = true;//自动播放
-					//         console.log(data[i])  //与你发送的msg 一致
+				// this.bgmMusic.loop = true;//循环播放
-					//     }
+				this.bgmMusic.src = 'http://m801.music.126.net/20220728102722/4a7c3c7692a5f0b808f03f8ab7d02bfb/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/4800358085/4a32/22b6/02f5/d96abc3bed5758b0e7172ea66aec841d.mp3';//背景音乐地址
-					// });
+				this.bgmMusic.volume = 1;//音量
-				} else {
+				this.bgmMusic.play(()=>{
-					socket.io.reconnect();
+					console.log('背景音乐播放中');
+					this.ifPlayIng = true;
+				});
+			},
+			// 关掉音乐
+			offMusic(){
+				if(this.ifPlayIng){
+					this.bgmMusic.stop();
+					this.bgmMusic.onStop(()=>{
+						console.log('背景音乐停止了');
+					});
+					this.ifPlayIng = false;
 				}
 			},
-			change(){
-				this.uid++;
-				socket.io.disconnect();
-				this.connectEv();
-			},
-			connectEv(){
-				socket.on('connecting', function() {
-				    console.log("正在连接");
-				});
-				socket.on('reconnect', function() {
-				    console.log("重新连接到服务器");
-				});
-				socket.on('connect_failed', function() {
-				    console.log("连接失败");
-				});
-				socket.on('reconnecting', function() {
-				    console.log("正在重连");
-				});
-			},
 			// uniapp设置消息提醒（调用手机系统静音或铃声）
 			openSettings() {
 				uni.getSystemInfo({  

store/index.js

@@ -0,0 +1,22 @@
+// 页面路径：store/index.js 
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex);//vue的插件机制
+
+//Vuex.Store 构造器选项
+const store = new Vuex.Store({
+	state:{//存放状态
+		uid:'',
+		ifConnect:false
+	},
+	mutations: {
+		setUid(state, str) {
+			state.uid = str;
+		},
+		setConnect(state, str) {
+			state.ifConnect = str;
+		}
+	}
+})
+export default store