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">
                <view class="payment-item">
                    <view class="left">
                        <image src="../static/pay1.png" class="payment-icon"></image>
                        <text>微信支付</text>
                    </view>
                    <u-radio active-color="#38C148" name="1" />
                </view>
                <view class="payment-item">
                    <view class="left">
                        <image src="../static/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/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
                }
            })
        },

        onConfirmPayment() {
            uni.showLoading({
                title: '支付处理中'
            })
            uni.$u.http.post('/token/order/refundOrderPay', this.formData).then(res => {
                if (res.code == 200) {
                    if (res.data.needPay == 1) {
                        // TODO: 调用支付接口
                        uni.requestPayment({
                            timeStamp: res.data.timeStamp,
                            nonceStr: res.data.nonceStr,
                            package: `prepay_id=${res.data.prepayId}`,
                            signType: res.data.signType,
                            paySign: res.data.paySign,
                            provider: 'wxpay',
                            success: (res) => {
                                //支付成功之后，跳转支付成功页面
                                uni.navigateTo({
                                    url: `/pages-mine/pages/pay-success?orderId=${this.formData.refundOrderId}`
                                })
                            },
                            fail: (err) => {
                                console.log(err)
                            }
                        })
                    } else {
                        //支付成功之后，跳转支付成功页面
                        uni.navigateTo({
                            url: `/pages-mine/pages/pay-success?orderId=${this.formData.refundOrderId}`
                        })
                    }
                }
            })
        },

        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>