From 863a34f74ced5e9adf1cad6da45bd5ad5c566632 Mon Sep 17 00:00:00 2001
From: luo <luo@qq.com>
Date: Wed, 29 Jul 2026 17:49:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8F=AA=E8=A6=81=E4=BB=BB=E6=84=8F?=
 =?UTF-8?q?=E4=B8=80=E5=BC=A0=E5=AE=9E=E5=90=8D=E4=BA=86=E5=B0=B1=E5=8F=AF?=
 =?UTF-8?q?=E4=BB=A5=E4=B8=8D=E5=BC=BA=E5=88=B6=E8=B7=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/RenewalPaymentPopup.vue    |  87 +++++++++++++-------
 pages/package-order/package-order.vue | 113 ++++++++++++--------------
 2 files changed, 110 insertions(+), 90 deletions(-)

diff --git a/components/RenewalPaymentPopup.vue b/components/RenewalPaymentPopup.vue
index c8a592a..d4a57bc 100644
--- a/components/RenewalPaymentPopup.vue
+++ b/components/RenewalPaymentPopup.vue
@@ -255,12 +255,13 @@
 
 <style scoped lang="scss">
 	.renewal-popup {
-		width: 620rpx;
+		width: 600rpx;
 		max-width: calc(100vw - 80rpx);
-		padding: 32rpx;
+		padding: 0;
 		box-sizing: border-box;
 		background: #fff;
 		border-radius: 24rpx;
+		overflow: hidden;
 	}
 
 	.popup-header,
@@ -272,63 +273,72 @@
 
 	.popup-header {
 		justify-content: space-between;
+		padding: 30rpx;
+		border-bottom: 1rpx solid var(--border-light);
 	}
 
 	.popup-title {
 		color: var(--text-primary);
-		font-size: 34rpx;
+		font-size: 32rpx;
 		font-weight: 600;
 	}
 
 	.popup-close {
-		width: 52rpx;
-		height: 52rpx;
+		width: 48rpx;
+		height: 48rpx;
 		color: var(--text-tertiary);
-		font-size: 44rpx;
-		line-height: 46rpx;
+		font-size: 40rpx;
+		line-height: 48rpx;
 		text-align: center;
 	}
 
 	.package-summary {
-		margin-top: 28rpx;
-		padding: 22rpx;
-		background: var(--bg-secondary);
-		border-radius: 14rpx;
+		padding: 40rpx 30rpx 30rpx;
+		background: linear-gradient(135deg, rgba(0, 122, 255, 0.05) 0%, rgba(0, 122, 255, 0.02) 100%);
+		border-bottom: 1rpx solid var(--border-light);
+		text-align: center;
 	}
 
 	.summary-label {
 		color: var(--text-tertiary);
-		font-size: 24rpx;
+		font-size: 22rpx;
 	}
 
 	.summary-name {
-		margin-top: 8rpx;
+		margin: 20rpx 0 0;
 		color: var(--text-primary);
-		font-size: 30rpx;
-		font-weight: 600;
-		line-height: 1.5;
+		font-size: 32rpx;
+		font-weight: 700;
+		line-height: 1.4;
 	}
 
 	.payment-methods {
-		margin-top: 24rpx;
+		padding: 30rpx;
 	}
 
 	.method-item {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: 22rpx 0;
-		border-bottom: 1rpx solid var(--border-light);
+		padding: 24rpx;
+		margin-bottom: 20rpx;
+		border: 2rpx solid var(--border-light);
+		border-radius: var(--radius-medium);
+		transition: all 0.3s;
 
-		&.active .method-name { color: var(--primary); }
-	}
+		&:last-child { margin-bottom: 0; }
 
-	.method-left { gap: 16rpx; }
+		&.active {
+			border-color: var(--primary);
+			background: rgba(0, 122, 255, 0.05);
+		}
+}
+
+	.method-left { gap: 20rpx; }
 
 	.method-icon {
-		width: 44rpx;
-		height: 44rpx;
-		border-radius: 10rpx;
+		width: 64rpx;
+		height: 64rpx;
 	}
 
 	.method-badge {
@@ -345,26 +355,41 @@
 	.method-name { color: var(--text-primary); font-size: 28rpx; }
 
 	.method-radio {
-		width: 32rpx;
-		height: 32rpx;
-		border: 2rpx solid var(--border-light);
+		width: 36rpx;
+		height: 36rpx;
+		border: 2rpx solid var(--gray-400);
 		border-radius: 50%;
+		position: relative;
 
 		&.checked {
-			border: 8rpx solid var(--primary);
+			border-color: var(--primary);
+			background: var(--primary);
+
+			&::after {
+				content: '✓';
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				color: #fff;
+				font-size: 20rpx;
+				font-weight: 700;
+			}
 		}
 	}
 
 	.method-empty {
-		padding: 28rpx 0;
+		padding: 28rpx;
 		color: var(--text-tertiary);
 		font-size: 26rpx;
 		text-align: center;
 	}
 
 	.popup-footer {
+		display: flex;
+		padding: 30rpx;
 		gap: 20rpx;
-		margin-top: 28rpx;
+		border-top: 1rpx solid var(--border-light);
 
 		button {
 			flex: 1;
diff --git a/pages/package-order/package-order.vue b/pages/package-order/package-order.vue
index 4e7a36c..6f13c9e 100644
--- a/pages/package-order/package-order.vue
+++ b/pages/package-order/package-order.vue
@@ -14,31 +14,30 @@
 
 		<view v-if="packageList.length === 0 && !loading" class="empty-state">
 			<image class="empty-icon" src="/static/shop.png" mode="aspectFit" alt="套餐订购"></image>
-			<view class="empty-title">暂无{{ activePackageType === 'formal' ? '正式' : '附加' }}套餐</view>
+			<view class="empty-title">暂无{{ activePackageType === 'formal' ? '正式套餐' : '加油包' }}</view>
 			<view class="empty-desc">当前资产暂无适用的套餐</view>
 		</view>
 
 		<view class="card package-card" v-for="item in packageList" :key="item.package_id">
 			<view class="package-header">
 				<view class="package-name">{{ item.package_name }}</view>
-				<view v-if="item.is_renewal" class="package-tag">续费套餐</view>
+				<view class="package-header-meta">
+					<view v-if="item.is_renewal" class="package-tag">续费套餐</view>
+					<view class="package-validity">{{ formatValidity(item.validity_days) }}</view>
+				</view>
 			</view>
 			<view class="package-main">
 				<view class="data-block">
-					<view class="data-label">套餐流量</view>
+					<view class="data-label">可用流量</view>
 					<view class="package-data">{{ formatData(item.data_allowance, item.data_unit) }}</view>
 				</view>
-				<view class="validity-box">
-					<view class="validity-value">{{ item.validity_days }}</view>
-					<view class="validity-label">天有效期</view>
-				</view>
-			</view>
-			<view class="package-desc" v-if="item.description">{{ item.description }}</view>
-			<view class="package-footer">
 				<view class="price-block">
 					<text class="price-symbol">¥</text>
 					<text class="package-price">{{ formatPackagePrice(item.retail_price) }}</text>
 				</view>
+			</view>
+			<view class="package-desc" v-if="item.description">{{ item.description }}</view>
+			<view class="package-footer">
 				<view class="btn">
 					<up-button type="primary" size="small" @click="buyPackage(item)">立即订购</up-button>
 				</view>
@@ -57,13 +56,13 @@
 					<view class="summary-price">¥{{ formatPackagePrice(currentPackage?.retail_price) }}</view>
 					<view class="summary-details">
 						<view class="detail-item">
-							<text class="detail-label">套餐流量</text>
+							<text class="detail-label">可用流量</text>
 							<text class="detail-value">{{ formatData(currentPackage?.data_allowance, currentPackage?.data_unit) }}</text>
 						</view>
 						<view class="detail-divider"></view>
 						<view class="detail-item">
 							<text class="detail-label">有效期</text>
-							<text class="detail-value">{{ currentPackage?.validity_days }} 天</text>
+							<text class="detail-value">{{ formatValidity(currentPackage?.validity_days) }}</text>
 						</view>
 					</view>
 				</view>
@@ -127,7 +126,7 @@
 	const activePackageType = ref('formal');
 	const packageTypeTabs = [
 		{ label: '正式套餐', value: 'formal' },
-		{ label: '附加套餐', value: 'addon' }
+		{ label: '加油包', value: 'addon' }
 	];
 	let assetTypePromise = null;
 	let packageRequestId = 0;
@@ -135,13 +134,18 @@
 
 	const formatData = (allowance, unit) => {
 		if (unit === 'MB') {
-			return allowance >= 1024 ? `${(allowance / 1024).toFixed(0)} GB` : `${allowance} MB`;
+			return allowance >= 1024 ? `${(allowance / 1024).toFixed(0)}GB` : `${allowance}MB`;
 		}
-		return `${allowance} ${unit}`;
+		return `${allowance}${unit}`;
 	};
 
 	const formatPackagePrice = (amount) => amount === null || amount === undefined ? '-' : formatMoney(amount);
 
+	const formatValidity = (days) => {
+		const value = String(days ?? '').trim();
+		return value && value !== '-' ? `${value}天有效` : '有效期未知';
+	};
+
 	const isPaymentMethodAvailable = (method) => {
 		return paymentMethodOptions.value.some((item) => item.value === method);
 	};
@@ -586,8 +590,14 @@
 					flex: 1;
 				}
 
-				.package-tag {
+				.package-header-meta {
 					flex-shrink: 0;
+					display: flex;
+					align-items: center;
+					gap: 8rpx;
+				}
+
+				.package-tag {
 					padding: 6rpx 12rpx;
 					background: var(--gray-100);
 					color: var(--gray-700);
@@ -596,6 +606,16 @@
 					font-weight: 600;
 					border: none;
 				}
+
+				.package-validity {
+					padding: 8rpx 12rpx;
+					border-radius: var(--radius-small);
+					background: rgba(10, 132, 255, 0.1);
+					color: var(--primary-dark);
+					font-size: 22rpx;
+					font-weight: 600;
+					white-space: nowrap;
+				}
 			}
 
 			.package-main {
@@ -628,50 +648,13 @@
 					letter-spacing: -1rpx;
 				}
 
-				.validity-box {
-					min-width: 116rpx;
+				.price-block {
+					min-width: 150rpx;
 					display: flex;
-					flex-direction: column;
 					align-items: center;
 					justify-content: center;
-					padding: 16rpx 18rpx;
-					background: rgba(255, 255, 255, 0.8);
-					border: 1rpx solid rgba(10, 132, 255, 0.1);
-					border-radius: 14rpx;
-
-					.validity-value {
-						font-size: 32rpx;
-						font-weight: 700;
-						color: var(--text-primary);
-						line-height: 1;
-					}
-
-					.validity-label {
-						font-size: 22rpx;
-						color: var(--text-tertiary);
-						margin-top: 8rpx;
-					}
-				}
-			}
-
-			.package-desc {
-				font-size: 24rpx;
-				color: var(--text-secondary);
-				line-height: 1.5;
-				margin-bottom: 22rpx;
-			}
-
-			.package-footer {
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				gap: 24rpx;
-				padding-top: 22rpx;
-				border-top: 1rpx solid var(--gray-100);
-
-				.price-block {
-					display: flex;
-					align-items: baseline;
+					padding-left: 24rpx;
+					border-left: 1rpx solid rgba(10, 132, 255, 0.18);
 					color: var(--primary-dark);
 					white-space: nowrap;
 
@@ -687,10 +670,22 @@
 						letter-spacing: -1rpx;
 					}
 				}
+			}
+
+			.package-desc {
+				font-size: 24rpx;
+				color: var(--text-secondary);
+				line-height: 1.5;
+				margin-bottom: 22rpx;
+			}
+
+			.package-footer {
+				display: block;
+				padding-top: 22rpx;
+				border-top: 1rpx solid var(--gray-100);
 
 				.btn {
-					flex-shrink: 0;
-					min-width: 180rpx;
+					width: 100%;
 				}
 			}
 		}