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

<template>
    <view class="order-detail-container">
        <!-- 订单状态区域 -->
        <view class="order-status-section">
            <view class="status-left">
                <text class="status-title">订单已支付</text>
                <text class="park-name">{{ orderDetail.parking.parking_name }}</text>
            </view>
            <view class="status-right">
                <image class="success-icon"
                    src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/park/park_orderOk.png" mode="aspectFit">
                </image>
            </view>
        </view>

        <!-- 金额信息区域 -->
        <view class="amount-section">
            <view class="amount-item" @tap="toggleAmountExpand">
                <text class="amount-label">实付金额</text>
                <view class="amount-value">
                    <text>¥{{ orderDetail.pay_method/100 }}</text>
                    <u-icon :name="amountExpanded ? 'arrow-up' : 'arrow-down'" size="28"></u-icon>

                </view>
            </view>
            <view class="amount-item" v-show="amountExpanded">
                <text class="amount-label2">订单金额</text>
                <text>¥{{ orderDetail.pay_method/100 }}</text>
            </view>
        </view>

        <!-- 电商服务区域 -->
        <view class="service-section">
            <text class="section-title">订单信息</text>

            <view class="info-item">
                <text class="info-label">车牌号码</text>
                <text>{{ orderDetail.record_info.car_number }}</text>
            </view>

            <view class="info-item">
                <text class="info-label">交易时间</text>
                <text>{{ orderDetail.pay_time }}</text>
            </view>

            <view class="info-item">
                <text class="info-label">停车时长</text>
                <text>{{ calculateParkingDuration() }}</text>
            </view>

            <view class="info-item">
                <text class="info-label">订单类型</text>
                <text>停车</text>
            </view>

            <view class="info-item">
                <text class="info-label">支付方式</text>
                <text>{{ orderDetail.pay_method == 1 ? '微信' : orderDetail.pay_method == 2 ? '支付宝' : '其他' }}</text>
            </view>

            <view class="info-item">
                <text class="info-label">订单号</text>
                <view class="order-number-container">
                    <text>{{ orderDetail.order_no }}</text>
                    <image class="copy-icon" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/myOrder/copy.png"
                        mode="aspectFit" @tap="copyOrderNumber"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {
    isPhone,
    picUrl,
    request,
    upload,
    NavgateTo
} from '../../../utils';
import { apiArr } from '@/api/park.js'

export default {
    data() {
        return {
            // 控制金额是否展开
            amountExpanded: false,
            // 订单详情数据
            orderDetail: {}
        }
    },
    methods: {
        // 切换金额展开状态
        toggleAmountExpand() {
            this.amountExpanded = !this.amountExpanded;
        },

        // 复制订单号
        copyOrderNumber() {
            // 使用uni.setClipboardData API复制订单号
            uni.setClipboardData({
                data: this.orderDetail.order_no,
                success: () => {
                    uni.showToast({
                        title: '复制成功',
                        icon: 'success',
                        duration: 2000
                    });
                },
                fail: () => {
                    uni.showToast({
                        title: '复制失败',
                        icon: 'none',
                        duration: 2000
                    });
                }
            });
        },

        // 计算停车时长
        calculateParkingDuration() {
            if (!this.orderDetail || !this.orderDetail.record_info) {
                return '0分钟';
            }

            const inTime = new Date(this.orderDetail.record_info.in_time);
            const outTime = new Date(this.orderDetail.record_info.out_time);

            // 计算时间差（毫秒）
            const diffMs = outTime - inTime;

            // 转换为分钟
            const diffMinutes = Math.floor(diffMs / (1000 * 60));

            if (diffMinutes < 60) {
                return `${diffMinutes}分钟`;
            } else {
                const hours = Math.floor(diffMinutes / 60);
                const minutes = diffMinutes % 60;
                if (minutes === 0) {
                    return `${hours}小时`;
                } else {
                    return `${hours}小时${minutes}分钟`;
                }
            }
        }
    },
    onLoad(options) {
        console.log("接收的原始参数:", options);
        if (options && options.order) {
            try {
                // 先解码，再解析
                const decodedOrder = decodeURIComponent(options.order);
                this.orderDetail = JSON.parse(decodedOrder);
                console.log("解析成功:", this.orderDetail);
            } catch (err) {
                console.error("解析失败:", err);
                // 容错处理（如提示加载失败）
            }
        }
    }
}
</script>

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