充值页面优化--1

mallApp/src/pages/member/recharge.vue

@@ -16,17 +16,9 @@
 				
 				<view class="balance-info">
 					<view v-if="hdInfo.balance >= 0" class="balance-item positive">
-						<view class="balance-label">账户余额</view>
-						<view class="balance-amount">¥{{ hdInfo.balance?parseFloat(hdInfo.balance):0 }}</view>
-						<view class="action-buttons">
-							<view class="action-btn bill-btn" @click="viewHasBill">
-								<view class="btn-icon bill-icon"></view>
-								<text class="btn-text">已结账单</text>
-							</view>
-							<view class="action-btn detail-btn" @click="viewChange">
-								<view class="btn-icon chart-icon"></view>
-								<text class="btn-text">变动明细</text>
-							</view>
+						<view class="balance-row">
+							<view class="balance-label">账户余额</view>
+							<view class="balance-amount">¥{{ hdInfo.balance?parseFloat(hdInfo.balance):0 }}</view>
 						</view>
 					</view>
 					
@@ -65,6 +57,17 @@
 				</view>
 			</view>
 
+			<view class="module-com recharge-desc-wrap" v-if="showHbRechargeDesc">
+				<view class="recharge-desc-title">充值说明</view>
+				<text class="recharge-desc-line">单客户1天只能使用一个红包</text>
+				<text
+					class="recharge-desc-line"
+					v-for="(line, idx) in hbDescLines"
+					:key="'hb-rule-' + idx"
+				>{{ line }}</text>
+				<text class="recharge-desc-line" v-if="hbGiftAmountText">总共赠送{{ hbGiftAmountText }}元</text>
+			</view>
+
 			<view class="btn-wrap">
 				<!-- #ifdef MP-WEIXIN -->
 				<button class="button-com green" @click="handleConfirmRecharge">微信支付</button>
@@ -114,7 +117,8 @@ export default {
 			welfareModalShow: false,
 			// 防重复请求相关
 			lastSelectWelfareTime: 0,
-			itemList: []
+			itemList: [],
+			rechargeItemType: ''
 		}
 	},
 	watch: {
@@ -131,7 +135,46 @@ export default {
 		}
 	},
 	computed: {
-    	...mapGetters({ loginInfo:"getLoginInfo" })
+    	...mapGetters({ loginInfo:"getLoginInfo" }),
+		selectedHbPackage() {
+			if (this.rechargeItemType !== 'hb' || !this.itemList.length) return null
+			const raw = this.amount
+			if (raw === '' || raw === null || raw === undefined) return null
+			const target = parseFloat(String(raw))
+			if (isNaN(target)) return null
+			const found = this.itemList.find((item) => {
+				const a = parseFloat(String(item.amount))
+				return !isNaN(a) && Math.abs(a - target) < 1e-6
+			})
+			return found || null
+		},
+		hbParsedRules() {
+			const pkg = this.selectedHbPackage
+			if (!pkg || pkg.rules === undefined || pkg.rules === null || pkg.rules === '') return []
+			try {
+				const r = typeof pkg.rules === 'string' ? JSON.parse(pkg.rules) : pkg.rules
+				return Array.isArray(r) ? r : []
+			} catch (e) {
+				return []
+			}
+		},
+		hbDescLines() {
+			return this.hbParsedRules.map((rule) => this.formatHbRuleDesc(rule)).filter((line) => !!line)
+		},
+		hbGiftAmountText() {
+			const pkg = this.selectedHbPackage
+			if (!pkg) return ''
+			const n = parseFloat(pkg.allHbAmount)
+			if (isNaN(n) || n <= 0) return ''
+			return this.stripMoneyTrailingZeros(n)
+		},
+		showHbRechargeDesc() {
+			return (
+				this.rechargeItemType === 'hb' &&
+				!!this.selectedHbPackage &&
+				(this.hbDescLines.length > 0 || !!this.hbGiftAmountText)
+			)
+		}
 	},
 	onLoad(){
 
@@ -145,6 +188,44 @@ export default {
 	mounted(){
 	},
 	methods: {
+		stripMoneyTrailingZeros(num) {
+			const n = parseFloat(num)
+			if (isNaN(n)) return ''
+			if (Math.abs(n - Math.round(n)) < 1e-9) return String(Math.round(n))
+			return String(n)
+		},
+		formatHbUsableText(rule) {
+			const t = Number(rule.effectiveType)
+			if (t === 2) {
+				const days = parseInt(rule.effectiveDays, 10)
+				if (isNaN(days) || days <= 0) return '立即可用'
+				return `${days}天后可用`
+			}
+			const d = String(rule.effectiveDate || '').trim()
+			if (!d || d === '0000-00-00') return '立即可用'
+			return `${d}后可用`
+		},
+		formatHbValidPeriodText(rule) {
+			const dur = parseInt(rule.duration, 10)
+			if (isNaN(dur) || dur < 0) return ''
+			if (dur === 0) return '永久有效'
+			return `有效期${dur}天`
+		},
+		formatHbRuleDesc(rule) {
+			const hbNum = parseInt(rule.hbNum, 10) || 0
+			const hbAmountStr = this.stripMoneyTrailingZeros(rule.hbAmount)
+			const miniCostStr = this.stripMoneyTrailingZeros(rule.miniCost)
+			if (!hbAmountStr || !miniCostStr) return ''
+			const usable = this.formatHbUsableText(rule)
+			const valid = this.formatHbValidPeriodText(rule)
+			const mid = `${hbNum}个${hbAmountStr}元红包券，满${miniCostStr}元可用`
+			if (usable && valid) {
+				return `${mid}，${usable}、${valid}`
+			}
+			if (usable) return `${mid}，${usable}`
+			if (valid) return `${mid}，${valid}`
+			return mid
+		},
 		getRecharge(item){
 			this.amount = item.amount
 			if (item.allHbAmount) {
@@ -205,9 +286,15 @@ export default {
 					}
 
 					const itemType = res.data.itemType || '';
-					const itemList = res.data.itemList || [];
+					this.rechargeItemType = itemType;
+					const itemList = res.data.itemList || {};
 					if(itemType == 'hb'){
-						let list = itemList.list || [];
+						let list = [];
+						if (Array.isArray(itemList)) {
+							list = itemList;
+						} else if (itemList && Array.isArray(itemList.list)) {
+							list = itemList.list;
+						}
 						let map = new Map();
 						list.forEach(item => {
 							let amount = parseFloat(item.amount);
@@ -224,9 +311,13 @@ export default {
 							return obj;
 						});
 						this.itemList.sort((a, b) => a.amount - b.amount);
+						if (this.itemList.length && (this.amount === '' || this.amount === null || this.amount === undefined)) {
+							this.amount = String(this.itemList[0].amount)
+						}
 					}else if(itemType == 'money'){
 						let map = new Map();
-						(itemList || []).forEach(item => {
+						const moneyRows = Array.isArray(itemList) ? itemList : [];
+						moneyRows.forEach(item => {
 							let recharge = parseFloat(item.recharge);
 							let give = parseFloat(item.give);
 							if (give > 0) {
@@ -242,6 +333,8 @@ export default {
 						});
 						this.itemList.sort((a, b) => a.amount - b.amount);
 					}else{
+						this.rechargeItemType = '';
+						this.itemList = [];
 						//报错提示
 						//this.$msg('数据异常')
 						return false
@@ -328,9 +421,6 @@ export default {
 		},
 		payFail() {
 		},
-		viewHasBill(){
-			this.pageTo({ url:'/pages/settle/list?id='+this.hdId+'&account='+this.account+'&hdId='+this.hdId})
-		},
 		viewBill() {
 			this.pageTo({ url: '/pages/settle/debt?id='+this.hdId+'&account='+this.account+'&hdId='+this.hdId})
 		},
@@ -413,6 +503,31 @@ export default {
 			}
 		}
 	}
+
+	.recharge-desc-wrap {
+		padding: 32upx 36upx 40upx;
+		margin-top: 20upx;
+
+		.recharge-desc-title {
+			font-size: 34upx;
+			font-weight: 600;
+			color: #e53935;
+			margin-bottom: 16upx;
+		}
+
+		.recharge-desc-title + .recharge-desc-line {
+			margin-top: 0;
+		}
+
+		.recharge-desc-line {
+			display: block;
+			font-size: 28upx;
+			color: #e53935;
+			line-height: 1.65;
+			margin-top: 12upx;
+		}
+	}
+
 	.shop-logo-wrap {
 		padding-left: 10upx;
 		@include disFlex(center, center);
@@ -462,17 +577,27 @@ export default {
 					background: linear-gradient(135deg, #e8f5e8 0%, #f0f9f0 100%);
 					border: 2upx solid #4CAF50;
 					
+					.balance-row {
+						display: flex;
+						flex-direction: row;
+						align-items: center;
+						justify-content: space-between;
+					}
+					
 					.balance-label {
-						font-size: 28upx;
+						font-size: 32upx;
 						color: #666;
-						margin-bottom: 8upx;
+						margin-right: 24upx;
+						flex-shrink: 0;
 					}
 					
 					.balance-amount {
-						font-size: 52upx;
+						font-size: 42upx;
 						font-weight: bold;
 						color: #4CAF50;
-						margin-bottom: 20upx;
+						flex: 1;
+						min-width: 0;
+						text-align: right;
 					}
 				}