1. hdApp-设置与保存备注说明（展示给客户的充值说明） 2. mallApp-添加展示（充值）备注说明

hdApp/src/admin/recharge/rechargeSetting.vue

@@ -66,6 +66,17 @@
 				</view>
 
 				<view class="section-card">
+					<view class="remark-block">
+						<view class="block-label">备注说明</view>
+						<textarea
+							v-model="form.rechargeRemark"
+							class="remark-textarea"
+							:style="remarkTextareaBoxStyle"
+							maxlength="200"
+							placeholder="请输入会展示给客户的充值说明"
+						/>
+						<view class="remark-count">{{ form.rechargeRemark.length }}/200</view>
+					</view>
 					<view class="block-label">红包规则</view>
 					<view class="hb-list-wrap">
 						<block v-if="!$util.isEmpty(list.data)">
@@ -103,6 +114,19 @@
 
 			<!-- 送钱：说明 + 档位表格 -->
 			<block v-if="form.rechargeRule == 1">
+				<view class="section-card">
+					<view class="remark-block">
+						<view class="block-label">备注说明</view>
+						<textarea
+							v-model="form.rechargeRemark"
+							class="remark-textarea"
+							:style="remarkTextareaBoxStyle"
+							maxlength="200"
+							placeholder="请输入会展示给客户的充值说明"
+						/>
+						<view class="remark-count">{{ form.rechargeRemark.length }}/200</view>
+					</view>
+				</view>
 				<view class="block-label top-label">送钱规则</view>
 				<view class="config-intro">
 					<view class="intro-card">
@@ -190,11 +214,23 @@ export default {
 				isVipMember: 0,
 				vipAmount: '',
 				rechargeRule: 0, // 0:无赠送, 1:送钱, 2:送红包
-				hbPayable: 0 // 0:不可用, 1:可用
+				hbPayable: 0, // 0:不可用, 1:可用
+				rechargeRemark: ''
 			},
 			map: [] // 送钱档位列表
 		};
 	},
+	computed: {
+		// 小程序 textarea 为原生组件，scoped 样式里的高度常不生效，需内联固定高度（约为常见默认高度的 1/2）
+		remarkTextareaBoxStyle() {
+			return {
+				height: '220upx',
+				minHeight: '220upx',
+				width: '100%',
+				boxSizing: 'border-box'
+			};
+		}
+	},
 	onLoad() {
 		this.loadSetting();
 	},
@@ -231,6 +267,7 @@ export default {
 					this.form.vipAmount = d.vipAmount != null ? (d.vipAmount == "-1.00" ? '' : d.vipAmount) : '';
 					this.form.rechargeRule = Number(d.rechargeRule) || 0;
 					this.form.hbPayable = Number(d.hbPayable) || 0;
+					this.form.rechargeRemark = d.rechargeRemark || '';
 
 					if (this.form.rechargeRule == 2) {
 						this.resetList();
@@ -362,7 +399,8 @@ export default {
 				isVipMember: this.form.isVipMember,
 				vipAmount: this.form.isVipMember == 1 ? this.form.vipAmount : '',
 				rechargeRule: this.form.rechargeRule,
-				hbPayable: this.form.rechargeRule == 2 ? this.form.hbPayable : 0
+				hbPayable: this.form.rechargeRule == 2 ? this.form.hbPayable : 0,
+				rechargeRemark: this.form.rechargeRemark
 			};
 			this.$util.confirmModal({ content: '确认保存设置？' }, () => {
 				saveRechargeSetting(payload).then(res => {
@@ -474,6 +512,33 @@ export default {
 	background: #fff;
 }
 
+.remark-block {
+	position: relative;
+	padding-bottom: 18upx;
+}
+
+.remark-textarea {
+	width: 100%;
+	height: 220upx;
+	min-height: 220upx;
+	box-sizing: border-box;
+	border: 1upx solid #ddd;
+	border-radius: 8upx;
+	padding: 18upx 20upx 42upx;
+	font-size: 28upx;
+	line-height: 1.5;
+	color: #333;
+	background: #fff;
+}
+
+.remark-count {
+	position: absolute;
+	right: 18upx;
+	bottom: 30upx;
+	font-size: 24upx;
+	color: #999;
+}
+
 /* ==== 红包规则列表 ==== */
 .hb-list-wrap {
 	background-color: #fff;

mallApp/src/pages/member/recharge.vue

@@ -57,13 +57,13 @@
 				</view>
 			</view>
 
-			<view class="module-com recharge-desc-wrap" v-if="showHbRechargeDesc">
+			<view class="module-com recharge-desc-wrap" v-if="showRechargeDesc">
 				<view class="recharge-desc-title">充值说明</view>
-				<text class="recharge-desc-line">单客户1天只能使用一个红包</text>
+				<text class="recharge-desc-line" v-if="rechargeRemark">{{ rechargeRemark }}</text>
 				<text
 					class="recharge-desc-line"
 					v-for="(line, idx) in hbDescLines"
-					:key="'hb-rule-' + idx"
+					:key="idx"
 				>{{ line }}</text>
 				<text class="recharge-desc-line" v-if="hbGiftAmountText">总共赠送{{ hbGiftAmountText }}元</text>
 			</view>
@@ -118,7 +118,8 @@ export default {
 			// 防重复请求相关
 			lastSelectWelfareTime: 0,
 			itemList: [],
-			rechargeItemType: ''
+			rechargeItemType: '',
+			rechargeRemark: ''
 		}
 	},
 	watch: {
@@ -174,6 +175,9 @@ export default {
 				!!this.selectedHbPackage &&
 				(this.hbDescLines.length > 0 || !!this.hbGiftAmountText)
 			)
+		},
+		showRechargeDesc() {
+			return !!this.rechargeRemark || this.showHbRechargeDesc
 		}
 	},
 	onLoad(){
@@ -287,6 +291,7 @@ export default {
 
 					const itemType = res.data.itemType || '';
 					this.rechargeItemType = itemType;
+					this.rechargeRemark = res.data.rechargeRemark || '';
 					const itemList = res.data.itemList || {};
 					if(itemType == 'hb'){
 						let list = [];
@@ -525,6 +530,8 @@ export default {
 			color: #e53935;
 			line-height: 1.65;
 			margin-top: 12upx;
+			white-space: pre-line;
+			word-break: break-word;
 		}
 	}
 
@@ -968,4 +975,4 @@ export default {
 		}
 	}
 }
-</style>
+</style>