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

<template>
    <view class="order-detail-container">
        <!-- 支付金额头部 -->
        <view class="payment-header">
            <view class="amount-info">
                <text class="amount-symbol">¥</text>
                <text class="amount-value">{{ itemObj.paymentAmount }}</text>
                <text class="payment-status">待付款</text>
            </view>
        </view>

        <!-- 订单详情内容 -->
        <view class="order-content">
            <!-- 停车场信息 -->
            <view class="detail-item">
                <text class="detail-label">停车场</text>
                <view class="detail-value">
                    <text class="park-type">{{ itemObj.selectedParkType == 1 ? '地上' : '地下' }}</text>
                    <text class="park-name">{{ itemObj.headerTitle }}</text>
                </view>
            </view>

            <!-- 车牌号 -->
            <view class="detail-item">
                <text class="detail-label">车牌号</text>
                <text class="detail-value">{{ itemObj.selectedCarPlate }}</text>
            </view>

            <!-- 开始时间 -->
            <view class="detail-item">
                <text class="detail-label">开始时间</text>
                <text class="detail-value">{{ itemObj.startTime }}</text>
            </view>

            <!-- 结束时间 -->
            <view class="detail-item">
                <text class="detail-label">结束时间</text>
                <text class="detail-value">{{ itemObj.endTime }}</text>
            </view>
        </view>

        <!-- 支付方式选择 -->
        <view class="payment-method">
            <view class="method-item">
                <view class="method-info">
                    <image src="https://static.hshuishang.com/property-img-file/com_wechat.png"
                        mode="aspectFit" class="method-info-img"></image>
                    <text class="method-text">微信支付</text>
                </view>
                <!-- <view class="payment-select" v-if="selectedPayment === 'wechat'">
                    <image src="https://static.hshuishang.com/property-img-file/com_check2.png"
                        mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
                </view>
                <view class="payment-select" v-else>
                    <image src="https://static.hshuishang.com/property-img-file/com_check1.png"
                        mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
                </view> -->
                <image src="https://static.hshuishang.com/property-img-file/com_check2.png"
                    mode="aspectFit" style="width: 30rpx; height: 30rpx;"></image>
            </view>
        </view>

        <!-- 底部支付栏 -->
        <view class="bottom-payment">
            <view class="total-amount">
                <text class="total-label">合计¥</text>
                <text class="total-value">{{ itemObj.paymentAmount }}</text>
            </view>
            <view class="pay-button" @tap="submitPayment">
                <text class="pay-text">立即支付</text>
            </view>
        </view>
    </view>
</template>

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

export default {
    data() {
        return {
            itemObj: {}
        }
    },
    methods: {
        // 提交支付
        submitPayment() {
            const param = {
                order_id: this.itemObj.order_id,
                user_id: uni.getStorageSync('userId'),
                trans_type: this.itemObj.trans_type,
            }
            request(apiArr.monthCardOrderPreorder, "POST", param).then(res => {
                if (res && res.timeStamp && res.nonceStr && res.package && res.signType && res.paySign) {
                    // 调用微信支付
                    uni.requestPayment({
                        timeStamp: res.timeStamp,
                        nonceStr: res.nonceStr,
                        package: res.package,
                        signType: res.signType,
                        paySign: res.paySign,
                        success: (payRes) => {
                            const params = {
                                order_id: resVal.order_id,
                            }
                            request(apiArr.monthCardOrderQuery, "POST", params).then(res => {
                                this.boxshadow1 = true
                            })

                        },
                        fail: (payErr) => {
                            uni.showToast({
                                title: payErr.errMsg == 'requestPayment:fail cancel' ? '用户取消支付' : '支付失败',
                                icon: 'none'
                            })
                        },
                        complete: () => {
                            // 支付完成后的回调，无论成功失败都会执行
                        }
                    })
                } else {
                    console.error("获取支付参数失败，缺少必要参数")
                    uni.showToast({
                        title: '获取支付信息失败',
                        icon: 'none'
                    })
                }
            })
        }
    },
    onLoad(options) {
        const rawData = JSON.parse(decodeURIComponent(options.item));

        // 检查数据格式是否为month_card_order_list
        if (rawData.carInfo) {
            // 根据平台设置不同的trans_type值
            // 小程序: 71, App: 51
            const systemInfo = uni.getSystemInfoSync();
            let trans_type = 51; // 默认App环境

            // 运行时判断是否为小程序环境
            if (systemInfo.platform === 'devtools' || systemInfo.platform === 'unknown') {
                trans_type = 71; // 开发工具或未知环境默认为小程序
            }

            // 条件编译：针对不同平台设置不同值
            // #ifdef MP
            trans_type = 71; // 所有小程序平台
            // #endif

            // #ifdef APP-PLUS
            trans_type = 51; // App平台
            // #endif

            this.itemObj = {
                endTime: rawData.carInfo.deadline_time || '',
                headerTitle: rawData.parkingInfo.parking_name || '',
                monthCount: rawData.month_num || 0,
                monthPrice: rawData.monthly_rental_fee || 0,
                order_id: rawData.id || 0,
                paymentAmount: rawData.amount || 0,
                selectedBillingRule: rawData.billing_rule_id || '',
                selectedCarPlate: rawData.carInfo.car_no || '',
                selectedCarPlateId: rawData.carInfo.id || 0,
                selectedParkId: rawData.parking_id || 0,
                selectedParkType: rawData.parkingInfo.space_type || 0,
                startTime: rawData.carInfo.enable_time || '',
                trans_type: trans_type,
                user_id: rawData.user_id || 0
            };
        } else {
            // 使用原始数据格式
            this.itemObj = rawData;
        }
    }
}
</script>

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