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-success.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="goHome">继续购买</view>
                <view class="btn btn-open" @click="searchOrder">查看订单</view>
            </view>
        </view>
        <cm-loading :visible="isSubLoading" :text="loadingText"></cm-loading>
    </view>
</template>

<script>
import HeaderPay from '@/components/cm-module/headerNavbar/header-pay'
import authorize from '@/common/authorize.js'
import CmLoading from '@/components/cm-module/cm-loading/cm-loading.vue'
import wechatPay from '@/mixins/wechatPay.js'
import { mapGetters } from 'vuex'
export default {
    components: {
        HeaderPay,
        CmLoading
    },
    // 混入支付
    mixins: [wechatPay],
    data() {
        return {
            StaticUrl: this.$Static,
            CustomBar: this.CustomBar, // 顶部导航栏高度
            orderId: '',
            nvabarData: {
                //顶部自定义导航
                haveBack: false,
                showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
                showSearch: 0,
                title: '支付结果', // 导航栏 中间的标题
                textLeft: this.$store.getters.isIphone
            },
            headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
            systeminfo: this.setSysteminfo(), //获取设备信息
            successText: '订单支付成功',
            orderInfo: {}
        }
    },
    onLoad() {
        this.initOrderInfo()
    },
    filters: {
        NumFormat(value) {
            //处理金额
            return Number(value).toFixed(2)
        }
    },
    computed: {
        ...mapGetters(['isIphoneX']),
        hanldOrder() {
            return {
                order: this.orderInfo
            }
        }
    },
    methods: {
        initOrderInfo() {
            this.orderInfo = uni.getStorageSync('orderInfo')
            uni.removeStorageSync('orderInfo')
        },
        setHeaderBtnPosi() {
            // 获得胶囊按钮位置信息
            let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
            return headerBtnPosi
        },
        setSysteminfo() {
            let systeminfo
            uni.getSystemInfo({
                // 获取设备信息
                success: res => {
                    systeminfo = res
                }
            })
            return systeminfo
        },
        // 回到首页
        goHome() {
            uni.reLaunch({ url: '/pages/tabBar/index/index' })
        },
        // 查看订单
        searchOrder() {
            this.$api.redirectTo('/pages/user/order/order-details?type=confim&orderId=' + this.orderInfo.orderId)
        }
    }
}
</script>

<style lang="scss" scoped>
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>