<template>
  <view class="page-wrapper">
    <view class="pay-main">
      <view class="pay-title">支付成功</view>
      <view class="pay-amount">支付金额：{{ vdata.amount }}元</view>
    </view>
    <view class="but-box">
      <JButton @tap="toIndexPage(true)">返回首页（{{ vdata.num }}）</JButton>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
onLoad((options) => {
  console.log('支付成功页', options)
  vdata.amount = options.amount
  vdata.num = 10
  toIndexPage()
})
const vdata = reactive({
  num: 10,
})
let timeOut = undefined
function toIndexPage(flag) {
  if (flag || vdata.num <= 0) {
    clearTimeout(timeOut)
    return uni.redirectTo({
      url: '/pages/index/index',
    })
  }
  timeOut = setTimeout(() => {
    vdata.num -= 1
    toIndexPage()
  }, 1000)
}
</script>

<style lang="scss" scoped>
.page-wrapper {
  padding: 0.1rpx;
  min-height: calc(100vh - 2rpx);
}
.pay-main {
  padding: 0.1rpx;
  margin: 180rpx auto;
  width: 80%;

  background: linear-gradient(135deg, rgba(86, 222, 114, 1) 0%, rgba(58, 233, 174, 1) 100%);
  color: #fff;
  border-radius: 14rpx;
  .pay-title {
    margin: 30rpx 0;
    text-align: center;
    font-size: 42rpx;
    font-weight: 600;
    letter-spacing: 3rpx;
  }
  .pay-amount {
    text-align: center;
    font-size: 28rpx;
    font-weight: 600;
    margin-bottom: 30rpx;
  }
}
.but-box {
  transform: translateY(200rpx);
}
</style>
