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' {
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
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-03 12:55:54
* @FilePath: /jgdl/src/pages/myFavorites/index.vue
* @Description: 文件描述
* @LastEditTime: 2025-07-03 15:55:17
* @FilePath: /jgdl/src/pages/myOrders/index.vue
* @Description: 订单管理页面
-->
<template>
<div class="red">{{ str }}</div>
<view class="order-management-page">
<nut-sticky>
<!-- 买车/卖车切换 -->
<view class="view-mode-toggle">
<view class="toggle-container">
<view
class="toggle-option"
:class="{ active: viewMode === 'bought' }"
@click="setViewMode('bought')"
>
我买的车
</view>
<view
class="toggle-option"
:class="{ active: viewMode === 'sold' }"
@click="setViewMode('sold')"
>
我卖的车
</view>
</view>
</view>
<!-- 状态筛选标签 -->
<view class="status-tabs">
<view
class="tab-item"
:class="{ active: activeTab === 'all' }"
@click="setActiveTab('all')"
>
全部
</view>
<view
v-if="viewMode === 'bought'"
class="tab-item"
:class="{ active: activeTab === 'pending' }"
@click="setActiveTab('pending')"
>
待支付
</view>
<view
class="tab-item"
:class="{ active: activeTab === 'completed' }"
@click="setActiveTab('completed')"
>
已完成
</view>
<view
class="tab-item"
:class="{ active: activeTab === 'cancelled' }"
@click="setActiveTab('cancelled')"
>
已取消
</view>
</view>
</nut-sticky>
<!-- 订单列表 -->
<view class="order-list">
<!-- 滚动列表 -->
<scroll-view
class="order-scroll-view"
:style="scrollStyle"
:scroll-y="true"
@scrolltolower="loadMore"
@scroll="scroll"
:lower-threshold="50"
:enable-flex="false"
>
<!-- 空状态 -->
<view v-if="filteredOrders.length === 0" class="empty-state">
<text class="empty-text">暂无订单</text>
</view>
<!-- 订单卡片 -->
<view v-else>
<view
v-for="order in filteredOrders"
:key="order.id"
class="order-card"
>
<!-- 订单头部信息 -->
<view class="order-header">
<text class="order-date">{{ order.date }}</text>
<text class="order-status" :class="getStatusClass(order.status)">
{{ getStatusText(order.status) }}
</text>
</view>
<!-- 车辆信息 -->
<nut-row :gutter="12" class="vehicle-info">
<nut-col :span="6">
<image
:src="order.vehicle.imageUrl"
:alt="order.vehicle.name"
class="vehicle-image"
mode="aspectFill"
/>
</nut-col>
<nut-col :span="18">
<view class="vehicle-details">
<text class="vehicle-name">{{ order.vehicle.name }}</text>
<text class="vehicle-specs">
{{ order.vehicle.year }} | {{ order.vehicle.mileage }}
</text>
<text class="vehicle-battery">{{ order.vehicle.batteryCapacity }}</text>
<text class="vehicle-price">¥{{ order.vehicle.price }}</text>
</view>
</nut-col>
</nut-row>
<!-- 操作按钮 -->
<view class="order-actions">
<!-- 买车模式：待支付状态 -->
<template v-if="viewMode === 'bought' && order.status === 'pending'">
<nut-button
type="primary"
size="small"
@click="handlePayment(order.id)"
>
去支付
</nut-button>
</template>
<!-- 已完成状态 -->
<template v-if="order.status === 'completed'">
<nut-button
type="default"
size="small"
@click="viewOrderDetail(order.id)"
>
查看详情
</nut-button>
<nut-button
type="primary"
size="small"
@click="rateOrder(order.id)"
class="ml-2"
>
评价
</nut-button>
</template>
<!-- 已取消状态 -->
<template v-if="order.status === 'cancelled'">
<nut-button
type="default"
size="small"
@click="deleteOrder(order.id)"
>
删除订单
</nut-button>
</template>
</view>
</view>
</view>
<!-- 加载更多指示器 -->
<view v-if="loading" class="loading-container">
<text class="loading-text">加载中...</text>
</view>
<!-- 没有更多数据 -->
<view v-if="!hasMore && filteredOrders.length > 0" class="no-more">
<text class="no-more-text">没有更多订单了</text>
</view>
</scroll-view>
</view>
</view>
</template>
<script setup>
// import '@tarojs/taro/html.css'
import { ref } from "vue";
import { ref, computed, onMounted } from 'vue'
import Taro from '@tarojs/taro'
import './index.less'
// 页面状态
const activeTab = ref('all')
const viewMode = ref('bought')
const loading = ref(false)
const hasMore = ref(true)
// 模拟订单数据
const boughtOrders = ref([
{
id: '1',
date: '2023-11-15 14:30',
status: 'pending',
vehicle: {
name: '小牛 U1 Pro',
year: '2022年',
mileage: '续航120km',
batteryCapacity: '电池容量：1.5kWh',
price: 3999,
imageUrl: 'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
}
},
{
id: '2',
date: '2023-10-28 09:15',
status: 'completed',
vehicle: {
name: '雅迪 G5',
year: '2021年',
mileage: '续航80km',
batteryCapacity: '电池容量：1.2kWh',
price: 2599,
imageUrl: 'https://images.unsplash.com/photo-1558981403-c5f9899a28bc?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
}
},
{
id: '3',
date: '2023-09-05 16:45',
status: 'cancelled',
vehicle: {
name: '绿源 MN5',
year: '2023年',
mileage: '续航100km',
batteryCapacity: '电池容量：1.8kWh',
price: 4299,
imageUrl: 'https://images.unsplash.com/photo-1567922045116-2a00fae2ed03?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
}
}
])
const soldOrders = ref([
{
id: '4',
date: '2023-11-10 11:20',
status: 'pending',
vehicle: {
name: '爱玛 A3',
year: '2022年',
mileage: '续航90km',
batteryCapacity: '电池容量：1.3kWh',
price: 3299,
imageUrl: 'https://images.unsplash.com/photo-1591637333184-19aa84b3e01f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
}
},
{
id: '5',
date: '2023-10-15 13:45',
status: 'completed',
vehicle: {
name: '台铃 战速',
year: '2023年',
mileage: '续航110km',
batteryCapacity: '电池容量：1.6kWh',
price: 3599,
imageUrl: 'https://images.unsplash.com/photo-1558980664-3a031cf67ea8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60'
}
}
])
/**
* 根据当前视图模式和筛选条件获取过滤后的订单列表
*/
const filteredOrders = computed(() => {
const orders = viewMode.value === 'bought' ? boughtOrders.value : soldOrders.value
if (activeTab.value === 'all') {
return orders
}
return orders.filter(order => {
if (activeTab.value === 'pending') return order.status === 'pending'
if (activeTab.value === 'completed') return order.status === 'completed'
if (activeTab.value === 'cancelled') return order.status === 'cancelled'
return true
})
})
// 滚动样式
const scrollStyle = computed(() => {
return {
height: 'calc(100vh - 320rpx)' // 减去头部和标签的高度
}
})
// 定义响应式数据
const str = ref('Demo页面')
/**
* 设置视图模式（买车/卖车）
*/
const setViewMode = (mode) => {
viewMode.value = mode
// 重置列表加载状态
resetListState()
}
/**
* 设置活跃的状态标签
*/
const setActiveTab = (tab) => {
activeTab.value = tab
// 重置列表加载状态
resetListState()
}
/**
* 重置列表加载状态
*/
const resetListState = () => {
loading.value = false
hasMore.value = true
}
/**
* 滚动事件处理
*/
const scroll = (e) => {
// 可以在这里处理滚动事件
}
/**
* 加载更多数据
*/
const loadMore = () => {
if (loading.value || !hasMore.value) return
loading.value = true
// 模拟加载更多数据
setTimeout(() => {
loading.value = false
// 这里可以添加实际的加载更多逻辑
// 如果没有更多数据，设置 hasMore.value = false
}, 1000)
}
/**
* 获取订单状态文本
*/
const getStatusText = (status) => {
switch (status) {
case 'pending':
return '待支付'
case 'completed':
return '已完成'
case 'cancelled':
return '已取消'
default:
return ''
}
}
/**
* 获取订单状态样式类
*/
const getStatusClass = (status) => {
switch (status) {
case 'pending':
return 'status-pending'
case 'completed':
return 'status-completed'
case 'cancelled':
return 'status-cancelled'
default:
return ''
}
}
// 页面导航相关方法可以在需要时添加
/**
* 处理支付
*/
const handlePayment = (orderId) => {
Taro.showToast({
title: '跳转到支付页面',
icon: 'none'
})
// TODO: 实现支付逻辑
}
/**
* 查看订单详情
*/
const viewOrderDetail = (orderId) => {
Taro.navigateTo({
url: `/pages/orderDetail/index?id=${orderId}`
})
}
/**
* 评价订单
*/
const rateOrder = (orderId) => {
Taro.showToast({
title: '跳转到评价页面',
icon: 'none'
})
// TODO: 实现评价逻辑
}
/**
* 删除订单
*/
const deleteOrder = (orderId) => {
Taro.showModal({
title: '确认删除',
content: '确定要删除这个订单吗？',
success: (res) => {
if (res.confirm) {
// TODO: 实现删除订单逻辑
Taro.showToast({
title: '订单已删除',
icon: 'success'
})
}
}
})
}
// 页面加载时的初始化
onMounted(() => {
// TODO: 加载订单数据
})
</script>
<script>
export default {
name: "demoPage",
name: "OrderManagementPage",
};
</script>
<style lang="less">
/* 样式已移至 index.less 文件 */
</style>
......