<template>
  <view class="success-container">
    <!-- 成功图标（渐变圆形+动效） -->
    <view class="success-icon">
      <view class="icon-circle">
        <text class="check-icon">✓</text>
      </view>
    </view>

    <!-- 支付成功标题（动画） -->
    <view class="success-title">支付成功</view>
    <view class="success-subtitle">支付成功，请等待审核</view>

    <!-- 订单信息卡片（带阴影） -->
    <view class="info-card">
      <view class="info-item">
        <text class="label">付款账户</text>
        <text class="value">(5437)</text>
      </view>
      <view class="info-item">
        <text class="label">交易流水号</text>
        <text class="value">2205051351076117833</text>
      </view>
      <view class="info-item">
        <text class="label">商户名称</text>
        <text class="value">中国跆拳道协会</text>
      </view>
      <view class="info-item">
        <text class="label">订单金额</text>
        <text class="value amount">1500.00元</text>
      </view>
      <view class="info-item">
        <text class="label">会员编号</text>
        <text class="value">CTA00004</text>
      </view>
      <view class="info-item">
        <text class="label">会员有效期</text>
        <text class="value">2028年1月25日</text>
      </view>
    </view>

    <!-- 确定按钮（渐变+动效） -->
    <view class="confirm-btn-area">
      <button class="confirm-btn" @click="goBack">确定</button>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
const goBack = () => {
  	uni.navigateTo({
			url: `/personal/home`
		})
}

onLoad((option) => {
})
</script>

<style scoped>
/* 全局容器 */
.success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 40rpx 60rpx;
  min-height: 100vh;
  background-color: #f8f9fa;
  box-sizing: border-box;
}

/* 成功图标容器 */
.success-icon {
  margin-bottom: 40rpx;
  animation: fadeIn 0.6s ease-out;
}

/* 渐变圆形背景 */
.icon-circle {
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  /* 青绿色渐变 */
  background: linear-gradient(135deg, #06c1ae, #04a896);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 30rpx rgba(6, 193, 174, 0.3);
  /* 轻微上浮动效 */
  animation: scaleIn 0.8s ease-out;
}

/* 对勾图标 */
.check-icon {
  font-size: 90rpx;
  color: #ffffff;
  font-weight: bold;
}

/* 支付成功标题 */
.success-title {
  font-size: 48rpx;
  font-weight: 700;
  color: #333333;
  margin-bottom: 12rpx;
  animation: slideUp 0.6s ease-out;
}

/* 副标题 */
.success-subtitle {
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 60rpx;
  animation: slideUp 0.8s ease-out;
}

/* 订单信息卡片 */
.info-card {
  width: 100%;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.05);
  margin-bottom: 80rpx;
  animation: fadeIn 1s ease-out;
}

/* 单个信息项 */
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
}
/* 最后一项去掉下划线 */
.info-item:last-child {
  border-bottom: none;
}

/* 标签样式 */
.label {
  font-size: 32rpx;
  color: #666666;
}

/* 值样式 */
.value {
  font-size: 32rpx;
  color: #333333;
  text-align: right;
}
/* 金额特殊样式 */
.amount {
  color: #cd1e27;
  font-weight: 600;
}

/* 确定按钮区域 */
.confirm-btn-area {
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
}

/* 确定按钮（渐变+动效） */
.confirm-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  /* 按钮渐变背景 */
  background: #fff;
  color: #C4121B;
  font-size: 36rpx;
  font-weight: 600;
  border-radius: 45rpx;
  border: 1px solid #C4121B;
  animation: slideUp 1s ease-out;
  /* 禁止默认样式 */
  position: relative;
  overflow: hidden;
}
/* 按钮点击反馈 */
.confirm-btn::after {
  border: none;
}
.confirm-btn:active {
  transform: scale(0.98);
  box-shadow: 0 4rpx 10rpx rgba(6, 193, 174, 0.2);
}

/* 动画定义 */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes scaleIn {
  0% { transform: scale(0); }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@keyframes slideUp {
  0% { opacity: 0; transform: translateY(30rpx); }
  100% { opacity: 1; transform: translateY(0); }
}
</style>