caimei-applets-store/pages/views/order/pay-faild.vue

<template>
    <view class="pay-result">
        <!-- 提示图标 -->
        <view class="tip-icon">
            <image class="icon" :src="staticUrl + 'icon-pay-fail.png'"></image>
            <view class="tip">订单支付失败~~</view>
        </view>
        <!-- 支付金额 -->
        <view class="payAmount">
            <text class="label">支付金额：</text>
            <text class="price">￥{{ orderInfo.payableAmount | priceFormat }}</text>
        </view>
        <!-- 执行操作 -->
        <view class="control">
            <tui-button type="base" width="600rpx" height="90rpx" shape="circle" :size="28" @click="onPayAgain">
                重新支付
            </tui-button>
            <tui-button
                type="base"
                :plain="true"
                width="600rpx"
                height="90rpx"
                shape="circle"
                :size="28"
                @click="onSearch"
            >
                查看订单
            </tui-button>
        </view>
    </view>
</template>

<script>
import wechatPayMixin from '@/pages/views/order/mixins/wechatPay.js'
export default {
    mixins: [wechatPayMixin],
    data() {
        return {
            orderInfo: {
                collageId: '0',
                orderId: '18897',
                orderMark: '#18897#',
                orderNo: 'H164783438949249',
                payTotalFee: '0',
                payableAmount: '0'
            }
        }
    },
    beforeDestroy() {
        uni.removeStorageSync('PAY_ORDER_INFO')
    },
    onLoad() {
        this.orderInfo = uni.getStorageSync('PAY_ORDER_INFO')
    },
    methods: {
        onPayAgain() {
            this.miniWxPayFor(this.orderInfo)
        },
        onSearch() {
            this.$router.redirectTo('order/order-detail?orderId=' + this.orderInfo.orderId)
        }
    }
}
</script>

<style lang="scss" scoped>
.pay-result {
    height: 100vh;
    .tip-icon {
        @extend .cm-flex-center;
        flex-direction: column;
        height: 340rpx;
        background-color: #fff;
        .icon {
            width: 210rpx;
            height: 210rpx;
        }
        .tip {
            margin-top: 24rpx;
            font-size: 28rpx;
            font-weight: bold;
            color: #666;
        }
    }

    .payAmount {
        @extend .cm-flex-between;
        height: 90rpx;
        padding: 0 24rpx;
        margin-top: 24rpx;
        font-size: 28rpx;
        background-color: #fff;
        .label {
            color: #333333;
        }

        .price {
            color: #666666;
        }
    }

    .control {
        @extend .cm-flex-between;
        flex-direction: column;
        height: 204rpx;
        margin-top: 100rpx;
    }
}
</style>