GEKE_PHONE/pages/home/home.vue

<template name="home">
	<div>
			<cu-custom bgColor="bg-gradual-pink">
				<block slot="content">首页</block>
			</cu-custom>
			<div class="panlens" v-if='isshow==false'>
				<br>
				<div style="margin-left: 20px;">
				<span style="font-size: 20px;color: #FFFFFF">亲爱的&nbsp&nbsp&nbsp{{this.$store.getters.realname}}</span>
				<br>
				<br>
				<span style="color: #FFFFFF;">今天是您在格克走过的第{{day}}天</span>
				</div>
			</div>
			<div class="panlenes" v-if='isshow==true'>
				<br>
				<div style="margin-left: 20px;">
				<span style="font-size: 20px;color: #FFFFFF;">亲爱的&nbsp&nbsp&nbsp{{this.$store.getters.realname}}</span>
				<br>
				<br>
				<span style="color: #FFFFFF;">今天是您的生日,格克感谢您的付出</span>
				<br>
				<span style="color: #FFFFFF;">祝您生日快乐！</span>
				</div>
			</div>
			<br>
			<div class="itemt">
			<view class="cu-bar bg-white solid-bottom"   :style="[{animation: 'show 0.6s 1'}]">
				<view class="action">
					<text class='cuIcon-title text-blue'></text>个人自助
				</view>
			</view>
			
			<view class=" bg-white grid col-3 padding-sm">
				<view class="padding-sm animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.1 + 's'}]" v-for="(item,index) in usList" :key="index" @tap="goPage(item.component)">
					<view class="padding radius text-center shadow-blur solid-right ">
						<!-- <image :src="item.icon"  mode="aspectFill" class="line2-icon"></image> -->
						<view class="cu-avatar lg " 
						 :style="{background: 'url(' + item.icon + ') no-repeat',backgroundSize:'95upx 95upx'}">
						   <view class="cu-tag badge" v-if="getTtemDotInfo(item)">{{getTtemDotInfo(item)}}</view>
						</view>
						<view class="text-lg margin-top">{{item.name}}</view>
					</view>
				</view>
				
			</view>
			</div>
			<!-- 其他服务 -->
			<!-- <div class="itemt">
			 <view class="cu-bar bg-white solid-bottom margin-top"  :style="[{animation: 'show 0.6s 1'}]">
				<view class="action">
					<text class='cuIcon-title text-yellow'></text>团队信息
				</view>
			</view>
			<view class=" bg-white grid col-3 padding-sm">
				<view class="padding-sm animation-slide-bottom" :style="[{animationDelay: (index + 1)*0.1 + 's'}]" v-for="(item,index) in osList" :key="index" @tap="goPage(item.page)">
					<view class="padding radius text-center shadow-blur solid-right ">
						<view class="cu-avatar lg "  :style="{background: 'url(' + item.icon + ') no-repeat',backgroundSize:'100upx 100upx'}"></view>
						<view class="text-lg margin-top">{{item.title}}</view>
					</view>
				</view>
			</view> 
			</div> -->
		</div>
</template>

<script>
	import { us,os } from '@/common/util/work.js'
	export default {
		name: 'home',
		props:{
			cur:String,
		},
		watch: {
			cur: {
				immediate: true,
				handler() {
					console.log('watch',this.cur)
				    this.initMenu()
				},
			},
		},
		data() {
			return {
				usList:null,
				osList:os.data,
				websock:'',
				heartCheck:null,
				lockReconnect:false,
				msgCount:0,
				day:'',
				dot:{
				  mailHome:false
				},
				isshow:false,
				url:'/sys/permission/qeryPerssion'
			}
		},
		created(){
			this.days();
			this.queryPerssion();
		},
		methods: {
			queryPerssion(){
				this.$http.get(this.url,{params:{userid:this.$store.getters.userid}}).then(res=>{
					
					this.usList=res.data;
				})
			},
			days(){
				var da=this.$store.getters.rzdate;
				var dt=this.$store.getters.birthdate;
				   let day = (new Date().getTime()) - (new Date(da).getTime())//日期转时间戳
				   console.log(day)
				   let dayCount = Math.floor(day / 86400000) ;//时间戳获取天数
					this.day=dayCount;
					var ddt=new Date(dt);
					var ddr=new Date();
					if(ddt.getMonth()==ddr.getMonth()&&ddt.getDay()==ddr.getDay()){
						this.isshow=true;
					}				
			},
			initMenu(){
				console.log("-----------home------------")
			    this.initWebSocket();
			    this.loadCount(0);
			},
			goPage(page){
				
				if(!page){
					return false;
				}
				 if(page==='annotationList'){
				  this.msgCount = 0
				}
				this.dot[page]=false
					this.$router.push({name: page})	
			},
			initWebSocket: function () {
				// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
				var userId = this.$store.getters.userid;
				var token=this.$store.getters.token;
				var url = this.$config.apiUrl.replace("https://","wss://").replace("http://","ws://")+"/websocket/"+userId+"/"+token;
				console.log('websocket url>>'+url);
				this.websock = new WebSocket(url);
				this.websock.onopen = this.websocketOnopen;
				this.websock.onerror = this.websocketOnerror;
				this.websock.onmessage = this.websocketOnmessage;
				this.websock.onclose = this.websocketOnclose;
				
			},
			websocketOnopen: function () {
				console.log("WebSocket连接成功");
				//心跳检测重置
				//this.heartCheck.reset().start();
			},
			websocketOnerror: function () {
				console.log("WebSocket连接发生错误");
				this.reconnect();
			},
			websocketOnmessage: function (e) {
				console.log("-----接收消息-------",e.data);
				uni.showModal({
					title: '⚡',//⚡❕
					showCancel:false,
					content: e.data,
					confirmText: '确定',
					success: res => {
						this.$store.commit('SET_TOKEN',"");
					 uni.navigateTo({
						url:'/pages/login/login'
					}) 
					
					}
				})
				/* var data = eval("(" + e.data + ")"); //解析对象
				if(data.cmd == "topic"){
				  //系统通知
				  this.loadCount('1')
				}else if(data.cmd == "user"){
				  //用户消息
				  this.loadCount('2')
				} else if(data.cmd == 'email'){
				  this.loadEmailCount()
				} */
		
				//心跳检测重置
				//this.heartCheck.reset().start();
			},
			websocketOnclose: function (e) {
				console.log("connection closed (" + e.code + ")");
				this.reconnect();
			},
			websocketSend:function(text) { // 数据发送
				try {
				  this.websock.send(text);
				} catch (err) {
				  console.log("send failed (" + err.code + ")");
				}
			},
			reconnect() {
				var that = this;
				if(that.lockReconnect) return;
				that.lockReconnect = true;
				//没连接上会一直重连，设置延迟避免请求过多
				setTimeout(function () {
				  console.info("尝试重连...");
				  that.initWebSocket();
				  that.lockReconnect = false;
				}, 5000);
			},
			loadCount(flag){
				console.log("loadCount::flag",flag)
				let url = '/sys/annountCement/listByUser';
				this.$http.get(url).then(res=>{
					console.log("res::",res)
				  if(res.data.success){
					let msg1Count = res.data.result.anntMsgTotal;
					let msg2Count = res.data.result.sysMsgTotal;
					this.msgCount = msg1Count + msg2Count
					console.log("this.msgCount",this.msgCount)
				  }
				})
			},
			loadEmailCount(){
				this.dot.mailHome = true
			},
			getTtemDotInfo(item){
				if(item.page==='annotationList' && this.msgCount>0){
				  return this.msgCount
				}
				return '';
			}
		}
	}
</script>

<style>
	
  .line2-icon {
	width: 60px;
	height: 60px;
  }
  
  .panlens{
	  width: 95%;
	  margin:0 auto;
	border-radius:5px 5px 5px 5px;  
	 margin-top: 10px;
	 background: url(../../static/sy.png);
	background-size:100% 100%;  
	 height: 130px; 
  }
  
  .panlenes{
  	  width: 95%;
  	  margin:0 auto;
  	border-radius:5px 5px 5px 5px;  
  	 margin-top: 10px;
  	 background: url(../../static/bjsr.png) ;
  	 background-size:100% 100%;  
  	 height: 130px;
  }
  
  .itemt{
  	  width: 95%;
  	  margin:0 auto;
  	border-radius:5px 5px 5px 5px;  
  	 
  }
  .top{
	  background-color: #5677AC;
	  width: 100%;
	  height: 40px;
	 
  }
  
 
</style>