<template>
	<up-overlay :show="showGifts" :zIndex="9999">
		<view class="serviceBox">
			<view class="block">
				<view class="title">恭喜您获得</view>
				<view class="openbox">
					<image src="https://ct-upimg.yx090.com/ju8hn6/shop/image/2022/11/08/l5SAwF75s4IQ5tglcLQo5bUlfixoFtnODw5CH4hT.png" mode="widthFix" class="image" />
					<view class="coupon">
						<view class="coupon-left">{{info.days}}天</view>
						<view class="coupon-right">会员权益</view>
					</view>
				</view>
				<view class="btn" @click="getHandle()">立即领取</view>
			</view>
		</view>
	</up-overlay>
</template>

<script>
	import { ref, reactive, toRefs } from 'vue'
	import { get, post } from '@/api/request.js'
	import { showToast } from '../common.js'
	export default {
		props: {
			showGifts: {
				type: Boolean,
				default: false
			},
			info: {
				type: Object,
				default: {}
			}
		},
		setup(props, context) {
			const data = reactive({
				
			})
	
			function getHandle() {
				showToast('领取成功')
				context.emit('close')
			}
	
			return {
				...toRefs(data),
				getHandle
			}
		}
	}
</script>

<style lang="scss" scoped>
	.serviceBox{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		padding-bottom: 80rpx;
		box-sizing: border-box;
		.block{
			width: 80%;
			background: #fff;
			padding-bottom: 80rpx;
			position: relative;
			border-radius: 20rpx;
			.title{
				padding: 40rpx 0;
				color: #333;
				font-size: 34rpx;
				font-weight: bold;
				text-align: center;
			}
			.openbox{
				margin: 0 auto;
				width: 86%;
				position: relative;
				.image{
					width: 100%;
				}
				.coupon{
					width: 100%;
					position: absolute;
					top: 0;
					left: 0;
					height: 100%;
					padding: 20rpx;
					box-sizing: border-box;
					display: flex;
					color: #F14939;
					.coupon-left {
						width: 36%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 44rpx;
						font-weight: bold;
					}
					.coupon-right {
						width: 64%;
						padding-left: 40rpx;
						display: flex;
						align-items: center;
						font-size: 32rpx;
					}
				}
			}
			.btn{
				color: #fff;
				font-size: 32rpx;
				margin: 40rpx auto 0;
				width: 86%;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #F14939;
				border-radius: 12rpx;
			}
		}
	}
</style>