充值福利

mallApp/src/pages/member/recharge.vue

@@ -75,6 +75,15 @@
 
 			</view>
 
+			<!-- 充值福利提示 -->
+			<view class="welfare-tip-container">
+				<view class="welfare-tip-wrap" @click="showWelfareModal">
+					<view class="tip-icon"></view>
+					<view class="tip-text">充值福利</view>
+					<view class="tip-arrow"></view>
+				</view>
+			</view>
+
 			<view class="btn-wrap">
 				<!-- #ifdef MP-WEIXIN -->
 				<button class="button-com green" @click="showPayConfirm">微信支付</button>
@@ -107,6 +116,37 @@
 			</view>
 		</ModalModule>
 
+		<!-- 福利选择弹框 -->
+		<ModalModule 
+			:show="welfareModalShow" 
+			title="充值福利" 
+			:custom="true"
+			:button="[]"
+			width="95%"
+			@click="handleWelfareModal"
+		>
+			<view class="welfare-modal-content">
+				<view class="welfare-title">充值福利</view>
+				<view class="welfare-list">
+					<view 
+						v-for="(item, index) in welfareOptions" 
+						:key="index"
+						class="welfare-item"
+						@click="selectWelfare(item)"
+					>
+						<view class="welfare-info">
+							<view class="welfare-amount">充值{{item.recharge}}元</view>
+							<view class="welfare-gift">送{{item.gift}}元</view>
+						</view>
+						<view class="welfare-tag">立即选择</view>
+					</view>
+				</view>
+				<view class="welfare-btn-wrap">
+					<button class="welfare-cancel-btn" @click="closeWelfareModal">取消</button>
+				</view>
+			</view>
+		</ModalModule>
+
 		<wangCg :loginStyle.sync="globalLoginStyle" @goToLogin="loginTo()"></wangCg>
 
 	</view>
@@ -149,7 +189,14 @@ export default {
 			weal:[],
 			hint:'请输入充值金额',
 			// 支付确认弹框相关
-			payConfirmShow: false
+			payConfirmShow: false,
+			// 福利选择弹框相关
+			welfareModalShow: false,
+			welfareOptions: [
+				{ recharge: 1000, gift: 100 },
+				{ recharge: 500, gift: 50 },
+				{ recharge: 300, gift: 20 }
+			]
 		}
 	},
 	watch: {
@@ -347,6 +394,25 @@ export default {
 		// 取消充值
 		handleCancelRecharge() {
 			this.payConfirmShow = false
+		},
+		// 显示福利选择弹框
+		showWelfareModal() {
+			this.welfareModalShow = true
+		},
+		// 处理福利弹框点击
+		handleWelfareModal(e) {
+			// 点击遮罩层关闭弹框
+			this.welfareModalShow = false
+		},
+		// 选择福利套餐
+		selectWelfare(welfare) {
+			this.amount = welfare.recharge.toString()
+			this.welfareModalShow = false
+			this.$msg(`已选择充值${welfare.recharge}元送${welfare.gift}元套餐`)
+		},
+		// 关闭福利弹框
+		closeWelfareModal() {
+			this.welfareModalShow = false
 		}
 	}
 }
@@ -874,4 +940,201 @@ export default {
 		}
 	}
 }
+
+// 充值福利提示样式 - 居中小巧版
+.welfare-tip-container {
+	display: flex;
+	justify-content: center;
+	margin: 15upx 20upx;
+}
+
+.welfare-tip-wrap {
+	background: linear-gradient(135deg, #ff4757 0%, #ff6b7a 100%);
+	border-radius: 28upx;
+	padding: 12upx 20upx;
+	display: flex;
+	align-items: center;
+	box-shadow: 0 2upx 8upx rgba(255, 71, 87, 0.4);
+	transition: all 0.3s ease;
+	position: relative;
+	width: fit-content;
+	max-width: 240upx;
+	
+	&::before {
+		content: '';
+		position: absolute;
+		top: -2upx;
+		right: -2upx;
+		width: 12upx;
+		height: 12upx;
+		background: #ffff00;
+		border-radius: 50%;
+		border: 1upx solid #fff;
+		animation: pulse 2s infinite;
+	}
+	
+	&:active {
+		transform: scale(0.95);
+		box-shadow: 0 1upx 4upx rgba(255, 71, 87, 0.5);
+	}
+	
+	.tip-icon {
+		width: 24upx;
+		height: 24upx;
+		margin-right: 10upx;
+		position: relative;
+		
+		// CSS绘制礼品盒图标
+		&::before {
+			content: '';
+			position: absolute;
+			width: 18upx;
+			height: 14upx;
+			background: #fff;
+			border-radius: 2upx;
+			top: 5upx;
+		}
+		
+		&::after {
+			content: '';
+			position: absolute;
+			width: 2upx;
+			height: 24upx;
+			background: #fff;
+			left: 11upx;
+			top: 0;
+		}
+	}
+	
+	.tip-text {
+		font-size: 28upx;
+		font-weight: 500;
+		color: #fff;
+		white-space: nowrap;
+	}
+	
+	.tip-arrow {
+		width: 14upx;
+		height: 14upx;
+		margin-left: 8upx;
+		position: relative;
+		
+		// CSS绘制箭头
+		&::before {
+			content: '';
+			position: absolute;
+			width: 7upx;
+			height: 7upx;
+			border-right: 2upx solid #fff;
+			border-bottom: 2upx solid #fff;
+			transform: rotate(-45deg);
+			top: 3upx;
+			left: 3upx;
+		}
+	}
+}
+
+@keyframes pulse {
+	0% {
+		transform: scale(1);
+		opacity: 1;
+	}
+	50% {
+		transform: scale(1.2);
+		opacity: 0.7;
+	}
+	100% {
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+// 福利选择弹框样式
+.welfare-modal-content {
+	padding: 40upx;
+	
+	.welfare-title {
+		font-size: 40upx;
+		font-weight: bold;
+		color: #333;
+		text-align: center;
+		margin-bottom: 40upx;
+	}
+	
+	.welfare-list {
+		margin-bottom: 40upx;
+		
+		.welfare-item {
+			background: linear-gradient(135deg, #fff5f5 0%, #fffafa 100%);
+			border: 2upx solid #ff6b6b;
+			border-radius: 12upx;
+			padding: 30upx;
+			margin-bottom: 20upx;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			transition: all 0.3s ease;
+			
+			&:last-child {
+				margin-bottom: 0;
+			}
+			
+			&:active {
+				transform: scale(0.98);
+				background: linear-gradient(135deg, #ffebeb 0%, #fff0f0 100%);
+			}
+			
+			.welfare-info {
+				flex: 1;
+				
+				.welfare-amount {
+					font-size: 36upx;
+					font-weight: bold;
+					color: #333;
+					margin-bottom: 8upx;
+				}
+				
+				.welfare-gift {
+					font-size: 30upx;
+					color: #ff6b6b;
+					font-weight: 500;
+				}
+			}
+			
+			.welfare-tag {
+				background: #ff6b6b;
+				color: #fff;
+				padding: 12upx 24upx;
+				border-radius: 20upx;
+				font-size: 28upx;
+				font-weight: 500;
+			}
+		}
+	}
+	
+	.welfare-btn-wrap {
+		text-align: center;
+		
+		.welfare-cancel-btn {
+			width: 60%;
+			height: 80upx;
+			background: #f5f5f5;
+			color: #666;
+			border: 2upx solid #ddd;
+			border-radius: 40upx;
+			font-size: 32upx;
+			font-weight: 500;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			transition: all 0.3s ease;
+			margin: 0 auto;
+			
+			&:active {
+				transform: scale(0.98);
+				background: #e8e8e8;
+			}
+		}
+	}
+}
 </style>