<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>