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

<template>
    <view class="container cashier">
        <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 | formatPrice }}</view>
            </view>
            <view class="container-button">
                <view class="btn btn-pay" @click="goHome" v-if="!hasOtherSplitOrder">继续购买</view>
                <view class="btn btn-pay" @click="onPayOnce" v-else>继续支付</view>
                <view class="btn btn-open" @click="searchOrder">查看订单</view>
            </view>
        </view>
        <cm-loading :visible="isSubLoading" :text="loadingText"></cm-loading>
    </view>
</template>

<script>
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: {
        CmLoading
    },
    // 混入支付
    mixins: [wechatPay],
    data() {
        return {
            StaticUrl: this.$Static,
            orderId: '',
            successText: '订单支付成功',
            orderInfo: {},
            orderDetail: {},
            mapStateArr: [11, 12, 13, 21, 22, 23, 111]
        }
    },
    onLoad() {
        this.initOrderInfo()
    },
    computed: {
        ...mapGetters(['isIphoneX']),
        hanldOrder() {
            return {
                order: this.orderInfo
            }
        },
        hasOtherSplitOrder() {
            return this.mapStateArr.includes(parseInt(this.orderDetail.status))
        }
    },
    methods: {
        initOrderInfo() {
            this.orderInfo = uni.getStorageSync('orderInfo')
            uni.removeStorageSync('orderInfo')
            this.getOrderDetail()
        },
        // 回到首页
        goHome() {
            uni.reLaunch({ url: '/pages/tabBar/index/index' })
        },
        // 查看订单
        searchOrder() {
            this.$api.redirectTo('/pages/order/order-detail?type=confim&orderId=' + this.orderInfo.orderId)
        },
        getOrderDetail() {
            this.OrderService.QueryOrderDetails({ orderId: this.orderInfo.orderId })
                .then(res => {
                    this.orderDetail = res.data.order
                })
                .catch(err => {
                    this.$util.modal('提示', '订单查询失败，请稍后重试~', '确定', '', false, () => {
                        this.$api.switchTabTo('/pages/tabBar/index/index')
                    })
                })
        },
        onPayOnce() {
            this.$api.navigateTo('/pages/order/order-pay?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>