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 orders" :key="index" class="order-card">
                <view class="order-header">
                    <text class="order-number">订单编号：{{ order.order_sn }}</text>
                    <image src="https://static.hshuishang.com/myOrder/copy.png" class="copy-icon"
                        @click="copyOrderNo(order.order_sn)" />
                    <text class="order-status" :class="{
                        'pending': order.status == 1,
                        'using': order.status == 2,
                        'expired': order.status == 3
                    }">
                        {{ order.status == 1 ? '待支付' : order.status == 2 ? '使用中' : order.status == 3 ? '已过期' : '' }}
                    </text>
                </view>
                <view class="order-content">
                    <view class="order-item">
                        <text class="order-label">车场名称</text>
                        <text class="order-value">{{ order.parkingInfo.parking_name }}</text>
                    </view>
                    <view class="order-item">
                        <text class="order-label">车牌号</text>
                        <text class="order-value">{{ order.carInfo.car_no }}</text>
                    </view>
                    <view class="order-item">
                        <text class="order-label">包月月数</text>
                        <text class="order-value">{{ order.month_num }}个月</text>
                    </view>
                    <view class="order-item">
                        <text class="order-label">开始时间</text>
                        <text class="order-value">{{ order.carInfo.enable_time }}</text>
                    </view>
                    <view class="order-item">
                        <text class="order-label">到期时间</text>
                        <text class="order-value">{{ order.carInfo.deadline_time }}</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 == '2' || order.status === '3'" class="order-item">
                        <text class="order-label">付款时间</text>
                        <text class="order-value">{{ order.pay_time }}</text>
                    </view>

                    <view v-if="order.status == '2'" class="order-item">
                        <text class="order-label">支付状态</text>
                        <text class="order-value paid">已支付</text>
                    </view>
                </view>

                <!-- 待支付订单显示操作按钮 -->
                <view v-if="order.status == 1" 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';
import { apiArr } from '@/api/park.js'

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: []
        }
    },
    methods: {
        //订单编号复制
        copyOrderNo(order_sn) {
            uni.setClipboardData({
                data: order_sn,
                success: () => {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'success'
                    });
                },
                fail: () => {
                    uni.showToast({
                        title: '复制失败',
                        icon: 'none'
                    });
                }
            });
        },
        selectTab(index, item) {
            this.selectedTab = index;
            this.getOrderList()
        },
        // 取消订单
        cancelOrder(order) {
            console.log('取消订单:', order);
        },
        // 去支付
        goToPayment(order) {
            NavgateTo('../parkOrderDetail/index?item=' + JSON.stringify(order));
        },
        // 获取订单列表
        getOrderList() {
            const params = {
                user_id: uni.getStorageSync('userId'),
                order_status: this.selectedTab,
            }
            if (params.order_status == 0) {
                params.order_status = ''
            }
            request(apiArr.monthCardOrderList, "POST", params).then(res => {
                this.orders = res.month_card_order_list;
            })
        },
        onLoad() {
            this.getOrderList()
        }
    },
}
</script>

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