uniapp-ZHSQ/packages/park/monthlyPaymentOrder/index.vue

<template>
    <view class="container">
        <view class="tabs">
            <view v-for="(item, index) in categoryList" :key="index"
                :class="['tabItem', selectedTab === index ? 'active2' : '']" @click="selectTab(index, item)">
                {{ item.category_name }}
            </view>
        </view>

        <!-- 订单列表 -->
        <view class="order-list">
            <view 
                v-for="(order, index) in filteredOrders" 
                :key="index" 
                class="order-card"
            >
                <view class="order-header">
                    <text class="order-number">订单编号：{{ order.orderNumber }}</text>
                    <text 
                        class="order-status"
                        :class="{
                            'pending': order.status === 'pending',
                            'using': order.status === 'using',
                            'expired': order.status === 'expired'
                        }"
                    >
                        {{ order.statusText }}
                    </text>
                </view>
                <view class="order-content">
                    <view class="order-item">
                        <text class="order-label">车场名称</text>
                        <text class="order-value">{{ order.parkName }}</text>
                    </view>
                    <view class="order-item">
                        <text class="order-label">车牌号</text>
                        <text class="order-value">{{ order.carPlate }}</text>
                    </view>
                    <view class="order-item">
                        <text class="order-label">包月月数</text>
                        <text class="order-value">{{ order.monthCount }}个月</text>
                    </view>
                    <view class="order-item">
                        <text class="order-label">开始时间</text>
                        <text class="order-value">{{ order.startTime }}</text>
                    </view>
                    <view class="order-item">
                        <text class="order-label">到期时间</text>
                        <text class="order-value">{{ order.endTime }}</text>
                    </view>
                    <view class="order-item amount">
                        <text class="order-label">订单金额</text>
                        <text class="order-value amount-value">¥{{ order.amount }}</text>
                    </view>
                    
                    <!-- 根据订单状态显示不同内容 -->
                    <view v-if="order.status === 'using' || order.status === 'expired'" class="order-item">
                        <text class="order-label">付款时间</text>
                        <text class="order-value">{{ order.payTime }}</text>
                    </view>
                    
                    <view v-if="order.status === 'using'" class="order-item">
                        <text class="order-label">支付状态</text>
                        <text class="order-value paid">已支付</text>
                    </view>
                </view>
                
                <!-- 待支付订单显示操作按钮 -->
                <view v-if="order.status === 'pending'" class="order-footer">
                    <view class="cancel-button" @tap="cancelOrder(order)">取消订单</view>
                    <view class="pay-button" @tap="goToPayment(order)">去支付</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {
    isPhone,
    picUrl,
    request,
    upload,
    NavgateTo
} from '../../../utils';

export default {
    data() {
        return {
            categoryList: [
                {
                    category_name: '全部',
                    category_id: 0
                },
                {
                    category_name: '待支付',
                    category_id: 1
                },
                {
                    category_name: '使用中',
                    category_id: 2
                },
                {
                    category_name: '已过期',
                    category_id: 3
                },
            ],
            selectedTab: 0,
            orders: [
                // 待支付订单
                {
                    id: 1,
                    orderNumber: '123456789145',
                    status: 'pending',
                    statusText: '待支付',
                    parkName: '智行光彩生态停车场',
                    carPlate: '冀T11033',
                    monthCount: 1,
                    startTime: '2025-06-04 00:00:00',
                    endTime: '2025-06-04 23:59:59',
                    amount: '360.00'
                },
                // 使用中订单
                {
                    id: 2,
                    orderNumber: '123456789145',
                    status: 'using',
                    statusText: '使用中',
                    parkName: '智行光彩生态停车场',
                    carPlate: '冀T11033',
                    monthCount: 1,
                    startTime: '2025-06-04 00:00:00',
                    endTime: '2025-06-04 23:59:59',
                    amount: '360.00',
                    payTime: '2025-06-04 23:59:59'
                },
                // 已过期订单
                {
                    id: 3,
                    orderNumber: '123456789145',
                    status: 'expired',
                    statusText: '已过期',
                    parkName: '智行光彩生态停车场',
                    carPlate: '冀T11033',
                    monthCount: 1,
                    startTime: '2025-06-04 00:00:00',
                    endTime: '2025-06-04 23:59:59',
                    amount: '360.00',
                    payTime: '2025-06-04 23:59:59'
                }
            ]
        }
    },
    computed: {
        // 根据选中的tab过滤订单
        filteredOrders() {
            if (this.selectedTab === 0) {
                // 全部订单
                return this.orders;
            } else if (this.selectedTab === 1) {
                // 待支付订单
                return this.orders.filter(order => order.status === 'pending');
            } else if (this.selectedTab === 2) {
                // 使用中订单
                return this.orders.filter(order => order.status === 'using');
            } else if (this.selectedTab === 3) {
                // 已过期订单
                return this.orders.filter(order => order.status === 'expired');
            }
            return this.orders;
        }
    },
    methods: {
        selectTab(index, item) {
            this.selectedTab = index;
        },
        // 取消订单
        cancelOrder(order) {
            console.log('取消订单:', order);
        },
        // 去支付
        goToPayment(order) {
            NavgateTo('../parkOrderDetail/index');
        }
    }
}
</script>

<style>
@import url('./index.css');
</style>