<template>
	<view class="poster-detail">
		<view class="nav-bar" :style="{'height': navHeight}">
			<view class="" style="height: 30px;display: flex;margin-bottom: 4px;align-items: center;" @click="goBack">
				<text class="iconfont icon-icon_arrow_left" style="font-size: 40rpx; margin-left: 20rpx;"></text>
			</view>
		</view>
		<image class="img" :src="imgUrl" mode="widthFix"></image>
		<view class="btn" @click="goBack">立即去兑换</view>
		<!-- 悬浮按钮 -->
		<drag-button></drag-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: '',
				navHeight: 0,
			}
		},
		onLoad(options) {
			
			let setText = JSON.parse(options.setText)
			let title = ''
			if (options.num == 0) {
				this.imgUrl = setText.introduce
				title = '活动介绍'
			}else {
				this.imgUrl = setText.gain
				title = '知味豆获取'
			}
			uni.setNavigationBarTitle({
			　　title: title
			})
			
			let elemetn
			// #ifdef MP-WEIXIN
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			uni.getSystemInfo({
				success: res => {
					elemetn = res.statusBarHeight
				}
			})
			 // #endif
			// #ifdef MP-WEIXIN
			this.navHeight = ((menuButtonInfo.bottom + menuButtonInfo.top) - elemetn) + 'px'
			// #endif
			 // #ifndef MP 
			this.navHeight = 60 + 'px'
			 // #endif 
		},
		methods: {
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.poster-detail {
		.nav-bar {
			width: 100%;
			display: flex;
			align-items: flex-end;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 22;
		}
		.img {
			width: 100%;
			vertical-align: middle;
		}

		.btn {
			width: 540rpx;
			height: 80rpx;
			line-height: 80rpx;
			position: fixed;
		    bottom: 60rpx;
		    left: 50%;
		    transform: translateX(-50%);
			z-index: 333;
			border-radius: 200rpx;
			color: #fff;
			text-align: center;
			background-image: linear-gradient(to right , #00AE68 , #096742);
		}
	}
</style>
