book-hi/pages-car/pages/cashier-desk.vue

<template>
    <view class="cashier-desk">
        <view class="view-top">
        </view>
        <view class="payment-methods">
            <u-radio-group v-model="formData.payType" @change="radioGroupChange">
                <!-- #ifdef MP-WEIXIN -->
                <view class="payment-item">
                    <view class="left">
                        <image src="/static/payment/pay1.png" class="payment-icon"></image>
                        <text>微信支付</text>
                    </view>
                    <u-radio active-color="#38C148" name="2" />
                </view>
                <!-- #endif -->
                <!-- #ifdef MP-ALIPAY -->
                <view class="payment-item">
                    <view class="left">
                        <image src="/static/payment/alipay.png" class="payment-icon"></image>
                        <text>支付宝支付</text>
                    </view>
                    <u-radio active-color="#38C148" name="2" />
                </view>
                <!-- #endif -->

                <view class="payment-item">
                    <view class="left">
                        <image src="/static/payment/pay2.png" class="payment-icon"></image>
                        <text>余额支付(余额{{ orderInfo.accountMoney || 0 }})</text>
                        <view class="discount-tag">8折优惠</view>
                    </view>
                    <u-radio active-color="#38C148" name="1" />
                </view>

                <!-- <view class="payment-item">
                    <view class="left">
                        <image src="/pages-mine/static/pay2.png" class="payment-icon"></image>
                        <text>组合支付</text>
                    </view>
                    <u-radio active-color="#38C148" name="3" />
                </view> -->
            </u-radio-group>
        </view>

        <view class="total">
            <text>总计</text>
            <text class="amount">¥ {{ formData.payType === '1' ? orderInfo.accountDiscountMoney : orderInfo.orderMoney }}</text>
        </view>

        <button class="confirm-btn" type="primary" @click="onConfirmPayment">确认支付</button>
        <button class="return-cart-btn" @click="returnToCart">返回购物车</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                formData: {
                    payType: '2',
                    orderId: ''
                },
                orderInfo: {}
            }
        },
        onLoad(options) {
            // 从本地存储获取订单信息
            const info = uni.getStorageSync('orderBuyInfo');
            if (info) {
                this.orderInfo = info;
                this.formData.orderId = info.orderId;
            } else {
                uni.showToast({
                    title: '订单信息不存在',
                    icon: 'none'
                });
                setTimeout(() => {
                    uni.navigateBack();
                }, 1500);
            }
        },
        methods: {
            radioGroupChange(e) {
                console.log(e);
            },

            // 统一支付方法
            handlePayment(payData) {
                // #ifdef MP-WEIXIN
                this.wxPayment(payData);
                // #endif

                // #ifdef MP-ALIPAY
                this.aliPayment(payData);
                // #endif
            },

            // 微信支付方法
            wxPayment(payData) {
                uni.requestPayment({
                    provider: 'wxpay',
                    timeStamp: payData.timeStamp,
                    nonceStr: payData.nonceStr,
                    package: `prepay_id=${payData.prepayId}`,
                    signType: payData.signType,
                    paySign: payData.paySign,
                    success: (res) => {
                        // 支付成功
                        this.paySuccess();
                    },
                    fail: (err) => {
                        console.error('微信支付失败:', err);
                        uni.showToast({
                            title: '支付失败',
                            icon: 'none'
                        });
                    }
                });
            },

            // 支付宝支付方法
            aliPayment(payData) {
                my.tradePay({
                    tradeNO: payData.tradeNo,
                    success: (res) => {
                        if (res.resultCode === '9000') {
                            // 支付成功
                            this.paySuccess();
                        } else {
                            uni.showToast({
                                title: '支付失败',
                                icon: 'none'
                            });
                        }
                    },
                    fail: (err) => {
                        console.error('支付宝支付失败:', err);
                        uni.showToast({
                            title: '支付失败',
                            icon: 'none'
                        });
                    }
                });
            },

            paySuccess() {
                uni.redirectTo({
                    url: `/pages-car/pages/pay-success?orderId=${this.orderInfo.orderId}`
                });
            },

            // 发起支付
            onConfirmPayment() {
                // 构建参数
                const params = {
                    payType: this.formData.payType,
                    orderId: this.orderInfo.orderId 
                };

                // 获取支付参数
                this.$u.api.payShopOrderAjax(params).then(res => {
                    if (res.code === 200) {
                        if (res.data.needPay == 1) {
                            // 调用统一支付方法
                            this.handlePayment(res.data);
                        } else {
                            // 不需要支付（如全额余额支付），直接跳转成功
                            this.paySuccess();
                        }
                    } else {
                        uni.showToast({
                            title: res.msg || '获取支付参数失败',
                            icon: 'none'
                        });
                    }
                }).catch(err => {
                    uni.showToast({
                        title: err.msg || '请求失败',
                        icon: 'none'
                    });
                })
            },
            
            // 返回购物车
            returnToCart() {
                uni.switchTab({
                    url: '/pages/cart/index'
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .cashier-desk {
        min-height: 100vh;
        background-color: #f5f5f5;

        .view-top {
            background: #38C148;
            height: 160rpx;
            width: 100%;
        }

        .payment-methods {
            background-color: #ffffff;
            border-radius: 16rpx;
            margin: 30rpx;
            margin-top: -40px;
            margin-bottom: 20rpx;

            .payment-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 30rpx;
                border-bottom: 1px solid #f5f5f5;

                &:last-child {
                    border-bottom: none;
                }

                .left {
                    display: flex;
                    align-items: center;
                    gap: 20rpx;

                    .payment-icon {
                        width: 40rpx;
                        height: 40rpx;
                    }

                    text {
                        font-size: 30rpx;
                        color: #333;
                    }

                    .discount-tag {
                        background: linear-gradient(90deg, #ff6034, #ee0a24);
                        color: #fff;
                        font-size: 22rpx;
                        padding: 4rpx 12rpx;
                        border-radius: 20rpx 20rpx 20rpx 0;
                        margin-left: 10rpx;
                        font-weight: bold;
                    }
                }
            }
        }

        .total {
            background-color: #ffffff;
            border-radius: 16rpx;
            padding: 30rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 30rpx;
            margin-bottom: 20rpx;

            text {
                font-size: 30rpx;
                color: #333;
            }

            .amount {
                color: #ff0000;
                font-size: 32rpx;
                font-weight: bold;
            }
        }

        .confirm-btn {
            width: 90%;
            margin-left: 5%;
            margin-top: 100rpx;
            background: #38C148;
            color: #fff;
            border-radius: 45rpx;

            &::after {
                border: none;
            }
        }

        .return-cart-btn {
            width: 90%;
            margin-left: 5%;
            margin-top: 40rpx;
            background: #ffffff;
            color: #38C148;
            border-radius: 45rpx;
            font-size: 32rpx;

            &::after {
                border: 1px solid #38C148;
                border-radius: 90rpx; /* border-radius for ::after pseudo element should be double because of 200% scale in uni-app */
            }
        }
    }
</style>