v3-lab-xcx/component/mineConfigurationSlot.vue

<!-- 
 个人中心按钮匹配组件
	<mineConfigurationSlot :mineConfig="mineConfigData"></mineConfigurationSlot>
	
	import { mineConfigurationSlot } from '@/component/mineConfigurationSlot'
	import { getMineConfig } from '@/utils/mineConfig'
	
	components: {
		mineConfigurationSlot,
	},
	
	mineConfigData: [],
	
	demo() {
		let data = [
			{
				limits: "system:post:list", //权限字段
				route: "alarm", //路由名称
				name: "预警记录", //名称
			}, 
		];
		this.$set(this,'mineConfigData',getMineConfig(data));
	},
 -->
<template>
	<view class="mineConfigurationSlot">
		<view class="button-max-big-box">
			<permissionsSlot class="button-for-box" v-for="(item,index) in mineConfig" :key="index" :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 === 'alarm' && 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 === 'record' && wranDoCount>0">{{wranDoCount}}</view>
					<view class="view-three-type" v-if="item.route === 'faceImage'"
					:class="!ifFaceFeature?'colorA':'marginType'">
						{{!ifFaceFeature?'去认证':'已认证'}}
					</view>
					<view class="view-three-type" v-if="item.route === 'signature'" :class="!isUpload?'colorA':'marginType'">{{!isUpload?'未上传':'已上传'}}</view>
					<view class="view-three-type" v-if="item.route === 'fingerprint'" :class="Quantity>0?'marginType':'colorA'">{{Quantity>0?'已配置'+Quantity+'个':''}}</view>
					<img class="right-img" src="@/images/icon_04.png">
				</view>
			</permissionsSlot>
		</view>
	</view>
</template>

<script>
	import {
		fingerprintQueryList
	} from '@/api/index.js'
	export default {
		name: "mineConfigurationSlot",
		props: {
			mineConfig: {},
			// 人脸
			ifFaceFeature: "",
			//签名
			isUpload:"",
			Quantity:0,//指纹录取数量	
			//用户签名
			signatureUrl: "",
			//预案执行记录
			wranDoCount: 0,
			//我的实验室
			adminSubCount: 0,
			//预警记录
			securityAlertNum: 0,
		},
		data() {
			return {
			}
		},
		created() {

		},
		mounted() {
			
		},
		methods: {
			//按钮点击事件
			buttonClick(item) {
				if (item.buttonType === 'page') {
					uni.navigateTo({
						url: item.routeUrl,
					});
				} else if (item.buttonType === 'button') {
					if (item.route === 'fingerprint') {
						this.fingerprintClick();
					}
				} else if (item.buttonType === 'none') {
					uni.showToast({
						title: '暂未开放',
						icon: "none",
						mask: true,
						duration: 2000
					});
				}
			},
			//电子签名
			signatureButton() {
				uni.navigateTo({
					url: '/pages_manage/workbench/signature/signature?item=' + this.signatureUrl, //电子签名
				});
			},
			//查询用户指纹录取数据
			async fingerprintClick() {
				let _this = this;
				const {
					data
				} = await fingerprintQueryList(uni.getStorageSync('userId'));
				if (data.code == 200) {
					uni.navigateTo({
						url: '/pages/fingerprint', //指纹信息
					});
				}
			},
		},
	}
</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>