<style>
	.salesvolume {
		background: #FFF;
		font-family: aa;
	}

	.salesvolume .headStatus {
		overflow: hidden;
		position: relative;
		width: 140vw;
		padding-right: 40vw;
		padding-bottom: 10px;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		display: flex;
		background: #FFFFFF;
	}

	.salesvolume .headStatus .arrow {
		height: 24px;
		margin: 5px 10px;
		width: 24px;
	}

	.salesvolume .headStatus .title {
		font-size: 16px;
		color: #000;
		flex: 1;
		width: 1px;
		margin-left: 10px;
		line-height: 34px;
	}

	.salesvolume .sharebox_top {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		overflow: hidden;
	}

	.salesvolume .sharebox_top .sharebox_top_nav {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		line-height: 34px;
		padding: 0 10px;
		position: fixed;
		left: 0;
		top: 0;
	}
	.salesvolume .positext{
		width: 100%;
		font-size: 56rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		
		text-align: center;
		
		background: linear-gradient(0deg, #F40B17 0%, #FF5B5A 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		position: absolute;
		left: 0;
		top: 540rpx;
		
	}
	.btn{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 0;
	}

</style>
<template>
	<scroll-view :scroll-y="true" @scroll="scrollHandler" @scrolltoupper="scrollTopHandler" style="height: 100vh;">
		<view class="salesvolume">
			<view class="headStatus" v-if="scrollTop > 50" :style="[
				headStyle,
				{
				  zIndex: scrollTop < 10 ? 'unset' : 2,
				  opacity: scrollTop < 10 ? '100' : scrollTop,
				},]">
				<view class="arrow" @click="redirectPrev">
					<u-icon name="arrow-left" size="48" color="#000"></u-icon>
				</view>
				<view class="title" v-if="scrollTop > 50">{{pageTitle}}</view>
			</view>
			<view style="width: 100%;height: 100%;">
				<view class="sharebox_top">
					
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/Shoppingcard.png" style="width: 100vw;height: 100vh;"></image>
					<view class="sharebox_top_nav" :style="{paddingTop:nav+'px'}">
						<view class="arrow" @click="redirectPrev">
							<u-icon name="arrow-left" size="48" color="#fff"></u-icon>
						</view>
						<view class="title" style="color: #FFFFFF;font-size: 16px;">{{pageTitle}}</view>
						<view style="width: 24px;height: 24px;"></view>
					</view>
					<view class="positext" :style="{top:positionTop+'px'}">
						￥ <text style="font-size: 130rpx;">{{money}}</text>
					</view>
					<view class="btn" :style="{bottom:positionbtnbottom+'px'}" @click="dianjilingqu">
						<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/Shoppinglingqu.png" style="width: 694rpx;height: 184rpx;"></image>
					</view>
					
				</view>
				
			</view>

			


		</view>
		
	</scroll-view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				pageTitle: "赠卡",
				mainColor: "",
				U: {},
				headStyle: {},
				scrollTop: 0,
				nav: 0,
				ID:0,
				money:0,
				
				positionTop:0,
				positionbtnbottom:0,
			}
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.nav = uni.getMenuButtonBoundingClientRect().top;
			this.headStyle.paddingTop = this.nav + 'px';
		},
		onLoad(options) {
			if(options){
				console.log(options)
				this.ID = options.Id?options.Id:0;
				this.money = options.cardsmoney?options.cardsmoney:0;
			}
			this.positionTop = this.$utils.SystemInfo().windowHeight*0.39;
			this.positionbtnbottom = this.$utils.SystemInfo().windowHeight*0.085;
			
			
		},
		methods: {
			
		
			scrollHandler(e) {
				this.scrollTop = e.detail.scrollTop;
			},
			scrollTopHandler() {
				this.scrollTop = 0;
			},
			redirectPrev() {//返回上一个页面
				uni.navigateBack({
					delta: 1,
				});
			},
			dianjilingqu(){
				console.log('领取')
				this.request2({
						url: '/api/AppletCoupon/GetReceiveDeposit',
						data: {Id:this.ID}
					},
					res => {
						if (res.resultCode == 1) {
							uni.showToast({
								title: res.message
							})
							setTimeout(()=>{
								uni.reLaunch({
									url: '/pages/coupon/cards/purchase?type=1'
								})
							},1000)
						}
					}
				);
			}
			
			
		}

	}
</script>
