Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
02dc5c38 1 parent 20237374

feat(订单管理): 实现订单管理页面功能 

添加订单管理页面完整功能，包括买车/卖车切换、状态筛选、订单列表展示和操作按钮
重构页面样式并分离到独立less文件
移除未使用的组件依赖
更新页面标题为'我的订单'
Expand all
Inline Side-by-side
Showing 4 changed files with 309 additions and 4 deletions
...@@ -11,7 +11,6 @@ declare module 'vue' { ...@@ -11,7 +11,6 @@ declare module 'vue' {
11 NutActionSheet: typeof import('@nutui/nutui-taro')['ActionSheet'] 11 NutActionSheet: typeof import('@nutui/nutui-taro')['ActionSheet']
12 NutButton: typeof import('@nutui/nutui-taro')['Button'] 12 NutButton: typeof import('@nutui/nutui-taro')['Button']
13 NutCol: typeof import('@nutui/nutui-taro')['Col'] 13 NutCol: typeof import('@nutui/nutui-taro')['Col']
14 - NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider']
15 NutDatePicker: typeof import('@nutui/nutui-taro')['DatePicker'] 14 NutDatePicker: typeof import('@nutui/nutui-taro')['DatePicker']
16 NutDialog: typeof import('@nutui/nutui-taro')['Dialog'] 15 NutDialog: typeof import('@nutui/nutui-taro')['Dialog']
17 NutForm: typeof import('@nutui/nutui-taro')['Form'] 16 NutForm: typeof import('@nutui/nutui-taro')['Form']
...@@ -20,7 +19,6 @@ declare module 'vue' { ...@@ -20,7 +19,6 @@ declare module 'vue' {
20 NutInput: typeof import('@nutui/nutui-taro')['Input'] 19 NutInput: typeof import('@nutui/nutui-taro')['Input']
21 NutMenu: typeof import('@nutui/nutui-taro')['Menu'] 20 NutMenu: typeof import('@nutui/nutui-taro')['Menu']
22 NutMenuItem: typeof import('@nutui/nutui-taro')['MenuItem'] 21 NutMenuItem: typeof import('@nutui/nutui-taro')['MenuItem']
23 - NutNavbar: typeof import('@nutui/nutui-taro')['Navbar']
24 NutPicker: typeof import('@nutui/nutui-taro')['Picker'] 22 NutPicker: typeof import('@nutui/nutui-taro')['Picker']
25 NutPopup: typeof import('@nutui/nutui-taro')['Popup'] 23 NutPopup: typeof import('@nutui/nutui-taro')['Popup']
26 NutRadio: typeof import('@nutui/nutui-taro')['Radio'] 24 NutRadio: typeof import('@nutui/nutui-taro')['Radio']
......
1 /* 1 /*
2 * @Date: 2025-07-03 12:57:44 2 * @Date: 2025-07-03 12:57:44
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-03 12:58:32 4 + * @LastEditTime: 2025-07-03 14:40:22
5 * @FilePath: /jgdl/src/pages/myOrders/index.config.js 5 * @FilePath: /jgdl/src/pages/myOrders/index.config.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
8 export default { 8 export default {
9 - navigationBarTitleText: '订单管理', 9 + navigationBarTitleText: '我的订单',
10 usingComponents: { 10 usingComponents: {
11 }, 11 },
12 } 12 }
......
1 +/* 订单管理页面样式 */
2 +.order-management-page {
3 + min-height: 100vh;
4 + background-color: #f5f5f5;
5 + padding-bottom: 120rpx;
6 +}
7 +
8 +/* 头部导航 */
9 +.header {
10 + background: white;
11 + padding: 32rpx 32rpx 24rpx;
12 + border-bottom: 1rpx solid #e5e7eb;
13 +}
14 +
15 +.header-content {
16 + display: flex;
17 + align-items: center;
18 + justify-content: space-between;
19 + padding-top: 32rpx;
20 +}
21 +
22 +.back-btn,
23 +.more-btn {
24 + padding: 8rpx;
25 + background: transparent;
26 + border: none;
27 +}
28 +
29 +.header-title {
30 + font-size: 36rpx;
31 + font-weight: 500;
32 + color: #111827;
33 +}
34 +
35 +/* 买车/卖车切换 */
36 +.view-mode-toggle {
37 + background: white;
38 + padding: 32rpx 32rpx 16rpx;
39 +}
40 +
41 +.toggle-container {
42 + background: #f3f4f6;
43 + padding: 8rpx;
44 + border-radius: 50rpx;
45 + display: flex;
46 +}
47 +
48 +.toggle-option {
49 + flex: 1;
50 + padding: 16rpx;
51 + border-radius: 42rpx;
52 + text-align: center;
53 + font-size: 32rpx; /* 增大字体 */
54 + color: #6b7280;
55 + transition: all 0.2s;
56 + cursor: pointer;
57 +
58 + &.active {
59 + background: white;
60 + color: #111827;
61 + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
62 + }
63 +}
64 +
65 +/* 状态筛选标签 */
66 +.status-tabs {
67 + background: white;
68 + padding: 20rpx 32rpx; /* 增加内边距 */
69 + border-bottom: 1rpx solid #e5e7eb;
70 + display: flex;
71 +}
72 +
73 +.tab-item {
74 + margin-right: 48rpx;
75 + padding-bottom: 16rpx;
76 + font-size: 32rpx; /* 增大字体 */
77 + color: #6b7280;
78 + position: relative;
79 + cursor: pointer;
80 + transition: color 0.2s;
81 +
82 + &.active {
83 + color: #f97316;
84 + font-weight: 500;
85 +
86 + &::after {
87 + content: '';
88 + position: absolute;
89 + bottom: 0;
90 + left: 0;
91 + right: 0;
92 + height: 4rpx;
93 + background: #f97316;
94 + border-radius: 2rpx;
95 + }
96 + }
97 +
98 + &:last-child {
99 + margin-right: 0;
100 + }
101 +}
102 +
103 +/* 订单列表 */
104 +.order-list {
105 + flex: 1;
106 + padding-bottom: 160rpx;
107 +}
108 +
109 +/* 滚动列表 */
110 +.order-scroll-view {
111 + width: 100%;
112 +}
113 +
114 +/* 滚动条样式 */
115 +.order-scroll-view::-webkit-scrollbar {
116 + width: 0;
117 + background: transparent;
118 +}
119 +
120 +/* 空状态 */
121 +.empty-state {
122 + display: flex;
123 + flex-direction: column;
124 + align-items: center;
125 + justify-content: center;
126 + height: 512rpx;
127 +}
128 +
129 +.empty-text {
130 + font-size: 32rpx; /* 增大字体 */
131 + color: #6b7280;
132 +}
133 +
134 +/* 订单卡片 */
135 +.order-card {
136 + background: white;
137 + margin: 24rpx;
138 + margin-bottom: 32rpx; /* 增加间距 */
139 + padding: 32rpx;
140 + border-radius: 16rpx; /* 增加圆角 */
141 + box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); /* 添加阴影 */
142 +}
143 +
144 +.order-header {
145 + display: flex;
146 + justify-content: space-between;
147 + align-items: center;
148 + margin-bottom: 24rpx;
149 +}
150 +
151 +.order-date {
152 + font-size: 28rpx; /* 增大字体 */
153 + color: #6b7280;
154 +}
155 +
156 +.order-status {
157 + font-size: 32rpx; /* 增大字体 */
158 + font-weight: 500;
159 +
160 + &.status-pending {
161 + color: #f97316;
162 + }
163 +
164 + &.status-completed {
165 + color: #10b981;
166 + }
167 +
168 + &.status-cancelled {
169 + color: #6b7280;
170 + }
171 +}
172 +
173 +/* 车辆信息 */
174 +.vehicle-info {
175 + margin-bottom: 24rpx;
176 +}
177 +
178 +.vehicle-image {
179 + width: 180rpx; /* 增大图片 */
180 + height: 180rpx; /* 增大图片 */
181 + border-radius: 12rpx;
182 + object-fit: cover;
183 +}
184 +
185 +.vehicle-details {
186 + padding-left: 24rpx;
187 + display: flex;
188 + flex-direction: column;
189 + justify-content: space-between;
190 + height: 180rpx; /* 匹配图片高度 */
191 +}
192 +
193 +.vehicle-name {
194 + font-size: 36rpx; /* 增大字体 */
195 + font-weight: 500;
196 + color: #111827;
197 + margin-bottom: 8rpx;
198 +}
199 +
200 +.vehicle-specs {
201 + font-size: 28rpx; /* 增大字体 */
202 + color: #6b7280;
203 + margin-bottom: 8rpx;
204 +}
205 +
206 +.vehicle-battery {
207 + font-size: 28rpx; /* 增大字体 */
208 + color: #6b7280;
209 + margin-bottom: 16rpx;
210 +}
211 +
212 +.vehicle-price {
213 + font-size: 36rpx; /* 增大字体 */
214 + font-weight: bold;
215 + color: #f97316;
216 +}
217 +
218 +/* 操作按钮 */
219 +.order-actions {
220 + display: flex;
221 + justify-content: flex-end;
222 + gap: 24rpx;
223 + margin-top: 16rpx; /* 增加上边距 */
224 +}
225 +
226 +.ml-2 {
227 + margin-left: 16rpx;
228 +}
229 +
230 +/* 加载更多和没有更多 */
231 +.loading-container {
232 + padding: 32rpx 0;
233 + display: flex;
234 + justify-content: center;
235 + align-items: center;
236 +}
237 +
238 +.no-more {
239 + padding: 32rpx 0;
240 + display: flex;
241 + justify-content: center;
242 + align-items: center;
243 +}
244 +
245 +.no-more-text {
246 + font-size: 28rpx;
247 + color: #9ca3af;
248 +}
249 +
250 +/* 响应式适配 */
251 +@media (max-width: 750px) {
252 + .header {
253 + padding: 24rpx 24rpx 16rpx;
254 + }
255 +
256 + .header-content {
257 + padding-top: 24rpx;
258 + }
259 +
260 + .header-title {
261 + font-size: 32rpx;
262 + }
263 +
264 + .view-mode-toggle {
265 + padding: 24rpx 24rpx 12rpx;
266 + }
267 +
268 + .toggle-option {
269 + padding: 12rpx;
270 + font-size: 30rpx; /* 保持较大字体 */
271 + }
272 +
273 + .status-tabs {
274 + padding: 18rpx 24rpx;
275 + }
276 +
277 + .order-card {
278 + padding: 24rpx;
279 + }
280 +
281 + .vehicle-image {
282 + width: 160rpx;
283 + height: 160rpx;
284 + }
285 +
286 + .vehicle-details {
287 + height: 160rpx;
288 + padding-left: 16rpx;
289 + }
290 +
291 + .vehicle-name {
292 + font-size: 32rpx;
293 + }
294 +
295 + .vehicle-specs,
296 + .vehicle-battery {
297 + font-size: 26rpx; /* 保持较大字体 */
298 + }
299 +
300 + .vehicle-price {
301 + font-size: 32rpx;
302 + }
303 +
304 + .order-actions {
305 + gap: 16rpx;
306 + }
307 +}
...\ No newline at end of file ...\ No newline at end of file
This diff is collapsed. Click to expand it.