<template>
	<view class="contentStyle" style="">
		<view class="status-bar"></view>
		<uni-nav-bar :title="'新增'+paymentType+'缴费'" left-icon="left" @clickLeft="goBack"  backgroundColor="transparent"
			:border="false">
		</uni-nav-bar>
		<Loading mask="true" click="true" ref="loading"></Loading>

		<!-- 表单区域 -->
		<scroll-view class="page" scroll-y="true">

			<view class="container">
				<!-- 成功图标 -->
				<view class="success-icon">
					<text class="icon-check">✓</text>
				</view>

				<!-- 主标题 -->
				<view class="title">绑定成功</view>

				<!-- 提示文案 -->
				<view class="desc">
					恭喜您绑定成功，费用将在24小时内更新，<br>
					请您按时查看，避免造成费用欠费
				</view>

				<!-- 操作按钮 -->
				<view class="btn-wrap">
					<button class="btn-back" @click="goBack">返回生活缴费</button>
				</view>
			</view>

		</scroll-view>
	</view>



</template>

<script>
	export default {
		onReady: function(e) {},
		components: {

		},

		computed: {

			 


		},
		created() {
			 
		},
		onShow() {

		},

		mounted() {},

		onReady() {
			this.$nextTick(() => {

			})
		},
		data() {
			return {
				/* 设定状态栏默认高度 */
				statusBarHeight: 20,
				paymentType: uni.getStorageSync('addPaymentType'),



			}
		},


		methods: {

			goBack() {
				uni.redirectTo({
					url: '/pages/payment-list/paymentIndex',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

		},


	}
</script>
<style lang="scss">
	page {
		background: #f2f1f6;
	}
</style>

<style scoped>
	.contentStyle {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 关键：占满屏幕高度 */
		background-color: #f9f9f9;
	}
	
	.page {
		flex: 1;
		overflow-y: auto;
		padding: 0px 20px;
		box-sizing: border-box;
		background-color: #fff;
	}
</style>
<style scoped>
	/* 全局容器 */
	.container {
		min-height: 100vh;
		background-color: #f5f5f7;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	/* 成功图标 */
	.success-icon {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		background-color: #1677ff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 200rpx;
		margin-bottom: 30rpx;
	}

	.icon-check {
		color: #fff;
		font-size: 100rpx;
		font-weight: bold;
		line-height: 1;
	}

	/* 主标题 */
	.title {
		font-size: 44rpx;
		font-weight: bold;
		color: #000;
		margin-bottom: 40rpx;
	}

	/* 提示文案 */
	.desc {
		font-size: 32rpx;
		color: #666;
		line-height: 1.6;
		text-align: center;
		margin-bottom: 150rpx;
	}

	/* 按钮容器 */
	.btn-wrap {
		width: 100%;
	}

	/* 返回按钮 */
	.btn-back {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		background-color: #1677ff;
		color: #fff;
		font-size: 36rpx;
		border-radius: 8rpx;
		border: none;
		padding: 0;
		margin: 0;
	}

	/* 按钮默认样式重置（解决uni-app button默认样式问题） */
	.btn-back::after {
		border: none;
	}.status-bar{
		width: 100vw;
		height: 46px;
	}
</style>