From 9b012d397d49dd9bbabfede05e76baf1dc715c0e Mon Sep 17 00:00:00 2001
From: GaoHao <1210693421@qq.com>
Date: Thu, 8 Aug 2024 13:33:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=9A=E5=91=98=E5=85=85=E5=80=BC=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/member/index.vue | 330 ++++++++++++++---------------------------
 1 file changed, 113 insertions(+), 217 deletions(-)

diff --git a/pages/member/index.vue b/pages/member/index.vue
index 5c8746a..2a58ca3 100644
--- a/pages/member/index.vue
+++ b/pages/member/index.vue
@@ -13,38 +13,39 @@
 			</view>
 		
 		</view>
-		<view class="therecontent">
+	<!-- 	<view class="therecontent">
 			<input type="number" v-model="amount" placeholder="自定义金额">
-		</view>
+		</view> -->
 		<view class="rechargeList">
-			<view class="rechargeList_f" v-for="(item,index) in listdata" :key="index">
-				<viwe class="rechargeList_item flex-colum">
+			<view class="rechargeList_f"  @click="clickinput(item,index)" v-for="(item,index) in listdata" :key="index">
+				<viwe class="rechargeList_item flex-colum " :class="index == inputshow?'active':''">
 					<view class="rechargeList_item_title">充值</view>
-					<view class="rechargeList_item_amount">￥<text>{{item.minNum}}</text></view>
-					<view class="rechargeList_item_handsel">赠送{{item.handselNum}}元</view>
+					<view class="flex-colum-start">
+						<view class="rechargeList_item_amount">￥<text>{{item.minNum}}</text></view>
+						<view class="rechargeList_item_gift" v-show="index == inputshow">
+							<image class="rechargeList_item_gift_bg" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/menber/gift_icon.png" mode="aspectFill"></image>
+							<view class="rechargeList_item_gift_text">
+								<text>赠</text>
+								<text>￥{{ item.handselNum }}</text>
+							</view>
+						</view>
+						<view class="rechargeList_item_handsel" v-show="index != inputshow">赠送{{item.handselNum}}元</view>
+					</view>
+					
 				</viwe>
 			</view>
 		</view>
-		<view class="fourcontent flex-start">
-			<view class="fourcontentlnage" v-for="(item,index) in listdata" :key="index">
-				<view class="flex-colum" :class="index == inputshow?'fourcontentitems':'fourcontentitem'"
-					@click="clickinput(item,index)">
-					<text>{{item.minNum}}元</text>
-					<text style="margin-top: 10rpx;">充{{item.minNum}}送{{item.handselNum}}</text>
-				</view>
-			</view>
-		</view>
-		<view class="fivecontent" @tap="$u.debounce(userbalancerechangesub, 500)">
-			立即充值
+		<view class="rechargeBox">
+			<view class="recharge" @tap="$u.debounce(userbalancerechangesub, 500)">立即充值</view>
 		</view>
+		
 	</view>
+
 </template>
 
 <script>
-	import card from './components/card.vue'
 	export default {
 		components: {
-			card
 		},
 		data() {
 			return {
@@ -168,6 +169,7 @@
 			border-radius: 12rpx;
 			padding: 32rpx 28rpx;
 			align-items: initial;
+			margin-bottom: 26rpx;
 			.title{
 				font-weight: 500;
 				font-size: 32rpx;
@@ -199,228 +201,122 @@
 		}
 		
 		.rechargeList{
+			width: 100%;
 			display: flex;
+			flex-wrap: wrap;
 			.rechargeList_f{
 				width: 33.333%;
+				margin-bottom: 30rpx;
+				padding-right: 20rpx;
+				padding-left: 0;
 				.rechargeList_item{
-					height: 168rpx;
-					background: linear-gradient( 133deg, #F9F6ED 0%, #FFFFFF 100%);
+					height: 130rpx;
 					border-radius: 0rpx 48rpx 0rpx 0rpx;
-					border: 4rpx solid #DCC19E;
+					border: 4rpx solid #E5E5E5;
 					align-items: initial;
+					padding: 26rpx 22rpx;
+					justify-content: space-between;
+					position: relative;
+				
 					.rechargeList_item_title,.rechargeList_item_handsel{
 						font-weight: 400;
 						font-size: 20rpx;
 						color: #999999;
 					}
 					.rechargeList_item_amount{
-						font-weight: 500;
+						font-weight: bold;
 						font-size: 28rpx;
 						color: #666666;
 						text{
 							font-size: 44rpx;
+							font-weight: bold;
+							color: #666666;
 						}
 					}
 					.rechargeList_item_handsel{
 						
 					}
+					.rechargeList_item_gift{
+						width: 92.52rpx;
+						height: 88.74rpx;
+						position: absolute;
+						top: 12rpx;
+						right: 12rpx;
+						.rechargeList_item_gift_bg{
+							width: 92.52rpx;
+							height: 88.74rpx;
+							position: absolute;
+						}
+						.rechargeList_item_gift_text{
+							width: 92.52rpx;
+							height: 88.74rpx;
+							position: absolute;
+							display: flex;
+							flex-direction: column;
+							align-items: center;
+							justify-content: center;
+							text:nth-child(1){
+								font-weight: bold;
+								font-size: 24rpx;
+								color: #C14D3A;
+							}
+							text:nth-child(2){
+								font-weight: 400;
+								font-size: 20rpx;
+								color: #F7664E;
+							}
+						}
+					}
 				}
+				.rechargeList_item.active{
+					border: 4rpx solid #DCC19E;
+					background: linear-gradient( 133deg, #F9F6ED 0%, #FFFFFF 100%);
+					.rechargeList_item_title{
+						color: #F7664E;
+					}
+					.rechargeList_item_amount{
+						font-weight: bold;
+						font-size: 28rpx;
+						color: #FB604A;
+						text{
+							font-size: 44rpx;
+							font-weight: bold;
+							color: #FB604A;
+						}
+					}
+				}
+			}
+		
+			.rechargeList_f:nth-child(3n-1){
+				padding-right: 10rpx;
+				padding-left: 10rpx;
+			}
+			.rechargeList_f:nth-child(3n){
+				padding-right: 0;
+				padding-left: 20rpx;
+			}
+		}
+
+		.rechargeBox{
+			width: 100%;
+			padding: 16rpx 28rpx 84rpx 28rpx;
+			background-color: #fff;
+			position: fixed;
+			left: 0;
+			bottom: 0;
+			.recharge {
+				width: 100%;
+				height: 90rpx;
+				line-height: 90rpx;
+				text-align: center;
+				font-weight: bold;
+				font-size: 36rpx;
+				color: #FFFFFF;
+				border-radius: 12rpx;
+				background: #E3AD7F;
 			}
 		}
 		
-		.towcontentitem {
-			width: 100%;
-			position: relative;
-			padding: 32rpx;
-			border-radius: 12rpx;
-			background: linear-gradient(126deg, #FFFBF2 0%, #F2D093 100%);
-			border-radius: 12rpx 12rpx 12rpx 12rpx;
-
-			&::after {
-				position: absolute;
-				bottom: 0;
-				right: 68rpx;
-				content: '';
-				display: inline-block;
-				width: 240rpx;
-				height: 232rpx;
-				background: url(https://czg-qr-order.oss-cn-beijing.aliyuncs.com/member.png) no-repeat;
-				background-size: 100% 100%;
-			}
-
-			.towcontentitemimage {
-				top: 0;
-				left: 0;
-				position: absolute;
-				width: 100%;
-				height: 100%;
-				border-radius: 12rpx;
-				z-index: 5;
-			}
-
-			.towcontentitemone {
-				width: 100%;
-				position: relative;
-				z-index: 9;
-
-				.towcontentitemoneimage {
-					width: 76rpx;
-					height: 76rpx;
-					border-radius: 50%;
-				}
-
-
-
-				.towcontentitemonetext {
-					height: 76rpx;
-					margin-left: 16rpx;
-
-					.towcontentitemonetextone {
-						font-family: Source Han Sans CN, Source Han Sans CN;
-						font-weight: 500;
-						font-size: 36rpx;
-						color: #333333;
-					}
-
-					.towcontentitemonetexttow {
-						font-size: 24rpx;
-						font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-						font-weight: 400;
-						color: #422A07;
-					}
-
-				}
-			}
-
-			.towcontentitemprogressa {
-				padding: 8rpx 44rpx;
-				z-index: 10;
-				position: relative;
-				margin-top: 54rpx;
-			}
-
-			.towcontentitemtow {
-				margin-top: 84rpx;
-				z-index: 10;
-				font-size: 24rpx;
-				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-				font-weight: 400;
-				color: #422A07;
-			}
-
-			.towcontentitevip {
-				position: absolute;
-				right: 0;
-				top: 0;
-				width: 92rpx;
-				height: 40rpx;
-				font-size: 20rpx;
-				background: #F4C380;
-				border-radius: 0rpx 12rpx 0rpx 12rpx;
-				text-align: center;
-				line-height: 40rpx;
-				color: #fff;
-				font-family: Source Han Sans CN-Medium;
-				font-weight: Medium;
-
-			}
-
-			.towcontentitemthere {
-				margin-left: 92rpx;
-				font-family: Source Han Sans CN, Source Han Sans CN;
-				font-weight: Medium;
-				font-size: 24rpx;
-				color: #333333;
-
-				.towcontentitemtheretext {
-					font-family: Source Han Sans CN, Source Han Sans CN;
-					font-weight: bold;
-					font-size: 36rpx;
-					color: #333333;
-				}
-			}
-		}
-
-		.therecontent {
-			margin-top: 32rpx;
-			position: relative;
-			padding: 22rpx 32rpx;
-			width: 100%;
-			background: #FFFFFF;
-			border-radius: 8rpx;
-
-			input {
-				padding-left: 30rpx;
-				text-align: right;
-				font-size: 28rpx;
-				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
-				font-weight: 500;
-				color: #666666;
-			}
-		}
-
-		.therecontent::after {
-			position: absolute;
-			top: 50%;
-			left: 32rpx;
-			transform: translateY(-50%);
-			content: '￥';
-			display: inline-block;
-			width: 28rpx;
-			height: 40rpx;
-			font-size: 28rpx;
-			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-			font-weight: 400;
-			color: #333333;
-		}
-
-		.fourcontent {
-			.fourcontentlnage {
-				width: 33.33%;
-
-				.fourcontentitem {
-					margin: 24rpx 10rpx;
-					padding: 16rpx 0;
-					text-align: center;
-					background: #FFFFFF;
-					border-radius: 8rpx;
-					// border: 1rpx solid #333333;
-					font-size: 28rpx;
-					font-family: Roboto-Medium, Roboto;
-					font-weight: 500;
-					color: #333333;
-				}
-
-				.fourcontentitems {
-					margin: 24rpx 10rpx;
-					padding: 16rpx 0;
-					text-align: center;
-					border-radius: 8rpx;
-					background: #F1CB66;
-					border-radius: 8rpx 8rpx 8rpx 8rpx;
-					border: 2rpx solid #F1CB66;
-					font-size: 28rpx;
-					font-family: Roboto-Medium, Roboto;
-					font-weight: 500;
-					color: #FFFFFF;
-				}
-			}
-
-		}
-
-		.fivecontent {
-			position: relative;
-			bottom: 44rpx;
-			margin-top: 62rpx;
-			padding: 20rpx 0;
-			text-align: center;
-			width: 100%;
-			font-size: 36rpx;
-			font-family: PingFang SC-Bold, PingFang SC;
-			font-weight: bold;
-			color: #FFFFFF;
-			border-radius: 8rpx;
-			background: #F1CB66;
-		}
 	}
+
 </style>
\ No newline at end of file