<template>
	<view class="pay-success" v-if="!loading">
		<cu-custom bgColor="" :isBack="true" :class="'bg-' + themeColor.name">
			<block slot="content">支付成功</block>
		</cu-custom>
		<view class="pay-section" :class="'bg-' + themeColor.name">
			<image class="bg" :src="moneyBg"></image>
			<view class="tips-wrapper">
				<text class="iconfont iconxuanzhong2"></text>
				<view class="content">
					<text class="title">充值成功！</text>
					<view class="tip">感谢您的充值</view>
				</view>
			</view>
		</view>
		<view class="pay-card">

			<view class="pay-card-money" >{{moneySymbol}}{{ orderCode }}</view>

		</view>
		<view class="btn-group">
			<button
				class="confirm-btn"
				@tap="navTo"
				:class="'bg-' + themeColor.name"
			>充值记录</button
			>
			<button
				class="confirm-btn"
				@tap="toHome"
			>返回首页</button
			>
		</view>
	</view>
</template>
<script>
import { orderDetail,ordersByCode  } from '@/api/userInfo';
import moment from '@/common/moment';
import mConstDataConfig from '@/config/constData.config';
export default {
	data() {
		return {
			loading: true,
			type: '',
			id: '',
			orderCode: '',
			moneyBg: this.$mAssetsPath.moneyBg,
			moneySymbol: this.moneySymbol,
			orderDetail: {}
		};
	},
	onLoad(options) {
		this.orderCode = options.money;
	},
	filters: {
		time(val) {
			return moment(val * 1000).format('YYYY-MM-DD HH:mm');
		},


	},
	methods: {

		navTo() {
			let route;
			route = '/pages/user/account/bill?state=2';
			this.$mRouter.push({ route });
		},
		// 返回主页
		toHome() {
			this.$mRouter.reLaunch({ route: '/pages/index/index' });
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: $page-color-base;
}
.pay-success {
	.pay-section {
		height: 400upx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
			height: 60vw;
		}
		.tips-wrapper {
			display: flex;
			align-items: center;
			justify-content: center;
			color: $color-white;
			.iconfont {
				font-size: 132upx;
				margin-right: $spacing-base;
			}
			.content {
				.title {
					font-size: $font-lg + 4upx;
				}
				.tip {
					font-size: $font-sm + 2upx;
				}
			}
		}
	}
	.pay-card {
		width: 90%;
		height: 590upx;
		background-color: $color-white;
		border-radius: 12upx;
		margin: -80upx 5% 0;
		box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.05);
		.pay-card-money {
			text-align: center;
			font-size: $font-lg + 12upx;
			padding: $spacing-base 0;
			color: $color-black;
			font-weight: 500;
			border-bottom: 1upx solid rgba(0, 0, 0, 0.05);
		}
		.item {
			height: 80upx;
			line-height: 80upx;
			margin-left: $spacing-lg;
			color: $font-color-dark;
			.tit {
				color: $font-color-light;
			}
		}
	}
	.btn-group {
		padding-top: 60upx;
		.confirm-btn {
			margin-top: $spacing-lg;
			width: 72%;
		}
	}
}
</style>
