<style>
	.order-page .box{
		width: 520rpx;
		height: 700rpx;
		position: relative;
	}
	.order-page .Xbox{
		width: 520rpx;
		height: 700rpx;
		background: #FFF;
		border: 3px solid;
		border-image: linear-gradient(0deg, #FF7115, #FFE253) 3 3;
		box-shadow: 0px 0px 18px 0px rgba(81, 81, 81, 0.78);
		position: relative;
	}
	.Xbox-top{
		width: 580rpx;
		height: 120rpx;
		background: linear-gradient(90deg, #FAA014, #F57019, #FBAA12);
		box-shadow: 0px 2px 15px 0px rgba(247, 123, 25, 0.74);
		border-radius: 5px;
		margin-top: 44rpx;
		font-size: 44rpx;
		color: #FFF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: -35rpx;
	}
	.Xbox-center{
		width: 616rpx;
		height: 306rpx;
		background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/orderpopunp.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 15px;
		margin-left: -49rpx;
		font-size: 80rpx;
		font-weight: 500;
		
		
	}
	.Xbox-center-text{
		color: #FFFFFF;
		background: linear-gradient(0deg, #FCEDD9 0%, #FBC86E 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		display: flex;
		align-items: flex-end;
	}
	.xbox-c-posi{
		position: absolute;right: 60rpx;bottom: 40rpx;font-size: 18px;color: #FFFFFF;
			line-height: 35px;
			font-weight: 800;
			background: linear-gradient(0deg, #FCEDD9 0%, #FBC86E 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
	}
	.xbox-btn{
		width: 250rpx;
		height: 74rpx;
		background: linear-gradient(90deg, #F5A454, #F93836);
		box-shadow: 1px 6px 10px 0px rgba(250, 88, 83, 0.36);
		border-radius: 19px;
		margin-top: 66rpx;
		margin-left: 136rpx;
		font-size: 34rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
<template>
	<div class="order-page" style='position: relative;'>
		<u-popup v-model="showDialog" mode="center" :mask-close-able="false" custom-style="padding:0;background:none;">
			<view class="box">
				<view style="width: 140rpx;height: 140rpx;position: absolute;right: -50rpx;top: -50rpx;">
					<image src="../../static/images/orderyuan.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view style="width: 90rpx;height: 90rpx;position: absolute;left: -45rpx;bottom: 60rpx;">
					<image src="../../static/images/orderyuan.png" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="Xbox">
					<view class="Xbox-top">
						恭喜增加 <text style="font-size: 60rpx;margin: 0 3px;">{{orderPopupdata.OrderNum}}</text> 个订单
					</view>
					<view class="Xbox-center">
						<view class="Xbox-center-text">
							<text style="line-height: 55px;">
								+￥
							</text>
							 <text style="font-size: 120rpx;">{{orderPopupdata.CommissionMoney}}</text>
							 <text style="line-height: 55px;font-size: 50rpx;">
							 	元
							 </text>
						</view>
						<view class="xbox-c-posi" >收益</view>
					</view>
					<view class="xbox-btn" @click="gosalesvolume">
						马上查看
					</view>
					<view style="width: 56rpx;height: 56rpx;position: absolute;right: -20rpx;bottom: 134rpx;">
						<image src="../../static/images/orderyuan.png" style="width: 100%;height: 100%;"></image>
					</view>
					<u-icon name="close" style='position: absolute;left: 230rpx;bottom: -100rpx;' color="#FFFFFF" size="60" @click='closeBtn'></u-icon>
				</view>
			</view>
			
		</u-popup>
	</div>
</template>

<script>
	export default {
		props: {
			orderPopupdata: {
				type: Object,
				default: 0
			},
			
		},
		data() {
			return {
				pageinfo: {},
				showDialog: true,
				
			};
		},
		created() {
			console.log(this.orderPopupdata,'数据')
		},
		methods: {
			
			closeBtn() {
				this.showDialog = false;
				this.$emit('closeBtn');
			},
			gosalesvolume(){
				this.$emit('gosalesvolume');
			}
		}
	};
</script>

