扫码充值页添加快捷金额选项

mallApp/src/pages/member/components/pay-input.vue

@@ -83,7 +83,7 @@ export default {
 			@include disFlex(flex-end, flex-start);
 			font-weight: bold;
 			border-bottom: 4upx solid $borderColor;
-			padding-bottom: 38upx;
+			padding-bottom: 20upx;
 			font-family: TextaAlt, serif;
 			height: 70upx;
 			.money-text {
@@ -102,7 +102,7 @@ export default {
             }
 			.cursor {
 				position: relative;
-				top: 1upx;
+				top: -10upx;
 				width: 4upx;
 				height: 100%;
 				background: $mainColor;

mallApp/src/pages/member/recharge.vue

@@ -51,6 +51,18 @@
 			
 			<view class="module-com pay-input-wrap">
 				<pay-input-module :focus="inpFocus" :num="amount" :hint="hint" @focusFn="focusFn" @blurFn="blurFn" @clickKey="clickKeyFn" />
+				<!-- 列出快捷充值金额选项 -->
+				<view class="item-list" v-if="itemList.length > 0">
+					<view 
+						class="item-list-item" 
+						v-for="(item, index) in itemList" 
+						:key="index"
+						:class="{ 'active': amount == item.amount }"
+						@click="getRecharge(item)"
+					>
+						<view class="item-list-item-amount">{{ item.amount }}</view>
+					</view>
+				</view>
 			</view>
 
 			<view class="btn-wrap">
@@ -101,7 +113,8 @@ export default {
 			// 福利选择弹框相关
 			welfareModalShow: false,
 			// 防重复请求相关
-			lastSelectWelfareTime: 0
+			lastSelectWelfareTime: 0,
+			itemList: []
 		}
 	},
 	watch: {
@@ -132,8 +145,15 @@ export default {
 	mounted(){
 	},
 	methods: {
-		getRecharge(amount){
-			this.amount = amount
+		getRecharge(item){
+			this.amount = item.amount
+			if (item.allHbAmount) {
+				let amountStr = parseFloat(item.allHbAmount).toString();
+				this.$msg(`有赠送${amountStr}元红包`)
+			} else if (item.give) {
+				let giveStr = parseFloat(item.give).toString();
+				this.$msg(`有赠送${giveStr}元`)
+			}
 		},
 		loginSuccess(user) {
 			this.beginInit()
@@ -183,6 +203,49 @@ export default {
 						uni.setStorageSync('hdId', that.hdInfo.id)
 						this.hdId = that.hdInfo.id
 					}
+
+					const itemType = res.data.itemType;
+					const itemList = res.data.itemList;
+					if(itemType == 'hb'){
+						let list = itemList.list || [];
+						let map = new Map();
+						list.forEach(item => {
+							let amount = parseFloat(item.amount);
+							let allHbAmount = parseFloat(item.allHbAmount);
+							if (allHbAmount > 0) {
+								if(!map.has(amount) || map.get(amount).allHbAmount < allHbAmount) {
+									map.set(amount, { amount: amount, allHbAmount: allHbAmount, original: item });
+								}
+							}
+						});
+						this.itemList = Array.from(map.values()).map(v => {
+							let obj = { ...v.original };
+							obj.amount = v.amount;
+							return obj;
+						});
+						this.itemList.sort((a, b) => a.amount - b.amount);
+					}else if(itemType == 'money'){
+						let map = new Map();
+						(itemList || []).forEach(item => {
+							let recharge = parseFloat(item.recharge);
+							let give = parseFloat(item.give);
+							if (give > 0) {
+								if(!map.has(recharge) || map.get(recharge).give < give) {
+									map.set(recharge, { amount: recharge, give: give, original: item });
+								}
+							}
+						});
+						this.itemList = Array.from(map.values()).map(v => {
+							let obj = { ...v.original };
+							obj.amount = v.amount;
+							return obj;
+						});
+						this.itemList.sort((a, b) => a.amount - b.amount);
+					}else{
+						//报错提示
+						this.$msg('数据异常')
+						return false
+					}
 				}
 			})
 
@@ -305,12 +368,50 @@ export default {
 // 我要配送
 .delivery-wrap {
 	.module-com {
-		margin-bottom: 20upx;
 		background-color: #fff;
 	}
 	// 金额
 	.pay-input-wrap {
-		padding: 50upx 36upx 38upx;
+		padding: 50upx 36upx 32upx;
+		
+		.item-list {
+			display: flex;
+			flex-wrap: wrap;
+			margin-top: 40upx;
+			
+			.item-list-item {
+				width: calc(33.33% - 20upx);
+				margin-right: 30upx;
+				margin-bottom: 30upx;
+				height: 80upx;
+				border: 2upx solid #e4e4e4;
+				background-color: #ffffff;
+				border-radius: 12upx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				box-sizing: border-box;
+				transition: all 0.2s;
+				
+				&:nth-child(3n) {
+					margin-right: 0;
+				}
+				
+				.item-list-item-amount {
+					font-size: 32upx;
+					color: #333333;
+				}
+				
+				&.active {
+					border-color: #4CAF50;
+					background-color: rgba(76, 175, 80, 0.05);
+					.item-list-item-amount {
+						color: #4CAF50;
+						font-weight: bold;
+					}
+				}
+			}
+		}
 	}
 	.shop-logo-wrap {
 		padding-left: 10upx;