<template>
    <nav-bar :navbar-data="navbarData" />
    <view :style="{ backgroundColor: '#FFFFFFFF', height: 'calc(100vh - '+ height +'px)'}">
        <view class="ith-head" :style="{paddingTop: (height + 20)+'px'}">
            <image :src="imgHost +'/images/icon/paySucc.png'" :style="{width: '148rpx', height: '148rpx'}" />
            <view style="color:#1890FFFF;" class="font-36">充值成功</view>
            <view style="margin-top: 24rpx; margin-bottom: 18rpx;">
                <text class="font-48">￥</text>
                <text class="font-64">{{payAmtInt}}</text>
            </view>
        </view>
        <view class="pay-success-btn">
            <van-button type="info" color="#1890FFFF" plain @tap="goBackRechargeRecord" custom-class="button-css">充值记录</van-button>
            <van-button type="info" color="#1890FFFF" @tap="gotoIndex" custom-class="button-css">返回首页</van-button>
        </view>
    </view>
</template>

<script>
import Util from "@/utils/utils"
import httpConfig from '@/utils/httpConfig'
import NavBar from '@/components/navBar/index.vue'
import VanButton from '@/components/button/index'
const app = getApp();
export default {
    components: {
        'nav-bar': NavBar,
        'van-button': VanButton
    },
    data() {
        return {
            imgHost: httpConfig && httpConfig.imgHost ,
            userData: {},
            height: app.globalData.height,
            navbarData: {
                isGoHome: false,
                isGoBack: false,
                title: ""
            },
            payAmtInt: "0.00"
        }
    },
    onLoad(options) {
        this.userData = this.$cache.get('userData')
        if (options && options.amt){
            this.payAmtInt = options.amt
        }
    },
    methods: {
        // 跳转首页
        gotoIndex:Util.debounce(function (){
            uni.switchTab({
                url: '/pages/tabBar/index/index'
            })
        }),
        
        // 跳转至充值记录
        goBackRechargeRecord() {
            uni.navigateTo({
                url: '../advancePayment/advancePayment?flag=Y',
            })
        },
    }
}
</script>

<style>
.ith-head {
  padding-top: 55rpx;
  text-align: center;
}

.font-36 {
  font-size: 36rpx;
  font-family: PingFang SC;
  color: #666666FF;
}

.font-48 {
  font-size: 48rpx;
  font-family: PingFang SC;
  color: #666666FF;
}

.font-58 {
  font-size: 58rpx;
  font-family: PingFang SC;
  color: #333333FF;
}

.font-64 {
  font-size: 64rpx;
  font-family: PingFang SC;
  color: #333333FF;
}

.title {
  font-size: 40rpx;
  font-weight: 550;
  padding-bottom: 20rpx;
}

.pay-success-btn {
  display: flex;
  padding: 0 36rpx;
  box-sizing: border-box;
  justify-content: space-around;
  margin-top: 80rpx;
  text-align: center;
}

.pay-success-btn .button-css.van-button {
  width: 260rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
}
</style>