fix: package-list

pages/package-order/package-order.vue

@@ -9,18 +9,20 @@
 		<view class="card package-card" v-for="item in packageList" :key="item.package_id">
 			<view class="package-header flex-row-sb">
 				<view class="package-name">{{ item.package_name }}</view>
-				<view class="tag-apple" :class="item.is_addon ? 'tag-warning' : 'tag-primary'">
+				<view class="header-right">
-					{{ item.is_addon ? '加油包' : '正式套餐' }}
+					<view class="validity-tag">{{ item.validity_days }}天</view>
+					<view class="tag-apple" :class="item.is_addon ? 'tag-warning' : 'tag-primary'">
+						{{ item.is_addon ? '加油包' : '正式套餐' }}
+					</view>
 				</view>
 			</view>
-			<view class="package-price">¥{{ formatMoney(item.retail_price) }}</view>
+			<view class="package-data">{{ formatData(item.data_allowance, item.data_unit) }}</view>
 			<view class="package-desc">{{ item.description }}</view>
-			<view class="package-info">
+			<view class="package-footer flex-row-sb">
-				<view class="info-item">流量: {{ formatData(item.data_allowance, item.data_unit) }}</view>
+				<view class="package-price">¥{{ formatMoney(item.retail_price) }}</view>
-				<view class="info-item">有效: {{ item.validity_days }}天</view>
+				<view class="btn">
-			</view>
+					<up-button type="primary" @click="buyPackage(item)">立即订购</up-button>
-			<view class="btn">
+				</view>
-				<up-button type="primary" @click="buyPackage(item)">立即订购</up-button>
 			</view>
 		</view>
 
@@ -35,6 +37,17 @@
 				<view class="package-summary">
 					<view class="summary-name">{{ currentPackage?.package_name }}</view>
 					<view class="summary-price">¥{{ formatMoney(currentPackage?.retail_price) }}</view>
+					<view class="summary-details">
+						<view class="detail-item">
+							<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>
+						</view>
+					</view>
 				</view>
 
 				<view class="payment-methods">
@@ -49,10 +62,7 @@
 					<view class="method-item" :class="{ active: paymentMethod === 'wallet' }" @tap="selectPaymentMethod('wallet')">
 						<view class="method-left">
 							<image class="method-icon" src="/static/wallet.png" mode="aspectFit"></image>
-							<view class="method-info">
+							<text class="method-name">账户余额（¥{{ formatMoney(walletBalance) }}）</text>
-								<text class="method-name">账户余额</text>
-								<text class="wallet-balance">余额: ¥{{ formatMoney(walletBalance) }}</text>
-							</view>
 						</view>
 						<view class="method-radio" :class="{ checked: paymentMethod === 'wallet' }"></view>
 					</view>
@@ -331,25 +341,42 @@
 			.package-header {
 				margin-bottom: var(--space-sm);
 				.package-name { font-size: 32rpx; font-weight: 600; color: var(--text-primary); }
+				.header-right {
+					display: flex;
+					align-items: center;
+					gap: 12rpx;
+					.validity-tag {
+						font-size: 24rpx;
+						color: var(--text-secondary);
+						padding: 4rpx 12rpx;
+						background: var(--gray-100);
+						border-radius: 8rpx;
+					}
+				}
 			}
-			.package-price {
+			.package-data {
-				font-size: 40rpx;
+				font-size: 48rpx;
-				font-weight: bold;
+				font-weight: 700;
-				color: var(--warning);
+				color: var(--primary);
 				margin-bottom: var(--space-sm);
+				letter-spacing: -1rpx;
 			}
 			.package-desc {
 				font-size: 26rpx;
 				color: var(--text-secondary);
-				margin-bottom: var(--space-sm);
-			}
-			.package-info {
-				display: flex;
-				gap: var(--space-lg);
 				margin-bottom: var(--space-md);
-				.info-item { font-size: 24rpx; color: var(--text-tertiary); }
 			}
-			.btn { margin-top: var(--space-sm); }
+			.package-footer {
+				align-items: center;
+				.package-price {
+					font-size: 32rpx;
+					font-weight: 600;
+					color: var(--warning);
+				}
+				.btn {
+					flex-shrink: 0;
+				}
+			}
 		}
 	}
 
@@ -385,22 +412,58 @@
 		}
 
 		.package-summary {
-			padding: 40rpx 30rpx;
+			padding: 40rpx 30rpx 30rpx;
-			background: rgba(0, 122, 255, 0.03);
+			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-name {
-				font-size: 28rpx;
+				font-size: 32rpx;
-				font-weight: 500;
+				font-weight: 700;
 				color: var(--text-primary);
-				margin-bottom: 16rpx;
+				margin-bottom: 20rpx;
+				line-height: 1.4;
 			}
 
 			.summary-price {
-				font-size: 48rpx;
+				font-size: 56rpx;
 				font-weight: 700;
 				color: var(--primary);
+				margin-bottom: 24rpx;
+				letter-spacing: -1rpx;
+			}
+
+			.summary-details {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				gap: 24rpx;
+				padding-top: 20rpx;
+				border-top: 1rpx solid rgba(0, 122, 255, 0.1);
+
+				.detail-item {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					gap: 8rpx;
+
+					.detail-label {
+						font-size: 22rpx;
+						color: var(--text-tertiary);
+					}
+
+					.detail-value {
+						font-size: 26rpx;
+						font-weight: 600;
+						color: var(--text-primary);
+					}
+				}
+
+				.detail-divider {
+					width: 1rpx;
+					height: 40rpx;
+					background: var(--border-light);
+				}
 			}
 		}
 
@@ -433,14 +496,8 @@
 					gap: 20rpx;
 
 					.method-icon {
-						width: 48rpx;
+						width: 64rpx;
-						height: 48rpx;
+						height: 64rpx;
-					}
-
-					.method-info {
-						display: flex;
-						flex-direction: column;
-						gap: 8rpx;
 					}
 
 					.method-name {
@@ -448,11 +505,6 @@
 						font-weight: 500;
 						color: var(--text-primary);
 					}
-
-					.wallet-balance {
-						font-size: 22rpx;
-						color: var(--text-tertiary);
-					}
 				}
 
 				.method-radio {