fix: icons和布局

api/modules/asset.js

@@ -44,11 +44,14 @@ export const assetApi = {
 		});
 	},
 
-	getPackages(identifier) {
+	getPackages(identifier, packageType = '') {
 		return request({
 			url: '/api/c/v1/asset/packages',
 			method: 'GET',
-			data: { identifier }
+			data: {
+				identifier,
+				...(packageType ? { package_type: packageType } : {})
+			}
 		});
 	},
 

pages/order-list/order-list.vue

@@ -551,8 +551,9 @@
 				}
 
 				.btn-renew {
-					flex-shrink: 0;
+					flex: 1;
-					width: 180rpx;
+					width: 100%;
+					min-width: 0;
 				}
 			}
 		}

pages/package-order/package-order.vue

@@ -1,17 +1,27 @@
 <template>
 	<view class="container">
+		<view class="package-tabs">
+			<view
+				v-for="tab in packageTypeTabs"
+				:key="tab.value"
+				class="package-tab"
+				:class="{ active: activePackageType === tab.value }"
+				@tap="switchPackageType(tab.value)"
+			>
+				{{ tab.label }}
+			</view>
+		</view>
+
 		<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">暂无可购套餐，请联系客服</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 class="tag-apple" :class="item.is_renewal ? 'tag-warning' : (item.is_addon ? 'tag-warning' : 'tag-primary')">
+				<view v-if="item.is_renewal" class="package-tag">续费套餐</view>
-					{{ item.is_renewal ? '续费套餐' : (item.is_addon ? '加油包' : '正式套餐') }}
-				</view>
 			</view>
 			<view class="package-main">
 				<view class="data-block">
@@ -114,7 +124,13 @@
 	const allowedPaymentMethods = ref([]);
 	const renewalPackageIds = ref([]);
 	const renewalPackageNames = ref([]);
+	const activePackageType = ref('formal');
+	const packageTypeTabs = [
+		{ label: '正式套餐', value: 'formal' },
+		{ label: '附加套餐', value: 'addon' }
+	];
 	let assetTypePromise = null;
+	let packageRequestId = 0;
 	const paymentMethodOptions = computed(() => getPaymentMethodOptions(allowedPaymentMethods.value));
 
 	const formatData = (allowance, unit) => {
@@ -156,10 +172,14 @@
 		return assetTypePromise;
 	};
 
-	const loadPackages = async () => {
+	const loadPackages = async (packageType = activePackageType.value) => {
+		const requestId = ++packageRequestId;
 		loading.value = true;
+		packageList.splice(0, packageList.length);
 		try {
-			const data = await assetApi.getPackages(userStore.state.identifier);
+			const data = await assetApi.getPackages(userStore.state.identifier, packageType);
+			if (requestId !== packageRequestId) return;
+
 			const currentPackageId = Number(assetInfo.value.current_package_id || 0);
 			const packages = (data.packages || []).filter((item) => {
 				const status = String(item.status || '').toLowerCase();
@@ -174,6 +194,7 @@
 			}));
 			const packageIdsInList = new Set(packages.map((item) => Number(item.package_id)));
 			const renewalOnlyPackages = renewalPackageIds.value
+				.filter(() => packageType === 'formal')
 				.filter((packageId) => !packageIdsInList.has(Number(packageId)))
 				.map((packageId, index) => ({
 					package_id: Number(packageId),
@@ -182,13 +203,22 @@
 					data_allowance: 0,
 					data_unit: 'MB',
 					validity_days: '-',
+					package_type: 'formal',
 					is_renewal: true
 				}));
 			packageList.splice(0, packageList.length, ...packages, ...renewalOnlyPackages);
 		} catch (error) {
+			if (requestId !== packageRequestId) return;
 			console.error('加载套餐列表失败', error);
+		} finally {
+			if (requestId === packageRequestId) loading.value = false;
 		}
-		loading.value = false;
+	};
+
+	const switchPackageType = (packageType) => {
+		if (packageType === activePackageType.value) return;
+		activePackageType.value = packageType;
+		loadPackages(packageType);
 	};
 
 	const loadWalletBalance = async () => {
@@ -479,6 +509,32 @@
 		gap: 16rpx;
 		padding: 24rpx 20rpx 40rpx;
 
+		.package-tabs {
+			display: flex;
+			gap: 6rpx;
+			padding: 6rpx;
+			background: var(--gray-100);
+			border: 1rpx solid var(--gray-200);
+			border-radius: 16rpx;
+
+			.package-tab {
+				flex: 1;
+				padding: 16rpx 0;
+				border-radius: 12rpx;
+				color: var(--text-tertiary);
+				font-size: 26rpx;
+				text-align: center;
+				transition: all 0.2s ease;
+
+				&.active {
+					background: var(--bg-primary);
+					box-shadow: var(--shadow-small);
+					color: var(--primary);
+					font-weight: 600;
+				}
+			}
+		}
+
 		.empty-state {
 			display: flex;
 			flex-direction: column;
@@ -530,11 +586,14 @@
 					flex: 1;
 				}
 
-				.tag-apple {
+				.package-tag {
 					flex-shrink: 0;
 					padding: 6rpx 12rpx;
 					background: var(--gray-100);
 					color: var(--gray-700);
+					border-radius: var(--radius-small);
+					font-size: 22rpx;
+					font-weight: 600;
 					border: none;
 				}
 			}
@@ -544,13 +603,15 @@
 				align-items: stretch;
 				justify-content: space-between;
 				gap: 24rpx;
-				padding: 0 0 24rpx;
+				padding: 24rpx;
-				margin-bottom: 22rpx;
+				margin-bottom: 24rpx;
-				border-bottom: 1rpx solid var(--gray-100);
+				background: linear-gradient(135deg, rgba(10, 132, 255, 0.08), rgba(10, 132, 255, 0.02));
+				border: 1rpx solid rgba(10, 132, 255, 0.1);
+				border-radius: 18rpx;
 
 				.data-block {
 					flex: 1;
-					padding-right: 24rpx;
+					padding-right: 20rpx;
 
 					.data-label {
 						font-size: 23rpx;
@@ -562,7 +623,7 @@
 				.package-data {
 					font-size: 48rpx;
 					font-weight: 700;
-					color: var(--text-primary);
+					color: var(--primary);
 					line-height: 1.1;
 					letter-spacing: -1rpx;
 				}
@@ -571,10 +632,12 @@
 					min-width: 116rpx;
 					display: flex;
 					flex-direction: column;
-					align-items: flex-start;
+					align-items: center;
 					justify-content: center;
-					padding: 0 0 0 24rpx;
+					padding: 16rpx 18rpx;
-					border-left: 1rpx solid var(--gray-200);
+					background: rgba(255, 255, 255, 0.8);
+					border: 1rpx solid rgba(10, 132, 255, 0.1);
+					border-radius: 14rpx;
 
 					.validity-value {
 						font-size: 32rpx;
@@ -603,12 +666,13 @@
 				align-items: center;
 				justify-content: space-between;
 				gap: 24rpx;
-				padding-top: 0;
+				padding-top: 22rpx;
+				border-top: 1rpx solid var(--gray-100);
 
 				.price-block {
 					display: flex;
 					align-items: baseline;
-					color: var(--text-primary);
+					color: var(--primary-dark);
 					white-space: nowrap;
 
 					.price-symbol {