jp-xpgj-GA-file/src/projects/pension/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">
				<div class="vongi-index-top">
					<div class="mui-media-object mui-pull-left">
						<img :src="person_data?person_data.faceImageUrl:''">
					</div>
					<div class="mui-media-body">
						<h3 v-text="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>
					<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')">
							<router-link :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')">
						<router-link :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="~$project/assets/img/cicon30.png" />
							<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="~$project/assets/img/cicon15.png" width="54" />
						</router-link>
					</div>
					<div class="mui-col-xs-6">
						<router-link :to="{name:'MasterMineFeedback'}" 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="~$project/assets/img/cicon18.png" width="54" />
						</router-link>
					</div>
					<div v-if="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">
									<a href="javascript:void(0)">
										<img src="~$project/assets/img/02.jpg">
									</a>
								</div>
								<!-- 第二张 -->
								<div class="mui-slider-item">
									<a href="javascript:void(0)">
										<img src="~$project/assets/img/02.jpg">
									</a>
								</div>
							</div>
							<div class="mui-slider-indicator">
								<div class="mui-indicator mui-active"></div>
								<div class="mui-indicator"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="vongi-index-floor kfz">
				<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-4">
								<a href="javascript:void(0)">
									<div class="vongi-shop-img"><img src="~$project/assets/img/01.png" width="100%" /></div>
									<div class="mui-media-body">老人防丢手环</div>
									<div class="mui-media-body color-yellow">¥299.0</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4">
								<a href="javascript:void(0)">
									<div class="vongi-shop-img"><img src="~$project/assets/img/01.png" width="100%" /></div>
									<div class="mui-media-body">老人防丢手环</div>
									<div class="mui-media-body color-yellow">¥299.0</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media mui-col-xs-4">
								<a href="javascript:void(0)">
									<div class="vongi-shop-img"><img src="~$project/assets/img/01.png" width="100%" /></div>
									<div class="mui-media-body">老人防丢手环</div>
									<div class="mui-media-body color-yellow">¥299.0</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</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_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 NavMenu from '@/components/NavMenu.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import * as types from '$project/store/mutation-types'
	export default {
		name: 'Master',
		components: {
			Common,
			Loading,
			TopHeader,
			NavMenu
		},
		data() {
			return {
				isLoading: false,

				roleList: [],

				noticeList: [],
			}
		},
		created() {},
		methods: {
			//获取用户角色列表
			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 = [];
				for (var i = 0; i < this.roleList.length; i++) {
					var preName = this.person_popedom.personRoleName == this.roleList[i]['personRoleName'] ? '(当前)' : '';
					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.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.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) {
					return require('$project/assets/img/' + file);
				}
			},
			//设置判断首页模式
			setHomeModel() {
				if (!this.persion_home_model) {
					this.set_persion_home_model('normal');
				}
				if (this.persion_home_model != 'normal') {
					this.$router.push({
						name: 'MasterHomeBigFont'
					})
				}
			},
			asynCallBack() {
				//获取用户角色列表
				this.getRoleList();
				//获取最新二条通知消息
				this.prefetchNotice();

			},
			...mapMutations({
				set_persion_home_model: types.SET_PERSION_HOME_MODEL,
			})
		},
		mounted() {
			//设置判断首页模式
			this.setHomeModel();

			var gallery = mui('.mui-slider');
			var slider = gallery.slider({
				interval: 2000, //自动轮播周期，若为0则不自动播放，默认为0；
				bounce: true //是否启用回弹
			});
		},
		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',
				persion_home_model: 'persion_home_model'
			})
		}
	}
</script>

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