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' {
NutActionSheet: typeof import('@nutui/nutui-taro')['ActionSheet']
NutButton: typeof import('@nutui/nutui-taro')['Button']
NutCol: typeof import('@nutui/nutui-taro')['Col']
NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider']
NutDatePicker: typeof import('@nutui/nutui-taro')['DatePicker']
NutDialog: typeof import('@nutui/nutui-taro')['Dialog']
NutForm: typeof import('@nutui/nutui-taro')['Form']
......@@ -20,7 +19,6 @@ declare module 'vue' {
NutInput: typeof import('@nutui/nutui-taro')['Input']
NutMenu: typeof import('@nutui/nutui-taro')['Menu']
NutMenuItem: typeof import('@nutui/nutui-taro')['MenuItem']
NutNavbar: typeof import('@nutui/nutui-taro')['Navbar']
NutPicker: typeof import('@nutui/nutui-taro')['Picker']
NutPopup: typeof import('@nutui/nutui-taro')['Popup']
NutRadio: typeof import('@nutui/nutui-taro')['Radio']
......
/*
* @Date: 2025-07-03 12:57:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-03 12:58:32
* @LastEditTime: 2025-07-03 14:40:22
* @FilePath: /jgdl/src/pages/myOrders/index.config.js
* @Description: 文件描述
*/
export default {
navigationBarTitleText: '订单管理',
navigationBarTitleText: '我的订单',
usingComponents: {
},
}
......
/* 订单管理页面样式 */
.order-management-page {
min-height: 100vh;
background-color: #f5f5f5;
padding-bottom: 120rpx;
}
/* 头部导航 */
.header {
background: white;
padding: 32rpx 32rpx 24rpx;
border-bottom: 1rpx solid #e5e7eb;
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 32rpx;
}
.back-btn,
.more-btn {
padding: 8rpx;
background: transparent;
border: none;
}
.header-title {
font-size: 36rpx;
font-weight: 500;
color: #111827;
}
/* 买车/卖车切换 */
.view-mode-toggle {
background: white;
padding: 32rpx 32rpx 16rpx;
}
.toggle-container {
background: #f3f4f6;
padding: 8rpx;
border-radius: 50rpx;
display: flex;
}
.toggle-option {
flex: 1;
padding: 16rpx;
border-radius: 42rpx;
text-align: center;
font-size: 32rpx; /* 增大字体 */
color: #6b7280;
transition: all 0.2s;
cursor: pointer;
&.active {
background: white;
color: #111827;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
}
/* 状态筛选标签 */
.status-tabs {
background: white;
padding: 20rpx 32rpx; /* 增加内边距 */
border-bottom: 1rpx solid #e5e7eb;
display: flex;
}
.tab-item {
margin-right: 48rpx;
padding-bottom: 16rpx;
font-size: 32rpx; /* 增大字体 */
color: #6b7280;
position: relative;
cursor: pointer;
transition: color 0.2s;
&.active {
color: #f97316;
font-weight: 500;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4rpx;
background: #f97316;
border-radius: 2rpx;
}
}
&:last-child {
margin-right: 0;
}
}
/* 订单列表 */
.order-list {
flex: 1;
padding-bottom: 160rpx;
}
/* 滚动列表 */
.order-scroll-view {
width: 100%;
}
/* 滚动条样式 */
.order-scroll-view::-webkit-scrollbar {
width: 0;
background: transparent;
}
/* 空状态 */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 512rpx;
}
.empty-text {
font-size: 32rpx; /* 增大字体 */
color: #6b7280;
}
/* 订单卡片 */
.order-card {
background: white;
margin: 24rpx;
margin-bottom: 32rpx; /* 增加间距 */
padding: 32rpx;
border-radius: 16rpx; /* 增加圆角 */
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); /* 添加阴影 */
}
.order-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24rpx;
}
.order-date {
font-size: 28rpx; /* 增大字体 */
color: #6b7280;
}
.order-status {
font-size: 32rpx; /* 增大字体 */
font-weight: 500;
&.status-pending {
color: #f97316;
}
&.status-completed {
color: #10b981;
}
&.status-cancelled {
color: #6b7280;
}
}
/* 车辆信息 */
.vehicle-info {
margin-bottom: 24rpx;
}
.vehicle-image {
width: 180rpx; /* 增大图片 */
height: 180rpx; /* 增大图片 */
border-radius: 12rpx;
object-fit: cover;
}
.vehicle-details {
padding-left: 24rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 180rpx; /* 匹配图片高度 */
}
.vehicle-name {
font-size: 36rpx; /* 增大字体 */
font-weight: 500;
color: #111827;
margin-bottom: 8rpx;
}
.vehicle-specs {
font-size: 28rpx; /* 增大字体 */
color: #6b7280;
margin-bottom: 8rpx;
}
.vehicle-battery {
font-size: 28rpx; /* 增大字体 */
color: #6b7280;
margin-bottom: 16rpx;
}
.vehicle-price {
font-size: 36rpx; /* 增大字体 */
font-weight: bold;
color: #f97316;
}
/* 操作按钮 */
.order-actions {
display: flex;
justify-content: flex-end;
gap: 24rpx;
margin-top: 16rpx; /* 增加上边距 */
}
.ml-2 {
margin-left: 16rpx;
}
/* 加载更多和没有更多 */
.loading-container {
padding: 32rpx 0;
display: flex;
justify-content: center;
align-items: center;
}
.no-more {
padding: 32rpx 0;
display: flex;
justify-content: center;
align-items: center;
}
.no-more-text {
font-size: 28rpx;
color: #9ca3af;
}
/* 响应式适配 */
@media (max-width: 750px) {
.header {
padding: 24rpx 24rpx 16rpx;
}
.header-content {
padding-top: 24rpx;
}
.header-title {
font-size: 32rpx;
}
.view-mode-toggle {
padding: 24rpx 24rpx 12rpx;
}
.toggle-option {
padding: 12rpx;
font-size: 30rpx; /* 保持较大字体 */
}
.status-tabs {
padding: 18rpx 24rpx;
}
.order-card {
padding: 24rpx;
}
.vehicle-image {
width: 160rpx;
height: 160rpx;
}
.vehicle-details {
height: 160rpx;
padding-left: 16rpx;
}
.vehicle-name {
font-size: 32rpx;
}
.vehicle-specs,
.vehicle-battery {
font-size: 26rpx; /* 保持较大字体 */
}
.vehicle-price {
font-size: 32rpx;
}
.order-actions {
gap: 16rpx;
}
}
\ No newline at end of file
This diff is collapsed. Click to expand it.