<template>
	<view class="content flex flex-direction">
		<view v-if="healthCode" style="position: relative;">
			<image src="http://m.qpic.cn/psc?/V11kyB1O080aC1/cnQ2D7YjAZ5R6pY0fmc9joZ6fC6TxFlt9mW4UhUn2PEgUne7OUt4q4mNE.k9gU.rSr8Eu*pFToZoVwUOEGDrKMycDqdn1mLFGE1dxYTGUcE!/b&bo=7gKRAu4CkQIDWXw!&rf=viewer_4&t=5"
			 class="bg1"></image>
			<view class="bg-code" @click="getPreviewImg(healthCode)">
				<view class="healthy-code-bg shadow-lg">
					<image class="healthy-code" :src="healthCode"></image>
				</view>
			</view>
		</view>
		<image v-else src="http://m.qpic.cn/psc?/V11kyB1O080aC1/cnQ2D7YjAZ5R6pY0fmc9jhx9v1rh8VuBAojvYxrYvg*uVMAXaD2En3CPiaHx7AWMjFTafVrGxwJR4jZd5s4ProhQT1ceDVquyQR7HVquBKk!/b&bo=7gLuAe4C7gEDORw!&rf=viewer_4&t=5"
		 class="bg"></image>

		<view :class="healthCode ? 'box1' : 'box'">
			<view v-show="!healthCode" class="cu-card flex margin bg-white shadow card-radius" hover-class="cc-active" @tap="openPage('/pages/apply-code/apply-code')">
				<view class="flex align-center padding">
					<view class="round lg cu-avatar icon1">
						<view class="iconfont icon-qrcode"></view>
					</view>
					<view class="padding-left-sm flex-sub">
						<view class="text-xl">领取健康码</view>
						<view class="text-df padding-top-xs description">领取健康码，查看健康状态</view>
					</view>
				</view>
			</view>
			<view class="cu-card flex margin bg-white shadow card-radius" hover-class="cc-active" @tap="openPage('/pages/punch-the-clock/punch-the-clock')">
				<view class="flex align-center padding">
					<view class="round lg cu-avatar icon2">
						<view class="iconfont icon-carryout"></view>
					</view>
					<view class="padding-left-sm flex-sub">
						<view class="text-xl">每日健康打卡</view>
						<view class="text-df padding-top-xs description">山大人员健康情况打卡</view>
					</view>
				</view>
			</view>
			<view class="cu-card flex margin bg-white shadow card-radius" hover-class="cc-active" @tap="openPage('/pages/add-stroke/add-stroke')">
				<view class="flex align-center padding">
					<view class="round lg cu-avatar icon3">
						<view class="iconfont icon-car"></view>
					</view>
					<view class="padding-left-sm flex-sub">
						<view class="text-xl">行程上报</view>
						<view class="text-df padding-top-xs description">外出行程及时上报</view>
					</view>
				</view>
			</view>
			<view class="cu-card flex margin bg-white shadow card-radius" hover-class="cc-active" @tap="openPage('/pages/statistics/statistics')">
				<view class="flex align-center padding">
					<view class="round lg cu-avatar icon4">
						<view class="iconfont icon-linechart"></view>
					</view>
					<view class="padding-left-sm flex-sub">
						<view class="text-xl">统计</view>
						<view class="text-df padding-top-xs description">山大校园疫情统计</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'Home',
		data() {
			return {}
		},
		computed: mapState('user', ['userInfo', 'healthCode']),
		methods: {
			//预览图片
			getPreviewImg(image) {
				var imgArr = [];
				imgArr.push(image);
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});
			},
			
		}
	};
</script>

<style scoped lang="scss">
	.bg {
		width: 100%;
		height: 495rpx;
	}

	.bg1 {
		width: 100%;
		height: 635rpx;
	}

	.bg-code {
		display: flex;
		width: 100%;
		position: absolute;
		top: 370rpx;
		
		.healthy-code-bg {
			margin: 0 auto;
			width: 230rpx;
			height: 230rpx;
			border-radius: 10px;
			overflow: hidden;
			background: $ghostWhite;
			
			.healthy-code {
				margin: 5rpx;
				width: 220rpx;
				height: 220rpx;
				border-radius: 10px;
			}
		}

		
	}

	.box {
		position: relative;
		top: -100rpx;
	}

	.box1 {
		position: relative;
		top: 0;
	}

	.card-radius {
		border-radius: 15rpx;
	}

	.description {
		color: $grey;
	}

	.icon1 {
		background: $iconGreen;
	}

	.icon2 {
		background: $iconCyan;
	}

	.icon3 {
		background: $iconBlue;
	}

	.icon4 {
		background: $iconPurple;
	}
</style>
