purchase-let/pages/charge/charge.vue

<!-- 会员充值 -->
<style lang="scss">
	.member {
		// padding-top: 40rpx;
		padding: 40rpx 0 300rpx 0;

		.card {
			background: linear-gradient(to right, #F7EED7, #E7DAAF);
			height: 302rpx;
			margin: 0 30rpx 30rpx;
			border-radius: 10rpx;
			padding: 20rpx 0 0 20rpx;
			box-sizing: border-box;

			.card-info {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.card-info-right {
					margin-left: 40rpx;

					.phone {
						margin-bottom: 12rpx;
						font-weight: 600;
						font-size: 32rpx;
						color: #444444;
					}

					.level {
						font-size: 28rpx;
						color: #7B5232;
					}
				}
			}

			.money {
				display: flex;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-bottom: 34rpx;

				text {
					margin-right: 116rpx;
				}
			}

			.charge {
				display: flex;
				align-items: center;
				padding-right: 38rpx;

				.charge-left {
					flex: 1;
					margin-right: 30rpx;

					&>view {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 10rpx;

						text {
							font-size: 22rpx;
							color: #A26341;
						}
					}
				}

				.charge-right {
					width: 148rpx;
					height: 52rpx;
					line-height: 52rpx;
					background: #7B5232;
					border-radius: 30rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}

		.rules {
			background: #FFFFFF;
			border-radius: 16rpx;
			margin: 0 30rpx 30rpx;
			padding: 30rpx;

			.rules-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 34rpx;

				.rules-title-main {
					font-weight: 600;
					font-size: 32rpx;
					color: #444444;
				}

				.rules-title-record {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					color: #444444;
				}
			}

			.rules-con {
				display: flex;
				flex-wrap: wrap;

				.rules-con-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 188rpx;
					height: 220rpx;
					border: 2rpx solid #F1F1F1;
					border-radius: 16rpx;
					margin-bottom: 28rpx;

					&:not(:nth-child(3n)) {
						margin-right: 26rpx;
					}

					.rules-con-item-main {
						margin-bottom: 10rpx;
						font-size: 30rpx;
						color: #333333;
					}

					.rules-con-item-sub {
						margin-bottom: 30rpx;
						font-size: 24rpx;
						color: #777777;
					}

					.rules-con-item-amount {
						text {
							font-weight: 600;
							font-size: 32rpx;
							color: #333333;
						}

						.symbol {
							font-size: 20rpx;
						}
					}
				}
			}
		}

		.attention {
			margin: 0 30rpx;

			.attention-title {
				position: relative;
				font-weight: 600;
				font-size: 32rpx;
				color: #262626;
				margin-bottom: 20rpx;
				margin-left: 10rpx;

				text {
					margin-left: 14rpx;
				}

				&::before {
					content: "";
					display: block;
					position: absolute;
					left: 0;
					bottom: 0;
					width: 6rpx;
					height: 100%;
					border-radius: 4rpx;
					background: #FF8056;
				}
			}

			.attention-tips {
				font-size: 24rpx;
				color: #7A7A7A;
				margin-bottom: 30rpx;
			}
		}

		.member-btn {
			position: fixed;
			bottom: 80rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 670rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #EFCC6E;
			border-radius: 40rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
</style>
<template>
	<view class="member">
		<view class="card">
			<view class="card-info">
				<up-image width="100rpx" height="100rpx" />
				<view class="card-info-right">
					<view class="phone">155****4444</view>
					<view class="level">初级会员 享受9折优惠</view>
				</view>
			</view>

			<view class="money">
				<text>余额：10000</text>
				<view>充值</view>
			</view>

			<view class="charge">
				<view class="charge-left">
					<view>
						<text>当前已充值1000，升级还需2000</text>
						<text>Lv.2</text>
					</view>
					<up-line-progress :percentage="30" activeColor="#A26341" inactiveColor="#fff"
						height="8rpx"></up-line-progress>
				</view>
				<view class="charge-right">升级会员</view>
			</view>
		</view>

		<!-- 充值规格 -->
		<view class="rules">
			<view class="rules-title">
				<view class="rules-title-main">充值规格</view>
				<view class="rules-title-record">
					充值记录
					<up-icon name="arrow-right"></up-icon>
				</view>
			</view>
			<view class="rules-con">
				<view class="rules-con-item" v-for="item in 4">
					<view class="rules-con-item-main">基础会员</view>
					<view class="rules-con-item-sub">永久</view>
					<view class="rules-con-item-amount">
						<text class="symbol">￥</text>
						<text>1000</text>
					</view>
				</view>

				<view class="rules-con-define">
					<up-input placeholder="点击输入金额" type="number" color="#333" fontSize="28rpx"
						:placeholderStyle="{color:'#989898'}">
						<template #prefix>
							<up-text text="自定义金额" color="#111" size="30rpx" margin="0 3px 0 0" type="tips"></up-text>
						</template>
					</up-input>
				</view>
			</view>
		</view>

		<!-- 注意事项 -->
		<view class="attention">
			<view class="attention-title"><text>注意事项：</text></view>
			<view class="attention-tips">1、充值后帐户的金额不能提现，可用于消费使用</view>
			<view class="attention-tips">2、账户充值出现问题可联系平台客服，也可拨打平台客服咨询热线4008888888</view>
		</view>

		<view class="member-btn">
			确认充值
		</view>
	</view>
</template>