<template>
  <u-overlay :show="show">
    <view class="flex-1 flex-center">
      <view
        class="content"
        @click="confirmHandler"
      >
        <view
          class="flex-row"
          style="justify-content: center;align-items: center;"
        >
          <text class="content-text-one">
            充
          </text>
          <text class="content-text-to">
            {{ content.price || 0 }}
          </text>
          <text class="content-text-one">
            送
          </text>
          <text class="content-text-to">
            {{ content.giveegold || 0 }}
          </text>
          <text class="content-text-one">
            元
          </text>
        </view>
        <view
          class="flex-row"
          style="justify-content: center;align-items: center;"
        >
          <text class="content-text-three">
            得
          </text>
          <text class="content-text-four">
            {{ content.egold || 0 }}
          </text>
          <text class="content-text-three">
            K币
          </text>
        </view>
      </view>
      <view class="flex-center pt-100">
        <image
          class="close"
          src="@/static/images/close.png"
          mode="aspectFill"
          @click="cancelHandler"
        />
      </view>
    </view>
  </u-overlay>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			resolve: null,
			reject: null,
			content: {}
		};
	},
	methods: {
		open(data) {
			this.content = data;
			this.show = true;
			uni.setStorageSync('isPopup', false);
			return new Promise((resolve, reject) => {
				this.reject = reject;
				this.resolve = resolve;
			});
			
		},
		cancelHandler() {
			this.reject();
			this.show = false;
		},
		confirmHandler() {
			this.$emit('success',this.content);
		}
	}
};
</script>

<style lang="scss">
.content {
	width: 706rpx;
	height: 616rpx;
	background: url('https://diyyhdapi.qinjiu8.com/paybj.png');
	background-size: 100% 100%;
	padding: 164rpx 0;
}

.content-one {
	font-size: 32rpx;
	font-weight: 400;
	color: #313131;
}
.content-to {
	font-size: 32rpx;
	font-weight: 400;
	color: #ff6d35;
}
.content-text-one {
	font-size: 52rpx;
	font-weight: 400;
	color: #1a1a1a;
}
.content-text-to {
	font-size: 80rpx;
	font-weight: bold;
	color: #f1540d;
	margin: 0 14rpx;
}
.content-text-three {
	font-size: 36rpx;
	font-weight: 400;
	color: #1a1a1a;
	margin-right: 14rpx;
}
.content-text-four {
	font-size: 52rpx;
	font-weight: bold;
	color: #f1540d;
	margin-right: 14rpx;
}
.bottom-button-text {
	font-size: 36rpx;
	font-weight: 500;
	color: #ffffff;
}
.close {
	width: 66rpx;
	height: 66rpx;
}
</style>
