yihuo/pages/recharge/index.vue

<template>
    <page title="充值" ref="pageRef">
        <view class="paddingX24 paddingT32">
            <view class="input-wrapper flex-align marginT15">
                <view class="font5">充值金额:</view>
                <input
                    v-model.trim="money"
                    type="digit"
                    class="flex1 marginX10 font5"
                    placeholder="请输入金额"
                />
            </view>
            <view class="text-center color-2 paddingT36">充值金额可以用于购买手办，宝箱</view>
            <view class="text-center color-2 paddingT5 paddingB20">充值金额不可提现</view>
            <view>
                <cm-button ::height="44" @click="apply">充值</cm-button>
                <view
                    class="color-theme marginT20 text-center"
                    @click="$router.push('recharge_record')"
                >
                    充值记录>>
                </view>
            </view>
        </view>
    </page>
</template>
<script>
    import { throttle } from '@/utils'
    import { baseEncode } from '../../utils/utils'
    export default {
        data() {
            return {
                money: ''
            }
        },
        computed: {
            payInfo() {
                return this.$store.state.payInfo
            }
        },
        watch: {
            payInfo(val) {
                if (val && val.payResult == 'SUCCESS') {
                    this.paySuccess(val)
                } else if (val && val.payResult !== 'SUCCESS') {
                }
            }
        },
        methods: {
            apply() {
                if (!this.$common.checkLogin()) return
                if (!this.money) return
                throttle.call(() => {
                    this.realApply()
                })
            },
            async realApply() {
                const res = await this.$service.wallet.recharge(this.money, 'WXPAY_JSAPI', 'CASH')
                if (res) {
                    if (res.redirectUrl) {
                        this.thirdPay(res)
                    } else {
                        let payInfo = res.payInfo
                        wx.requestPayment({
                            timeStamp: payInfo.timeStamp,
                            nonceStr: payInfo.nonceStr,
                            package: payInfo.packageValue,
                            signType: payInfo.signType,
                            paySign: payInfo.paySign,
                            success: (res) => {
                                this.money = ''
                                this.$router.push('recharge_record')
                            },
                            fail: (res) => {}
                        })
                    }
                }
            },
            thirdPay(data) {
                let self = this
                let redirectUrl = data.redirectUrl
                let requestId = data.requestId
                const base64Url = encodeURIComponent(baseEncode(redirectUrl))
                wx.openEmbeddedMiniProgram({
                    path: 'pages/pay/order', // 启动目标页面
                    appId: 'wx0448557563ffc600', // 启动的小程序
                    envVersion: 'release', // develop | trial | release
                    verify: 'binding',
                    extraData: {
                        title: '订单付款', // 导航Title
                        tip: `待支付订单付款`, // 支付提示内容
                        requestId: requestId, // 本次请求ID
                        action: 'epPay', // 支付模式
                        payUrl: base64Url // 支付地址, 需要进行Base64转换
                    },
                    success: (res) => {
                        console.info('启动成功', res)
                    },
                    fail: (err) => {
                        console.info('启动失败', err)
                    }
                })
            },
            paySuccess(payInfo) {
                this.money = ''
                this.$router.push('recharge_record')
                this.$store.state.payInfo = null
            }
        }
    }
</script>

<style>
    page {
        background: #fff;
    }
</style>
<style lang="scss" scoped>
    .input-wrapper {
        height: 104rpx;
        border: 2rpx solid #ddd;
        border-radius: 16rpx;
        padding: 0 32rpx;
    }
</style>