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://wechat-img-file.oss-cn-beijing.aliyuncs.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://wechat-img-file.oss-cn-beijing.aliyuncs.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://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png"
                        mode="aspectFit" style="width: 40rpx; height: 40rpx;"></image>
                </view> -->
                <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.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 params = {
                user_id: uni.getStorageSync('userId'),
                parking_id: this.itemObj.selectedParkId,
                car_id: this.itemObj.selectedCarPlateId,
                billing_rules: this.itemObj.selectedBillingRule,
                month_count: this.itemObj.monthCount,
                total_amount: this.itemObj.paymentAmount,
                start_time: this.itemObj.startTime,
                end_time: this.itemObj.endTime,
            }
            request(apiArr.monthCardCreate, "POST", params).then((resVal) => {
                // 根据平台设置不同的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

                const param = {
                    order_id: resVal.order_id,
                    user_id: uni.getStorageSync('userId'),
                    trans_type: 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) {
        this.itemObj = JSON.parse(decodeURIComponent(options.item));
    }
}
</script>

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