book-hi/pages-mine/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="1" />
                </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="1" />
                </view>
                <!-- #endif -->

                <view class="payment-item">
                    <view class="left">
                        <image src="/static/payment/pay2.png" class="payment-icon"></image>
                        <text>余额支付(余额{{ baseInfo.restMoney || 0 }})</text>
                    </view>
                    <u-radio active-color="#38C148" name="2" />
                </view>

                <view class="payment-item">
                    <view class="left">
                        <image src="/static/payment/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">¥ {{ baseInfo.expressMoney || 0 }}</text>
        </view>

        <button class="confirm-btn" @click="onConfirmPayment">确认支付</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            totalAmount: 7.00,
            formData: {
                payType: '1',
                refundOrderId: ''
            },
            baseInfo: {}
        }
    },
    onLoad(options) {
        if (options.id) {
            this.formData.refundOrderId = options.id
            this.getBaseInfo(options.id)
        }
    },
    methods: {
        //获取基本信息
        getBaseInfo(refundOrderId) {
            uni.$u.http.post('/token/order/refundGoPay', {
                refundOrderId
            }).then(res => {
                if (res.code === 200) {
                    this.baseInfo = res.data
                }
            })
        },

        // 统一支付方法
        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) => {
                    //支付成功之后，跳转支付成功页面
                    uni.navigateTo({
                        url: `/pages-mine/pages/pay-success?orderId=${this.formData.refundOrderId}`
                    });
                },
                fail: (err) => {
                    console.error('微信支付失败:', err);
                    uni.showToast({
                        title: '支付失败',
                        icon: 'none'
                    });
                }
            });
        },

        // 支付宝支付方法
        aliPayment(payData) {
            my.tradePay({
                tradeNO: payData.tradeNo,
                success: (res) => {
                    if (res.resultCode === '9000') {
                        // 支付成功
                        uni.navigateTo({
                            url: `/pages-mine/pages/pay-success?orderId=${this.formData.refundOrderId}`
                        });
                    } else {
                        uni.showToast({
                            title: '支付失败',
                            icon: 'none'
                        });
                    }
                },
                fail: (err) => {
                    console.error('支付宝支付失败:', err);
                    uni.showToast({
                        title: '支付失败',
                        icon: 'none'
                    });
                }
            });
        },

        // 发起支付
        onConfirmPayment() {
            // 获取支付参数
            uni.$u.post('/token/order/refundOrderPay', this.formData).then(res => {
                if (res.code === 200) {
                    if (res.data.needPay == 1) {
                        // 调用统一支付方法
                        this.handlePayment(res.data);
                    } else {
                        uni.navigateTo({
                            url: `/pages-mine/pages/pay-success?orderId=${this.formData.refundOrderId}`
                        });
                    }
                } else {
                    uni.showToast({
                        title: res.msg || '获取支付参数失败',
                        icon: 'none'
                    });
                }
            }).catch(err => {
                uni.showToast({
                    title: err.msg || '获取支付参数失败',
                    icon: 'none'
                });
            })
        },

        radioGroupChange(e) {
            console.log(e);
        }
    }
}
</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-bottom: 20rpx;
        margin: 30rpx;
        margin-top: -40px;

        .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;
                }
            }
        }
    }

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

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

    .confirm-btn {
        width: 90%;
        margin-left: 5%;
        margin-top: 100rpx;
    }
}
</style>