heaynag

components/mineConfigurationSlot.vue

@@ -0,0 +1,197 @@
+<!--
+ 个人中心按钮匹配组件
+	<mineConfigurationSlot :mineConfig="mineConfigData"></mineConfigurationSlot>
+
+	import { mineConfigurationSlot } from '@/component/mineConfigurationSlot'
+	import { getMineConfig } from '@/utils/mineConfig'
+
+	components: {
+		mineConfigurationSlot,
+	},
+
+	mineConfigData: [],
+
+	//获取菜单配置
+	async systemAppletLayoutSelect() {
+		const {data} = await systemAppletLayoutSelect({module:'mine'})
+		if(data.code == 200){
+		  let list = JSON.parse(JSON.stringify(data.data))
+		  for(let i=0;i<list.length;i++){
+			list[i].layout = JSON.parse(list[i].layout);
+		  }
+		  this.$set(this,'mineConfigData',getMineConfig(list));
+		  console.log('mineConfigData',this.mineConfigData)
+		}
+	},
+ -->
+<template>
+	 <view class="mineConfigurationSlot">
+		<view class="button-max-big-box">
+			<permissionsSlot class="button-for-box" v-for="(item,index) in mineConfig.layout" :key="item.id" :hasPermi="item.limits">
+				<view class="button-max-box" @click="buttonClick(item)">
+					<img class="left-img" :src="item.img">
+					<view>{{item.name}}</view>
+					<view class="view-three-one" v-if="item.route === 'mineWarningRecording' && securityAlertNum>0">{{securityAlertNum}}</view>
+					<view class="view-three-two" v-if="item.route === 'laboratory' && adminSubCount>0">{{adminSubCount}}</view>
+					<view class="view-three-two" v-if="item.route === 'PlanExecuteRecord' && wranDoCount>0">{{wranDoCount}}</view>
+					<view class="view-three-type" v-if="item.route === 'faceImage'"
+					:class="ifFaceFeature==''?'colorA':'marginType'">
+						{{ifFaceFeature==''?'去认证':'已认证'}}
+					</view>
+					<img class="right-img" src="@/images/basicsModules/icon_04.png">
+				</view>
+			</permissionsSlot>
+		</view>
+	</view> 
+</template>
+
+<script>
+	import {
+		fingerprintQueryList
+	} from '@/api/basicsModules/index.js'
+	export default {
+		name: "mineConfigurationSlot",
+		props: {
+			mineConfig: {},
+			// 人脸
+			ifFaceFeature: "",
+			//签名
+			isUpload:"",
+			Quantity:0,//指纹录取数量
+			//用户签名
+			signatureUrl: "",
+			//预案执行记录
+			wranDoCount: 10,
+			//我的实验室
+			adminSubCount: 0,
+			//预警记录
+			securityAlertNum: 10,
+		},
+		data() {
+			return {
+			}
+		},
+		created() {
+			this.$set(this,'ifFaceFeature',data.data.faceImg)
+		},
+		mounted() {
+			console.log('mineConfig',this.mineConfig)
+		},
+		methods: {
+			//按钮点击事件
+			buttonClick(item) {
+				if (item.buttonType === 'page') {
+					if (item.route === 'mineWarningRecording') {//预警记录
+						uni.navigateTo({
+							url: item.routeUrl,
+						});
+					}
+					if (item.route === 'laboratory') {//我的实验室
+						uni.navigateTo({
+							url: item.routeUrl,
+						});
+					}
+					if (item.route === 'PlanExecuteRecord') {//预案执行记录
+						uni.navigateTo({
+							url: item.routeUrl,
+						});
+					}
+					if (item.route === 'faceImage') {//身份验证
+						uni.navigateTo({
+							url: item.routeUrl,
+						});
+					}
+
+				} else if (item.buttonType === 'button') {
+
+				} else if (item.buttonType === 'none') {
+					uni.showToast({
+						title: '暂未开放',
+						icon: "none",
+						mask: true,
+						duration: 2000
+					});
+				}
+			},
+		},
+	}
+</script>
+
+<style lang="stylus" scoped>
+	.mineConfigurationSlot {
+		margin: 0;
+		background: #fff;
+		padding: 0 20rpx;
+		margin-top: 30rpx;
+		.button-for-box:last-of-type{
+			.button-max-box{
+				border:none !important;
+			}
+		}
+		.button-max-box {
+			height: 100rpx;
+			display flex;
+			border-bottom: 1px solid #e0e0e0;
+			.left-img {
+				height: 30rpx;
+				width: 30rpx;
+				margin: 34rpx 44rpx 0 0;
+			}
+
+			view {
+				line-height: 100rpx;
+			}
+
+			view:nth-child(2) {
+				flex: 1;
+				color: #333333;
+				font-size: 30rpx;
+			}
+
+			.right-img {
+				height: 24rpx;
+				width: 12rpx;
+				margin: 39rpx 0 0 0;
+			}
+
+			.colorA {
+				color: #E45656 !important;
+			}
+
+			.marginType {
+				margin-right: 12rpx;
+			}
+
+			.view-three-one {
+				width: 30rpx;
+				height: 30rpx;
+				text-align center;
+				background #FF4552;
+				border-radius: 50%;
+				font-size: 20rpx;
+				line-height: 30rpx;
+				color: #fff;
+				margin: 36rpx 20rpx;
+			}
+
+			.view-three-two {
+				width: 30rpx;
+				height: 30rpx;
+				text-align center;
+				border-radius: 50%;
+				font-size: 20rpx;
+				line-height: 30rpx;
+				color: #999;
+				margin: 36rpx 20rpx;
+
+			}
+
+			.view-three-type {
+				width: 120rpx;
+				text-align center;
+				color: #CCCCCC;
+				font-size: 26rpx;
+			}
+		}
+	}
+</style>

components/tabBar.vue

@@ -0,0 +1,150 @@
+<!-- 底部导航组件 -->
+<template>
+	<view class="tabBar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
+		<view class="tab-bar-box">
+			<view class="null-box"></view>
+			<view class="tba-bar-min-box" @click="tabBarGoPage(1)">
+				<img src="@/images/basicsModules/btn_sy_xz.png" v-if="currentRoute == 'pages/home'">
+				<img src="@/images/basicsModules/btn_sy_zc.png" v-else>
+				<view :class="currentRoute == 'pages/home'?'primary':''">首页</view>
+			</view>
+			<view class="null-box"></view>
+			<view class="tba-bar-min-box" @click="tabBarGoPage(2)">
+				<img src="@/images/basicsModules/btn_xx_xz.png" v-if="currentRoute == 'pages/information/information'">
+				<img src="@/images/basicsModules/btn_xx_zc.png" v-else>
+				<view class="tip" v-if="totalCount!=0">{{totalCount}}</view>
+				<view :class="currentRoute == 'pages/information/information'?'primary':''">消息</view>
+			</view>
+			<view class="null-box"></view>
+			<view class="tba-bar-min-box" @click="tabBarGoPage(3)">
+				<img src="@/images/basicsModules/btn_wd_xz.png" v-if="currentRoute == 'pages/mine'">
+				<img src="@/images/basicsModules/btn_wd_zc.png" v-else>
+				<view :class="currentRoute == 'pages/mine'?'primary':''">我的</view>
+			</view>
+			<view class="null-box"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+ import { infoTotalCount } from '@/api/apiDemo/index.js'
+	export default {
+		name:'tabBar',
+		data() {
+			return {
+				paddingBottomHeight: 0,  //苹果X以上手机底部适配高度
+				currentRoute:"",
+				userType:"",
+				totalCount:0,
+			}
+		},
+		created() {
+			let that = this;
+			uni.getSystemInfo({
+			    success: function (res) {
+			        let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
+			        model.forEach(item => {
+			            //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
+			            if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
+			                that.paddingBottomHeight = 40;
+			            }
+			        })
+			    }
+			});
+		},
+
+		onShow(){
+			this.getTotalList();
+		},
+		mounted(){
+
+			this.getTotalList();
+			this.totalCount=uni.getStorageSync('totalCount')
+            // 获取当前路由
+            let pages = getCurrentPages();
+            let page = pages[pages.length - 1];
+            this.currentRoute = page.route;
+            // 获取当前角色
+			this.userType = uni.getStorageSync('userType');
+		},
+		methods: {
+			//获取消息总数接口
+			async getTotalList(){
+				const {data} = await infoTotalCount();
+				if(data.code==200){
+					this.totalCount=data.data.totalCount
+				}
+
+			},
+            tabBarGoPage(type){
+                if(type === 1){
+                    if (this.currentRoute !== 'pages/home/home') {
+                        uni.redirectTo({
+                            url: '/pages/home/home',
+                        });
+                    }
+				}else if(type === 2){
+                    if (this.currentRoute !== 'pages/information/information') {
+                        uni.redirectTo({
+                            url: '/pages/information/information',
+                        });
+                    }
+                }else if(type === 3){
+                    if (this.currentRoute !== 'pages/mine/mine') {
+                        uni.redirectTo({
+                            url: '/pages/mine/mine',
+                        });
+                    }
+                }
+
+			},
+		}
+	}
+</script>
+
+<style lang="stylus" scoped>
+	.tabBar{
+		z-index:9999;
+		width:100%;
+		height:98rpx;
+		background:#ffffff;
+		position fixed
+		bottom:0;
+		left:0;
+		box-shadow: 0 -3rpx 13rpx 0 rgba(0, 0, 0, 0.1);
+		.tab-bar-box{
+			display flex;
+			.null-box{
+				flex:1;
+			}
+			.tba-bar-min-box{
+				width:64rpx;
+				position :relative;
+				img{
+					width:44rpx;
+					height:44rpx;
+					margin:14rpx auto 0;
+				}
+				view{
+					line-height:37rpx;
+					font-size:19rpx;
+					text-align center;
+					color:#666666;
+				}
+				.tip{
+					display inline-block;
+					background :#EF0909;
+					border-radius 50%;
+					position :absolute;
+					font-size 24rpx;
+					line-height 24rpx;
+					color #fff;
+					top :10rpx;
+					left :44rpx;
+					padding:6rpx 10rpx;
+					box-sizing border-box;
+				}
+			}
+		}
+	}
+</style>