152 lines
5.4 KiB
Vue
152 lines
5.4 KiB
Vue
<template>
|
||
<view class="order-list">
|
||
<!-- 订单按月分组显示 -->
|
||
<view class="month-group" v-for="monthGroup in orderData" :key="monthGroup.month">
|
||
<view class="month-header">
|
||
<text class="month-title">{{ monthGroup.month }}</text>
|
||
<text class="month-expense">支出¥{{ monthGroup.totalExpense }}元</text>
|
||
</view>
|
||
|
||
<!-- 订单列表 -->
|
||
<view class="order-item" v-for="order in monthGroup.orders" :key="order.id" @tap="viewOrderDetail(order)">
|
||
<view class="order-left">
|
||
<view class="order-type">
|
||
<view class="order-type1">
|
||
<image class="order-icon"
|
||
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_p.png"
|
||
mode="aspectFit"></image>
|
||
<text class="order-type-text">停车</text>
|
||
</view>
|
||
<text class="order-status">{{ order.statusText }}</text>
|
||
</view>
|
||
|
||
<view class="order-park-info">
|
||
<text class="order-park-name">{{ order.parkName }}</text>
|
||
<text class="order-amount">¥{{ order.amount }}</text>
|
||
</view>
|
||
|
||
<view class="order-car-info">
|
||
<text class="order-car-number">{{ order.carNumber }}</text>
|
||
<text class="order-car-type">{{ order.carType }}</text>
|
||
</view>
|
||
|
||
<text class="order-time">{{ order.time }}</text>
|
||
</view>
|
||
<view class="delete-button" @tap.stop="deleteOrder(order)">
|
||
<u-icon name="trash" size="45rpx"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 空状态显示 -->
|
||
<view class="empty-state" v-if="orderData.length === 0">
|
||
<image class="empty-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/empty_order.png"
|
||
mode="aspectFit"></image>
|
||
<text class="empty-text">暂无停车订单</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
isPhone,
|
||
picUrl,
|
||
request,
|
||
upload,
|
||
NavgateTo
|
||
} from '../../../utils';
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 模拟订单数据，实际项目中可能从API获取
|
||
orderData: [
|
||
{
|
||
month: '2025年08月',
|
||
totalExpense: '16.00',
|
||
orders: [
|
||
{
|
||
id: 1,
|
||
parkName: '上海公馆停车场',
|
||
amount: '8.00',
|
||
carNumber: '冀TQ2F09',
|
||
carType: '临时车',
|
||
carTypeClass: 'temporary',
|
||
time: '2025-08-04 18:46',
|
||
status: 'paid',
|
||
statusText: '已支付'
|
||
},
|
||
{
|
||
id: 2,
|
||
parkName: '上海公馆停车场',
|
||
amount: '8.00',
|
||
carNumber: '冀TQ2F09',
|
||
carType: '临时车',
|
||
carTypeClass: 'temporary',
|
||
time: '2025-08-04 18:46',
|
||
status: 'paid',
|
||
statusText: '已支付'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
month: '2025年08月',
|
||
totalExpense: '16.00',
|
||
orders: [
|
||
{
|
||
id: 3,
|
||
parkName: '上海公馆停车场',
|
||
amount: '8.00',
|
||
carNumber: '冀TQ2F09',
|
||
carType: '月租卡',
|
||
carTypeClass: 'monthly',
|
||
time: '2025-08-04 18:46',
|
||
status: 'paid',
|
||
statusText: '已支付'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
// 查看订单详情
|
||
viewOrderDetail(order) {
|
||
NavgateTo('../orderDetail/index')
|
||
},
|
||
|
||
// 删除订单方法
|
||
deleteOrder(order) {
|
||
console.log("🚀 ~ deleteOrder ~ order:", order)
|
||
uni.showModal({
|
||
title: '确认删除订单',
|
||
content: '你确定删除订单吗？删除之后你将无法再找回该订单',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
//确认删除
|
||
uni.showToast({
|
||
title: '删除成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
});
|
||
} else if (res.cancel) {
|
||
//
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
// 获取订单数据
|
||
getOrderData() {
|
||
}
|
||
},
|
||
onLoad() {
|
||
// 页面加载时获取订单数据
|
||
this.getOrderData();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url('./index.css');
|
||
</style> |