售后页面优化

ghsApp/src/pagesOrder/refund.vue

@@ -1,112 +1,200 @@
 <template>
-	<view class="app-content">
-		<view class="flex refund-item">
-			<view class="refund-label">退款方式：</view>
-			<view class="flex list">
-				<view class="flex" @tap="refundType=1" >
-					<view class="flex-center radioBtn" :class="refundType==1?'active':''">
-					</view>退货并退款</view>
-				<view style="margin-left: 30upx" class="flex" @tap="refundType=2">
-					<view class="flex-center radioBtn" :class="refundType==1?'':'active'">
-						</view>只退款</view>
+	<view class="refund-page">
+		<!-- 红色提示信息 - 待结账单 -->
+		<view class="warning-tip" v-if="!$util.isEmpty(unClear)" @click="goClear(unClear)">
+			<view class="warning-icon">⚠</view>
+			<view class="warning-content">
+				<text class="warning-text">有待结账单</text>
+				<text class="warning-amount">¥{{unClear.actPrice?parseFloat(unClear.actPrice):0}}</text>
 			</view>
+			<text class="warning-action">查看</text>
 		</view>
-		<view class="refund-item-list" v-if="refundType==1">
-			<view class="refund-label"><text></text>选择商品：</view>
-			<view>
-				<view class="list" v-for="(res,i) in product" :key="i">
-				<view class="flex list-title" >
-					<text class="product-name">{{res.name}}</text>
-					<text class="product-num">{{ `${parseFloat(res.xhNum)}` }}{{res.xhUnitName}}</text>
-					<text class="product-price">{{`${parseFloat(res.xhUnitPrice)}`}}元/{{res.xhUnitName}}</text>
-				</view>
-				<view class="flex list-val" style="font-size:26upx;font-weight:bold;">
-					<input type="number" placeholder="退货数" v-model="res.refundCount" placeholder-style="color:#CCCCCC" style="height:60upx;width:160upx;" />
-					<text style="margin-left:10upx;">{{res.xhUnitName}}</text>
-					<text style="color:green;margin-left:20upx;">可退{{Number(res.xhNum)-Number(res.refundNum)}}{{res.xhUnitName}}</text>
-				</view>
+
+		<!-- 退款方式选择卡片 -->
+		<view class="card-section">
+			<view class="section-title">
+				<text class="title-text">退款方式</text>
+			</view>
+			<view class="refund-type-buttons">
+				<button 
+					class="type-button" 
+					:class="refundType==1?'active':''" 
+					@tap="refundType=1">
+					退货并退款
+				</button>
+				<button 
+					class="type-button" 
+					:class="refundType==2?'active':''" 
+					@tap="refundType=2">
+					只退款
+				</button>
+			</view>
+		</view>
+
+		<!-- 商品选择卡片 -->
+		<view class="card-section" v-if="refundType==1">
+			<view class="section-title">
+				<text class="title-text">选择商品</text>
 			</view>
+			<view class="product-list">
+				<view class="product-row" v-for="(res,i) in product" :key="i">
+					<view class="product-basic-info">
+						<text class="product-name">{{res.name}}</text>
+						<view class="product-meta">
+							<text class="stock-info">{{parseFloat(res.xhNum)}}{{res.xhUnitName}} X ¥{{parseFloat(res.xhUnitPrice)}}</text>
+							<text class="available-info">可退 {{Number(res.xhNum)-Number(res.refundNum)}}{{res.xhUnitName}}</text>
+						</view>
+					</view>
+					<view class="refund-control">
+						<view class="input-item">
+							<input 
+								class="refund-input" 
+								type="number" 
+								placeholder="0" 
+								v-model="res.refundCount" 
+								placeholder-style="color:#ccc" />
+							<text class="unit-label">{{res.xhUnitName}}</text>
+						</view>
+					</view>
+				</view>
 			</view>
 		</view>
-		<view class="refund-item-list" v-if="Number(orderInfo.packCost)>0||Number(orderInfo.sendCost)>0">
-			<view class="refund-label"><text></text>其他可退：</view>
-			<view>
-				<view class="list" v-if="Number(orderInfo.packCost)>0">
-					<view class="flex list-title" >
-						<text class="product-name">打包费</text>
-						<text class="product-num">{{ orderInfo.packCost?parseFloat(orderInfo.packCost):0 }}元</text>
 
+		<!-- 其他可退卡片 -->
+		<view class="card-section" v-if="Number(orderInfo.packCost)>0||Number(orderInfo.sendCost)>0">
+			<view class="section-title">
+				<text class="title-text">其他可退</text>
+			</view>
+			<view class="other-fee-list">
+				<view class="fee-row" v-if="Number(orderInfo.packCost)>0">
+					<view class="fee-info">
+						<text class="fee-name">打包费</text>
+						<text class="fee-amount">{{ orderInfo.packCost?parseFloat(orderInfo.packCost):0 }}元</text>
 					</view>
-					<view class="flex list-val" style="font-size:26upx;font-weight:bold;">
-						<input type="digit" placeholder="金额" v-model="orderInfo.refundPackCostAmount" placeholder-style="color:#CCCCCC" />
-						<text style="margin-left:10upx;">元</text>
-						<text style="color:green;margin-left:20upx;">可退{{parseFloat((Number(orderInfo.packCost)-Number(orderInfo.refundPackCost)).toFixed(2))}}元</text>
+					<view class="fee-control">
+						<view class="input-item">
+							<input 
+								class="refund-input" 
+								type="digit" 
+								placeholder="0.00" 
+								v-model="orderInfo.refundPackCostAmount" 
+								placeholder-style="color:#ccc" />
+							<text class="unit-label">元</text>
+						</view>
+						<text class="available-fee">可退{{parseFloat((Number(orderInfo.packCost)-Number(orderInfo.refundPackCost)).toFixed(2))}}元</text>
 					</view>
 				</view>
-				<view class="list" v-if="Number(orderInfo.sendCost)>0">
-					<view class="flex list-title" >
-						<text class="product-name">运费</text>
-						<text class="product-num">{{ orderInfo.sendCost?parseFloat(orderInfo.sendCost):0 }}元</text>
+				<view class="fee-row" v-if="Number(orderInfo.sendCost)>0">
+					<view class="fee-info">
+						<text class="fee-name">运费</text>
+						<text class="fee-amount">{{ orderInfo.sendCost?parseFloat(orderInfo.sendCost):0 }}元</text>
 					</view>
-					<view class="flex list-val" style="font-size:26upx;font-weight:bold;">
-						<input type="digit" placeholder="金额" v-model="orderInfo.refundSendCostAmount" placeholder-style="color:#CCCCCC" />
-						<text style="margin-left:10upx;">元</text>
-						<text style="color:green;margin-left:20upx;">可退{{parseFloat((Number(orderInfo.sendCost)-Number(orderInfo.refundSendCost)).toFixed(2))}}元</text>
+					<view class="fee-control">
+						<view class="input-item">
+							<input 
+								class="refund-input" 
+								type="digit" 
+								placeholder="0.00" 
+								v-model="orderInfo.refundSendCostAmount" 
+								placeholder-style="color:#ccc" />
+							<text class="unit-label">元</text>
+						</view>
+						<text class="available-fee">可退{{parseFloat((Number(orderInfo.sendCost)-Number(orderInfo.refundSendCost)).toFixed(2))}}元</text>
 					</view>
 				</view>
 			</view>
 		</view>
-		<view class="flex refund-item">
-			<view class="refund-label">退款原因：</view>
-			<view class="flex list">
-				<view class="flex" @tap="cause=0" >
-					<view class="flex-center radioBtn" :class="cause==0? 'active' : ''">
-					</view>质量问题</view>
-				<view style="margin-left: 30upx" class="flex" @tap="cause=1">
-					<view class="flex-center radioBtn" :class="cause==1 ? 'active' : ''">
-				</view>多开错开</view></view>
-		</view>
-		<view class="flex refund-item">
-			<view class="refund-label">订单金额：</view>
-			<view class="list">
-				<block>￥{{orderInfo.orderPrice ? parseFloat(orderInfo.orderPrice):0}}</block>
-				<text style="margin-left:25upx;font-size:25upx;color:green;" v-if="Number(orderInfo.tkPrice)>0">已退￥{{orderInfo.tkPrice ? parseFloat(orderInfo.tkPrice) : 0}}</text>
+
+		<!-- 金额信息卡片 -->
+		<view class="card-section">
+			<view class="section-title">
+				<text class="title-text">金额信息</text>
+			</view>
+			<view class="amount-info">
+				<view class="amount-row">
+					<text class="amount-label">订单金额</text>
+					<view class="amount-value">
+						<text class="price-text">¥{{parseFloat(orderInfo.orderPrice)||0}}</text>
+					</view>
+				</view>
+				<view class="amount-row" v-if="Number(orderInfo.tkPrice)>0">
+					<text class="amount-label">已退金额</text>
+					<view class="amount-value">
+						<text class="refunded-text">¥{{orderInfo.tkPrice ? parseFloat(orderInfo.tkPrice) : 0}}</text>
+					</view>
+				</view>
+				<view class="amount-row">
+					<text class="amount-label">可退金额</text>
+					<text class="amount-value available-amount">¥{{couldRefundPrice}}</text>
+				</view>
+				<view class="amount-row">
+					<text class="amount-label">预计退款</text>
+					<text class="amount-value estimate-amount">¥{{refundPrice}}</text>
+				</view>
+				<view class="amount-row input-row">
+					<text class="amount-label required">实际退款</text>
+					<view class="amount-input-wrapper">
+						<text class="currency-symbol">¥</text>
+						<input 
+							class="amount-input" 
+							type="digit" 
+							v-model="refundMoney" 
+							placeholder="请输入"
+							placeholder-style="color:#999"
+							@focus="refundMoney=''" />
+					</view>
+				</view>
 			</view>
 		</view>
-		<view class="flex refund-item">
-			<view class="refund-label">可退金额：</view>
-			<view class="list">￥{{couldRefundPrice}}</view>
-		</view>
-		<view class="flex refund-item">
-			<view class="refund-label">预计退款：</view>
-			<view class="list">￥{{refundPrice}}</view>
-		</view>
-		<view class="flex refund-item">
-			<view class="refund-label"><text></text>实际退款：</view>
-			<input type="digit" v-model="refundMoney" @focus="refundMoney=''">
+
+		<!-- 退款原因卡片 -->
+		<view class="card-section">
+			<view class="section-title">
+				<text class="title-text">退款原因</text>
+			</view>
+			<view class="refund-reason-buttons">
+				<button 
+					class="reason-button" 
+					:class="cause==0?'active':''" 
+					@tap="cause=0">
+					质量问题
+				</button>
+				<button 
+					class="reason-button" 
+					:class="cause==1?'active':''" 
+					@tap="cause=1">
+					多开错开
+				</button>
+			</view>
 		</view>
-		<view class="refund-item">
-			<view class="refund-label">备注：</view>
-			<textarea v-model="remark" />
+
+		<!-- 备注卡片 -->
+		<view class="card-section">
+			<view class="section-title">
+				<text class="title-text">备注</text>
+			</view>
+			<view class="remark-container">
+				<textarea 
+					class="remark-textarea" 
+					v-model="remark" 
+					placeholder="选填"
+					placeholder-style="color:#999" />
+			</view>
 		</view>
-		<view style="padding:20upx 0 20upx 0;font-size:30upx;font-weight:bold;">
-			<text v-if="orderInfo.onlinePay == 2" style="color:green;">此单线上付款，提交后，钱会原路自动退回给客户</text>
+
+		<!-- 提示信息 -->
+		<view class="tip-section">
+			<text v-if="orderInfo.onlinePay == 2" class="tip-text online-tip">此单线上付款，提交后，钱会原路自动退回给客户</text>
 			<block v-else>
-				<text v-if="Number(orderInfo.debtPrice)>0" style="color:#3385ff;">
-				此单为欠款单，提交后，欠款金额会自动减少
-				</text>
-				<text v-else style="color:red;">此单线下付款，提交后钱不会原路退回，请线下转账给客户</text>
+				<text v-if="Number(orderInfo.debtPrice)>0" class="tip-text debt-tip">此单为欠款单，提交后，欠款金额会自动减少</text>
+				<text v-else class="tip-text offline-tip">此单线下付款，提交后钱不会原路退回，请线下转账给客户</text>
 			</block>
 		</view>
-		<view class="flex-center btn-box" style="margin-bottom:50upx;margin-top:20upx;padding-bottom:10upx;">
-			<view class="flex-center btn" @tap="cancelRefund">取消</view>
-			<view class="flex-center btn active" @tap="confirmRefund" style="margin-left: 80upx">确定</view>
-		</view>
 
-		<view style="font-size:32upx;z-index:9999;color:red;text-align:center;font-weight:bold;margin-bottom:30upx;" 
-		v-if="!$util.isEmpty(unClear)" @click="goClear(unClear)">
-			<text>有一个待结账单 ¥{{unClear.actPrice?parseFloat(unClear.actPrice):0}}</text>
-			<text style="font-weight:bold;margin-left:15upx;">查看</text>
+		<!-- 底部操作按钮 -->
+		<view class="bottom-actions">
+			<button class="action-btn cancel-btn" @tap="cancelRefund">取消</button>
+			<button class="action-btn confirm-btn" @tap="confirmRefund">确定</button>
 		</view>
 
 	</view>
@@ -297,115 +385,483 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-	.app-content{
-		height: calc(100vh - 30upx * 2);
-		padding: 30upx;
-		background: #FFFFFF;
+.refund-page {
+	min-height: 100vh;
+	background: #f5f6f8;
+	padding: 20upx 0 200upx;
+}
+
+// 红色提示样式
+.warning-tip {
+	background: #fff2f0;
+	border: 1upx solid #ffccc7;
+	border-radius: 12upx;
+	margin: 20upx 20upx 20upx 20upx;
+	padding: 20upx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 15upx;
+	
+	.warning-icon {
+		font-size: 40upx;
+		color: #ff4757;
+		font-weight: bold;
+		line-height: 1;
+		min-width: 50upx;
+	}
+	
+	.warning-content {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		gap: 8upx;
+	}
+	
+	.warning-text {
+		font-size: 28upx;
+		color: #ff4757;
+		font-weight: 600;
+	}
+	
+	.warning-amount {
+		font-size: 32upx;
+		color: #ff4757;
+		font-weight: bold;
+	}
+	
+	.warning-action {
+		font-size: 26upx;
+		color: #ff4757;
+		font-weight: 600;
+		background: rgba(255, 71, 87, 0.1);
+		padding: 10upx 20upx;
+		border-radius: 6upx;
+		min-width: 60upx;
+		text-align: center;
+	}
+}
+
+// 卡片样式
+.card-section {
+	background: #fff;
+	margin: 0 20upx 20upx;
+	border-radius: 16upx;
+	box-shadow: 0 2upx 12upx rgba(0, 0, 0, 0.08);
+	overflow: hidden;
+}
+
+// 节标题
+.section-title {
+	padding: 30upx 30upx 20upx;
+	border-bottom: 1upx solid #f0f0f0;
+	display: flex;
+	align-items: center;
+	
+	.title-text {
+		font-size: 32upx;
+		font-weight: 600;
+		color: #333;
+	}
+}
+
+// 退款方式按钮
+.refund-type-buttons {
+	padding: 30upx 30upx 20upx;
+	display: flex;
+	gap: 30upx;
+	
+	.type-button {
+		flex: 1;
+		height: 80upx;
+		border-radius: 12upx;
 		font-size: 30upx;
-		.radioBtn{
-			width: 30upx;
-			height: 30upx;
-			margin-right: 10upx;
-			border: 1upx solid #ddd;
-			border-radius: 50%;
-			&.active{
-				position: relative;
-				border: 1upx solid #3385ff;
-				&:after{
-					content: '';
-					position: absolute;
-					width: 18upx;
-					height: 18upx;
-					background: #3385ff;
-					border-radius: 50%;
-				}
-			}
+		font-weight: 500;
+		border: 1upx solid #ddd;
+		background: #f8f9fa;
+		color: #666;
+		transition: all 0.3s ease;
+		
+		&.active {
+			background: linear-gradient(135deg, #3385ff 0%, #2b74e6 100%);
+			color: #fff;
+			border: none;
+			box-shadow: 0 4upx 12upx rgba(51, 133, 255, 0.3);
 		}
-		.refund-item-list{
-			display: flex;
-			padding-bottom: 30upx;
-			padding-top: 30upx;
-			border-top: 1upx solid #e6e4e4;
-			border-bottom: 1upx solid #e6e4e4;
-			.refund-label{
-				width: 200upx;
-				color:#666666;
-				font-size:26upx;
-				text{color: red;}
-			}
-			.list{
-				margin-bottom:18upx;
-				border-bottom:1upx solid #CCCCCC;
-				padding-bottom:14upx;
-				.list-title{
-					height: 60upx;
-					padding-bottom: 20upx;
-					font-size:26upx;
-					font-weight:bold;
-					.product-name{
-						overflow: hidden;
-						text-overflow:ellipsis;
-						white-space: nowrap;
-						width:190upx;
-					}
-					.product-price{
-						overflow: hidden;
-						text-overflow:ellipsis;
-						white-space: nowrap;
-						width:130upx;
-						margin-left:10upx;
-					}
-					.product-num{
-						width:90upx;
-						overflow: hidden;
-						text-overflow:ellipsis;
-						white-space: nowrap;
-						margin-left:10upx;
-					}
-				}
-				.list-val{
-					input{
-						width: 200upx;
-						border: 1upx solid #ddd;
-						text-align: center;
-						font-weight: normal;
-					}
-				}
-			}
+		
+		&:active:not(.active) {
+			background: #eff5f8;
 		}
-		.refund-item{
+	}
+}
+
+// 商品列表
+.product-list {
+	margin-top: 15upx;
+	padding: 0 20upx 20upx;
+}
+
+.product-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 20upx;
+	margin-bottom: 8upx;
+	background: #fafbfc;
+	border-radius: 8upx;
+	border: 1upx solid #eef0f2;
+	
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
+
+.product-basic-info {
+	flex: 1;
+	margin-right: 20upx;
+	
+	.product-name {
+		font-size: 32upx;
+		font-weight: 600;
+		color: #333;
+		line-height: 1.3;
+		display: block;
+		margin-bottom: 8upx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		width: 300upx;
+	}
+	
+	.product-meta {
+		display: flex;
+		gap: 12upx;
+		flex-wrap: wrap;
+		
+		.stock-info {
+			font-size: 26upx;
+			color: #666;
+			background: #f5f5f5;
+			padding: 4upx 8upx;
+			border-radius: 4upx;
+		}
+		
+		.available-info {
+			font-size: 26upx;
+			color: #3385ff;
+			background: rgba(51, 133, 255, 0.1);
+			padding: 4upx 8upx;
+			border-radius: 4upx;
+		}
+	}
+}
+
+.refund-control {
+	display: flex;
+	align-items: center;
+	gap: 8upx;
+	
+	.input-item {
+		display: flex;
+		align-items: center;
+		gap: 8upx;
+	}
+}
+
+.refund-input {
+	width: 100upx;
+	height: 60upx;
+	background: #fff;
+	border: 1upx solid #ddd;
+	border-radius: 6upx;
+	text-align: center;
+	font-size: 26upx;
+	color: #333;
+	font-weight: 500;
+	
+	&:focus {
+		border-color: #3385ff;
+	}
+}
+
+.unit-label {
+	font-size: 24upx;
+	color: #666;
+	min-width: 40upx;
+}
+
+// 其他可退列表
+.other-fee-list {
+	padding: 20upx;
+}
+
+.fee-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 16upx;
+	margin-bottom: 12upx;
+	background: #fafbfc;
+	border-radius: 8upx;
+	
+	&:last-child {
+		margin-bottom: 0;
+	}
+	
+	.fee-info {
+		display: flex;
+		flex-direction: column;
+		gap: 8upx;
+		
+		.fee-name {
+			font-size: 28upx;
+			font-weight: 600;
+			color: #333;
+		}
+		
+		.fee-amount {
+			font-size: 24upx;
+			color: #666;
+		}
+	}
+	
+	.fee-control {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-end;
+		gap: 8upx;
+		
+		.input-item {
 			display: flex;
-			padding: 18upx 0;
-			.refund-label{
-				width: 200upx;
-				color:#666666;
-				font-size:26upx;
-				text{
-					color: red;
-				}
-			}
-			input{
-				border: 1upx solid #ddd;
-			}
-			textarea{
-				width: calc(100% - 210upx);
-				height:150upx;
-				border: 1upx solid #ddd;
-			}
+			align-items: center;
+			gap: 8upx;
 		}
-		.btn-box{
-			.btn{
-				width: 220upx;
-				height: 90upx;
-				border: 1upx solid #666666;
-				border-radius: 10upx;
-				color:#666666;
-				&.active{
-					background: #3385ff;
-					color: #fff;
-					border: 1upx solid #3385ff;
-				}
-			}
+		
+		.available-fee {
+			font-size: 24upx;
+			color: #3385ff;
+		}
+	}
+}
+
+// 金额信息
+.amount-info {
+	padding: 30upx;
+}
+
+.amount-row {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 20upx 0;
+	border-bottom: 1upx solid #f0f0f0;
+	
+	&:last-child {
+		border-bottom: none;
+	}
+	
+	&.input-row {
+		align-items: flex-start;
+		padding-top: 30upx;
+	}
+	
+	.amount-label {
+		font-size: 28upx;
+		color: #666;
+		
+		&.required::after {
+			content: "*";
+			color: #ff4757;
+			margin-left: 5upx;
+		}
+	}
+	
+	.amount-value {
+		display: flex;
+		align-items: center;
+		
+		.price-text {
+			font-size: 32upx;
+			font-weight: 600;
+			color: #333;
+		}
+		
+		.refunded-text {
+			font-size: 32upx;
+			font-weight: 600;
+			color: #999;
+		}
+		
+		&.available-amount {
+			font-size: 32upx;
+			font-weight: 600;
+			color: #3385ff;
+		}
+		
+		&.estimate-amount {
+			font-size: 32upx;
+			font-weight: 600;
+			color: #3385ff;
+		}
+	}
+}
+
+.amount-input-wrapper {
+	display: flex;
+	align-items: center;
+	background: #fafbfc;
+	border: 1upx solid #ddd;
+	border-radius: 8upx;
+	padding: 0 20upx;
+	width: 200upx;
+	height: 80upx;
+	
+	.currency-symbol {
+		font-size: 28upx;
+		color: #666;
+		margin-right: 10upx;
+	}
+	
+	.amount-input {
+		flex: 1;
+		height: 80upx;
+		font-size: 28upx;
+		color: #333;
+		font-weight: 500;
+		border: none;
+		background: transparent;
+	}
+}
+
+// 退款原因按钮
+.refund-reason-buttons {
+	padding: 30upx 30upx 20upx;
+	display: flex;
+	gap: 30upx;
+	
+	.reason-button {
+		flex: 1;
+		height: 80upx;
+		border-radius: 12upx;
+		font-size: 30upx;
+		font-weight: 500;
+		border: 1upx solid #ddd;
+		background: #f8f9fa;
+		color: #666;
+		transition: all 0.3s ease;
+		
+		&.active {
+			background: #e3f2fd;
+			color: #3385ff;
+			border: 1upx solid #3385ff;
+		}
+		
+		&:active:not(.active) {
+			background: #eff5f8;
+		}
+	}
+}
+
+// 备注输入框
+.remark-container {
+	padding: 20upx 30upx 30upx;
+}
+
+.remark-textarea {
+	width: 100%;
+	height: 120upx;
+	background: #fafbfc;
+	border: 1upx solid #ddd;
+	border-radius: 8upx;
+	padding: 15upx;
+	font-size: 28upx;
+	color: #333;
+	line-height: 1.2;
+	box-sizing: border-box;
+	resize: none;
+}
+
+// 提示信息
+.tip-section {
+	margin: 20upx;
+	padding: 20upx;
+	border-radius: 12upx;
+	
+	.tip-text {
+		display: block;
+		font-size: 28upx;
+		line-height: 1.5;
+		font-weight: 600;
+		
+		&.online-tip {
+			background: rgba(51, 133, 255, 0.1);
+			color: #3385ff;
+			padding: 15upx;
+			border-radius: 8upx;
+			border-left: 4upx solid #3385ff;
+		}
+		
+		&.debt-tip {
+			background: rgba(51, 133, 255, 0.1);
+			color: #3385ff;
+			padding: 15upx;
+			border-radius: 8upx;
+			border-left: 4upx solid #3385ff;
+		}
+		
+		&.offline-tip {
+			background: rgba(255, 71, 87, 0.1);
+			color: #ff4757;
+			padding: 15upx;
+			border-radius: 8upx;
+			border-left: 4upx solid #ff4757;
+		}
+	}
+}
+
+// 底部操作按钮
+.bottom-actions {
+	z-index: 39;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background: #fff;
+	padding: 30upx;
+	border-top: 1upx solid #eee;
+	display: flex;
+	gap: 30upx;
+	box-shadow: 0 -4upx 12upx rgba(0, 0, 0, 0.1);
+}
+
+.action-btn {
+	flex: 1;
+	height: 88upx;
+	border-radius: 12upx;
+	font-size: 32upx;
+	font-weight: 600;
+	border: none;
+	transition: all 0.3s ease;
+	
+	&.cancel-btn {
+		background: #f8f9fa;
+		color: #666;
+		border: 1upx solid #ddd;
+		
+		&:active {
+			background: #e9ecef;
+		}
+	}
+	
+	&.confirm-btn {
+		background: linear-gradient(135deg, #3385ff 0%, #2b74e6 100%);
+		color: #fff;
+		box-shadow: 0 4upx 12upx rgba(51, 133, 255, 0.3);
+		
+		&:active {
+			transform: translateY(2upx);
+			box-shadow: 0 2upx 8upx rgba(51, 133, 255, 0.3);
 		}
 	}
+}
 </style>

hdApp/src/admin/member/level.vue

@@ -60,8 +60,8 @@
 
 		<!-- 底部按钮 -->
 		<view class="app-footer">
-			<view class="admin-button-com big default" @click="goBack()">返回上页</view>
-			<view style="margin-left:50rpx;" class="admin-button-com big blue" @click="saveData">提交修改</view>
+			<view class="footer-btn admin-button-com big default" @click="goBack()">返回上页</view>
+			<view class="footer-btn admin-button-com big blue" @click="saveData">提交修改</view>
 		</view>
 	</view>
 </template>
@@ -409,7 +409,14 @@ export default {
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	gap: 30rpx;
 	min-height: 120rpx;
+	flex-wrap: wrap;
+}
+
+.footer-btn {
+	flex: 0 1 calc(50% - 15rpx);
+	min-width: 150rpx;
 }
 
 
@@ -439,9 +446,11 @@ export default {
 	
 	.app-footer {
 		padding: 30rpx 20rpx 35rpx;
-		flex-direction: column;
 		gap: 16rpx;
-		min-height: 140rpx;
+	}
+	
+	.footer-btn {
+		flex: 0 1 calc(50% - 8rpx);
 	}
 }