retail-app/pages/mall/mallRecharge/index.vue

<template>
	<!-- 充值套餐 -->
	<view class="mall-recharge">
		<view class="white-box">
			<view class="account-text">充值账号</view>
			<u-input class="account-name" v-model="phone" type="text" maxlength="11" placeholder="请输入手机号" placeholder-style="font-size:32rpx;font-weight:400" fontSize="56rpx" :customStyle="{ padding: '0'}" clearable></u-input>
		</view>
		<view v-if="phone" class="tip flex aic">
			<re-image imgSrc="/retail/mall/ic_tip.png" width="28" height="28"></re-image>
			<text>请确认账户是否正确无误</text>
		</view>
		<view class="list-title flex aic">
			<span class="title-line"></span>
			您选择的游戏币套餐
		</view>
		<view class="order-info">
			<view class="info-top">
				<view class="top-nums flex jcsb aic">
					<view>
						<span class="yxb-num">888</span>
						<span class="yxb-text">游戏币</span>
					</view>
					<view>
						<span class="price-text">¥</span>
						<span class="price-num">23</span>
					</view>
				</view>
				<view class="info-msg flex jcsb aic">
					<view class="msg-left">
						<span class="zeng ${additionalGameCurrency || grabTimes || trafficSize ? 'show' : 'hide'}">赠</span>
						<span class="${additionalGameCurrency ? 'show' : 'hide'}">
							<span class="game-num">1000</span>游戏币
						</span>
						<!-- <span class="og">
							<span class="${additionalGameCurrency && trafficSize ? 'show' : 'hide'}">+</span>
							<span class="bold ${trafficSize ? 'show' : 'hide'}">2M</span>
						</span> -->
						<span class="og red ${grabTimes? '' : 'hide'}">
							<span class="${additionalGameCurrency && grabTimes? 'show' : 'hide'}"
								style="margin-left:2px">+</span>
							<view class="red-box">
								<!-- <image class="red_img"/> -->
								<span>红包机会x2</span>
							</view>
						</span>
					</view>
					<span class="time-text">30天有效</span>
				</view>
			</view>
			<view class="info-btm">
				<view class="date-wrapper flex jcsb aic">
					<view>立即生效</view>
					<view class="date-box">2023年10月23</view>
				</view>
				<!-- <view class="jubaopen-ctrl margin-top-20 flex jcsb aic jbp">
					<view class="jubaop">
						<view class="juntop">
							<image class="img-4" src="" alt="" />
							<span>聚宝盆余额抵扣</span>
							<i class="fx-icon icon-wenhao-xianxingyuankuang"></i>
						</view>
						<view class="dikou">
							<span class="gongyou dikoujine"></span>
							<span class="kedi kedikoujine"></span>
						</view>
						<view class="desc">聚宝盆余额整数部分可参与抵扣</view>
					</view>
					<image class="img-2 check-icon3-i" src="" alt="" />
					<span class="check-icon check-icon3"></span>
				</view> -->
				<!-- <view class="margin-top-30 flex jcsb aic" id="zfbCtrl">
					<view class="flex aic">
						<image class="img-3" src="" alt="" />
						<span>支付宝支付</span>
					</view>
					<image class="img-2 check-icon2-i" src="" alt="" />
					<span class="check-icon check-icon2"></span>
				</view> -->

				<view class="wx-ctrl flex jcsb aic">
					<view class="flex aic">
						<re-image width="48" height="48" imgSrc="/retail/mall/weixin-icon.png" alt="" />
						<span style="margin-left:16rpx">微信支付</span>
					</view>
					<re-image width="48" height="48" imgSrc="/retail/mall/yigou.png" alt="" />
					<!-- <span class="check-icon check-icon1"></span> -->
				</view>
			</view>
		</view>
		<!-- 支付按钮 -->
		<view class="btn-wrapper">
			<view id="checkBox" class="margin-bottom-17">
				<view class="check-text text-center">点击“确认支付”，即代表您已阅读并同意<span id="agreeEl" class="red">《用户购买协议》</span></view>
			</view>
			<view class="btns flex jcsb aic safe-area-inset-bottom">
				<view>
					<span class="btn-price-text1">应付款：</span>
					<span class="btn-price-text2">¥</span>
					<span class="price-num btn-price-num"></span>
				</view>
				<u-button class="primary-btn" id="buyBtn">确认支付</u-button>
			</view>
		</view>
	</view>
</template>
<script>
	export default{
		// components:{
		// 	'u-input': () => import('@/plugins/uview-ui/components/u-input') 
		// }
		data(){
			return{
				phone:''
			}
			
		}
	}
	// const data = reactive({
		
	// })
</script>
<style lang="scss">
	.mall-recharge {
		padding: 32rpx;
		.white-box {
			padding: 48rpx 48rpx 56rpx;
			background-color: #fff;
			border-radius: 32rpx;

			.account-text {
				font-size: 32rpx;
				font-weight: 500;
				color: #2C2B28;
				line-height: 14rpx;
				margin-bottom: 40rpx;
			}

			.account-name {
				color: #2C2B28;
				font-weight: bold;
				font-size: 56rpx;
				line-height: 32rpx;
			}
		}
		.tip{
			font-size: 24rpx;
			color: #8B8B8B;
			margin-top: 16rpx;
			margin-left: 46rpx;
			text{
				margin-left: 6rpx;
			}
		}
		.list-title {
		  color: #363531;
		  font-weight: bold;
		  font-size: 36rpx;
		  line-height: 36rpx;
		  margin: 48rpx 0 32rpx;
		
		  .title-line {
		    width: 8rpx;
		    height: 32rpx;
		    background-color: #FF8800;
		    margin-right: 10rpx;
		  }
		}

		.order-info {
			background-color: #fff;
			border-radius: 32rpx;

			.info-top {
				padding: 40rpx;
				border-bottom: 1rpx solid #E8E8E8;
			}

			.top-nums {
				font-weight: bold;
				color: #2C2B28;

				.yxb-num {
					font-size: 48rpx;
					margin-right: 8rpx;
				}

				.yxb-text {
					font-size: 24rpx;
					color: #564C47;
				}

				.price-num {
					font-size: 48rpx;
				}

				.price-text {
					font-size: 28rpx;
				}
			}

			.info-msg {
				margin-top: 32rpx;
				font-size: 32rpx;
				color: #2C2B28;
				font-weight: bold;
				white-space: nowrap;

				.msg-left {
					width: calc(100% - 142rpx);
					display: flex;
					align-items: center;
					font-weight: normal;
					font-size: 32rpx;

					.game-num{
						font-weight: bold;
					}
				}

				.red {
					display: flex;
					align-items: center;

					.red-box {
						display: flex;
						align-items: center;
					}
				}

				.og {
					color: #FF7C00;
				}

				.time-text {
					font-size: 24rpx;
					color: #564C47;
					font-weight: normal;
				}

				.zeng {
					flex-shrink: 0;
					display: inline-block;
					background-color: #5CB020;
					width: 40rpx;
					height: 32rpx;
					line-height: 32rpx;
					color: #fff;
					font-size: 24rpx;
					border-radius: 8rpx;
					text-align: center;
					font-weight: normal;
					margin-right: 6rpx;
				}

				.show {
					display: inline-block;
					vertical-align: middle;
				}

				.hide {
					display: none;
				}
			}
		}

		// .info-msg {
		// 	margin-top: 16rpx;
		// 	font-size: 16rpx;
		// 	color: #2C2B28;
		// 	font-weight: bold;

		// 	.msg-left {
		// 		width: calc(100% - 150rpx);
		// 		display: flex;
		// 		align-items: center;
		// 		font-weight: normal;
		// 		font-size: 12rpx;
		// 	}

		// 	.red {
		// 		display: flex;
		// 		align-items: center;

		// 		.red-box {
		// 			display: flex;
		// 			align-items: center;
		// 		}
		// 	}

		// 	.og {
		// 		color: #FF7C00;
		// 	}

		// 	.time-text {
		// 		font-size: 12rpx;
		// 		color: #564C47;
		// 		font-weight: normal;
		// 	}

		// 	.zeng {
		// 		display: inline-block;
		// 		background-color: #5CB020;
		// 		width: 20rpx;
		// 		height: 16rpx;
		// 		line-height: 16rpx;
		// 		color: #fff;
		// 		font-size: 12rpx;
		// 		border-radius: 4rpx;
		// 		text-align: center;
		// 		font-weight: normal;
		// 		margin-right: 3rpx;
		// 	}

		// 	.show {
		// 		display: inline-block;
		// 		vertical-align: middle;
		// 	}

		// 	.hide {
		// 		display: none;
		// 	}
		// }

		.info-btm {
			padding: 40rpx;
			font-size: 32rpx;
			color: #2C2B28;
			font-weight: 500;

			.date-wrapper{
				
			}
			.wx-ctrl{
				margin-top: 78rpx;
				.check-icon1-i{
					width: 48rpx;
					height: 48rpx;
				}
			}
			.margin-top-40 {
				margin-top: 40rpx;
			}

			.margin-top-30 {
				margin-top: 30rpx;
			}

			.margin-top-20 {
				margin-top: 20rpx;
			}

			img {
				width: 24rpx;
				height: 24rpx;
			}

			.img-1 {
				margin-right: 16rpx;
			}

			.img-4 {
				margin-right: 16rpx;
			}

			.img-3 {
				margin-right: 16rpx;
				transform: scale(0.9);
			}

			.check-icon {
				width: 40rpx;
				height: 40rpx;
				border: 1rpx solid #bbb;
				border-radius: 100%;
				margin-right: 2rpx;
			}

			.jbp {
				padding: 10rpx 0rpx 10rpx 0rpx;
				border-bottom: 1rpx solid #E8E8E8;
			}

			.dikou {
				// height: 42rpx;
				// float:left;
				// position:absolute;
				// margin-top: 70rpx;
				margin-left: 30rpx;


				.gongyou {
					font-weight: normal;
					font-size: 28px;
					color: #8B8B8B;
				}

				.kedi {
					font-weight: normal;
					font-size: 28px;
					color: #FF7C00;
				}
			}
		}

		.btn-wrapper {
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			padding: 24rpx 32rpx 0;
			z-index: 200;
			background-color: rgb(252, 252, 252);
			border-top: 1rpx solid #eee;
			box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(109,84,52,0.19);

			.btn-price-text1 {
				color: #2C2B28;
				font-size: 32rpx;
				font-weight: bold;
			}

			.btn-price-text2 {
				color: #FF6400;
				font-size: 32rpx;
				font-weight: bold;
			}

			.btn-price-num {
				font-size: 48rpx;
				color: #FF6400;
				font-weight: bold;
			}

			.fx-icon {
				font-size: 32rpx;
				margin-right: 12rpx;

				&.check-icon1 {
					color: #281A13;
				}

				&.check-icon2 {
					color: #0087fb;
				}

				&.check-icon3 {
					color: #0087fb;
				}
			}

			.check-text {
				color: #281A13;
				font-size: 24rpx;

				.red {
					color: #FF6400;
				}
			}
			.btns{
				margin: 24rpx 0 8rpx;
			}
			.primary-btn {
				width: 296rpx;
				height: 96rpx;
				font-size: 36rpx;
				color: #FFFFFF;
				background: linear-gradient(140deg, #FF8500 0%, #FFA600 100%);
				border-radius: 48rpx;
				font-weight: bold;
				margin: 0;
			}
		}
	}
</style>