
<template>
  <view class="container-page" v-if="show">
    <view class="content">
      <view :class="success ? 'success-icon' : 'error-icon'">
        <uni-icons :type="success ? 'checkmarkempty' : 'closeempty'" size="34" color="#ffffff"/>
      </view>
      <text class="status-text">{{success ? ' ' : '支付失败'}}</text>
      <view class="amount">
        <text class="currency">¥</text>
        <text class="number">{{ number }}</text>
      </view>
    </view>
    <view class="button-wrapper">
      <button class="done-button" @click="handleDone">完成</button>
    </view>
  </view>
</template>

<script>
export default {
		props: {
			show: {
				type: Boolean,
				default: true
			},
			number:{
				type: Number,
				default: null
			},
			success: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				// number:"0.01",
				// success:false
			}
		},
		onLoad(item) {
			
		},
		methods: {
			handleDone(){
				this.show = false;
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/home/index'
					})
				}, 200)
			}
		}
}
</script>

<style>
	page {
	  height: 100%;
	  background-color: #ffffff;
	}
/* 	.container-page {
	  height: 100%;
	  display: flex;
	  flex-direction: column;
	  background-color: #ffffff;
	} */
</style>

<style scoped>

.container-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 180rpx;
  height: 80%;
  /* justify-content: center; */
}

.success-icon {
  width: 90rpx;
  height: 90rpx;
  border-radius: 60rpx;
  background-color: #0DC973;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32rpx;
}

.error-icon {
  width: 90rpx;
  height: 90rpx;
  border-radius: 60rpx;
  background-color: #ff0000;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32rpx;
}

.status-text {
  font-size: 44rpx;
  color: #333333;
  margin-bottom: 40rpx;
}

.amount {
  display: flex;
  align-items: baseline;
}

.currency {
  font-size: 74rpx;
  font-weight: 600;
  color: #333333;
  margin-right: 14rpx;
}

.number {
  font-size: 74rpx;
  font-weight: 600;
  color: #333333;
}

.button-wrapper {
  padding: 32rpx;
  height: 20%;
}

.done-button {
  width: 50%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #f5f5f5;
  color: #333333;
  font-size: 38rpx;
  border-radius: 22rpx;
  border: none;
}

/* .done-button:active {
  opacity: 0.8;
} */
</style>

