fix: ui

pages.json

@@ -41,7 +41,7 @@
 		{
 			"path": "pages/order-list/order-list",
 			"style": {
-				"navigationStyle": "custom"
+				"navigationBarTitleText": "我的订单"
 			}
 		},
 		{

pages/order-list/order-list.vue

@@ -1,20 +1,5 @@
 <template>
 	<view class="container">
-		<view class="page-navbar">
-			<view class="navbar-back" @tap="goBack">
-				<view class="back-chevron"></view>
-			</view>
-			<view class="navbar-title">我的订单</view>
-			<view class="navbar-tools">
-				<view class="navbar-search-icon"></view>
-				<view class="navbar-filter-icon">
-					<view class="filter-line filter-line-top"></view>
-					<view class="filter-line filter-line-middle"></view>
-					<view class="filter-line filter-line-bottom"></view>
-				</view>
-			</view>
-		</view>
-
 		<view class="filter-tabs">
 			<view
 				v-for="(item, index) in filterOptions"
@@ -55,6 +40,7 @@
 						<view class="package-row">
 							<view class="package-content">
 								<view class="package-name">{{ getPackageNamesText(item) }}</view>
+								<view class="package-desc">高速流量 · 全国通用 · 不限速</view>
 							</view>
 							<view class="order-amount">¥{{ formatMoney(item.total_amount) }}</view>
 						</view>
@@ -221,15 +207,6 @@
 		});
 	};
 
-	const goBack = () => {
-		const pages = getCurrentPages();
-		if (pages.length > 1) {
-			uni.navigateBack();
-			return;
-		}
-		uni.reLaunch({ url: '/pages/index/index' });
-	};
-
 	const openOrderDetail = (order) => {
 		if (!order?.order_id) return;
 		uni.navigateTo({ url: `/pages/order-detail/order-detail?id=${order.order_id}` });
@@ -492,110 +469,11 @@
 
 	/* Screenshot-aligned order list skin */
 	.container {
-		top: 0;
+		top: var(--window-top);
 		background: #f8f9fb;
-		padding-top: var(--status-bar-height, 0px);
+		padding-top: 0;
 	}
 
-	.page-navbar {
-		position: relative;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		flex-shrink: 0;
-		height: 88rpx;
-		padding: 0 32rpx;
-		background: #fff;
-		box-sizing: border-box;
-	}
-
-	.navbar-back,
-	.navbar-tools {
-		display: flex;
-		align-items: center;
-	}
-
-	.navbar-back {
-		width: 64rpx;
-		height: 64rpx;
-		justify-content: flex-start;
-	}
-
-	.back-chevron {
-		width: 24rpx;
-		height: 24rpx;
-		margin-left: 8rpx;
-		border-left: 5rpx solid #111;
-		border-bottom: 5rpx solid #111;
-		transform: rotate(45deg);
-	}
-
-	.navbar-title {
-		position: absolute;
-		left: 50%;
-		transform: translateX(-50%);
-		color: #111;
-		font-size: 36rpx;
-		font-weight: 600;
-	}
-
-	.navbar-tools {
-		gap: 36rpx;
-		margin-left: auto;
-	}
-
-	.navbar-search-icon {
-		position: relative;
-		width: 32rpx;
-		height: 32rpx;
-		border: 4rpx solid #111;
-		border-radius: 50%;
-		box-sizing: border-box;
-
-		&::after {
-			content: '';
-			position: absolute;
-			right: -13rpx;
-			bottom: -9rpx;
-			width: 14rpx;
-			height: 4rpx;
-			background: #111;
-			border-radius: 4rpx;
-			transform: rotate(45deg);
-		}
-	}
-
-	.navbar-filter-icon {
-		position: relative;
-		width: 34rpx;
-		height: 34rpx;
-	}
-
-	.filter-line {
-		position: absolute;
-		left: 50%;
-		height: 4rpx;
-		width: 34rpx;
-		background: #111;
-		border-radius: 4rpx;
-		transform: translateX(-50%);
-
-		&::after {
-			content: '';
-			position: absolute;
-			top: -5rpx;
-			width: 14rpx;
-			height: 14rpx;
-			border: 4rpx solid #111;
-			border-radius: 50%;
-			background: #fff;
-		}
-	}
-
-	.filter-line-top { top: 7rpx; &::after { left: 6rpx; } }
-	.filter-line-middle { top: 16rpx; &::after { right: 5rpx; } }
-	.filter-line-bottom { top: 25rpx; &::after { left: 6rpx; } }
-
 	.filter-tabs {
 		display: flex;
 		align-items: stretch;
@@ -622,7 +500,7 @@
 	}
 
 	.filter-tabs .tab-item.active {
-		color: #18a765;
+		color: var(--primary);
 		font-size: 28rpx;
 		font-weight: 600;
 	}
@@ -631,11 +509,12 @@
 		bottom: 0;
 		width: 42rpx;
 		height: 6rpx;
-		background: #18a765;
+		background: var(--primary);
 		border-radius: 8rpx;
 	}
 
 	.scroll-container {
+		height: 0;
 		min-height: 0;
 	}
 
@@ -724,6 +603,16 @@
 		word-break: break-all;
 	}
 
+	.package-desc {
+		margin-top: 14rpx;
+		color: #8b9099;
+		font-size: 23rpx;
+		line-height: 1.35;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
 	.order-amount {
 		align-self: center;
 		color: #ff302f;
@@ -741,7 +630,7 @@
 	.order-card .card-footer {
 		display: flex;
 		align-items: center;
-		justify-content: space-between;
+		justify-content: flex-start;
 		gap: 16rpx;
 		margin-top: 0;
 		padding: 0 0 28rpx;
@@ -749,11 +638,23 @@
 		flex-direction: row;
 	}
 
+	.order-card .card-body .card-footer {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-start;
+		margin-top: 0;
+		padding: 0 0 28rpx;
+		border-top: 0;
+	}
+
 	.created-time {
 		min-width: 0;
+		flex: 1;
 		color: #777b84;
 		font-size: 24rpx;
 		line-height: 1.3;
+		text-align: left;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -763,6 +664,7 @@
 		display: flex;
 		align-items: center;
 		gap: 16rpx;
+		margin-left: auto;
 		flex-shrink: 0;
 	}
 
@@ -784,6 +686,15 @@
 		&::after { border: none; }
 	}
 
+	.order-card .card-body .card-footer .order-action-button {
+		width: 180rpx;
+		height: 58rpx;
+		min-width: 0;
+		margin: 0;
+		padding: 0 16rpx;
+		line-height: 56rpx;
+	}
+
 	.detail-action-button {
 		border-color: #d9dde2;
 		background: #fff;
@@ -791,8 +702,8 @@
 	}
 
 	.primary-action-button {
-		border-color: #16ad63;
-		background: #16ad63;
+		border-color: var(--primary);
+		background: var(--primary);
 		color: #fff;
 	}
 

pages/package-order/package-order.vue

@@ -36,7 +36,7 @@
 				</view>
 				<view class="package-side">
 					<view class="package-price"><text class="price-symbol">¥</text>{{ formatPackagePrice(item.retail_price) }}</view>
-					<button class="btn-apple btn-success package-buy-button" @tap="buyPackage(item)">立即订购</button>
+					<button class="btn-apple btn-primary package-buy-button" @tap="buyPackage(item)">立即订购</button>
 				</view>
 			</view>
 		</view>
@@ -713,7 +713,7 @@
 	.container .package-tab.active {
 		background: #fff;
 		box-shadow: 0 4rpx 14rpx rgba(31, 35, 41, 0.06);
-		color: #0a9f50;
+		color: var(--primary);
 		font-weight: 600;
 	}
 
@@ -765,8 +765,8 @@
 		min-width: 0;
 		padding: 10rpx 16rpx;
 		border-radius: 28rpx;
-		background: #eff8f3;
-		color: #15934f;
+		background: rgba(10, 132, 255, 0.08);
+		color: var(--primary-dark);
 		font-size: 24rpx;
 		line-height: 1.2;
 		white-space: nowrap;