<template>
	<view class="app" v-if='personRoleLoginFlag'>
		<view class="item" @tap='personopenPopup' v-if="personRoleLoginFlag == 'wholeRole'">
			<image src="../../static/hlydingyue.png" mode=""></image>
			<view class="text">
				护理员预约订单消息通知
			</view>
		</view>
		<view class="item" @tap='openPopup'>
			<image src="../../static/dingyuejieshou.png" mode=""></image>
			<view class="text">
				预约订单接受消息通知
			</view>
		</view>
		<view class="item" @tap='integralopenPopup'>
			<image src="../../static/dingyuejujue.png" mode=""></image>
			<view class="text">
				预约订单拒绝消息通知
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions
	} from "vuex";
	export default {
		data() {
			return {
				personRoleLoginFlag: null,
			};
		},
		methods: {
			...mapActions(["openPopup"]),
			...mapActions(["integralopenPopup"]),
			...mapActions(["personopenPopup"]),
		},
		onShow() {
			this.personRoleLoginFlag = uni.getStorageSync('personRoleLoginFlag');
		},
	}
</script>

<style lang="scss">
	.app {
		padding: 0;

		.item {
			width: 94%;
			margin: 0 auto;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 5rpx;
			height: 110rpx;
			background-color: #fff;
			position: relative;
			margin-top: 25rpx;

			.text {
				font-size: 32rpx;
				color: #333333;
				position: absolute;
				top: 50%;
				left: 115rpx;
				transform: translateY(-50%);
			}

			image {
				width: 55rpx;
				height: 55rpx;
				position: absolute;
				top: 50%;
				left: 35rpx;
				transform: translateY(-50%);
			}
		}
	}
</style>
