<template>
	<!-- 联合国际餐饮劵页面 -->
	<view class="wrap">
		<image src="../../../static/img/coupon/coupon.jpg"></image>
		<template v-if="couponData">
			<view class="top">
				<view class="top-name" v-if="couponData.couponName">
					{{couponData.couponName.substr(0,4)}}
				</view>
				
				<!-- <view class="top-address">
					联合国际大厦二楼
				</view> -->
			</view>
			
			<view class="middle">
				<view class="middle-name">
					<text v-if="couponData.couponType==3">
					  代金券
					</text>
					<text v-if="couponData.couponType==2">
					  折扣券
					</text>
					<text v-if="couponData.couponType==1">
					  抵用券
					</text>
				</view>
				
				<view class="middle-price">
					<text>{{couponData.couponPrice}}</text>元
				</view>
				
				<view class="middle-tip">
					可在“胖丁旅游”-【我的】-【券中心】中查看
				</view>
			</view>
			
			<view class="bottom">
				<text @click="clickBtn()">{{title}}</text>
			</view>
		</template>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"立即领取",//标题
				enterUrl:"",//进入页面路由
				pageCode:"",//券码
				couponData:"",//券数据
				companyId:"",//公司Id
			}
		},
		onLoad(option) {
			//#ifdef MP-WEIXIN
			this.enterUrl=option.q
			//#endif
			
			//#ifdef MP-ALIPAY
				this.enterUrl=uni.getStorageSync("alipayQrCode")
			//#endif
			
			if(this.enterUrl){//普通二维码扫码进入
				this.pageCode=this.getUrlKey("pageCode")
				this.companyId=this.getUrlKey("companyId")
			}
			this.giveCoupon()
		},
		methods: {
			//---送券
			giveCoupon(){
			  let data={
					couponCompanyId:this.companyId,
			    pageCode:this.pageCode,
			    marketingStatus:1,
			    userId:uni.getStorageSync('userId') ,
			    openid:uni.getStorageSync('openid')
			  }
			  this.$request("scenic/market/findPageMarket",data).then((res)=>{
			    if(res.data&&res.data.length>0){
			      this.couponData=res.data[0]
			    }
			  })
			},
			//---获取url
			getUrlKey(name){
			  return(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(decodeURIComponent(this.enterUrl)) || [, ""])[1].replace(/\+/g, '%20') || "";
			},
			//---
			clickBtn(){
				this.title="已领取"
			}
		}
	}
</script>

<style lang="scss">
$B17B34:#B17B34;
.wrap{
	position: relative;
	width: 100%;
	height: 100%;
	text-align:center;
	image{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
}
.top{
	position: absolute;
	top:18%;
	width: 100%;
	color: #FFFFFF;
	.top-name{
		font-size: 72rpx;
		font-weight: bold;
	}
	.top-address{
		font-size: 48rpx;
		margin-top: 24rpx;
	}
}
.middle{
	position: absolute;
	top:44%;
	width: 100%;
	.middle-name{
		font-size: 72rpx;
		font-weight: bold;
		color:$B17B34;
	}
	.middle-price{
		font-size:48rpx;
		color:$B17B34;
		text{
			color: #E74027;
			font-size: 144rpx;
			font-weight: bold;
		}
	}
	.middle-tip{
		font-size: 20rpx;
		color:$B17B34;
		font-weight: bold;
		margin-top:26rpx;
	}
}
.bottom{
	position: absolute;
	top:78%;
	width: 100%;
	text{
		display: inline-block;
		background: linear-gradient(360deg, #FFCB80 0%, #FFDFBB 49%, #FFFFFF 100%);
		width: 400rpx;
		height: 95rpx;
		line-height: 95rpx;
		border-radius: 45rpx;
		font-size: 48rpx;
		font-weight: bold;
		color: #F42629;
	}
}
</style>
