You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
235 lines
4.6 KiB
235 lines
4.6 KiB
<template>
|
|
<view class="content">
|
|
<navbar title="历史订单" leftClick @leftClick="$utils.navigateBack" />
|
|
|
|
<!-- 空数据状态 -->
|
|
<view v-if="runns.length < 1" class="re-empty">
|
|
<view class="empty-icon">📋</view>
|
|
<view class="empty-text">暂无历史订单数据</view>
|
|
</view>
|
|
|
|
<!-- 订单列表 -->
|
|
<view v-for="(item, index) in runns" :key="index" class="item-card">
|
|
<view class="item-header">
|
|
<view class="item-address">{{ item.address }}</view>
|
|
<view class="item-time">{{ $timeUtils.formatTime(item.create_time) }}</view>
|
|
</view>
|
|
<view class="item-info">
|
|
<view class="info-item">到场时间：{{ $timeUtils.formatTime2Day(item.in_time) }}</view>
|
|
<view class="info-item">计划数量：{{ item.mi }}m³/趟</view>
|
|
</view>
|
|
<view class="item-buttons">
|
|
<view class="item-button" @click="clickDetail(item.id)">查看</view>
|
|
<view class="item-button btn2" @click="clickStep(item.id)">进度</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navbar from '@/components/base/navbar.vue'
|
|
|
|
export default {
|
|
name: 'UserHistory',
|
|
components: {
|
|
navbar
|
|
},
|
|
data() {
|
|
return {
|
|
status: 0,
|
|
seacht: 0,
|
|
waits: [],
|
|
runns: [],
|
|
endes: [],
|
|
input: ""
|
|
};
|
|
},
|
|
onLoad() {
|
|
uni.setNavigationBarTitle({
|
|
title: '历史订单'
|
|
});
|
|
},
|
|
mounted() {
|
|
this.seacht = 0;
|
|
this.loadPage();
|
|
},
|
|
methods: {
|
|
clickDetail(id) {
|
|
uni.navigateTo({
|
|
url: `/pages_order/user/orderd?id=${id}`
|
|
});
|
|
},
|
|
clickStep(id) {
|
|
uni.navigateTo({
|
|
url: `/pages_order/user/steps?id=${id}`
|
|
});
|
|
},
|
|
loadPage() {
|
|
uni.showLoading({});
|
|
// 模拟数据，实际项目中应该调用API
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
// 模拟历史订单数据
|
|
this.runns = [
|
|
{
|
|
id: 1,
|
|
address: "北京市朝阳区建国门外大街1号",
|
|
create_time: Date.now() - 86400000, // 1天前
|
|
in_time: Date.now() + 3600000, // 1小时后
|
|
mi: 25
|
|
},
|
|
{
|
|
id: 2,
|
|
address: "上海市浦东新区陆家嘴环路1000号",
|
|
create_time: Date.now() - 172800000, // 2天前
|
|
in_time: Date.now() - 86400000, // 1天前
|
|
mi: 30
|
|
},
|
|
{
|
|
id: 3,
|
|
address: "广州市天河区珠江新城花城大道85号",
|
|
create_time: Date.now() - 259200000, // 3天前
|
|
in_time: Date.now() - 172800000, // 2天前
|
|
mi: 20
|
|
}
|
|
];
|
|
}, 1000);
|
|
|
|
// 实际API调用代码（注释掉）
|
|
// this.$httpGet("/api/order/history", {}, (res) => {
|
|
// uni.hideLoading({});
|
|
// if (res.data) {
|
|
// this.runns = this.$utils.toArray(res.data);
|
|
// }
|
|
// });
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
page {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.content {
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
padding: 0 30rpx;
|
|
}
|
|
|
|
// 空数据状态
|
|
.re-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 200rpx 0;
|
|
text-align: center;
|
|
|
|
.empty-icon {
|
|
font-size: 120rpx;
|
|
margin-bottom: 30rpx;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 28rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
// 订单卡片
|
|
.item-card {
|
|
position: relative;
|
|
width: calc(100vw - 60rpx);
|
|
height: 236rpx;
|
|
background: #ffffff;
|
|
padding: 30rpx;
|
|
margin: 20rpx 0;
|
|
border-radius: 12rpx;
|
|
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
|
|
font-size: 24rpx;
|
|
line-height: 42rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
// 订单头部信息
|
|
.item-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.item-address {
|
|
flex: 1;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.item-time {
|
|
color: #aaa;
|
|
width: 160rpx;
|
|
text-align: right;
|
|
font-size: 24rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
// 订单信息
|
|
.item-info {
|
|
margin-bottom: 30rpx;
|
|
}
|
|
|
|
.info-item {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
line-height: 36rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
// 按钮区域
|
|
.item-buttons {
|
|
position: absolute;
|
|
right: 30rpx;
|
|
bottom: 30rpx;
|
|
display: flex;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.item-button {
|
|
width: 122rpx;
|
|
height: 52rpx;
|
|
line-height: 52rpx;
|
|
border-radius: 8rpx;
|
|
border: 2rpx solid #F70303;
|
|
font-size: 28rpx;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
color: #F70303;
|
|
background-color: transparent;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
background-color: #F70303;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.btn2 {
|
|
border-color: #007AFF;
|
|
color: #007AFF;
|
|
|
|
&:active {
|
|
background-color: #007AFF;
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style>
|