v3-lab-xcx/components/mineConfigurationSlot.vue

<!--
 个人中心按钮匹配组件
	<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(mineConfig.layout)">
					<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() {

		},
		methods: {
			//按钮点击事件
			buttonClick(item) {
        console.log(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>