排版

hdApp/src/admin/recharge/discount.vue

@@ -1,39 +1,108 @@
 <template>
 	<view class="app-content">
-		<view>
-			<view style="background-color: white;padding-bottom:30upx;"></view>
-			<t-table :headerBackgroundColor="'#F0F2F6'">
-				<view>
-					<view v-for="(item, inIndex) in map" :key="inIndex">
-						<t-tr>
-							<t-td align="center" color="info">
-							<view style="font-size:30upx;display: flex;align-items: center;">
-								充值<input v-model="item.recharge" type="digit" style="border:1upx solid #cccccc;color:black;display:inline-block;width:130upx;margin-left:8upx;" @focus="() => clearRecharge(inIndex)" placeholder="" />
-							</view>
-							</t-td>
-							<t-td align="center" color="info">
-								<view style="color:black;font-size:30upx;" v-if="rechargeWeal == 1">
-									升{{ item.name }}
-									<text v-if="hasMemberDiscount == 1">（{{(item.discount*100).toFixed(0)}}折）</text>
-									<text v-else>（无折扣）</text>
+		<!-- 页面头部 -->
+		<view class="page-header">
+			<view class="header-content">
+				<view class="header-icon">
+				</view>
+				<view class="header-text">
+					<view class="header-title">充值赠送配置</view>
+					<view class="header-subtitle">设置不同充值档位的赠送规则</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 主内容区 -->
+		<view class="main-content">
+			<!-- 配置说明 -->
+			<view class="config-intro">
+				<view class="intro-card">
+					<view class="intro-header">
+						<text class="intro-icon">🎯</text>
+						<text class="intro-title">说明</text>
+					</view>
+					<view class="intro-content">
+						<text class="intro-text">为客户设置充值优惠档位，提升用户粘性和充值意愿</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 充值档位列表 -->
+			<view class="tier-list">
+				<view class="tier-item" v-for="(item, inIndex) in map" :key="inIndex">
+					<view class="tier-badge">
+						<text class="tier-number">{{ inIndex + 1 }}</text>
+					</view>
+					<view class="tier-content">
+						<view class="tier-row">
+							<view class="input-section">
+								<view class="input-header">
+									<text class="input-label">充值金额</text>
+									<text class="currency-symbol">¥</text>
 								</view>
-								<view style="font-size:30upx;display: flex;align-items: center;" v-if="rechargeWeal == 2">
-									送<input v-model="item.give" type="digit" style="border:1upx solid #cccccc;color:black;display:inline-block;width:100upx;margin-left:8upx;" @focus="() => clearGive(inIndex)" placeholder="" />
+								<input
+									v-model="item.recharge"
+									type="digit"
+									class="amount-input recharge-input"
+									@focus="() => clearRecharge(inIndex)"
+									placeholder="0"
+								/>
+							</view>
+							
+							<view class="input-section">
+								<view class="input-header">
+									<text class="input-label">赠送金额</text>
+									<text class="currency-symbol">¥</text>
 								</view>
-							</t-td>
-						</t-tr>
+								<input
+									v-model="item.give"
+									type="digit"
+									class="amount-input give-input"
+									@focus="() => clearGive(inIndex)"
+									placeholder="0"
+								/>
+							</view>
+						</view>
+						
+						<!-- 折扣显示 -->
+						<view class="discount-display" v-if="item.recharge && item.give">
+							<text class="discount-text">
+								相当于 {{ getDiscountRate(item.recharge, item.give) }} 折优惠
+							</text>
+						</view>
 					</view>
 				</view>
-			</t-table>
+			</view>
 
-			<view style="margin-top:50upx;text-align: left;padding-left:10px;">
-				<view style="font-size:32upx;">充值金额请按由少到多填写</view>
-				<view style="font-size:32upx;margin-top:15upx;color:red;font-weight:bold;">客户如有欠款未结，充值时不会有赠送，切记！</view>
+			<!-- 重要提示 -->
+			<view class="important-tips">
+				<view class="tips-header">
+					<text class="tips-icon">⚠️</text>
+					<text class="tips-title">重要提示</text>
+				</view>
+				<view class="tips-list">
+					<view class="tip-item">
+						<text class="tip-dot">•</text>
+						<text class="tip-content">请按照金额从小到大的顺序配置档位</text>
+					</view>
+					<view class="tip-item highlight">
+						<text class="tip-dot">•</text>
+						<text class="tip-content">客户有未结清欠款时，充值将不享受赠送优惠</text>
+					</view>
+				</view>
 			</view>
 		</view>
-        <view class="app-footer">
-			<view class="admin-button-com big blue" @click="goBack()">返回上页</view>
-		    <view style="margin-left:60upx;" class="admin-button-com big blue" @click="saveData">提交修改</view>
+
+		<!-- 底部操作区 -->
+		<view class="app-footer">
+			<view class="footer-buttons">
+				<view class="admin-button-com big default" @click="goBack()">
+					返回上页
+				</view>
+				<view class="admin-button-com big blue" @click="saveData">
+					保存配置
+				</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -52,7 +121,6 @@ export default {
 	data() {
 		return {
 			map:[],
-			rechargeWeal:2,
 			hasMemberDiscount:0
 		};
 	},
@@ -79,9 +147,26 @@ export default {
 		clearGive(index){
 			this.$set(this.map[index], 'give', '')
 		},
+		/**
+		 * 计算折扣率
+		 * @param {string|number} recharge 充值金额
+		 * @param {string|number} give 赠送金额
+		 * @returns {string} 折扣率
+		 */
+		getDiscountRate(recharge, give) {
+			const rechargeAmount = parseFloat(recharge) || 0;
+			const giveAmount = parseFloat(give) || 0;
+			
+			if (rechargeAmount <= 0) return '0.0';
+			
+			const totalValue = rechargeAmount + giveAmount;
+			const discountRate = (rechargeAmount / totalValue * 10).toFixed(1);
+			
+			return discountRate;
+		},
 		saveData(){
-			this.$util.confirmModal({content:'确认提交？提交后将不能再修改'},() => {
-				modifyRecharge({data:this.map,rechargeWeal:this.rechargeWeal}).then(res=>{
+			this.$util.confirmModal({content:'确认保存配置？配置生效后将立即应用'},() => {
+				modifyRecharge({data:this.map}).then(res=>{
 					if(res.code == 1){
 						this.$msg(res.msg)
 						setTimeout(function(){
@@ -94,4 +179,344 @@ export default {
 	}
 };
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.app-content {
+	min-height: 100vh;
+	background: linear-gradient(135deg, #f8fffe 0%, #eef7f0 100%);
+	padding-bottom: 140upx;
+}
+
+/* ==== 页面头部 ==== */
+.page-header {
+	background: #fff;
+	padding: 40upx 30upx 35upx;
+	border-bottom: 1upx solid #e8f5e8;
+	
+	.header-content {
+		display: flex;
+		align-items: center;
+		
+		.header-icon {
+			width: 80upx;
+			height: 80upx;
+			background: linear-gradient(45deg, #049E2C, #09C567);
+			border-radius: 20upx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-right: 24upx;
+			box-shadow: 0 4upx 12upx rgba(4, 158, 44, 0.2);
+			
+			.icon-img {
+				width: 40upx;
+				height: 40upx;
+				filter: brightness(0) invert(1);
+			}
+		}
+		
+		.header-text {
+			flex: 1;
+			
+			.header-title {
+				font-size: 40upx;
+				font-weight: 700;
+				color: #1a1a1a;
+				margin-bottom: 8upx;
+			}
+			
+			.header-subtitle {
+				font-size: 26upx;
+				color: #666;
+				line-height: 1.4;
+			}
+		}
+	}
+}
+
+/* ==== 主内容区 ==== */
+.main-content {
+	padding: 30upx;
+}
+
+/* ==== 配置说明 ==== */
+.config-intro {
+	margin-bottom: 30upx;
+	
+	.intro-card {
+		background: linear-gradient(45deg, #049E2C, #09C567);
+		border-radius: 16upx;
+		padding: 24upx 30upx;
+		box-shadow: 0 6upx 20upx rgba(4, 158, 44, 0.15);
+		
+		.intro-header {
+			display: flex;
+			align-items: center;
+			margin-bottom: 16upx;
+			
+			.intro-icon {
+				font-size: 32upx;
+				margin-right: 12upx;
+			}
+			
+			.intro-title {
+				font-size: 32upx;
+				font-weight: 600;
+				color: #fff;
+			}
+		}
+		
+		.intro-content {
+			.intro-text {
+				color: rgba(255, 255, 255, 0.9);
+				font-size: 26upx;
+				line-height: 1.5;
+			}
+		}
+	}
+}
+
+/* ==== 档位列表 ==== */
+.tier-list {
+	.tier-item {
+		background: #fff;
+		border-radius: 16upx;
+		margin-bottom: 24upx;
+		overflow: hidden;
+		box-shadow: 0 4upx 16upx rgba(0, 0, 0, 0.06);
+		border: 1upx solid #e8f5e8;
+		position: relative;
+		
+		.tier-badge {
+			position: absolute;
+			top: 0;
+			right: 0;
+			background: linear-gradient(45deg, #049E2C, #09C567);
+			width: 60upx;
+			height: 60upx;
+			border-radius: 0 16upx 0 60upx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			z-index: 10;
+			
+			.tier-number {
+				color: #fff;
+				font-size: 24upx;
+				font-weight: 700;
+			}
+		}
+		
+		.tier-content {
+			padding: 30upx;
+			padding-top: 40upx;
+			
+			.tier-row {
+				display: flex;
+				align-items: flex-end;
+				justify-content: space-between;
+				gap: 30upx;
+				margin-bottom: 20upx;
+			}
+		}
+	}
+}
+
+/* ==== 输入区域 ==== */
+.input-section {
+	flex: 1;
+	
+	.input-header {
+		display: flex;
+		align-items: baseline;
+		margin-bottom: 12upx;
+		
+		.input-label {
+			font-size: 26upx;
+			color: #666;
+			font-weight: 500;
+			margin-right: 8upx;
+		}
+		
+		.currency-symbol {
+			font-size: 28upx;
+			color: #049E2C;
+			font-weight: 700;
+		}
+	}
+	
+	.amount-input {
+		width: 100%;
+		height: 88upx;
+		border: 2upx solid #e1f4e3;
+		border-radius: 12upx;
+		padding: 0 20upx;
+		font-size: 36upx;
+		font-weight: 600;
+		text-align: center;
+		color: #1a1a1a;
+		background: #fff;
+		transition: all 0.3s ease;
+		
+		&:focus {
+			border-color: #09C567;
+			box-shadow: 0 0 0 6upx rgba(9, 197, 103, 0.1);
+			outline: none;
+		}
+		
+		&.recharge-input:focus {
+			color: #049E2C;
+		}
+		
+		&.give-input:focus {
+			color: #ff6b35;
+		}
+		
+		&::placeholder {
+			color: #bbb;
+			font-weight: 400;
+		}
+	}
+}
+
+
+
+/* ==== 折扣显示 ==== */
+.discount-display {
+	background: linear-gradient(45deg, #ffe5e5, #fff0e5);
+	border-radius: 12upx;
+	padding: 16upx 20upx;
+	text-align: center;
+	border: 1upx solid #ffd0d0;
+	
+	.discount-text {
+		font-size: 26upx;
+		color: #d84315;
+		font-weight: 600;
+	}
+}
+
+/* ==== 重要提示 ==== */
+.important-tips {
+	background: #fff;
+	border-radius: 16upx;
+	padding: 30upx;
+	margin-top: 20upx;
+	border-left: 6upx solid #ff6b35;
+	box-shadow: 0 4upx 16upx rgba(0, 0, 0, 0.06);
+	
+	.tips-header {
+		display: flex;
+		align-items: center;
+		margin-bottom: 20upx;
+		
+		.tips-icon {
+			font-size: 32upx;
+			margin-right: 12upx;
+		}
+		
+		.tips-title {
+			font-size: 32upx;
+			font-weight: 600;
+			color: #333;
+		}
+	}
+	
+	.tips-list {
+		.tip-item {
+			display: flex;
+			align-items: flex-start;
+			margin-bottom: 16upx;
+			
+			&:last-child {
+				margin-bottom: 0;
+			}
+			
+			.tip-dot {
+				color: #049E2C;
+				font-size: 28upx;
+				font-weight: bold;
+				margin-right: 12upx;
+				line-height: 1.2;
+				margin-top: 2upx;
+			}
+			
+			.tip-content {
+				flex: 1;
+				font-size: 26upx;
+				line-height: 1.5;
+				color: #555;
+			}
+			
+			&.highlight .tip-content {
+				color: #d84315;
+				font-weight: 600;
+			}
+		}
+	}
+}
+
+/* ==== 底部操作区 ==== */
+.app-footer {
+	.footer-buttons {
+		display: flex;
+		align-items: center;
+		gap: 30upx;
+		
+		.admin-button-com {
+			flex: 1;
+		}
+	}
+}
+
+/* ==== 响应式设计 ==== */
+@media screen and (max-width: 450px) {
+	.tier-row {
+		flex-direction: column !important;
+		align-items: stretch !important;
+		gap: 20upx;
+		
+		.input-section {
+			width: 100%;
+		}
+	}
+}
+
+/* ==== 动画效果 ==== */
+.tier-item {
+	animation: slideInUp 0.6s ease-out;
+	animation-fill-mode: both;
+	
+	&:nth-child(1) { animation-delay: 0.1s; }
+	&:nth-child(2) { animation-delay: 0.2s; }
+	&:nth-child(3) { animation-delay: 0.3s; }
+	&:nth-child(4) { animation-delay: 0.4s; }
+	&:nth-child(5) { animation-delay: 0.5s; }
+}
+
+@keyframes slideInUp {
+	from {
+		opacity: 0;
+		transform: translateY(30upx);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.amount-input:focus {
+	animation: inputFocus 0.3s ease-out;
+}
+
+@keyframes inputFocus {
+	0% {
+		transform: scale(1);
+	}
+	50% {
+		transform: scale(1.02);
+	}
+	100% {
+		transform: scale(1);
+	}
+}
+</style>

hdApp/src/pages.json

@@ -355,7 +355,7 @@
 			"pages": [
 				{ "path": "renew", "style": { "navigationBarTitleText": "免费续期"}},
 				{ "path": "rechargeSuccess", "style": { "navigationBarTitleText": "免费续期"}},
-				{ "path": "discount", "style": { "navigationBarTitleText": "充值优惠"}},
+				{ "path": "discount", "style": { "navigationBarTitleText": "充值规则"}},
 				{ "path": "rechargeCode", "style": { "navigationBarTitleText": "充值码"}}
 			]
 		},