<template>
	<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color"></navigationStyle>
	<view class="implement">
		<view class="tops">

		</view>
		<view class="headers">
			<view class="title">
				<view class="lefts" :class="{active:headerIndex===1}" @click="remo">
					购买套餐
					<view class="line" v-if="headerIndex===1">

					</view>
				</view>
				<view class="lefts" :class="{active:headerIndex===2}" @click="add">
					使用次卡
					<view class="line" v-if="headerIndex===2">

					</view>
				</view>
			</view>
			<view class="box" v-if="headerIndex===1">
				<view class="cardTime  cardActive">
					<text class="cardTime-left"> <text class="color-r">8</text>元 </text>
					<text class="cardTime-left"> <text class="color-r">15</text>分钟 </text>
				</view>
				<view class="cardTime">
					<text class="cardTime-left"> <text class="color-r">8</text>元 </text>
					<text class="cardTime-left"> <text class="color-r">15</text>分钟 </text>
				</view>
				<view class="cardTime">
					<text class="cardTime-left"> <text class="color-r">8</text>元 </text>
					<text class="cardTime-left"> <text class="color-r">15</text>分钟 </text>
				</view>
			</view>
			<scroll-view class="secondaryCard-auto" scroll-y="true" v-if="headerIndex===2">
				<view class="card" v-for="(item,index) in demo" :key="index">
					<img class="card-l" src="" alt="" />
					<view class="card-c">
						<view class="t">
							<text class="w"><text class="blacks">4</text>次卡</text><text class="reds">剩余次数<text
									class="color-r">3</text>次</text>
						</view>
						<view class="c">
							每次上线尽可使用<text class="color-r">20</text>分钟
						</view>
						<view class="d">
							有效期至 2024-05-06
						</view>
					</view>
					<view class="card-r">
						使用
					</view>
					<!-- <view class="card-r1" v-if="headerindex===1">
					
				</view> -->
				</view>
			</scroll-view>
			<view class="ding">

			</view>
		</view>
		<view class="playCheck" v-if="headerIndex===1">
			<view class="palys" @click="weiPly">
				<view class="play-left">
					<img class="i" src="" alt="" />
					<text class="txt">微信支付</text>
				</view>
				<img class="right-i" src="" alt="" />
			</view>
			<view class="lines">
				
			</view>
			<view class="palys" @click="yuPay">
				<view class="play-left">
					<img class="i" src="" alt="" />
					<text class="txt">余额支付</text>
				</view>
				<view class="right-i iactive">
					
				</view>
			</view>
		</view>
	</view>
	<view class="bottoms" v-if="headerIndex===1">
		<text class="bottoms-left">实付￥ <text class="color-r">8</text> </text>
		<view class="btn" @click="complete">
			确认支付
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const headerIndex = ref(1)
	const titles = ref('购买套餐')
	const bgcolor = ref('#fff')
	const color = ref('#000')
	const demo = ref([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10])

	const remo = () => {
		headerIndex.value = 1
	}
	const add = () => {
		headerIndex.value = 2
	}
	const complete = ()=>{
		uni.navigateTo({
			url:"/pages/complete/complete"
		})
	}
</script>

<style lang="scss">
	.implement {
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;
		position: absolute;

		.tops {
			width: 100%;
			height: 11%;
			background-color: #f2f2f2;
			position: relative;
		}

		.headers {
			position: relative;
			width: 96%;
			margin-left: 50%;
			transform: translateX(-50%);
			background-color: #fff;
			margin-top: 30rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.title {
				width: 100%;
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;

				.lefts {
					width: 50%;
					height: 80rpx;
					position: relative;

					.line {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						bottom: 2rpx;
						width: 60rpx;
						height: 8rpx;
						background-color: #009dd9;
					}
				}

				.active {
					color: #009dd9;
				}
			}

			.box {
				width: 100%;

				.cardTime {
					width: 90%;
					height: 120rpx;
					margin-left: 50%;
					transform: translateX(-50%);
					line-height: 120rpx;
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;
					padding-left: 30rpx;
					padding-right: 30rpx;
					border: 1rpx solid #009dd9;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					font-size: 28rpx;
					margin-top: 40rpx;

					.color-r {
						font-size: 45rpx;
					}

				}

				.cardActive {
					background-color: black;
					color: white;

					.color-r {
						color: #d9001b;
					}
				}
			}

			.secondaryCard-auto {
				width: 100%;
				max-height: 800rpx;
				position: relative;

				.card {
					width: 88%;
					height: 200rpx;
					background-color: #fff;
					margin-left: 50%;
					transform: translateX(-50%);
					margin-top: 45rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 1rpx solid #009dd9;

					.card-l {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						border: 1rpx solid #666;
						margin-left: 30rpx;
					}

					.card-c {
						width: 50%;
						height: 200rpx;
						font-size: 28rpx;

						.t {
							width: 100%;
							height: 66rpx;
							line-height: 66rpx;
							display: flex;
							margin-top: 6rpx;
							justify-content: space-between;

							.w {
								font-weight: 700;
								letter-spacing: 5rpx;

								.blacks {
									font-size: 35rpx;
								}

							}

							.reds {
								.color-r {
									color: #da0722;
									font-size: 35rpx;
								}
							}

						}

						.c {
							width: 100%;
							height: 66rpx;
							line-height: 66rpx;
							font-size: 26rpx;

							.color-r {
								color: #da0722;
								font-size: 35rpx;
							}
						}

						.d {

							width: 100%;
							height: 50rpx;
							line-height: 50rpx;
							box-sizing: border-box;
							padding-top: 10rpx;
							font-size: 26rpx;
						}
					}

					.card-r {
						width: 160rpx;
						height: 50rpx;
						background-color: #027db4;
						text-align: center;
						line-height: 50rpx;
						margin-right: 20rpx;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						color: white;
					}

					.card-r1 {
						width: 120rpx;
						height: 120rpx;
						background-color: #027db4;
						text-align: center;
						line-height: 50rpx;
						margin-left: 20rpx;
						margin-right: 40rpx;
						border-radius: 50%;
						color: white;
					}
				}
			}

			.ding {
				width: 100%;
				height: 50rpx;
			}
		}
		.playCheck{
			width: 96%;
			height: 300rpx;
			margin-left: 50%;
			transform: translateX(-50%);
			background-color: #fff;
			margin-top: 30rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			position: relative;
			.palys{
				width: 100%;
				height: 150rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
				.play-left{
					width: 50%;
					height: 110rpx;
					display: flex;
					align-items: center;
					margin-left: 50rpx;
					.i{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						border: 1rpx solid red;
					}
					.txt{
						display: block;
						margin-left: 20rpx;
						font-size: 26rpx;
					}
				}
				.right-i{
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					border: 1rpx solid #666;
					margin-right: 80rpx;
				}
				.iactive{
					background-size: 100% 100%;
					background-image: url("https://www.jiubaotongxue.love/image/tin.jpg");
				}
			}
			.lines{
				width: 90%;
				border-top: 1rpx dashed #666;
				margin-left: 50%;
				transform: translateX(-50%);
			}
		}
	
	}

.bottoms{
	width: 100%;
	height: 100rpx;
	background-color: #fff;
	position: fixed;
	bottom: 0rpx;
	bottom: constant(safe-area-inset-bottom);
	bottom: env(safe-area-inset-bottom);
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	padding-left: 50rpx;
	.bottoms-left{
		font-size: 28rpx;
		.color-r{
			color: #d9001b;
			font-size: 40rpx;
		}
	}
	.btn{
		width: 180rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		background-color: #da0722;
		font-size: 26rpx;
		margin-right: 30rpx;
		color: white;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}
}
</style>