<template>
  <view class="success-container">
    <view class="icon-area">
      <!-- 绿色对勾图标 (SVG) -->
      <svg class="success-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M512 0C229.23 0 0 229.23 0 512s229.23 512 512 512 512-229.23 512-512S794.77 0 512 0z m0 960C264.58 960 64 759.42 64 512S264.58 64 512 64s448 200.58 448 448-200.58 448-448 448z"
          fill="#64D01D" />
        <path
          d="M743.08 335.78c-12.23-12.24-32.07-12.24-44.3 0L426.6 607.96 325.22 506.58c-12.24-12.24-32.07-12.24-44.3 0-12.24 12.24-12.24 32.07 0 44.3l124.58 124.58c6.12 6.12 14.14 9.17 22.15 9.17s16.03-3.05 22.15-9.17L743.08 380.08c12.24-12.24 12.24-32.07 0-44.3z"
          fill="#64D01D" />
      </svg>
      <text class="main-title">提交成功</text>
    </view>

    <text class="sub-tip">请保持手机畅通，等待平台工作人员与您联系</text>

    <view class="info-card">
      <view class="info-item">
        <text class="label">服务站点：</text>
        <text class="value">{{ station }}</text>
      </view>
      <view class="info-item">
        <text class="label">报 名 人 ：</text>
        <text class="value">{{ name }}</text>
      </view>
      <view class="info-item">
        <text class="label">联系手机：</text>
        <text class="value">{{ phone }}</text>
      </view>
    </view>

    <view class="footer-btn" @click="goHome">我知道了</view>
  </view>
</template>

<script>
export default {
  data() {
    return { station: '', name: '', phone: '' }
  },
  onLoad(options) {
    if (options.station) this.station = decodeURIComponent(options.station);
    if (options.name) this.name = decodeURIComponent(options.name);
    if (options.phone) this.phone = options.phone;
  },
  methods: {
    goHome() { uni.reLaunch({ url: '/pages/login/index' }); }
  }
}
</script>

<style>
page {
  background-color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}

.success-container {
  padding: 60rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-area {
  margin-top: 60rpx;
  margin-bottom: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 20rpx;
}

.main-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.sub-tip {
  font-size: 26rpx;
  color: #FF5722;
  margin-bottom: 60rpx;
  text-align: center;
}

.info-card {
  width: 100%;
  background-color: #fff;
  border: 2rpx dashed #eee;
  border-radius: 12rpx;
  padding: 40rpx;
  box-sizing: border-box;
  margin-bottom: 100rpx;
}

.info-item {
  display: flex;
  margin-bottom: 25rpx;
  font-size: 28rpx;
}

.info-item:last-child {
  margin-bottom: 0;
}

.label {
  min-width: 160rpx;
  color: #999;
}

.value {
  color: #333;
  font-weight: bold;
}

.footer-btn {
  width: 240rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(90deg, #FF6F00 0%, #FF5722 100%);
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  border-radius: 8rpx;
  text-align: center;
  margin-top: auto;
}
</style>
