caimei-applets-hehe/pages/user/order/success.vue

<template>
    <view class="container cashier">
        <header-pay
            :systeminfo="systeminfo"
            :navbar-data="nvabarData"
            :headerBtnPosi="headerBtnPosi"
            :isBackType="true"
            :path="'/pages/user/cart/cart'"
        >
        </header-pay>
        <view class="container-cash clearfix" :style="{ marginTop: CustomBar + 'px' }">
            <view class="container-wrapper">
                <view class="cash-icon"> <image :src="StaticUrl + 'icon-pay-fail.png'" mode=""></image> </view>
                <view class="cash-text">
                    <text>{{ successText }}</text>
                </view>
            </view>
            <view class="container-money">
                <view class="label">支付金额</view>
                <view class="money">￥{{ orderInfo.payableAmount | NumFormat }}</view>
            </view>
            <view class="container-button">
                <view class="btn btn-pay" @click="MiniWxPayFor(orderInfo)">重新支付</view>
                <view
                    class="btn btn-open"
                    @click="
                        this.$api.redirectTo('/pages/user/order/order-details?type=confim&orderId=' + orderInfo.orderId)
                    "
                    >查看订单</view
                >
            </view>
        </view>
    </view>
</template>

<script>
import HeaderPay from '@/components/cm-module/headerNavbar/header-pay'
import authorize from '@/common/authorize.js'
export default {
    components: {
        HeaderPay
    },
    data() {
        return {
            StaticUrl: this.$Static,
            orderId: '',
            nvabarData: {
                //顶部自定义导航
                haveBack: false,
                showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
                showSearch: 0,
                title: '支付结果', // 导航栏 中间的标题
                textLeft: this.$store.getters.isIphone
            },
            headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
            systeminfo: this.setSysteminfo(), //获取设备信息
            isIphoneX: this.$store.getters.isIphoneX,
            CustomBar: this.CustomBar, // 顶部导航栏高度
            successText: '订单支付失败',
            orderInfo: {}
        }
    },
    onLoad(option) {
        console.log(option)
        let data = JSON.parse(option.data)
        this.orderInfo = data.data
        console.log(this.orderInfo)
    },
    filters: {
        NumFormat(value) {
            //处理金额
            console.log(value)
            return Number(value).toFixed(2)
        }
    },
    methods: {
        setHeaderBtnPosi() {
            // 获得胶囊按钮位置信息
            let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
            return headerBtnPosi
        },
        setSysteminfo() {
            let systeminfo
            uni.getSystemInfo({
                // 获取设备信息
                success: res => {
                    systeminfo = res
                }
            })
            return systeminfo
        },
        MiniWxPayFor(data) {
            this.PayService.PayOrderOnLineSwitch().then(response => {
                if (response.data === 1) {
                    this.WeChatMiniWxPay(data)
                } else {
                    this.$api.navigateTo(`/pages/user/order/order-payment?money=${data.payableAmount}`)
                }
            })
        },
        async WeChatMiniWxPay(data) {
            const wechatCode = await authorize.getCode('weixin')
            this.PayService.WeChatMiniWxPay({
                payAmount: data.payableAmount * 100,
                payWay: 'WEIXIN',
                code: wechatCode,
                orderId: data.orderId
            })
                .then(response => {
                    let PayInfo = JSON.parse(response.data.data.payInfo)
                    this.WxRequestPayment(PayInfo)
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        WxRequestPayment(data) {
            let self = this
            wx.requestPayment({
                timeStamp: data.timeStamp,
                nonceStr: data.nonceStr,
                package: data.package,
                signType: data.signType,
                paySign: data.paySign,
                success: function(res) {
                    wx.reLaunch({ url: '/pages/tabBar/index/index' })
                },
                fail: function(res) {
                    console.log(res)
                    self.$api.redirectTo(`/pages/user/order/success?data=${JSON.stringify({ data: self.orderInfo })}`)
                },
                complete: function(res) {}
            })
        }
    },
    onShow() {}
}
</script>

<style lang="scss">
page {
    background-color: #f7f7f7;
    height: auto !important;
}
.container-cash {
    width: 100%;
    .container-wrapper {
        width: 100%;
        margin: 0 auto;
        margin-top: 120rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #ffffff;
        .cash-icon {
            width: 210rpx;
            height: 210rpx;
            margin-top: 112rpx;
            image {
                width: 210rpx;
                height: 210rpx;
            }
        }
        .cash-text {
            font-size: $font-size-28;
            color: #666666;
            line-height: 104rpx;
            font-weight: bold;
        }
    }
    .container-money {
        width: 100%;
        height: 90rpx;
        float: left;
        line-height: 90rpx;
        font-size: $font-size-28;
        box-sizing: border-box;
        padding: 0 24rpx;
        margin-top: 20rpx;
        background-color: #ffffff;
        .label {
            float: left;
            color: #333333;
        }
        .money {
            float: right;
            color: #666666;
        }
    }
    .container-button {
        width: 100%;
        height: auto;
        float: left;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 160rpx;
        .btn {
            width: 600rpx;
            height: 90rpx;
            border-radius: 45rpx;
            line-height: 90rpx;
            text-align: center;
            font-size: $font-size-26;
            color: #ffffff;
            box-sizing: border-box;
            border: 1px solid $color-system;
            margin-bottom: 24rpx;
            &.btn-open {
                color: $color-system;
            }
            &.btn-pay {
                border-color: $color-system;
                background: $btn-confirm;
            }
        }
    }
}
</style>