<template>
  <view class="scan-success-page">
    <!-- 成功图标 -->
    <view class="success-icon">
      <view class="icon-circle">
        <view class="icon-check"></view>
      </view>
    </view>

    <!-- 成功提示文字 -->
    <view class="success-text">
      <text class="main-text">扫码成功</text>
      <text class="sub-text">信息已验证通过</text>
    </view>

    <!-- 返回按钮 -->
    <button class="back-btn" @click="handleBack">
      返回
    </button>
  </view>
</template>

<script>
export default {
  methods: {
    // 处理返回逻辑
    handleBack() {
      // 返回上一页，如果是从首页跳转可改为switchTab
      uni.navigateBack({
        delta: 1,
        fail: () => {
          // 若返回失败则改用switchTab跳转
          uni.switchTab({
            url: '/pages/code/code'
          });
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.scan-success-page {
  min-height: 100vh;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 40rpx;
}

// 成功图标样式
.success-icon {
  margin-bottom: 60rpx;

  .icon-circle {
    width: 180rpx;
    height: 180rpx;
    border-radius: 50%;
    background-color: #eaffea;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: circleScale 0.5s ease-out;

    .icon-check {
      width: 100rpx;
      height: 50rpx;
      border-left: 10rpx solid #00b42a;
      border-bottom: 10rpx solid #00b42a;
      transform: rotate(-45deg);
      animation: checkShow 0.3s ease-out 0.2s backwards;
    }
  }
}

// 文字提示样式
.success-text {
  text-align: center;
  margin-bottom: 100rpx;

  .main-text {
    font-size: 36rpx;
    color: #333333;
    font-weight: 600;
    display: block;
    margin-bottom: 20rpx;
  }

  .sub-text {
    font-size: 28rpx;
    color: #666666;
  }
}

// 返回按钮样式
.back-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #007aff;
  color: #ffffff;
  font-size: 32rpx;
  border-radius: 45rpx;
  margin-top: 40rpx;
  box-shadow: 0 4rpx 10rpx rgba(0, 122, 255, 0.3);
  transition: all 0.2s ease;

  &:active {
    background-color: #0066cc;
    transform: scale(0.98);
  }
}

// 动画定义
@keyframes circleScale {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  70% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes checkShow {
  0% {
    opacity: 0;
    transform: rotate(-45deg) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: rotate(-45deg) scale(1);
  }
}
</style>