Hooke / jgdl

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

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

添加订单管理页面完整功能，包括买车/卖车切换、状态筛选、订单列表展示和操作按钮
重构页面样式并分离到独立less文件
移除未使用的组件依赖
更新页面标题为'我的订单'
Inline Side-by-side
Showing 4 changed files with 728 additions and 13 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
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-03 12:55:54 4 + * @LastEditTime: 2025-07-03 15:55:17
5 - * @FilePath: /jgdl/src/pages/myFavorites/index.vue 5 + * @FilePath: /jgdl/src/pages/myOrders/index.vue
6 - * @Description: 文件描述 6 + * @Description: 订单管理页面
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="red">{{ str }}</div> 9 + <view class="order-management-page">
10 + <nut-sticky>
11 + <!-- 买车/卖车切换 -->
12 + <view class="view-mode-toggle">
13 + <view class="toggle-container">
14 + <view
15 + class="toggle-option"
16 + :class="{ active: viewMode === 'bought' }"
17 + @click="setViewMode('bought')"
18 + >
19 + 我买的车
20 + </view>
21 + <view
22 + class="toggle-option"
23 + :class="{ active: viewMode === 'sold' }"
24 + @click="setViewMode('sold')"
25 + >
26 + 我卖的车
27 + </view>
28 + </view>
29 + </view>
30 +
31 + <!-- 状态筛选标签 -->
32 + <view class="status-tabs">
33 + <view
34 + class="tab-item"
35 + :class="{ active: activeTab === 'all' }"
36 + @click="setActiveTab('all')"
37 + >
38 + 全部
39 + </view>
40 + <view
41 + v-if="viewMode === 'bought'"
42 + class="tab-item"
43 + :class="{ active: activeTab === 'pending' }"
44 + @click="setActiveTab('pending')"
45 + >
46 + 待支付
47 + </view>
48 + <view
49 + class="tab-item"
50 + :class="{ active: activeTab === 'completed' }"
51 + @click="setActiveTab('completed')"
52 + >
53 + 已完成
54 + </view>
55 + <view
56 + class="tab-item"
57 + :class="{ active: activeTab === 'cancelled' }"
58 + @click="setActiveTab('cancelled')"
59 + >
60 + 已取消
61 + </view>
62 + </view>
63 + </nut-sticky>
64 +
65 + <!-- 订单列表 -->
66 + <view class="order-list">
67 + <!-- 滚动列表 -->
68 + <scroll-view
69 + class="order-scroll-view"
70 + :style="scrollStyle"
71 + :scroll-y="true"
72 + @scrolltolower="loadMore"
73 + @scroll="scroll"
74 + :lower-threshold="50"
75 + :enable-flex="false"
76 + >
77 + <!-- 空状态 -->
78 + <view v-if="filteredOrders.length === 0" class="empty-state">
79 + <text class="empty-text">暂无订单</text>
80 + </view>
81 +
82 + <!-- 订单卡片 -->
83 + <view v-else>
84 + <view
85 + v-for="order in filteredOrders"
86 + :key="order.id"
87 + class="order-card"
88 + >
89 + <!-- 订单头部信息 -->
90 + <view class="order-header">
91 + <text class="order-date">{{ order.date }}</text>
92 + <text class="order-status" :class="getStatusClass(order.status)">
93 + {{ getStatusText(order.status) }}
94 + </text>
95 + </view>
96 +
97 + <!-- 车辆信息 -->
98 + <nut-row :gutter="12" class="vehicle-info">
99 + <nut-col :span="6">
100 + <image
101 + :src="order.vehicle.imageUrl"
102 + :alt="order.vehicle.name"
103 + class="vehicle-image"
104 + mode="aspectFill"
105 + />
106 + </nut-col>
107 + <nut-col :span="18">
108 + <view class="vehicle-details">
109 + <text class="vehicle-name">{{ order.vehicle.name }}</text>
110 + <text class="vehicle-specs">
111 + {{ order.vehicle.year }} | {{ order.vehicle.mileage }}
112 + </text>
113 + <text class="vehicle-battery">{{ order.vehicle.batteryCapacity }}</text>
114 + <text class="vehicle-price">¥{{ order.vehicle.price }}</text>
115 + </view>
116 + </nut-col>
117 + </nut-row>
118 +
119 + <!-- 操作按钮 -->
120 + <view class="order-actions">
121 + <!-- 买车模式：待支付状态 -->
122 + <template v-if="viewMode === 'bought' && order.status === 'pending'">
123 + <nut-button
124 + type="primary"
125 + size="small"
126 + @click="handlePayment(order.id)"
127 + >
128 + 去支付
129 + </nut-button>
130 + </template>
131 +
132 + <!-- 已完成状态 -->
133 + <template v-if="order.status === 'completed'">
134 + <nut-button
135 + type="default"
136 + size="small"
137 + @click="viewOrderDetail(order.id)"
138 + >
139 + 查看详情
140 + </nut-button>
141 + <nut-button
142 + type="primary"
143 + size="small"
144 + @click="rateOrder(order.id)"
145 + class="ml-2"
146 + >
147 + 评价
148 + </nut-button>
149 + </template>
150 +
151 + <!-- 已取消状态 -->
152 + <template v-if="order.status === 'cancelled'">
153 + <nut-button
154 + type="default"
155 + size="small"
156 + @click="deleteOrder(order.id)"
157 + >
158 + 删除订单
159 + </nut-button>
160 + </template>
161 + </view>
162 + </view>
163 + </view>
164 +
165 + <!-- 加载更多指示器 -->
166 + <view v-if="loading" class="loading-container">
167 + <text class="loading-text">加载中...</text>
168 + </view>
169 +
170 + <!-- 没有更多数据 -->
171 + <view v-if="!hasMore && filteredOrders.length > 0" class="no-more">
172 + <text class="no-more-text">没有更多订单了</text>
173 + </view>
174 + </scroll-view>
175 + </view>
176 + </view>
10 </template> 177 </template>
11 178
12 <script setup> 179 <script setup>
13 -// import '@tarojs/taro/html.css' 180 +import { ref, computed, onMounted } from 'vue'
14 -import { ref } from "vue"; 181 +import Taro from '@tarojs/taro'
182 +import './index.less'
183 +
184 +// 页面状态
185 +const activeTab = ref('all')
186 +const viewMode = ref('bought')
187 +const loading = ref(false)
188 +const hasMore = ref(true)
189 +
190 +// 模拟订单数据
191 +const boughtOrders = ref([
192 + {
193 + id: '1',
194 + date: '2023-11-15 14:30',
195 + status: 'pending',
196 + vehicle: {
197 + name: '小牛 U1 Pro',
198 + year: '2022年',
199 + mileage: '续航120km',
200 + batteryCapacity: '电池容量：1.5kWh',
201 + price: 3999,
202 + imageUrl: 'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
203 + }
204 + },
205 + {
206 + id: '2',
207 + date: '2023-10-28 09:15',
208 + status: 'completed',
209 + vehicle: {
210 + name: '雅迪 G5',
211 + year: '2021年',
212 + mileage: '续航80km',
213 + batteryCapacity: '电池容量：1.2kWh',
214 + price: 2599,
215 + imageUrl: 'https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
216 + }
217 + },
218 + {
219 + id: '3',
220 + date: '2023-09-05 16:45',
221 + status: 'cancelled',
222 + vehicle: {
223 + name: '绿源 MN5',
224 + year: '2023年',
225 + mileage: '续航100km',
226 + batteryCapacity: '电池容量：1.8kWh',
227 + price: 4299,
228 + imageUrl: 'https://images.unsplash.com/photo-1567922045116-2a00fae2ed03?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
229 + }
230 + }
231 +])
232 +
233 +const soldOrders = ref([
234 + {
235 + id: '4',
236 + date: '2023-11-10 11:20',
237 + status: 'pending',
238 + vehicle: {
239 + name: '爱玛 A3',
240 + year: '2022年',
241 + mileage: '续航90km',
242 + batteryCapacity: '电池容量：1.3kWh',
243 + price: 3299,
244 + imageUrl: 'https://images.unsplash.com/photo-1591637333184-19aa84b3e01f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
245 + }
246 + },
247 + {
248 + id: '5',
249 + date: '2023-10-15 13:45',
250 + status: 'completed',
251 + vehicle: {
252 + name: '台铃 战速',
253 + year: '2023年',
254 + mileage: '续航110km',
255 + batteryCapacity: '电池容量：1.6kWh',
256 + price: 3599,
257 + imageUrl: 'https://images.unsplash.com/photo-1558980664-3a031cf67ea8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
258 + }
259 + }
260 +])
261 +
262 +/**
263 + * 根据当前视图模式和筛选条件获取过滤后的订单列表
264 + */
265 +const filteredOrders = computed(() => {
266 + const orders = viewMode.value === 'bought' ? boughtOrders.value : soldOrders.value
267 +
268 + if (activeTab.value === 'all') {
269 + return orders
270 + }
271 +
272 + return orders.filter(order => {
273 + if (activeTab.value === 'pending') return order.status === 'pending'
274 + if (activeTab.value === 'completed') return order.status === 'completed'
275 + if (activeTab.value === 'cancelled') return order.status === 'cancelled'
276 + return true
277 + })
278 +})
279 +
280 +// 滚动样式
281 +const scrollStyle = computed(() => {
282 + return {
283 + height: 'calc(100vh - 320rpx)' // 减去头部和标签的高度
284 + }
285 +})
15 286
16 -// 定义响应式数据 287 +/**
17 -const str = ref('Demo页面') 288 + * 设置视图模式（买车/卖车）
289 + */
290 +const setViewMode = (mode) => {
291 + viewMode.value = mode
292 + // 重置列表加载状态
293 + resetListState()
294 +}
295 +
296 +/**
297 + * 设置活跃的状态标签
298 + */
299 +const setActiveTab = (tab) => {
300 + activeTab.value = tab
301 + // 重置列表加载状态
302 + resetListState()
303 +}
304 +
305 +/**
306 + * 重置列表加载状态
307 + */
308 +const resetListState = () => {
309 + loading.value = false
310 + hasMore.value = true
311 +}
312 +
313 +/**
314 + * 滚动事件处理
315 + */
316 +const scroll = (e) => {
317 + // 可以在这里处理滚动事件
318 +}
319 +
320 +/**
321 + * 加载更多数据
322 + */
323 +const loadMore = () => {
324 + if (loading.value || !hasMore.value) return
325 +
326 + loading.value = true
327 +
328 + // 模拟加载更多数据
329 + setTimeout(() => {
330 + loading.value = false
331 + // 这里可以添加实际的加载更多逻辑
332 + // 如果没有更多数据，设置 hasMore.value = false
333 + }, 1000)
334 +}
335 +
336 +/**
337 + * 获取订单状态文本
338 + */
339 +const getStatusText = (status) => {
340 + switch (status) {
341 + case 'pending':
342 + return '待支付'
343 + case 'completed':
344 + return '已完成'
345 + case 'cancelled':
346 + return '已取消'
347 + default:
348 + return ''
349 + }
350 +}
351 +
352 +/**
353 + * 获取订单状态样式类
354 + */
355 +const getStatusClass = (status) => {
356 + switch (status) {
357 + case 'pending':
358 + return 'status-pending'
359 + case 'completed':
360 + return 'status-completed'
361 + case 'cancelled':
362 + return 'status-cancelled'
363 + default:
364 + return ''
365 + }
366 +}
367 +
368 +// 页面导航相关方法可以在需要时添加
369 +
370 +/**
371 + * 处理支付
372 + */
373 +const handlePayment = (orderId) => {
374 + Taro.showToast({
375 + title: '跳转到支付页面',
376 + icon: 'none'
377 + })
378 + // TODO: 实现支付逻辑
379 +}
380 +
381 +/**
382 + * 查看订单详情
383 + */
384 +const viewOrderDetail = (orderId) => {
385 + Taro.navigateTo({
386 + url: `/pages/orderDetail/index?id=${orderId}`
387 + })
388 +}
389 +
390 +/**
391 + * 评价订单
392 + */
393 +const rateOrder = (orderId) => {
394 + Taro.showToast({
395 + title: '跳转到评价页面',
396 + icon: 'none'
397 + })
398 + // TODO: 实现评价逻辑
399 +}
400 +
401 +/**
402 + * 删除订单
403 + */
404 +const deleteOrder = (orderId) => {
405 + Taro.showModal({
406 + title: '确认删除',
407 + content: '确定要删除这个订单吗？',
408 + success: (res) => {
409 + if (res.confirm) {
410 + // TODO: 实现删除订单逻辑
411 + Taro.showToast({
412 + title: '订单已删除',
413 + icon: 'success'
414 + })
415 + }
416 + }
417 + })
418 +}
419 +
420 +// 页面加载时的初始化
421 +onMounted(() => {
422 + // TODO: 加载订单数据
423 +})
18 </script> 424 </script>
19 425
20 <script> 426 <script>
21 export default { 427 export default {
22 - name: "demoPage", 428 + name: "OrderManagementPage",
23 }; 429 };
24 </script> 430 </script>
431 +
432 +<style lang="less">
433 +/* 样式已移至 index.less 文件 */
434 +</style>
......