
<template>
  <view class="container-page">
    <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">{{bizType + (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 {
	data() {
		return {
			number:null,
			success:true,
			bizType: '支付'
		}
	},
	onLoad(item) {
		if (item.data) {
			 try {
				let jsonString = decodeURIComponent(item.data); // 解码 JSON 字符串
				let obj = JSON.parse(jsonString); // 解析为 JSON 对象
				this.number = obj.number
				this.success = obj.success
				if(obj.type === 'P') this.bizType = '收款'
				else if(obj.type === 'T') this.bizType = '转账'
				else if(obj.type === 'W') this.bizType = '提现'
				else this.bizType = '支付'
				console.log("number：", this.number);
				console.log("success：", this.success);
				
			} catch (error) {
				console.error("解析 JSON 失败：", error);
			}
		}
	},
	methods: {
		handleDone(){
			uni.switchTab({
				url:'/pages/home/index'
			});
		}
	}
}
</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: #FDBE44;
  color: #333333;
  font-size: 38rpx;
  border-radius: 22rpx;
  border: none;
}

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

