jp-xpgj-GA-file/src/projects/business/views/Master/Home.vue

<template>
	<div>
		<common ref="common" @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle" headerClass="vongi-bar" :leftShow="false"></top-header>

		<div class="mui-content margin49">
			<div class="vongi-index flew-sp flew-items">
				<div class="vongi-index-top">
					<div class="mui-media-object mui-pull-left">
						<img :src="person_data?(person_data.faceImageUrl+'?x-oss-process=image/resize,h_50,m_lfit'):''">
					</div>
					<div class="mui-media-body">
						<h3 v-if="person_data">{{person_data.name}}</h3>
						<p class='mui-ellipsis' v-text="person_popedom?(person_popedom.job?person_popedom.job:person_popedom.personRoleName):''"></p>
					</div>
				</div>
				<div class="vongi-index-right flew-items flew-sp">
					<template v-if="person_popedom && person_popedom.sceneId=='1'">
						<span :class="'text-list '+'work-status-color-'+person_data.workStatus" v-text="person_data?person_data.workStatusN:''"></span>
						<span class="line">|</span>
					</template>
					<a class="mui-pull-right" @click="selectRole">切换身份<span class="mui-icon iconfont icon-jiaohuan"></span></a>
				</div>
			</div>
			<div class="vongi-icons">
				<div class="vongi-index">
					<ul class="mui-table-view mui-grid-view mui-grid-9 vongi-grid-head">
						<li v-for="(item,index) in common_menu_list" :class="'mui-table-view-cell mui-media mui-col-xs-3 '+(item.iconRoute?'':'kfz')">
							<a v-if="item.iconUrl" @click="goto(item.iconUrl)">
								<img :src="requirePic(item.iconCommonPic)" />
								<div class="mui-media-body" v-text="item.iconName"></div>
							</a>
							<router-link v-else :to="{name:item.iconRoute,query:item.iconParam}">
								<img :src="requirePic(item.iconCommonPic)" />
								<div class="mui-media-body" v-text="item.iconName"></div>
							</router-link>
						</li>
					</ul>
				</div>
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li v-for="(item,index) in menu_list" :class="'mui-table-view-cell mui-media mui-col-xs-3 '+(item.iconRoute?'':'kfz')">
						<a v-if="item.iconUrl" @click="goto(item.iconUrl)">
							<img :src="requirePic(item.iconPic)" />
							<div class="mui-media-body" v-text="item.iconName"></div>
						</a>
						<router-link v-else :to="{name:item.iconRoute,query:item.iconParam}">
							<img :src="requirePic(item.iconPic)" />
							<div class="mui-media-body" v-text="item.iconName"></div>
						</router-link>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-3">
						<router-link :to="{name:'MasterAllFun'}">
							<img src="http://rccs.oss-cn-hangzhou.aliyuncs.com/jp_housekeeper/img/cicon30.png?x-oss-process=image/resize,h_50,m_lfit" />
							<div class="mui-media-body">全部</div>
						</router-link>
					</li>
				</ul>
			</div>
			<div class="vongi-index-floor">
				<h4 class="vongi-floor-title">功能推荐区</h4>
				<div class="vongi-index-inter flew-sp">
					<div class="mui-col-xs-6">
						<router-link :to="{name:'MasterMineEditInfo'}" class="vongi-floor-padded">
							<div class="mui-media-body">
								<h4 class="mui-ellipsis">关联健康码</h4>
								<p class="mui-ellipsis">出行更便捷</p>
							</div>
							<img class="mui-media-object mui-pull-right" src="http://rccs.oss-cn-hangzhou.aliyuncs.com/jp_housekeeper/img/cicon15.png?x-oss-process=image/resize,h_50,m_lfit" width="54" />
						</router-link>
					</div>
					<div class="mui-col-xs-6">
						<a  @tap="updateCompany" class="vongi-floor-padded">
							<div class="mui-media-body">
								<h4 class="mui-ellipsis">变更公司</h4>
								<p class="mui-ellipsis">重选所在公司</p>
							</div>
							<img class="mui-media-object mui-pull-right" src="http://rccs.oss-cn-hangzhou.aliyuncs.com/jp_housekeeper/img/cicon35.png?x-oss-process=image/resize,h_50,m_lfit" width="54" />
						</a>
					</div>
					<div v-if="noticeList&&noticeList.length" class="mui-col-xs-12">
						<div class="vongi-floor-padded">
							<router-link :to="{name:'CommonNotice',query:{type:1}}" v-for="(item,index) in noticeList" :key="index" :class="'text-list '+(item.readStatus?'':'red-after')">
								<h5 class="mui-ellipsis" v-text="item.title"></h5><span v-text="item.date"></span>
							</router-link>
						</div>
						<router-link :to="{name:'CommonNotice',query:{type:1}}" class="vongi-link"><span class="mui-icon mui-icon-forward"></span></router-link>
					</div>
					<div class="mui-col-xs-12">
						<div id="slider" class="mui-slider">
							<div class="mui-slider-group">
								
								<!-- 第一张 -->
								<div class="mui-slider-item" v-for="(item,i) in bannerTipsList" :key="i">
									<a @click="showTips(item)" >
										<img :src="item.picUrl">
									</a>
								</div>
								 
							</div>
							
						</div>
					</div>
				</div>
			</div>
			<div class="vongi-index-floor">
				<h4 class="vongi-floor-title">优品推荐</h4>
				<div class="vongi-index-inter flew-sp">
					<div class="mui-col-xs-12">
						<ul class="mui-table-view mui-grid-view mui-grid-9 vongi-floor-padded">
							<li class="mui-table-view-cell mui-media mui-col-xs-6">
								<a href="javascript:void(0)">
									<div class="vongi-shop-img"><img src="http://rccs.oss-cn-hangzhou.aliyuncs.com/jp_housekeeper/img/camera02.jpg?x-oss-process=image/resize,h_100,m_lfit" width="100%" /></div>
									<div class="mui-media-body">智能手表</div>
									<div class="mui-media-body color-yellow">¥399.0</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-6">
								<a href="javascript:void(0)">
									<div class="vongi-shop-img"><img src="http://rccs.oss-cn-hangzhou.aliyuncs.com/jp_housekeeper/img/camera01.jpg?x-oss-process=image/resize,h_100,m_lfit" width="100%" /></div>
									<div class="mui-media-body">看护摄像头</div>
									<div class="mui-media-body color-yellow">¥199.0</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<Tips :bannerTipsVisible="bannerTipsVisible" :bannerTipsPicUrl="bannerTipsPicUrl" :bannerTipsActivity="bannerTipsActivity"
			      @bannerTipsHide="bannerTipsHide"></Tips>
		</div>

		<nav-menu :router="[{name:'Master'},{name:'MasterMineMessage'},{name:'MasterMineCenter'}]"></nav-menu>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	require('$project/assets/js/mui.picker.min.js');
	import * as API_Common from '$project/apis/common'
	
	import * as API_Notice from '@/apis/Common/notice'
	import * as API_User from '$project/apis/user'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import Tips from '$project/components/Tips.vue'
	
	import NavMenu from '@/components/NavMenu.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		hourDistance,
		currentTimeStamp,
		parseUnixTime
	} from '$project/utils'
	import * as types from '$project/store/mutation-types'
	export default {
		name: 'Master',
		components: {
			Common,
			Loading,
			TopHeader,
			NavMenu,Tips
		},
		data() {
			return {
				isLoading: false,

				roleList: [],
				bannerList:[
					{
						img:'Frame 913.png',
						url:"img:Frame 912 (2).png"
					}
				],
				
				bannerTipsList: [],
				bannerInterval: null,
				//弹窗公告， 有就显示
				bannerTipsVisible: false,
				bannerTipsPicUrl: '',
				bannerTipsId: '',
				bannerTipsActivity: null,
				noticeList: [],
			}
		},
		created() {},
		
		methods: {
			showTips(item){
				this.bannerTipsVisible = true;
				
				this.bannerTipsPicUrl = item.linkUrl;
							         
			},
			getBannerTipsInfo() {
				
				var time =parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
				var bannerTipsTime= window.localStorage.getItem("xpgj_bannerTipsTime");
			    //tips 广告
			    API_Common.getBannerInfo("5").then(response => {
			        // = response;
			        this.bannerTipsList=response;
					
			        if(!bannerTipsTime||bannerTipsTime!=time){
						
			        	if (this.bannerTipsList.length > 0) {
			        	 			
			        	    this.bannerTipsVisible = true;
			        	    var x = Math.floor(Math.random() * this.bannerTipsList.length);
			        	    this.bannerTipsPicUrl = this.bannerTipsList[x].linkUrl;
							window.localStorage.setItem("xpgj_bannerTipsTime",time);
			        	 
			        	}
			        }
			     
			
			    }).catch(error => {
			        mui.toast(error);
			    })
			},
			bannerTipsHide() {
			    this.bannerTipsVisible = false;
			},
			updateCompany(){
				var _this = this;
				var btnArray = ['取消', '确认'];
				mui.confirm('选择新公司后，需要新的公司管理员审核通过后方可正式加入', '确认变更', btnArray, function(e) {
					if (e.index == 1) {
						window.location.href="../home/#/register/business/step2?isupdate=1"
					}
				})
				
			},
            goto(url){
                window.location=url;
			},
			//获取用户角色列表
			getRoleList() {
				//this.isLoading = true;
				API_User.getRoleList().then(response => {
					this.isLoading = false;

					this.roleList = response.list;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//选择角色
			selectRole() {
				var roleList = [];
				if(this.roleList.length==0){
					mui.toast("加载中..");
					return
				}
				for (var i = 0; i < this.roleList.length; i++) {
					var preName = this.person_popedom.id == this.roleList[i]['id'] ? '(当前)' : '';
					roleList.push({
						value: this.roleList[i]['id'],
						text: preName + this.roleList[i]['companyName'] + ' ' + this.roleList[i]['personRoleName'],
					})
				}
				var _this = this;
				var picker = new mui.PopPicker();
				picker.setData(roleList);
				picker.pickers[0].setSelectedValue(this.person_popedom.id , 2000);

				picker.show(function(selectItems) {
					_this.switchRole(selectItems[0].value);
				})
			},
			//切换角色
			switchRole(id) {
				this.isLoading = true;
				API_User.exchangePopedom({
					id: id
				}).then(response => {
					this.isLoading = false;

					this.$refs.common.getDataByOpenId();
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//预读取通知消息
			prefetchNotice() {
				//this.isLoading = true;
				API_Notice.prefetch().then(response => {
					this.isLoading = false;

					this.set_wd_message_num(response);

					this.getLastNotice();
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//获取最新二条通知消息
			getLastNotice() {
				//this.isLoading = true;
				API_Notice.getTopList({
					type: 1,
					limit: 2,
					excludeMessageId: ''
				}).then(response => {
					this.noticeList = response;
					this.isLoading = false;
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},
			//引入图片
			requirePic(file) {
				if (file) {
					if (file.indexOf('http') == 0) {
						return file+'?x-oss-process=image/resize,h_40,m_lfit';
					} else {
						return require('$project/assets/img/' + file);
					}
				}
			},
			asynCallBack(bl) {
				
				if(!bl){
					//获取用户角色列表
					this.getRoleList();
					//获取最新二条通知消息
					this.prefetchNotice();
				}else{
					window.location.href = '../home/#/select';
				}
				
			},
			...mapMutations({
				set_wd_message_num: types.SET_WD_MESSAGE_NUM,
			})
		},
		mounted() {
			var gallery = mui('.mui-slider');
			var slider = gallery.slider({
				interval: 2000, //自动轮播周期，若为0则不自动播放，默认为0；
				bounce: true //是否启用回弹
			});
	
			this.getBannerTipsInfo()
			
			
		},
		destroyed() {

		},
		computed: {
			pageTitle: {
				// getter
				get: function() {
					return this.person_data ? this.person_data.companyName : '小鹏管家';
				},
				// setter
				set: function(newValue) {
					console.log(newValue)
				}
			},
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
				menu_list: 'menu_list',
				common_menu_list: 'common_menu_list',
			})
		}
	}
</script>

<style scoped src="$project/assets/css/xpgj.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style src="$project/assets/css/mui.picker.min.css"></style>
<style scoped>
	.red-after:after {
		background: red;
	}

	.work-status-color-1::after {
		background-color: #3385FF !important;
	}

	.work-status-color-2::after {
		background-color: #FF8800 !important;
	}

	.work-status-color-3::after {
		background-color: #FF8800 !important;
	}

	.work-status-color-4::after {
		background-color: #8855FF !important;
	}
</style>