WashingCar-frontend-Ver3.0/pages/recharge/recharge.vue

<template>
	<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color"></navigationStyle>
	<view class="charge">
		<view class="tops">
			
		</view>
		<view class="charge-header">
			<view class="charge-header-title">
				当前余额￥<text class="colors">100</text>
			</view>
			<view class="charge-header-center">
				<img class="charge-header-center-img" src="" alt="" />
				<text class="centers">当前余额适用于全平台全部门店</text>
			</view>
			<view class="charge-header-bottom">
				<view class="charge-header-bottom-left" @click="explainBtn">
					充值说明
				</view>
				|
				<view class="charge-header-bottom-left" @click="secondBright">
					充值明细
				</view>
			</view>
		</view>
		<view class="charge-body">
			<view class="charge-body-title">
				请选择充值金额
			</view>
			<view class="charge-body-box">
				<view class="box active">
				<view class="titles">
					<text class="color-r">50</text>元
				</view>
				<view class="minBox">
					送<text class="color-r">5</text>元
				</view>
				</view>
				<view class="box">
				<view class="titles">
					<text class="color-r">50</text>元
				</view>
				<view class="minBox">
					送<text class="color-r">5</text>元
				</view>
				</view>
				<view class="box">
				<view class="titles">
					<text class="color-r">50</text>元
				</view>
				<view class="minBox">
					送<text class="color-r">5</text>元
				</view>
				</view>
				<view class="box">
				<view class="titles">
					<text class="color-r">50</text>元
				</view>
				<view class="minBox">
					送<text class="color-r">5</text>元
				</view>
				</view>
				<view class="ding">

				</view>
			</view>
		</view>
		<view class="charge-play">
			<view class="charge-body-title">
				请选择支付方式
			</view>
			<view class="charge-play-icon">
				<view class="icon-left">
					<img class="icon-img" src="https://www.jiubaotongxue.love/image/tin.jpg" alt="" />
					<text>微信支付</text>
				</view>
				<view class="icon-right icon">

				</view>
			</view>
		</view>
		<view class="charge-btnPlay">
			立即充值
		</view>
	</view>
	<explain v-if="explainShow===1" @close="close"></explain>
</template>

<script setup>
import {ref} from 'vue'
const titles = ref('次卡购买')
	const bgcolor= ref('#fff')
	const color = ref('#000')
const explainShow = ref(0)
const explainBtn = ()=>{
	explainShow.value = 1
}
const close = (val)=>{
	explainShow.value =val
}
const secondBright = ()=>{
	uni.navigateTo({
		url:"/pages/balance/balance"
	})
}
</script>

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

		.charge-header {
			width: 94%;
			// height: 400rpx;
			background-color: #ffffff;
			border: 1rpx solid #02a7f0;
			border-bottom: none;
			margin-left: 50%;
			transform: translateX(-50%);
			margin-top: 30rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.charge-header-title {
				width: 100%;
				margin-top: 20rpx;
				// height: 110rpx;
				font-size: 28rpx;
				// line-height: 110rpx;
				text-align: right;
				box-sizing: border-box;
				padding-right: 20rpx;

				// background-color: deeppink;
				.colors {
					font-size: 50rpx;
					color: #d9001b;
				}

			}

			.charge-header-center {
				width: 100%;
				height: 160rpx;
				// background-color: rebeccapurple;
				display: flex;
				justify-content: center;
				align-items: center;

				.charge-header-center-img {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					border: 1rpx solid #666;
				}

				.centers {
					width: 470rpx;
					display: block;
					text-align: center;
					font-size: 26rpx;
				}

			}

			.charge-header-bottom {
				margin-top: 20rpx;
				width: 100%;
				height: 80rpx;
				border: 1rpx solid #02a7f0;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;

				.charge-header-bottom-left {
					width: 50%;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					font-size: 26rpx;
				}
			}
		}

		.charge-body {
			width: 94%;
			// height: 400rpx;
			background-color: #ffffff;
			margin-left: 50%;
			transform: translateX(-50%);
			margin-top: 30rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.charge-body-title {
				width: 100%;
				height: 80rpx;
				box-sizing: border-box;
				line-height: 80rpx;
				padding-left: 20rpx;
				font-size: 30rpx;
				font-weight: 700;
				padding-top: 15rpx;
			}

			.charge-body-box {
				width: 100%;
				position: relative;
				display: flex;
				justify-content:space-between;
				flex-wrap: wrap;

				.box {
					margin-left: 15rpx;
					margin-right: 15rpx;
					width: 28%;
					margin-top: 20rpx;
					height: 100rpx;
					border: 1rpx solid #02a7f0;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					.titles{
						width: 100%;
						height: 65rpx;
						line-height: 65rpx;
						font-size: 35rpx;
						text-align: center;
						.color-r{
							font-size:40rpx;
						}
					}
					.minBox{
						width: 100%;
						height: 35rpx;
						line-height: 35rpx;
						text-align: center;
						font-size: 26rpx;
					}
				}

				.ding {
					width: 100%;
					height: 80rpx;
				}
			}

			.active {
				background-color: #02a7f0;

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

				.box-bottom {
					color: white;
				}
			}
		}

		.charge-play {
			width: 94%;
			height: 200rpx;
			background-color: #ffffff;
			margin-left: 50%;
			transform: translateX(-50%);
			margin-top: 30rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			.charge-body-title {
				width: 100%;
				height: 80rpx;
				box-sizing: border-box;
				line-height: 80rpx;
				padding-left: 20rpx;
				font-size: 30rpx;
				font-weight: 700;
				padding-top: 15rpx;
			}
			.charge-play-icon{
				width: 100%;
				height: 90rpx;
				margin-top: 15rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.icon-left{
					width: 260rpx;
					height: 90rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rp;
					.icon-img{
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
						margin-left: 30rpx;
					}
				}
				.icon-right{
					width: 50rpx;
					height: 50rpx;
					border-radius: 50%;
					border: 1rpx solid #666;
					margin-right: 50rpx;
				}
				.icon-active{
					border: none;
					background-size: 100% 100%;
					background-image: url("https://www.jiubaotongxue.love/image/xuanzhong.png");
				}
			}
		}
		.charge-btnPlay{
			position: fixed;
			bottom: 0rpx;
			width: 100%;
			height: 100rpx;
			background-color: #d9001b;
			text-align: center;
			line-height: 100rpx;
			color: white;
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
		}
	}
</style>